@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/hooks/useTimelineAssetDropOps.test.tsx

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { useTimelineAssetDropOps } from "./useTimelineAssetDropOps";
 import { mountReactHarness } from "./domSelectionTestHarness";
 import { usePlayerStore } from "../player/store/playerStore";
+import type { TimelineElement } from "../player";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -19,6 +20,7 @@ type DropFn = ReturnType<typeof useTimelineAssetDropOps>["handleTimelineAssetDro
 function renderDropHook(
   sourceContent: string,
   writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
+  timelineElements: TimelineElement[] = [],
 ) {
   vi.stubGlobal(
     "fetch",
@@ -29,7 +31,7 @@ function renderDropHook(
     const { handleTimelineAssetDrop } = useTimelineAssetDropOps({
       projectIdRef: { current: "project" },
       activeCompPath: "index.html",
-      timelineElements: [],
+      timelineElements,
       showToast: vi.fn(),
       writeProjectFile,
       recordEdit: vi.fn().mockResolvedValue(undefined),
@@ -84,4 +86,42 @@ describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
 
     expect(usePlayerStore.getState().selectedElementId).toBe("index.html#clip");
   });
+
+  it("measures the insert row against the visible rows, not clips the timeline hides", async () => {
+    const clip = (id: string, track: number): TimelineElement => ({
+      id,
+      key: id,
+      tag: "div",
+      start: 0,
+      duration: 2,
+      track,
+      authoredTrack: track,
+      hfId: `hf-${id}`,
+      domId: id,
+    });
+    const source = [
+      '<main data-composition-id="scene" data-duration="10" data-width="1920" data-height="1080">',
+      ...["a:0", "hidden:1", "b:2"].map((t) => {
+        const [id, track] = t.split(":");
+        return `<div data-hf-id="hf-${id}" id="${id}" data-start="0" data-track-index="${track}"></div>`;
+      }),
+      "</main>",
+    ].join("\n");
+    usePlayerStore.getState().setTopLevelIds(new Set(["a", "b"]));
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const getDrop = renderDropHook(source, writeProjectFile, [
+      clip("a", 0),
+      clip("hidden", 1),
+      clip("b", 2),
+    ]);
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 1, track: 1, insertRow: 1, trackOrder: [0, 2] }, 2);
+    });
+
+    const [, written] = writeProjectFile.mock.calls[0] as [string, string];
+    expect(written).toContain('id="b" data-start="0" data-track-index="2"');
+    expect(written).toContain('id="hidden" data-start="0" data-track-index="1"');
+    expect(written).toMatch(/<video id="clip"[^>]*data-track-index="1"/);
+  });
 });

package/src/hooks/useTimelineAssetDropOps.ts

@@ -4,6 +4,8 @@
 // 600-line cap.
 import { useCallback, type MutableRefObject, type RefObject } from "react";
 import type { TimelineElement } from "../player";
