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;

webui/html/index.html

@@ -166,6 +166,17 @@
     </div>
   </div>
 
+  <div id="video-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="video-title">
+    <div class="popup-card viewer-card">
+      <button id="video-close-btn" class="viewer-close" type="button" aria-label="Close video">X</button>
+      <h3 id="video-title">Video</h3>
+      <div id="video-file-name" class="popup-meta"></div>
+      <div id="video-file-path" class="popup-meta"></div>
+      <div id="video-error" class="error"></div>
+      <video id="video-player" class="video-player" controls playsinline preload="metadata"></video>
+    </div>
+  </div>
+
   <div id="editor-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="editor-title">
     <div class="popup-card viewer-card">
       <button id="editor-close-btn" class="viewer-close" type="button" aria-label="Close editor">X</button>

webui/html/style.css

@@ -516,6 +516,14 @@ button:disabled {
   flex-direction: column;
 }
 
+.video-player {
+  width: 100%;
+  max-height: calc(100vh - 180px);
+  background: #000;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+}
+
 .settings-card {
   position: relative;
   width: min(760px, calc(100vw - 32px));