From e6d36711b114355722867a1cdb0d079bf7ea1561 Mon Sep 17 00:00:00 2001
From: Simon <simon.huenecke@gmail.com>
Date: Mon, 9 Feb 2026 14:50:17 +0000
Subject: [PATCH] Download functionality

---
 frontend/css/style.css   | 168 +++++++++++++++++++++++++++++++++++++++
 frontend/index.html      |   9 +++
 frontend/js/favorites.js |  40 +++++++++-
 frontend/js/ui.js        |  85 +++++++++++++++++++-
 frontend/js/videos.js    |  74 +++++++++++++++++
 5 files changed, 371 insertions(+), 5 deletions(-)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index 0e14907..7bdb337 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -915,6 +915,72 @@ body.theme-light .setting-item select option {
     font-weight: 500;
 }
 
+.video-menu-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    background: rgba(0, 0, 0, 0.55);
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    z-index: 2;
+    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
+}
+
+body.theme-light .video-menu-btn {
+    background: rgba(255, 255, 255, 0.8);
+}
+
+.video-menu-btn:hover {
+    transform: scale(1.05);
+    background: var(--bg-secondary);
+}
+
+.video-menu {
+    position: absolute;
+    top: 48px;
+    right: 10px;
+    min-width: 140px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    box-shadow: 0 12px 24px var(--shadow);
+    opacity: 0;
+    transform: translateY(-6px);
+    pointer-events: none;
+    transition: opacity 0.18s ease, transform 0.18s ease;
+    z-index: 3;
+}
+
+.video-menu.open {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+.video-menu-item {
+    width: 100%;
+    padding: 10px 12px;
+    text-align: left;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.video-menu-item:hover {
+    background: var(--bg-tertiary);
+}
+
 .favorite-btn {
     position: absolute;
     top: 10px;
@@ -950,6 +1016,108 @@ body.theme-light .favorite-btn {
     background: rgba(255, 59, 48, 0.12);
 }
 
+/* Info Modal */
+.info-modal {
+    position: fixed;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 2500;
+    padding: 20px;
+}
+
+.info-modal.open {
+    display: flex;
+}
+
+.info-card {
+    position: relative;
+    width: min(520px, 92vw);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px 22px;
+    box-shadow: 0 18px 36px var(--shadow);
+}
+
+.info-card h3 {
+    font-family: var(--font-display);
+    font-size: 18px;
+    margin: 0 0 16px 0;
+}
+
+.info-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    border: none;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+}
+
+.info-rows,
+.info-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    font-size: 13px;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: 8px;
+}
+
+.info-row:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.info-label {
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    font-size: 11px;
+    color: var(--text-secondary);
+}
+
+.info-value {
+    text-align: right;
+    color: var(--text-primary);
+    word-break: break-all;
+}
+
+.info-json {
+    margin: 0;
+    white-space: pre-wrap;
+    text-align: left;
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
+    border-radius: 8px;
+    padding: 8px 10px;
+    font-size: 12px;
+    line-height: 1.4;
+    max-height: 180px;
+    overflow: auto;
+    flex: 1;
+}
+
+.info-empty {
+    font-size: 13px;
+    color: var(--text-secondary);
+    padding-top: 6px;
+}
+
 /* Modal */
 .modal {
     display: none;
diff --git a/frontend/index.html b/frontend/index.html
index 5e617f7..98f1758 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -113,6 +113,15 @@
         </div>
     </div>
 
+    <div id="info-modal" class="info-modal" aria-hidden="true">
+        <div class="info-card" role="dialog" aria-modal="true" aria-labelledby="info-title">
+            <button id="info-close" class="info-close" type="button" aria-label="Close">✕</button>
+            <h3 id="info-title">Video Info</h3>
+            <div id="info-list" class="info-list"></div>
+            <div id="info-empty" class="info-empty">No additional info available.</div>
+        </div>
+    </div>
+
     <div id="error-toast" class="error-toast" role="alert" aria-live="assertive">
         <span id="error-toast-text"></span>
         <button id="error-toast-close" type="button" aria-label="Close">✕</button>
diff --git a/frontend/js/favorites.js b/frontend/js/favorites.js
index e0f3d89..b09d3be 100644
--- a/frontend/js/favorites.js
+++ b/frontend/js/favorites.js
@@ -21,21 +21,24 @@ App.favorites = App.favorites || {};
 
     App.favorites.getKey = function(video) {
         if (!video) return null;
-        return video.key || video.id || video.url || null;
+        const meta = video.meta || video;
+        return video.key || meta.key || video.id || meta.id || video.url || meta.url || null;
     };
 
     App.favorites.normalize = function(video) {
         const key = App.favorites.getKey(video);
         if (!key) return null;
+        const meta = video && video.meta ? video.meta : video;
         return {
             key,
             id: video.id || null,
             url: video.url || '',
             title: video.title || '',
             thumb: video.thumb || '',
-            channel: video.channel || '',
-            uploader: video.uploader || video.channel || '',
-            duration: video.duration || 0
+            channel: video.channel || (meta && meta.channel) || '',
+            uploader: video.uploader || (meta && (meta.uploader || meta.channel)) || '',
+            duration: video.duration || (meta && meta.duration) || 0,
+            meta: meta
         };
     };
 
@@ -102,6 +105,11 @@ App.favorites = App.favorites || {};
             const uploaderText = item.uploader || item.channel || '';
             card.innerHTML = `
                 <button class="favorite-btn is-favorite" type="button" aria-pressed="true" aria-label="Remove from favorites" data-fav-key="${item.key}">♥</button>
+                <button class="video-menu-btn" type="button" aria-haspopup="true" aria-expanded="false" aria-label="More options">⋯</button>
+                <div class="video-menu" role="menu">
+                    <button class="video-menu-item" type="button" data-action="info" role="menuitem">Show info</button>
+                    <button class="video-menu-item" type="button" data-action="download" role="menuitem">Download</button>
+                </div>
                 <img src="${item.thumb}" alt="${item.title}">
                 <div class="favorite-info">
                     <h4>${item.title}</h4>
@@ -116,6 +124,30 @@ App.favorites = App.favorites || {};
                     App.favorites.toggle(item);
                 };
             }
+            const menuBtn = card.querySelector('.video-menu-btn');
+            const menu = card.querySelector('.video-menu');
+            const showInfoBtn = card.querySelector('.video-menu-item[data-action="info"]');
+            const downloadBtn = card.querySelector('.video-menu-item[data-action="download"]');
+            if (menuBtn && menu) {
+                menuBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    App.videos.toggleMenu(menu, menuBtn);
+                };
+            }
+            if (showInfoBtn) {
+                showInfoBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    App.ui.showInfo(item.meta || item);
+                    App.videos.closeAllMenus();
+                };
+            }
+            if (downloadBtn) {
+                downloadBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    App.videos.downloadVideo(item.meta || item);
+                    App.videos.closeAllMenus();
+                };
+            }
             const uploaderBtn = card.querySelector('.uploader-link');
             if (uploaderBtn) {
                 uploaderBtn.onclick = (event) => {
diff --git a/frontend/js/ui.js b/frontend/js/ui.js
index ec22c6d..5a919a0 100644
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -26,6 +26,65 @@ App.ui = App.ui || {};
         }, 4000);
     };
 
+    App.ui.showInfo = function(video) {
+        const modal = document.getElementById('info-modal');
+        if (!modal) return;
+        const title = document.getElementById('info-title');
+        const list = document.getElementById('info-list');
+        const empty = document.getElementById('info-empty');
+
+        const data = video && video.meta ? video.meta : video;
+        const titleText = data && data.title ? data.title : 'Video Info';
+        if (title) title.textContent = titleText;
+
+        if (list) {
+            list.innerHTML = "";
+        }
+
+        let hasRows = false;
+        if (data && typeof data === 'object') {
+            Object.entries(data).forEach(([key, value]) => {
+                if (!list) return;
+                const row = document.createElement('div');
+                row.className = 'info-row';
+
+                const label = document.createElement('span');
+                label.className = 'info-label';
+                label.textContent = key;
+
+                let valueNode;
+                if (value && typeof value === 'object') {
+                    valueNode = document.createElement('pre');
+                    valueNode.className = 'info-json';
+                    valueNode.textContent = JSON.stringify(value, null, 2);
+                } else {
+                    valueNode = document.createElement('span');
+                    valueNode.className = 'info-value';
+                    valueNode.textContent = value === undefined || value === null || value === '' ? '—' : String(value);
+                }
+
+                row.appendChild(label);
+                row.appendChild(valueNode);
+                list.appendChild(row);
+                hasRows = true;
+            });
+        }
+
+        if (empty) {
+            empty.style.display = hasRows ? 'none' : 'block';
+        }
+
+        modal.classList.add('open');
+        modal.setAttribute('aria-hidden', 'false');
+    };
+
+    App.ui.closeInfo = function() {
+        const modal = document.getElementById('info-modal');
+        if (!modal) return;
+        modal.classList.remove('open');
+        modal.setAttribute('aria-hidden', 'true');
+    };
+
     // Drawer controls shared by the inline HTML handlers.
     App.ui.closeDrawers = function() {
         const menuDrawer = document.getElementById('drawer-menu');
@@ -431,7 +490,31 @@ App.ui = App.ui || {};
         window.handleSearch = App.videos.handleSearch;
 
         document.addEventListener('keydown', (event) => {
-            if (event.key === 'Escape') App.ui.closeDrawers();
+            if (event.key === 'Escape') {
+                App.ui.closeDrawers();
+                App.ui.closeInfo();
+                App.videos.closeAllMenus();
+            }
         });
+
+        document.addEventListener('click', () => {
+            App.videos.closeAllMenus();
+        });
+
+        const infoModal = document.getElementById('info-modal');
+        if (infoModal) {
+            infoModal.addEventListener('click', (event) => {
+                if (event.target === infoModal) {
+                    App.ui.closeInfo();
+                }
+            });
+        }
+
+        const infoClose = document.getElementById('info-close');
+        if (infoClose) {
+            infoClose.addEventListener('click', () => {
+                App.ui.closeInfo();
+            });
+        }
     };
 })();
diff --git a/frontend/js/videos.js b/frontend/js/videos.js
index 1205f8c..f833020 100644
--- a/frontend/js/videos.js
+++ b/frontend/js/videos.js
@@ -98,6 +98,11 @@ App.videos = App.videos || {};
             const uploaderText = v.uploader || v.channel || '';
             card.innerHTML = `
                 <button class="favorite-btn" type="button" aria-pressed="false" aria-label="Add to favorites" data-fav-key="${favoriteKey || ''}">♡</button>
+                <button class="video-menu-btn" type="button" aria-haspopup="true" aria-expanded="false" aria-label="More options">⋯</button>
+                <div class="video-menu" role="menu">
+                    <button class="video-menu-item" type="button" data-action="info" role="menuitem">Show info</button>
+                    <button class="video-menu-item" type="button" data-action="download" role="menuitem">Download</button>
+                </div>
                 <img src="${v.thumb}" alt="${v.title}">
                 <h4>${v.title}</h4>
                 ${uploaderText ? `<p class="video-meta"><button class="uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button></p>` : ''}
@@ -119,6 +124,30 @@ App.videos = App.videos || {};
                     App.videos.handleSearch(uploader);
                 };
             }
