@hyperframes/studio 0.8.106 → 0.8.107

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

@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
 import { MediaSection } from "./propertyPanelMediaSection";
 import type { DomEditSelection } from "./domEditing";
+import type { PatchOperation } from "../../utils/sourcePatcher";
 import { formatTimingValue } from "./propertyPanelHelpers";
 import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 
@@ -62,6 +63,7 @@ function renderSection(overrides: Partial<DomEditSelection> = {}) {
         onSetStyle={vi.fn()}
         onSetAttribute={vi.fn()}
         onSetHtmlAttribute={vi.fn()}
+        onSetAttributeBatch={vi.fn()}
       />,
     );
   });
@@ -102,6 +104,7 @@ describe("FlatMediaSection — cutout", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={onSetHtmlAttribute}
+          onSetAttributeBatch={vi.fn()}
           onRemoveBackground={onRemoveBackground}
         />,
       );
@@ -149,6 +152,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -174,6 +178,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -208,6 +213,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
           volumeAutomated
           onCommitVolumeAt={onCommitVolumeAt}
         />,
@@ -242,6 +248,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -273,6 +280,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -308,6 +316,7 @@ describe("FlatMediaSection — loop/muted/has-audio", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={onSetHtmlAttribute}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -323,92 +332,6 @@ describe("FlatMediaSection — loop/muted/has-audio", () => {
     expect(hasAudioToggle?.getAttribute("aria-checked")).toBe("true");
     act(() => root.unmount());
   });
-
-  it("toggles muted via onSetHtmlAttribute", () => {
-    const onSetHtmlAttribute = vi.fn();
-    const onSetAttribute = vi.fn();
-    const element = makeVideoElement();
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(
-        <FlatMediaSection
-          projectDir={null}
-          element={element}
-          styles={{}}
-          onSetStyle={vi.fn()}
-          onSetAttribute={onSetAttribute}
-          onSetHtmlAttribute={onSetHtmlAttribute}
-        />,
-      );
-    });
-    const mutedToggle = host.querySelector<HTMLButtonElement>(
-      '[data-flat-toggle="true"][aria-label="Muted"]',
-    );
-    expect(mutedToggle?.getAttribute("aria-checked")).toBe("false");
-    act(() => mutedToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onSetHtmlAttribute).toHaveBeenCalledWith("muted", "true");
-    act(() => root.unmount());
-  });
-
-  it("enables has-audio-track and clears muted on click", () => {
-    const onSetHtmlAttribute = vi.fn();
-    const onSetAttribute = vi.fn();
-    const element = makeVideoElement();
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(
-        <FlatMediaSection
-          projectDir={null}
-          element={element}
-          styles={{}}
-          onSetStyle={vi.fn()}
-          onSetAttribute={onSetAttribute}
-          onSetHtmlAttribute={onSetHtmlAttribute}
-        />,
-      );
-    });
-    const hasAudioToggle = host.querySelector<HTMLButtonElement>(
-      '[data-flat-toggle="true"][aria-label="Has audio track"]',
-    );
-    expect(hasAudioToggle?.getAttribute("aria-checked")).toBe("false");
-    act(() => hasAudioToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onSetAttribute).toHaveBeenCalledWith("has-audio", "true");
-    expect(onSetHtmlAttribute).toHaveBeenCalledWith("muted", null);
-    act(() => root.unmount());
-  });
-
-  it("disables has-audio-track and sets muted on click", () => {
-    const onSetHtmlAttribute = vi.fn();
-    const onSetAttribute = vi.fn();
-    const element = makeVideoElement({ dataAttributes: { "has-audio": "true" } });
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(
-        <FlatMediaSection
-          projectDir={null}
-          element={element}
-          styles={{}}
-          onSetStyle={vi.fn()}
-          onSetAttribute={onSetAttribute}
-          onSetHtmlAttribute={onSetHtmlAttribute}
-        />,
-      );
-    });
-    const hasAudioToggle = host.querySelector<HTMLButtonElement>(
-      '[data-flat-toggle="true"][aria-label="Has audio track"]',
-    );
-    expect(hasAudioToggle?.getAttribute("aria-checked")).toBe("true");
-    act(() => hasAudioToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onSetAttribute).toHaveBeenCalledWith("has-audio", "");
-    expect(onSetHtmlAttribute).toHaveBeenCalledWith("muted", "true");
-    act(() => root.unmount());
-  });
 });
 
 describe("FlatMediaSection — fit/position", () => {
@@ -428,6 +351,7 @@ describe("FlatMediaSection — fit/position", () => {
             onSetStyle={onSetStyle}
             onSetAttribute={vi.fn()}
             onSetHtmlAttribute={vi.fn()}
+            onSetAttributeBatch={vi.fn()}
           />,
         );
       });
@@ -461,6 +385,7 @@ describe("FlatMediaSection — fit/position", () => {
           onSetStyle={onSetStyle}
           onSetAttribute={vi.fn()}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -504,6 +429,7 @@ function renderWithRate(element: DomEditSelection, onSetAttribute = vi.fn()) {
         onSetStyle={vi.fn()}
         onSetAttribute={onSetAttribute}
         onSetHtmlAttribute={vi.fn()}
+        onSetAttributeBatch={vi.fn()}
         rate={{
           automated: false,
           automatedValue: undefined,
@@ -543,7 +469,9 @@ describe("FlatMediaSection — audio clips", () => {
     );
     act(() => audio.root.unmount());
 
-    const silentVideo = renderWithRate(makeVideoElement({ dataAttributes: { duration: "10" } }));
+    const mutedSelection = makeVideoElement({ dataAttributes: { duration: "10" } });
+    mutedSelection.element.setAttribute("muted", "");
+    const silentVideo = renderWithRate(mutedSelection);
     expect(labelsOf(silentVideo.host)).not.toContain("Fade in");
     act(() => silentVideo.root.unmount());
 
@@ -659,6 +587,7 @@ describe("FlatMediaSection — audio clips", () => {
           onSetStyle={vi.fn()}
           onSetAttribute={onSetAttribute}
           onSetHtmlAttribute={vi.fn()}
+          onSetAttributeBatch={vi.fn()}
         />,
       );
     });
@@ -708,3 +637,273 @@ function typeInto(input: HTMLInputElement, value: string) {
   setter?.call(input, value);
   input.dispatchEvent(new Event("input", { bubbles: true }));
 }
+
+type PanelKind = "flat" | "design";
+
+type BatchOptions = { label: string; prepareContent?: (html: string) => string };
+
+function makeHandlers() {
+  return {
+    onSetAttribute: vi.fn(),
+    onSetHtmlAttribute: vi.fn(),
+    onSetAttributeBatch: vi.fn<
+      (
+        selection: DomEditSelection,
+        ops: PatchOperation[],
+        options: BatchOptions,
+      ) => Promise<boolean>
+    >(async () => true),
+  };
+}
+
+function mountPanel(
+  kind: PanelKind,
+  element: DomEditSelection,
+  handlers: ReturnType<typeof makeHandlers> & {
+    onRemoveBackground?: () => Promise<{ outputPath: string }>;
+  },
+) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const Panel = kind === "flat" ? FlatMediaSection : MediaSection;
+  act(() => {
+    root.render(
+      <Panel
+        projectId="p1"
+        projectDir={null}
+        element={element}
+        styles={{}}
+        onSetStyle={vi.fn()}
+        {...handlers}
+      />,
+    );
+  });
+  return { host, root };
+}
+
+async function flush() {
+  for (let i = 0; i < 8; i++) await Promise.resolve();
+}
+
+async function clickToggle(kind: PanelKind, host: HTMLElement, label: string, option: string) {
+  if (kind === "flat") {
+    const toggle = host.querySelector<HTMLButtonElement>(
+      `[data-flat-toggle="true"][aria-label="${label}"]`,
+    );
+    if (!toggle) throw new Error(`expected ${label} toggle`);
+    await act(async () => {
+      toggle.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await flush();
+    });
+    return;
+  }
+  const row = Array.from(host.querySelectorAll("span")).find(
+    (n) => n.textContent === label,
+  )?.parentElement;
+  const button = Array.from(row?.querySelectorAll("button") ?? []).find(
+    (b) => b.textContent === option,
+  );
+  if (!button) throw new Error(`expected ${label} segmented button`);
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await flush();
+  });
+}
+
+function stubHasAudioProbe(hasAudio: boolean | "fail") {
+  const fetchMock = vi.fn(async (_input: Parameters<typeof fetch>[0]) =>
+    hasAudio === "fail"
+      ? new Response("nope", { status: 500 })
+      : new Response(JSON.stringify({ metadata: { hasAudio } })),
+  );
+  vi.stubGlobal("fetch", fetchMock);
+  return fetchMock;
+}
+
+const htmlOp = (property: string, value: string | null) => ({
+  type: "html-attribute",
+  property,
+  value,
+});
+const dataOp = (property: string, value: string | null) => ({
+  type: "attribute",
+  property,
+  value,
+});
+
+describe.each<PanelKind>(["flat", "design"])("%s panel — Muted is one atomic edit", (kind) => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("muting an audible video sets muted and removes has-audio in ONE write", async () => {
+    const handlers = makeHandlers();
+    const element = makeVideoElement({ dataAttributes: { "has-audio": "true" } });
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "On");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", "true"),
+      dataOp("has-audio", null),
+    ]);
+    expect(handlers.onSetAttribute).not.toHaveBeenCalled();
+    expect(handlers.onSetHtmlAttribute).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("unmuting a video the probe hears stamps has-audio=true in the same write", async () => {
+    const probe = stubHasAudioProbe(true);
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "Off");
+    expect(String(probe.mock.calls[0]?.[0])).toContain("assets%2Fintro-loop.mp4");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", null),
+      dataOp("has-audio", "true"),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("unmuting a silent-probe video writes has-audio=false", async () => {
+    stubHasAudioProbe(false);
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "Off");
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", null),
+      dataOp("has-audio", "false"),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("unmuting when the probe fails leaves has-audio absent", async () => {
+    stubHasAudioProbe("fail");
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Muted", "Off");
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      htmlOp("muted", null),
+      dataOp("has-audio", null),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("audio Muted toggles only the muted attribute", async () => {
+    const handlers = makeHandlers();
+    const { host, root } = mountPanel(kind, makeAudioElement({}), handlers);
+    await clickToggle(kind, host, "Muted", "On");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([htmlOp("muted", "true")]);
+    act(() => root.unmount());
+  });
+
+  it("Has audio track No removes has-audio and mutes in ONE write", async () => {
+    const handlers = makeHandlers();
+    const element = makeVideoElement({ dataAttributes: { "has-audio": "true" } });
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Has audio track", "No");
+    expect(handlers.onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      dataOp("has-audio", null),
+      htmlOp("muted", "true"),
+    ]);
+    act(() => root.unmount());
+  });
+
+  it("Has audio track Yes stamps has-audio and clears muted in ONE write", async () => {
+    const handlers = makeHandlers();
+    const element = makeVideoElement();
+    element.element.setAttribute("muted", "");
+    const { host, root } = mountPanel(kind, element, handlers);
+    await clickToggle(kind, host, "Has audio track", "Yes");
+    expect(handlers.onSetAttributeBatch.mock.calls[0]?.[1]).toEqual([
+      dataOp("has-audio", "true"),
+      htmlOp("muted", null),
+    ]);
+    act(() => root.unmount());
+  });
+});
+
+describe.each<PanelKind>(["flat", "design"])("%s panel — cutout keeps the sound", (kind) => {
+  async function runCutout(element: DomEditSelection) {
+    const handlers = makeHandlers();
+    const onRemoveBackground = vi.fn().mockResolvedValue({ outputPath: "assets/cut.webm" });
+    const confirm = vi.spyOn(window, "confirm");
+    const { host, root } = mountPanel(kind, element, { ...handlers, onRemoveBackground });
+    const button =
+      kind === "flat"
+        ? host.querySelector<HTMLButtonElement>('[data-flat-media-remove-bg="true"]')
+        : Array.from(host.querySelectorAll("button")).find((b) =>
+            /remove bg/i.test(b.textContent ?? ""),
+          );
+    if (!button) throw new Error("expected remove background button");
+    await act(async () => {
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await flush();
+    });
+    const text = host.textContent ?? "";
+    act(() => root.unmount());
+    return { ...handlers, confirm, text };
+  }
+
+  afterEach(() => vi.restoreAllMocks());
+
+  it("audible video: one write mutes onto the cutout and inserts a linked sibling audio", async () => {
+    const element = makeVideoElement({
+      dataAttributes: { "has-audio": "true", volume: "0.5" },
+    });
+    element.element.setAttribute("id", "s1-bg");
+    element.element.setAttribute("data-has-audio", "true");
+    element.element.setAttribute("data-volume", "0.5");
+    const { onSetAttributeBatch, onSetAttribute, onSetHtmlAttribute, confirm, text } =
+      await runCutout(element);
+
+    expect(confirm).not.toHaveBeenCalled();
+    expect(onSetAttribute).not.toHaveBeenCalled();
+    expect(onSetHtmlAttribute).not.toHaveBeenCalled();
+    expect(onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    const [selection, ops, options] = onSetAttributeBatch.mock.calls[0] ?? [];
+    expect(selection).toBe(element);
+    expect(ops).toEqual([
+      htmlOp("src", "assets/cut.webm"),
+      htmlOp("muted", "true"),
+      dataOp("has-audio", null),
+      dataOp("volume", null),
+      dataOp("link", "link"),
+    ]);
+    const source =
+      '<div data-composition-id="main"><video id="s1-bg" src="assets/cut.webm" muted data-start="2" data-duration="3" data-track-index="0" data-link="link"></video></div>';
+    const prepared = options?.prepareContent?.(source) ?? "";
+    const audio = new DOMParser()
+      .parseFromString(prepared, "text/html")
+      .getElementById("s1-bg-audio");
+    expect(audio?.getAttribute("src")).toBe("assets/intro-loop.mp4");
+    expect(audio?.getAttribute("data-start")).toBe("2");
+    expect(audio?.getAttribute("data-duration")).toBe("3");
+    expect(audio?.getAttribute("data-link")).toBe("link");
+    expect(audio?.getAttribute("data-volume")).toBe("0.5");
+    expect(text).toContain("Background removed. Sound kept on a linked audio track.");
+  });
+
+  it("silent video: one write swaps the src and inserts no audio", async () => {
+    const silent = makeVideoElement();
+    silent.element.setAttribute("muted", "");
+    const { onSetAttributeBatch, confirm, text } = await runCutout(silent);
+    expect(confirm).not.toHaveBeenCalled();
+    expect(onSetAttributeBatch).toHaveBeenCalledTimes(1);
+    const [, ops, options] = onSetAttributeBatch.mock.calls[0] ?? [];
+    expect(ops).toEqual([
+      htmlOp("src", "assets/cut.webm"),
+      htmlOp("muted", "true"),
+      dataOp("has-audio", null),
+    ]);
+    expect(options?.prepareContent).toBeUndefined();
+    expect(text).toContain("Applied cutout");
+  });
+});

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { isVideoAudible } from "../../player/lib/timelineElementHelpers";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { Check, ClipboardList } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
@@ -34,15 +35,19 @@ import {
   readFadeSeconds,
 } from "@hyperframes/core/audio-fade";
 import { parseGainInput, parseRateInput, parseSecondsInput } from "./audioInspectorInput";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
 export function FlatMediaSection({
+  projectId = null,
   projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onSetAttributeBatch,
   onRemoveBackground,
   volumeAutomated,
   onAutomateVolume,
@@ -51,12 +56,14 @@ export function FlatMediaSection({
   automatedVolumeValue,
   rate,
 }: {
+  projectId?: string | null;
   projectDir: string | null;
   element: DomEditSelection;
   styles: Record<string, string>;
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeBatch: CommitDomAttributeBatch;
   /** A volume lane in the timeline drives the level; the slider writes a keyframe instead. */
   volumeAutomated?: boolean;
   onAutomateVolume?: () => void;
@@ -104,7 +111,11 @@ export function FlatMediaSection({
   const fadeMax = clipDuration > 0 ? clipDuration : 10;
   const hasLoop = el.hasAttribute("loop");
   const hasMuted = el.hasAttribute("muted");
-  const hasAudio = element.dataAttributes["has-audio"] === "true";
+  const hasAudio = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: element.dataAttributes["has-audio"],
+    muted: el.hasAttribute("muted"),
+  });
   const objectFit = styles["object-fit"] || "contain";
   const objectPosition = styles["object-position"] || "center";
 
@@ -128,13 +139,7 @@ export function FlatMediaSection({
     setCreatePlate(false);
   }, [srcAttr]);
 
-  const applyCutoutResult = async (result: BackgroundRemovalResult) => {
-    await onSetHtmlAttribute("src", result.outputPath);
-    if (isVideo) {
-      await onSetAttribute("has-audio", "");
-      await onSetHtmlAttribute("muted", "true");
-    }
-  };
+  const mediaEdit = { element, projectId, projectSrc, commit: onSetAttributeBatch };
 
   const runBackgroundRemoval = async () => {
     if (!onRemoveBackground || !projectSrc || removeBusy) return;
@@ -147,8 +152,8 @@ export function FlatMediaSection({
         quality,
         onProgress: setRemoveProgress,
       });
-      await applyCutoutResult(result);
-      setRemoveProgress({ status: "complete", progress: 100, stage: "Applied cutout", ...result });
+      const stage = await commitCutout(mediaEdit, result.outputPath, hasAudio);
+      setRemoveProgress({ status: "complete", progress: 100, stage, ...result });
     } catch (error) {
       setRemoveProgress({
         status: "failed",
@@ -362,21 +367,13 @@ export function FlatMediaSection({
           <FlatToggle
             label="Muted"
             checked={hasMuted}
-            onChange={(next) => void onSetHtmlAttribute("muted", next ? "true" : null)}
+            onChange={(next) => void commitMutedToggle(mediaEdit, next)}
           />
           {isVideo && (
             <FlatToggle
               label="Has audio track"
               checked={hasAudio}
-              onChange={(next) => {
-                if (next) {
-                  void onSetAttribute("has-audio", "true");
-                  void onSetHtmlAttribute("muted", null);
-                } else {
-                  void onSetAttribute("has-audio", "");
-                  void onSetHtmlAttribute("muted", "true");
-                }
-              }}
+              onChange={(next) => void commitHasAudioToggle(mediaEdit, next)}
             />
           )}
         </>

package/src/components/editor/propertyPanelFlatProps.ts

@@ -19,6 +19,7 @@ export type PropertyPanelFlatProps = Pick<
   | "onSetAttributeQuiet"
   | "onApplyColorGradingScope"
   | "onSetHtmlAttribute"
+  | "onSetAttributeBatch"
   | "onRemoveBackground"
   | "onSetText"
   | "onSetTextFieldStyle"

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { isVideoAudible } from "../../player/lib/timelineElementHelpers";
 import { Check, ClipboardList, Film, Music, Scissors } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import {
@@ -22,23 +23,29 @@ import {
   audioGainToFaderPosition,
   audioGainToText,
 } from "@hyperframes/core/audio-gain";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
 export function MediaSection({
+  projectId = null,
   projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onSetAttributeBatch,
   onRemoveBackground,
 }: {
+  projectId?: string | null;
   projectDir: string | null;
   element: DomEditSelection;
   styles: Record<string, string>;
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeBatch: CommitDomAttributeBatch;
   onRemoveBackground?: (
     inputPath: string,
     options: {
@@ -62,7 +69,11 @@ export function MediaSection({
 
   const hasLoop = el.hasAttribute("loop");
   const hasMuted = el.hasAttribute("muted");
-  const hasAudio = element.dataAttributes["has-audio"] === "true";
+  const hasAudio = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: element.dataAttributes["has-audio"],
+    muted: el.hasAttribute("muted"),
+  });
 
   const playbackRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
 
@@ -96,13 +107,7 @@ export function MediaSection({
     setCreatePlate(false);
   }, [srcAttr]);
 
-  const applyCutoutResult = async (result: BackgroundRemovalResult) => {
-    await onSetHtmlAttribute("src", result.outputPath);
-    if (isVideo) {
-      await onSetAttribute("has-audio", "");
-      await onSetHtmlAttribute("muted", "true");
-    }
-  };
+  const mediaEdit = { element, projectId, projectSrc, commit: onSetAttributeBatch };
 
   const runBackgroundRemoval = async () => {
     if (!onRemoveBackground || !projectSrc || removeBusy) return;
@@ -115,13 +120,8 @@ export function MediaSection({
         quality,
         onProgress: setRemoveProgress,
       });
-      await applyCutoutResult(result);
-      setRemoveProgress({
-        status: "complete",
-        progress: 100,
-        stage: "Applied cutout",
-        ...result,
-      });
+      const stage = await commitCutout(mediaEdit, result.outputPath, hasAudio);
+      setRemoveProgress({ status: "complete", progress: 100, stage, ...result });
     } catch (error) {
       setRemoveProgress({
         status: "failed",
@@ -320,9 +320,7 @@ export function MediaSection({
                 <SegmentedControl
                   trackName="Muted"
                   value={hasMuted ? "on" : "off"}
-                  onChange={(next) => {
-                    void onSetHtmlAttribute("muted", next === "on" ? "true" : null);
-                  }}
+                  onChange={(next) => void commitMutedToggle(mediaEdit, next === "on")}
                   options={[
                     { label: "On", value: "on" },
                     { label: "Off", value: "off" },
@@ -337,15 +335,7 @@ export function MediaSection({
                 <SegmentedControl
                   trackName="Has audio track"
                   value={hasAudio ? "yes" : "no"}
-                  onChange={(next) => {
-                    if (next === "yes") {
-                      void onSetAttribute("has-audio", "true");
-                      void onSetHtmlAttribute("muted", null);
-                    } else {
-                      void onSetAttribute("has-audio", "");
-                      void onSetHtmlAttribute("muted", "true");
-                    }
-                  }}
+                  onChange={(next) => void commitHasAudioToggle(mediaEdit, next === "yes")}
                   options={[
                     { label: "Yes", value: "yes" },
                     { label: "No", value: "no" },