@hyperframes/studio 0.7.94 → 0.7.96

package/src/player/components/VideoThumbnail.test.tsx

@@ -2,65 +2,28 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { thumbnailScheduler } from "../lib/thumbnailScheduler";
+import { decodeVideoThumbnail } from "../lib/thumbnailVideoDecoder";
 import { VideoThumbnail } from "./VideoThumbnail";
 
+vi.mock("../lib/thumbnailVideoDecoder", () => ({ decodeVideoThumbnail: vi.fn() }));
+
 Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
   configurable: true,
   value: true,
 });
 
-// Fire "intersecting" immediately on observe so the extraction effect runs.
-class MockIntersectionObserver {
-  private cb: IntersectionObserverCallback;
-  constructor(cb: IntersectionObserverCallback) {
-    this.cb = cb;
-  }
-  observe() {
-    this.cb(
-      [{ isIntersecting: true } as IntersectionObserverEntry],
-      this as unknown as IntersectionObserver,
-    );
-  }
-  disconnect() {}
-  unobserve() {}
-  takeRecords(): IntersectionObserverEntry[] {
-    return [];
-  }
-}
-
 class MockResizeObserver {
   observe() {}
   disconnect() {}
   unobserve() {}
 }
 
-const originalIO = globalThis.IntersectionObserver;
-const originalRO = globalThis.ResizeObserver;
-
 let host: HTMLDivElement;
 let root: Root | null = null;
-let createdVideos: HTMLVideoElement[];
 
 beforeEach(() => {
-  globalThis.IntersectionObserver =
-    MockIntersectionObserver as unknown as typeof IntersectionObserver;
   globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
-
-  createdVideos = [];
-  const origCreate = document.createElement.bind(document);
-  vi.spyOn(document, "createElement").mockImplementation((tag: string) => {
-    const el = origCreate(tag);
-    if (tag === "video") createdVideos.push(el as HTMLVideoElement);
-    return el;
-  });
-
-  // happy-dom's <video>/<canvas> don't decode media; stub the seam the
-  // extractor depends on so the effect can run deterministically.
-  vi.spyOn(HTMLMediaElement.prototype, "load").mockImplementation(() => {});
-  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue({
-    drawImage: () => {},
-  } as unknown as CanvasRenderingContext2D);
-
   host = document.createElement("div");
   document.body.append(host);
 });
@@ -68,85 +31,68 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root?.unmount());
   root = null;
-  vi.restoreAllMocks();
-  globalThis.IntersectionObserver = originalIO;
-  globalThis.ResizeObserver = originalRO;
+  thumbnailScheduler.invalidateProject("p");
+  vi.clearAllMocks();
   document.body.innerHTML = "";
 });
 
