@hyperframes/studio 0.7.54 → 0.7.56

package/src/player/components/useTimelineEditPinning.ts

@@ -0,0 +1,121 @@
+import { useCallback, useMemo, useRef, type RefObject } from "react";
+import { usePlayerStore } from "../store/playerStore";
+import type { TimelineDropCallbacks, TimelineEditCallbacks } from "./timelineCallbacks";
+
+interface UseTimelineEditPinningInput {
+  ppsRef: RefObject<number>;
+  fitPpsRef: RefObject<number>;
+  onMoveElement: TimelineEditCallbacks["onMoveElement"];
+  onMoveElements: TimelineEditCallbacks["onMoveElements"];
+  onResizeElement: TimelineEditCallbacks["onResizeElement"];
+  onResizeElements: TimelineEditCallbacks["onResizeElements"];
+  onFileDrop: TimelineDropCallbacks["onFileDrop"];
+  onAssetDrop: TimelineDropCallbacks["onAssetDrop"];
+  onBlockDrop: TimelineDropCallbacks["onBlockDrop"];
+}
+
+// Wrap every mutating timeline edit so the zoom pins to the current on-screen
+// scale right before the edit commits — the reload the edit triggers then keeps
+// the current scale instead of rescaling every clip (the blink-fix symptom).
+// Each wrapper forwards its args unchanged and preserves the original's absence
+// (an unset callback stays unset → the timeline's own fallbacks kick in).
+export function useTimelineEditPinning({
+  ppsRef,
+  fitPpsRef,
+  onMoveElement,
+  onMoveElements,
+  onResizeElement,
+  onResizeElements,
+  onFileDrop,
+  onAssetDrop,
+  onBlockDrop,
+}: UseTimelineEditPinningInput) {
+  const pinTimelineZoom = usePlayerStore((s) => s.pinTimelineZoom);
+  // Pin the timeline zoom to the current on-screen scale on the FIRST edit, so a
+  // duration change from that edit (drops/moves/deletes recompute the fit basis)
+  // stops rescaling every clip. `pinTimelineZoom` is a no-op once already pinned
+  // (or after a manual zoom), so the user's own zoom is never clobbered; Fit
+  // re-fits. Reads refs at call time for the latest scale.
+  const pinZoomBeforeEdit = useCallback(() => {
+    pinTimelineZoom(ppsRef.current, fitPpsRef.current);
+  }, [pinTimelineZoom, ppsRef, fitPpsRef]);
+
+  // Stable ref so useTimelineClipDrag can clear rangeSelection without circular dep
+  const setRangeSelectionRef = useRef<((sel: null) => void) | null>(null);
+
+  const pinnedOnMoveElement = useMemo(
+    () =>
+      onMoveElement &&
+      ((...args: Parameters<typeof onMoveElement>) => {
+        pinZoomBeforeEdit();
+        return onMoveElement(...args);
+      }),
+    [onMoveElement, pinZoomBeforeEdit],
+  );
+  const pinnedOnMoveElements = useMemo(
+    () =>
+      onMoveElements &&
+      ((...args: Parameters<typeof onMoveElements>) => {
+        pinZoomBeforeEdit();
+        return onMoveElements(...args);
+      }),
+    [onMoveElements, pinZoomBeforeEdit],
+  );
+  const pinnedOnResizeElement = useMemo(
+    () =>
+      onResizeElement &&
+      ((...args: Parameters<typeof onResizeElement>) => {
+        pinZoomBeforeEdit();
+        return onResizeElement(...args);
+      }),
+    [onResizeElement, pinZoomBeforeEdit],
+  );
+  const pinnedOnResizeElements = useMemo(
+    () =>
+      onResizeElements &&
+      ((...args: Parameters<typeof onResizeElements>) => {
+        pinZoomBeforeEdit();
+        return onResizeElements(...args);
+      }),
+    [onResizeElements, pinZoomBeforeEdit],
+  );
+  const pinnedOnFileDrop = useMemo(
+    () =>
+      onFileDrop &&
+      ((...args: Parameters<typeof onFileDrop>) => {
+        pinZoomBeforeEdit();
+        return onFileDrop(...args);
+      }),
+    [onFileDrop, pinZoomBeforeEdit],
+  );
+  const pinnedOnAssetDrop = useMemo(
+    () =>
+      onAssetDrop &&
+      ((...args: Parameters<typeof onAssetDrop>) => {
+        pinZoomBeforeEdit();
+        return onAssetDrop(...args);
+      }),
+    [onAssetDrop, pinZoomBeforeEdit],
+  );
+  const pinnedOnBlockDrop = useMemo(
+    () =>
+      onBlockDrop &&
+      ((...args: Parameters<typeof onBlockDrop>) => {
+        pinZoomBeforeEdit();
+        return onBlockDrop(...args);
+      }),
+    [onBlockDrop, pinZoomBeforeEdit],
+  );
+
+  return {
+    pinZoomBeforeEdit,
+    setRangeSelectionRef,
+    pinnedOnMoveElement,
+    pinnedOnMoveElements,
+    pinnedOnResizeElement,
+    pinnedOnResizeElements,
+    pinnedOnFileDrop,
+    pinnedOnAssetDrop,
+    pinnedOnBlockDrop,
+  };
+}

