@hyperframes/studio 0.8.72 → 0.8.74

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

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { act, createRef } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import { useTimelinePlayhead } from "./useTimelinePlayhead";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+function scrollBox(scrollLeft: number) {
+  const el = document.createElement("div");
+  let left = scrollLeft;
+  Object.defineProperties(el, {
+    clientWidth: { value: 800 },
+    scrollWidth: { value: 20_000 },
+    scrollLeft: { get: () => left, set: (v: number) => (left = v) },
+  });
+  return el;
+}
+
+function Harness({ pps, scroll }: { pps: number; scroll: HTMLDivElement }) {
+  useTimelinePlayhead({
+    playheadRef: createRef(),
+    scrollRef: { current: scroll },
+    ppsRef: { current: pps },
+    durationRef: { current: 60 },
+    isDragging: { current: false },
+    currentTime: 0,
+    zoomMode: "manual",
+    manualZoomPercent: 100,
+    zoomModeRef: { current: "manual" },
+    manualZoomPercentRef: { current: 100 },
+    fitPps: pps,
+    fitPpsRef: { current: pps },
+    effectiveDuration: 60,
+    pps,
+    timelineReady: true,
+    elementsLength: 1,
+    setZoomMode: () => {},
+    setManualZoomPercent: () => {},
+    contentOrigin: 32,
+  });
+  return null;
+}
+
+function zoom(scrollLeft: number, fromPps: number, toPps: number) {
+  const scroll = scrollBox(scrollLeft);
+  const host = document.createElement("div");
+  const root = createRoot(host);
+  act(() => root.render(<Harness pps={fromPps} scroll={scroll} />));
+  act(() => root.render(<Harness pps={toPps} scroll={scroll} />));
+  act(() => root.unmount());
+  return scroll.scrollLeft;
+}
+
+describe("useTimelinePlayhead centre anchor", () => {
+  it("keeps a view at the start at the start when the scale changes", () => {
+    expect(zoom(0, 100, 114)).toBe(0);
+  });
+
+  it("keeps the time at the viewport centre when the view is scrolled", () => {
+    // Centre time (400 + 400 - 32) / 100 = 7.68s lands at 32 + 7.68 * 200 - 400.
+    expect(zoom(400, 100, 200)).toBe(1168);
+  });
+});

package/src/player/components/useTimelinePlayhead.ts

