@hyperframes/studio 0.8.53 → 0.8.54

package/src/hooks/useTimelineAssetDropOps.test.tsx

@@ -16,19 +16,29 @@ afterEach(() => {
 });
 
 type DropFn = ReturnType<typeof useTimelineAssetDropOps>["handleTimelineAssetDrop"];
+type FileDropFn = ReturnType<typeof useTimelineAssetDropOps>["handleTimelineFileDrop"];
+type CompositionDropFn = ReturnType<
+  typeof useTimelineAssetDropOps
+>["handleTimelineCompositionDrop"];
 
 function renderDropHook(
   sourceContent: string,
   writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
   timelineElements: TimelineElement[] = [],
+  checkEditable?: (targets: readonly TimelineElement[]) => boolean,
+  uploadProjectFiles: (files: Iterable<File>, dir?: string) => Promise<string[]> = vi
+    .fn()
+    .mockResolvedValue([]),
 ) {
   vi.stubGlobal(
     "fetch",
     vi.fn().mockResolvedValue({ ok: true, json: async () => ({ content: sourceContent }) }),
   );
   let drop: DropFn | null = null;
+  let fileDrop: FileDropFn | null = null;
+  let compositionDrop: CompositionDropFn | null = null;
   function Harness() {
-    const { handleTimelineAssetDrop } = useTimelineAssetDropOps({
+    const handlers = useTimelineAssetDropOps({
       projectIdRef: { current: "project" },
       activeCompPath: "index.html",
       timelineElements,
@@ -36,13 +46,19 @@ function renderDropHook(
       writeProjectFile,
       recordEdit: vi.fn().mockResolvedValue(undefined),
       reloadPreview: vi.fn(),
-      uploadProjectFiles: vi.fn().mockResolvedValue([]),
+      uploadProjectFiles,
+      checkEditable,
     });
-    drop = handleTimelineAssetDrop;
+    drop = handlers.handleTimelineAssetDrop;
+    fileDrop = handlers.handleTimelineFileDrop;
+    compositionDrop = handlers.handleTimelineCompositionDrop;
     return null;
   }
   mountReactHarness(<Harness />);
-  return () => drop!;
+  return Object.assign(() => drop!, {
+    file: () => fileDrop!,
+    composition: () => compositionDrop!,
+  });
 }
 
 describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
@@ -124,4 +140,46 @@ describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
     expect(written).toContain('id="hidden" data-start="0" data-track-index="1"');
     expect(written).toMatch(/<video id="clip"[^>]*data-track-index="1"/);
   });
+
+  it("refuses an asset drop before reading or writing when editing is blocked", async () => {
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const checkEditable = vi.fn(() => false);
+    const getDrop = renderDropHook(
+      '<main data-composition-id="scene" data-duration="10"></main>',
+      writeProjectFile,
+      [],
+      checkEditable,
+    );
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 1, track: 0 }, 2);
+    });
+
+    expect(writeProjectFile).not.toHaveBeenCalled();
+    expect(checkEditable).toHaveBeenCalledWith([
+      expect.objectContaining({ sourceFile: "index.html", start: 1, track: 0 }),
+    ]);
+  });
+
+  it("refuses file and composition drops before their writes when editing is blocked", async () => {
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const uploadProjectFiles = vi.fn().mockResolvedValue(["clip.mp4"]);
+    const getDrop = renderDropHook(
+      '<main data-composition-id="scene" data-duration="10"></main>',
+      writeProjectFile,
+      [],
+      () => false,
+      uploadProjectFiles,
+    );
+    const fetchMock = vi.mocked(globalThis.fetch);
+
+    await act(async () => {
+      await getDrop.file()([new File(["clip"], "clip.mp4")], { start: 1, track: 0 });
+      await getDrop.composition()("scene.html", { start: 1, track: 0 });
+    });
+
+    expect(uploadProjectFiles).not.toHaveBeenCalled();
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(writeProjectFile).not.toHaveBeenCalled();
+  });
 });

