@hyperframes/studio 0.7.94 → 0.7.96

package/src/player/components/AudioWaveform.tsx

@@ -1,74 +1,105 @@
-import { memo, useRef, useState, useCallback, useEffect } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import { useThumbnailLease } from "../../hooks/useThumbnailLease";
+import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
 
 interface AudioWaveformProps {
   audioUrl: string;
   waveformUrl?: string;
   label: string;
   labelColor: string;
-  /**
-   * Fraction (0–1) of the source the clip starts at, after the media-start
-   * trim. Defaults to 0 (no front trim).
-   */
   trimStartFraction?: number;
-  /**
-   * Fraction (0–1) of the source the clip ends at. Defaults to 1 (no tail
-   * trim). Together these window the rendered peaks to the trimmed slice so the
-   * waveform tracks the clip edges instead of squeezing the whole file in.
-   */
   trimEndFraction?: number;
+  projectId: string;
+  sessionEpoch: number;
+  priority: ThumbnailPriority;
 }
 
-const BAR_W = 2;
-const GAP = 1;
-const STEP = BAR_W + GAP;
+const BAR_WIDTH = 2;
+const BAR_STEP = 3;
 
-/** Downsample PCM channel data into peak amplitudes (0–1). */
 function extractPeaks(channelData: Float32Array, barCount: number): number[] {
   const peaks: number[] = [];
   const samplesPerBar = Math.floor(channelData.length / barCount);
   if (samplesPerBar === 0) return Array(barCount).fill(0);
-  for (let i = 0; i < barCount; i++) {
+  for (let index = 0; index < barCount; index++) {
     let max = 0;
-    const start = i * samplesPerBar;
+    const start = index * samplesPerBar;
     const end = Math.min(start + samplesPerBar, channelData.length);
-    for (let j = start; j < end; j++) {
-      // fallow-ignore-next-line code-duplication
-      const abs = Math.abs(channelData[j] ?? 0);
-      if (abs > max) max = abs;
+    for (let sample = start; sample < end; sample++) {
+      max = Math.max(max, Math.abs(channelData[sample] ?? 0));
     }
     peaks.push(max);
   }
   const maxPeak = Math.max(...peaks, 0.001);
-  return peaks.map((p) => p / maxPeak);
+  return peaks.map((peak) => peak / maxPeak);
 }
 
-/** Deterministic fake waveform as fallback (matches demo app). */
 function fakePeaks(url: string, count: number): number[] {
   let seed = 0;
-  for (let i = 0; i < url.length; i++) seed = ((seed << 5) - seed + url.charCodeAt(i)) | 0;
+  for (let index = 0; index < url.length; index++) {
+    seed = ((seed << 5) - seed + url.charCodeAt(index)) | 0;
+  }
   seed = Math.abs(seed) || 42;
-  const rand = () => {
+  const random = () => {
     seed = (seed * 16807) % 2147483647;
     return (seed & 0x7fffffff) / 2147483647;
   };
-  const peaks: number[] = [];
-  for (let i = 0; i < count; i++) {
-    const t = i / count;
-    const envelope = 0.3 + 0.3 * Math.sin(t * Math.PI * 3.2) + 0.2 * Math.sin(t * Math.PI * 7.1);
-    peaks.push(Math.max(0.05, Math.min(1, envelope * (0.4 + 0.6 * rand()))));
+  return Array.from({ length: count }, (_, index) => {
+    const time = index / count;
+    const envelope =
+      0.3 + 0.3 * Math.sin(time * Math.PI * 3.2) + 0.2 * Math.sin(time * Math.PI * 7.1);
+    return Math.max(0.05, Math.min(1, envelope * (0.4 + 0.6 * random())));
+  });
+}
+
+async function loadWaveform(
+  audioUrl: string,
+  waveformUrl: string | undefined,
+  signal: AbortSignal,
+): Promise<number[]> {
+  try {
+    return waveformUrl
+      ? await fetchWaveformPeaks(waveformUrl, signal)
+      : await decodeWaveformPeaks(audioUrl, signal);
+  } catch (error) {
+    if (signal.aborted) throw error;
+    return fakePeaks(waveformUrl ?? audioUrl, 4000);
   }
-  return peaks;
 }
 
-// Module-level cache so decoded audio persists across re-renders and re-mounts
-const peaksCache = new Map<string, number[]>();
-const decodeInFlight = new Map<string, Promise<number[]>>();
+async function fetchWaveformPeaks(url: string, signal: AbortSignal): Promise<number[]> {
+  const response = await fetch(url, { signal });
+  if (!response.ok) throw new Error(`Waveform request failed (${response.status})`);
+  const data: unknown = await response.json();
+  if (
+    typeof data !== "object" ||
+    data === null ||
+    !("peaks" in data) ||
+    !Array.isArray(data.peaks) ||
+    !data.peaks.every((peak) => typeof peak === "number")
+  ) {
+    throw new Error("Invalid waveform response");
+  }
+  return data.peaks;
+}
 
-/**
- * Audio waveform rendered from real PCM data via Web Audio API.
- * Falls back to a deterministic fake pattern if decoding fails.
- * Bars grow from bottom to top, rendered as CSS divs for zoom resilience.
- */
+async function decodeWaveformPeaks(url: string, signal: AbortSignal): Promise<number[]> {
+  const response = await fetch(url, { signal });
+  if (!response.ok) throw new Error(`Audio request failed (${response.status})`);
+  const buffer = await response.arrayBuffer();
+  if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+  const context = new AudioContext();
+  try {
+    const decoded = await context.decodeAudioData(buffer);
+    if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+    return extractPeaks(decoded.getChannelData(0), 4000);
+  } finally {
+    await context.close();
+  }
+}
+
+/** Bounded waveform subscriber; cache, cancellation and dedupe live in one scheduler. */
 export const AudioWaveform = memo(function AudioWaveform({
   audioUrl,
   waveformUrl,
@@ -76,130 +107,96 @@ export const AudioWaveform = memo(function AudioWaveform({
   labelColor,
   trimStartFraction,
   trimEndFraction,
+  projectId,
+  sessionEpoch,
+  priority,
 }: AudioWaveformProps) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const barsRef = useRef<HTMLDivElement | null>(null);
-  const roRef = useRef<ResizeObserver | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
   const cacheKey = waveformUrl ?? audioUrl;
-  const [peaks, setPeaks] = useState<number[] | null>(peaksCache.get(cacheKey) ?? null);
-
-  useEffect(() => {
-    if (peaks || !cacheKey) return;
-
-    let cancelled = false;
-
-    let promise = decodeInFlight.get(cacheKey);
-    if (!promise) {
-      promise = (
-        waveformUrl
-          ? fetch(waveformUrl)
-              .then((r) => r.json())
-              .then((d: { peaks?: number[] }) => {
-                if (!Array.isArray(d.peaks)) throw new Error("bad response");
-                return d.peaks;
-              })
-          : fetch(audioUrl)
-              .then((r) => r.arrayBuffer())
-              .then((buf) => {
-                const ctx = new AudioContext();
-                return ctx.decodeAudioData(buf).finally(() => ctx.close());
-              })
-              .then((decoded) => extractPeaks(decoded.getChannelData(0), 4000))
-      )
-        .catch(() => fakePeaks(cacheKey, 4000))
-        .then((p) => {
-          peaksCache.set(cacheKey, p);
-          return p;
-        })
-        .finally(() => decodeInFlight.delete(cacheKey));
-
-      decodeInFlight.set(cacheKey, promise);
-    }
-
-    promise.then((p) => {
-      if (!cancelled) setPeaks(p);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [audioUrl, waveformUrl, cacheKey, peaks]);
+  const request = useMemo(
+    () => ({
+      key: createThumbnailKey({ kind: "waveform", source: cacheKey }),
+      projectId,
+      sessionEpoch,
+      kind: "waveform" as const,
+      priority,
+      rich: false,
+      load: async (signal: AbortSignal) => {
+        const peaks = await loadWaveform(audioUrl, waveformUrl, signal);
+        return {
+          value: { kind: "waveform" as const, peaks },
+          weight: peaks.length * Float64Array.BYTES_PER_ELEMENT,
+        };
+      },
+    }),
+    [audioUrl, cacheKey, priority, projectId, sessionEpoch, waveformUrl],
+  );
+  const snapshot = useThumbnailLease(cacheKey ? request : null);
+  const peaks =
+    snapshot.status === "ready" && snapshot.value.kind === "waveform" ? snapshot.value.peaks : null;
 
-  // Draw bars into the container using innerHTML (fast, zoom-resilient)
   const draw = useCallback(() => {
-    const container = containerRef.current;
-    const barsEl = barsRef.current;
-    if (!container || !barsEl || !peaks) return;
-
-    // Window the peaks to the trimmed slice [start, end) of the source so the
-    // bars track the clip edges. Clamp to a valid, non-empty range.
-    const winStart = Math.max(0, Math.min(1, trimStartFraction ?? 0));
-    const winEnd = Math.max(winStart, Math.min(1, trimEndFraction ?? 1));
-    const lo = Math.floor(winStart * peaks.length);
-    const hi = Math.max(lo + 1, Math.ceil(winEnd * peaks.length));
-    const span = hi - lo;
-
-    // Fill the full (possibly zoomed) clip width with STEP-spaced bars, resampling
-    // the windowed peaks across them — upsampling (repeating peaks) when the clip
-    // is wider than the slice has samples, so the waveform stretches with zoom
-    // instead of stopping partway across.
-    const w = container.clientWidth || 400;
-    const barCount = Math.max(0, Math.floor(w / STEP));
-
-    let html = "";
-    for (let i = 0; i < barCount; i++) {
-      // Map bar index to peak index within the windowed range (resample)
-      const peakIdx = lo + Math.min(span - 1, Math.floor((i / barCount) * span));
-      const amp = peaks[peakIdx] ?? 0;
-      const pct = Math.max(3, Math.round(amp * 100));
-      const opacity = (0.45 + amp * 0.4).toFixed(2);
-      html += `<div style="position:absolute;bottom:0;left:${i * STEP}px;width:${BAR_W}px;height:${pct}%;background:rgba(75,163,210,${opacity})"></div>`;
+    const canvas = canvasRef.current;
+    if (!canvas || !peaks) return;
+    const width = Math.max(1, canvas.clientWidth);
+    const height = Math.max(1, canvas.clientHeight);
+    const scale = window.devicePixelRatio || 1;
+    canvas.width = Math.ceil(width * scale);
+    canvas.height = Math.ceil(height * scale);
+    const context = canvas.getContext("2d");
+    if (!context) return;
+    context.scale(scale, scale);
+    context.clearRect(0, 0, width, height);
+    const startFraction = Math.max(0, Math.min(1, trimStartFraction ?? 0));
+    const endFraction = Math.max(startFraction, Math.min(1, trimEndFraction ?? 1));
+    const start = Math.floor(startFraction * peaks.length);
+    const end = Math.max(start + 1, Math.ceil(endFraction * peaks.length));
+    const span = end - start;
+    const barCount = Math.floor(width / BAR_STEP);
+    for (let index = 0; index < barCount; index++) {
+      const peakIndex = start + Math.min(span - 1, Math.floor((index / barCount) * span));
+      const amplitude = peaks[peakIndex] ?? 0;
+      const barHeight = Math.max(2, amplitude * height);
+      context.fillStyle = `rgba(75,163,210,${(0.45 + amplitude * 0.4).toFixed(2)})`;
+      context.fillRect(index * BAR_STEP, height - barHeight, BAR_WIDTH, barHeight);
     }
-    barsEl.innerHTML = html;
-  }, [peaks, trimStartFraction, trimEndFraction]);
+  }, [peaks, trimEndFraction, trimStartFraction]);
 
-  // Observe container size and redraw
-  const setContainerRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      roRef.current?.disconnect();
-      containerRef.current = el;
-      if (!el) return;
+  const setCanvasRef = useCallback(
+    (canvas: HTMLCanvasElement | null) => {
+      observerRef.current?.disconnect();
+      canvasRef.current = canvas;
+      if (!canvas) return;
       draw();
-      roRef.current = new ResizeObserver(() => draw());
-      roRef.current.observe(el);
+      observerRef.current = new ResizeObserver(draw);
+      observerRef.current.observe(canvas);
     },
     [draw],
   );
 
-  // Redraw when peaks arrive
-  useEffect(() => {
-    draw();
-  }, [draw]);
-
-  useEffect(
-    () => () => {
-      roRef.current?.disconnect();
-    },
-    [],
-  );
+  useMountEffect(() => () => observerRef.current?.disconnect());
 
   return (
-    <div ref={setContainerRef} className="absolute inset-0 overflow-hidden">
-      <div ref={barsRef} className="absolute left-0 right-0 bottom-0" style={{ top: 16 }} />
-      {/* Shimmer while decoding */}
-      {!peaks && (
+    <div className="absolute inset-0 overflow-hidden">
+      <canvas
+        ref={setCanvasRef}
+        className="absolute inset-x-0 bottom-0 w-full"
+        style={{ top: 16 }}
+      />
+      {snapshot.status === "loading" && (
         <div
-          className="absolute left-0 right-0 bottom-0 animate-pulse"
+          className="absolute inset-x-0 bottom-0 top-4 animate-pulse"
           style={{
-            top: 16,
             background:
               "linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)",
           }}
         />
       )}
       {label && (
-        <div className="absolute top-0 left-0 right-0 px-1.5 py-0.5 z-10">
+        <div className="absolute inset-x-0 top-0 z-10 px-1.5 py-0.5">
           <span
-            className="text-[9px] font-semibold truncate block leading-tight"
+            className="block truncate text-[9px] font-semibold leading-tight"
             style={{ color: labelColor, textShadow: "0 1px 3px rgba(0,0,0,0.9)" }}
           >
             {label}

package/src/player/components/CompositionThumbnail.test.ts

@@ -2,7 +2,8 @@
 
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 import { buildCompositionThumbnailUrl, CompositionThumbnail } from "./CompositionThumbnail";
 
 Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
@@ -31,12 +32,18 @@ class MockImage {
 
 const originalResizeObserver = globalThis.ResizeObserver;
 const originalImage = globalThis.Image;
+const originalFetch = globalThis.fetch;
+const originalCreateObjectURL = URL.createObjectURL;
+const originalRevokeObjectURL = URL.revokeObjectURL;
 let host: HTMLDivElement;
 let root: Root | null = null;
 
 beforeEach(() => {
   globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
   globalThis.Image = MockImage as unknown as typeof Image;
+  globalThis.fetch = vi.fn(async () => new Response(new Blob(["thumbnail"]), { status: 200 }));
+  URL.createObjectURL = vi.fn(() => "blob:composition-thumbnail");
+  URL.revokeObjectURL = vi.fn();
   MockImage.instances = [];
   host = document.createElement("div");
   document.body.append(host);
@@ -45,8 +52,12 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root?.unmount());
   root = null;
+  thumbnailScheduler.invalidateProject("/api/projects/demo/preview");
   globalThis.ResizeObserver = originalResizeObserver;
   globalThis.Image = originalImage;
+  globalThis.fetch = originalFetch;
+  URL.createObjectURL = originalCreateObjectURL;
+  URL.revokeObjectURL = originalRevokeObjectURL;
   document.body.replaceChildren();
 });
 
@@ -68,9 +79,9 @@ describe("buildCompositionThumbnailUrl", () => {
 });
 
 describe("CompositionThumbnail", () => {
-  function renderThumbnail(): MockImage {
+  async function renderThumbnail(): Promise<MockImage> {
     root = createRoot(host);
-    act(() => {
+    await act(async () => {
       root!.render(
         React.createElement(CompositionThumbnail, {
           previewUrl: "/api/projects/demo/preview",
@@ -78,19 +89,27 @@ describe("CompositionThumbnail", () => {
           labelColor: "#fff",
         }),
       );
+      await new Promise((resolve) => setTimeout(resolve, 0));
     });
     const probe = MockImage.instances[0];
     if (!probe) throw new Error("Expected an image probe");
     return probe;
   }
 
-  it("renders visible tiles after the off-DOM probe loads", () => {
-    const probe = renderThumbnail();
+  it("renders visible tiles after the scheduled off-DOM probe loads", async () => {
+    const probe = await renderThumbnail();
 
-    act(() => {
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/api/projects/demo/thumbnail/index.html"),
+      expect.objectContaining({ signal: expect.any(AbortSignal) }),
+    );
+    expect(probe.src).toBe("blob:composition-thumbnail");
+
+    await act(async () => {
       probe.naturalWidth = 1920;
       probe.naturalHeight = 1080;
       probe.onload?.();
+      await new Promise((resolve) => setTimeout(resolve, 0));
     });
 
     const tiles = [...host.querySelectorAll("img")];
@@ -98,16 +117,20 @@ describe("CompositionThumbnail", () => {
     expect(tiles.every((tile) => !tile.classList.contains("hidden"))).toBe(true);
   });
 
-  it("aborts its off-DOM image probe when unmounted", () => {
-    const probe = renderThumbnail();
+  it("aborts its scheduled off-DOM image probe when unmounted", async () => {
+    const probe = await renderThumbnail();
     expect(host.querySelector("img")).toBeNull();
-    expect(probe.src).toContain("/api/projects/demo/thumbnail/index.html");
+    expect(probe.src).toBe("blob:composition-thumbnail");
 
-    act(() => root?.unmount());
+    await act(async () => {
+      root?.unmount();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
     root = null;
 
     expect(probe.onload).toBeNull();
     expect(probe.onerror).toBeNull();
     expect(probe.src).toBe("");
+    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:composition-thumbnail");
   });
 });

package/src/player/components/CompositionThumbnail.tsx

@@ -1,5 +1,9 @@
-import { memo, useCallback, useEffect, useState, useRef } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
+import { useThumbnailLease } from "../../hooks/useThumbnailLease";
+import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
+import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
+import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
 
 interface CompositionThumbnailProps {
   previewUrl: string;
@@ -11,6 +15,10 @@ interface CompositionThumbnailProps {
   duration?: number;
   width?: number;
   height?: number;
+  projectId?: string;
+  sessionEpoch?: number;
+  priority?: ThumbnailPriority;
+  rich?: boolean;
 }
 
 const CLIP_HEIGHT = 66;
@@ -34,9 +42,8 @@ export function buildCompositionThumbnailUrl({
   const thumbnailBase = previewUrl
     .replace("/preview/comp/", "/thumbnail/")
     .replace(/\/preview$/, "/thumbnail/index.html");
-  const midTime = seekTime + duration / 2;
   const thumbnailUrl = new URL(thumbnailBase, origin);
-  thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
+  thumbnailUrl.searchParams.set("t", (seekTime + duration / 2).toFixed(2));
   thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
   if (selector) {
     thumbnailUrl.searchParams.set("selector", selector);
@@ -47,6 +54,29 @@ export function buildCompositionThumbnailUrl({
   return thumbnailUrl.toString();
 }
 
+async function loadCompositionImage(url: string, signal: AbortSignal) {
+  const response = await fetch(url, { signal });
+  if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
+  const blob = await response.blob();
+  if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+  const objectUrl = URL.createObjectURL(blob);
+  try {
+    const aspect = await probeImageAspect(objectUrl, signal);
+    return {
+      value: { kind: "image" as const, url: objectUrl, aspect },
+      weight:
+        TIMELINE_VIEWPORT_BUDGETS.posterMaxPhysicalWidth *
+        TIMELINE_VIEWPORT_BUDGETS.posterMaxPhysicalHeight *
+        4,
+      dispose: () => URL.revokeObjectURL(objectUrl),
+    };
+  } catch (error) {
+    URL.revokeObjectURL(objectUrl);
+    throw error;
+  }
+}
+
+/** Server-rendered composition poster, deduplicated and budgeted by project/session. */
 export const CompositionThumbnail = memo(function CompositionThumbnail({
   previewUrl,
   label,
@@ -55,31 +85,12 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
   selectorIndex,
   seekTime = 2,
   duration = 5,
+  projectId = previewUrl,
+  sessionEpoch = 0,
+  priority = "visible",
 }: CompositionThumbnailProps) {
   const [containerWidth, setContainerWidth] = useState(0);
-  const [loaded, setLoaded] = useState(false);
-  const [aspect, setAspect] = useState(16 / 9);
-  const roRef = useRef<ResizeObserver | null>(null);
-
-  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
-    roRef.current?.disconnect();
-    if (!el) return;
-
-    const measured = el.parentElement?.clientWidth || el.clientWidth;
-    // fallow-ignore-next-line code-duplication
-    setContainerWidth(measured);
-
-    const target = el.parentElement || el;
-    roRef.current = new ResizeObserver(([entry]) => {
-      setContainerWidth(entry.contentRect.width);
-    });
-    roRef.current.observe(target);
-  }, []);
-
-  useMountEffect(() => () => {
-    roRef.current?.disconnect();
-  });
-
+  const observerRef = useRef<ResizeObserver | null>(null);
   const url = buildCompositionThumbnailUrl({
     previewUrl,
     seekTime,
@@ -88,52 +99,56 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
     selectorIndex,
     origin: window.location.origin,
   });
+  const request = useMemo(
+    () => ({
+      key: createThumbnailKey({ kind: "composition", url }),
+      projectId,
+      sessionEpoch,
+      kind: "composition" as const,
+      priority,
+      rich: true,
+      load: (signal: AbortSignal) => loadCompositionImage(url, signal),
+    }),
+    [priority, projectId, sessionEpoch, url],
+  );
+  const snapshot = useThumbnailLease(request);
+  const value =
+    snapshot.status === "ready" && snapshot.value.kind === "image" ? snapshot.value : null;
+  const { frameW, frameCount } = computeThumbnailStrip(
+    containerWidth,
+    value?.aspect ?? 16 / 9,
+    CLIP_HEIGHT,
+    48,
+  );
 
-  // Probe outside React's DOM and explicitly abort on URL changes/unmount. A
-  // hidden React <img> keeps its Fiber reachable from Blink's pending-activity
-  // queue while a request is unresolved.
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    let cancelled = false;
-    setLoaded(false);
-    const probe = new Image();
-    probe.onload = () => {
-      if (cancelled) return;
-      if (probe.naturalWidth > 0 && probe.naturalHeight > 0) {
-        setAspect(probe.naturalWidth / probe.naturalHeight);
-      }
-      setLoaded(true);
-    };
-    probe.onerror = () => {
-      if (!cancelled) setLoaded(false);
-    };
-    probe.src = url;
-    return () => {
-      cancelled = true;
-      probe.onload = null;
-      probe.onerror = null;
-      probe.src = "";
-    };
-  }, [url]);
+  const setContainerRef = useCallback((element: HTMLDivElement | null) => {
+    observerRef.current?.disconnect();
+    if (!element) return;
+    const target = element.parentElement ?? element;
+    setContainerWidth(target.clientWidth);
+    observerRef.current = new ResizeObserver(([entry]) =>
+      setContainerWidth(entry.contentRect.width),
+    );
+    observerRef.current.observe(target);
+  }, []);
 
-  const frameW = Math.max(48, Math.round(CLIP_HEIGHT * aspect));
-  const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
+  useMountEffect(() => () => observerRef.current?.disconnect());
 
   return (
     <div ref={setContainerRef} className="absolute inset-0 overflow-hidden">
-      {loaded && (
+      {value && (
         <div
           className="absolute inset-0 flex"
           style={{ animation: "hf-thumb-fade 200ms ease-out", mixBlendMode: "lighten" }}
         >
-          {Array.from({ length: frameCount }).map((_, i) => (
+          {Array.from({ length: frameCount }, (_, index) => (
             <div
-              key={i}
+              key={index}
               className="relative h-full flex-shrink-0 overflow-hidden"
               style={{ width: frameW }}
             >
               <img
-                src={url}
+                src={value.url}
                 alt=""
                 draggable={false}
                 className="absolute inset-0 h-full w-full object-cover"
@@ -143,14 +158,16 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
           ))}
         </div>
       )}
-
+      {snapshot.status === "loading" && (
+        <div className="absolute inset-0 animate-pulse bg-white/[0.035]" />
+      )}
       {label && (
-        <div className="absolute left-3 top-0 bottom-0 flex items-center" style={{ zIndex: 10 }}>
+        <div className="absolute inset-y-0 left-3 z-10 flex items-center">
           <span
             className="block max-w-full truncate text-[10px] font-semibold leading-none"
             style={{
               color: labelColor,
-              textShadow: loaded ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
+              textShadow: value ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
             }}
           >
             {label}