@hyperframes/studio 0.7.58 → 0.7.59

package/src/components/editor/propertyPanelFlatMaskInsetRows.tsx

@@ -0,0 +1,102 @@
+import {
+  buildInsetClipPathSides,
+  buildInsetClipPathValue,
+  formatNumericValue,
+  formatPxMetricValue,
+  getClipPathInsetPx,
+  inferClipPathPreset,
+  parseInsetClipPathSides,
+  parsePxMetricValue,
+  type ClipPathInsetSides,
+} from "./propertyPanelHelpers";
+import { FlatSlider } from "./propertyPanelFlatPrimitives";
+import { MetricField } from "./propertyPanelPrimitives";
+
+/* ------------------------------------------------------------------ */
+/*  Flat Mask inset — uniform slider + per-side fields                 */
+/*  (split out of propertyPanelFlatStyleSections.tsx to stay under the */
+/*  600-line file-size gate)                                           */
+/* ------------------------------------------------------------------ */
+
+export function FlatMaskInsetRows({
+  clipPathValue,
+  radiusValue,
+  disabled,
+  onSetStyle,
+}: {
+  clipPathValue: string;
+  radiusValue: number;
+  disabled: boolean;
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+}) {
+  const clipPathPreset = inferClipPathPreset(clipPathValue);
+  const parsedClipInsets = parseInsetClipPathSides(clipPathValue);
+  const clipInsetValue = getClipPathInsetPx(clipPathValue);
+  const clipInsetSides = parsedClipInsets ?? {
+    top: clipInsetValue,
+    right: clipInsetValue,
+    bottom: clipInsetValue,
+    left: clipInsetValue,
+    radius: radiusValue,
+  };
+  const showClipInsetSides = clipPathPreset === "inset" || parsedClipInsets != null;
+
+  const commitClipInsetSide = (side: keyof ClipPathInsetSides, nextValue: string) => {
+    const next = parsePxMetricValue(nextValue);
+    if (next == null) return;
+    const sides: ClipPathInsetSides = {
+      top: clipInsetSides.top,
+      right: clipInsetSides.right,
+      bottom: clipInsetSides.bottom,
+      left: clipInsetSides.left,
+    };
+    sides[side] = next;
+    void onSetStyle("clip-path", buildInsetClipPathSides(sides, clipInsetSides.radius));
+  };
+
+  return (
+    <>
+      <FlatSlider
+        label="Mask inset"
+        value={clipInsetValue}
+        min={0}
+        max={Math.max(120, Math.ceil(clipInsetValue))}
+        step={1}
+        tier={clipInsetValue > 0 ? "explicitCustom" : "default"}
+        displayValue={`${formatNumericValue(clipInsetValue)}px`}
+        disabled={disabled}
+        onCommit={(next) =>
+          void onSetStyle("clip-path", buildInsetClipPathValue(next, radiusValue))
+        }
+      />
+      {showClipInsetSides && (
+        <div className="grid grid-cols-4 gap-2">
+          <MetricField
+            label="T"
+            value={formatPxMetricValue(clipInsetSides.top)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("top", next)}
+          />
+          <MetricField
+            label="R"
+            value={formatPxMetricValue(clipInsetSides.right)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("right", next)}
+          />
+          <MetricField
+            label="B"
+            value={formatPxMetricValue(clipInsetSides.bottom)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("bottom", next)}
+          />
+          <MetricField
+            label="L"
+            value={formatPxMetricValue(clipInsetSides.left)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("left", next)}
+          />
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,436 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
+import type { DomEditSelection } from "./domEditing";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function makeVideoElement(overrides: Partial<DomEditSelection> = {}): DomEditSelection {
+  const el = document.createElement("video");
+  el.setAttribute("src", "assets/intro-loop.mp4");
+  return {
+    element: el,
+    id: "s1-bg",
+    selector: "#s1-bg",
+    label: "S1 Background",
+    tagName: "video",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 1920, height: 1080 },
+    textContent: "",
+    dataAttributes: {},
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+    ...overrides,
+  } as DomEditSelection;
+}
+
+function renderSection(overrides: Partial<DomEditSelection> = {}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const element = makeVideoElement(overrides);
+  act(() => {
+    root.render(
+      <FlatMediaSection
+        projectDir={null}
+        element={element}
+        styles={{}}
+        onSetStyle={vi.fn()}
+        onSetAttribute={vi.fn()}
+        onSetHtmlAttribute={vi.fn()}
+      />,
+    );
+  });
+  return { host, root };
+}
+
+describe("FlatMediaSection — source row", () => {
+  it("renders the source path and copies it to clipboard on click", () => {
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText: vi.fn().mockResolvedValue(undefined) },
+      configurable: true,
+    });
+    const { host, root } = renderSection();
+    expect(host.textContent).toContain("assets/intro-loop.mp4");
+    const copyButton = host.querySelector<HTMLButtonElement>('[data-flat-media-copy="true"]');
+    expect(copyButton).not.toBeNull();
+    act(() => copyButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith("assets/intro-loop.mp4");
+    act(() => root.unmount());
+  });
+});
+
+describe("FlatMediaSection — cutout", () => {
+  it("shows the WebM label for video and fires background removal on click", async () => {
+    const onRemoveBackground = vi.fn().mockResolvedValue({ outputPath: "assets/intro-loop.webm" });
+    const onSetHtmlAttribute = vi.fn();
+    const onSetAttribute = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const element = makeVideoElement();
+    act(() => {
+      root.render(
+        <FlatMediaSection
+          projectDir={null}
+          element={element}
+          styles={{}}
+          onSetStyle={vi.fn()}
+          onSetAttribute={onSetAttribute}
+          onSetHtmlAttribute={onSetHtmlAttribute}
+          onRemoveBackground={onRemoveBackground}
+        />,
+      );
+    });
+    expect(host.textContent).toContain("transparent WebM");
+    const removeBgButton = host.querySelector<HTMLButtonElement>(
+      '[data-flat-media-remove-bg="true"]',
+    );
+    expect(removeBgButton).not.toBeNull();
+    await act(async () => {
+      removeBgButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(onRemoveBackground).toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("toggles BG plate via FlatToggle", () => {
+    const { host, root } = renderSection();
+    const plateToggle = host.querySelector<HTMLButtonElement>(
+      '[data-flat-toggle="true"][aria-label="BG plate"]',
+    );
+    expect(plateToggle).not.toBeNull();
+    expect(plateToggle?.getAttribute("aria-checked")).toBe("false");
+    act(() => plateToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(plateToggle?.getAttribute("aria-checked")).toBe("true");
+    act(() => root.unmount());
+  });
+});
+
+describe("FlatMediaSection — volume/rate/media-start", () => {
+  it("renders volume at its stored percentage and commits a new value on drag", () => {
+    const onSetAttribute = vi.fn();
+    const element = makeVideoElement({ dataAttributes: { volume: "0.5" } });
+    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={vi.fn()}
+        />,
+      );
+    });
+    expect(host.textContent).toContain("50%");
+    act(() => root.unmount());
+  });
+
+  it("commits a new volume value on slider track pointerdown", () => {
+    const onSetAttribute = vi.fn();
+    const element = makeVideoElement({ dataAttributes: { volume: "0.2" } });
+    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={vi.fn()}
+        />,
+      );
+    });
+    const volumeTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[0];
+    Object.defineProperty(volumeTrack, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
+    });
+    act(() => {
+      volumeTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 50 }));
+      volumeTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 50 }));
+    });
+    // starting volume 0.2 (draft=20); min=0, max=100, ratio=0.5 -> raw=50 -> commit(50) -> 50/100=0.5 -> "0.5"
+    expect(onSetAttribute).toHaveBeenCalledWith("volume", "0.5");
+    act(() => root.unmount());
+  });
+
+  it("commits a new rate value on slider track pointerdown", () => {
+    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={vi.fn()}
+        />,
+      );
+    });
+    const rateTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[1];
+    Object.defineProperty(rateTrack, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
+    });
+    act(() => {
+      rateTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 100 }));
+      rateTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 100 }));
+    });
+    // min=25, max=300, ratio=1.0 -> raw=300 -> commit(300) -> 300/100=3 -> "3"
+    expect(onSetAttribute).toHaveBeenCalledWith("playback-rate", "3");
+    act(() => root.unmount());
+  });
+
+  it("commits a new media-start value on slider track pointerdown", () => {
+    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={vi.fn()}
+        />,
+      );
+    });
+    const mediaStartTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[2];
+    Object.defineProperty(mediaStartTrack, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
+    });
+    act(() => {
+      mediaStartTrack.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 100 }));
+      mediaStartTrack.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 100 }));
+    });
+    // no source-duration set -> mediaStartMax=Math.max(30, Math.ceil(0+10))=30 -> max=3000
+    // ratio=1.0 -> raw=3000 -> commit(3000) -> (3000/100).toFixed(2) = "30.00"
+    expect(onSetAttribute).toHaveBeenCalledWith("media-start", "30.00");
+    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());
+  });
+});
+
+describe("FlatMediaSection — fit/position", () => {
+  it("commits object-fit and object-position changes", () => {
+    const onSetStyle = vi.fn();
+    const { host, root } = (() => {
+      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={{ "object-fit": "cover", "object-position": "center" }}
+            onSetStyle={onSetStyle}
+            onSetAttribute={vi.fn()}
+            onSetHtmlAttribute={vi.fn()}
+          />,
+        );
+      });
+      return { host, root };
+    })();
+    const selects = host.querySelectorAll("select");
+    const fitSelect = Array.from(selects).find((s) => s.value === "cover");
+    expect(fitSelect).not.toBeUndefined();
+    act(() => {
+      if (fitSelect) {
+        fitSelect.value = "contain";
+        fitSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    });
+    expect(onSetStyle).toHaveBeenCalledWith("object-fit", "contain");
+    act(() => root.unmount());
+  });
+
+  it("commits an object-position change", () => {
+    const onSetStyle = 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={{ "object-fit": "cover", "object-position": "center" }}
+          onSetStyle={onSetStyle}
+          onSetAttribute={vi.fn()}
+          onSetHtmlAttribute={vi.fn()}
+        />,
+      );
+    });
+    const selects = host.querySelectorAll("select");
+    const positionSelect = Array.from(selects).find((s) => s.value === "center");
+    expect(positionSelect).not.toBeUndefined();
+    act(() => {
+      if (positionSelect) {
+        positionSelect.value = "left top";
+        positionSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    });
+    expect(onSetStyle).toHaveBeenCalledWith("object-position", "left top");
+    act(() => root.unmount());
+  });
+});