fix(ThumbnailStrip): replace abortRef with run ID to eliminate concurrency race (magic-peach#893)

* fix(ffmpeg): guard buildAudioFilter against zero or negative speed

When speed is zero or negative, the while loop dividing remaining by
0.5 never converges: 0 / 0.5 == 0, causing an infinite loop that
blocks the browser thread entirely.

Return an empty filter string immediately for any speed <= 0, which
is consistent with the existing behavior of omitting atempo filters
when no adjustment is needed.

Closes magic-peach#862

* fix(ThumbnailStrip): replace abortRef with run ID to eliminate concurrency race

The previous abortRef approach had a race window: the useEffect cleanup
sets abortRef.current = true, but the new effect immediately invokes
generateThumbnails which resets it to false. Any in-flight iteration from
the prior run reads the newly-reset false and continues executing
concurrently with the new run, causing duplicate offscreen video elements,
interleaved thumbnail sequences, and DOM/memory leaks.

Replace abortRef with a lastRunIdRef integer counter. Each invocation
captures its own runId via ++lastRunIdRef.current. Every await checkpoint
and every state-mutating code path checks lastRunIdRef.current === runId
before proceeding. The cleanup function simply increments the counter,
which immediately invalidates any in-flight run without a shared boolean
that can be reset underneath it.

Wrap the video element lifecycle in try/finally to guarantee video.src
is cleared and offscreenVideoRef is released even when the function exits
early (stale run detected, ctx unavailable, or unhandled rejection).

Closes magic-peach#863

Author: anshul23102

src/components/ThumbnailStrip.tsx

@@ -33,7 +33,7 @@ export default function ThumbnailStrip({
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const stripRef = useRef<HTMLDivElement>(null);
   const offscreenVideoRef = useRef<HTMLVideoElement | null>(null);
-  const abortRef = useRef(false);
+  const lastRunIdRef = useRef(0);
   const objectUrlsRef = useRef<string[]>([]);
 
   const effectiveTrimEnd = trimEnd ?? duration;
@@ -46,89 +46,105 @@ export default function ThumbnailStrip({
   const generateThumbnails = useCallback(async () => {
     if (!videoSrc || duration <= 0) return;
 
-    abortRef.current = false;
+    const runId = ++lastRunIdRef.current;
     setIsGenerating(true);
     revokeAllObjectUrls();
     setThumbnails([]);
     setProgress(0);
 
     const video = document.createElement("video");
-    video.src = videoSrc;
-    video.crossOrigin = "anonymous";
-    video.muted = true;
-    video.preload = "auto";
     offscreenVideoRef.current = video;
 
-    await new Promise<void>((resolve, reject) => {
-      video.onloadedmetadata = () => resolve();
-      video.onerror = () => reject(new Error("Video load failed"));
-      video.load();
-    });
+    try {
+      video.src = videoSrc;
+      video.crossOrigin = "anonymous";
+      video.muted = true;
+      video.preload = "auto";
 
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+      await new Promise<void>((resolve, reject) => {
+        video.onloadedmetadata = () => resolve();
+        video.onerror = () => reject(new Error("Video load failed"));
+        video.load();
+      });
 
-    const thumbW = 160;
-    const thumbH = 90;
-    canvas.width = thumbW;
-    canvas.height = thumbH;
+      if (lastRunIdRef.current !== runId) return;
 
-    const times: number[] = [];
-    for (let t = 0; t <= duration; t += intervalSeconds) {
-      times.push(Math.min(t, duration - 0.1));
-    }
-    if ((times[times.length - 1] ?? 0) < duration - 0.5) {
-      times.push(duration - 0.1);
-    }
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
 
-    const captured: Thumbnail[] = [];
+      const thumbW = 160;
+      const thumbH = 90;
+      canvas.width = thumbW;
+      canvas.height = thumbH;
 
-    for (let i = 0; i < times.length; i++) {
-      if (abortRef.current) break;
+      const times: number[] = [];
+      for (let t = 0; t <= duration; t += intervalSeconds) {
+        times.push(Math.min(t, duration - 0.1));
+      }
+      if ((times[times.length - 1] ?? 0) < duration - 0.5) {
+        times.push(duration - 0.1);
+      }
 
-      const time = times[i] ?? 0;
-      await new Promise<void>((resolve) => {
-        const onSeeked = async () => {
-          video.removeEventListener("seeked", onSeeked);
-          ctx.drawImage(video, 0, 0, thumbW, thumbH);
+      const captured: Thumbnail[] = [];
 
-          try {
-            const blob = await new Promise<Blob | null>((blobResolve) => {
-              canvas.toBlob((b) => blobResolve(b), "image/jpeg", 0.7);
-            });
-            if (blob && !abortRef.current) {
-              const url = URL.createObjectURL(blob);
-              objectUrlsRef.current.push(url);
-              captured.push({ time, dataUrl: url });
+      for (let i = 0; i < times.length; i++) {
+        if (lastRunIdRef.current !== runId) break;
+
+        const time = times[i] ?? 0;
+        await new Promise<void>((resolve) => {
+          const onSeeked = async () => {
+            video.removeEventListener("seeked", onSeeked);
+
+            if (lastRunIdRef.current !== runId) {
+              resolve();
+              return;
+            }
 
-              if (i === times.length - 1 || captured.length % 5 === 0) {
-                setThumbnails([...captured]);
+            ctx.drawImage(video, 0, 0, thumbW, thumbH);
+
+            try {
+              const blob = await new Promise<Blob | null>((blobResolve) => {
+                canvas.toBlob((b) => blobResolve(b), "image/jpeg", 0.7);
+              });
+              if (blob && lastRunIdRef.current === runId) {
+                const url = URL.createObjectURL(blob);
+                objectUrlsRef.current.push(url);
+                captured.push({ time, dataUrl: url });
+
+                if (i === times.length - 1 || captured.length % 5 === 0) {
+                  setThumbnails([...captured]);
+                }
               }
+            } catch (err) {
+              console.error("Failed to generate thumbnail blob", err);
             }
-          } catch (err) {
-            console.error("Failed to generate thumbnail blob", err);
-          }
-
-          setProgress(Math.round(((i + 1) / times.length) * 100));
-          resolve();
-        };
-        video.addEventListener("seeked", onSeeked);
-        video.currentTime = time;
-      });
-    }
 
-    video.src = "";
-    offscreenVideoRef.current = null;
-    setIsGenerating(false);
+            setProgress(Math.round(((i + 1) / times.length) * 100));
+            resolve();
+          };
+          video.addEventListener("seeked", onSeeked);
+          video.currentTime = time;
+        });
+      }
+
+      if (lastRunIdRef.current === runId) {
+        setIsGenerating(false);
+      }
+    } finally {
+      video.src = "";
+      if (offscreenVideoRef.current === video) {
+        offscreenVideoRef.current = null;
+      }
+    }
   }, [videoSrc, duration, intervalSeconds, revokeAllObjectUrls]);
 
   useEffect(() => {
     if (videoSrc && duration > 0) {
       generateThumbnails();
     }
     return () => {
-      abortRef.current = true;
+      lastRunIdRef.current++;
       revokeAllObjectUrls();
     };
   }, [generateThumbnails, revokeAllObjectUrls, videoSrc, duration]);