+            const menuBtn = card.querySelector('.video-menu-btn');
+            const menu = card.querySelector('.video-menu');
+            const showInfoBtn = card.querySelector('.video-menu-item[data-action="info"]');
+            const downloadBtn = card.querySelector('.video-menu-item[data-action="download"]');
+            if (menuBtn && menu) {
+                menuBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    App.videos.toggleMenu(menu, menuBtn);
+                };
+            }
+            if (showInfoBtn) {
+                showInfoBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    App.ui.showInfo(v);
+                    App.videos.closeAllMenus();
+                };
+            }
+            if (downloadBtn) {
+                downloadBtn.onclick = (event) => {
+                    event.stopPropagation();
+                    App.videos.downloadVideo(v);
+                    App.videos.closeAllMenus();
+                };
+            }
             card.onclick = () => App.player.open(v.url);
             grid.appendChild(card);
             state.renderedVideoIds.add(v.id);
@@ -174,4 +203,49 @@ App.videos = App.videos || {};
         loadMoreBtn.disabled = state.isLoading || !state.hasNextPage;
         loadMoreBtn.style.display = state.hasNextPage ? 'flex' : 'none';
     };
+
+    // Context menu helpers for per-card actions.
+    App.videos.closeAllMenus = function() {
+        document.querySelectorAll('.video-menu.open').forEach((menu) => {
+            menu.classList.remove('open');
+        });
+        document.querySelectorAll('.video-menu-btn[aria-expanded="true"]').forEach((btn) => {
+            btn.setAttribute('aria-expanded', 'false');
+        });
+    };
+
+    App.videos.toggleMenu = function(menu, button) {
+        const isOpen = menu.classList.contains('open');
+        App.videos.closeAllMenus();
+        if (!isOpen) {
+            menu.classList.add('open');
+            if (button) {
+                button.setAttribute('aria-expanded', 'true');
+            }
+        }
+    };
+
+    // Builds a proxied stream URL with an optional referer parameter.
+    App.videos.buildStreamUrl = function(videoUrl) {
+        let refererParam = '';
+        try {
+            const origin = new URL(videoUrl).origin;
+            refererParam = `&referer=${encodeURIComponent(origin + '/')}`;
+        } catch (err) {
+            refererParam = '';
+        }
+        return `/api/stream?url=${encodeURIComponent(videoUrl)}${refererParam}`;
+    };
+
+    App.videos.downloadVideo = function(video) {
+        if (!video || !video.url) return;
+        const link = document.createElement('a');
+        link.href = App.videos.buildStreamUrl(video.url);
+        const rawName = (video.title || video.id || 'video').toString();
+        const safeName = rawName.replace(/[^a-z0-9]+/gi, '_').replace(/^_+|_+$/g, '').slice(0, 80);
+        link.download = safeName ? `${safeName}.mp4` : 'video.mp4';
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+    };
 })();