package/src/hooks/useTimelineAssetDropOps.ts

@@ -38,6 +38,20 @@ function fileDropPlacement(
   return index === 0 ? { ...dropped, ...next } : { ...next, track: landedTrack ?? next.track };
 }
 
+function timelineDropTarget(
+  sourceFile: string,
+  placement: Pick<TimelineElement, "start" | "track">,
+): TimelineElement {
+  return {
+    id: "timeline-drop",
+    tag: "div",
+    start: placement.start,
+    duration: 0,
+    track: placement.track,
+    sourceFile,
+  };
+}
+
 interface UseTimelineAssetDropOpsOptions {
   projectIdRef: MutableRefObject<string | null>;
   activeCompPath: string | null;
@@ -50,6 +64,7 @@ interface UseTimelineAssetDropOpsOptions {
   isRecordingRef?: RefObject<boolean>;
   forceReloadSdkSession?: () => void;
   observeProjectFileVersion?: (path: string, version: string | null) => void;
+  checkEditable?: (targets: readonly TimelineElement[]) => boolean;
 }
 
 export function useTimelineAssetDropOps({
@@ -64,6 +79,7 @@ export function useTimelineAssetDropOps({
   isRecordingRef,
   forceReloadSdkSession,
   observeProjectFileVersion,
+  checkEditable,
 }: UseTimelineAssetDropOpsOptions) {
   // fallow-ignore-next-line complexity
   const dropAssetAt = useCallback(
@@ -77,6 +93,10 @@ export function useTimelineAssetDropOps({
         showToast("Cannot edit timeline while recording", "error");
         return undefined;
       }
+      const targetPath = activeCompPath || "index.html";
+      if (checkEditable && !checkEditable([timelineDropTarget(targetPath, placement)])) {
+        return undefined;
+      }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
 
@@ -86,7 +106,6 @@ export function useTimelineAssetDropOps({
         return undefined;
       }
 
-      const targetPath = activeCompPath || "index.html";
       try {
         const originalContent = await readFileContent(pid, targetPath);
 
@@ -172,6 +191,7 @@ export function useTimelineAssetDropOps({
       reloadPreview,
       isRecordingRef,
       forceReloadSdkSession,
+      checkEditable,
     ],
   );
 
@@ -190,6 +210,11 @@ export function useTimelineAssetDropOps({
         showToast("Cannot edit timeline while recording", "error");
         return;
       }
+      const targetPath = activeCompPath || "index.html";
+      const initialPlacement = placement ?? { start: 0, track: 0 };
+      if (checkEditable && !checkEditable([timelineDropTarget(targetPath, initialPlacement)])) {
+        return;
+      }
       const pid = projectIdRef.current;
       if (!pid) return;
       const uploaded = await uploadProjectFiles(files);
@@ -215,7 +240,15 @@ export function useTimelineAssetDropOps({
         if (index === 0) landedTrack = track;
       }
     },
-    [dropAssetAt, projectIdRef, uploadProjectFiles, isRecordingRef, showToast],
+    [
+      activeCompPath,
+      checkEditable,
+      dropAssetAt,
+      projectIdRef,
+      uploadProjectFiles,
+      isRecordingRef,
+      showToast,
+    ],
   );
 
   const handleTimelineCompositionDrop = useCallback(
@@ -224,9 +257,12 @@ export function useTimelineAssetDropOps({
         showToast("Cannot edit timeline while recording", "error");
         return;
       }
+      const targetPath = activeCompPath || "index.html";
+      if (checkEditable && !checkEditable([timelineDropTarget(targetPath, placement)])) {
+        return;
+      }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
-      const targetPath = activeCompPath || "index.html";
       try {
         await commitTimelineCompositionInsertion({
           projectId: pid,
@@ -251,6 +287,7 @@ export function useTimelineAssetDropOps({
     },
     [
       activeCompPath,
+      checkEditable,
       forceReloadSdkSession,
       isRecordingRef,
       observeProjectFileVersion,

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();
+    });
+  });
+});