{
+ (seekBarRef as React.MutableRefObject).current = el;
+ (sliderRef as React.MutableRefObject).current = el;
+ }}
+ role="slider"
+ tabIndex={disabled ? -1 : 0}
+ aria-label="Seek"
+ aria-disabled={disabled || undefined}
+ aria-valuemin={0}
+ aria-valuemax={Math.round(duration)}
+ aria-valuenow={0}
+ className={`min-w-[96px] flex-1 h-6 flex items-center group ${
+ disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+ }`}
+ style={{ touchAction: "none" }}
+ onPointerDown={onPointerDown}
+ onKeyDown={onKeyDown}
+ >
+
+ );
+});
+
+/* ── Main component ──────────────────────────────────────────────── */
+
interface PlayerControlsProps {
onTogglePlay: () => void;
onSeek: (time: number) => void;
@@ -62,7 +329,6 @@ export const PlayerControls = memo(function PlayerControls({
isFullscreen = false,
onToggleFullscreen,
}: PlayerControlsProps) {
- // Subscribe to only the fields we render — each selector prevents cascading re-renders
const isPlaying = usePlayerStore((s) => s.isPlaying);
const duration = usePlayerStore((s) => s.duration);
const timelineReady = usePlayerStore((s) => s.timelineReady);
@@ -76,18 +342,13 @@ export const PlayerControls = memo(function PlayerControls({
const outPoint = usePlayerStore((s) => s.outPoint);
const setInPoint = usePlayerStore.getState().setInPoint;
const setOutPoint = usePlayerStore.getState().setOutPoint;
- const [showSpeedMenu, setShowSpeedMenu] = useState(false);
- const [showShortcuts, setShowShortcuts] = useState(false);
const [timeDisplayMode, setTimeDisplayMode] = useState
+
+
- {/* Play/Pause button */}
- {/* Time display — click to toggle time/frame mode */}
@@ -387,470 +444,48 @@ export const PlayerControls = memo(function PlayerControls({
- {/* Seek bar — teal progress fill */}
-
-
-
+
-
-
+
-
-
+
);
});
diff --git a/packages/studio/src/player/components/ShortcutsPanel.tsx b/packages/studio/src/player/components/ShortcutsPanel.tsx
new file mode 100644
index 000000000..c282c7ef1
--- /dev/null
+++ b/packages/studio/src/player/components/ShortcutsPanel.tsx
@@ -0,0 +1,277 @@
+import { useState, useCallback, useRef, useEffect, memo } from "react";
+import { formatTime, frameToSeconds } from "../lib/time";
+import { Tooltip } from "../../components/ui";
+
+const SHORTCUT_SECTIONS = [
+ {
+ title: "Playback",
+ hints: [
+ { key: "Space", label: "Play / Pause" },
+ { key: "J", label: "Play backward" },
+ { key: "K", label: "Stop" },
+ { key: "L", label: "Play forward" },
+ { key: "M", label: "Toggle mute" },
+ { key: "⇧L", label: "Toggle loop" },
+ { key: "←/→", label: "Step 1 frame" },
+ { key: "⇧←/⇧→", label: "Step 10 frames" },
+ { key: "F", label: "Toggle fullscreen" },
+ ],
+ },
+ {
+ title: "Work area",
+ hints: [
+ { key: "I", label: "Set in-point" },
+ { key: "⇧I", label: "Clear in-point" },
+ { key: "O", label: "Set out-point" },
+ { key: "⇧O", label: "Clear out-point" },
+ { key: "A", label: "Jump to in-point" },
+ { key: "E", label: "Jump to out-point" },
+ ],
+ },
+] as const;
+
+interface ShortcutsPanelProps {
+ disabled: boolean;
+ duration: number;
+ inPoint: number | null;
+ outPoint: number | null;
+ setInPoint: (v: number | null) => void;
+ setOutPoint: (v: number | null) => void;
+ onSeek: (time: number) => void;
+}
+
+export const ShortcutsPanel = memo(function ShortcutsPanel({
+ disabled,
+ duration,
+ inPoint,
+ outPoint,
+ setInPoint,
+ setOutPoint,
+ onSeek,
+}: ShortcutsPanelProps) {
+ const [showShortcuts, setShowShortcuts] = useState(false);
+ const [jumpFrame, setJumpFrame] = useState("");
+ const shortcutsPanelRef = useRef {
- (seekBarRef as React.MutableRefObject).current = el;
- (sliderRef as React.MutableRefObject).current = el;
- }}
- role="slider"
- tabIndex={disabled ? -1 : 0}
- aria-label="Seek"
- aria-disabled={disabled || undefined}
- aria-valuemin={0}
- aria-valuemax={Math.round(duration)}
- aria-valuenow={0}
- className={`min-w-[96px] flex-1 h-6 flex items-center group ${
- disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
- }`}
- // `touch-action: none` tells the browser we're handling every
- // pointer gesture on this element ourselves. Without it, iOS
- // Safari consumes horizontal swipes for its own swipe-back-to-
- // previous-page navigation and the scrubber can't drag left.
- style={{ touchAction: "none" }}
+
-
+ />
- {/* Mute toggle */}
-
- {/* Work-area band between in/out points */}
- {(inPoint !== null || outPoint !== null) && duration > 0 && (
-
- )}
- {/* Progress fill — width is controlled imperatively via ref to avoid React re-render resets */}
-
- {/* In-point marker */}
- {inPoint !== null && duration > 0 && (
-
- )}
- {/* Out-point marker */}
- {outPoint !== null && duration > 0 && (
-
- )}
- {/* Playhead thumb — left is controlled imperatively via ref */}
-
-
-
-
-
-
- {showSpeedMenu && (
-
+
- {SPEED_OPTIONS.map((rate) => (
-
- ))}
-
- )}
-
-
-
-
- {showShortcuts && (
-
+
- {/* Frame jump */}
-
- )}
-
-
-
- {/* Work area */}
- - Jump to frame -
- -
-
-
- {/* Shortcuts */}
- - Work area -
-
-
-
-
-
-
- I
-
- In-point
-
-
- {inPoint !== null ? (
- <>
-
- {formatTime(inPoint)}
-
-
-
-
-
- ) : (
- —
- )}
-
-
-
-
-
- O
-
- Out-point
-
-
- {outPoint !== null ? (
- <>
-
- {formatTime(outPoint)}
-
-
-
-
-
- ) : (
- —
- )}
-
-
- {SHORTCUT_SECTIONS.map((section) => (
-
-
-
- ))}
- - {section.title} -
-
- {section.hints.map((hint) => (
-
-
-
- {hint.key}
-
- {hint.label}
-
- ))}
-
+
+
+
+ {showShortcuts && (
+
+ );
+});
diff --git a/packages/studio/src/player/components/SpeedMenu.tsx b/packages/studio/src/player/components/SpeedMenu.tsx
new file mode 100644
index 000000000..be4497aa5
--- /dev/null
+++ b/packages/studio/src/player/components/SpeedMenu.tsx
@@ -0,0 +1,83 @@
+import { useState, useRef, useEffect, memo } from "react";
+import { trackStudioEvent } from "../../utils/studioTelemetry";
+import { Tooltip } from "../../components/ui";
+
+const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
+
+interface SpeedMenuProps {
+ playbackRate: number;
+ setPlaybackRate: (rate: number) => void;
+ disabled: boolean;
+}
+
+export const SpeedMenu = memo(function SpeedMenu({
+ playbackRate,
+ setPlaybackRate,
+ disabled,
+}: SpeedMenuProps) {
+ const [showSpeedMenu, setShowSpeedMenu] = useState(false);
+ const speedMenuContainerRef = useRef
+
+ )}
+
+
+
+ + Jump to frame +
+ +
+
+
+ + Work area +
+
+
+
+
+
+
+ I
+
+ In-point
+
+
+ {inPoint !== null ? (
+ <>
+
+ {formatTime(inPoint)}
+
+
+
+
+
+ ) : (
+ —
+ )}
+
+
+
+
+
+ O
+
+ Out-point
+
+
+ {outPoint !== null ? (
+ <>
+
+ {formatTime(outPoint)}
+
+
+
+
+
+ ) : (
+ —
+ )}
+
+
+ {SHORTCUT_SECTIONS.map((section) => (
+
+
+
+ ))}
+ + {section.title} +
+
+ {section.hints.map((hint) => (
+
+
+
+ {hint.key}
+
+ {hint.label}
+
+ ))}
+
+
+
+
+ {showSpeedMenu && (
+
+ );
+});
diff --git a/packages/studio/src/player/components/useSeekBarDrag.ts b/packages/studio/src/player/components/useSeekBarDrag.ts
new file mode 100644
index 000000000..81c78d1f1
--- /dev/null
+++ b/packages/studio/src/player/components/useSeekBarDrag.ts
@@ -0,0 +1,168 @@
+import { useCallback } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import { formatFrameTime, formatTime } from "../lib/time";
+import { usePlayerStore, liveTime } from "../store/playerStore";
+
+const SEEK_EDGE_SNAP_PX = 8;
+
+export function resolveSeekPercent(clientX: number, rectLeft: number, rectWidth: number): number {
+ if (!Number.isFinite(rectWidth) || rectWidth <= 0) return 0;
+ const rawPercent = (clientX - rectLeft) / rectWidth;
+ const clamped = Math.max(0, Math.min(1, rawPercent));
+ const snapThreshold = Math.min(0.5, SEEK_EDGE_SNAP_PX / rectWidth);
+ if (clamped <= snapThreshold) return 0;
+ if (clamped >= 1 - snapThreshold) return 1;
+ return clamped;
+}
+
+interface SeekBarRefs {
+ seekBarRef: React.RefObject
+ {SPEED_OPTIONS.map((rate) => (
+
+ ))}
+
+ )}
+