package/src/player/components/useTimelineGeometry.ts

@@ -0,0 +1,129 @@
+import { useEffect, useMemo, useRef, type RefObject } from "react";
+import { usePlayerStore, type TimelineElement, type ZoomMode } from "../store/playerStore";
+import { getTimelinePixelsPerSecond } from "./timelineZoom";
+import {
+  DRAG_EXTEND_MARGIN_PX,
+  getTimelineDisplayContentWidth,
+  getTimelineFitPps,
+} from "./timelineLayout";
+import type { DraggedClipState, ResizingClipState } from "./useTimelineClipDrag";
+
+interface UseTimelineGeometryInput {
+  viewportWidth: number;
+  effectiveDuration: number;
+  zoomMode: ZoomMode;
+  manualZoomPercent: number;
+  ppsRef: RefObject<number>;
+  fitPpsRef: RefObject<number>;
+  draggedClip: DraggedClipState | null;
+  resizingClip: ResizingClipState | null;
+  expandedElements: TimelineElement[];
+  isDragging: RefObject<boolean>;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  lastScrollLeftRef: RefObject<number>;
+}
+
+// Derive the timeline's horizontal geometry from the viewport, zoom, and any live
+// drag/resize preview: the pixels-per-second scale, the rendered content width
+// (CapCut-style over-extension while dragging/trimming), and the version key that
+// re-triggers dependent effects after an edit re-derives the elements.
+export function useTimelineGeometry({
+  viewportWidth,
+  effectiveDuration,
+  zoomMode,
+  manualZoomPercent,
+  ppsRef,
+  fitPpsRef,
+  draggedClip,
+  resizingClip,
+  expandedElements,
+  isDragging,
+  scrollRef,
+  lastScrollLeftRef,
+}: UseTimelineGeometryInput) {
+  // Fit pps maps at least MIN_TIMELINE_EXTENT_S onto the viewport, so short
+  // comps show a 60s ruler with usable empty space (see getTimelineFitPps).
+  const fitPps = getTimelineFitPps(viewportWidth, effectiveDuration);
+  const pps = getTimelinePixelsPerSecond(fitPps, zoomMode, manualZoomPercent);
+  ppsRef.current = pps;
+  const trackContentWidth = Math.max(0, effectiveDuration * pps);
+  // Drag-to-extend: while a clip is dragged, keep the rendered extent a margin
+  // past the ghost's end. Holding the pointer in the right edge zone then keeps
+  // auto-scroll stepping (scrollWidth grows with the ghost), so the timeline
+  // extends at auto-scroll pace — placing a clip farther than the timeline
+  // currently shows. Growth is bounded per frame by AUTO_SCROLL_MAX_SPEED (no
+  // fling); leaving the edge zone stops it; the extra width collapses when the
+  // drag ends (the composition itself only grows on commit, content-driven).
+  const dragGhostEndPx = draggedClip?.started
+    ? (draggedClip.previewStart + draggedClip.element.duration) * pps + DRAG_EXTEND_MARGIN_PX
+    : 0;
+  // Trim-to-extend: same mechanic for a right-edge RESIZE — the rendered extent
+  // tracks the trim preview's end so the edge auto-scroll zone always has room
+  // to keep stepping while the trim grows past the current timeline width.
+  const resizeGhostEndPx = resizingClip?.started
+    ? (resizingClip.previewStart + resizingClip.previewDuration) * pps + DRAG_EXTEND_MARGIN_PX
+    : 0;
+  // The timeline canvas always fills at least the viewport width AND the
+  // MIN_TIMELINE_EXTENT_S floor: the ruler + empty track lanes keep going into
+  // the space instead of leaving dead black — CapCut-style. Only the RENDERED
+  // extent grows; clip positions/durations are untouched.
+  const displayContentWidth = getTimelineDisplayContentWidth({
+    trackContentWidth,
+    viewportWidth,
+    pps,
+    dragGhostEndPx,
+    resizeGhostEndPx,
+  });
+  const displayDuration = pps > 0 ? displayContentWidth / pps : effectiveDuration;
+  const clipStateVersion = useMemo(
+    () =>
+      expandedElements
+        .map((el) => `${el.key ?? el.id}:${el.start}:${el.duration}:${el.track}`)
+        .join("|"),
+    [expandedElements],
+  );
+  const zoomModeRef = useRef(zoomMode);
+  zoomModeRef.current = zoomMode;
+  const manualZoomPercentRef = useRef(manualZoomPercent);
+  manualZoomPercentRef.current = manualZoomPercent;
+  fitPpsRef.current = fitPps;
+
+  // Restore the horizontal scroll offset after an edit re-derives the elements
+  // (clipStateVersion changes) so the reload doesn't jump the view. Only in manual
+  // (pinned) mode — fit mode hides the x-scrollbar (scrollLeft is always 0) — and
+  // never mid-drag (auto-scroll owns the offset then). rAF waits for the new layout
+  // so the clamp reads the post-resync scrollWidth. zoomMode is a legitimate dep:
+  // re-running on a mode flip is a no-op thanks to the guard.
+  useEffect(() => {
+    if (zoomMode !== "manual" || isDragging.current) return;
+    const el = scrollRef.current;
+    const target = lastScrollLeftRef.current;
+    if (!el || target <= 0) return;
+    const raf = requestAnimationFrame(() => {
+      const max = Math.max(0, el.scrollWidth - el.clientWidth);
+      const next = Math.min(target, max);
+      if (Math.abs(el.scrollLeft - next) > 0.5) el.scrollLeft = next;
+    });
+    return () => cancelAnimationFrame(raf);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clipStateVersion, zoomMode]);
+  // Publish the live scale so edit handlers OUTSIDE <Timeline> (the keyboard-delete
+  // path) can pin the zoom via pinTimelineZoomToCurrent without threading geometry.
+  // In a useEffect (not the render body) so React-18 concurrent replay — Suspense
+  // retry, transitions, StrictMode double-invoke — can't double-publish. The write is
+  // idempotent (same pps/fitPps → same fields), so this is behavior-preserving; the
+  // effect placement is just the strictly-correct shape.
+  useEffect(() => {
+    usePlayerStore.getState().setTimelineScale(pps, fitPps);
+  }, [pps, fitPps]);
+
+  return {
+    pps,
+    fitPps,
+    displayContentWidth,
+    displayDuration,
+    clipStateVersion,
+    zoomModeRef,
+    manualZoomPercentRef,
+  };
+}

