@hyperframes/studio 0.7.71 → 0.7.73

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

@@ -13,9 +13,9 @@ function brightPopGrading() {
   return next;
 }
 
-function warmDaylightGrading() {
-  const next = normalizeHfColorGrading({ preset: "warm-daylight", intensity: 1 });
-  if (!next) throw new Error("expected warm-daylight preset to normalize");
+function cleanStudioGrading() {
+  const next = normalizeHfColorGrading({ preset: "clean-studio", intensity: 1 });
+  if (!next) throw new Error("expected clean-studio preset to normalize");
   return next;
 }
 
@@ -56,19 +56,30 @@ function makeElement(overrides: Partial<DomEditSelection> = {}): DomEditSelectio
   } as DomEditSelection;
 }
 
+type ApplyScope = (
+  scope: "source-file" | "project",
+  value: string | null,
+) => Promise<{ changedFiles: number; changedElements: number }>;
+
 function HookHost({
   onState,
   onSetAttributeLive,
   element,
+  previewIframeRef,
+  onApplyScope,
 }: {
   onState: (state: ReturnType<typeof useColorGradingController>) => void;
   onSetAttributeLive: (attr: string, value: string | null) => void;
   element: DomEditSelection;
+  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>;
+  onApplyScope?: ApplyScope;
 }) {
   const state = useColorGradingController({
     projectId: "proj",
     element,
+    previewIframeRef,
     onSetAttributeLive,
+    onApplyScope,
   });
   onState(state);
   return null;
@@ -77,6 +88,8 @@ function HookHost({
 function renderHook(
   onSetAttributeLive: (attr: string, value: string | null) => void,
   initialElement: DomEditSelection = makeElement(),
+  previewIframeRef?: React.RefObject<HTMLIFrameElement | null>,
+  onApplyScope?: ApplyScope,
 ) {
   const host = document.createElement("div");
   document.body.append(host);
@@ -89,6 +102,8 @@ function renderHook(
           onState: (s: ReturnType<typeof useColorGradingController>) => (latest = s),
           onSetAttributeLive,
           element,
+          previewIframeRef,
+          onApplyScope,
         }),
       );
     });
@@ -107,6 +122,58 @@ function renderHook(
   };
 }
 
