@hyperframes/studio 0.8.139 → 0.8.141

package/src/player/lib/thumbnailVideoDecoder.ts

@@ -1,14 +1,21 @@
 import { TIMELINE_VIEWPORT_BUDGETS, type TimelineViewportBudgets } from "./timelineViewportBudgets";
-import type { ThumbnailLoadedResult, ThumbnailValue } from "./thumbnailScheduler";
+import {
+  createThumbnailKey,
+  type ThumbnailLoadedResult,
+  type ThumbnailValue,
+} from "./thumbnailScheduler";
 
 export interface VideoThumbnailDecodeRequest {
   source: string;
+  contentVersion?: string;
   sourceStart?: number;
   sourceRangeDuration?: number;
   frameCount: number;
   fit?: "contain" | "cover";
 }
 
+const LAST_FRAME_INSET_S = 0.001;
+
 export function videoThumbnailTimestamps(
   start: number,
   duration: number,
@@ -18,10 +25,63 @@ export function videoThumbnailTimestamps(
   const safeDuration = Math.max(0, Number.isFinite(duration) ? duration : 0);
   const count = Math.max(1, Number.isFinite(frameCount) ? Math.floor(frameCount) : 1);
   if (count === 1) return [safeStart + safeDuration / 2];
-  return Array.from(
+  const edges = Array.from(
     { length: count },
-    (_, index) => safeStart + (safeDuration * index) / (count - 1),
+    (_, index) => safeStart + (safeDuration * index) / count,
   );
+  return [...edges, safeStart + Math.max(0, safeDuration - LAST_FRAME_INSET_S)];
+}
+
+interface SharedFrame {
+  url: string;
+  decodedAt: number;
+  users: number;
+}
+
+interface HeldFrame {
+  key: string;
+  frame: SharedFrame;
+}
+
+interface FrameWindow {
+  sourceStart: number;
+  lead: number;
+  end: number;
+}
+
+const sharedFrames = new Map<string, SharedFrame[]>();
+const sourceInfos = new Map<string, { version: string | undefined; info: SourceInfo }>();
+
+const accepts = (window: FrameWindow, time: number, decodedAt: number) =>
+  decodedAt >= window.sourceStart && time - decodedAt <= (time >= window.end ? 0 : window.lead);
+
+function takeSharedFrame(key: string, time: number, window: FrameWindow): SharedFrame | undefined {
+  const frame = sharedFrames.get(key)?.find((shared) => accepts(window, time, shared.decodedAt));
+  if (frame) frame.users += 1;
+  return frame;
+}
+
+function shareFrame(key: string, decodedAt: number, url: string): SharedFrame {
+  const frames = sharedFrames.get(key) ?? [];
+  const existing = frames.find((shared) => shared.decodedAt === decodedAt);
+  if (existing) {
+    existing.users += 1;
+    URL.revokeObjectURL(url);
+    return existing;
+  }
+  const frame = { url, decodedAt, users: 1 };
+  sharedFrames.set(key, [...frames, frame]);
+  return frame;
+}
+
+function releaseSharedFrames(held: HeldFrame[]): void {
+  for (const { key, frame } of held.splice(0)) {
+    if (--frame.users > 0) continue;
+    const rest = sharedFrames.get(key)?.filter((shared) => shared !== frame) ?? [];
+    if (rest.length > 0) sharedFrames.set(key, rest);
+    else sharedFrames.delete(key);
+    URL.revokeObjectURL(frame.url);
+  }
 }
 
 async function canvasToBlob(canvas: HTMLCanvasElement | OffscreenCanvas): Promise<Blob> {
@@ -38,7 +98,8 @@ async function canvasToBlob(canvas: HTMLCanvasElement | OffscreenCanvas): Promis
 }
 
 interface DecodedResources {
-  urls: string[];
+  urls: (string | undefined)[];
+  held: HeldFrame[];
   canvases: Set<HTMLCanvasElement | OffscreenCanvas>;
 }
 
@@ -48,12 +109,18 @@ interface ThumbnailCanvasSink {
   ): AsyncIterable<{ canvas: HTMLCanvasElement | OffscreenCanvas } | null>;
 }
 
+interface SourceInfo {
+  aspect: number;
+  metadataDuration: number | null;
+}
+
 function throwIfAborted(signal: AbortSignal): void {
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");
 }
 
 function releaseDecodedResources(resources: DecodedResources): void {
-  for (const url of resources.urls.splice(0)) URL.revokeObjectURL(url);
+  resources.urls.length = 0;
+  releaseSharedFrames(resources.held);
   for (const canvas of resources.canvases) {
     canvas.width = 0;
     canvas.height = 0;
@@ -75,19 +142,71 @@ function targetDimensions(
   };
 }
 
+function stripTimes(
+  request: VideoThumbnailDecodeRequest,
+  info: SourceInfo,
+  budgets: Readonly<TimelineViewportBudgets>,
+) {
+  const requestedStart = Math.max(0, request.sourceStart ?? 0);
+  const sourceDuration = Math.max(
+    0,
+    info.metadataDuration ?? requestedStart + (request.sourceRangeDuration ?? 0),
+  );
+  const sourceStart = Math.min(requestedStart, sourceDuration);
+  const requestedDuration =
+    request.sourceRangeDuration ?? Math.max(0, sourceDuration - sourceStart);
+  const duration = Math.min(
+    Math.max(0, requestedDuration),
+    Math.max(0, sourceDuration - sourceStart),
+  );
+  const timestamps = videoThumbnailTimestamps(
+    sourceStart,
+    duration,
+    Math.min(request.frameCount, budgets.richPreviewFrameCount),
+  );
+  const slices = Math.max(1, timestamps.length - 1);
+  const window: FrameWindow = {
+    sourceStart,
+    lead: duration / Math.max(2, slices) / 2,
+    end: timestamps.length > 1 ? timestamps.at(-1)! : Infinity,
+  };
+  return { window, timestamps };
+}
+
+function takeDecodedFrames(
+  { timestamps, window }: ReturnType<typeof stripTimes>,
+  keyOf: (time: number) => string,
+  resources: DecodedResources,
+): number[] {
+  const missing: number[] = [];
+  timestamps.forEach((time, slot) => {
+    const key = keyOf(time);
+    const frame = takeSharedFrame(key, time, window);
+    if (!frame) return void missing.push(slot);
+    resources.urls[slot] = frame.url;
+    resources.held.push({ key, frame });
+  });
+  return missing;
+}
+
 async function decodeFrames(
   sink: ThumbnailCanvasSink,
-  timestamps: AsyncIterable<number>,
+  times: AsyncIterable<number>,
+  slots: { slot: number; key: string; decodedAt?: number }[],
   signal: AbortSignal,
   resources: DecodedResources,
 ): Promise<void> {
-  for await (const wrapped of sink.canvasesAtTimestamps(timestamps)) {
+  let next = 0;
+  for await (const wrapped of sink.canvasesAtTimestamps(times)) {
     throwIfAborted(signal);
-    if (!wrapped) continue;
+    const target = slots[next++];
+    if (!wrapped || target?.decodedAt === undefined) continue;
     resources.canvases.add(wrapped.canvas);
     const blob = await canvasToBlob(wrapped.canvas);
     throwIfAborted(signal);
-    resources.urls.push(URL.createObjectURL(blob));
+    const frame = shareFrame(target.key, target.decodedAt, URL.createObjectURL(blob));
+    resources.urls[target.slot] = frame.url;
+    resources.held.push({ key: target.key, frame });
   }
   throwIfAborted(signal);
 }
@@ -95,18 +214,25 @@ async function decodeFrames(
 function loadedResult(
   resources: DecodedResources,
   aspect: number,
-  width: number,
-  height: number,
+  budgets: Readonly<TimelineViewportBudgets>,
+  frameCount = resources.urls.length,
 ): ThumbnailLoadedResult {
-  const firstUrl = resources.urls[0];
+  const decoded = resources.urls.filter((url): url is string => url !== undefined);
+  const firstUrl = decoded[0];
   if (!firstUrl) throw new Error("Video source returned no thumbnail frames");
+  let nearest = firstUrl;
+  const urls = Array.from(
+    { length: frameCount },
+    (_, slot) => (nearest = resources.urls[slot] ?? nearest),
+  );
+  const { width, height } = targetDimensions(aspect, budgets);
   const value: ThumbnailValue =
-    resources.urls.length === 1
+    urls.length === 1
       ? { kind: "image", url: firstUrl, aspect }
-      : { kind: "filmstrip", urls: [...resources.urls], aspect };
+      : { kind: "filmstrip", urls, aspect };
   return {
     value,
-    weight: width * height * 4 * resources.urls.length,
+    weight: width * height * 4 * decoded.length,
     dispose: () => releaseDecodedResources(resources),
   };
 }
@@ -116,6 +242,34 @@ export async function decodeVideoThumbnail(
   request: VideoThumbnailDecodeRequest,
   signal: AbortSignal,
   budgets: Readonly<TimelineViewportBudgets> = TIMELINE_VIEWPORT_BUDGETS,
+): Promise<ThumbnailLoadedResult> {
+  const fit = request.fit ?? "cover";
+  const sourceKey = createThumbnailKey({ source: request.source, version: request.contentVersion });
+  const keyOf = (time: number) => `${sourceKey}\u0000${fit}\u0000${time}`;
+  const resources: DecodedResources = { urls: [], held: [], canvases: new Set() };
+  const entry = sourceInfos.get(request.source);
+  const known = entry?.version === request.contentVersion ? entry?.info : undefined;
+  try {
+    if (known) {
+      if (takeDecodedFrames(stripTimes(request, known, budgets), keyOf, resources).length === 0) {
+        throwIfAborted(signal);
+        return loadedResult(resources, known.aspect, budgets);
+      }
+      releaseDecodedResources(resources);
+    }
+    return await decodeMissingFrames(request, signal, budgets, keyOf, resources);
+  } catch (error) {
+    releaseDecodedResources(resources);
+    throw error;
+  }
+}
+
+async function decodeMissingFrames(
+  request: VideoThumbnailDecodeRequest,
+  signal: AbortSignal,
+  budgets: Readonly<TimelineViewportBudgets>,
+  keyOf: (time: number) => string,
+  resources: DecodedResources,
 ): Promise<ThumbnailLoadedResult> {
   const mediabunny = await import("mediabunny");
   throwIfAborted(signal);
@@ -124,7 +278,6 @@ export async function decodeVideoThumbnail(
     source: new mediabunny.UrlSource(request.source),
     formats: mediabunny.ALL_FORMATS,
   });
-  const resources: DecodedResources = { urls: [], canvases: new Set() };
   try {
     const track = await input.getPrimaryVideoTrack();
     throwIfAborted(signal);
@@ -139,46 +292,36 @@ export async function decodeVideoThumbnail(
     }
     const metadataDuration = await track.getDurationFromMetadata({ skipLiveWait: true });
     throwIfAborted(signal);
-    const requestedStart = Math.max(0, request.sourceStart ?? 0);
-    const sourceDuration = Math.max(
-      0,
-      metadataDuration ?? requestedStart + (request.sourceRangeDuration ?? 0),
-    );
-    const sourceStart = Math.min(requestedStart, sourceDuration);
-    const requestedDuration =
-      request.sourceRangeDuration ?? Math.max(0, sourceDuration - sourceStart);
-    const duration = Math.min(
-      Math.max(0, requestedDuration),
-      Math.max(0, sourceDuration - sourceStart),
-    );
-    const timestamps = videoThumbnailTimestamps(
-      sourceStart,
-      duration,
-      Math.min(request.frameCount, budgets.richPreviewFrameCount),
-    );
-    const keys = new mediabunny.EncodedPacketSink(track);
-    const maxKeyframeLead = duration / Math.max(2, timestamps.length - 1) / 2;
-    async function* decodeTimesAtNearbyKeyframes() {
-      for (const time of timestamps) {
-        const key = await keys.getKeyPacket(time, { metadataOnly: true });
-        if (signal.aborted) return;
-        const near = key && key.timestamp >= sourceStart && time - key.timestamp <= maxKeyframeLead;
-        yield near ? key.timestamp : time;
+    const info: SourceInfo = { aspect: displayWidth / displayHeight, metadataDuration };
+    sourceInfos.set(request.source, { version: request.contentVersion, info });
+    const strip = stripTimes(request, info, budgets);
+    const { timestamps, window } = strip;
+    const slots: { slot: number; key: string; decodedAt?: number }[] = takeDecodedFrames(
+      strip,
+      keyOf,
+      resources,
+    ).map((slot) => ({ slot, key: keyOf(timestamps[slot]!) }));
+    if (slots.length > 0) {
+      const keys = new mediabunny.EncodedPacketSink(track);
+      async function* decodeTimesAtNearbyKeyframes() {
+        for (const target of slots) {
+          const time = timestamps[target.slot]!;
+          const key = await keys.getKeyPacket(time, { metadataOnly: true });
+          if (signal.aborted) return;
+          target.decodedAt = key && accepts(window, time, key.timestamp) ? key.timestamp : time;
+          yield target.decodedAt;
+        }
       }
+      const target = targetDimensions(info.aspect, budgets);
+      const sink = new mediabunny.CanvasSink(track, {
+        width: target.width,
+        height: target.height,
+        fit: request.fit ?? "cover",
+        poolSize: 1,
+      });
+      await decodeFrames(sink, decodeTimesAtNearbyKeyframes(), slots, signal, resources);
     }
-    const aspect = displayWidth / displayHeight;
-    const target = targetDimensions(aspect, budgets);
-    const sink = new mediabunny.CanvasSink(track, {
-      width: target.width,
-      height: target.height,
-      fit: request.fit ?? "cover",
-      poolSize: 1,
-    });
-    await decodeFrames(sink, decodeTimesAtNearbyKeyframes(), signal, resources);
-    return loadedResult(resources, aspect, target.width, target.height);
-  } catch (error) {
-    releaseDecodedResources(resources);
-    throw error;
+    return loadedResult(resources, info.aspect, budgets, timestamps.length);
   } finally {
     input.dispose();
   }

package/src/player/lib/timelineViewportBudgets.test.ts

@@ -9,7 +9,7 @@ describe("timeline viewport budgets", () => {
     expect(TIMELINE_VIEWPORT_BUDGETS).toMatchObject({
       directScrollSafetyPx: 8_000_000,
       rowOverscanPerSide: 2,
-      timeOverscanViewportRatio: 0.25,
+      timeOverscanViewportRatio: 0.5,
       maxMountedRows: 64,
       maxMountedClipRoots: 512,
       maxMountedClipRootsPerRow: 128,

package/src/player/lib/timelineViewportBudgets.ts

@@ -61,7 +61,7 @@ export const MAX_VISIBLE_THUMBNAIL_FRAMES = Math.ceil(3840 / (66 * (16 / 9))); /
 export const TIMELINE_VIEWPORT_BUDGETS: Readonly<TimelineViewportBudgets> = Object.freeze({
   directScrollSafetyPx: 8_000_000,
   rowOverscanPerSide: 2,
-  timeOverscanViewportRatio: 0.25,
+  timeOverscanViewportRatio: 0.5,
   maxMountedRows: 64,
   maxMountedClipRoots: 512,
   maxMountedClipRootsPerRow: 128,

package/src/utils/gsapUndoRestore.browser.test.ts

@@ -1,16 +1,14 @@
 // Real Chrome: the box GSAP and a stylesheet translate produce together is what no DOM emulation computes.
 import { mkdtempSync, readFileSync } from "node:fs";
-import { createRequire } from "node:module";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
-import puppeteer, { type Browser } from "puppeteer-core";
+import type { Browser } from "puppeteer-core";
 import { build, type Plugin } from "esbuild";
 import { afterAll, beforeAll, expect, it, vi } from "vitest";
-import { findSystemChrome } from "../../vite.browser";
+import { launchTestChrome, showWithRuntime } from "../../tests/chromeTestUtils";
 import { writeFixture } from "../../tests/e2e/edit-accuracy/grid.mjs";
 
-const require = createRequire(import.meta.url);
 const CROP = "inset(0px 40px 0px 0px)";
 // Real Chrome on a loaded Windows runner exceeds Vitest's 5s test and 10s hook defaults.
 vi.setConfig({ testTimeout: 60_000, hookTimeout: 60_000 });
@@ -44,9 +42,7 @@ async function bundle(file: string, name: string): Promise<string> {
 }
 
 beforeAll(async () => {
-  const executablePath = findSystemChrome();
-  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
-  browser = await puppeteer.launch({ executablePath, headless: true, args: ["--no-sandbox"] });
+  browser = await launchTestChrome();
   undoBundle = await bundle("./gsapUndoRestore.ts", "hfUndo");
   softReloadBundle = await bundle("./gsapSoftReload.ts", "hfSoftReload");
 });
@@ -62,16 +58,7 @@ async function openCase(spec: Spec, moduleBundle: string) {
   const restored = readFileSync(join(dir, "index.html"), "utf8");
   const page = await browser.newPage();
   await page.setViewport({ width: 1920, height: 1080 });
-  await page.setRequestInterception(true);
-  // Only the fixture's GSAP CDN script is served; anything else is refused, never fetched.
-  page.on("request", (request) =>
-    request.url().endsWith("/gsap.min.js")
-      ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
-      : request.abort("blockedbyclient"),
-  );
-  await page.setContent(restored, { waitUntil: "load" });
-  await page.evaluate(readFileSync(require.resolve("@hyperframes/core/runtime"), "utf8"));
-  await page.waitForFunction(() => "__player" in window);
+  await showWithRuntime(page, restored);
   await page.evaluate(moduleBundle);
   await page.evaluate(
     (time) => (window as unknown as { __player: { seek(t: number): void } }).__player.seek(time),