86 lines
3 KiB
TypeScript
86 lines
3 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import HLSPlayer from '@/components/HLSPlayer';
|
|
import ViewerCount from '@/components/ViewerCount';
|
|
import NowPlaying from '@/components/NowPlaying';
|
|
import ChatSidebar from '@/components/ChatSidebar';
|
|
|
|
export default function Home() {
|
|
const [showChat, setShowChat] = useState(true);
|
|
|
|
// Demo HLS stream URL - replace with your actual stream URL
|
|
const streamUrl = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-black to-slate-900 text-white">
|
|
{/* Header */}
|
|
<header className="bg-black/50 backdrop-blur-sm border-b border-cyan-500/30 sticky top-0 z-50">
|
|
<div className="container mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-lg flex items-center justify-center font-bold text-xl">
|
|
A
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
AeThex LABS
|
|
</h1>
|
|
<p className="text-xs text-cyan-400/60 font-mono">Live Stream</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<ViewerCount />
|
|
<button
|
|
onClick={() => setShowChat(!showChat)}
|
|
className="lg:hidden bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/50 text-cyan-400 px-4 py-2 rounded-lg transition-colors font-mono text-sm"
|
|
>
|
|
{showChat ? 'Hide Chat' : 'Show Chat'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex flex-col lg:flex-row h-[calc(100vh-73px)]">
|
|
{/* Video Player Section */}
|
|
<div className="flex-1 flex flex-col">
|
|
{/* Video Player */}
|
|
<div className="flex-1 bg-black">
|
|
<HLSPlayer
|
|
src={streamUrl}
|
|
autoPlay={true}
|
|
loop={true}
|
|
muted={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Video Info Bar */}
|
|
<div className="bg-black/80 backdrop-blur-sm border-t border-cyan-500/30 p-4">
|
|
<div className="container mx-auto">
|
|
<NowPlaying />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat Sidebar */}
|
|
{showChat && (
|
|
<div className="w-full lg:w-96 h-64 lg:h-auto">
|
|
<ChatSidebar />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-black/50 backdrop-blur-sm border-t border-cyan-500/30 py-4">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<p className="text-cyan-400/60 text-sm font-mono">
|
|
© 2026 AeThex LABS - Live Streaming Platform
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|