feat: pdf viewer toegevoegd

webui/html/app.js

@@ -162,6 +162,18 @@ function videoElements() {
   };
 }
 
+function pdfElements() {
+  return {
+    overlay: document.getElementById("pdf-modal"),
+    title: document.getElementById("pdf-title"),
+    fileName: document.getElementById("pdf-file-name"),
+    filePath: document.getElementById("pdf-file-path"),
+    error: document.getElementById("pdf-error"),
+    frame: document.getElementById("pdf-frame"),
+    closeButton: document.getElementById("pdf-close-btn"),
+  };
+}
+
 function moveElements() {
   return {
     overlay: document.getElementById("move-popup"),
@@ -468,6 +480,13 @@ function isVideoSelection(item) {
   return lower.endsWith(".mp4") || lower.endsWith(".mkv");
 }
 
+function isPdfSelection(item) {
+  if (!item || item.kind !== "file") {
+    return false;
+  }
+  return (item.name || "").toLowerCase().endsWith(".pdf");
+}
+
 function currentParentPath(path) {
   const normalized = (path || "").trim();
   if (!normalized) {
@@ -774,6 +793,15 @@ function renderPaneItems(pane) {
         renderPaneItems(pane);
         openVideoViewer();
       };
+    } else if (entry.kind === "file" && isPdfSelection({ 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);
+        openPdfViewer();
+      };
     }
     items.append(row);
   });
@@ -1480,6 +1508,17 @@ function closeVideoViewer() {
   video.player.load();
 }
 
+function isPdfOpen() {
+  return !pdfElements().overlay.classList.contains("hidden");
+}
+
+function closePdfViewer() {
+  const pdf = pdfElements();
+  pdf.overlay.classList.add("hidden");
+  pdf.error.textContent = "";
+  pdf.frame.removeAttribute("src");
+}
+
 function isInfoOpen() {
   return !infoElements().overlay.classList.contains("hidden");
 }
@@ -1760,7 +1799,7 @@ function closeEditor() {
   resetEditorState();
 }
 
-async function openViewer() {
+async function openTextViewer() {
   const selectedItems = activePaneState().selectedItems;
   if (selectedItems.length !== 1 || selectedItems[0].kind !== "file") {
     return;
@@ -1787,6 +1826,22 @@ async function openViewer() {
   }
 }
 
+async function openPdfViewer() {
+  const selectedItems = activePaneState().selectedItems;
+  if (selectedItems.length !== 1 || !isPdfSelection(selectedItems[0])) {
+    return;
+  }
+  const selected = selectedItems[0];
+  const pdf = pdfElements();
+  const pdfUrl = `/api/files/pdf?${new URLSearchParams({ path: selected.path }).toString()}`;
+  pdf.overlay.classList.remove("hidden");
+  pdf.title.textContent = "PDF";
+  pdf.fileName.textContent = selected.name;
+  pdf.filePath.textContent = selected.path;
+  pdf.error.textContent = "";
+  pdf.frame.src = pdfUrl;
+}
+
 function videoPlaybackMessage(item) {
   const lower = (item.name || "").toLowerCase();
   if (lower.endsWith(".mkv")) {
@@ -1845,6 +1900,23 @@ async function openEditor() {
   }
 }
 
+function openViewer() {
+  const selectedItems = activePaneState().selectedItems;
+  if (selectedItems.length !== 1 || selectedItems[0].kind !== "file") {
+    return;
+  }
+  const selected = selectedItems[0];
+  if (isVideoSelection(selected)) {
+    openVideoViewer();
+    return;
+  }
+  if (isPdfSelection(selected)) {
+    openPdfViewer();
+    return;
+  }
+  openTextViewer();
+}
+
 async function saveEditor() {
   if (!editorState.path) {
     return;
@@ -2031,6 +2103,13 @@ function handleKeyboardShortcuts(event) {
     }
     return;
   }
+  if (isPdfOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closePdfViewer();
+    }
+    return;
+  }
   if (isViewerOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -2210,6 +2289,9 @@ function setupEvents() {
     }
   };
 
+  const pdf = pdfElements();
+  pdf.closeButton.onclick = closePdfViewer;
+
   const wildcard = wildcardPopupElements();
   wildcard.cancelButton.onclick = closeWildcardPopup;
   wildcard.applyButton.onclick = submitWildcardPopup;