@hyperframes/studio 0.8.106 → 0.8.108

package/src/components/editor/gsapAnimatesProperty.ts

@@ -1,3 +1,6 @@
+export const gsapRendersTransform = (el: Element) =>
+  !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
+
 /**
  * Checks whether GSAP actively animates one or more CSS/GSAP properties on
  * the given element by inspecting all registered `__timelines`.

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

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 import { describe, expect, it, vi } from "vitest";
 import { Window } from "happy-dom";
 import {
@@ -285,7 +286,7 @@ describe("studio manual edits", () => {
     expect(set).not.toHaveBeenCalled();
     expect(tickerTick).not.toHaveBeenCalled();
 
-    beginStudioManualEditGesture(card);
+    beginStudioManualEditGesture(card, "move");
     applyStudioPathOffsetDraft(card, { x: 35, y: -6 });
 
     expect(readStudioPathOffset(card)).toEqual({ x: 35, y: -6 });
@@ -395,8 +396,8 @@ describe("studio manual edits", () => {
     const card = document.getElementById("card") as HTMLElement;
 
     applyStudioPathOffset(card, { x: 40, y: 24 });
-    const firstToken = beginStudioManualEditGesture(card);
-    const secondToken = beginStudioManualEditGesture(card);
+    const firstToken = beginStudioManualEditGesture(card, "move");
+    const secondToken = beginStudioManualEditGesture(card, "move");
     endStudioManualEditGesture(card, firstToken);
 
     // Gesture still active — offset should remain

package/src/components/editor/manualEditsDom.ts

@@ -35,13 +35,26 @@ import {
 import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 import { roundTo3, roundToLayoutPx } from "../../utils/rounding";
+import { BOX_SIZE_STYLE_PROPS } from "./manualEditsDomPatches";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
 let studioManualEditGestureId = 0;
 
-export function beginStudioManualEditGesture(element: HTMLElement): string {
+export type StudioGestureDraws = "move" | "resize" | "rotate" | "edit";
+const MOVE_DRAWS = ["translate", STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP];
+const GESTURE_DRAWS: Record<StudioGestureDraws, readonly string[]> = {
+  move: MOVE_DRAWS,
+  resize: [...MOVE_DRAWS, STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP, ...BOX_SIZE_STYLE_PROPS],
+  rotate: ["rotate", "transform", "transform-origin", "display", STUDIO_ROTATION_PROP],
+  edit: [],
+};
+
+export function beginStudioManualEditGesture(
+  element: HTMLElement,
+  draws: StudioGestureDraws,
+): string {
   studioManualEditGestureId += 1;
-  const token = `gesture-${studioManualEditGestureId}`;
+  const token = `gesture-${studioManualEditGestureId}:${draws}`;
   element.setAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR, token);
   return token;
 }
@@ -78,10 +91,20 @@ export function studioManualEditSavesIn(doc: Document): number {
   return gestureSaves.get(doc) ?? 0;
 }
 
-/** A gesture's save in `element`'s document: a reload requested before it shows the file before it. */
-export function noteStudioManualEditSave(element: HTMLElement): void {
+/** Runs a gesture's save, counted as it starts and as it settles: a reload requested before shows the old file. */
+export function countStudioManualEditSave<R>(element: HTMLElement, save: () => R): R {
   const doc = element.ownerDocument;
-  gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+  const count = () => void gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+  count();
+  const result = save();
+  void Promise.resolve(result).then(count, count);
+  return result;
+}
+
+export function studioGestureDraws(element: Element): readonly string[] | null {
+  const token = element.getAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
+  if (token === null) return null;
+  return GESTURE_DRAWS[token.split(":")[1] as StudioGestureDraws] ?? [];
 }
 
 function isStudioManualEditGestureActive(element: HTMLElement): boolean {

package/src/components/editor/manualEditsDomPatches.ts

@@ -1,4 +1,5 @@
 import type { PatchOperation } from "../../utils/sourcePatcher";
+import { gsapRendersTransform } from "./gsapAnimatesProperty";
 import {
   STUDIO_OFFSET_X_PROP,
   STUDIO_OFFSET_Y_PROP,
@@ -127,7 +128,10 @@ const BOX_SIZE_ORIG_ATTRS: ReadonlyArray<[string, string]> = [
 export function buildBoxSizePatches(element: HTMLElement): PatchOperation[] {
   const ops: PatchOperation[] = [];
   collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
-  collectInlineStyleOps(element, BOX_SIZE_STYLE_PROPS, ops);
+  const withoutGsapScaleMask = gsapRendersTransform(element)
+    ? BOX_SIZE_STYLE_PROPS.filter((prop) => prop !== "scale")
+    : BOX_SIZE_STYLE_PROPS;
+  collectInlineStyleOps(element, withoutGsapScaleMask, ops);
   ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
   collectAttributeOps(
     element,

package/src/components/editor/manualOffsetDrag.ts

@@ -13,6 +13,7 @@ import {
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
 import { gsapWritesBox, gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, UNREADABLE_TRANSLATE, writeTranslatePx } from "./plainTranslate";
+import type { StudioEditRevert } from "../../utils/studioPendingEdits";
 
 interface OffsetDragGsap {
   set: (el: Element, vars: Record<string, number | string>) => void;
@@ -356,7 +357,10 @@ export function createManualOffsetDragMember(input: {
   }
 
   const initialPathOffset = captureStudioPathOffset(input.element);
-  const gestureToken = beginStudioManualEditGesture(input.element);
+  const gestureToken = beginStudioManualEditGesture(
+    input.element,
+    input.gesture === "resize" ? "resize" : "move",
+  );
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset, {
     scaleX: input.rect.editScaleX,
     scaleY: input.rect.editScaleY,
@@ -507,6 +511,16 @@ function restoreManualOffsetDragMember(member: ManualOffsetDragMember): void {
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
 
+/** Undo's live revert of a move: its members at gesture start. Null off the plain route, which GSAP draws. */
+export function manualOffsetMoveRevert(members: ManualOffsetDragMember[]): StudioEditRevert | null {
+  if (!members.every((member) => member.plainTranslate)) return null;
+  return () => {
+    const shown = members.map((member) => captureStudioPathOffset(member.element));
+    for (const member of members) restoreStudioPathOffset(member.element, member.initialPathOffset);
+    return () => members.forEach((member, i) => restoreStudioPathOffset(member.element, shown[i]!));
+  };
+}
+
 /** Roll back a FAILED drag to the exact gesture-start state. */
 export function restoreManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {

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

@@ -0,0 +1,271 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import { applyPatchByTarget } from "../../utils/sourcePatcher";
+import {
+  buildKeepSoundCutoutEdit,
+  cutoutOps,
+  hasAudioToggleOps,
+  mintLinkId,
+  mutedToggleOps,
+} from "./mediaAudioEdits";
+
+const attr = (property: string, value: string | null) => ({
+  type: "attribute" as const,
+  property,
+  value,
+});
+const html = (property: string, value: string | null) => ({
+  type: "html-attribute" as const,
+  property,
+  value,
+});
+
+describe("mutedToggleOps", () => {
+  it("mutes a video and removes has-audio instead of writing an empty marker", () => {
+    expect(mutedToggleOps({ isVideo: true, nextMuted: true, probedHasAudio: null })).toEqual([
+      html("muted", "true"),
+      attr("has-audio", null),
+    ]);
+  });
+
+  it("unmutes a video the probe hears as audible", () => {
+    expect(mutedToggleOps({ isVideo: true, nextMuted: false, probedHasAudio: true })).toEqual([
+      html("muted", null),
+      attr("has-audio", "true"),
+    ]);
+  });
+
+  it("unmutes a silent-probe video with an explicit has-audio=false", () => {
+    expect(mutedToggleOps({ isVideo: true, nextMuted: false, probedHasAudio: false })).toEqual([
+      html("muted", null),
+      attr("has-audio", "false"),
+    ]);
+  });
+
+  it("leaves has-audio absent when the probe fails", () => {
+    expect(mutedToggleOps({ isVideo: true, nextMuted: false, probedHasAudio: null })).toEqual([
+      html("muted", null),
+      attr("has-audio", null),
+    ]);
+  });
+
+  it("toggles only muted on an audio element", () => {
+    expect(mutedToggleOps({ isVideo: false, nextMuted: true, probedHasAudio: null })).toEqual([
+      html("muted", "true"),
+    ]);
+    expect(mutedToggleOps({ isVideo: false, nextMuted: false, probedHasAudio: null })).toEqual([
+      html("muted", null),
+    ]);
+  });
+});
+
+describe("hasAudioToggleOps", () => {
+  it("turns sound on by stamping has-audio and clearing muted", () => {
+    expect(hasAudioToggleOps(true)).toEqual([attr("has-audio", "true"), html("muted", null)]);
+  });
+
+  it("turns sound off by removing has-audio rather than writing an empty value", () => {
+    expect(hasAudioToggleOps(false)).toEqual([attr("has-audio", null), html("muted", "true")]);
+  });
+});
+
+describe("cutoutOps", () => {
+  it("swaps the src of an image and nothing else", () => {
+    expect(cutoutOps({ isVideo: false, cutoutSrc: "assets/cut.png" })).toEqual([
+      html("src", "assets/cut.png"),
+    ]);
+  });
+
+  it("swaps a silent video's src and keeps it muted without a has-audio marker", () => {
+    expect(cutoutOps({ isVideo: true, cutoutSrc: "assets/cut.webm" })).toEqual([
+      html("src", "assets/cut.webm"),
+      html("muted", "true"),
+      attr("has-audio", null),
+    ]);
+  });
+});
+
+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");
+  });
+});
+
+function makeVideo(attrs: Record<string, string>): HTMLVideoElement {
+  const doc = document.implementation.createHTMLDocument("t");
+  const video = doc.createElement("video");
+  for (const [name, value] of Object.entries(attrs)) video.setAttribute(name, value);
+  doc.body.append(video);
+  return video;
+}
+
+function applyEdit(source: string, edit: ReturnType<typeof buildKeepSoundCutoutEdit>): string {
+  const target = { id: "clip" };
+  const patched = edit.ops.reduce((acc, op) => applyPatchByTarget(acc, target, op), source);
+  return edit.prepareContent(patched);
+}
+
+function parse(source: string): Document {
+  return new DOMParser().parseFromString(source, "text/html");
+}
+
+describe("buildKeepSoundCutoutEdit", () => {
+  const automation = JSON.stringify({
+    version: 1,
+    lanes: [
+      { target: "volume", points: [{ t: 0, v: 1 }] },
+      { target: "rate", points: [{ t: 0, v: 2 }] },
+    ],
+  });
+
+  const source = [
+    '<div data-composition-id="main" data-duration="10">',
+    '  <video id="clip" class="clip" src="assets/talk.mp4" data-start="1" data-duration="4" data-media-start="2" data-track-index="0" data-has-audio="true" data-volume="0.5" data-fade-in="0.3" data-audio-group="voiceover"></video>',
+    '  <audio id="music" class="clip" src="assets/bgm.mp3" data-start="0" data-duration="10" data-track-index="1"></audio>',
+    "</div>",
+  ].join("\n");
+
+  const liveVideo = () =>
+    makeVideo({
+      id: "clip",
+      src: "assets/talk.mp4",
+      "data-has-audio": "true",
+      "data-volume": "0.5",
+      "data-fade-in": "0.3",
+      "data-audio-group": "voiceover",
+      "data-automation": automation,
+    });
+
+  it("mutes the video onto the cutout and moves its sound to a linked sibling audio", () => {
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/talk-cutout.webm",
+    });
+    const doc = parse(applyEdit(source, edit));
+    const video = doc.getElementById("clip");
+    const audio = doc.getElementById("clip-audio");
+    if (!video || !audio) throw new Error("expected both clips");
+
+    expect(video.getAttribute("src")).toBe("assets/talk-cutout.webm");
+    expect(video.hasAttribute("muted")).toBe(true);
+    expect(video.hasAttribute("data-has-audio")).toBe(false);
+    expect(video.hasAttribute("data-volume")).toBe(false);
+    expect(video.hasAttribute("data-fade-in")).toBe(false);
+    expect(video.hasAttribute("data-audio-group")).toBe(false);
+    expect(JSON.parse(video.getAttribute("data-automation") ?? "").lanes).toEqual([
+      { target: "rate", points: [{ t: 0, v: 2 }] },
+    ]);
+
+    expect(audio.tagName).toBe("AUDIO");
+    expect(audio.getAttribute("src")).toBe("assets/talk.mp4");
+    expect(audio.getAttribute("data-start")).toBe("1");
+    expect(audio.getAttribute("data-duration")).toBe("4");
+    expect(audio.getAttribute("data-media-start")).toBe("2");
+    expect(audio.hasAttribute("data-playback-rate")).toBe(false);
+    expect(audio.getAttribute("data-track-index")).toBe("2");
+    expect(audio.getAttribute("data-volume")).toBe("0.5");
+    expect(audio.getAttribute("data-fade-in")).toBe("0.3");
+    expect(audio.getAttribute("data-audio-group")).toBe("voiceover");
+    expect(JSON.parse(audio.getAttribute("data-automation") ?? "").lanes).toEqual([
+      { target: "volume", points: [{ t: 0, v: 1 }] },
+      { 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(audio.parentElement).toBe(video.parentElement);
+  });
+
+  it("drops the video's automation attribute when it held no rate lane", () => {
+    const video = makeVideo({
+      id: "clip",
+      src: "assets/talk.mp4",
+      "data-automation": JSON.stringify({
+        version: 1,
+        lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
+      }),
+    });
+    const edit = buildKeepSoundCutoutEdit({
+      video,
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    expect(edit.ops).toContainEqual(attr("automation", null));
+  });
+
+  it("suffixes the audio id when <video-id>-audio is taken", () => {
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const taken = source.replace('id="music"', 'id="clip-audio"');
+    const doc = parse(applyEdit(taken, edit));
+    expect(doc.getElementById("clip-audio-2")?.getAttribute("src")).toBe("assets/talk.mp4");
+  });
+
+  it("reads the authored src from the source, not the live element", () => {
+    const sub = source.replace('src="assets/talk.mp4"', 'src="../assets/a.mp4"');
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(sub, edit));
+    expect(doc.getElementById("clip-audio")?.getAttribute("src")).toBe("../assets/a.mp4");
+    expect(doc.getElementById("clip")?.getAttribute("src")).toBe("assets/cut.webm");
+  });
+
+  it("takes the first <source> child when the video has no src attribute", () => {
+    const withSource = source.replace(
+      /<video id="clip"([^>]*?) src="assets\/talk.mp4"([^>]*)><\/video>/,
+      '<video id="clip"$1$2><source src="assets/s.mp4" type="video/mp4"></video>',
+    );
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(withSource, edit));
+    expect(doc.getElementById("clip-audio")?.getAttribute("src")).toBe("assets/s.mp4");
+  });
+
+  it("reports when the audio insert did not land", () => {
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "missing" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    edit.prepareContent(source);
+    expect(edit.audioInserted()).toBe(false);
+    const ok = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    ok.prepareContent(source);
+    expect(ok.audioInserted()).toBe(true);
+  });
+
+  it("copies loop onto the linked audio", () => {
+    const video = makeVideo({ id: "clip", src: "assets/talk.mp4", loop: "" });
+    const edit = buildKeepSoundCutoutEdit({
+      video,
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(source, edit));
+    expect(doc.getElementById("clip-audio")?.hasAttribute("loop")).toBe(true);
+  });
+});