diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5ef6a52
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
index dc9f411..e215bc4 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,36 @@
-# aethex.live
\ No newline at end of file
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..9d818de
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,56 @@
+@import "tailwindcss";
+
+:root {
+ --background: #000000;
+ --foreground: #ffffff;
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --font-sans: var(--font-sans);
+ --font-mono: var(--font-mono);
+}
+
+body {
+ background: linear-gradient(to bottom, #000000, #0a0a1a);
+ color: var(--foreground);
+ font-family: var(--font-sans);
+ min-height: 100vh;
+}
+
+/* Sci-fi aesthetic animations */
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate-fade-in {
+ animation: fade-in 0.3s ease-out;
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(6, 182, 212, 0.5);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(6, 182, 212, 0.7);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..c6fa480
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ title: "AeThex Live - Live Stream",
+ description: "Watch AeThex live streaming content 24/7",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..cf1d182
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,86 @@
+'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 (
+
+ {/* Header */}
+
+
+
+
+
+ A
+
+
+
+ AeThex LABS
+
+
Live Stream
+
+
+
+
+
+
+
+
+
+
+
+ {/* Main Content */}
+
+ {/* Video Player Section */}
+
+ {/* Video Player */}
+
+
+
+
+ {/* Video Info Bar */}
+
+
+
+ {/* Chat Sidebar */}
+ {showChat && (
+
+
+
+ )}
+
+
+ {/* Footer */}
+
+
+ );
+}
diff --git a/components/ChatSidebar.tsx b/components/ChatSidebar.tsx
new file mode 100644
index 0000000..74757ec
--- /dev/null
+++ b/components/ChatSidebar.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface ChatMessage {
+ id: string;
+ username: string;
+ message: string;
+ timestamp: Date;
+}
+
+export default function ChatSidebar() {
+ const [messages, setMessages] = useState([
+ {
+ id: '1',
+ username: 'CyberUser',
+ message: 'Welcome to AeThex Live!',
+ timestamp: new Date(),
+ },
+ {
+ id: '2',
+ username: 'TechFan',
+ message: 'This stream is amazing!',
+ timestamp: new Date(),
+ },
+ ]);
+ const [inputMessage, setInputMessage] = useState('');
+ const messagesEndRef = useRef(null);
+
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ };
+
+ useEffect(() => {
+ // Simulate new messages
+ const interval = setInterval(() => {
+ const randomUsers = ['NeuralNet', 'DataStream', 'QuantumBit', 'CyberPunk'];
+ const randomMessages = [
+ 'Great content!',
+ 'Love the vibe',
+ '🔥🔥🔥',
+ 'Keep it up!',
+ 'Amazing quality',
+ ];
+
+ const newMessage: ChatMessage = {
+ id: Date.now().toString(),
+ username: randomUsers[Math.floor(Math.random() * randomUsers.length)],
+ message: randomMessages[Math.floor(Math.random() * randomMessages.length)],
+ timestamp: new Date(),
+ };
+
+ setMessages((prev) => [...prev.slice(-49), newMessage]);
+ }, 10000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ useEffect(() => {
+ scrollToBottom();
+ }, [messages]);
+
+ const handleSendMessage = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!inputMessage.trim()) return;
+
+ const newMessage: ChatMessage = {
+ id: Date.now().toString(),
+ username: 'You',
+ message: inputMessage,
+ timestamp: new Date(),
+ };
+
+ setMessages((prev) => [...prev, newMessage]);
+ setInputMessage('');
+ };
+
+ return (
+
+
+
+
+ {messages.map((msg) => (
+
+
+
+ {msg.username}:
+
+
+ {msg.message}
+
+
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/components/HLSPlayer.tsx b/components/HLSPlayer.tsx
new file mode 100644
index 0000000..eacccea
--- /dev/null
+++ b/components/HLSPlayer.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Hls from 'hls.js';
+
+interface HLSPlayerProps {
+ src: string;
+ autoPlay?: boolean;
+ loop?: boolean;
+ muted?: boolean;
+}
+
+export default function HLSPlayer({
+ src,
+ autoPlay = true,
+ loop = true,
+ muted = true,
+}: HLSPlayerProps) {
+ const videoRef = useRef(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const hlsRef = useRef(null);
+
+ useEffect(() => {
+ const video = videoRef.current;
+ if (!video) return;
+
+ let mounted = true;
+
+ const initializePlayer = () => {
+ if (Hls.isSupported()) {
+ const hls = new Hls({
+ enableWorker: true,
+ lowLatencyMode: true,
+ });
+ hlsRef.current = hls;
+
+ hls.loadSource(src);
+ hls.attachMedia(video);
+
+ hls.on(Hls.Events.MANIFEST_PARSED, () => {
+ if (mounted) {
+ setIsLoading(false);
+ if (autoPlay) {
+ video.play().catch((err) => {
+ console.error('Autoplay failed:', err);
+ });
+ }
+ }
+ });
+
+ hls.on(Hls.Events.ERROR, (event, data) => {
+ console.error('HLS error:', data);
+ if (data.fatal && mounted) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ setError('Network error - attempting to recover');
+ hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ setError('Media error - attempting to recover');
+ hls.recoverMediaError();
+ break;
+ default:
+ setError('Fatal error - cannot recover');
+ hls.destroy();
+ break;
+ }
+ }
+ });
+ } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+ // For Safari native HLS support
+ video.src = src;
+ const handleLoadedMetadata = () => {
+ if (mounted) {
+ setIsLoading(false);
+ if (autoPlay) {
+ video.play().catch((err) => {
+ console.error('Autoplay failed:', err);
+ });
+ }
+ }
+ };
+ video.addEventListener('loadedmetadata', handleLoadedMetadata);
+
+ return () => {
+ video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+ };
+ } else if (mounted) {
+ setError('HLS is not supported in this browser');
+ setIsLoading(false);
+ }
+ };
+
+ initializePlayer();
+
+ return () => {
+ mounted = false;
+ if (hlsRef.current) {
+ hlsRef.current.destroy();
+ hlsRef.current = null;
+ }
+ };
+ }, [src, autoPlay]);
+
+ return (
+
+
+ {isLoading && (
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+ );
+}
diff --git a/components/NowPlaying.tsx b/components/NowPlaying.tsx
new file mode 100644
index 0000000..7149473
--- /dev/null
+++ b/components/NowPlaying.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface Track {
+ title: string;
+ artist: string;
+ album?: string;
+}
+
+export default function NowPlaying() {
+ const [currentTrack, setCurrentTrack] = useState