@hyperframes/studio 0.6.0 → 0.6.2

package/src/player/components/useTimelineRangeSelection.ts

@@ -0,0 +1,135 @@
+import { useRef, useState, useCallback } from "react";
+import { buildClipRangeSelection, type TimelineRangeSelection } from "./timelineEditing";
+import type { TimelineElement } from "../store/playerStore";
+import { liveTime } from "../store/playerStore";
+import { GUTTER } from "./timelineLayout";
+
+interface UseTimelineRangeSelectionInput {
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  ppsRef: React.RefObject<number>;
+  effectiveDuration: number;
+  pps: number;
+  onSeek?: (time: number) => void;
+  seekFromX: (clientX: number) => void;
+  autoScrollDuringDrag: (clientX: number) => void;
+  dragScrollRaf: React.RefObject<number>;
+  isDragging: React.RefObject<boolean>;
+  setShowPopover: (v: boolean) => void;
+}
+
+export function useTimelineRangeSelection({
+  scrollRef,
+  ppsRef: _ppsRef,
+  effectiveDuration: _effectiveDuration,
+  pps,
+  onSeek: _onSeek,
+  seekFromX,
+  autoScrollDuringDrag,
+  dragScrollRaf,
+  isDragging,
+  setShowPopover,
+}: UseTimelineRangeSelectionInput) {
+  const isRangeSelecting = useRef(false);
+  const rangeAnchorTime = useRef(0);
+  const [rangeSelection, setRangeSelection] = useState<TimelineRangeSelection | null>(null);
+  const shiftClickClipRef = useRef<{
+    element: TimelineElement;
+    anchorX: number;
+    anchorY: number;
+  } | null>(null);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (e.button !== 0) return;
+      if (e.shiftKey) {
+        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+        isRangeSelecting.current = true;
+        setShowPopover(false);
+        const rect = scrollRef.current?.getBoundingClientRect();
+        if (rect) {
+          const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER;
+          const time = Math.max(0, x / pps);
+          rangeAnchorTime.current = time;
+          setRangeSelection({ start: time, end: time, anchorX: e.clientX, anchorY: e.clientY });
+        }
+        return;
+      }
+      shiftClickClipRef.current = null;
+      if ((e.target as HTMLElement).closest("[data-clip]")) return;
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+      isDragging.current = true;
+      setRangeSelection(null);
+      setShowPopover(false);
+      seekFromX(e.clientX);
+    },
+    [seekFromX, pps, scrollRef, isDragging, setShowPopover],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (isRangeSelecting.current) {
+        const rect = scrollRef.current?.getBoundingClientRect();
+        if (rect) {
+          const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER;
+          setRangeSelection((prev) =>
+            prev
+              ? { ...prev, end: Math.max(0, x / pps), anchorX: e.clientX, anchorY: e.clientY }
+              : null,
+          );
+        }
+        return;
+      }
+      if (!isDragging.current) return;
+      seekFromX(e.clientX);
+      autoScrollDuringDrag(e.clientX);
+    },
+    [seekFromX, autoScrollDuringDrag, pps, scrollRef, isDragging],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    if (isRangeSelecting.current) {
+      isRangeSelecting.current = false;
+      const pendingShiftClick = shiftClickClipRef.current;
+      shiftClickClipRef.current = null;
+      setRangeSelection((prev) => {
+        if (prev && pendingShiftClick && Math.abs(prev.end - prev.start) <= 0.2) {
+          setShowPopover(true);
+          return buildClipRangeSelection(pendingShiftClick.element, pendingShiftClick);
+        }
+        if (prev && Math.abs(prev.end - prev.start) > 0.2) {
+          setShowPopover(true);
+          return prev;
+        }
+        return null;
+      });
+      return;
+    }
+    isDragging.current = false;
+    cancelAnimationFrame(dragScrollRaf.current);
+  }, [isDragging, dragScrollRaf, setShowPopover]);
+
+  return {
+    rangeSelection,
+    setRangeSelection,
+    shiftClickClipRef,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+  };
+}
+
+/* ── Seek + scroll utilities (used in Timeline only) ──────────────── */
+export function seekTimeFromScrollX(
+  scrollEl: HTMLDivElement,
+  clientX: number,
+  effectiveDuration: number,
+  pps: number,
+  onSeek?: (time: number) => void,
+): void {
+  const rect = scrollEl.getBoundingClientRect();
+  const x = clientX - rect.left + scrollEl.scrollLeft - GUTTER;
+  if (x < 0) return;
+  const time = Math.max(0, Math.min(effectiveDuration, x / pps));
+  liveTime.notify(time);
+  onSeek?.(time);
+}

package/src/player/hooks/usePlaybackKeyboard.ts

