Download functionality

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();
+            });
+        }
     };
 })();