Merge pull request #12 from huggingface/fix-video-paths

backend/server.py

@@ -20,11 +20,20 @@ import argparse
 import json
 import mimetypes
 import os
+import re
 import sys
 import urllib.parse
 from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
 from pathlib import Path
 
+# Video meta entries are stored as "<path> @ <t>s"; strip the timestamp so the
+# allow-list contains the underlying file path.
+_VIDEO_FRAME_SUFFIX = re.compile(r" @ \d+(?:\.\d+)?s$")
+
+
+def _strip_frame_suffix(entry: str) -> str:
+    return _VIDEO_FRAME_SUFFIX.sub("", entry)
+
 REPO_ROOT = Path(__file__).resolve().parent.parent
 INDEXING_DIR = REPO_ROOT / "indexing"
 UI_STATIC_DIR = REPO_ROOT / "ui" / "static"
@@ -55,9 +64,9 @@ def _load_allowed_paths() -> set[str]:
         if isinstance(data, list):
             for entry in data:
                 if isinstance(entry, str):
-                    allowed.add(entry)
+                    allowed.add(_strip_frame_suffix(entry))
                 elif isinstance(entry, dict) and "path" in entry:
-                    allowed.add(entry["path"])
+                    allowed.add(_strip_frame_suffix(entry["path"]))
     return allowed
 
 

ui/static/app.js

@@ -214,41 +214,58 @@ function makeCard(hit, kind, modality, dark) {
   const card = document.createElement("div");
   card.className = "card" + (dark ? " dark" : "");
 
-  const path = hit.path;
-  const name = path.split("/").pop();
-  const parent = path.replace(/\/[^/]+$/, "");
+  // Video meta entries are stored as "<path> @ <t>s" — split them so the
+  // file request uses the real path and the player can seek to that frame.
+  const rawPath = hit.path;
+  let filePath = rawPath;
+  let timestamp = null;
+  if (kind === "video") {
+    const m = rawPath.match(/^(.*) @ (\d+(?:\.\d+)?)s$/);
+    if (m) {
+      filePath = m[1];
+      timestamp = parseFloat(m[2]);
+    }
+  }
+  const name = rawPath.split("/").pop();
+  const parent = filePath.replace(/\/[^/]+$/, "");
 
   if (kind === "image") {
     const thumb = document.createElement("a");
     thumb.className = "thumb";
-    thumb.href = fileUrl(path);
+    thumb.href = fileUrl(filePath);
     thumb.target = "_blank";
     thumb.rel = "noopener";
     const img = document.createElement("img");
     img.loading = "lazy";
     img.alt = name;
     img.addEventListener("load", () => img.classList.add("loaded"));
-    img.src = fileUrl(path);
+    img.src = fileUrl(filePath);
     thumb.appendChild(img);
     card.appendChild(thumb);
   } else if (kind === "video") {
     const thumb = document.createElement("a");
     thumb.className = "thumb";
-    thumb.href = fileUrl(path);
+    const frag = timestamp != null ? `#t=${timestamp}` : "";
+    thumb.href = fileUrl(filePath) + frag;
     thumb.target = "_blank";
     thumb.rel = "noopener";
     const v = document.createElement("video");
     v.muted = true;
     v.preload = "metadata";
     v.addEventListener("loadeddata", () => v.classList.add("loaded"));
-    v.src = fileUrl(path);
+    if (timestamp != null) {
+      v.addEventListener("loadedmetadata", () => {
+        try { v.currentTime = timestamp; } catch (_) {}
+      });
+    }
+    v.src = fileUrl(filePath) + frag;
     thumb.appendChild(v);
     card.appendChild(thumb);
   }
 
   const nameEl = document.createElement("a");
   nameEl.className = "card-name";
-  nameEl.href = fileUrl(path);
+  nameEl.href = fileUrl(filePath);
   nameEl.target = "_blank";
   nameEl.rel = "noopener";
   nameEl.style.color = "inherit";