@hyperframes/studio 0.8.81 → 0.8.82

package/src/hooks/timelineAudioGroupCreate.ts

@@ -14,9 +14,9 @@ import { runtimeAudioId } from "../player/lib/timelineElementHelpers";
 import { invalidateGroupInfoCache } from "../player/lib/timelineGroupInfo";
 import { readTagSnippetByTarget, type PatchOperation } from "../utils/sourcePatcher";
 import {
-  applyPatchByTarget,
-  buildPatchTarget,
   findTimelineElementInIframe,
+  operationChanges,
+  patchTimelineChangesInSource,
   readFileContent,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
@@ -197,52 +197,30 @@ export async function createAudioGroupAndAssignMembers({
     property: HF_AUDIO_GROUP_ATTR,
     value: groupId,
   };
-  const originalByPath = new Map<string, string>();
-  const files: Record<string, string> = {};
+  const groupPath = activeCompPath || "index.html";
+  const byPath = groupElementsByTargetPath(elements, activeCompPath);
+  const files: Record<string, (current: string) => string> = {};
+  for (const targetPath of new Set([...byPath.keys(), groupPath])) {
+    files[targetPath] = (current) => {
+      let patched = patchTimelineChangesInSource(
+        current,
+        targetPath,
+        operationChanges(byPath.get(targetPath) ?? [], groupOperation),
+      );
+      if (targetPath === groupPath) patched = insertGroupElement(patched, groupId, groupLabel);
+      if (patched !== current) pendingTimelineEditPathRef.current.add(targetPath);
+      return patched;
+    };
+  }
 
   try {
-    for (const [targetPath, fileElements] of groupElementsByTargetPath(elements, activeCompPath)) {
-      let patchedContent = await readFileContent(projectId, targetPath);
-      originalByPath.set(targetPath, patchedContent);
-
-      for (const element of fileElements) {
-        const patchTarget = buildPatchTarget(element);
-        if (!patchTarget) {
-          throw new Error(`Timeline element ${element.id} is missing a patchable target`);
-        }
-        if (readTagSnippetByTarget(patchedContent, patchTarget) === undefined) {
-          throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
-        }
-        patchedContent = applyPatchByTarget(patchedContent, patchTarget, groupOperation);
-      }
-
-      files[targetPath] = patchedContent;
-      pendingTimelineEditPathRef.current.add(targetPath);
-    }
-
-    const groupPath = activeCompPath || "index.html";
-    let groupContent = files[groupPath];
-    if (groupContent === undefined) {
-      groupContent = await readFileContent(projectId, groupPath);
-      originalByPath.set(groupPath, groupContent);
-    }
-    const withGroupElement = insertGroupElement(groupContent, groupId, groupLabel);
-    if (withGroupElement !== groupContent) {
-      files[groupPath] = withGroupElement;
-      pendingTimelineEditPathRef.current.add(groupPath);
-    }
-
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
       label: groupLabel
         ? `Group ${elements.length} clips as ${groupLabel}`
         : `Group ${elements.length} voice clips`,
       files,
-      readFile: async (path) => {
-        const original = originalByPath.get(path);
-        if (original !== undefined) return original;
-        return readFileContent(projectId, path);
-      },
+      readFile: (path) => readFileContent(projectId, path),
       writeFile: writeProjectFile,
       recordEdit,
     });

package/src/hooks/timelineEditingHelpers.test.ts

@@ -12,6 +12,7 @@ import {
   type PersistTimelineBatchChange,
 } from "./timelineEditingHelpers";
 import type { TimelineElement } from "../player/store/playerStore";
+import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 import { usePlayerStore } from "../player/store/playerStore";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 import { timelineKeyframeSelectionKey } from "../player/components/timelineKeyframeIdentity";
@@ -244,6 +245,26 @@ describe("buildTimelineResizeTimingPatch", () => {
   });
 });
 