-function render(videoSrc: string) {
+async function render(rich = false) {
   root = createRoot(host);
-  act(() => {
-    root!.render(React.createElement(VideoThumbnail, { videoSrc, label: "", labelColor: "#fff" }));
+  await act(async () => {
+    root!.render(
+      <VideoThumbnail
+        videoSrc="/api/projects/p/preview/assets/clip.mp4"
+        label=""
+        labelColor="#fff"
+        projectId="p"
+        sessionEpoch={1}
+        priority="visible"
+        rich={rich}
+      />,
+    );
+    await Promise.resolve();
   });
 }
 
-function lastVideo(): HTMLVideoElement {
-  const v = createdVideos.at(-1);
-  expect(v).toBeDefined();
-  return v!;
-}
-
-describe("VideoThumbnail — tainted-canvas fallback", () => {
-  it("stops the extractor and drops the shimmer when toDataURL throws a SecurityError", () => {
-    vi.spyOn(HTMLCanvasElement.prototype, "toDataURL").mockImplementation(() => {
-      throw new DOMException("Tainted canvases may not be exported.", "SecurityError");
+describe("VideoThumbnail", () => {
+  it("renders a scheduler-provided sparse poster", async () => {
+    vi.mocked(decodeVideoThumbnail).mockResolvedValue({
+      value: { kind: "image", url: "blob:poster", aspect: 16 / 9 },
+      weight: 128,
     });
 
-    render("https://cdn.example.com/no-cors.mp4");
-
-    // The effect ran once visible → a hidden <video> was created.
-    const video = lastVideo();
-
-    act(() => {
-      video.dispatchEvent(new Event("loadedmetadata"));
-    });
-    act(() => {
-      video.dispatchEvent(new Event("seeked"));
-    });
+    await render();
 
-    // No frame captured, and crucially the shimmer is gone (not spinning
-    // forever) — the clip falls back to its plain background.
-    expect(host.querySelectorAll("img").length).toBe(0);
+    expect(decodeVideoThumbnail).toHaveBeenCalledWith(
+      expect.objectContaining({ frameCount: 1 }),
+      expect.any(AbortSignal),
+    );
+    expect(host.querySelector('img[src="blob:poster"]')).not.toBeNull();
     expect(host.querySelector(".animate-pulse")).toBeNull();
   });
 
-  it("drops the shimmer when a no-CORS load fires the video error event (0 frames) (#2214)", () => {
-    render("https://cdn.example.com/no-cors.mp4");
-    // Before the load resolves, the shimmer placeholder is up.
-    expect(host.querySelector(".animate-pulse")).not.toBeNull();
-
-    const video = lastVideo();
-    // crossOrigin="anonymous" against a CORS-less server fails the load outright —
-    // the error listener fires instead of loadedmetadata/seeked, so no frame is
-    // ever captured. The shimmer must stop rather than spin forever.
-    act(() => {
-      video.dispatchEvent(new Event("error"));
+  it("requests a rich filmstrip only for interaction actors", async () => {
+    vi.mocked(decodeVideoThumbnail).mockResolvedValue({
+      value: { kind: "filmstrip", urls: ["blob:a", "blob:b"], aspect: 16 / 9 },
+      weight: 256,
     });
 
-    expect(host.querySelectorAll("img").length).toBe(0);
-    expect(host.querySelector(".animate-pulse")).toBeNull();
-  });
+    await render(true);
 
-  it("keeps streaming frames while the shimmer is up until a frame arrives", () => {
-    vi.spyOn(HTMLCanvasElement.prototype, "toDataURL").mockReturnValue(
-      "data:image/jpeg;base64,AAAA",
+    expect(decodeVideoThumbnail).toHaveBeenCalledWith(
+      expect.objectContaining({ frameCount: 6 }),
+      expect.any(AbortSignal),
     );
+    expect(host.querySelectorAll("img").length).toBeGreaterThan(0);
+  });
 
-    render("/api/projects/p/preview/assets/clip.mp4");
-    // Before any seek resolves, the shimmer placeholder is shown.
-    expect(host.querySelector(".animate-pulse")).not.toBeNull();
+  it("clears the loading shimmer when the scheduled decode fails", async () => {
+    vi.mocked(decodeVideoThumbnail).mockRejectedValue(new Error("decode failed"));
 
-    const video = lastVideo();
-    act(() => {
-      video.dispatchEvent(new Event("loadedmetadata"));
-    });
-    act(() => {
-      video.dispatchEvent(new Event("seeked"));
-    });
+    await render();
+    await vi.waitFor(() => expect(thumbnailScheduler.getDiagnostics().active).toBe(0));
 
-    // A frame was captured, so tiles render and the shimmer clears.
-    expect(host.querySelectorAll("img").length).toBeGreaterThanOrEqual(1);
     expect(host.querySelector(".animate-pulse")).toBeNull();
+    expect(host.querySelector("img")).toBeNull();
   });
 });

package/src/player/components/VideoThumbnail.tsx

@@ -1,5 +1,8 @@
-import { memo, useRef, useState, useCallback, useEffect } 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 { decodeVideoThumbnail } from "../lib/thumbnailVideoDecoder";
 import { computeThumbnailStrip, THUMBNAIL_CLIP_HEIGHT } from "./thumbnailUtils";
 
 interface VideoThumbnailProps {
@@ -7,189 +10,105 @@ interface VideoThumbnailProps {
   label: string;
   labelColor: string;
   duration?: number;
+  sourceStart?: number;
+  sourceRangeDuration?: number;
+  projectId?: string;
+  sessionEpoch?: number;
+  priority?: ThumbnailPriority;
+  rich?: boolean;
 }
 
-const CLIP_HEIGHT = THUMBNAIL_CLIP_HEIGHT;
-const MAX_UNIQUE_FRAMES: number = 6;
-
-/**
- * Renders a film-strip of video frames extracted client-side via a hidden
- * <video> + <canvas>. Each frame is a fixed-width tile; frames repeat to
- * fill the clip width — matching ClipThumbnail's visual pattern.
- */
+/** Sparse, bounded video frames supplied by the shared thumbnail scheduler. */
 export const VideoThumbnail = memo(function VideoThumbnail({
   videoSrc,
   label,
   labelColor,
   duration = 5,
+  sourceStart,
+  sourceRangeDuration,
+  projectId = videoSrc,
+  sessionEpoch = 0,
+  priority = "visible",
+  rich = false,
 }: VideoThumbnailProps) {
   const [containerWidth, setContainerWidth] = useState(0);
-  const [visible, setVisible] = useState(false);
-  const [frames, setFrames] = useState<string[]>([]);
-  const [failed, setFailed] = useState(false);
-  const [aspect, setAspect] = useState(16 / 9);
-  const ioRef = useRef<IntersectionObserver | null>(null);
-  const roRef = useRef<ResizeObserver | null>(null);
-  const extractingRef = useRef(false);
-
-  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
-    ioRef.current?.disconnect();
-    roRef.current?.disconnect();
-    if (!el) return;
-
-    const measured = el.parentElement?.clientWidth || el.clientWidth;
-    setContainerWidth(measured);
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const request = useMemo(
+    () => ({
+      key: createThumbnailKey({
+        kind: "video",
+        source: videoSrc,
+        start: sourceStart,
+        duration: sourceRangeDuration ?? duration,
+        frames: rich ? 6 : 1,
+      }),
+      projectId,
+      sessionEpoch,
+      kind: "video" as const,
+      priority,
+      rich,
+      load: (signal: AbortSignal) =>
+        decodeVideoThumbnail(
+          {
+            source: videoSrc,
+            sourceStart,
+            sourceRangeDuration: sourceRangeDuration ?? duration,
+            frameCount: rich ? 6 : 1,
+            fit: "cover",
+          },
+          signal,
+        ),
+    }),
+    [duration, priority, projectId, rich, sessionEpoch, sourceRangeDuration, sourceStart, videoSrc],
+  );
+  const snapshot = useThumbnailLease(request);
+  const value = snapshot.status === "ready" ? snapshot.value : null;
+  const urls =
+    value?.kind === "filmstrip" ? value.urls : value?.kind === "image" ? [value.url] : [];
+  const aspect = value?.kind === "image" || value?.kind === "filmstrip" ? value.aspect : 16 / 9;
+  const { frameW, frameCount } = computeThumbnailStrip(
+    containerWidth,
+    aspect,
+    THUMBNAIL_CLIP_HEIGHT,
+  );
 
-    ioRef.current = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          ioRef.current?.disconnect();
-        }
-      },
-      { rootMargin: "200px" },
+  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),
     );
-    // fallow-ignore-next-line code-duplication
-    ioRef.current.observe(el);
-
-    const target = el.parentElement || el;
-    roRef.current = new ResizeObserver(([entry]) => {
-      setContainerWidth(entry.contentRect.width);
-    });
-    roRef.current.observe(target);
+    observerRef.current.observe(target);
   }, []);
 
-  useMountEffect(() => () => {
-    ioRef.current?.disconnect();
-    roRef.current?.disconnect();
-  });
-
-  // Extract frames progressively — each frame appears as soon as it's ready.
-  // Note: useEffect with deps is acceptable — syncs with external video element API,
-  // requires cleanup (cancel extraction, revoke URLs) when inputs change.
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (!visible || extractingRef.current) return;
-    extractingRef.current = true;
-
-    const video = document.createElement("video");
-    video.crossOrigin = "anonymous";
-    video.muted = true;
-    video.preload = "auto";
-
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) {
-      extractingRef.current = false;
-      return;
-    }
-
-    const timestamps: number[] = [];
-    const minSeek = Math.min(0.4, duration * 0.05);
-    for (let i = 0; i < MAX_UNIQUE_FRAMES; i++) {
-      const raw =
-        MAX_UNIQUE_FRAMES === 1 ? duration * 0.15 : (i / (MAX_UNIQUE_FRAMES - 1)) * duration;
-      timestamps.push(Math.max(raw, minSeek));
-    }
-
-    let idx = 0;
-    let cancelled = false;
-
-    const extractNext = () => {
-      if (cancelled || idx >= timestamps.length) {
-        if (!cancelled) {
-          video.src = "";
-          video.load();
-        }
-        return;
-      }
-      video.currentTime = timestamps[idx];
-    };
-
-    video.addEventListener("loadedmetadata", () => {
-      if (video.videoWidth > 0 && video.videoHeight > 0) {
-        setAspect(video.videoWidth / video.videoHeight);
-        const h = CLIP_HEIGHT * 2;
-        const w = Math.round(h * (video.videoWidth / video.videoHeight));
-        canvas.width = w;
-        canvas.height = h;
-      }
-      extractNext();
-    });
-
-    video.addEventListener("seeked", () => {
-      if (cancelled) return;
-      let dataUrl: string;
-      try {
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        dataUrl = canvas.toDataURL("image/jpeg", 0.6);
-      } catch {
-        // An external http(s) video served without CORS headers taints the
-        // canvas, so toDataURL throws a SecurityError. Stop the extractor
-        // cleanly and fall back to the no-thumbnail rendering (plain clip
-        // background), matching ImageThumbnail's error path — otherwise the
-        // shimmer placeholder would spin forever.
-        cancelled = true;
-        setFailed(true);
-        video.src = "";
-        video.load();
-        return;
-      }
-      // Stream each frame immediately
-      setFrames((prev) => [...prev, dataUrl]);
-      idx++;
-      extractNext();
-    });
-
-    video.addEventListener("error", () => {
-      // A no-CORS load fails outright (crossOrigin="anonymous" rejects a video
-      // served without CORS headers), firing this instead of the taint path in
-      // "seeked" — so 0 frames are ever extracted. Keep whatever frames we have,
-      // but mark failed so the shimmer placeholder stops spinning forever and we
-      // fall back to the plain clip background (#2214).
-      setFailed(true);
-    });
-
-    video.src = videoSrc;
-    video.load();
-
-    return () => {
-      cancelled = true;
-      extractingRef.current = false;
-      setFrames([]);
-      setFailed(false);
-      video.src = "";
-      video.load();
-    };
-  }, [visible, videoSrc, duration]);
-
-  const { frameW, frameCount } = computeThumbnailStrip(containerWidth, aspect, CLIP_HEIGHT);
+  useMountEffect(() => () => observerRef.current?.disconnect());
 
   return (
     <div ref={setContainerRef} className="absolute inset-0 overflow-hidden">
-      {visible && frames.length > 0 && (
+      {urls.length > 0 && (
         <div className="absolute inset-0 flex">
-          {Array.from({ length: frameCount }).map((_, i) => {
-            const src = frames[i % frames.length];
+          {Array.from({ length: frameCount }, (_, index) => {
+            const src = urls[index % urls.length];
             return (
               <div
-                key={i}
-                className="flex-shrink-0 h-full relative overflow-hidden bg-neutral-900"
+                key={index}
+                className="relative h-full flex-shrink-0 overflow-hidden bg-neutral-900"
                 style={{ width: frameW }}
               >
                 <img
                   src={src}
                   alt=""
                   draggable={false}
-                  className="absolute inset-0 w-full h-full object-cover"
+                  className="absolute inset-0 h-full w-full object-cover"
                 />
               </div>
             );
           })}
         </div>
       )}
-
-      {visible && frames.length === 0 && !failed && (
+      {snapshot.status === "loading" && urls.length === 0 && (
         <div
           className="absolute inset-0 animate-pulse"
           style={{
@@ -198,17 +117,16 @@ export const VideoThumbnail = memo(function VideoThumbnail({
           }}
         />
       )}
-
       {label && (
         <div
-          className="absolute bottom-0 left-0 right-0 z-10 px-1.5 pb-0.5 pt-3"
+          className="absolute inset-x-0 bottom-0 z-10 px-1.5 pb-0.5 pt-3"
           style={{
             background:
               "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
           }}
         >
           <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 2px rgba(0,0,0,0.9)" }}
           >
             {label}

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

@@ -41,9 +41,44 @@ describe("computeThumbnailStrip", () => {
   it("honors a custom clip height", () => {
     expect(computeThumbnailStrip(300, 2, 40).frameW).toBe(80);
   });
+
+  it("keeps narrow tiles above a caller-owned minimum", () => {
+    expect(computeThumbnailStrip(300, 0.25, 40, 48)).toEqual({
+      frameW: 48,
+      frameCount: 7,
+    });
+  });
 });
 
 describe("resolveMediaPreviewUrl", () => {
+  it("reroutes same-origin root media resolved by the preview iframe", () => {
+    expect(
+      resolveMediaPreviewUrl(
+        "http://localhost:5190/assets/clip.mp4",
+        "proj-1",
+        "http://localhost:5190",
+      ),
+    ).toBe("/api/projects/proj-1/preview/assets/clip.mp4");
+  });
+
+  it("preserves empty, canonical preview, and same-origin API sources", () => {
+    expect(resolveMediaPreviewUrl("", "proj-1", "http://localhost:5190")).toBe("");
+    expect(
+      resolveMediaPreviewUrl(
+        "http://localhost:5190/api/projects/proj-1/preview/assets/clip.mp4",
+        "proj-1",
+        "http://localhost:5190",
+      ),
+    ).toBe("http://localhost:5190/api/projects/proj-1/preview/assets/clip.mp4");
+    expect(
+      resolveMediaPreviewUrl(
+        "http://localhost:5190/api/media/clip.mp4",
+        "proj-1",
+        "http://localhost:5190",
+      ),
+    ).toBe("http://localhost:5190/api/media/clip.mp4");
+  });
+
   it("routes composition-relative paths through the project preview endpoint", () => {
     expect(resolveMediaPreviewUrl("assets/image.png", "proj-1")).toBe(
       "/api/projects/proj-1/preview/assets/image.png",

package/src/player/components/thumbnailUtils.ts

@@ -8,6 +8,52 @@ export interface ThumbnailStripLayout {
   frameCount: number;
 }
 
+/**
+ * Measure an image without mounting it in React's DOM. The scheduler owns the
+ * abort signal, so an unmounted clip cannot leave Blink retaining a pending
+ * image request and its former React tree.
+ */
+export function probeImageAspect(
+  imageSrc: string,
+  signal: AbortSignal,
+  tolerateSvgError = false,
+): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    const cleanup = () => {
+      image.onload = null;
+      image.onerror = null;
+      signal.removeEventListener("abort", onAbort);
+    };
+    const onAbort = () => {
+      cleanup();
+      image.src = "";
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+
+    if (signal.aborted) {
+      onAbort();
+      return;
+    }
+
+    image.onload = () => {
+      cleanup();
+      resolve(
+        image.naturalWidth > 0 && image.naturalHeight > 0
+          ? image.naturalWidth / image.naturalHeight
+          : 16 / 9,
+      );
+    };
+    image.onerror = () => {
+      cleanup();
+      if (tolerateSvgError && /\.svg($|\?)/i.test(imageSrc)) resolve(16 / 9);
+      else reject(new Error("Image thumbnail failed to load"));
+    };
+    signal.addEventListener("abort", onAbort, { once: true });
+    image.src = imageSrc;
+  });
+}
+
 /**
  * Compute the film-strip tile layout for a clip thumbnail: fixed-height tiles
  * sized by the media's aspect ratio, repeated to fill the clip width.
@@ -17,9 +63,10 @@ export function computeThumbnailStrip(
   containerWidth: number,
   aspect: number,
   clipHeight: number = THUMBNAIL_CLIP_HEIGHT,
+  minFrameWidth = 1,
 ): ThumbnailStripLayout {
   const safeAspect = Number.isFinite(aspect) && aspect > 0 ? aspect : 16 / 9;
-  const frameW = Math.max(1, Math.round(clipHeight * safeAspect));
+  const frameW = Math.max(minFrameWidth, Math.round(clipHeight * safeAspect));
   const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
   return { frameW, frameCount };
 }
@@ -43,12 +90,43 @@ export function encodePreviewPath(relativePath: string): string {
  * (parent) document. Composition-relative paths (e.g. "assets/image.png") are
  * routed through the project preview endpoint with each segment encoded.
  *
- * Already-loadable URLs pass through untouched: absolute http(s) URLs, plus
- * `data:` and `blob:` URLs. Routing a `data:`/`blob:` URL through the preview
- * endpoint would percent-encode the whole thing into a multi-KB path segment
- * that the server rejects with HTTP 431 (Request Header Fields Too Large).
+ * External http(s), `data:`, and `blob:` URLs pass through untouched. A
+ * same-origin absolute URL outside the project preview endpoint is the browser's
+ * resolved form of a root-relative authored path, so route it back through the
+ * active project instead of accidentally fetching the Studio shell.
  */
-export function resolveMediaPreviewUrl(src: string, projectId: string): string {
-  if (/^(?:https?:|data:|blob:)/i.test(src)) return src;
-  return `/api/projects/${projectId}/preview/${encodePreviewPath(src)}`;
+export function resolveMediaPreviewUrl(
+  src: string,
+  projectId: string,
+  studioOrigin?: string,
+): string {
+  if (!src) return src;
+  if (/^(?:data:|blob:)/i.test(src)) return src;
+
+  let relativePath = src;
+  let suffix = "";
+  if (/^https?:/i.test(src)) {
+    let parsed: URL;
+    try {
+      parsed = new URL(src);
+    } catch {
+      return src;
+    }
+    if (!studioOrigin || parsed.origin !== studioOrigin) return src;
+    const previewPath = new URL(`/api/projects/${projectId}/preview/`, studioOrigin).pathname;
+    if (parsed.pathname.startsWith(previewPath)) return src;
+    if (parsed.pathname.startsWith("/api/")) return src;
+    try {
+      relativePath = parsed.pathname
+        .replace(/^\/+/, "")
+        .split("/")
+        .map(decodeURIComponent)
+        .join("/");
+    } catch {
+      return src;
+    }
+    suffix = `${parsed.search}${parsed.hash}`;
+  }
+
+  return `/api/projects/${projectId}/preview/${encodePreviewPath(relativePath.replace(/^\/+/, ""))}${suffix}`;
 }

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { resolveClipRenderContext } from "./timelineClipChildren";
+import type { TimelineElement } from "../store/playerStore";
+
+const clip: TimelineElement = {
+  id: "clip",
+  tag: "video",
+  start: 10,
+  duration: 5,
+  track: 0,
+};
+
+describe("resolveClipRenderContext", () => {
+  it("prioritizes interactive clips and enables rich thumbnails", () => {
+    expect(resolveClipRenderContext(clip, { start: 0, end: 1 }, true)).toEqual({
+      priority: "interaction",
+      rich: true,
+    });
+  });
+
+  it("distinguishes visible clips from overscan clips", () => {
+    expect(resolveClipRenderContext(clip, { start: 14, end: 16 }, false)).toEqual({
+      priority: "visible",
+      rich: false,
+    });
+    expect(resolveClipRenderContext(clip, { start: 15, end: 20 }, false)).toEqual({
+      priority: "overscan",
+      rich: false,
+    });
+  });
+});