@hyperframes/studio 0.7.55 → 0.7.57

package/src/hooks/useTimelineGroupEditing.ts

@@ -6,21 +6,25 @@ import {
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
   extendRootDurationIfNeeded,
-  finishTimelineTimingFallback,
-  foldGsapMutationIntoHistory,
   formatTimelineAttributeNumber,
   patchIframeDomTiming,
   persistTimelineBatchEdit,
-  readFileContent,
-  scaleGsapPositions,
-  shiftGsapPositions,
   type PersistTimelineBatchChange,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
+import {
+  captureDurationRollback,
+  finishGroupTimingGsapFallback,
+  readFileContent,
+  scaleGsapPositions,
+  shiftGsapPositions,
+  syncPreviewContentDuration,
+} from "./timelineTimingSync";
 
 export interface TimelineGroupMoveChange {
   element: TimelineElement;
   start: number;
+  track?: number;
 }
 
 export interface TimelineGroupResizeChange {
@@ -74,6 +78,15 @@ function resizeCoalesceKey(changes: readonly TimelineGroupResizeChange[]): strin
   return `timeline-group-resize:${changes.map((change) => change.element.hfId ?? change.element.id).join(",")}`;
 }
 
+function toSdkTimingChanges<T extends { element: TimelineElement }>(
+  changes: readonly T[],
+  timingUpdate: (change: T) => { start: number; duration?: number },
+): Array<{ hfId: string; timingUpdate: { start: number; duration?: number } } | null> {
+  return changes.map((change) =>
+    change.element.hfId ? { hfId: change.element.hfId, timingUpdate: timingUpdate(change) } : null,
+  );
+}
+
 function resizeHasPlaybackStartAdjustment(change: TimelineGroupResizeChange): boolean {
   return (
     change.playbackStart != null ||
@@ -148,45 +161,90 @@ export function useTimelineGroupEditing({
     ],
   );
 
+  // Shared SDK fast path for group move/resize: eligible when nothing needs the
+  // server (no root-duration growth, one shared file, every change SDK-addressable
+  // and `eligible` per the caller's own gate). Returns whether the SDK handled it;
+  // false → caller falls through to the server batch persist.
+  const trySdkBatchPersist = useCallback(
+    async (input: {
+      changes: readonly { element: TimelineElement }[];
+      sdkChanges: Array<{
+        hfId: string;
+        timingUpdate: { start: number; duration?: number };
+      } | null>;
+      eligible: boolean;
+      needsExtension: boolean;
+      label: string;
+      coalesceKey: string;
+    }): Promise<boolean> => {
+      const sharedPath = allChangesSharePath(input.changes, activeCompPath);
+      const canUseSdk =
+        !input.needsExtension &&
+        sharedPath !== null &&
+        input.eligible &&
+        input.sdkChanges.every((change) => change !== null);
+      if (!canUseSdk) return false;
+      return sdkTimingBatchPersist(
+        input.sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
+        sharedPath,
+        sdkSession,
+        {
+          editHistory: { recordEdit },
+          writeProjectFile,
+          reloadPreview,
+          domEditSaveTimestampRef,
+          compositionPath: activeCompPath,
+          readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
+        },
+        { label: input.label, coalesceKey: input.coalesceKey },
+      );
+    },
+    [
+      activeCompPath,
+      domEditSaveTimestampRef,
+      projectIdRef,
+      recordEdit,
+      reloadPreview,
+      sdkSession,
+      writeProjectFile,
+    ],
+  );
+
   const handleTimelineGroupMove = useCallback(
     (changes: TimelineGroupMoveChange[], options?: TimelineGroupCommitOptions) => {
       if (changes.length === 0) return Promise.resolve();
       for (const change of changes) {
-        patchIframeDomTiming(previewIframeRef.current, change.element, [
+        const attrs: Array<[string, string]> = [
           ["data-start", formatTimelineAttributeNumber(change.start)],
-        ]);
+        ];
+        if (change.track != null) {
+          attrs.push(["data-track-index", formatTimelineAttributeNumber(change.track)]);
+        }
+        patchIframeDomTiming(previewIframeRef.current, change.element, attrs);
       }
 
       const maxEnd = Math.max(...changes.map((change) => change.start + change.element.duration));
+      // Snapshot the duration BEFORE the optimistic updates below so a failed
+      // persist can roll the readout + live root back (see captureDurationRollback).
+      const rollbackDuration = captureDurationRollback(previewIframeRef.current);
+      // needsExtension gates the SDK path (setTiming can't grow the root duration),
+      // so read the store BEFORE the readout sync below optimistically updates it.
       const needsExtension = extendRootDurationIfNeeded(maxEnd);
+      // Optimistic duration readout: content-driven (grow AND shrink), read from
+      // the just-patched live DOM. See syncPreviewContentDuration.
+      syncPreviewContentDuration(previewIframeRef.current);
       const coalesceKey = options?.coalesceKey ?? moveCoalesceKey(changes);
       return enqueueGroupOperation("Move timeline clips", async (projectId) => {
         await options?.beforeTiming;
-        const sharedPath = allChangesSharePath(changes, activeCompPath);
-        const sdkChanges = changes.map((change) =>
-          change.element.hfId
-            ? { hfId: change.element.hfId, timingUpdate: { start: change.start } }
-            : null,
-        );
-        const canUseSdk =
-          !needsExtension && sharedPath !== null && sdkChanges.every((change) => change !== null);
-        if (canUseSdk) {
-          const handled = await sdkTimingBatchPersist(
-            sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
-            sharedPath,
-            sdkSession,
-            {
-              editHistory: { recordEdit },
-              writeProjectFile,
-              reloadPreview,
-              domEditSaveTimestampRef,
-              compositionPath: activeCompPath,
-              readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
-            },
-            { label: "Move timeline clips", coalesceKey },
-          );
-          if (handled) return;
-        }
+        const handledBySdk = await trySdkBatchPersist({
+          changes,
+          sdkChanges: toSdkTimingChanges(changes, (change) => ({ start: change.start })),
+          eligible: changes.every((change) => change.track == null),
+          needsExtension,
+          label: "Move timeline clips",
+          coalesceKey,
+        });
+        if (handledBySdk) return;
 
         await persistServerBatch(
           projectId,
@@ -194,54 +252,49 @@ export function useTimelineGroupEditing({
           changes.map((change) => ({
             element: change.element,
             buildPatches: (original, target) =>
-              buildTimelineMoveTimingPatch(original, target, change.start, change.element.duration),
+              buildTimelineMoveTimingPatch(
+                original,
+                target,
+                change.start,
+                change.element.duration,
+                change.track,
+              ),
           })),
           coalesceKey,
         );
-        await finishTimelineTimingFallback({
+        await finishGroupTimingGsapFallback({
+          projectId,
           iframe: previewIframeRef.current,
-          needsExtension,
-          rootDurationSeconds: maxEnd,
           reloadPreview,
-          gsapMutation: () =>
-            foldGsapMutationIntoHistory({
-              projectId,
-              paths: changes.map((change) => targetPathFor(change.element, activeCompPath)),
-              label: "Move timeline clips",
-              coalesceKey,
-              recordEdit,
-              gsapMutation: async () => {
-                let mutated = false;
-                for (const change of changes) {
-                  const delta = change.start - change.element.start;
-                  const domId = change.element.domId;
-                  if (delta === 0 || !domId) continue;
-                  const status = await shiftGsapPositions(
-                    projectId,
-                    targetPathFor(change.element, activeCompPath),
-                    domId,
-                    delta,
-                  );
-                  mutated = mutated || status.mutated;
-                }
-                return { mutated };
-              },
-            }),
-          onGsapError: (err) => console.error("[Timeline] Failed to shift GSAP positions", err),
+          label: "Move timeline clips",
+          errorLabel: "Failed to shift GSAP positions",
+          coalesceKey,
+          recordEdit,
+          activeCompPath,
+          changes,
+          resolveChangePath: (element) => targetPathFor(element, activeCompPath),
+          mutateChange: (change, changePath) => {
+            const delta = change.start - change.element.start;
+            const domId = change.element.domId;
+            if (delta === 0 || !domId) return null;
+            return shiftGsapPositions(projectId, changePath, domId, delta);
+          },
         });
+      }).catch((error) => {
+        // Failed persist: revert the optimistic duration readout + live root
+        // alongside the gesture owner's store rollback.
+        rollbackDuration();
+        throw error;
       });
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       enqueueGroupOperation,
       persistServerBatch,
       previewIframeRef,
-      projectIdRef,
       recordEdit,
       reloadPreview,
-      sdkSession,
-      writeProjectFile,
+      trySdkBatchPersist,
     ],
   );
 
@@ -264,41 +317,30 @@ export function useTimelineGroupEditing({
       }
 
       const maxEnd = Math.max(...changes.map((change) => change.start + change.duration));
+      // Snapshot the duration BEFORE the optimistic updates below so a failed
+      // persist can roll the readout + live root back (see captureDurationRollback).
+      const rollbackDuration = captureDurationRollback(previewIframeRef.current);
+      // needsExtension gates the SDK path (setTiming can't grow the root duration),
+      // so read the store BEFORE the readout sync below optimistically updates it.
       const needsExtension = extendRootDurationIfNeeded(maxEnd);
+      // Optimistic duration readout: content-driven (grow AND shrink), read from
+      // the just-patched live DOM. See syncPreviewContentDuration.
+      syncPreviewContentDuration(previewIframeRef.current);
       const coalesceKey = options?.coalesceKey ?? resizeCoalesceKey(changes);
       return enqueueGroupOperation("Resize timeline clips", async (projectId) => {
         await options?.beforeTiming;
-        const sharedPath = allChangesSharePath(changes, activeCompPath);
-        const sdkChanges = changes.map((change) =>
-          change.element.hfId
-            ? {
-                hfId: change.element.hfId,
-                timingUpdate: { start: change.start, duration: change.duration },
-              }
-            : null,
-        );
-        const canUseSdk =
-          !needsExtension &&
-          sharedPath !== null &&
-          changes.every((change) => !resizeHasPlaybackStartAdjustment(change)) &&
-          sdkChanges.every((change) => change !== null);
-        if (canUseSdk) {
-          const handled = await sdkTimingBatchPersist(
-            sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
-            sharedPath,
-            sdkSession,
-            {
-              editHistory: { recordEdit },
-              writeProjectFile,
-              reloadPreview,
-              domEditSaveTimestampRef,
-              compositionPath: activeCompPath,
-              readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
-            },
-            { label: "Resize timeline clips", coalesceKey },
-          );
-          if (handled) return;
-        }
+        const handledBySdk = await trySdkBatchPersist({
+          changes,
+          sdkChanges: toSdkTimingChanges(changes, (change) => ({
+            start: change.start,
+            duration: change.duration,
+          })),
+          eligible: changes.every((change) => !resizeHasPlaybackStartAdjustment(change)),
+          needsExtension,
+          label: "Resize timeline clips",
+          coalesceKey,
+        });
+        if (handledBySdk) return;
 
         await persistServerBatch(
           projectId,
@@ -314,55 +356,48 @@ export function useTimelineGroupEditing({
           })),
           coalesceKey,
         );
-        await finishTimelineTimingFallback({
+        await finishGroupTimingGsapFallback({
+          projectId,
           iframe: previewIframeRef.current,
-          needsExtension,
-          rootDurationSeconds: maxEnd,
           reloadPreview,
-          gsapMutation: () =>
-            foldGsapMutationIntoHistory({
+          label: "Resize timeline clips",
+          errorLabel: "Failed to scale GSAP positions",
+          coalesceKey,
+          recordEdit,
+          activeCompPath,
+          changes,
+          resolveChangePath: (element) => targetPathFor(element, activeCompPath),
+          mutateChange: (change, changePath) => {
+            const domId = change.element.domId;
+            const timingChanged =
+              change.start !== change.element.start || change.duration !== change.element.duration;
+            if (!timingChanged || !domId) return null;
+            return scaleGsapPositions(
               projectId,
-              paths: changes.map((change) => targetPathFor(change.element, activeCompPath)),
-              label: "Resize timeline clips",
-              coalesceKey,
-              recordEdit,
-              gsapMutation: async () => {
-                let mutated = false;
-                for (const change of changes) {
-                  const domId = change.element.domId;
-                  const timingChanged =
-                    change.start !== change.element.start ||
-                    change.duration !== change.element.duration;
-                  if (!timingChanged || !domId) continue;
-                  const status = await scaleGsapPositions(
-                    projectId,
-                    targetPathFor(change.element, activeCompPath),
-                    domId,
-                    change.element.start,
-                    change.element.duration,
-                    change.start,
-                    change.duration,
-                  );
-                  mutated = mutated || status.mutated;
-                }
-                return { mutated };
-              },
-            }),
-          onGsapError: (err) => console.error("[Timeline] Failed to scale GSAP positions", err),
+              changePath,
+              domId,
+              change.element.start,
+              change.element.duration,
+              change.start,
+              change.duration,
+            );
+          },
         });
+      }).catch((error) => {
+        // Failed persist: revert the optimistic duration readout + live root
+        // alongside the gesture owner's store rollback.
+        rollbackDuration();
+        throw error;
       });
     },
     [
       activeCompPath,
-      domEditSaveTimestampRef,
       enqueueGroupOperation,
       persistServerBatch,
       previewIframeRef,
-      projectIdRef,
       recordEdit,
       reloadPreview,
-      sdkSession,
-      writeProjectFile,
+      trySdkBatchPersist,
     ],
   );
 

package/src/index.ts

@@ -1,5 +1,5 @@
 // NLE Layout
-export { NLELayout } from "./components/nle/NLELayout";
+export { EditorShell } from "./components/EditorShell";
 export { NLEPreview } from "./components/nle/NLEPreview";
 export { CompositionBreadcrumb } from "./components/nle/CompositionBreadcrumb";
 export type { CompositionLevel } from "./components/nle/CompositionBreadcrumb";

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

@@ -0,0 +1,173 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { ImageThumbnail } from "./ImageThumbnail";
+
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+  configurable: true,
+  value: true,
+});
+
+// --- Observer stubs: fire "intersecting" immediately on observe ---
+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() {}
+}
+
+// --- Image stub: captures instances so tests fire load/error deterministically ---
+class MockImage {
+  static instances: MockImage[] = [];
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  naturalWidth = 0;
+  naturalHeight = 0;
+  src = "";
+  constructor() {
+    MockImage.instances.push(this);
+  }
+}
+
+const originalIO = globalThis.IntersectionObserver;
+const originalRO = globalThis.ResizeObserver;
+const originalImage = globalThis.Image;
+
+let host: HTMLDivElement;
+let root: Root | null = null;
+
+beforeEach(() => {
+  globalThis.IntersectionObserver =
+    MockIntersectionObserver as unknown as typeof IntersectionObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  globalThis.Image = MockImage as unknown as typeof Image;
+  MockImage.instances = [];
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  globalThis.IntersectionObserver = originalIO;
+  globalThis.ResizeObserver = originalRO;
+  globalThis.Image = originalImage;
+  document.body.innerHTML = "";
+});
+
+function render(props: { imageSrc: string; label?: string; labelColor?: string }) {
+  root = createRoot(host);
+  act(() => {
+    root!.render(
+      <ImageThumbnail
+        imageSrc={props.imageSrc}
+        label={props.label ?? ""}
+        labelColor={props.labelColor ?? "#fff"}
+      />,
+    );
+  });
+}
+
+function lastProbe(): MockImage {
+  const probe = MockImage.instances.at(-1);
+  expect(probe).toBeDefined();
+  return probe!;
+}
+
+/** Assert at least one tile rendered and the first tile serves `expectedSrc`. */
+function expectFirstTileSrc(expectedSrc: string): void {
+  const imgs = [...host.querySelectorAll("img")];
+  expect(imgs.length).toBeGreaterThanOrEqual(1);
+  expect(imgs[0].getAttribute("src")).toBe(expectedSrc);
+}
+
+describe("ImageThumbnail", () => {
+  it("shows the loading shimmer before the image resolves", () => {
+    render({ imageSrc: "/api/projects/p/preview/assets/pic.png" });
+    expect(host.querySelector(".animate-pulse")).not.toBeNull();
+    expect(host.querySelectorAll("img").length).toBe(0);
+  });
+
+  it("probes the resolved src and renders repeated object-cover tiles on load", () => {
+    render({ imageSrc: "/api/projects/p/preview/assets/pic.png" });
+    const probe = lastProbe();
+    expect(probe.src).toBe("/api/projects/p/preview/assets/pic.png");
+
+    act(() => {
+      probe.naturalWidth = 1920;
+      probe.naturalHeight = 1080;
+      probe.onload?.();
+    });
+
+    const imgs = [...host.querySelectorAll("img")];
+    expect(imgs.length).toBeGreaterThanOrEqual(1);
+    for (const img of imgs) {
+      expect(img.getAttribute("src")).toBe("/api/projects/p/preview/assets/pic.png");
+      expect(img.className).toContain("object-cover");
+    }
+    expect(host.querySelector(".animate-pulse")).toBeNull();
+  });
+
+  it("drops the shimmer and renders no tiles when a raster image fails to load", () => {
+    render({ imageSrc: "/api/projects/p/preview/assets/missing.png" });
+    act(() => lastProbe().onerror?.());
+    expect(host.querySelectorAll("img").length).toBe(0);
+    expect(host.querySelector(".animate-pulse")).toBeNull();
+  });
+
+  it("renders tiles at 16:9 when an SVG has no intrinsic dimensions (naturalWidth=0)", () => {
+    render({ imageSrc: "/api/projects/p/preview/assets/logo.svg" });
+    const probe = lastProbe();
+
+    act(() => {
+      // naturalWidth stays 0 — SVG with no width/height attribute
+      probe.onload?.();
+    });
+
+    expectFirstTileSrc("/api/projects/p/preview/assets/logo.svg");
+    expect(host.querySelector(".animate-pulse")).toBeNull();
+  });
+
+  it("renders SVG tiles at 16:9 fallback even when the probe fires onerror", () => {
+    // Some browser/sandbox environments fire onerror for SVGs even though the
+    // <img> element itself can render the file — we must not blank the strip.
+    render({ imageSrc: "/api/projects/p/preview/assets/icon.svg" });
+
+    act(() => lastProbe().onerror?.());
+
+    expectFirstTileSrc("/api/projects/p/preview/assets/icon.svg");
+    expect(host.querySelector(".animate-pulse")).toBeNull();
+  });
+
+  it("renders the label above the strip when provided", () => {
+    render({ imageSrc: "/x.png", label: "hero", labelColor: "#abc" });
+    act(() => {
+      const probe = lastProbe();
+      probe.naturalWidth = 100;
+      probe.naturalHeight = 100;
+      probe.onload?.();
+    });
+    const label = [...host.querySelectorAll("span")].find((s) => s.textContent === "hero");
+    expect(label).toBeDefined();
+    expect(label!.closest(".z-10")).not.toBeNull();
+  });
+});