ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): add loop/muted/has-audio-track toggles to FlatMediaSection

Browse Source
This commit is contained in:
Vance Ingalls
2026-07-14 15:50:45 -07:00
parent ab263f25b4
commit 79fdff8701
2 changed files with 148 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/propertyPanelFlatMediaSection.test.tsx
+120
View File
@@ -244,3 +244,123 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
act(() => root.unmount());
});
});
describe("FlatMediaSection — loop/muted/has-audio", () => {
it("toggles loop via onSetHtmlAttribute and shows has-audio-track for video", () => {
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 loopToggle = host.querySelector<HTMLButtonElement>(
'[data-flat-toggle="true"][aria-label="Loop"]',
);
act(() => loopToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
expect(onSetHtmlAttribute).toHaveBeenCalledWith("loop", "true");
const hasAudioToggle = host.querySelector<HTMLButtonElement>(
'[data-flat-toggle="true"][aria-label="Has audio track"]',
);
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());
});
});
packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx
+28
View File
@@ -56,6 +56,9 @@ export function FlatMediaSection({
(el as HTMLMediaElement).duration ||
0;
const mediaStartMax = Math.max(30, Math.ceil(sourceDuration || mediaStart + 10));
const hasLoop = el.hasAttribute("loop");
const hasMuted = el.hasAttribute("muted");
const hasAudio = element.dataAttributes["has-audio"] === "true";
const srcAttr = el.getAttribute("src") ?? "";
const [copied, setCopied] = useState(false);
@@ -218,6 +221,31 @@ export function FlatMediaSection({
displayValue={formatTimingValue(mediaStart)}
onCommit={(next) => void onSetAttribute("media-start", (next / 100).toFixed(2))}
/>
<FlatToggle
label="Loop"
checked={hasLoop}
onChange={(next) => void onSetHtmlAttribute("loop", next ? "true" : null)}
/>
<FlatToggle
label="Muted"
checked={hasMuted}
onChange={(next) => void onSetHtmlAttribute("muted", next ? "true" : null)}
/>
{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");
}
}}
/>
)}
</>
)}
</div>