feat: videoplayer toegevoegd

webui/html/app.js

@@ -140,6 +140,18 @@ function editorElements() {
   };
 }
 
+function videoElements() {
+  return {
+    overlay: document.getElementById("video-modal"),
+    title: document.getElementById("video-title"),
+    fileName: document.getElementById("video-file-name"),
+    filePath: document.getElementById("video-file-path"),
+    error: document.getElementById("video-error"),
+    player: document.getElementById("video-player"),
+    closeButton: document.getElementById("video-close-btn"),
+  };
+}
+
 function moveElements() {
   return {
     overlay: document.getElementById("move-popup"),
@@ -344,6 +356,14 @@ function isEditableSelection(item) {
   return [".txt", ".log", ".md", ".yml", ".yaml", ".json", ".js", ".css", ".html"].some((suffix) => lower.endsWith(suffix));
 }
 
+function isVideoSelection(item) {
+  if (!item || item.kind !== "file") {
+    return false;
+  }
+  const lower = (item.name || "").toLowerCase();
+  return lower.endsWith(".mp4") || lower.endsWith(".mkv");
+}
+
 function currentParentPath(path) {
   const normalized = (path || "").trim();
   if (!normalized) {
@@ -657,6 +677,16 @@ function renderPaneItems(pane) {
       }
       renderPaneItems(pane);
     };
+    if (entry.kind === "file" && isVideoSelection({ path: entry.path, name: entry.name, kind: entry.kind })) {
+      row.ondblclick = (ev) => {
+        ev.stopPropagation();
+        setActivePane(pane);
+        model.currentRowIndex = index;
+        setSingleSelectionAtIndex(pane, { path: entry.path, name: entry.name, kind: entry.kind }, index);
+        renderPaneItems(pane);
+        openVideoViewer();
+      };
+    }
     items.append(row);
   });
   updateActionButtons();
@@ -1019,6 +1049,10 @@ function isViewerOpen() {
   return !viewerElements().overlay.classList.contains("hidden");
 }
 
+function isVideoOpen() {
+  return !videoElements().overlay.classList.contains("hidden");
+}
+
 function isEditorOpen() {
   return !editorElements().overlay.classList.contains("hidden");
 }
@@ -1339,6 +1373,15 @@ function closeViewer() {
   viewer.content.textContent = "";
 }
 
+function closeVideoViewer() {
+  const video = videoElements();
+  video.overlay.classList.add("hidden");
+  video.error.textContent = "";
+  video.player.pause();
+  video.player.removeAttribute("src");
+  video.player.load();
+}
+
 function setSettingsTab(tab) {
   const elements = settingsElements();
   settingsState.activeTab = tab === "logs" ? "logs" : "general";
@@ -1479,6 +1522,33 @@ async function openViewer() {
   }
 }
 
+function videoPlaybackMessage(item) {
+  const lower = (item.name || "").toLowerCase();
+  if (lower.endsWith(".mkv")) {
+    return "MKV playback is best-effort and depends on browser codec support.";
+  }
+  return "";
+}
+
+async function openVideoViewer() {
+  const selectedItems = activePaneState().selectedItems;
+  if (selectedItems.length !== 1 || !isVideoSelection(selectedItems[0])) {
+    return;
+  }
+  const selected = selectedItems[0];
+  const video = videoElements();
+  const streamUrl = `/api/files/video?${new URLSearchParams({ path: selected.path }).toString()}`;
+
+  video.overlay.classList.remove("hidden");
+  video.title.textContent = "Video";
+  video.fileName.textContent = selected.name;
+  video.filePath.textContent = selected.path;
+  video.error.textContent = videoPlaybackMessage(selected);
+  video.player.pause();
+  video.player.src = streamUrl;
+  video.player.load();
+}
+
 async function openEditor() {
   const selectedItems = activePaneState().selectedItems;
   if (selectedItems.length !== 1 || !isEditableSelection(selectedItems[0])) {
@@ -1585,10 +1655,16 @@ function jumpCurrentRow(edge) {
 function openCurrentDirectory() {
   const pane = state.activePane;
   const item = currentRowItem(pane);
-  if (!item || item.kind !== "directory") {
+  if (!item) {
     return;
   }
-  navigateTo(pane, item.path);
+  if (item.kind === "directory") {
+    navigateTo(pane, item.path);
+    return;
+  }
+  if (isVideoSelection(item)) {
+    openVideoViewer();
+  }
 }
 
 function toggleCurrentSelection() {
@@ -1663,6 +1739,13 @@ function handleKeyboardShortcuts(event) {
     }
     return;
   }
+  if (isVideoOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeVideoViewer();
+    }
+    return;
+  }
   if (isViewerOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -1868,6 +1951,17 @@ function setupEvents() {
     }
   };
 
+  const video = videoElements();
+  video.closeButton.onclick = closeVideoViewer;
+  video.player.onerror = () => {
+    video.error.textContent = "Playback failed in this browser for this file.";
+  };
+  video.overlay.onclick = (event) => {
+    if (event.target === video.overlay) {
+      closeVideoViewer();
+    }
+  };
+
   const editor = editorElements();
   editor.closeButton.onclick = attemptCloseEditor;
   editor.cancelButton.onclick = attemptCloseEditor;