Spaces:

moonlantern1
/

clipforge

Sleeping

App Files Files Community

moonlantern1 commited on 11 days ago

Commit

baf6b2a

verified ·

1 Parent(s): 86cc370

Add clip poster thumbnails and hover skim preview

Browse files

Files changed (1) hide show

app.py +134 -19

app.py CHANGED Viewed

@@ -63,6 +63,7 @@ class ClipFile:
     name: str
     url: str
     duration: str
 @dataclass
@@ -208,20 +209,65 @@ def _duration_label(path: Path) -> str:
     return f"{total // 60}:{total % 60:02d}" if total else "0:00"
 def _publish_files(job: Job) -> None:
     for path in sorted(job.output_dir.glob("short_*.mp4")):
         if not path.is_file():
             continue
         duration = _duration_label(path)
         existing = job.clips.get(path.name)
         if existing is None:
-            job.clips[path.name] = ClipFile(
-                name=path.name,
-                url=f"/api/jobs/{job.id}/files/{path.name}",
-                duration=duration,
-            )
-        elif existing.duration == "0:00" and duration != "0:00":
-            existing.duration = duration
 def _validate_credentials() -> None:
@@ -325,11 +371,7 @@ def _run_job(job_id: str) -> None:
             local_job = JOBS[job_id]
             for output in outputs:
                 if Path(output).exists():
-                    local_job.clips[Path(output).name] = ClipFile(
-                        name=Path(output).name,
-                        url=f"/api/jobs/{job_id}/files/{Path(output).name}",
-                        duration=_duration_label(Path(output)),
-                    )
             if worker_error:
                 local_job.error = worker_error
                 local_job.status = f"Failed: {worker_error}"
@@ -475,7 +517,8 @@ def get_job_file(job_id: str, filename: str) -> FileResponse:
         path = (job.output_dir / Path(filename).name).resolve(strict=False)
         if job.output_dir.resolve(strict=False) not in path.parents or not path.is_file():
             raise HTTPException(status_code=404, detail="File not found.")
-    return FileResponse(path, media_type="video/mp4", filename=path.name)
 @app.get("/health")