package/src/player/components/useTimelinePlayhead.ts

@@ -1,5 +1,5 @@
 import { useRef, useCallback, useEffect, useLayoutEffect } from "react";
-import { liveTime, usePlayerStore, type ZoomMode } from "../store/playerStore";
+import { liveTime, type ZoomMode } from "../store/playerStore";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { getPinchTimelineZoomPercent } from "./timelineZoom";
 import {
@@ -117,21 +117,9 @@ export function useTimelinePlayhead({
   useMountEffect(() => {
     const unsub = liveTime.subscribe((t) => {
       if (!playheadRef.current || durationRef.current <= 0) return;
-      const playheadX = getTimelinePlayheadLeft(t, ppsRef.current);
-      playheadRef.current.style.left = `${playheadX}px`;
-      const scroll = scrollRef.current;
-      if (
-        scroll &&
-        !isDragging.current &&
-        usePlayerStore.getState().isPlaying &&
-        shouldAutoScrollTimeline(zoomModeRef.current, scroll.scrollWidth, scroll.clientWidth)
-      ) {
-        const edgeMargin = scroll.clientWidth * 0.12;
-        if (playheadX > scroll.scrollLeft + scroll.clientWidth - edgeMargin)
-          scroll.scrollLeft = playheadX - scroll.clientWidth * 0.15;
-        else if (playheadX < scroll.scrollLeft + GUTTER)
-          scroll.scrollLeft = Math.max(0, playheadX - GUTTER);
-      }
+      // Playback deliberately does NOT scroll the viewport to chase the playhead —
+      // the user's scroll position is theirs; the playhead may run off-screen.
+      playheadRef.current.style.left = `${getTimelinePlayheadLeft(t, ppsRef.current)}px`;
     });
     return unsub;
   });