UI upgrade

.gitignore

@@ -0,0 +1,2 @@
+*/__pycache__
+*/__pycache__/*

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": false
+}

Dockerfile

@@ -6,8 +6,7 @@ RUN apt-get update && apt-get install -y ffmpeg curl && \
     chmod a+rx /usr/local/bin/yt-dlp
 
 WORKDIR /app
-COPY requirements.txt .
-RUN pip install -r requirements.txt
 COPY . .
+RUN pip install -r backend/requirements.txt
 
-CMD ["python", "main.py"]
+CMD ["python", "backend/main.py"]

backend/main.py

@@ -1,10 +1,26 @@
 from flask import Flask, request, Response, send_from_directory, jsonify
-import subprocess
 import requests
+from flask_cors import CORS
+import urllib.parse
+from requests.adapters import HTTPAdapter
+from urllib3.util import Retry
+import yt_dlp
+import io
 
-app = Flask(__name__, static_folder='../frontend', static_url_path='')
+# Serve frontend static files under `/static` to avoid colliding with API routes
+app = Flask(__name__, static_folder='../frontend', static_url_path='/static')
 app.url_map.strict_slashes = False
 
+# Use flask-cors for API routes
+CORS(app, resources={r"/api/*": {"origins": "*"}})
+
+# Configure a requests session with retries
+session = requests.Session()
+retries = Retry(total=2, backoff_factor=0.2, status_forcelist=(500, 502, 503, 504))
+adapter = HTTPAdapter(max_retries=retries)
+session.mount('http://', adapter)
+session.mount('https://', adapter)
+
 @app.route('/api/status', methods=['POST', 'GET'])
 def proxy_status():
     if request.method == 'POST':
@@ -16,15 +32,74 @@ def proxy_status():
 
     if not target_server:
         return jsonify({"error": "No server provided"}), 400
+    if target_server.endswith('/'):
+        target_server = target_server[:-1]
+    target_server = f"{target_server.strip()}/api/status"
+    # Validate target URL
+    parsed = urllib.parse.urlparse(target_server)
+    if parsed.scheme not in ('http', 'https') or not parsed.netloc:
+        return jsonify({"error": "Invalid target URL"}), 400
 
     try:
-        # Use the data gathered above
-        response = requests.post(target_server, json=client_data if request.method == 'POST' else {}, timeout=5)
-        return (response.content, response.status_code, response.headers.items())
+        # Forward a small set of safe request headers
+        safe_request_headers = {}
+        for k in ('User-Agent', 'Accept', 'Accept-Encoding', 'Accept-Language', 'Range'):
+            if k in request.headers:
+                safe_request_headers[k] = request.headers[k]
+
+        # Remove hop-by-hop request headers per RFC
+        for hop in ('Connection', 'Keep-Alive', 'Proxy-Authenticate', 'Proxy-Authorization', 'TE', 'Trailers', 'Transfer-Encoding', 'Upgrade'):
+            safe_request_headers.pop(hop, None)
+
+        # Stream the GET via a session with small retry policy
+        resp = session.get(target_server, headers=safe_request_headers, timeout=5, stream=True)
+
+        hop_by_hop = {
+            'connection', 'keep-alive', 'proxy-authenticate', 'proxy-authorization',
+            'te', 'trailers', 'transfer-encoding', 'upgrade'
+        }
+
+        forwarded_headers = []
+        for name, value in resp.headers.items():
+            if name.lower() in hop_by_hop:
+                continue
+            if name.lower() == 'content-length':
+                # Let Flask set Content-Length if needed for the assembled response
+                continue
+            forwarded_headers.append((name, value))
+
+        def generate():
+            try:
+                for chunk in resp.iter_content(1024 * 16):
+                    if chunk:
+                        yield chunk
+            finally:
+                resp.close()
+
+        return Response(generate(), status=resp.status_code, headers=forwarded_headers)
     except Exception as e:
         return jsonify({"error": str(e)}), 500
     
+@app.route('/api/videos', methods=['POST'])
+def videos_proxy():
+    client_data = request.get_json() or {}
+    target_server = client_data.get('server')
+    client_data.pop('server', None)  # Remove server from payload
+    if not target_server:
+        return jsonify({"error": "No server provided"}), 400
+    if target_server.endswith('/'):
+        target_server = target_server[:-1]
+    target_server = f"{target_server.strip()}/api/videos"
+    # Validate target URL
+    parsed = urllib.parse.urlparse(target_server)
+    if parsed.scheme not in ('http', 'https') or not parsed.netloc:
+        return jsonify({"error": "Invalid target URL"}), 400
 
+    try:
+        resp = session.post(target_server, json=client_data,timeout=5)
+        return Response(resp.content, status=resp.status_code, content_type=resp.headers.get('Content-Type', 'application/json'))
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
 
 @app.route('/')
 def index():
@@ -40,23 +115,63 @@ def stream_video():
     else:
         video_url = request.args.get('url')
     
+    if not video_url:
+        return jsonify({"error": "No URL provided"}), 400
+
     def generate():
-        # yt-dlp command to get the stream and pipe to stdout
-        cmd = [
-            'yt-dlp',
-            '-o', '-', # output to stdout
-            '-f', 'best[ext=mp4]/best',
-            video_url
-        ]
-        process = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
         try:
-            while True:
-                chunk = process.stdout.read(1024 * 16)
-                if not chunk:
+            # Configure yt-dlp options
+            ydl_opts = {
+                'format': 'best[ext=mp4]/best[vcodec^=avc1]/best[vcodec^=vp]/best',
+                'quiet': True,
+                'no_warnings': True,
+                'socket_timeout': 30,
+                'retries': 3,
+                'fragment_retries': 3,
+                'http_headers': {
+                    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
+                },
+                'skip_unavailable_fragments': True
+            }
+            
+            with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+                # Extract the info
+                info = ydl.extract_info(video_url, download=False)
+                
+                # Try to get the URL from the info dict (works for progressive downloads)
+                stream_url = info.get('url')
+                format_id = info.get('format_id')
+                
+                # If no direct URL, try to get it from formats
+                if not stream_url and 'formats' in info:
+                    # Find the best format that has a URL
+                    for fmt in info['formats']:
+                        if fmt.get('url'):
+                            stream_url = fmt.get('url')
                             break
+                
+                if not stream_url:
+                    yield b"Error: Could not extract stream URL"
+                    return
+                
+                # Prepare headers for the stream request
+                headers = {
+                    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
+                }
+                
+                # Add any cookies or authentication headers from yt-dlp
+                if 'http_headers' in info:
+                    headers.update(info['http_headers'])
+                
+                # Stream the video from the extracted URL
+                resp = session.get(stream_url, headers=headers, stream=True, timeout=30, allow_redirects=True)
+                resp.raise_for_status()
+                
+                for chunk in resp.iter_content(chunk_size=1024 * 16):
+                    if chunk:
                         yield chunk
-        finally:
-            process.kill()
+        except Exception as e:
+            yield f"Error: {str(e)}".encode()
 
     return Response(generate(), mimetype='video/mp4')
 

backend/requirements.txt

@@ -0,0 +1,15 @@
+blinker==1.9.0
+certifi==2026.1.4
+charset-normalizer==3.4.4
+click==8.3.1
+Flask==3.1.2
+Flask-Cors==4.0.0
+idna==3.11
+itsdangerous==2.2.0
+Jinja2==3.1.6
+jsonify==0.5
+MarkupSafe==3.0.3
+requests==2.32.5
+urllib3==2.6.3
+Werkzeug==3.1.5
+yt-dlp==2026.1.29

frontend/app.js

@@ -1,106 +1,151 @@
+// 1. Global State and Constants (Declare these first!)
 let currentPage = 1;
 const perPage = 12;
+const renderedVideoIds = new Set();
 
-localStorage.clear();
-
-function InitializeLocalStorage() {
-    if (!localStorage.getItem('config')) {
-        localStorage.setItem('config', JSON.stringify({ servers: [{ "https://getfigleaf.com": {} }] }));
-        InitializeServerStatus();
-    }
-}
-
-function InitializeServerStatus() {
-    const config = JSON.parse(localStorage.getItem('config'));
-    config.servers.forEach(serverObj => {
-        const server = Object.keys(serverObj)[0];
-        fetch(`/api/status`, {
-            method: "POST", 
-            body: JSON.stringify({ server: server }), 
-            headers: {
-                "Content-Type": "application/json",
-            },
-        })
-            .then(response => response.json())
-            .then(status => {
-                serverObj[server] = status;
-                localStorage.setItem('config', JSON.stringify(config));
-            })
-            .catch(err => {
-                serverObj[server] = { online: false };
-                localStorage.setItem('config', JSON.stringify(config));
-            });
-    });
-}
-
-async function loadVideos() {
-    const config = JSON.parse(localStorage.getItem('config'));
-    const response = await fetch('/api/videos', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            channel: config.channel,
-            sort: "latest",
-            query: "",
-            page: currentPage,
-            perPage: perPage
-        })
-    });
-    const videos = await response.json();
-    renderVideos(videos);
-    currentPage++;
-}
-
-function renderVideos(videos) {
-    const grid = document.getElementById('video-grid');
-    videos.forEach(v => {
-        const card = document.createElement('div');
-        card.className = 'video-card';
-        card.innerHTML = `
-            <img src="${v.thumb}" alt="${v.title}">
-            <h4>${v.title}</h4>
-            <p>${v.channel} • ${v.duration}s</p>
-        `;
-        card.onclick = () => openPlayer(v.url);
-        grid.appendChild(card);
-    });
-}
-
-function openPlayer(videoUrl) {
-    const modal = document.getElementById('video-modal');
-    const player = document.getElementById('player');
-    // Using GET for the video tag src as it's the standard for streaming
-    player.src = `/api/stream?url=${encodeURIComponent(videoUrl)}`;
-    modal.style.display = 'block';
-}
-
-function closePlayer() {
-    const modal = document.getElementById('video-modal');
-    const player = document.getElementById('player');
-    player.pause();
-    player.src = "";
-    modal.style.display = 'none';
-}
-
-// UI Helpers
-function toggleDrawer(id) {
-    document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
-    document.getElementById(`drawer-${id}`).classList.add('open');
-    document.getElementById('overlay').style.display = 'block';
-}
-
-function closeDrawers() {
-    document.querySelectorAll('.drawer').forEach(d => d.classList.remove('open'));
-    document.getElementById('overlay').style.display = 'none';
-}
-
-// Infinite Scroll Observer
+// 2. Observer Definition (Must be defined before initApp uses it)
 const observer = new IntersectionObserver((entries) => {
     if (entries[0].isIntersecting) loadVideos();
 }, { threshold: 1.0 });
 
-observer.observe(document.getElementById('sentinel'));
+// 3. Logic Functions
+async function InitializeLocalStorage() {
+    if (!localStorage.getItem('config')) {
+        localStorage.setItem('config', JSON.stringify({ servers: [{ "https://getfigleaf.com": {} }] }));
+    }
+    // We always run this to make sure session is fresh
+    await InitializeServerStatus();
+}
 
-// Init
-InitializeLocalStorage();
-loadVideos();
+async function InitializeServerStatus() {
+    const config = JSON.parse(localStorage.getItem('config'));
+    if (!config || !config.servers) return;
+
+    const statusPromises = config.servers.map(async (serverObj) => {
+        const server = Object.keys(serverObj)[0];
+        try {
+            const response = await fetch(`/api/status`, {
+                method: "POST",
+                body: JSON.stringify({ server: server }),
+                headers: { "Content-Type": "application/json" },
+            });
+            const status = await response.json();
+            serverObj[server] = status;
+        } catch (err) {
+            serverObj[server] = { online: false, channels: [] };
+        }
+    });
+
+    await Promise.all(statusPromises);
+    localStorage.setItem('config', JSON.stringify(config));
+
+    const firstServerKey = Object.keys(config.servers[0])[0];
+    const serverData = config.servers[0][firstServerKey];
+
+    if (serverData.channels && serverData.channels.length > 0) {
+        const channel = serverData.channels[0];
+        let options = {};
+        
+        if (channel.options) {
+            channel.options.forEach(element => {
+                // Ensure the options structure matches your API expectations
+                options[element.id] = element.options[0];
+            });
+        }
+
+        const sessionData = {
+            server: firstServerKey,
+            channel: channel,
+            options: options,
+        };
+
+        localStorage.setItem('session', JSON.stringify(sessionData));
+    }
+}
+
+async function loadVideos() {
+    const session = JSON.parse(localStorage.getItem('session'));
+    if (!session) return; 
+
+    // Build the request body
+    let body = {
+        channel: session.channel.id,
+        query: "",
+        page: currentPage,
+        perPage: perPage,
+        server: session.server
+    };
+
+    // Correct way to loop through the options object
+    Object.entries(session.options).forEach(([key, value]) => {
+        body[key] = value.id;
+    });
+
+    try {
+        const response = await fetch('/api/videos', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        });
+        const videos = await response.json();
+        renderVideos(videos);
+        currentPage++;
+    } catch (err) {
+        console.error("Failed to load videos:", err);
+    }
+}
+
+function renderVideos(videos) {
+    const grid = document.getElementById('video-grid');
+    if (!grid) return;
+    
+    videos.items.forEach(v => {
+        if (renderedVideoIds.has(v.id)) return;
+        
+        const card = document.createElement('div');
+        card.className = 'video-card';
+        const durationText = v.duration === 0 ? '' : ` • ${v.duration}s`;
+        card.innerHTML = `
+            <img src="${v.thumb}" alt="${v.title}">
+            <h4>${v.title}</h4>
+            <p>${v.channel}${durationText}</p>
+        `;
+        card.onclick = () => openPlayer(v.url);
+        grid.appendChild(card);
+        renderedVideoIds.add(v.id);
+    });
+}
+
+// 4. Initialization (Run this last)
+async function initApp() {
+    // Clear old data if you want a fresh start every refresh
+    // localStorage.clear(); 
+
+    await InitializeLocalStorage(); 
+    
+    const sentinel = document.getElementById('sentinel');
+    if (sentinel) {
+        observer.observe(sentinel);
+    }
+
+    await loadVideos();
+}
+
+function openPlayer(url) {
+    const modal = document.getElementById('video-modal');
+    const video = document.getElementById('player');
+    video.src = `/api/stream?url=${encodeURIComponent(url)}`;
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+}
+
+function closePlayer() {
+    const modal = document.getElementById('video-modal');
+    const video = document.getElementById('player');
+    video.pause();
+    video.src = '';
+    modal.style.display = 'none';
+    document.body.style.overflow = 'auto';
+}
+
+initApp();

frontend/index.html

@@ -4,26 +4,63 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hottub</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="static/style.css">
 </head>
 <body>
     <header class="top-bar">
         <div class="logo">Hottub</div>
-        <div class="actions">
-            <button onclick="toggleDrawer('settings')">Settings</button>
-            <button onclick="toggleDrawer('menu')" class="menu-btn">
-                <span></span><span></span><span></span>
-            </button>
-        </div>
         <div class="search-container">
             <input type="text" id="search-input" placeholder="Search videos..." oninput="handleSearch(this.value)">
         </div>
+        <div class="actions">
+            <button class="icon-btn menu-toggle" onclick="toggleDrawer('menu')" title="Menu">
+                <span class="hamburger">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </span>
+            </button>
+            <button class="icon-btn settings-toggle" onclick="toggleDrawer('settings')" title="Settings">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="3"></circle>
+                    <path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m5.08 0l4.24-4.24M1 12h6m6 0h6m-16.78 7.78l4.24-4.24m5.08 0l4.24 4.24"></path>
+                </svg>
+            </button>
+        </div>
     </header>
 
+    <div class="sidebar-overlay" id="overlay" onclick="closeDrawers()"></div>
+
+    <aside id="drawer-menu" class="sidebar">
+        <div class="sidebar-header">
+            <h3>Menu</h3>
+            <button class="close-btn" onclick="closeDrawers()">✕</button>
+        </div>
+        <nav class="sidebar-content">
+            <a href="#" class="sidebar-item">Home</a>
+            <a href="#" class="sidebar-item">Trending</a>
+            <a href="#" class="sidebar-item">Subscriptions</a>
+        </nav>
+    </aside>
+
+    <aside id="drawer-settings" class="sidebar">
+        <div class="sidebar-header">
+            <h3>Settings</h3>
+            <button class="close-btn" onclick="closeDrawers()">✕</button>
+        </div>
+        <div class="sidebar-content">
+            <div class="setting-item">
+                <label>Theme</label>
+                <select>
+                    <option>Dark</option>
+                    <option>Light</option>
+                </select>
+            </div>
+        </div>
+    </aside>
+
     <main id="video-grid" class="grid-container"></main>
-    <div id="sentinel"></div> <div id="drawer-menu" class="drawer"><h3>Menu</h3></div>
-    <div id="drawer-settings" class="drawer"><h3>Settings</h3></div>
-    <div id="overlay" onclick="closeDrawers()"></div>
+    <div id="sentinel"></div>
 
     <div id="video-modal" class="modal">
         <div class="modal-content">
@@ -32,6 +69,7 @@
         </div>
     </div>
 
-    <script src="app.js"></script>
+    <script src="static/app.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 </body>
 </html>

frontend/style.css

@@ -1,30 +1,371 @@
-:root { --bg: #0f0f0f; --text: #fff; --accent: #3d3d3d; }
-body { margin: 0; background: var(--bg); color: var(--text); font-family: sans-serif; overflow-x: hidden; }
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
+:root {
+    --bg-primary: #0a0e27;
+    --bg-secondary: #141829;
+    --bg-tertiary: #1a1f3a;
+    --text-primary: #e8eaf6;
+    --text-secondary: #b0b0c0;
+    --accent: #6366f1;
+    --accent-hover: #818cf8;
+    --border: #2a2f4a;
+}
+
+html, body { height: 100%; }
+
+body {
+    margin: 0;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    overflow-x: hidden;
+    font-size: 14px;
+}
+
+/* Top Bar */
 .top-bar {
-    height: 60px; display: flex; justify-content: space-between; align-items: center;
-    padding: 0 20px; background: #202020; position: sticky; top: 0; z-index: 100;
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 24px;
+    background: var(--bg-secondary);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1px solid var(--border);
+    gap: 24px;
 }
 
