Refine search status updates and preview sizing

frontend/app.js

@@ -13,6 +13,7 @@ const downloadUrl = document.getElementById("downloadUrl");
 const downloadResult = document.getElementById("downloadResult");
 const cardTemplate = document.getElementById("searchCardTemplate");
 const previewModal = document.getElementById("previewModal");
+const previewMediaFrame = document.getElementById("previewMediaFrame");
 const previewTitle = document.getElementById("previewTitle");
 const previewVideo = document.getElementById("previewVideo");
 const previewThumbnail = document.getElementById("previewThumbnail");
@@ -80,7 +81,8 @@ function connectWS() {
       return;
     }
     const data = payload.data;
-    setStatus(`${data.type || "task"}: ${data.status}`, Number(data.progress ?? 0));
+    const label = data.status || `${data.type || "task"} in progress`;
+    setStatus(label, Number(data.progress ?? 0));
     if (data.type === "upload" && data.status === "completed") {
       uploadResult.textContent = `${data.filename} saved successfully`;
     }
@@ -128,7 +130,7 @@ function renderResults(results) {
 
 searchForm.addEventListener("submit", async (event) => {
   event.preventDefault();
-  setStatus("searching", 20);
+  setStatus("preparing search", 5);
   searchWarning.classList.add("hidden");
   try {
     const data = await api("/api/search", {
@@ -169,6 +171,7 @@ function openPreviewModal(preview) {
   previewVideo.pause();
   previewVideo.removeAttribute("src");
   previewVideo.load();
+  previewMediaFrame.style.aspectRatio = "";
   if (preview.previewStreamUrl) {
     previewVideo.src = preview.previewStreamUrl;
     previewVideo.classList.remove("hidden");
@@ -199,6 +202,7 @@ function closeModal() {
   previewVideo.pause();
   previewVideo.removeAttribute("src");
   previewVideo.load();
+  previewMediaFrame.style.aspectRatio = "";
   previewModal.classList.add("hidden");
   previewModal.classList.remove("flex");
   startRange.value = "0";
@@ -298,6 +302,16 @@ setEndFromPreview.addEventListener("click", () => {
   endRange.value = String(Math.floor(previewVideo.currentTime || 0));
   syncRanges();
 });
+previewVideo.addEventListener("loadedmetadata", () => {
+  if (previewVideo.videoWidth > 0 && previewVideo.videoHeight > 0) {
+    previewMediaFrame.style.aspectRatio = `${previewVideo.videoWidth} / ${previewVideo.videoHeight}`;
+  }
+});
+previewThumbnail.addEventListener("load", () => {
+  if (!previewVideo.src && previewThumbnail.naturalWidth > 0 && previewThumbnail.naturalHeight > 0) {
+    previewMediaFrame.style.aspectRatio = `${previewThumbnail.naturalWidth} / ${previewThumbnail.naturalHeight}`;
+  }
+});
 
 connectWS();
 setStatus("idle", 0);