@@ -75,7 +75,8 @@ export function useTimelinePlayhead({
     // it true and the next toolbar zoom would wrongly skip center-anchoring.
     const skip = skipCenterAnchorRef.current;
     skipCenterAnchorRef.current = false;
-    if (!scroll || pps === prevPps || skip) return;
+    // A view at the start stays there: a resize or a host zoom must not hide 00:00.
+    if (!scroll || pps === prevPps || skip || scroll.scrollLeft < 1) return;
     const nextScrollLeft = getTimelineScrollLeftForZoomAnchor({
       pointerX: scroll.clientWidth / 2,
       currentScrollLeft: scroll.scrollLeft,

package/src/player/components/useTimelineScrollViewport.ts

@@ -3,6 +3,9 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { shouldShowTimelineShortcutHint } from "./timelineLayout";
 import { STUDIO_TIMELINE_ROW_VIRTUALIZATION_ENABLED } from "./timelineRowVirtualizationFlag";
 
+/** How long the timeline waits after the last scroll event before treating the scroll as settled. */
+export const TIMELINE_SCROLL_SETTLE_MS = 100;
+
 export interface TimelineScrollViewportSnapshot {
   readonly scrollLeft: number;
   readonly scrollTop: number;
@@ -91,7 +94,7 @@ export function useTimelineScrollViewport(
       scrollingRef.current = false;
       if (viewportRafRef.current) cancelAnimationFrame(viewportRafRef.current);
       publish();
-    }, 100);
+    }, TIMELINE_SCROLL_SETTLE_MS);
   }, []);
 
   const syncShortcutHintVisibility = useCallback(() => {

package/src/player/hooks/useShadowPreviewReload.ts

@@ -15,10 +15,12 @@ import {
 import type { PlaybackAdapter } from "../lib/playbackTypes";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 
-// The single wait budget for a shadow: the player's 8s asset cap plus its 0.42s loader fade
+// One wait budget for a shadow: the player's 8s asset cap plus its 0.42s loader fade
 // leaves about 6.5s for the document load and runtime boot. Nothing shorter may fail the swap.
 // It only runs while the tab is visible: readiness is frame-driven, and a hidden tab renders none.
 export const SHADOW_READY_TIMEOUT_MS = 15_000;
+// A busy machine can need more than one budget; the shadow keeps loading for this many before it is dropped.
+export const SHADOW_READY_BUDGETS = 3;
 
 function isDocumentHidden(): boolean {
   return typeof document !== "undefined" && document.visibilityState === "hidden";
@@ -61,6 +63,7 @@ export function useShadowPreviewReload({
   const onReloadFailedRef = useRef(onReloadFailed);
   onReloadFailedRef.current = onReloadFailed;
   const readyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const budgetsSpentRef = useRef(0);
   // The shadow still owed a wait budget, so a hidden tab can resume it when it becomes visible.
   const budgetGenRef = useRef<number | null>(null);
   const cancelPendingLoadRef = useRef<() => void>(() => {});
@@ -160,10 +163,16 @@ export function useShadowPreviewReload({
     (gen: number) => {
       clearTimeout(readyTimerRef.current);
       if (isDocumentHidden()) return;
-      readyTimerRef.current = setTimeout(
-        () => failShadow(gen, "it took too long to load"),
-        SHADOW_READY_TIMEOUT_MS,
-      );
+      readyTimerRef.current = setTimeout(() => {
+        if (gen !== shadowGenRef.current) return;
+        budgetsSpentRef.current += 1;
+        if (budgetsSpentRef.current < SHADOW_READY_BUDGETS) {
+          logReload("shadow-slow", { budgetsSpent: budgetsSpentRef.current });
+          armReadyTimerRef.current(gen);
+          return;
+        }
+        failShadow(gen, "it took too long to load");
+      }, SHADOW_READY_TIMEOUT_MS);
     },
     [failShadow],
   );
@@ -176,6 +185,7 @@ export function useShadowPreviewReload({
       const gen = shadowGenRef.current;
       stopPendingShadow();
       budgetGenRef.current = gen;
+      budgetsSpentRef.current = 0;
       armReadyTimer(gen);
       setPreviewSlots((prev) => planShadowReload(prev, gen, url));
       // Thumbnails of the edit wait for the new preview instead of competing with it.

package/src/player/hooks/useTimelinePlayer.shadowReload.test.ts

@@ -4,7 +4,7 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { SHADOW_READY_TIMEOUT_MS } from "./useShadowPreviewReload";
+import { SHADOW_READY_BUDGETS, SHADOW_READY_TIMEOUT_MS } from "./useShadowPreviewReload";
 import { usePlayerStore } from "../store/playerStore";
 import { NLEProvider, useNLEContext, type NLEContextValue } from "../../components/nle/NLEContext";
 import {
@@ -16,6 +16,8 @@ import {
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
+const FULL_WAIT_MS = SHADOW_READY_TIMEOUT_MS * SHADOW_READY_BUDGETS;
+
 vi.mock("../../utils/gsapSoftReload", async (importOriginal) => ({
   ...(await importOriginal<typeof import("../../utils/gsapSoftReload")>()),
   ensureMotionPathPluginLoaded: vi.fn(),
@@ -258,7 +260,7 @@ describe("shadow reload readiness and failure", () => {
     const { getApi, live, root } = beginReload({ onPreviewReloadFailed });
     expect(getApi().previewSlots).toHaveLength(2);
 
-    act(() => void vi.advanceTimersByTime(SHADOW_READY_TIMEOUT_MS));
+    act(() => void vi.advanceTimersByTime(FULL_WAIT_MS));
 
     expect(getApi().previewSlots).toEqual([{ gen: 0, role: "live" }]);
     expect(getApi().iframeRef.current).toBe(live);
@@ -268,7 +270,7 @@ describe("shadow reload readiness and failure", () => {
     unmount(root);
   });
 
-  it("keeps a slow shadow pending past 5s and fails it only at the single budget", () => {
+  it("keeps a slow shadow pending past 5s and fails it only once all budgets are spent", () => {
     vi.useFakeTimers();
     vi.spyOn(console, "error").mockImplementation(() => {});
     const onPreviewReloadFailed = vi.fn();
@@ -283,12 +285,47 @@ describe("shadow reload readiness and failure", () => {
     expect(getApi().previewSlots).toHaveLength(2);
     expect(onPreviewReloadFailed).not.toHaveBeenCalled();
 
-    act(() => void vi.advanceTimersByTime(SHADOW_READY_TIMEOUT_MS));
+    act(() => void vi.advanceTimersByTime(FULL_WAIT_MS - 5001 - 1));
+    expect(onPreviewReloadFailed).not.toHaveBeenCalled();
+    act(() => void vi.advanceTimersByTime(1));
     expect(getApi().previewSlots).toEqual([{ gen: 0, role: "live" }]);
     expect(onPreviewReloadFailed).toHaveBeenCalledWith(expect.stringContaining("too long"));
     unmount(root);
   });
 
+  // A busy machine: the edit's shadow paints after one budget; dropping it left the stage on the pre-edit file.
+  it("promotes a shadow that paints after its first budget instead of dropping the edit", () => {
+    vi.useFakeTimers();
+    const onPreviewReloadFailed = vi.fn();
+    const { getApi, gen, root } = beginReload({ onPreviewReloadFailed });
+    const shadow = makeShadowWithSpies();
+    act(() => {
+      getApi().setShadowIframeNode(shadow.iframe);
+      getApi().onShadowIframeLoad(gen);
+    });
+
+    act(() => void vi.advanceTimersByTime(SHADOW_READY_TIMEOUT_MS + 2000));
+    expect(onPreviewReloadFailed).not.toHaveBeenCalled();
+    act(() => getApi().onShadowReadyChange(gen, true));
+    expect(getApi().iframeRef.current).toBe(shadow.iframe);
+    unmount(root);
+  });
+
+  it("gives a reload that replaces a slow one its own full set of budgets", () => {
+    vi.useFakeTimers();
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const onPreviewReloadFailed = vi.fn();
+    const { getApi, root } = beginReload({ onPreviewReloadFailed });
+    act(() => void vi.advanceTimersByTime(SHADOW_READY_TIMEOUT_MS + 1000));
+
+    act(() => getApi().refreshPlayer());
+    act(() => void vi.advanceTimersByTime(FULL_WAIT_MS - 1));
+    expect(onPreviewReloadFailed).not.toHaveBeenCalled();
+    act(() => void vi.advanceTimersByTime(1));
+    expect(onPreviewReloadFailed).toHaveBeenCalledWith(expect.stringContaining("too long"));
+    unmount(root);
+  });
+
   it("does not spend the budget while the tab is hidden, and promotes once it is visible", () => {
     vi.useFakeTimers();
     const onPreviewReloadFailed = vi.fn();
@@ -325,7 +362,7 @@ describe("shadow reload readiness and failure", () => {
     expect(onPreviewReloadFailed).not.toHaveBeenCalled();
 
     act(() => setVisibility("visible"));
-    act(() => void vi.advanceTimersByTime(SHADOW_READY_TIMEOUT_MS - 1));
+    act(() => void vi.advanceTimersByTime(FULL_WAIT_MS - 1));
     expect(onPreviewReloadFailed).not.toHaveBeenCalled();
     act(() => void vi.advanceTimersByTime(1));
     expect(onPreviewReloadFailed).toHaveBeenCalledWith(expect.stringContaining("too long"));
@@ -431,7 +468,7 @@ describe("shadow reload store ownership and readiness", () => {
     const { getApi, rerender, root } = setup({ onPreviewReloadFailed: first });
     expect(getApi().previewSlots).toHaveLength(2);
     rerender({ onPreviewReloadFailed: latest });
-    act(() => void vi.advanceTimersByTime(SHADOW_READY_TIMEOUT_MS));
+    act(() => void vi.advanceTimersByTime(FULL_WAIT_MS));
     expect(latest).toHaveBeenCalled();
     expect(first).not.toHaveBeenCalled();
     unmount(root);

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

@@ -7,6 +7,7 @@ import {
   mergeTimelineElementsPreservingDowngrades,
 } from "./timelineDOM";
 import { isTimelineIgnoredElement } from "./timelineElementHelpers";
+import { computeResizePreview } from "../components/timelineClipDragPreview";
 import { invalidateGroupInfoCache } from "./timelineGroupInfo";
 import type { TimelineElement } from "../store/playerStore";
 
@@ -392,3 +393,88 @@ describe("audio FX attributes on parsed elements", () => {
     expect(bgm?.automation).toBeUndefined();
   });
 });
+
+// A composition clip trimmed by 30 px collapsed to its first nested video's 1.77 s: that length capped the trim.
+describe("a composition clip's source length", () => {
+  const scene = `
+    <div data-composition-id="root">
+      <div id="host" data-composition-id="scene" data-composition-src="scene.html"
+        data-start="0" data-duration="18" data-track-index="1">
+        <div data-composition-id="scene">
+          <video id="bg" src="bg.mp4" data-source-duration="1.77" data-start="2" data-duration="1.75"></video>
+        </div>
+      </div>
+      <div id="wrapper" class="clip" data-start="0" data-duration="3" data-track-index="2">
+        <video src="talk.mp4" data-source-duration="4"></video>
+      </div>
+    </div>
+  `;
+
+  it("is not taken from media inside the composition, parsed from the DOM", () => {
+    const parsed = parseTimelineFromDOM(makeDoc(scene), 18);
+    const host = parsed.find((entry) => entry.domId === "host");
+    expect(host?.sourceDuration).toBeUndefined();
+    expect(host?.tag).not.toBe("video");
+    expect(parsed.find((entry) => entry.domId === "wrapper")?.sourceDuration).toBe(4);
+  });
+
+  it("does not cap trimming the composition's end at that media's length", () => {
+    const host = parseTimelineFromDOM(makeDoc(scene), 18).find((entry) => entry.domId === "host");
+    const trimmed = computeResizePreview(
+      {
+        element: host!,
+        edge: "end",
+        originClientX: 360,
+        previewStart: 0,
+        previewDuration: 18,
+        started: true,
+      },
+      330,
+      { scroll: null, pps: 20, buildSnapTargets: () => [] },
+    );
+    expect(trimmed.previewDuration).toBeCloseTo(16.5, 3);
+  });
+
+  it("is not taken from media inside the composition, from the runtime manifest", () => {
+    const doc = makeDoc(scene);
+    const element = createTimelineElementFromManifestClip({
+      clip: {
+        id: "host",
+        label: "Scene",
+        kind: "composition",
+        tagName: "div",
+        start: 0,
+        duration: 18,
+        track: 1,
+        compositionId: "scene",
+        parentCompositionId: "root",
+        compositionSrc: "scene.html",
+        playbackStart: null,
+        playbackRate: null,
+        assetUrl: null,
+      },
+      fallbackIndex: 0,
+      doc,
+      hostEl: doc.getElementById("host"),
+    });
+    expect(element.sourceDuration).toBeUndefined();
+    expect(element.src).toBeUndefined();
+  });
+
+  it("still shows an inline composition's image as its thumbnail", () => {
+    const parsed = parseTimelineFromDOM(
+      makeDoc(`
+        <div data-composition-id="root">
+          <div id="card" data-composition-id="card" data-start="0" data-duration="5" data-track-index="1">
+            <img src="card.png" />
+          </div>
+        </div>
+      `),
+      5,
+    );
+    const card = parsed.find((entry) => entry.domId === "card");
+    expect(card?.tag).toBe("img");
+    expect(card?.src).toBe("card.png");
+    expect(card?.sourceDuration).toBeUndefined();
+  });
+});

package/src/player/lib/timelineDOM.ts

@@ -346,11 +346,11 @@ export function parseTimelineFromDOM(
     if (compSrc) {
       entry.compositionSrc = compSrc;
     } else if (compId && compId !== rootComp?.getAttribute("data-composition-id")) {
-      // Inline composition — expose inner video for thumbnails
-      const innerVideo = el.querySelector("video[src]");
-      if (innerVideo) {
-        entry.src = innerVideo.getAttribute("src") || undefined;
-        entry.tag = "video";
+      // Inline composition — expose inner video or image for thumbnails
+      const innerMedia = el.querySelector("video[src], img[src]");
+      if (innerMedia) {
+        entry.src = innerMedia.getAttribute("src") || undefined;
+        entry.tag = innerMedia.tagName === "IMG" ? "img" : "video";
       }
     }
     if (entry.kind === "composition") {

package/src/player/lib/timelineElementHelpers.ts

@@ -146,11 +146,21 @@ function isHtmlElement(el: Element): el is HTMLElement {
   return typeof HtmlElementCtor !== "undefined" && el instanceof HtmlElementCtor;
 }
 
+function isCompositionHost(el: Element): boolean {
+  return (
+    el.hasAttribute("data-composition-id") ||
+    el.hasAttribute("data-composition-src") ||
+    el.hasAttribute("data-composition-file")
+  );
+}
+
 export function resolveMediaElement(el: Element): HTMLMediaElement | HTMLImageElement | null {
   const win = el.ownerDocument.defaultView ?? window;
   const MediaElementCtor = win.HTMLMediaElement ?? globalThis.HTMLMediaElement;
   const ImageElementCtor = win.HTMLImageElement ?? globalThis.HTMLImageElement;
   if (el instanceof MediaElementCtor || el instanceof ImageElementCtor) return el;
+  // A composition's media belongs to its own timeline, not the clip's: its length would cap a trim.
+  if (isCompositionHost(el)) return null;
   const candidate = el.querySelector("video, audio, img");
   return candidate instanceof MediaElementCtor || candidate instanceof ImageElementCtor
     ? candidate