basic functionality running

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,7 +4,7 @@
     <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">
@@ -32,6 +32,6 @@
         </div>
     </div>
 
-    <script src="app.js"></script>
+    <script src="static/app.js"></script>
 </body>
 </html>

frontend/style.css

@@ -26,5 +26,7 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: sans-s
 }
 
 .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; }
+.modal-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
+.close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; background: rgba(0,0,0,0.5); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; z-index: 2001; }
+.close:hover { background: rgba(255,255,255,0.2); }
+video { width: 100%; height: 100%; max-width: 100%; max-height: 100vh; object-fit: contain; }