+import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
+import { resolveDropTrack } from "../utils/timelineDropTrackInsert";
 import {
   buildTimelineAssetId,
   buildTimelineAssetInsertHtml,
@@ -23,6 +25,18 @@ import { commitTimelineCompositionInsertion } from "../utils/timelineComposition
 import { extendRootDurationInSource } from "../utils/rootDuration";
 import { deriveTimelineStoreKeyForDomId } from "../player/lib/timelineElementHelpers";
 import { selectAndRevealTimelineElement } from "../player/components/timelineDropReveal";
+import { selectTimelineRowElements } from "../player/hooks/useTimelineRowElements";
+import { usePlayerStore } from "../player/store/playerStore";
+
+/** The first uploaded file opens the new track (if asked); the rest land on the lane it landed on. */
+function fileDropPlacement(
+  index: number,
+  next: { start: number; track: number },
+  dropped: TimelineDropPlacement | undefined,
+  landedTrack: number | undefined,
+): TimelineDropPlacement {
+  return index === 0 ? { ...dropped, ...next } : { ...next, track: landedTrack ?? next.track };
+}
 
 interface UseTimelineAssetDropOpsOptions {
   projectIdRef: MutableRefObject<string | null>;
@@ -52,16 +66,16 @@ export function useTimelineAssetDropOps({
   observeProjectFileVersion,
 }: UseTimelineAssetDropOpsOptions) {
   // fallow-ignore-next-line complexity
-  const handleTimelineAssetDrop = useCallback(
+  const dropAssetAt = useCallback(
     // fallow-ignore-next-line complexity
     async (
       assetPath: string,
-      placement: Pick<TimelineElement, "start" | "track">,
+      placement: TimelineDropPlacement,
       durationOverride?: number,
-    ) => {
+    ): Promise<number | undefined> => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
-        return;
+        return undefined;
       }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
@@ -69,7 +83,7 @@ export function useTimelineAssetDropOps({
       const kind = getTimelineAssetKind(assetPath);
       if (!kind) {
         showToast("Only image, video, and audio assets can be dropped onto the timeline.");
-        return;
+        return undefined;
       }
 
       const targetPath = activeCompPath || "index.html";
@@ -91,9 +105,24 @@ export function useTimelineAssetDropOps({
         );
         const newElementZIndex = Math.max(1, relevantElements.length + 1);
 
+        const { source: sourceWithRoom, track } = resolveDropTrack({
+          source: originalContent,
+          // insertRow counts the rows the timeline shows, so plan against those.
+          elements: selectTimelineRowElements(
+            relevantElements,
+            usePlayerStore.getState().topLevelIds,
+          ),
+          placement,
+          dropped: {
+            id: newId,
+            tag: kind === "image" ? "img" : kind,
+            start: normalizedStart,
+            duration: normalizedDuration,
+          },
+        });
         const patchedContent = extendRootDurationInSource(
           insertTimelineAssetIntoSource(
-            originalContent,
+            sourceWithRoom,
             buildTimelineAssetInsertHtml({
               id: newId,
               hfId: `hf-${generateId()}`,
@@ -101,7 +130,7 @@ export function useTimelineAssetDropOps({
               kind,
               start: normalizedStart,
               duration: normalizedDuration,
-              track: placement.track,
+              track,
               zIndex: newElementZIndex,
               geometry: fitTimelineAssetGeometry(
                 null,
@@ -125,10 +154,12 @@ export function useTimelineAssetDropOps({
         selectAndRevealTimelineElement(deriveTimelineStoreKeyForDomId(newId, targetPath));
         forceReloadSdkSession?.();
         reloadPreview();
+        return track;
       } catch (error) {
         const message =
           error instanceof Error ? error.message : "Failed to drop asset onto timeline";
         showToast(message);
+        return undefined;
       }
     },
     [
@@ -144,10 +175,17 @@ export function useTimelineAssetDropOps({
     ],
   );
 
+  const handleTimelineAssetDrop = useCallback(
+    async (assetPath: string, placement: TimelineDropPlacement, durationOverride?: number) => {
+      await dropAssetAt(assetPath, placement, durationOverride);
+    },
+    [dropAssetAt],
+  );
+
   // fallow-ignore-next-line complexity
   const handleTimelineFileDrop = useCallback(
     // fallow-ignore-next-line complexity
-    async (files: File[], placement?: Pick<TimelineElement, "start" | "track">) => {
+    async (files: File[], placement?: TimelineDropPlacement) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
@@ -166,15 +204,18 @@ export function useTimelineAssetDropOps({
         placement ?? { start: 0, track: 0 },
         durations,
       );
+      let landedTrack: number | undefined;
       for (const [index, assetPath] of uploaded.entries()) {
-        await handleTimelineAssetDrop(
+        const next = placements[index] ?? placements[0];
+        const track = await dropAssetAt(
           assetPath,
-          placements[index] ?? placements[0],
+          fileDropPlacement(index, next, placement, landedTrack),
           durations[index],
         );
+        if (index === 0) landedTrack = track;
       }
     },
-    [handleTimelineAssetDrop, projectIdRef, uploadProjectFiles, isRecordingRef, showToast],
+    [dropAssetAt, projectIdRef, uploadProjectFiles, isRecordingRef, showToast],
   );
 
   const handleTimelineCompositionDrop = useCallback(

package/src/hooks/useTimelineDeleteOps.test.tsx

@@ -5,6 +5,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../player";
 import { applyRippleShifts, useTimelineDeleteOps } from "./useTimelineDeleteOps";
 import { installReactActEnvironment, mountReactHarness } from "./domSelectionTestHarness";
+import { useTrackPendingTimelineEdit } from "./useTrackPendingTimelineEdit";
+import { flushStudioPendingEdits } from "../utils/studioPendingEdits";
 
 installReactActEnvironment();
 
@@ -117,3 +119,112 @@ describe("useTimelineDeleteOps: ripple undo label", () => {
     );
   });
 });
+
+// Regression: a delete's write can reach disk before its history entry is
+// recorded, so an Undo fired in that window found nothing to restore.
+// Fails without useTrackPendingTimelineEdit's wrap (see that file).
+describe("useTimelineDeleteOps: undo race", () => {
+  // data-composition-id (readRootCompositionDuration's key) plus a
+  // remove-element mock that actually drops hf-c: needed for a real diff.
+  const html = `<!DOCTYPE html><html data-composition-variables='[]'><body>
+<div data-hf-id="hf-stage" data-composition-id="main" data-duration="6">
+<div data-hf-id="hf-a" data-start="0" data-duration="2"></div>
+<div data-hf-id="hf-b" data-start="2" data-duration="2"></div>
+<div data-hf-id="hf-c" data-start="4" data-duration="2"></div>
+</div>
+</body></html>`;
+  const htmlAfterDeletingC = `<!DOCTYPE html><html data-composition-variables='[]'><body>
+<div data-hf-id="hf-stage" data-composition-id="main" data-duration="6">
+<div data-hf-id="hf-a" data-start="0" data-duration="2"></div>
+<div data-hf-id="hf-b" data-start="2" data-duration="2"></div>
+</div>
+</body></html>`;
+
+  beforeEach(() => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL) => {
+        const url = String(input);
+        if (url.includes("/file-mutations/remove-element/")) {
+          return new Response(JSON.stringify({ changed: true, content: htmlAfterDeletingC }), {
+            status: 200,
+          });
+        }
+        return new Response(JSON.stringify({ content: html }), { status: 200 });
+      }),
+    );
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.unstubAllGlobals();
+  });
+
+  // A manually-resolved gate stands in for the delete's write landing — a
+  // real timer raced the fix's own microtasks unpredictably (verified: it
+  // kept passing even with the fix's tracking call deleted).
+  function deferred<T>() {
+    let resolve!: (value: T) => void;
+    const promise = new Promise<T>((r) => (resolve = r));
+    return { promise, resolve };
+  }
+
+  function mountRaceHarness() {
+    const elements = [el("hf-a", 0, 2), el("hf-b", 2, 2), el("hf-c", 4, 2)];
+    const gate = deferred<void>();
+    const recordEdit = vi.fn(() => gate.promise);
+    let tracked: ((elements: TimelineElement[]) => Promise<void>) | null = null;
+    function Harness() {
+      const track = useTrackPendingTimelineEdit();
+      const hook = useTimelineDeleteOps({
+        projectIdRef: { current: "test-project" },
+        activeCompPath: "index.html",
+        timelineElements: elements,
+        showToast: vi.fn(),
+        writeProjectFile: vi.fn().mockResolvedValue(undefined),
+        recordEdit,
+        reloadPreview: vi.fn(),
+        previewIframeRef: { current: null },
+        handleTimelineGroupMove: vi.fn().mockResolvedValue(undefined),
+      });
+      tracked = track(hook.handleTimelineElementsDelete);
+      return null;
+    }
+    mountReactHarness(<Harness />);
+    // Deletes the LAST clip (not the middle one): only this shrinks the
+    // composition's furthest-clip-end duration, so the write actually
+    // differs from the original content and recordEdit is reached — the
+    // middle clip's delete leaves duration unchanged and is a no-op write.
+    return { gate, recordEdit, deleteSelection: () => tracked!([elements[2]]) };
+  }
+
+  it("the pending-edit flush waits while the delete's history write is still landing", async () => {
+    const { gate, recordEdit, deleteSelection } = mountRaceHarness();
+    const order: string[] = [];
+    const deletePromise = deleteSelection().then(() => order.push("deleted"));
+    // Let the delete run up to (and call) recordEdit, which is now gated —
+    // this is the exact window a fast Undo used to race into.
+    await vi.waitFor(() => expect(recordEdit).toHaveBeenCalled());
+    // No React state changes happen inside the flush itself here (no
+    // pending-edit-flush listeners are registered in this harness), so it
+    // does not need act()'s wrapping — only awaiting the delete's own
+    // resolution below does.
+    const flushPromise = flushStudioPendingEdits().then(() => order.push("flushed"));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(order).toEqual([]);
+    gate.resolve();
+    await deletePromise;
+    await flushPromise;
+    expect(order).toEqual(["deleted", "flushed"]);
+  });
+
+  it("the pending-edit flush resolves immediately once the delete has already finished", async () => {
+    const { gate, deleteSelection } = mountRaceHarness();
+    gate.resolve();
+    await deleteSelection();
+    await act(async () => {
+      await flushStudioPendingEdits();
+    });
+  });
+});