@hyperframes/studio 0.7.54 → 0.7.56

package/src/player/components/timelineZoom.test.ts

@@ -1,12 +1,15 @@
 import { describe, expect, it } from "vitest";
 import {
   clampTimelineZoomPercent,
+  computePinnedZoomPercent,
   getNextTimelineZoomPercent,
   getPinchTimelineZoomPercent,
   getTimelinePixelsPerSecond,
   getTimelineZoomPercent,
   MAX_TIMELINE_ZOOM_PERCENT,
   MIN_TIMELINE_ZOOM_PERCENT,
+  timelineZoomPercentToSlider,
+  timelineSliderToZoomPercent,
 } from "./timelineZoom";
 
 describe("clampTimelineZoomPercent", () => {
@@ -81,3 +84,67 @@ describe("getPinchTimelineZoomPercent", () => {
     expect(getPinchTimelineZoomPercent(-10000, "manual", 100)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
   });
 });
+
+describe("timelineZoomPercentToSlider", () => {
+  it("maps min zoom to slider position 0", () => {
+    expect(timelineZoomPercentToSlider(MIN_TIMELINE_ZOOM_PERCENT)).toBeCloseTo(0, 5);
+  });
+
+  it("maps max zoom to slider position 100", () => {
+    expect(timelineZoomPercentToSlider(MAX_TIMELINE_ZOOM_PERCENT)).toBeCloseTo(100, 5);
+  });
+
+  it("maps 100% to the log midpoint between 10 and 2000", () => {
+    const expected = ((Math.log(100) - Math.log(10)) / (Math.log(2000) - Math.log(10))) * 100;
+    expect(timelineZoomPercentToSlider(100)).toBeCloseTo(expected, 3);
+  });
+});
+
+describe("timelineSliderToZoomPercent", () => {
+  it("maps slider 0 to min zoom", () => {
+    expect(timelineSliderToZoomPercent(0)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
+  });
+
+  it("maps slider 100 to max zoom", () => {
+    expect(timelineSliderToZoomPercent(100)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
+  });
+});
+
+describe("computePinnedZoomPercent", () => {
+  it("returns 100 when current pps equals the fit pps (a no-op pin at the current fit)", () => {
+    expect(computePinnedZoomPercent(42, 42)).toBe(100);
+  });
+
+  it("reproduces the current pps: percent × fitPps / 100 === currentPps", () => {
+    const fitPps = 20;
+    const currentPps = 50; // user zoomed in 2.5×
+    const percent = computePinnedZoomPercent(currentPps, fitPps);
+    expect(percent).toBe(250);
+    // Round-trips through getTimelinePixelsPerSecond back to the on-screen pps.
+    expect(getTimelinePixelsPerSecond(fitPps, "manual", percent)).toBeCloseTo(currentPps, 5);
+  });
+
+  it("clamps a pin that would exceed the manual-zoom bounds", () => {
+    // currentPps 10000 / fitPps 1 = 1_000_000% → clamped to MAX.
+    expect(computePinnedZoomPercent(10000, 1)).toBe(MAX_TIMELINE_ZOOM_PERCENT);
+    // Tiny ratio → clamped up to MIN.
+    expect(computePinnedZoomPercent(0.001, 1000)).toBe(MIN_TIMELINE_ZOOM_PERCENT);
+  });
+
+  it("falls back to 100 for unusable inputs (a safe no-op pin)", () => {
+    expect(computePinnedZoomPercent(Number.NaN, 20)).toBe(100);
+    expect(computePinnedZoomPercent(50, 0)).toBe(100);
+    expect(computePinnedZoomPercent(-5, 20)).toBe(100);
+    expect(computePinnedZoomPercent(50, Number.POSITIVE_INFINITY)).toBe(100);
+  });
+});
+
+describe("timelineZoomPercentToSlider / timelineSliderToZoomPercent round-trip", () => {
+  for (const percent of [10, 100, 500, 2000]) {
+    it(`round-trips ${percent}% within ±1%`, () => {
+      const slider = timelineZoomPercentToSlider(percent);
+      const back = timelineSliderToZoomPercent(slider);
+      expect(Math.abs(back - percent) / percent).toBeLessThan(0.01);
+    });
+  }
+});

package/src/player/components/timelineZoom.ts

@@ -18,6 +18,34 @@ export function getTimelineZoomPercent(zoomMode: ZoomMode, manualZoomPercent: nu
   return zoomMode === "fit" ? 100 : clampTimelineZoomPercent(manualZoomPercent);
 }
 
+/**
+ * The manual-zoom percent that, applied to `fitPixelsPerSecond`, reproduces the
+ * CURRENT on-screen pixels-per-second exactly. Used to PIN the timeline zoom on
+ * the first edit so a duration change (which recomputes fit-pps) no longer
+ * rescales every clip: we switch `zoomMode` to "manual" with this percent, so
+ * `getTimelinePixelsPerSecond` keeps returning today's pps regardless of the new
+ * fit basis.
+ *
+ * Since `pps = fitPps * (percent / 100)` in manual mode, and while fitting
+ * `pps === fitPps`, the pinned percent is `currentPps / fitPps * 100`. Clamped to
+ * the manual-zoom range so the pin can't land outside the slider's bounds; falls
+ * back to 100 (a no-op pin at the current fit) when either input is unusable.
+ */
+export function computePinnedZoomPercent(
+  currentPixelsPerSecond: number,
+  fitPixelsPerSecond: number,
+): number {
+  if (
+    !Number.isFinite(currentPixelsPerSecond) ||
+    currentPixelsPerSecond <= 0 ||
+    !Number.isFinite(fitPixelsPerSecond) ||
+    fitPixelsPerSecond <= 0
+  ) {
+    return 100;
+  }
+  return clampTimelineZoomPercent((currentPixelsPerSecond / fitPixelsPerSecond) * 100);
+}
+
 export function getTimelinePixelsPerSecond(
   fitPixelsPerSecond: number,
   zoomMode: ZoomMode,
@@ -47,3 +75,26 @@ export function getPinchTimelineZoomPercent(
   if (!Number.isFinite(deltaY) || deltaY === 0) return current;
   return clampTimelineZoomPercent(current * Math.exp(-deltaY * PINCH_ZOOM_SENSITIVITY));
 }
+
+const LOG_MIN = Math.log(MIN_TIMELINE_ZOOM_PERCENT);
+const LOG_MAX = Math.log(MAX_TIMELINE_ZOOM_PERCENT);
+
+/**
+ * Maps a zoom percent (10–2000) to a slider position (0–100) using a log scale.
+ * Log scale is used because the range spans 200×; linear would compress the
+ * low end (10–100%) into a tiny sliver of the slider.
+ */
+export function timelineZoomPercentToSlider(percent: number): number {
+  const clamped = clampTimelineZoomPercent(percent);
+  return ((Math.log(clamped) - LOG_MIN) / (LOG_MAX - LOG_MIN)) * 100;
+}
+
+/**
+ * Maps a slider position (0–100) to a zoom percent (10–2000) using a log scale.
+ * Inverse of `timelineZoomPercentToSlider`.
+ */
+export function timelineSliderToZoomPercent(slider: number): number {
+  const clampedSlider = Math.max(0, Math.min(100, slider));
+  const logValue = LOG_MIN + (clampedSlider / 100) * (LOG_MAX - LOG_MIN);
+  return clampTimelineZoomPercent(Math.exp(logValue));
+}

package/src/player/components/useResolvedTimelineEditCallbacks.ts

@@ -6,7 +6,12 @@ import type { TimelineEditCallbacks } from "./timelineCallbacks";
 // the rest of the callback bag still comes from TimelineEditContext.
 export type TimelineEditOverrides = Pick<
   TimelineEditCallbacks,
-  "onMoveElement" | "onResizeElement" | "onBlockedEditAttempt" | "onSplitElement"
+  | "onMoveElement"
+  | "onMoveElements"
+  | "onResizeElement"
+  | "onResizeElements"
+  | "onBlockedEditAttempt"
+  | "onSplitElement"
 >;
 
 // Merge any prop overrides over the context callbacks. Used so NLELayout can
@@ -16,15 +21,32 @@ export function useResolvedTimelineEditCallbacks(
   overrides: TimelineEditOverrides,
 ): TimelineEditCallbacks {
   const ctx = useTimelineEditContextOptional();
-  const { onMoveElement, onResizeElement, onBlockedEditAttempt, onSplitElement } = overrides;
+  const {
+    onMoveElement,
+    onMoveElements,
+    onResizeElement,
+    onResizeElements,
+    onBlockedEditAttempt,
+    onSplitElement,
+  } = overrides;
   return useMemo(
     () => ({
       ...ctx,
       onMoveElement: onMoveElement ?? ctx.onMoveElement,
+      onMoveElements: onMoveElements ?? ctx.onMoveElements,
       onResizeElement: onResizeElement ?? ctx.onResizeElement,
+      onResizeElements: onResizeElements ?? ctx.onResizeElements,
       onBlockedEditAttempt: onBlockedEditAttempt ?? ctx.onBlockedEditAttempt,
       onSplitElement: onSplitElement ?? ctx.onSplitElement,
     }),
-    [ctx, onMoveElement, onResizeElement, onBlockedEditAttempt, onSplitElement],
+    [
+      ctx,
+      onMoveElement,
+      onMoveElements,
+      onResizeElement,
+      onResizeElements,
+      onBlockedEditAttempt,
+      onSplitElement,
+    ],
   );
 }

package/src/player/components/useTimelineClipDrag.resize.test.tsx

@@ -0,0 +1,241 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
+import type { ResizingClipState } from "./useTimelineClipDrag";
+import { useTimelineClipDrag } from "./useTimelineClipDrag";
+import { mountReactHarness } from "../../hooks/domSelectionTestHarness";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function el(id: string, over: Partial<TimelineElement> = {}): TimelineElement {
+  return {
+    id,
+    key: id,
+    tag: "video",
+    start: 0,
+    duration: 2,
+    track: 0,
+    domId: id,
+    ...over,
+  };
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+});
+
+function renderResizeHarness(
+  elements: TimelineElement[],
+  selected: string[],
+  options: { wireGroupResize?: boolean } = {},
+) {
+  usePlayerStore.getState().setElements(elements);
+  usePlayerStore.setState({ timelineSnapEnabled: false });
+  usePlayerStore.getState().setSelectedElementIds(new Set(selected));
+
+  const scroll = document.createElement("div");
+  document.body.append(scroll);
+  const onResizeElement = vi.fn();
+  const onResizeElements = vi.fn().mockResolvedValue(undefined);
+  let setResizingClip: ((s: ResizingClipState | null) => void) | null = null;
+
+  function Harness() {
+    const hook = useTimelineClipDrag({
+      scrollRef: { current: scroll },
+      ppsRef: { current: 100 },
+      durationRef: { current: 100 },
+      trackOrderRef: { current: [0, 1] },
+      onResizeElement,
+      onResizeElements: options.wireGroupResize === false ? undefined : onResizeElements,
+      setShowPopover: vi.fn(),
+      setRangeSelectionRef: { current: vi.fn() },
+    });
+    setResizingClip = hook.setResizingClip;
+    return null;
+  }
+
+  const root = mountReactHarness(<Harness />);
+  const apply = setResizingClip!;
+
+  return {
+    onResizeElement,
+    onResizeElements,
+    storeById(id: string) {
+      return usePlayerStore.getState().elements.find((e) => e.id === id)!;
+    },
+    startResize(element: TimelineElement, edge: "start" | "end") {
+      act(() => {
+        apply({
+          element,
+          edge,
+          originClientX: 0,
+          previewStart: element.start,
+          previewDuration: element.duration,
+          previewPlaybackStart: element.playbackStart,
+          started: false,
+        });
+      });
+    },
+    movePointer(clientX: number) {
+      act(() => {
+        window.dispatchEvent(new MouseEvent("pointermove", { bubbles: true, clientX, clientY: 0 }));
+      });
+    },
+    async dropPointer() {
+      await act(async () => {
+        window.dispatchEvent(new MouseEvent("pointerup", { bubbles: true }));
+      });
+    },
+    pressEscape() {
+      act(() => {
+        window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      });
+    },
+    unmount() {
+      act(() => root.unmount());
+    },
+  };
+}
+
+// Two clips a(0,2) + b(5,3) selected as a group, with a's END edge grabbed and
+// dragged +0.5s (50px @ 100pps). `bOver` customizes b (e.g. locking it).
+function startGroupResize(bOver: Partial<TimelineElement> = {}) {
+  const a = el("a", { start: 0, duration: 2 });
+  const b = el("b", { start: 5, duration: 3, ...bOver });
+  const h = renderResizeHarness([a, b], ["a", "b"]);
+  h.startResize(a, "end");
+  h.movePointer(50);
+  return { a, b, h };
+}
+
+// Drop the pointer and assert exactly one resize persisted: the grabbed clip `a`
+// grown to 2.5s (the +0.5 gesture), with no other member patched.
+async function expectSingleResizeToA(
+  h: ReturnType<typeof renderResizeHarness>,
+  a: TimelineElement,
+): Promise<void> {
+  await h.dropPointer();
+  expect(h.onResizeElement).toHaveBeenCalledTimes(1);
+  expect(h.onResizeElement).toHaveBeenCalledWith(a, expect.objectContaining({ duration: 2.5 }));
+}
+
+describe("useTimelineClipDrag — single-clip resize (unchanged path)", () => {
+  it("resizes only the grabbed clip and persists once", async () => {
+    const a = el("a", { start: 0, duration: 2 });
+    const b = el("b", { start: 5, duration: 2 });
+    const h = renderResizeHarness([a, b], []); // no multi-selection
+
+    h.startResize(a, "end");
+    h.movePointer(50); // +0.5s at 100 pps
+    await expectSingleResizeToA(h, a);
+    expect(h.storeById("a").duration).toBe(2.5);
+    expect(h.storeById("b").duration).toBe(2); // untouched
+    h.unmount();
+  });
+
+  it("does not let an older rejected resize roll back a newer optimistic gesture", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const a = el("a", { start: 0, duration: 2 });
+    const h = renderResizeHarness([a], []);
+    let rejectFirst!: (error: Error) => void;
+    h.onResizeElement
+      .mockImplementationOnce(() => new Promise<void>((_resolve, reject) => (rejectFirst = reject)))
+      .mockResolvedValueOnce(undefined);
+
+    h.startResize(a, "end");
+    h.movePointer(50);
+    await h.dropPointer();
+    h.startResize(a, "end");
+    h.movePointer(100);
+    await h.dropPointer();
+    rejectFirst(new Error("older resize failed"));
+    await act(async () => Promise.resolve());
+
+    expect(h.storeById("a").duration).toBe(3);
+    errorSpy.mockRestore();
+    h.unmount();
+  });
+});
+
+describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
+  it("previews the non-grabbed member through the store, grabbed stays out until commit", () => {
+    const { h } = startGroupResize(); // grabbed asks +0.5
+
+    // Non-grabbed member is previewed in the store; the grabbed clip renders from
+    // resizingClip state, so its store value is still the original until commit.
+    expect(h.storeById("b").duration).toBe(3.5);
+    expect(h.storeById("a").duration).toBe(2);
+    h.unmount();
+  });
+
+  it("commits the whole group — persists every member by the shared delta", async () => {
+    const { a, b, h } = startGroupResize();
+    await h.dropPointer();
+
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(h.onResizeElements).toHaveBeenCalledTimes(1);
+    expect(h.onResizeElements).toHaveBeenCalledWith(
+      [
+        expect.objectContaining({ element: a, duration: 2.5 }),
+        expect.objectContaining({ element: b, duration: 3.5 }),
+      ],
+      { coalesceKey: expect.stringMatching(/^clip-group-resize:/) },
+    );
+    expect(h.storeById("a").duration).toBe(2.5);
+    expect(h.storeById("b").duration).toBe(3.5);
+    h.unmount();
+  });
+
+  it("rolls the whole group back when the atomic resize batch rejects", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const { h } = startGroupResize();
+    h.onResizeElements.mockRejectedValueOnce(new Error("batch failed"));
+    await h.dropPointer();
+    await act(async () => Promise.resolve());
+    expect(h.onResizeElements).toHaveBeenCalledTimes(1);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(h.storeById("a").duration).toBe(2);
+    expect(h.storeById("b").duration).toBe(3);
+    expect(errorSpy).toHaveBeenCalledTimes(1);
+    errorSpy.mockRestore();
+    h.unmount();
+  });
+
+  it("rolls the whole group back when no atomic resize callback is wired", async () => {
+    const a = el("a", { start: 0, duration: 2 });
+    const b = el("b", { start: 5, duration: 3 });
+    const h = renderResizeHarness([a, b], ["a", "b"], {
+      wireGroupResize: false,
+    });
+    h.startResize(a, "end");
+    h.movePointer(50);
+    expect(h.storeById("b").duration).toBe(3.5);
+
+    await h.dropPointer();
+    expect(h.storeById("a").duration).toBe(2);
+    expect(h.storeById("b").duration).toBe(3);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    h.unmount();
+  });
+
+  it("degrades to single-clip when a selected member is locked — locked clip untouched", async () => {
+    const { a, h } = startGroupResize({ timelineLocked: true });
+    await expectSingleResizeToA(h, a);
+    expect(h.storeById("b").duration).toBe(3); // locked member never patched
+    h.unmount();
+  });
+
+  it("Escape rolls back the previewed non-grabbed member and persists nothing", () => {
+    const { h } = startGroupResize();
+    expect(h.storeById("b").duration).toBe(3.5); // previewed
+
+    h.pressEscape();
+    expect(h.storeById("b").duration).toBe(3); // restored
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    h.unmount();
+  });
+});