@@ -561,8 +604,12 @@ INDEX_HTML = r"""<!DOCTYPE html>
   .clip-thumb { aspect-ratio: 9/16; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background:#000; }
   .clip-thumb video { width:100%; height:100%; object-fit:cover; display:block; background:#000; }
   .clip-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.18)); pointer-events:none; }
-  .clip-play { width: 44px; height: 44px; background: rgba(255,255,255,0.88); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; z-index: 2; box-shadow: 0 2px 12px rgba(0,0,0,0.2); transition: transform 0.2s; }
   .clip-card:hover .clip-play { transform: scale(1.1); }
   .clip-meta { padding: 10px 12px; } .clip-num { font-size: 0.72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
   .clip-dur { font-size: 0.82rem; color: var(--ink); font-weight: 400; margin-top: 2px; }
   .clip-download { margin-top: 8px; display:inline-block; font-size:.74rem; color:var(--gold); text-decoration:none; }
@@ -877,9 +924,13 @@ INDEX_HTML = r"""<!DOCTYPE html>
       pct.textContent = step.pct ? `${Math.floor(step.pct)}%` : '';
     });
     (job.clips || []).forEach((clip, idx) => {
-      if (!renderedClips.some(c => c.name === clip.name)) {
         renderedClips.push(clip);
         addClip(renderedClips.length - 1);
       }
     });
     if (renderedClips.length) {
@@ -899,14 +950,78 @@ INDEX_HTML = r"""<!DOCTYPE html>
     const grid = document.getElementById('clips-grid');
     const card = document.createElement('div');
     card.className = 'clip-card';
-    card.innerHTML = `<div class="clip-thumb"><video src="${clip.url}#t=0.2" muted playsinline preload="metadata"></video><div class="clip-play">▶</div></div><div class="clip-meta"><div class="clip-num">Clip ${idx + 1}</div><div class="clip-dur">${clip.duration || '0:00'}</div><a class="clip-download" href="${clip.url}" download onclick="event.stopPropagation()">Download</a></div>`;
-    const preview = card.querySelector('video');
-    card.addEventListener('mouseenter', () => { preview.play().catch(() => {}); });
-    card.addEventListener('mouseleave', () => { preview.pause(); preview.currentTime = 0.2; });
     card.onclick = () => openModal(idx);
     grid.appendChild(card);
   }
   function openModal(idx) {
     const clip = renderedClips[idx];
     const modal = document.getElementById('modal');

     name: str
     url: str
     duration: str
+    poster_url: str | None = None
 @dataclass
     return f"{total // 60}:{total % 60:02d}" if total else "0:00"
+def _poster_path_for_video(path: Path) -> Path:
+    return path.with_name(f"{path.stem}.poster.jpg")
+def _ensure_poster(path: Path) -> Path | None:
+    poster_path = _poster_path_for_video(path)
+    if poster_path.is_file() and poster_path.stat().st_size > 0:
+        return poster_path
+    try:
+        subprocess.run(
+            [
+                "ffmpeg",
+                "-y",
+                "-loglevel",
+                "error",
+                "-ss",
+                "0.45",
+                "-i",
+                str(path),
+                "-frames:v",
+                "1",
+                "-q:v",
+                "3",
+                str(poster_path),
+            ],
+            check=True,
+            capture_output=True,
+            timeout=20,
+        )
+    except Exception:
+        return None
+    return poster_path if poster_path.is_file() and poster_path.stat().st_size > 0 else None
+def _clip_file(job: Job, path: Path, duration: str | None = None) -> ClipFile:
+    poster = _ensure_poster(path)
+    return ClipFile(
+        name=path.name,
+        url=f"/api/jobs/{job.id}/files/{path.name}",
+        duration=duration or _duration_label(path),
+        poster_url=f"/api/jobs/{job.id}/files/{poster.name}" if poster else None,
+    )
 def _publish_files(job: Job) -> None:
     for path in sorted(job.output_dir.glob("short_*.mp4")):
         if not path.is_file():
             continue
         duration = _duration_label(path)
+        poster = _ensure_poster(path)
+        poster_url = f"/api/jobs/{job.id}/files/{poster.name}" if poster else None
         existing = job.clips.get(path.name)
         if existing is None:
+            job.clips[path.name] = _clip_file(job, path, duration=duration)
+        else:
+            if existing.duration == "0:00" and duration != "0:00":
+                existing.duration = duration
+            if existing.poster_url is None and poster_url:
+                existing.poster_url = poster_url
 def _validate_credentials() -> None:
             local_job = JOBS[job_id]
             for output in outputs:
                 if Path(output).exists():
+                    local_job.clips[Path(output).name] = _clip_file(local_job, Path(output))
             if worker_error:
                 local_job.error = worker_error
                 local_job.status = f"Failed: {worker_error}"
         path = (job.output_dir / Path(filename).name).resolve(strict=False)
         if job.output_dir.resolve(strict=False) not in path.parents or not path.is_file():
             raise HTTPException(status_code=404, detail="File not found.")
+    media_type = "image/jpeg" if path.suffix.lower() in {".jpg", ".jpeg"} else "video/mp4"
+    return FileResponse(path, media_type=media_type, filename=path.name)
 @app.get("/health")
   .clip-thumb { aspect-ratio: 9/16; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background:#000; }
   .clip-thumb video { width:100%; height:100%; object-fit:cover; display:block; background:#000; }
   .clip-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.18)); pointer-events:none; }
+  .clip-play { width: 44px; height: 44px; background: rgba(255,255,255,0.88); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; z-index: 2; box-shadow: 0 2px 12px rgba(0,0,0,0.2); transition: transform 0.2s, opacity 0.2s; pointer-events:none; }
   .clip-card:hover .clip-play { transform: scale(1.1); }
+  .clip-card.previewing .clip-play { opacity: 0; transform: scale(0.92); }
+  .clip-skim { position:absolute; left:10px; right:10px; bottom:10px; height:3px; border-radius:99px; background:rgba(255,255,255,0.35); z-index:3; overflow:hidden; opacity:0; transition:opacity 0.2s; pointer-events:none; }
+  .clip-skim-fill { height:100%; width:0%; background:var(--champagne); border-radius:inherit; }
+  .clip-card:hover .clip-skim { opacity:1; }
   .clip-meta { padding: 10px 12px; } .clip-num { font-size: 0.72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
   .clip-dur { font-size: 0.82rem; color: var(--ink); font-weight: 400; margin-top: 2px; }
   .clip-download { margin-top: 8px; display:inline-block; font-size:.74rem; color:var(--gold); text-decoration:none; }
       pct.textContent = step.pct ? `${Math.floor(step.pct)}%` : '';
     });
     (job.clips || []).forEach((clip, idx) => {
+      const existingIdx = renderedClips.findIndex(c => c.name === clip.name);
+      if (existingIdx === -1) {
         renderedClips.push(clip);
         addClip(renderedClips.length - 1);
+      } else {
+        renderedClips[existingIdx] = Object.assign({}, renderedClips[existingIdx], clip);
+        updateClipCard(existingIdx);
       }
     });
     if (renderedClips.length) {
     const grid = document.getElementById('clips-grid');
     const card = document.createElement('div');
     card.className = 'clip-card';
+    card.dataset.clipName = clip.name;
+    const posterAttr = clip.poster_url ? ` poster="${escapeHtml(clip.poster_url)}"` : '';
+    card.innerHTML = `<div class="clip-thumb"><video src="${escapeHtml(clip.url)}#t=0.35"${posterAttr} muted playsinline preload="auto" loop></video><div class="clip-play">▶</div><div class="clip-skim"><div class="clip-skim-fill"></div></div></div><div class="clip-meta"><div class="clip-num">Clip ${idx + 1}</div><div class="clip-dur">${escapeHtml(clip.duration || '0:00')}</div><a class="clip-download" href="${escapeHtml(clip.url)}" download onclick="event.stopPropagation()">Download</a></div>`;
+    wireClipPreview(card);
     card.onclick = () => openModal(idx);
     grid.appendChild(card);
   }
+  function updateClipCard(idx) {
+    const clip = renderedClips[idx];
+    const card = document.querySelector(`.clip-card[data-clip-name="${CSS.escape(clip.name)}"]`);
+    if (!card) return;
+    const duration = card.querySelector('.clip-dur');
+    const preview = card.querySelector('video');
+    if (duration) duration.textContent = clip.duration || '0:00';
+    if (preview && clip.poster_url && preview.getAttribute('poster') !== clip.poster_url) {
+      preview.setAttribute('poster', clip.poster_url);
+    }
+  }
+  function wireClipPreview(card) {
+    const preview = card.querySelector('video');
+    const thumb = card.querySelector('.clip-thumb');
+    const skimFill = card.querySelector('.clip-skim-fill');
+    let scrubRaf = 0;
+    let pendingTime = null;
+    function duration() {
+      return Number.isFinite(preview.duration) && preview.duration > 0.2 ? preview.duration : 0;
+    }
+    function setSkim(percent) {
+      if (skimFill) skimFill.style.width = `${Math.max(0, Math.min(1, percent)) * 100}%`;
+    }
+    function seekFromPointer(event) {
+      const total = duration();
+      if (!total) return;
+      const rect = thumb.getBoundingClientRect();
+      const pct = Math.max(0, Math.min(1, (event.clientX - rect.left) / Math.max(1, rect.width)));
+      pendingTime = Math.max(0.05, Math.min(total - 0.05, total * pct));
+      setSkim(pct);
+      if (!scrubRaf) {
+        scrubRaf = requestAnimationFrame(() => {
+          if (pendingTime !== null && Math.abs(preview.currentTime - pendingTime) > 0.08) {
+            preview.currentTime = pendingTime;
+          }
+          scrubRaf = 0;
+        });
+      }
+    }
+    preview.addEventListener('timeupdate', () => {
+      const total = duration();
+      if (total) setSkim(preview.currentTime / total);
+    });
+    preview.addEventListener('loadeddata', () => card.classList.add('has-preview'));
+    thumb.addEventListener('mouseenter', event => {
+      card.classList.add('previewing');
+      seekFromPointer(event);
+      preview.play().catch(() => {});
+    });
+    thumb.addEventListener('mousemove', seekFromPointer);
+    thumb.addEventListener('mouseleave', () => {
+      card.classList.remove('previewing');
+      preview.pause();
+      setSkim(0);
+      const resetTime = Math.min(0.35, duration() || 0.35);
+      try { preview.currentTime = resetTime; } catch (_) {}
+    });
+  }
   function openModal(idx) {
     const clip = renderedClips[idx];
     const modal = document.getElementById('modal');