Tighten Gemini expansion and unify crop slider

frontend/app.js

@@ -21,13 +21,20 @@ const previewDuration = document.getElementById("previewDuration");
 const qualitySelect = document.getElementById("qualitySelect");
 const confirmDownload = document.getElementById("confirmDownload");
 const closePreviewModal = document.getElementById("closePreviewModal");
-const startRange = document.getElementById("startRange");
-const endRange = document.getElementById("endRange");
 const rangeSummary = document.getElementById("rangeSummary");
+const rangeFill = document.getElementById("rangeFill");
+const startThumb = document.getElementById("startThumb");
+const endThumb = document.getElementById("endThumb");
+const startLabel = document.getElementById("startLabel");
+const endLabel = document.getElementById("endLabel");
 const setStartFromPreview = document.getElementById("setStartFromPreview");
 const setEndFromPreview = document.getElementById("setEndFromPreview");
 
 let pendingDownload = null;
+let cropStart = 0;
+let cropEnd = 0;
+let cropMax = 0;
+let activeThumb = null;
 
 function setStatus(label, progress) {
   statusLabel.textContent = label;
@@ -43,18 +50,26 @@ function toClock(totalSeconds) {
 }
 
 function syncRanges() {
-  let start = Number(startRange.value || 0);
-  let end = Number(endRange.value || 0);
+  let start = cropStart;
+  let end = cropEnd;
   if (start > end) {
-    if (document.activeElement === startRange) {
+    if (activeThumb === "start") {
       end = start;
-      endRange.value = String(end);
     } else {
       start = end;
-      startRange.value = String(start);
     }
   }
+  cropStart = start;
+  cropEnd = end;
+  const startPct = cropMax > 0 ? (cropStart / cropMax) * 100 : 0;
+  const endPct = cropMax > 0 ? (cropEnd / cropMax) * 100 : 0;
+  startThumb.style.left = `calc(${startPct}% - 10px)`;
+  endThumb.style.left = `calc(${endPct}% - 10px)`;
+  rangeFill.style.left = `${startPct}%`;
+  rangeFill.style.width = `${Math.max(0, endPct - startPct)}%`;
   rangeSummary.textContent = `${toClock(start)} - ${toClock(end)}`;
+  startLabel.textContent = `Start ${toClock(start)}`;
+  endLabel.textContent = `End ${toClock(end)}`;
 }
 
 function renderQueryVariants(queries = []) {
@@ -188,11 +203,9 @@ function openPreviewModal(preview) {
     option.textContent = item.label;
     qualitySelect.appendChild(option);
   }
-  const maxDuration = Number(preview.durationSeconds || 0);
-  startRange.max = String(maxDuration);
-  endRange.max = String(maxDuration);
-  startRange.value = "0";
-  endRange.value = String(maxDuration);
+  cropMax = Number(preview.durationSeconds || 0);
+  cropStart = 0;
+  cropEnd = cropMax;
   syncRanges();
   previewModal.classList.remove("hidden");
   previewModal.classList.add("flex");
@@ -205,8 +218,9 @@ function closeModal() {
   previewMediaFrame.style.aspectRatio = "";
   previewModal.classList.add("hidden");
   previewModal.classList.remove("flex");
-  startRange.value = "0";
-  endRange.value = "0";
+  cropStart = 0;
+  cropEnd = 0;
+  cropMax = 0;
   syncRanges();
   pendingDownload = null;
 }
@@ -273,8 +287,8 @@ confirmDownload.addEventListener("click", async () => {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
         url: pendingDownload.url,
-        start: toClock(startRange.value),
-        end: toClock(endRange.value),
+        start: toClock(cropStart),
+        end: toClock(cropEnd),
         quality: qualitySelect.value,
         force: pendingDownload.force,
       }),
@@ -292,16 +306,40 @@ previewModal.addEventListener("click", (event) => {
     closeModal();
   }
 });
-startRange.addEventListener("input", syncRanges);
-endRange.addEventListener("input", syncRanges);
 setStartFromPreview.addEventListener("click", () => {
-  startRange.value = String(Math.floor(previewVideo.currentTime || 0));
+  cropStart = Math.floor(previewVideo.currentTime || 0);
+  activeThumb = "start";
   syncRanges();
 });
 setEndFromPreview.addEventListener("click", () => {
-  endRange.value = String(Math.floor(previewVideo.currentTime || 0));
+  cropEnd = Math.floor(previewVideo.currentTime || 0);
+  activeThumb = "end";
   syncRanges();
 });
+for (const [thumb, name] of [[startThumb, "start"], [endThumb, "end"]]) {
+  thumb.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    activeThumb = name;
+    thumb.setPointerCapture(event.pointerId);
+  });
+  thumb.addEventListener("pointermove", (event) => {
+    if (activeThumb !== name || cropMax <= 0) {
+      return;
+    }
+    const track = thumb.parentElement.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (event.clientX - track.left) / track.width));
+    const value = Math.round(ratio * cropMax);
+    if (name === "start") {
+      cropStart = value;
+    } else {
+      cropEnd = value;
+    }
+    syncRanges();
+  });
+  thumb.addEventListener("pointerup", () => {
+    activeThumb = null;
+  });
+}
 previewVideo.addEventListener("loadedmetadata", () => {
   if (previewVideo.videoWidth > 0 && previewVideo.videoHeight > 0) {
     previewMediaFrame.style.aspectRatio = `${previewVideo.videoWidth} / ${previewVideo.videoHeight}`;