+describe("buildTimelineResizeTimingPatch — source in-point read as playback reads it", () => {
+  it.each([
+    ['data-playback-start="-1" data-media-start="2"', 4.5, 1.5],
+    ['data-playback-start="2"', 4.5, 1.5],
+    ['data-media-start="junk"', 5.5, 0.5],
+    ['data-media-start="1.5s"', 5.5, 0.5],
+  ])("%s, head to %s", (inPoint, start, expected) => {
+    const source = `<div id="root"><video id="a" class="clip" data-start="5" data-duration="3" ${inPoint}></video></div>`;
+    const element = el({ id: "a", tag: "video", domId: "a", start: 5, duration: 3 });
+    const host = document.createElement("div");
+    host.innerHTML = buildTimelineResizeTimingPatch(source, { id: "a" }, element, {
+      start,
+      duration: 8 - start,
+      playbackStart: undefined,
+    });
+    const video = host.querySelector("#a")!;
+    expect(readMediaOffsetSeconds((name) => video.getAttribute(name))).toBe(expected);
+  });
+});
+
 describe("persistTimelineBatchEdit", () => {
   const SOURCE = `<div id="root"><video id="a" class="clip" data-start="1" data-track-index="0"></video><video id="b" class="clip" data-start="2" data-track-index="1"></video></div>`;
 

package/src/hooks/timelineEditingHelpers.ts

@@ -15,7 +15,10 @@ import { getElementZIndex } from "../player/lib/layerOrdering";
 import {
   furthestClipEndFromSource,
   getTimelineElementIdentity,
+  playbackStartAttributeForElement,
+  readPlaybackStartAttributes,
 } from "../player/lib/timelineElementHelpers";
+import { resolveTimelinePlaybackRate } from "../player/components/timelineGroupEditing";
 import {
   saveProjectFilesWithHistory,
   writeProjectFilesWithHistoryInQueue,
@@ -199,13 +202,6 @@ export function removeIframeTimelineElements(
     findTimelineElementInIframe(iframe, element, activeCompositionPath)?.remove();
 }
 
-export function playbackStartAttributeForElement(
-  element: Pick<TimelineElement, "kind" | "playbackStartAttr">,
-): "data-media-start" | "data-playback-start" {
-  return element.playbackStartAttr === "playback-start" || element.kind === "composition"
-    ? "data-playback-start"
-    : "data-media-start";
-}
 // fallow-ignore-next-line complexity
 function resolveResizePlaybackStart(
   original: string,
@@ -219,15 +215,19 @@ function resolveResizePlaybackStart(
   }
   const trimDelta = updates.start - element.start;
   if (trimDelta === 0) return null;
-  const raw =
-    readAttributeByTarget(original, target, "playback-start") ??
-    readAttributeByTarget(original, target, "media-start");
-  const current = raw != null ? parseFloat(raw) : undefined;
-  if (current == null || !Number.isFinite(current)) return null;
-  const attrName = playbackStartAttributeForElement(element).slice("data-".length);
+  const source = readPlaybackStartAttributes((name) =>
+    readAttributeByTarget(original, target, name),
+  );
+  if (source.playbackStart == null) return null;
+  const attrName = playbackStartAttributeForElement({ kind: element.kind, ...source }).slice(
+    "data-".length,
+  );
   return {
     attrName,
-    value: Math.max(0, current + trimDelta * Math.max(element.playbackRate ?? 1, 0.1)),
+    value: Math.max(
+      0,
+      source.playbackStart + trimDelta * resolveTimelinePlaybackRate(element.playbackRate),
+    ),
   };
 }
 
@@ -308,25 +308,26 @@ export interface PersistTimelineEditInput {
 
 export async function persistTimelineEdit(input: PersistTimelineEditInput): Promise<void> {
   const targetPath = input.element.sourceFile || input.activeCompPath || "index.html";
-  const originalContent = await readFileContent(input.projectId, targetPath);
-
   const patchTarget = buildPatchTarget(input.element);
   if (!patchTarget) {
     throw new Error(`Timeline element ${input.element.id} is missing a patchable target`);
   }
 
-  const patchedContent = input.buildPatches(originalContent, patchTarget);
-  if (patchedContent === originalContent) {
-    throw new Error(`Unable to patch timeline element ${input.element.id} in ${targetPath}`);
-  }
-
   input.pendingTimelineEditPathRef.current.add(targetPath);
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
     coalesceKey: input.coalesceKey,
-    files: { [targetPath]: patchedContent },
-    readFile: async () => originalContent,
+    files: {
+      [targetPath]: (current) => {
+        const patched = input.buildPatches(current, patchTarget);
+        if (patched === current) {
+          throw new Error(`Unable to patch timeline element ${input.element.id} in ${targetPath}`);
+        }
+        return patched;
+      },
+    },
+    readFile: (path) => readFileContent(input.projectId, path),
     writeFile: input.writeProjectFile,
     recordEdit: input.recordEdit,
   });
@@ -337,6 +338,36 @@ export interface PersistTimelineBatchChange {
   buildPatches: (original: string, target: PatchTarget) => string;
 }
 
+/** One batch change per element, each applying the same patch operation. */
+export function operationChanges(
+  elements: readonly TimelineElement[],
+  operation: PatchOperation,
+): PersistTimelineBatchChange[] {
+  return elements.map((element) => ({
+    element,
+    buildPatches: (html, target) => applyPatchByTarget(html, target, operation),
+  }));
+}
+
+/** Patches each change into `source`, failing loudly on a target the file does not hold. */
+export function patchTimelineChangesInSource(
+  source: string,
+  targetPath: string,
+  changes: readonly PersistTimelineBatchChange[],
+): string {
+  let current = source;
+  for (const { element, buildPatches } of changes) {
+    const target = buildPatchTarget(element);
+    if (!target) throw new Error(`Timeline element ${element.id} is missing a patchable target`);
+    // Resolve first: a member already at its target values patches to the same string, a missing one must throw.
+    if (!findTagByTarget(current, target)) {
+      throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
+    }
+    current = buildPatches(current, target);
+  }
+  return current;
+}
+
 export interface PersistTimelineBatchEditInput {
   projectId: string;
   activeCompPath: string | null;
@@ -353,50 +384,24 @@ export interface PersistTimelineBatchEditInput {
 export async function persistTimelineBatchEdit(
   input: PersistTimelineBatchEditInput,
 ): Promise<void> {
-  const originals = new Map<string, string>();
-  const patchedByPath = new Map<string, string>();
-
+  const changesByPath = new Map<string, PersistTimelineBatchChange[]>();
   for (const change of input.changes) {
     const targetPath = change.element.sourceFile || input.activeCompPath || "index.html";
-    const original =
-      originals.get(targetPath) ?? (await readFileContent(input.projectId, targetPath));
-    originals.set(targetPath, original);
-
-    const patchTarget = buildPatchTarget(change.element);
-    if (!patchTarget) {
-      throw new Error(`Timeline element ${change.element.id} is missing a patchable target`);
-    }
-
-    const current = patchedByPath.get(targetPath) ?? original;
-    // Resolve the target FIRST: byte-identical output below is only a legit
-    // no-op when the member actually resolved in the source. A mistargeted
-    // member (stale id/selector) must fail loudly like the single-edit path,
-    // not be silently dropped as "already at target".
-    if (!findTagByTarget(current, patchTarget)) {
-      throw new Error(`Unable to patch timeline element ${change.element.id} in ${targetPath}`);
-    }
-    const patched = change.buildPatches(current, patchTarget);
-    // The target resolved, so a member whose attributes already hold the target
-    // values patches to the identical string — e.g. a track-insert renumber
-    // where one clip's lane is already correct. That is a legitimate no-op:
-    // skip it instead of aborting (and rolling back) the whole batch.
-    if (patched === current) continue;
-    patchedByPath.set(targetPath, patched);
+    changesByPath.set(targetPath, [...(changesByPath.get(targetPath) ?? []), change]);
   }
+  const buildFile = (targetPath: string) => (original: string) => {
+    const next = patchTimelineChangesInSource(original, targetPath, changesByPath.get(targetPath)!);
+    if (next !== original) input.pendingTimelineEditPathRef.current.add(targetPath);
+    return next;
+  };
 
-  if (patchedByPath.size === 0) return;
-
-  const files = Object.fromEntries(patchedByPath);
-  for (const targetPath of Object.keys(files)) {
-    input.pendingTimelineEditPathRef.current.add(targetPath);
-  }
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
     coalesceKey: input.coalesceKey,
     coalesceMs: input.coalesceMs,
-    files,
-    readFile: async (path) => originals.get(path) ?? readFileContent(input.projectId, path),
+    files: Object.fromEntries([...changesByPath.keys()].map((path) => [path, buildFile(path)])),
+    readFile: (path) => readFileContent(input.projectId, path),
     writeFile: input.writeProjectFile,
     recordEdit: input.recordEdit,
   });
@@ -427,7 +432,7 @@ export function readTargetAttribute(
   return readAttributeByTarget(html, patchTarget, attr) ?? null;
 }
 
-export { applyPatchByTarget, formatTimelineAttributeNumber, formatTimelineMediaOffset };
+export { formatTimelineAttributeNumber, formatTimelineMediaOffset };
 
 export { patchDocumentRootDuration } from "./timelineEditingGsap";
 
@@ -490,8 +495,8 @@ export async function persistElementAttribute({
       return await writeProjectFilesWithHistoryInQueue({
         projectId,
         label,
-        files: { [targetPath]: patched },
-        readFile: async (path) => (path === targetPath ? before : readFileContent(projectId, path)),
+        files: { [targetPath]: () => patched },
+        readFile: async () => before,
         writeFile: writeProjectFile,
         recordEdit,
       });

package/src/hooks/timelineQuickSaves.test.ts

@@ -0,0 +1,195 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  buildTimelineMoveTimingPatch,
+  buildTimelineResizeTimingPatch,
+  persistElementAttribute,
+  persistTimelineBatchEdit,
+  persistTimelineEdit,
+} from "./timelineEditingHelpers";
+import type { TimelineElement } from "../player/store/playerStore";
+import { finishClipTimingFallback } from "./timelineTimingSync";
+import { applyColorGradingScopeUpdate } from "../components/studioColorGradingScope";
+
+const SOURCE =
+  '<div id="root"><video id="a" class="clip" data-start="1" data-duration="5" data-track-index="0"></video>' +
+  '<video id="b" class="clip" data-start="2" data-duration="5" data-track-index="1"></video>' +
+  '<script>gsap.to("#a", { x: 1 }, 1)</script></div>';
+
+// Refuses a write whose base is stale, like the server's If-Match; one write can be held mid-flight.
+// A GSAP shift lands 10 ms after it is posted and releases the held write.
+function fakeProject() {
+  let file = SOURCE;
+  const refused: string[] = [];
+  let writes = 0;
+  let release = () => {};
+  const firstWrite = new Promise<void>((resolve) => (release = resolve));
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: string) => {
+      if (input.includes("/gsap-mutation-capabilities")) {
+        return Response.json({ atomicOwnershipPairs: true });
+      }
+      if (input.includes("/gsap-mutations/")) {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        const before = file;
+        file = file.replace("{ x: 1 }, 1)", "{ x: 1 }, 3)");
+        release();
+        return Response.json({ mutated: true, before, after: file, scriptText: null });
+      }
+      return Response.json({ content: file });
+    }),
+  );
+  const writeProjectFile = async (path: string, content: string, expected?: string) => {
+    if (++writes === 1) await firstWrite;
+    if (expected !== undefined && expected !== file && content !== file) {
+      refused.push(path);
+      throw new Error(`409 conflict on ${path}`);
+    }
+    file = content;
+  };
+  return { writeProjectFile, refused, release: () => release(), read: () => file };
+}
+
+type Project = ReturnType<typeof fakeProject>;
+
+function clip(id: string): TimelineElement {
+  return { id, key: id, domId: id, tag: "video", label: id, start: 0, duration: 5, track: 0 };
+}
+
+const shared = (project: Project) => ({
+  projectId: "p1",
+  activeCompPath: "index.html",
+  writeProjectFile: project.writeProjectFile,
+  recordEdit: async () => {},
+  pendingTimelineEditPathRef: { current: new Set<string>() },
+});
+
+const move = (project: Project, id: string, start: number) =>
+  persistTimelineEdit({
+    ...shared(project),
+    element: clip(id),
+    label: "Move clip",
+    buildPatches: (original, target) => buildTimelineMoveTimingPatch(original, target, start, 5),
+  });
+
+const trim = (project: Project, id: string, duration: number) =>
+  persistTimelineBatchEdit({
+    ...shared(project),
+    label: "Trim clip",
+    changes: [
+      {
+        element: clip(id),
+        buildPatches: (original, target) =>
+          buildTimelineResizeTimingPatch(original, target, clip(id), { start: 0, duration }),
+      },
+    ],
+  });
+
+// Starts the second save while the first one's write is in flight; both must land unrefused.
+async function expectBothLand(
+  project: Project,
+  first: () => Promise<unknown>,
+  second: () => Promise<unknown>,
+) {
+  const saves = [first()];
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  saves.push(second());
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  project.release();
+  const results = await Promise.allSettled(saves);
+  expect(project.refused).toEqual([]);
+  expect(results.map((r) => r.status)).toEqual(["fulfilled", "fulfilled"]);
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("two quick timeline saves on one file", () => {
+  it("lands both moves", async () => {
+    const project = fakeProject();
+    await expectBothLand(
+      project,
+      () => move(project, "a", 3),
+      () => move(project, "b", 4),
+    );
+
+    expect(project.read()).toContain('id="a" class="clip" data-start="3"');
+    expect(project.read()).toContain('id="b" class="clip" data-start="4"');
+  });
+
+  it("lands both trims", async () => {
+    const project = fakeProject();
+    await expectBothLand(
+      project,
+      () => trim(project, "a", 3),
+      () => trim(project, "b", 2),
+    );
+
+    expect(project.read()).toMatch(/id="a"[^>]*data-duration="3"/);
+    expect(project.read()).toMatch(/id="b"[^>]*data-duration="2"/);
+  });
+
+  it("lands a move started while a volume save is writing", async () => {
+    const project = fakeProject();
+    const volume = () =>
+      persistElementAttribute({
+        ...shared(project),
+        targetPath: "index.html",
+        patchTarget: { id: "a" },
+        attr: "data-volume",
+        value: "0.5",
+        label: "Set volume",
+        patchLive: () => {},
+        onFileRead: () => {},
+      });
+    await expectBothLand(project, volume, () => move(project, "b", 4));
+
+    expect(project.read()).toContain('data-volume="0.5"');
+    expect(project.read()).toContain('id="b" class="clip" data-start="4"');
+  });
+
+  it("keeps a move when a color grade starts while it is writing", async () => {
+    const project = fakeProject();
+    const grade = () =>
+      applyColorGradingScopeUpdate({
+        scope: "source-file",
+        value: "warm",
+        selectedSourceFile: "index.html",
+        fileTree: ["index.html"],
+        projectId: "p1",
+        waitForPendingDomEditSaves: async () => {},
+        readProjectFile: async () => project.read(),
+        writeProjectFile: project.writeProjectFile,
+        recordEdit: async () => {},
+        reloadPreview: () => {},
+        showToast: () => {},
+      });
+    await expectBothLand(project, () => move(project, "a", 3), grade);
+
+    expect(project.read()).toContain('id="a" class="clip" data-start="3"');
+    expect(project.read()).toContain('data-color-grading="warm"');
+  });
+
+  it("lands a move started while the previous move's GSAP rewrite is in flight", async () => {
+    const project = fakeProject();
+    const shiftA = finishClipTimingFallback({
+      iframe: null,
+      reloadPreview: () => {},
+      projectId: "p1",
+      targetPath: "index.html",
+      domId: "a",
+      label: "Move clip",
+      recordEdit: async () => {},
+      writeProjectFile: project.writeProjectFile,
+      edit: { kind: "shift", delta: 2 },
+    });
+    const results = await Promise.allSettled([shiftA, move(project, "b", 4)]);
+
+    expect(project.refused).toEqual([]);
+    expect(results.map((r) => r.status)).toEqual(["fulfilled", "fulfilled"]);
+    expect(project.read()).toContain('gsap.to("#a", { x: 1 }, 3)');
+    expect(project.read()).toContain('id="b" class="clip" data-start="4"');
+  });
+});

package/src/hooks/timelineTimingSync.test.ts

@@ -11,6 +11,8 @@ import {
   shiftGsapPositions,
 } from "./timelineTimingSync";
 
+const writeProjectFile = async () => {};
+
 afterEach(() => {
   usePlayerStore.getState().reset();
   vi.restoreAllMocks();
@@ -68,6 +70,7 @@ function clipFallbackInput(overrides: {
     domId: "clip",
     label: "Move timeline clip",
     recordEdit: overrides.recordEdit as never,
+    writeProjectFile,
     edit: { kind: "shift", delta: 1 } as const,
   };
 }
@@ -495,6 +498,7 @@ describe("nothing-to-rewrite timing edits rebind in place (no script re-executio
     const element = { sourceFile: "index.html" } as TimelineElement;
 
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe,
       reloadPreview,
@@ -522,6 +526,7 @@ describe("nothing-to-rewrite timing edits rebind in place (no script re-executio
     const reloadPreview = vi.fn();
 
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe,
       reloadPreview,
@@ -602,6 +607,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     let clipIndex = 0;
 
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe: buildLivePreviewIframe().iframe,
       reloadPreview: vi.fn(),
@@ -632,6 +638,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     let clipIndex = 0;
 
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe: buildLivePreviewIframe().iframe,
       reloadPreview: vi.fn(),
@@ -669,6 +676,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
 
     const reloadPreview = vi.fn();
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe: buildLivePreviewIframe().iframe,
       reloadPreview,
@@ -698,6 +706,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     let clipIndex = 0;
 
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe: buildLivePreviewIframe().iframe,
       reloadPreview,
@@ -728,6 +737,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     const recordEdit = vi.fn(async () => {});
 
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe: buildLivePreviewIframe().iframe,
       reloadPreview: vi.fn(),
@@ -762,6 +772,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
 
     const reloadPreview = vi.fn();
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe: buildLivePreviewIframe().iframe,
       reloadPreview,
@@ -797,6 +808,7 @@ describe("foldGsapMutationIntoHistory — owned GSAP transaction", () => {
     const server = installOwnedFileServer(contents, { failReadAt: 1 });
 
     await finishGroupTimingGsapFallback({
+      writeProjectFile,
       projectId: "p1",
       iframe: buildLivePreviewIframe().iframe,
       reloadPreview: vi.fn(),