+type PreviewWindow = Window & {
+  __hf?: {
+    colorGrading?: {
+      renderPreviews?: ReturnType<typeof vi.fn>;
+      startPreviewPlayback?: ReturnType<typeof vi.fn>;
+    };
+  };
+  __player?: { play: ReturnType<typeof vi.fn> };
+};
+
+function createPreviewFrame() {
+  const iframe = document.body.appendChild(document.createElement("iframe"));
+  const contentWindow = iframe.contentWindow as PreviewWindow | null;
+  if (!contentWindow) throw new Error("expected iframe contentWindow");
+  return { contentWindow, iframe };
+}
+
+function installPreviewRenderer(contentWindow: PreviewWindow) {
+  const renderPreviews = vi
+    .fn()
+    .mockImplementation(async (_target: unknown, candidates: Array<{ id: string }>) => ({
+      width: 160,
+      height: 90,
+      images: candidates.map(({ id }) => ({
+        id,
+        dataUrl: `data:image/png;base64,${id}`,
+      })),
+    }));
+  contentWindow.__hf = { colorGrading: { renderPreviews } };
+  return renderPreviews;
+}
+
+async function flushPreviewRequest() {
+  act(() => vi.advanceTimersByTime(0));
+  await act(async () => {
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+}
+
+function colorGradingMessages(calls: ReadonlyArray<ReadonlyArray<unknown>>) {
+  return calls
+    .map(([message]) => message)
+    .filter(
+      (message): message is { action: string; grading: unknown } =>
+        typeof message === "object" &&
+        message !== null &&
+        "action" in message &&
+        message.action === "set-color-grading",
+    );
+}
+
 describe("useColorGradingController", () => {
   it("starts with the neutral (inactive) grading and idle compare state", () => {
     const { root, getState } = renderHook(vi.fn());
@@ -115,6 +182,168 @@ describe("useColorGradingController", () => {
     act(() => root.unmount());
   });
 
+  it("requests one exact preset batch from the selected media runtime", async () => {
+    vi.useFakeTimers();
+    const devicePixelRatio = vi.spyOn(window, "devicePixelRatio", "get").mockReturnValue(2);
+    const { contentWindow, iframe } = createPreviewFrame();
+    const renderPreviews = installPreviewRenderer(contentWindow);
+    const initialElement = makeElement({
+      dataAttributes: {
+        "color-grading": JSON.stringify({
+          wheels: { shadows: { hue: 210, amount: 0.2 } },
+          effects: { pixelate: 0.4 },
+          palette: ["#112233", "#ffffff"],
+        }),
+      },
+    });
+    const { root, getState } = renderHook(vi.fn(), initialElement, { current: iframe });
+
+    act(() => getState().requestPresetPreviews());
+    await flushPreviewRequest();
+
+    expect(renderPreviews).toHaveBeenCalledTimes(1);
+    expect(renderPreviews.mock.calls[0]?.[1]).toHaveLength(18);
+    expect(renderPreviews.mock.calls[0]?.[1]).toContainEqual({
+      id: "bright-pop",
+      grading: expect.objectContaining({
+        wheels: expect.objectContaining({
+          shadows: expect.objectContaining({ amount: 0 }),
+        }),
+        effects: expect.objectContaining({ pixelate: 0.4 }),
+        palette: ["#112233", "#ffffff"],
+      }),
+    });
+    expect(renderPreviews.mock.calls[0]?.[2]).toEqual({ maxDimension: 320 });
+    expect(getState().presetPreviews).toEqual({
+      status: "ready",
+      images: expect.objectContaining({ "bright-pop": "data:image/png;base64,bright-pop" }),
+      width: 160,
+      height: 90,
+    });
+    act(() => root.unmount());
+    devicePixelRatio.mockRestore();
+    vi.useRealTimers();
+  });
+
+  it("retains partial preset previews and exposes retry after the batch times out", async () => {
+    vi.useFakeTimers();
+    const { contentWindow, iframe } = createPreviewFrame();
+    const renderPreviews = vi.fn().mockResolvedValue({
+      width: 160,
+      height: 90,
+      images: [{ id: "bright-pop", dataUrl: "data:image/png;base64,bright" }],
+    });
+    contentWindow.__hf = { colorGrading: { renderPreviews } };
+    const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
+
+    act(() => getState().requestPresetPreviews());
+    await flushPreviewRequest();
+    expect(getState().presetPreviews).toMatchObject({
+      status: "loading",
+      images: { "bright-pop": "data:image/png;base64,bright" },
+    });
+
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1700);
+    });
+    expect(getState().presetPreviews).toMatchObject({
+      status: "unavailable",
+      images: { "bright-pop": "data:image/png;base64,bright" },
+    });
+    expect(renderPreviews.mock.calls.length).toBeGreaterThan(1);
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("persists a disabled secondary even though it does not render pixels", () => {
+    vi.useFakeTimers();
+    const onSetAttributeLive = vi.fn();
+    const grading = normalizeHfColorGrading({
+      secondaries: [
+        {
+          enabled: false,
+          key: { hue: { center: 215, range: 25 } },
+          correction: { saturation: 0.15 },
+        },
+      ],
+    });
+    if (!grading) throw new Error("expected secondary grading");
+    const { root, getState } = renderHook(onSetAttributeLive);
+
+    act(() => getState().commitColorGrading(grading));
+    act(() => vi.advanceTimersByTime(400));
+
+    expect(onSetAttributeLive.mock.calls[0]?.[0]).toBe("color-grading");
+    expect(onSetAttributeLive.mock.calls[0]?.[1]).toContain('"enabled":false');
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("copies a disabled authored secondary to a broader scope", async () => {
+    const onApplyScope = vi.fn<ApplyScope>().mockResolvedValue({
+      changedFiles: 1,
+      changedElements: 1,
+    });
+    const grading = {
+      secondaries: [
+        {
+          enabled: false,
+          key: { hue: { center: 215, range: 25 } },
+          correction: { saturation: 0.15 },
+        },
+      ],
+    };
+    const { root, getState } = renderHook(
+      vi.fn(),
+      makeElement({ dataAttributes: { "color-grading": JSON.stringify(grading) } }),
+      undefined,
+      onApplyScope,
+    );
+
+    await act(async () => getState().applyToScope());
+
+    expect(onApplyScope).toHaveBeenCalledWith(
+      "source-file",
+      expect.stringContaining('"enabled":false'),
+    );
+    act(() => root.unmount());
+  });
+
+  it("requests exact effect families and retains earlier family images", async () => {
+    vi.useFakeTimers();
+    const { contentWindow, iframe } = createPreviewFrame();
+    const renderPreviews = installPreviewRenderer(contentWindow);
+    const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
+
+    act(() => getState().requestEffectPreviews(["blur", "pixelate", "bloom"]));
+    await flushPreviewRequest();
+
+    expect(renderPreviews).toHaveBeenCalledTimes(1);
+    expect(renderPreviews.mock.calls[0]?.[1].map(({ id }: { id: string }) => id)).toEqual([
+      "blur",
+      "pixelate",
+      "bloom",
+    ]);
+
+    act(() => getState().requestEffectPreviews(["kuwahara"]));
+    await flushPreviewRequest();
+
+    expect(renderPreviews).toHaveBeenCalledTimes(2);
+    expect(getState().effectPreviews).toEqual({
+      status: "ready",
+      images: {
+        blur: "data:image/png;base64,blur",
+        pixelate: "data:image/png;base64,pixelate",
+        bloom: "data:image/png;base64,bloom",
+        kuwahara: "data:image/png;base64,kuwahara",
+      },
+      width: 160,
+      height: 90,
+    });
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
   it("commitColorGrading updates grading state synchronously and schedules a debounced persist", async () => {
     vi.useFakeTimers();
     const onSetAttributeLive = vi.fn();
@@ -135,6 +364,86 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
+  it("previews through the runtime only and restores the committed grade without persisting", () => {
+    vi.useFakeTimers();
+    const onSetAttributeLive = vi.fn();
+    const { contentWindow, iframe } = createPreviewFrame();
+    const postMessage = vi.spyOn(contentWindow, "postMessage");
+    const { root, getState } = renderHook(onSetAttributeLive, makeElement(), {
+      current: iframe,
+    });
+
+    act(() => getState().previewColorGrading(brightPopGrading()));
+    act(() => getState().previewColorGrading(null));
+    const gradingMessages = colorGradingMessages(postMessage.mock.calls);
+    expect(gradingMessages).toHaveLength(2);
+    expect(gradingMessages[0]?.grading).toMatchObject({ preset: "bright-pop" });
+    expect(gradingMessages[1]?.grading).toBeNull();
+    expect(getState().grading.preset).toBe("neutral");
+    act(() => vi.advanceTimersByTime(500));
+    expect(onSetAttributeLive).not.toHaveBeenCalled();
+
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("animates only the selected video card without starting the project player", async () => {
+    vi.useFakeTimers();
+    const { contentWindow, iframe } = createPreviewFrame();
+    const stopPlayback = vi.fn();
+    const renderPreviews = vi.fn().mockResolvedValue({
+      width: 320,
+      height: 180,
+      images: [{ id: "bright-pop", dataUrl: "data:image/png;base64,animated" }],
+    });
+    const startPreviewPlayback = vi.fn(() => stopPlayback);
+    contentWindow.__hf = { colorGrading: { renderPreviews, startPreviewPlayback } };
+    contentWindow.__player = { play: vi.fn() };
+    const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
+
+    act(() =>
+      getState().previewColorGrading(brightPopGrading(), {
+        animatedPreview: { kind: "presets", id: "bright-pop" },
+      }),
+    );
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(startPreviewPlayback).toHaveBeenCalledTimes(1);
+    expect(renderPreviews).toHaveBeenCalledWith(
+      expect.anything(),
+      [{ id: "bright-pop", grading: expect.objectContaining({ preset: "bright-pop" }) }],
+      { maxDimension: 160, useMediaTime: true },
+    );
+    expect(contentWindow.__player.play).not.toHaveBeenCalled();
+    expect(getState().presetPreviews.images["bright-pop"]).toBe("data:image/png;base64,animated");
+
+    act(() => getState().previewColorGrading(null));
+    expect(stopPlayback).toHaveBeenCalledTimes(1);
+
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("restores a just-committed look even before React renders the new state", () => {
+    vi.useFakeTimers();
+    const { contentWindow, iframe } = createPreviewFrame();
+    const postMessage = vi.spyOn(contentWindow, "postMessage");
+    const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
+    const brightPop = brightPopGrading();
+
+    act(() => {
+      getState().commitColorGrading(brightPop);
+      getState().previewColorGrading(null);
+    });
+    const gradingMessages = colorGradingMessages(postMessage.mock.calls);
+    expect(gradingMessages.at(-1)?.grading).toMatchObject({ preset: "bright-pop" });
+
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
   it("reverts to the last confirmed-good grading via the real onSettled(false) signal (matches runDomEditCommit, which never rejects)", async () => {
     // The actual Studio commit runner (runDomEditCommit) catches persist
     // failures internally and always resolves — it reports outcome only
@@ -253,7 +562,7 @@ describe("useColorGradingController", () => {
           });
         },
       )
-      // Edit B (warm-daylight): settles immediately and successfully.
+      // Edit B (clean-studio): settles immediately and successfully.
       .mockImplementationOnce(
         (_attr: string, _value: string | null, onSettled?: (ok: boolean) => void) => {
           onSettled?.(true);
@@ -272,13 +581,13 @@ describe("useColorGradingController", () => {
 
     // B commits on the SAME element before A's persist has settled.
     act(() => {
-      getState().commitColorGrading(warmDaylightGrading());
+      getState().commitColorGrading(cleanStudioGrading());
     });
     act(() => {
       vi.advanceTimersByTime(400);
     });
     expect(onSetAttributeLive).toHaveBeenCalledTimes(2); // B's persist has already settled (mock resolves sync)
-    expect(getState().grading.preset).toBe("warm-daylight");
+    expect(getState().grading.preset).toBe("clean-studio");
 
     // NOW A's stale persist finally settles as a FAILURE — must not revert
     // `grading` (which now correctly shows B's newer edit) back to the
@@ -292,20 +601,32 @@ describe("useColorGradingController", () => {
       await Promise.resolve();
       await Promise.resolve();
     });
-    expect(getState().grading.preset).toBe("warm-daylight");
+    expect(getState().grading.preset).toBe("clean-studio");
     act(() => root.unmount());
     vi.useRealTimers();
   });
 
-  it("resetGrading returns to the neutral preset", () => {
+  it("resetGrading resets Grade fields without clearing LUT, Effects, or Palette", () => {
     const { root, getState } = renderHook(vi.fn());
+    const grading = normalizeHfColorGrading({
+      preset: "bright-pop",
+      lut: { src: "assets/luts/custom.cube", intensity: 0.6 },
+      effects: { pixelate: 0.5 },
+      palette: ["#112233", "#ffffff"],
+    });
+    if (!grading) throw new Error("expected grading to normalize");
     act(() => {
-      getState().commitColorGrading(brightPopGrading());
+      getState().commitColorGrading(grading);
     });
     act(() => {
       getState().resetGrading();
     });
-    expect(getState().grading.preset).toBe("neutral");
+    expect(getState().grading).toMatchObject({
+      preset: "neutral",
+      lut: { src: "assets/luts/custom.cube", intensity: 0.6 },
+      effects: { pixelate: 0.5 },
+      palette: ["#112233", "#ffffff"],
+    });
     act(() => root.unmount());
   });