+.logo {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+    color: var(--accent);
+    flex-shrink: 0;
+}
+
+.search-container {
+    flex: 1;
+    max-width: 500px;
+}
+
+.search-container input {
+    width: 100%;
+    padding: 8px 16px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.search-container input:focus {
+    outline: none;
+    border-color: var(--accent);
+    background: var(--bg-tertiary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.search-container input::placeholder {
+    color: var(--text-secondary);
+}
+
+.actions {
+    display: flex;
+    gap: 12px;
+    flex-shrink: 0;
+}
+
+.icon-btn {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-primary);
+    transition: all 0.2s ease;
+    font-size: 20px;
+}
+
+.icon-btn:hover {
+    background: var(--bg-tertiary);
+    color: var(--accent);
+}
+
+/* Hamburger Menu */
+.hamburger {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.hamburger span {
+    width: 24px;
+    height: 2px;
+    background: currentColor;
+    border-radius: 1px;
+    transition: all 0.3s ease;
+}
+
+.menu-toggle.active .hamburger span:nth-child(1) {
+    transform: translateY(6px) rotate(45deg);
+}
+
+.menu-toggle.active .hamburger span:nth-child(2) {
+    opacity: 0;
+}
+
+.menu-toggle.active .hamburger span:nth-child(3) {
+    transform: translateY(-6px) rotate(-45deg);
+}
+
+/* Sidebar */
+.sidebar {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: 320px;
+    height: 100vh;
+    background: var(--bg-secondary);
+    z-index: 1001;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar.open {
+    right: 0;
+}
+
+.sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.sidebar-header h3 {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 24px;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s ease;
+}
+
+.close-btn:hover {
+    color: var(--accent);
+}
+
+.sidebar-content {
+    flex: 1;
+    padding: 12px 0;
+    overflow-y: auto;
+}
+
+.sidebar-item {
+    display: block;
+    padding: 12px 24px;
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-left: 3px solid transparent;
+}
+
+.sidebar-item:hover {
+    background: var(--bg-tertiary);
+    border-left-color: var(--accent);
+    color: var(--accent);
+}
+
+.setting-item {
+    padding: 16px 24px;
+    border-bottom: 1px solid var(--border);
+}
+
+.setting-item label {
+    display: block;
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.setting-item select {
+    width: 100%;
+    padding: 8px 12px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 14px;
+}
+
+/* Overlay */
+.sidebar-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: none;
+    z-index: 1000;
+    transition: opacity 0.3s ease;
+}
+
+.sidebar-overlay.open {
+    display: block;
+}
+
+/* Grid Container */
 .grid-container {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 20px; padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 16px;
+    padding: 24px;
+    max-width: 100%;
 }
 
-.video-card { cursor: pointer; transition: transform 0.2s; }
-.video-card img { width: 100%; border-radius: 12px; }
-
-.drawer {
-    position: fixed; top: 0; right: -300px; width: 300px; height: 100%;
-    background: #1e1e1e; z-index: 1000; transition: 0.3s; padding: 20px;
-}
-.drawer.open { right: 0; }
-
-#overlay {
-    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
-    display: none; z-index: 999;
+@media (max-width: 768px) {
+    .grid-container {
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 12px;
+        padding: 16px;
+    }
 }
 
-.modal { display: none; position: fixed; inset: 0; background: #000; z-index: 2000; }
-.modal-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
-video { width: 80%; max-height: 80vh; }
+/* Video Card */
+.video-card {
+    cursor: pointer;
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    background: var(--bg-secondary);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.video-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+}
+
+.video-card img {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    display: block;
+}
+
+.video-card h4 {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 12px;
+    line-height: 1.4;
+    color: var(--text-primary);
+    margin: 0;
+    flex: 1;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.video-card p {
+    font-size: 12px;
+    color: var(--text-secondary);
+    padding: 0 12px 12px 12px;
+    margin: 0;
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: #000;
+    z-index: 2000;
+}
+
+.modal.open {
+    display: flex;
+}
+
+.modal-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: #fff;
+    font-size: 32px;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2001;
+    transition: all 0.2s ease;
+}
+
+.close:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+video {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100vh;
+    object-fit: contain;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}