feat(studio): export useThumbnailStill so a host's own pictures go through the thumbnail scheduler

Author: miguel-heygen

packages/studio/src/hooks/useThumbnailStill.test.ts

@@ -0,0 +1,89 @@
+// @vitest-environment happy-dom
+
+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 "../player/lib/thumbnailScheduler";
+import { useThumbnailStill } from "./useThumbnailStill";
+
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { configurable: true, value: true });
+
+class MockImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  naturalWidth = 320;
+  naturalHeight = 180;
+  set src(_value: string) {
+    queueMicrotask(() => this.onload?.());
+  }
+}
+
+const URL_ONE = "http://localhost:3000/api/projects/demo/thumbnail/index.html?t=1.00&revision=1";
+const originalImage = globalThis.Image;
+const originalFetch = globalThis.fetch;
+const originalCreate = URL.createObjectURL;
+const originalRevoke = URL.revokeObjectURL;
+let host: HTMLDivElement;
+let root: Root | null = null;
+let shown: string | null = null;
+
+function Still({ url }: { url: string | null }) {
+  shown = useThumbnailStill(url, "demo");
+  return null;
+}
+
+const mount = (url: string | null) =>
+  act(async () => {
+    root ??= createRoot(host);
+    root.render(React.createElement(Still, { url }));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+beforeEach(() => {
+  globalThis.Image = MockImage as unknown as typeof Image;
+  globalThis.fetch = vi.fn(async () => new Response(new Blob(["still"]), { status: 200 }));
+  URL.createObjectURL = vi.fn(() => "blob:still");
+  URL.revokeObjectURL = vi.fn();
+  shown = null;
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  thumbnailScheduler.setPreviewReloading(false);
+  thumbnailScheduler.invalidateProject("demo");
+  globalThis.Image = originalImage;
+  globalThis.fetch = originalFetch;
+  URL.createObjectURL = originalCreate;
+  URL.revokeObjectURL = originalRevoke;
+  document.body.replaceChildren();
+});
+
+describe("useThumbnailStill", () => {
+  it("hands back the still's object URL once the scheduler has loaded it", async () => {
+    await mount(URL_ONE);
+    expect(globalThis.fetch).toHaveBeenCalledWith(URL_ONE, expect.anything());
+    expect(shown).toBe("blob:still");
+  });
+
+  it("asks for nothing without a url", async () => {
+    await mount(null);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+    expect(shown).toBeNull();
+  });
+
+  it("holds the fetch while a preview reloads, and runs it once the reload is over", async () => {
+    thumbnailScheduler.setPreviewReloading(true);
+    await mount(URL_ONE);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+    expect(shown).toBeNull();
+    thumbnailScheduler.setPreviewReloading(false);
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    expect(shown).toBe("blob:still");
+  });
+});

packages/studio/src/hooks/useThumbnailStill.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { compositionThumbnailRequest } from "../player/components/CompositionThumbnail";
+import type { ThumbnailPriority } from "../player/lib/thumbnailScheduler";
+import { useThumbnailLease } from "./useThumbnailLease";
+
+export interface UseThumbnailStillOptions {
+  sessionEpoch?: number;
+  priority?: ThumbnailPriority;
+}
+
+/** A host picture's server still through the thumbnail scheduler, so it yields to a preview reload. Null until ready. */
+export function useThumbnailStill(
+  url: string | null,
+  projectId: string,
+  { sessionEpoch = 0, priority = "visible" }: UseThumbnailStillOptions = {},
+): string | null {
+  const request = useMemo(
+    () => (url ? compositionThumbnailRequest(url, projectId, { sessionEpoch, priority }) : null),
+    [priority, projectId, sessionEpoch, url],
+  );
+  const snapshot = useThumbnailLease(request);
+  return snapshot.status === "ready" && snapshot.value.kind === "image" ? snapshot.value.url : null;
+}

packages/studio/src/index.ts

@@ -76,6 +76,8 @@ export type { AudioWaveformProps } from "./player/components/AudioWaveform";
 export { ImageThumbnail } from "./player/components/ImageThumbnail";
 export type { ImageThumbnailProps } from "./player/components/ImageThumbnail";
 export { useRenderClipContent } from "./hooks/useRenderClipContent";
+export { useThumbnailStill } from "./hooks/useThumbnailStill";
+export type { UseThumbnailStillOptions } from "./hooks/useThumbnailStill";
 export type { UseRenderClipContentOptions } from "./hooks/useRenderClipContent";
 export type { ThumbnailPriority } from "./player/lib/thumbnailScheduler";
 export type {