@hyperframes/studio 0.8.108 → 0.8.110

package/src/components/editor/linkedSpeedEdits.test.tsx

@@ -0,0 +1,164 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "../../player/components/testRootHarness";
+import { usePlayerStore, type TimelineElement } from "../../player/store/playerStore";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import type { DomEditSelection } from "./domEditingTypes";
+import {
+  fanOutAttributeInSource,
+  linkedPartnerTargets,
+  useLinkedSpeedCommit,
+  withLinkedPlaybackRate,
+  type LinkedSpeedCommit,
+} from "./linkedSpeedEdits";
+import { useVolumeAutomation } from "./useVolumeAutomation";
+import { useLinkedClipPreferences } from "../../utils/linkedClipPreferences";
+
+const clip = (id: string, tag: string, link?: string): TimelineElement => ({
+  id,
+  domId: id,
+  tag,
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...(link ? { link } : {}),
+});
+
+const elements = [
+  clip("talk", "video", "lk-1"),
+  clip("talk-audio", "audio", "lk-1"),
+  clip("music", "audio"),
+];
+
+const source = `<div data-composition-id="main">
+<video id="talk" data-start="0" data-duration="4" data-link="lk-1" muted></video>
+<audio id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="{&quot;version&quot;:1,&quot;lanes&quot;:[]}"></audio>
+<audio id="music" data-start="0" data-duration="4"></audio>
+</div>`;
+
+function selection(id: string, dataAttributes: Record<string, string> = {}): DomEditSelection {
+  const element = document.createElement("video");
+  element.id = id;
+  return {
+    id,
+    element,
+    label: id,
+    tagName: "video",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 0, height: 0 },
+    textContent: null,
+    dataAttributes: { start: "0", duration: "4", ...dataAttributes },
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+  };
+}
+
+describe("linkedPartnerTargets", () => {
+  it("returns the other data-link members and nothing for an unlinked clip", () => {
+    expect(linkedPartnerTargets({ id: "talk" }, elements)).toEqual([{ id: "talk-audio" }]);
+    expect(linkedPartnerTargets({ id: "music" }, elements)).toEqual([]);
+  });
+
+  it("reaches no partner with Linked Selection off", () => {
+    useLinkedClipPreferences.getState().setLinkedSelection(false);
+    try {
+      expect(linkedPartnerTargets({ id: "talk" }, elements)).toEqual([]);
+    } finally {
+      useLinkedClipPreferences.getState().setLinkedSelection(true);
+    }
+  });
+});
+
+describe("fanOutAttributeInSource", () => {
+  it("writes each partner from its own current value", () => {
+    const seen: Array<string | undefined> = [];
+    const next = fanOutAttributeInSource(
+      source,
+      [{ id: "talk-audio" }],
+      "data-automation",
+      (raw) => {
+        seen.push(raw);
+        return "rate-lane";
+      },
+    );
+    expect(seen).toEqual(['{"version":1,"lanes":[]}']);
+    expect(next).toContain(
+      'id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="rate-lane"',
+    );
+    expect(next).not.toContain('id="music" data-start="0" data-duration="4" data-automation');
+  });
+});
+
+const harness = createHappyDomRootHarness();
+
+function renderLinked(sel: DomEditSelection, commit: CommitDomAttributeBatch) {
+  let linked: LinkedSpeedCommit | null = null;
+  let rate: ReturnType<typeof useVolumeAutomation>["rate"] | null = null;
+  function Probe() {
+    linked = useLinkedSpeedCommit(sel, commit);
+    rate = useVolumeAutomation(sel, 0, vi.fn(), linked).rate;
+    return null;
+  }
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  act(() => harness.mount(host).render(<Probe />));
+  return { linked: () => linked, rate: () => rate };
+}
+
+describe("linked speed edits", () => {
+  it("fans a playback-rate edit out to the partner in one batch commit", async () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const onSetAttribute = vi.fn();
+    const probe = renderLinked(selection("talk"), commit);
+    await withLinkedPlaybackRate(onSetAttribute, probe.linked())("playback-rate", "2");
+    expect(onSetAttribute).not.toHaveBeenCalled();
+    expect(commit).toHaveBeenCalledTimes(1);
+    const [, ops, options] = commit.mock.calls[0] ?? [];
+    expect(ops).toEqual([{ type: "attribute", property: "playback-rate", value: "2" }]);
+    expect(options?.prepareContent?.(source)).toContain(
+      'id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="{&quot;version&quot;:1,&quot;lanes&quot;:[]}" data-playback-rate="2"',
+    );
+  });
+
+  it("fans a ramp preset out as one commit carrying each member's rate lane", () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const probe = renderLinked(selection("talk"), commit);
+    act(() => probe.rate()?.onApplyPreset("ramp-in"));
+    expect(commit).toHaveBeenCalledTimes(1);
+    const [, ops, options] = commit.mock.calls[0] ?? [];
+    expect(ops?.[0]?.property).toBe("automation");
+    expect(String(ops?.[0]?.value)).toContain('"target":"rate"');
+    const partner = /id="talk-audio"[^>]*data-automation="([^"]*)"/.exec(
+      options?.prepareContent?.(source) ?? "",
+    )?.[1];
+    expect(partner).toContain("rate");
+  });
+
+  it("leaves an unlinked clip on its usual write path", async () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const onSetAttribute = vi.fn();
+    const probe = renderLinked(selection("music"), commit);
+    expect(probe.linked()).toBeNull();
+    await withLinkedPlaybackRate(onSetAttribute, probe.linked())("playback-rate", "2");
+    expect(onSetAttribute).toHaveBeenCalledWith("playback-rate", "2");
+    expect(commit).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/linkedSpeedEdits.ts

@@ -0,0 +1,94 @@
+import { usePlayerStore, type TimelineElement } from "../../player/store/playerStore";
+import { expandToLinkedMembers } from "../../player/components/audioClipLink";
+import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
+import {
+  applyPatchByTarget,
+  readAttributeByTarget,
+  type PatchTarget,
+} from "../../utils/sourcePatcher";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { buildPatchTarget } from "../../hooks/timelineEditingHelpers";
+import type { DomEditSelection } from "./domEditingTypes";
+
+type AttributeValueFor = (current: string | undefined) => string | null;
+
+/** Writes a speed attribute on the selection and every `data-link` partner as one undo step. */
+export interface LinkedSpeedCommit {
+  commitAttribute: (attr: string, valueFor: AttributeValueFor, label: string) => Promise<boolean>;
+}
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+const dataProperty = (attr: string) => (attr.startsWith("data-") ? attr.slice(5) : attr);
+
+function isSelected(el: TimelineElement, selection: PatchTarget): boolean {
+  if (selection.hfId && el.hfId) return el.hfId === selection.hfId;
+  return selection.id != null && (el.domId ?? el.id) === selection.id;
+}
+
+export function linkedPartnerTargets(
+  selection: PatchTarget,
+  elements: readonly TimelineElement[],
+): PatchTarget[] {
+  const self = elements.find((el) => isSelected(el, selection));
+  if (!self?.link) return [];
+  const members = expandToLinkedMembers([keyOf(self)], elements, isLinkedSelectionOn());
+  members.delete(keyOf(self));
+  return elements
+    .filter((el) => members.has(keyOf(el)))
+    .map(buildPatchTarget)
+    .filter((target): target is NonNullable<typeof target> => target !== null);
+}
+
+export function fanOutAttributeInSource(
+  source: string,
+  targets: readonly PatchTarget[],
+  attr: string,
+  valueFor: AttributeValueFor,
+): string {
+  const property = dataProperty(attr);
+  return targets.reduce(
+    (html, target) =>
+      applyPatchByTarget(html, target, {
+        type: "attribute",
+        property,
+        value: valueFor(readAttributeByTarget(html, target, attr)),
+      }),
+    source,
+  );
+}
+
+/** Null when the selection has no link partner, so unlinked clips keep their usual write path. */
+export function useLinkedSpeedCommit(
+  selection: DomEditSelection,
+  commit: CommitDomAttributeBatch | undefined,
+): LinkedSpeedCommit | null {
+  const elements = usePlayerStore((s) => s.elements);
+  if (!commit) return null;
+  const partners = linkedPartnerTargets(selection, elements);
+  if (partners.length === 0) return null;
+  return {
+    commitAttribute: (attr, valueFor, label) => {
+      const property = dataProperty(attr);
+      return commit(
+        selection,
+        [{ type: "attribute", property, value: valueFor(selection.dataAttributes[property]) }],
+        {
+          label,
+          prepareContent: (html) => fanOutAttributeInSource(html, partners, attr, valueFor),
+        },
+      );
+    },
+  };
+}
+
+/** Routes `playback-rate` through the linked commit; every other attribute keeps `onSetAttribute`. */
+export function withLinkedPlaybackRate(
+  onSetAttribute: (attr: string, value: string) => void | Promise<void>,
+  linked: LinkedSpeedCommit | null,
+): (attr: string, value: string) => void | Promise<void> {
+  if (!linked) return onSetAttribute;
+  return async (attr, value) => {
+    if (attr !== "playback-rate") return onSetAttribute(attr, value);
+    await linked.commitAttribute("data-playback-rate", () => value, "Edit speed");
+  };
+}

package/src/components/editor/marqueeCommit.test.tsx

@@ -35,18 +35,23 @@ function Overlay() {
       onPointerMove={marquee.onPointerMove}
       onPointerUp={marquee.onPointerUp}
     >
-      {marquee.marqueeRect && <div data-band />}
+      {marquee.marqueeRect && <div data-band data-width={marquee.marqueeRect.width} />}
     </div>
   );
 }
 
 const pointer = (type: string, clientX: number, clientY: number) =>
   act(() => {
-    document
-      .querySelector("[data-overlay]")!
-      .dispatchEvent(
-        new PointerEvent(type, { bubbles: true, button: 0, pointerId: 1, clientX, clientY }),
-      );
+    document.querySelector("[data-overlay]")!.dispatchEvent(
+      new PointerEvent(type, {
+        bubbles: true,
+        buttons: type === "pointerup" ? 0 : 1,
+        button: 0,
+        pointerId: 1,
+        clientX,
+        clientY,
+      }),
+    );
   });
 const escape = () => {
   const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
@@ -86,6 +91,25 @@ it("an escape cancels a preview band while the pointer is still down, and stops
   expect(hostEscapes).toHaveLength(0);
 });
 