@@ -0,0 +1,171 @@
+/**
+ * Keyboard shortcut handler for playback (Space/JKL/Arrow keys) and
+ * iframe shortcut listener setup.
+ *
+ * Accepts stable playback callbacks and returns the keyboard event handlers
+ * and iframe listener setup function. Has no side effects of its own.
+ */
+
+import { useRef, useCallback } from "react";
+import { useCaptionStore } from "../../captions/store";
+import { shouldIgnorePlaybackShortcutEvent, SHUTTLE_SPEEDS } from "../lib/playbackShortcuts";
+import { usePlayerStore } from "../store/playerStore";
+import { stepFrameTime, STUDIO_PREVIEW_FPS } from "../lib/time";
+import type { PlaybackAdapter } from "../lib/playbackTypes";
+
+interface UsePlaybackKeyboardParams {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  shuttleDirectionRef: React.MutableRefObject<"forward" | "backward" | null>;
+  shuttleSpeedIndexRef: React.MutableRefObject<number>;
+  iframeShortcutCleanupRef: React.MutableRefObject<(() => void) | null>;
+  getAdapter: () => PlaybackAdapter | null;
+  play: () => void;
+  playBackward: (rate: number) => void;
+  pause: () => void;
+  seek: (time: number) => void;
+}
+
+export function usePlaybackKeyboard({
+  iframeRef,
+  shuttleDirectionRef,
+  shuttleSpeedIndexRef,
+  iframeShortcutCleanupRef,
+  getAdapter,
+  play,
+  playBackward,
+  pause,
+  seek,
+}: UsePlaybackKeyboardParams) {
+  const pressedCodesRef = useRef(new Set<string>());
+  const playbackKeyDownRef = useRef<(e: KeyboardEvent) => void>(() => {});
+  const playbackKeyUpRef = useRef<(e: KeyboardEvent) => void>(() => {});
+
+  const stepFrames = useCallback(
+    (deltaFrames: number) => {
+      const adapter = getAdapter();
+      const currentTime = adapter?.getTime() ?? usePlayerStore.getState().currentTime;
+      seek(stepFrameTime(currentTime, deltaFrames, STUDIO_PREVIEW_FPS));
+    },
+    [getAdapter, seek],
+  );
+
+  const shuttle = useCallback(
+    (direction: "forward" | "backward") => {
+      if (shuttleDirectionRef.current === direction) {
+        shuttleSpeedIndexRef.current = Math.min(
+          shuttleSpeedIndexRef.current + 1,
+          SHUTTLE_SPEEDS.length - 1,
+        );
+      } else {
+        shuttleSpeedIndexRef.current = 0;
+      }
+      const speed = SHUTTLE_SPEEDS[shuttleSpeedIndexRef.current];
+      usePlayerStore.getState().setPlaybackRate(speed);
+      if (direction === "forward") {
+        play();
+      } else {
+        playBackward(speed);
+      }
+    },
+    [play, playBackward, shuttleDirectionRef, shuttleSpeedIndexRef],
+  );
+
+  const togglePlay = useCallback(() => {
+    if (usePlayerStore.getState().isPlaying) {
+      pause();
+    } else {
+      play();
+    }
+  }, [play, pause]);
+
+  const handlePlaybackKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.defaultPrevented) return;
+      const captionState = useCaptionStore.getState();
+      if (
+        shouldIgnorePlaybackShortcutEvent(e, {
+          isCaptionEditMode: captionState.isEditMode,
+          selectedCaptionSegmentCount: captionState.selectedSegmentIds.size,
+        })
+      ) {
+        return;
+      }
+      pressedCodesRef.current.add(e.code);
+      if (e.code === "Space") {
+        e.preventDefault();
+        togglePlay();
+        return;
+      }
+      if (e.code === "ArrowLeft") {
+        e.preventDefault();
+        stepFrames(e.shiftKey ? -10 : -1);
+        return;
+      }
+      if (e.code === "ArrowRight") {
+        e.preventDefault();
+        stepFrames(e.shiftKey ? 10 : 1);
+        return;
+      }
+      if (e.repeat) return;
+      if (e.code === "KeyK") {
+        e.preventDefault();
+        pause();
+        return;
+      }
+      if (e.code === "KeyJ") {
+        e.preventDefault();
+        if (pressedCodesRef.current.has("KeyK")) {
+          stepFrames(-1);
+          return;
+        }
+        shuttle("backward");
+        return;
+      }
+      if (e.code === "KeyL") {
+        e.preventDefault();
+        if (pressedCodesRef.current.has("KeyK")) {
+          stepFrames(1);
+          return;
+        }
+        shuttle("forward");
+      }
+    },
+    [pause, shuttle, stepFrames, togglePlay],
+  );
+
+  const handlePlaybackKeyUp = useCallback((e: KeyboardEvent) => {
+    pressedCodesRef.current.delete(e.code);
+  }, []);
+
+  playbackKeyDownRef.current = handlePlaybackKeyDown;
+  playbackKeyUpRef.current = handlePlaybackKeyUp;
+
+  const attachIframeShortcutListeners = useCallback(() => {
+    iframeShortcutCleanupRef.current?.();
+    iframeShortcutCleanupRef.current = null;
+
+    const iframeWin = iframeRef.current?.contentWindow;
+    const iframeDoc = iframeRef.current?.contentDocument;
+    if (!iframeWin && !iframeDoc) return;
+
+    const handleIframeKeyDown = (e: KeyboardEvent) => playbackKeyDownRef.current(e);
+    const handleIframeKeyUp = (e: KeyboardEvent) => playbackKeyUpRef.current(e);
+    iframeWin?.addEventListener("keydown", handleIframeKeyDown, true);
+    iframeWin?.addEventListener("keyup", handleIframeKeyUp, true);
+    iframeDoc?.addEventListener("keydown", handleIframeKeyDown, true);
+    iframeDoc?.addEventListener("keyup", handleIframeKeyUp, true);
+    iframeShortcutCleanupRef.current = () => {
+      iframeWin?.removeEventListener("keydown", handleIframeKeyDown, true);
+      iframeWin?.removeEventListener("keyup", handleIframeKeyUp, true);
+      iframeDoc?.removeEventListener("keydown", handleIframeKeyDown, true);
+      iframeDoc?.removeEventListener("keyup", handleIframeKeyUp, true);
+    };
+  }, [iframeRef, iframeShortcutCleanupRef]);
+
+  return {
+    playbackKeyDownRef,
+    playbackKeyUpRef,
+    attachIframeShortcutListeners,
+    togglePlay,
+  };
+}