Refactor frontend: Enhance chat UI and player initialization
- Updated main.ts to streamline player and chat initialization, removing Alpine.js dependency. - Improved message rendering with new CSS classes for better styling and layout. - Added a function to simulate "now playing" titles at regular intervals. - Revamped style.css with a new design system using CSS variables for better maintainability. - Removed tailwind.config.js as Tailwind CSS is no longer used.
This commit is contained in:
zwitschi committed
1 parent
7cfddfc7ef
commit
fca4286d87
10 files changed
+1831
-1525
No files matched your search
+42
-49
@@ -5,76 +5,69 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Linear Void - 24/7 Synchronized Channel</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<link rel="stylesheet" href="/src/style.css" />
|
||||
</head>
|
||||
|
||||
<body class="bg-slate-950 text-slate-200">
|
||||
<div class="flex h-screen">
|
||||
<!-- Video Player -->
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="p-4 border-b border-slate-800 flex items-center justify-between bg-slate-900">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold">LV</div>
|
||||
<body class="lv-body">
|
||||
<main class="viewer-shell" aria-label="Live player and chat">
|
||||
<section class="viewer-main" aria-label="Video stream panel">
|
||||
<header class="viewer-header">
|
||||
<div class="viewer-brand-group">
|
||||
<div class="brand-badge" aria-hidden="true">LV</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Linear Void</h1>
|
||||
<p class="text-xs text-emerald-400">24/7 Synchronized Channel • Live</p>
|
||||
<h1 class="viewer-title">Linear Void</h1>
|
||||
<p class="viewer-subtitle">24/7 Synchronized Channel • Live</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="now-playing px-4 py-1 rounded-full text-sm font-medium flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
|
||||
<div class="now-playing-pill" aria-live="polite">
|
||||
<span class="live-dot" aria-hidden="true"></span>
|
||||
<span id="now-playing">Loading schedule...</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 flex items-center justify-center p-8 bg-black relative">
|
||||
<video id="player" class="max-h-full rounded-xl shadow-2xl" controls autoplay muted playsinline></video>
|
||||
<div id="now-playing-overlay" class="absolute bottom-8 left-8 bg-black/70 backdrop-blur-md px-6 py-3 rounded-2xl text-sm hidden">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-emerald-400">● LIVE</div>
|
||||
<div id="overlay-title" class="font-medium"></div>
|
||||
<section class="player-stage" aria-label="Video stage">
|
||||
<video id="player" class="player" controls autoplay muted playsinline></video>
|
||||
<div id="now-playing-overlay" class="now-playing-overlay hidden" aria-live="polite">
|
||||
<div class="now-playing-overlay-inner">
|
||||
<span class="live-label">LIVE</span>
|
||||
<span id="overlay-title" class="overlay-title"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="p-4 bg-slate-900 border-t border-slate-800 text-xs text-slate-400 flex justify-between">
|
||||
<footer class="viewer-footer">
|
||||
<div>Latency: ~25s • Synced</div>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" onclick="switchRoom('main')" class="hover:text-white">Main Channel</a>
|
||||
<a href="#" onclick="switchRoom('chill')" class="hover:text-white">Chill Room</a>
|
||||
<a href="#" onclick="switchRoom('talk')" class="hover:text-white">Talk Room</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="room-links" aria-label="Quick room switch">
|
||||
<a href="#" onclick="switchRoom('main'); return false;">Main Channel</a>
|
||||
<a href="#" onclick="switchRoom('chill'); return false;">Chill Room</a>
|
||||
<a href="#" onclick="switchRoom('talk'); return false;">Talk Room</a>
|
||||
</nav>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<!-- Chat Sidebar -->
|
||||
<div class="w-96 flex flex-col border-l border-slate-800 bg-slate-900 chat-sidebar">
|
||||
<div class="p-4 border-b border-slate-700 font-medium flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-emerald-400">●</span>
|
||||
<aside class="chat-sidebar" aria-label="Chat panel">
|
||||
<header class="chat-header">
|
||||
<div class="chat-room-title">
|
||||
<span class="chat-live-marker" aria-hidden="true">●</span>
|
||||
<span id="room-name">Main Channel</span>
|
||||
</div>
|
||||
<button onclick="togglePrivateDM()" class="text-xs px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg">New DM</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary" onclick="togglePrivateDM()">New DM</button>
|
||||
</header>
|
||||
|
||||
<!-- Messages -->
|
||||
<div id="messages" class="flex-1 p-4 overflow-y-auto space-y-4 text-sm">
|
||||
<!-- Messages populated by JS -->
|
||||
</div>
|
||||
<section id="messages" class="chat-messages" aria-live="polite" aria-label="Message stream"></section>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="p-4 border-t border-slate-700">
|
||||
<div class="flex gap-2">
|
||||
<input id="message-input" type="text" placeholder="Type a message..." class="input flex-1 px-4 py-3 rounded-2xl text-sm focus:outline-none" onkeydown="if(event.key === 'Enter') sendMessage()">
|
||||
<button onclick="sendMessage()" class="bg-blue-600 hover:bg-blue-500 px-6 rounded-2xl text-sm font-medium">Send</button>
|
||||
<div class="chat-input-area">
|
||||
<div class="chat-input-row">
|
||||
<label for="message-input" class="sr-only">Message input</label>
|
||||
<input id="message-input" type="text" placeholder="Type a message..." class="input" onkeydown="if(event.key === 'Enter') sendMessage()" />
|
||||
<button type="button" class="btn btn-primary" onclick="sendMessage()">Send</button>
|
||||
</div>
|
||||
<div class="text-[10px] text-slate-500 mt-2 text-center">
|
||||
<p class="chat-note">
|
||||
Synced with video • Moderation active
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
Reference in new issue
Block a user