+it("a buttonless move back at the start does not shrink the band", () => {
+  pointer("pointerdown", 10, 10);
+  pointer("pointermove", 120, 90);
+  const band = () => document.querySelector<HTMLElement>("[data-band]")?.dataset.width;
+  expect(band()).toBe("110");
+  act(() => {
+    document.querySelector("[data-overlay]")!.dispatchEvent(
+      new PointerEvent("pointermove", {
+        bubbles: true,
+        pointerId: 1,
+        buttons: 0,
+        clientX: 10,
+        clientY: 10,
+      }),
+    );
+  });
+  expect(band()).toBe("110");
+});
+
 it("an escape with no band in flight still reaches the host", () => {
   const event = escape();
 
@@ -133,6 +157,7 @@ it("a reload promoted mid-band selects from the preview on screen, not the retir
         new PointerEvent(type, {
           bubbles: true,
           button: 0,
+          buttons: type === "pointerup" ? 0 : 1,
           pointerId: 1,
           clientX: x,
           clientY: y,

package/src/components/editor/marqueeCommit.ts

@@ -6,6 +6,7 @@ import { isElementComputedVisible } from "./domEditingElement";
 import { coversComposition } from "../../utils/studioPreviewHelpers";
 import { rectsOverlap, type Rect } from "../../utils/marqueeGeometry";
 import { toVisibleOverlayRect } from "./domEditOverlayGeometry";
+import { movesGesture } from "./domEditOverlayGestures";
 
 interface MarqueeState {
   startX: number;
@@ -226,10 +227,23 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
       window.removeEventListener("keydown", cancelBandBeforeHostEscape, { capture: true });
   }, [cancel]);
 
+  const showCandidates = useCallback(
+    (rect: Rect) => {
+      const iframe = deps.iframeRef.current;
+      const overlay = deps.overlayRef.current;
+      if (!iframe || !overlay) return;
+      const acp = deps.activeCompositionPathRef.current ?? "index.html";
+      candidatesRef.current ??= collectMarqueeCandidates(iframe, overlay, acp);
+      setCandidateRects(hitsWithin(rect, candidatesRef.current).map((h) => h.rect));
+    },
+    [deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
+  );
+
   const onPointerMove = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;
       if (m) {
+        if (!movesGesture(m, event)) return;
         const oRect = deps.overlayRef.current?.getBoundingClientRect();
         if (!oRect) return;
         m.currentX = event.clientX - oRect.left;
@@ -248,18 +262,12 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
           height: Math.abs(m.currentY - m.startY),
         };
         setMarqueeRect(rect);
-        const iframe = deps.iframeRef.current;
-        const overlay = deps.overlayRef.current;
-        if (iframe && overlay) {
-          const acp = deps.activeCompositionPathRef.current ?? "index.html";
-          candidatesRef.current ??= collectMarqueeCandidates(iframe, overlay, acp);
-          setCandidateRects(hitsWithin(rect, candidatesRef.current).map((h) => h.rect));
-        }
+        showCandidates(rect);
         return;
       }
       deps.gestures?.onPointerMove(event);
     },
-    [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
+    [deps.gestures, deps.overlayRef, showCandidates],
   );
 
   const onPointerUp = useCallback(

package/src/components/editor/mediaAudioEdits.test.ts

@@ -88,9 +88,9 @@ describe("cutoutOps", () => {
 describe("mintLinkId", () => {
   it("dedupes against element ids and existing links", () => {
     const doc = document.implementation.createHTMLDocument("t");
-    expect(mintLinkId(doc)).toBe("link");
-    doc.body.innerHTML = '<div id="link"></div><video data-link="link-2"></video>';
-    expect(mintLinkId(doc)).toBe("link-3");
+    expect(mintLinkId(doc)).toBe("lk-1");
+    doc.body.innerHTML = '<div id="lk-1"></div><video data-link="lk-2"></video>';
+    expect(mintLinkId(doc)).toBe("lk-3");
   });
 });
 
@@ -176,10 +176,26 @@ describe("buildKeepSoundCutoutEdit", () => {
       { target: "rate", points: [{ t: 0, v: 2 }] },
     ]);
     expect(audio.getAttribute("data-link")).toBe(video.getAttribute("data-link"));
-    expect(video.getAttribute("data-link")).toBe("link");
+    expect(video.getAttribute("data-link")).toBe("lk-1");
+    expect(video.getAttribute("data-sync-origin")).toBe("lk-1");
+    expect(audio.getAttribute("data-sync-origin")).toBe("lk-1");
     expect(audio.parentElement).toBe(video.parentElement);
   });
 
+  it("keeps a hidden video's sound silent on the linked audio", () => {
+    const video = liveVideo();
+    video.setAttribute("data-hidden", "");
+    const edit = buildKeepSoundCutoutEdit({
+      video,
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/talk-cutout.webm",
+    });
+    const hidden = source.replace('<video id="clip"', '<video id="clip" data-hidden');
+    const doc = parse(applyEdit(hidden, edit));
+    expect(doc.getElementById("clip-audio")?.hasAttribute("data-hidden")).toBe(true);
+  });
+
   it("drops the video's automation attribute when it held no rate lane", () => {
     const video = makeVideo({
       id: "clip",

package/src/components/editor/mediaAudioEdits.ts

@@ -23,13 +23,17 @@ import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
 import { buildDomEditPatchTarget, type DomEditSelection } from "./domEditing";
 import { generateId } from "../../utils/generateId";
 
-const MEDIA_LINK_ATTR = "data-link";
+import {
+  MEDIA_LINK_ATTR,
+  SYNC_ORIGIN_ATTR,
+  mintLinkId as mintLinkIdFrom,
+} from "@hyperframes/core/media-link";
 const SOUND_KEPT_ON_LINKED_AUDIO_STAGE = "Background removed. Sound kept on a linked audio track.";
 
 const SOUND_NOT_KEPT_MESSAGE =
   "Background removed, but the sound could not be kept on a linked audio track. Undo to restore the original clip.";
 
-const MOVED_SOUND_ATTRS = [
+export const MOVED_SOUND_ATTRS = [
   "data-volume",
   HF_AUDIO_FADE_IN_ATTR,
   HF_AUDIO_FADE_OUT_ATTR,
@@ -38,7 +42,7 @@ const MOVED_SOUND_ATTRS = [
   HF_AUDIO_GROUP_ATTR,
 ];
 
-const COPIED_TIMING_ATTRS = [
+export const COPIED_TIMING_ATTRS = [
   "start",
   "end",
   "duration",
@@ -91,7 +95,7 @@ export function cutoutOps(input: { isVideo: boolean; cutoutSrc: string }): Patch
   return input.isVideo ? [src, htmlAttr("muted", "true"), dataAttr("has-audio", null)] : [src];
 }
 
-function firstFreeName(base: string, taken: Set<string>): string {
+export function firstFreeName(base: string, taken: Set<string>): string {
   if (!taken.has(base)) return base;
   let n = 2;
   while (taken.has(`${base}-${n}`)) n += 1;
@@ -100,12 +104,16 @@ function firstFreeName(base: string, taken: Set<string>): string {
 
 export function mintLinkId(doc: Document): string {
   const taken = new Set<string>();
-  for (const el of Array.from(doc.querySelectorAll(`[id], [${MEDIA_LINK_ATTR}]`))) {
-    if (el.id) taken.add(el.id);
-    const link = el.getAttribute(MEDIA_LINK_ATTR);
-    if (link) taken.add(link);
+  const selector = `[id], [${MEDIA_LINK_ATTR}], [${SYNC_ORIGIN_ATTR}]`;
+  for (const el of Array.from(doc.querySelectorAll(selector))) {
+    for (const value of [
+      el.id,
+      el.getAttribute(MEDIA_LINK_ATTR),
+      el.getAttribute(SYNC_ORIGIN_ATTR),
+    ])
+      if (value) taken.add(value);
   }
-  return firstFreeName("link", taken);
+  return mintLinkIdFrom(taken);
 }
 
 function firstFreeTrackIndex(source: string): number {
@@ -117,7 +125,7 @@ function firstFreeTrackIndex(source: string): number {
   return track;
 }
 
-function splitAutomation(raw: string): { videoKeeps: string | null; audioTakes: string } {
+export function splitAutomation(raw: string): { videoKeeps: string | null; audioTakes: string } {
   let lanes: HfAutomationLane[];
   try {
     lanes = parseAutomation(raw).lanes;
@@ -132,11 +140,11 @@ function splitAutomation(raw: string): { videoKeeps: string | null; audioTakes:
   };
 }
 
-function formatAttrs(attrs: Array<[string, string]>): string {
+export function formatAttrs(attrs: Array<[string, string]>): string {
   return attrs.map(([name, value]) => `${name}="${escapeHtmlAttribute(value)}"`).join(" ");
 }
 
-function readAuthoredSrc(source: string, target: PatchTarget): string {
+export function readAuthoredSrc(source: string, target: PatchTarget): string {
   const tag = findTagByTarget(source, target);
   if (!tag) return "";
   const own = /\bsrc=(["'])([^"']*)\1/.exec(tag.tag);
@@ -145,7 +153,7 @@ function readAuthoredSrc(source: string, target: PatchTarget): string {
   return firstSource?.[2] ? unescapeHtmlAttribute(firstSource[2]) : "";
 }
 
-function insertBeforeTarget(source: string, target: PatchTarget, markup: string): string {
+export function insertBeforeTarget(source: string, target: PatchTarget, markup: string): string {
   const match = findTagByTarget(source, target);
   if (!match) return source;
   const lineStart = source.lastIndexOf("\n", match.start) + 1;
@@ -187,7 +195,10 @@ export function buildKeepSoundCutoutEdit(input: {
     movedSound.push([HF_AUDIO_AUTOMATION_ATTR, audioTakes]);
     ops.push(dataAttr(stripDataPrefix(HF_AUDIO_AUTOMATION_ATTR), videoKeeps));
   }
-  ops.push(dataAttr(stripDataPrefix(MEDIA_LINK_ATTR), linkId));
+  ops.push(
+    dataAttr(stripDataPrefix(MEDIA_LINK_ATTR), linkId),
+    dataAttr(stripDataPrefix(SYNC_ORIGIN_ATTR), linkId),
+  );
 
   const prepareContent = (source: string): string => {
     const originalSrc = readAuthoredSrc(source, target);
@@ -208,9 +219,11 @@ export function buildKeepSoundCutoutEdit(input: {
       ...timing,
       ["data-track-index", String(firstFreeTrackIndex(source))],
       [MEDIA_LINK_ATTR, linkId],
+      [SYNC_ORIGIN_ATTR, linkId],
       ...movedSound,
     ];
     if (video.hasAttribute("loop")) attrs.push(["loop", ""]);
+    if (video.hasAttribute("data-hidden")) attrs.push(["data-hidden", ""]);
     const cut = applyPatchByTarget(source, target, cutoutSrcOp);
     const inserted = insertBeforeTarget(cut, target, `<audio ${formatAttrs(attrs)}></audio>`);
     audioInserted = inserted !== cut;