@hyperframes/studio 0.6.37 → 0.6.38

package/src/player/components/PlayerControls.tsx

@@ -1,52 +1,319 @@
-import { useRef, useState, useCallback, useEffect, memo } from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
-import { formatFrameTime, frameToSeconds, stepFrameTime, formatTime } from "../lib/time";
+import { useRef, useCallback, useEffect, memo } from "react";
+import { formatFrameTime, formatTime, stepFrameTime } from "../lib/time";
 import { shouldMutePreviewAudio } from "../lib/timelineIframeHelpers";
-import { usePlayerStore, liveTime } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 import { Tooltip } from "../../components/ui";
+import { ShortcutsPanel } from "./ShortcutsPanel";
+import { SpeedMenu } from "./SpeedMenu";
+import { useSeekBarDrag, resolveSeekPercent } from "./useSeekBarDrag";
+import { useState } from "react";
 
-const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
-const SEEK_EDGE_SNAP_PX = 8;
+export { resolveSeekPercent };
 type TimeDisplayMode = "time" | "frame";
-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;
 
-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;
+/* ── Icon sub-components ─────────────────────────────────────────── */
+
+function PlayIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
+      <polygon points="6,3 20,12 6,21" />
+    </svg>
+  );
+}
+
+function PauseIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
+      <rect x="6" y="4" width="4" height="16" rx="1" />
+      <rect x="14" y="4" width="4" height="16" rx="1" />
+    </svg>
+  );
+}
+
+/* ── Button sub-components ───────────────────────────────────────── */
+
+const MuteButton = memo(function MuteButton({
+  audioMuted,
+  audioAutoMuted,
+  effectiveAudioMuted,
+  controlsDisabled,
+  setAudioMuted,
+}: {
+  audioMuted: boolean;
+  audioAutoMuted: boolean;
+  effectiveAudioMuted: boolean;
+  controlsDisabled: boolean;
+  setAudioMuted: (v: boolean) => void;
+}) {
+  const label = audioAutoMuted
+    ? "Audio muted above 1x speed"
+    : audioMuted
+      ? "Unmute audio"
+      : "Mute audio";
+  return (
+    <Tooltip label={label}>
+      <button
+        type="button"
+        onClick={() => {
+          if (!audioAutoMuted) {
+            trackStudioEvent("playback", { action: "mute_toggle", muted: !audioMuted });
+            setAudioMuted(!audioMuted);
+          }
+        }}
+        disabled={controlsDisabled || audioAutoMuted}
+        aria-label={label}
+        aria-pressed={effectiveAudioMuted}
+        className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors disabled:pointer-events-none ${
+          effectiveAudioMuted
+            ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
+            : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
+        } ${audioAutoMuted ? "opacity-70" : ""}`}
+      >
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M11 5 6 9H3v6h3l5 4V5Z" />
+          {effectiveAudioMuted ? (
+            <>
+              <path d="m19 9-6 6" />
+              <path d="m13 9 6 6" />
+            </>
+          ) : (
+            <>
+              <path d="M15.5 8.5a5 5 0 0 1 0 7" />
+              <path d="M18.5 5.5a9 9 0 0 1 0 13" />
+            </>
+          )}
+        </svg>
+      </button>
+    </Tooltip>
+  );
+});
+
+const LoopButton = memo(function LoopButton({
+  loopEnabled,
+  disabled,
+  setLoopEnabled,
+}: {
+  loopEnabled: boolean;
+  disabled: boolean;
+  setLoopEnabled: (v: boolean) => void;
+}) {
+  return (
+    <Tooltip label="Loop playback">
+      <button
+        type="button"
+        onClick={() => {
+          trackStudioEvent("playback", { action: "loop_toggle", enabled: !loopEnabled });
+          setLoopEnabled(!loopEnabled);
+        }}
+        disabled={disabled}
+        className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
+          loopEnabled
+            ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
+            : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
+        }`}
+        aria-label={loopEnabled ? "Disable loop playback" : "Enable loop playback"}
+        aria-pressed={loopEnabled}
+      >
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M17 2l4 4-4 4" />
+          <path d="M3 11V9a4 4 0 0 1 4-4h14" />
+          <path d="M7 22l-4-4 4-4" />
+          <path d="M21 13v2a4 4 0 0 1-4 4H3" />
+        </svg>
+      </button>
+    </Tooltip>
+  );
+});
+
+const FullscreenButton = memo(function FullscreenButton({
+  isFullscreen,
+  onToggleFullscreen,
+}: {
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
+}) {
+  return (
+    <Tooltip label={isFullscreen ? "Exit fullscreen (F)" : "Enter fullscreen (F)"}>
+      <button
+        type="button"
+        onClick={() => {
+          trackStudioEvent("playback", { action: "fullscreen_toggle", active: !isFullscreen });
+          onToggleFullscreen();
+        }}
+        className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors ${
+          isFullscreen
+            ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
+            : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
+        }`}
+        aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+      >
+        <svg
+          width="13"
+          height="13"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          {isFullscreen ? (
+            <>
+              <path d="M8 3v3a2 2 0 0 1-2 2H3" />
+              <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
+              <path d="M3 16h3a2 2 0 0 1 2 2v3" />
+              <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
+            </>
+          ) : (
+            <>
+              <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+              <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+              <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+              <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+            </>
+          )}
+        </svg>
+      </button>
+    </Tooltip>
+  );
+});
+
+/* ── Seek bar sub-component ──────────────────────────────────────── */
+
+function SeekBarMarker({ position, duration }: { position: number; duration: number }) {
+  if (duration <= 0) return null;
+  return (
+    <div
+      className="absolute z-[3] pointer-events-none"
+      style={{
+        left: `${Math.min(100, (position / duration) * 100)}%`,
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        width: "2px",
+        height: "10px",
+        background: "#3CE6AC",
+        borderRadius: "1px",
+      }}
+    />
+  );
+}
+
+function WorkAreaOverlay({
+  inPoint,
+  outPoint,
+  duration,
+}: {
+  inPoint: number | null;
+  outPoint: number | null;
+  duration: number;
+}) {
+  if ((inPoint === null && outPoint === null) || duration <= 0) return null;
+  return (
+    <>
+      <div
+        className="absolute top-0 bottom-0 pointer-events-none"
+        style={{
+          left: `${inPoint !== null ? Math.min(100, (inPoint / duration) * 100) : 0}%`,
+          right: `${outPoint !== null ? 100 - Math.min(100, (outPoint / duration) * 100) : 0}%`,
+          background: "rgba(60,230,172,0.15)",
+        }}
+      />
+      {inPoint !== null && <SeekBarMarker position={inPoint} duration={duration} />}
+      {outPoint !== null && <SeekBarMarker position={outPoint} duration={duration} />}
+    </>
+  );
 }
 
+const SeekBar = memo(function SeekBar({
+  disabled,
+  duration,
+  inPoint,
+  outPoint,
+  progressFillRef,
+  progressThumbRef,
+  seekBarRef,
+  sliderRef,
+  onPointerDown,
+  onKeyDown,
+}: {
+  disabled: boolean;
+  duration: number;
+  inPoint: number | null;
+  outPoint: number | null;
+  progressFillRef: React.RefObject<HTMLDivElement | null>;
+  progressThumbRef: React.RefObject<HTMLDivElement | null>;
+  seekBarRef: React.RefObject<HTMLDivElement | null>;
+  sliderRef: React.RefObject<HTMLDivElement | null>;
+  onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+}) {
+  return (
+    <div
+      ref={(el) => {
+        (seekBarRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+        (sliderRef as React.MutableRefObject<HTMLDivElement | null>).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}
+    >
+      <div
+        className="w-full rounded-full relative"
+        style={{ background: "rgba(255,255,255,0.15)", height: "3px" }}
+      >
+        <WorkAreaOverlay inPoint={inPoint} outPoint={outPoint} duration={duration} />
+        <div
+          ref={progressFillRef}
+          className="absolute top-0 bottom-0 left-0 z-[1] rounded-full"
+          style={{ background: "linear-gradient(90deg, var(--hf-accent, #3CE6AC), #2BBFA0)" }}
+        />
+        <div
+          ref={progressThumbRef}
+          className="absolute top-1/2 z-[4] w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 transition-transform group-hover:scale-125"
+          style={{
+            background: "var(--hf-accent, #3CE6AC)",
+            boxShadow: "0 0 6px rgba(60,230,172,0.4), 0 1px 4px rgba(0,0,0,0.4)",
+          }}
+        />
+      </div>
+    </div>
+  );
+});
+
+/* ── 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<TimeDisplayMode>("time");
-  const [jumpFrame, setJumpFrame] = useState("");
 
   const progressFillRef = useRef<HTMLDivElement>(null);
   const progressThumbRef = useRef<HTMLDivElement>(null);
   const timeDisplayRef = useRef<HTMLSpanElement>(null);
   const seekBarRef = useRef<HTMLDivElement>(null);
   const sliderRef = useRef<HTMLDivElement>(null);
-  const speedMenuContainerRef = useRef<HTMLDivElement>(null);
-  const shortcutsPanelRef = useRef<HTMLDivElement>(null);
   const isDraggingRef = useRef(false);
   const currentTimeRef = useRef(0);
   const timeDisplayModeRef = useRef(timeDisplayMode);
@@ -98,43 +359,6 @@ export const PlayerControls = memo(function PlayerControls({
   const controlsDisabled = disabled || !timelineReady;
   const audioAutoMuted = playbackRate > 1;
   const effectiveAudioMuted = shouldMutePreviewAudio(audioMuted, playbackRate);
-  const muteButtonLabel = audioAutoMuted
-    ? "Audio muted above 1x speed"
-    : audioMuted
-      ? "Unmute audio"
-      : "Mute audio";
-  useMountEffect(() => {
-    const updateProgress = (t: number) => {
-      currentTimeRef.current = t;
-      const dur = durationRef.current;
-      const pct = dur > 0 ? Math.min(100, (t / dur) * 100) : 0;
-      if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
-      if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
-      if (timeDisplayRef.current) {
-        timeDisplayRef.current.textContent =
-          timeDisplayModeRef.current === "frame" ? formatFrameTime(t, dur) : formatTime(t);
-      }
-      if (sliderRef.current) sliderRef.current.setAttribute("aria-valuenow", String(Math.round(t)));
-    };
-    const unsub = liveTime.subscribe(updateProgress);
-    updateProgress(usePlayerStore.getState().currentTime);
-
-    // Also poll every 500ms as a fallback in case liveTime doesn't fire
-    const interval = setInterval(() => {
-      const t = usePlayerStore.getState().currentTime;
-      const dur = usePlayerStore.getState().duration;
-      if (dur > 0 && t > 0) {
-        const pct = Math.min(100, (t / dur) * 100);
-        if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
-        if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
-      }
-    }, 500);
-
-    return () => {
-      unsub();
-      clearInterval(interval);
-    };
-  });
 
   useEffect(() => {
     if (!timeDisplayRef.current) return;
@@ -143,150 +367,21 @@ export const PlayerControls = memo(function PlayerControls({
       timeDisplayMode === "frame" ? formatFrameTime(t, duration) : formatTime(t);
   }, [duration, timeDisplayMode]);
 
-  useEffect(() => {
-    if (!showSpeedMenu) return;
-    const handleMouseDown = (e: MouseEvent) => {
-      if (
-        speedMenuContainerRef.current &&
-        !speedMenuContainerRef.current.contains(e.target as Node)
-      ) {
-        setShowSpeedMenu(false);
-      }
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-    };
-  }, [showSpeedMenu]);
-
-  useEffect(() => {
-    if (!showShortcuts) return;
-    const handleMouseDown = (e: MouseEvent) => {
-      if (shortcutsPanelRef.current && !shortcutsPanelRef.current.contains(e.target as Node)) {
-        setShowShortcuts(false);
-      }
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-    };
-  }, [showShortcuts]);
-
-  const seekFromClientX = useCallback(
-    (clientX: number) => {
-      if (disabled) return;
-      const bar = seekBarRef.current;
-      if (!bar || duration <= 0) return;
-      const rect = bar.getBoundingClientRect();
-      const percent = resolveSeekPercent(clientX, rect.left, rect.width);
-      // Immediately update progress bar visuals (don't wait for liveTime round-trip)
-      const pct = percent * 100;
-      if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
-      if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
-      onSeek(percent * duration);
-    },
-    [disabled, duration, onSeek],
-  );
-
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent<HTMLDivElement>) => {
-      // Ignore secondary mouse buttons — only primary (left click / touch /
-      // pen contact) should start a drag.
-      if (e.button !== 0) return;
-      e.preventDefault();
-      // preventDefault() on pointerdown also suppresses the implicit focus
-      // transfer that click normally grants a `tabIndex=0` element — which
-      // matches native `<input type="range">` behavior, but it also means a
-      // click-then-arrow-key workflow wouldn't work. Restore focus explicitly
-      // so seeking by click and nudging by arrow keys compose naturally.
-      e.currentTarget.focus();
-      isDraggingRef.current = true;
-
-      // `setPointerCapture` routes every subsequent pointermove/up to the
-      // slider element even when the pointer leaves its bounding box. Without
-      // it, fast drags on touch would lose events the moment the finger
-      // slips outside the 6 px-tall hit zone.
-      const target = e.currentTarget;
-      const pointerId = e.pointerId;
-      try {
-        target.setPointerCapture(pointerId);
-      } catch {
-        /* non-supporting browsers fall back to window listeners below */
-      }
-
-      seekFromClientX(e.clientX);
-
-      // During drag, update the slider visual immediately on every pointer
-      // event but RAF-throttle the actual onSeek call. The seek path triggers
-      // adapter.seek + setCurrentTime + React re-renders which can take >16ms
-      // on complex compositions — keeping visual feedback on the raw event and
-      // batching the expensive work to one call per frame keeps scrubbing at
-      // 60 fps.
-      let seekRafId = 0;
-      let pendingClientX = e.clientX;
-      const onMove = (ev: PointerEvent) => {
-        if (ev.pointerId !== pointerId || !isDraggingRef.current) return;
-        pendingClientX = ev.clientX;
-        const bar = seekBarRef.current;
-        const dur = durationRef.current;
-        if (bar && dur > 0) {
-          const rect = bar.getBoundingClientRect();
-          const pct = resolveSeekPercent(ev.clientX, rect.left, rect.width) * 100;
-          if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
-          if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
-        }
-        if (!seekRafId) {
-          seekRafId = requestAnimationFrame(() => {
-            seekRafId = 0;
-            if (isDraggingRef.current) seekFromClientX(pendingClientX);
-          });
-        }
-      };
-      const cleanup = () => {
-        isDraggingRef.current = false;
-        if (seekRafId) {
-          cancelAnimationFrame(seekRafId);
-          seekRafId = 0;
-        }
-        seekFromClientX(pendingClientX);
-        try {
-          target.releasePointerCapture(pointerId);
-        } catch {
-          /* Already released after the first cleanup — second invocation
-             via the window-fallback or visibility path is a no-op throw. */
-        }
-        target.removeEventListener("pointermove", onMove);
-        target.removeEventListener("pointerup", onUp);
-        target.removeEventListener("pointercancel", onUp);
-        window.removeEventListener("pointerup", onUp);
-        window.removeEventListener("pointercancel", onUp);
-        document.removeEventListener("visibilitychange", onVisibilityChange);
-        window.removeEventListener("blur", cleanup);
-      };
-      const onUp = (ev: PointerEvent) => {
-        if (ev.pointerId !== pointerId) return;
-        cleanup();
-      };
-      // iOS Safari does not reliably fire `pointercancel` when the page is
-      // backgrounded mid-drag (alt-tab, incoming call, switch apps). Without
-      // a release path the ref stays `true` until the next pointerdown — a
-      // stuck-scrubber class bug waiting to happen if anyone later gates
-      // rendering on `isDragging`. Synthesize the release on hide / blur.
-      const onVisibilityChange = () => {
-        if (document.visibilityState === "hidden") cleanup();
-      };
-
-      target.addEventListener("pointermove", onMove);
-      target.addEventListener("pointerup", onUp);
-      target.addEventListener("pointercancel", onUp);
-      // Window-level fallback in case capture fails and the pointer release
-      // lands outside the element (rare, but defensive).
-      window.addEventListener("pointerup", onUp);
-      window.addEventListener("pointercancel", onUp);
-      document.addEventListener("visibilitychange", onVisibilityChange);
-      window.addEventListener("blur", cleanup);
+  const { handlePointerDown } = useSeekBarDrag(
+    {
+      seekBarRef,
+      progressFillRef,
+      progressThumbRef,
+      sliderRef,
+      timeDisplayRef,
+      isDraggingRef,
+      durationRef,
+      currentTimeRef,
+      timeDisplayModeRef,
     },
-    [seekFromClientX],
+    onSeek,
+    disabled,
+    duration,
   );
 
   const handleKeyDown = useCallback(
@@ -304,43 +399,15 @@ export const PlayerControls = memo(function PlayerControls({
     [disabled, timelineReady, duration, onSeek],
   );
 
-  const commitJumpFrame = useCallback(() => {
-    if (disabled) return;
-    const frame = Number.parseInt(jumpFrame, 10);
-    if (!Number.isFinite(frame) || duration <= 0) return;
-    onSeek(Math.min(duration, frameToSeconds(Math.max(0, frame))));
-  }, [disabled, duration, jumpFrame, onSeek]);
-
-  const handleJumpSubmit = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-      commitJumpFrame();
-    },
-    [commitJumpFrame],
-  );
-
-  const handleJumpKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key !== "Enter") return;
-      e.preventDefault();
-      commitJumpFrame();
-    },
-    [commitJumpFrame],
-  );
-
   return (
     <div
       className="px-4 py-2 flex flex-wrap items-center gap-x-2 gap-y-1"
       aria-disabled={disabled || undefined}
       style={{
         borderTop: "1px solid rgba(255,255,255,0.04)",
-        // Add iOS safe-area inset so Safari's bottom URL bar doesn't occlude
-        // the Play button + timecode on iPhone. `env(safe-area-inset-bottom)`
-        // is 0 everywhere else, so this is a no-op on desktop.
         paddingBottom: "calc(0.5rem + env(safe-area-inset-bottom))",
       }}
     >
-      {/* Play/Pause button */}
       <Tooltip label={isPlaying ? "Pause" : "Play"}>
         <button
           type="button"
@@ -353,20 +420,10 @@ export const PlayerControls = memo(function PlayerControls({
           className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-colors"
           style={{ background: "rgba(255,255,255,0.06)" }}
         >
-          {isPlaying ? (
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
-              <rect x="6" y="4" width="4" height="16" rx="1" />
-              <rect x="14" y="4" width="4" height="16" rx="1" />
-            </svg>
-          ) : (
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
-              <polygon points="6,3 20,12 6,21" />
-            </svg>
-          )}
+          {isPlaying ? <PauseIcon /> : <PlayIcon />}
         </button>
       </Tooltip>
 
-      {/* Time display — click to toggle time/frame mode */}
       <Tooltip
         label={timeDisplayMode === "time" ? "Switch to frame display" : "Switch to time display"}
       >
@@ -387,470 +444,48 @@ export const PlayerControls = memo(function PlayerControls({
         </button>
       </Tooltip>
 
-      {/* Seek bar — teal progress fill */}
-      <div
-        ref={(el) => {
-          (seekBarRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
-          (sliderRef as React.MutableRefObject<HTMLDivElement | null>).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" }}
+      <SeekBar
+        disabled={disabled}
+        duration={duration}
+        inPoint={inPoint}
+        outPoint={outPoint}
+        progressFillRef={progressFillRef}
+        progressThumbRef={progressThumbRef}
+        seekBarRef={seekBarRef}
+        sliderRef={sliderRef}
         onPointerDown={handlePointerDown}
         onKeyDown={handleKeyDown}
-      >
-        <div
-          className="w-full rounded-full relative"
-          style={{ background: "rgba(255,255,255,0.15)", height: "3px" }}
-        >
-          {/* Work-area band between in/out points */}
-          {(inPoint !== null || outPoint !== null) && duration > 0 && (
-            <div
-              className="absolute top-0 bottom-0 pointer-events-none"
-              style={{
-                left: `${inPoint !== null ? Math.min(100, (inPoint / duration) * 100) : 0}%`,
-                right: `${outPoint !== null ? 100 - Math.min(100, (outPoint / duration) * 100) : 0}%`,
-                background: "rgba(60,230,172,0.15)",
-              }}
-            />
-          )}
-          {/* Progress fill — width is controlled imperatively via ref to avoid React re-render resets */}
-          <div
-            ref={progressFillRef}
-            className="absolute top-0 bottom-0 left-0 z-[1] rounded-full"
-            style={{ background: "linear-gradient(90deg, var(--hf-accent, #3CE6AC), #2BBFA0)" }}
-          />
-          {/* In-point marker */}
-          {inPoint !== null && duration > 0 && (
-            <div
-              className="absolute z-[3] pointer-events-none"
-              style={{
-                left: `${Math.min(100, (inPoint / duration) * 100)}%`,
-                top: "50%",
-                transform: "translate(-50%, -50%)",
-                width: "2px",
-                height: "10px",
-                background: "#3CE6AC",
-                borderRadius: "1px",
-              }}
-            />
-          )}
-          {/* Out-point marker */}
-          {outPoint !== null && duration > 0 && (
-            <div
-              className="absolute z-[3] pointer-events-none"
-              style={{
-                left: `${Math.min(100, (outPoint / duration) * 100)}%`,
-                top: "50%",
-                transform: "translate(-50%, -50%)",
-                width: "2px",
-                height: "10px",
-                background: "#3CE6AC",
-                borderRadius: "1px",
-              }}
-            />
-          )}
-          {/* Playhead thumb — left is controlled imperatively via ref */}
-          <div
-            ref={progressThumbRef}
-            className="absolute top-1/2 z-[4] w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 transition-transform group-hover:scale-125"
-            style={{
-              background: "var(--hf-accent, #3CE6AC)",
-              boxShadow: "0 0 6px rgba(60,230,172,0.4), 0 1px 4px rgba(0,0,0,0.4)",
-            }}
-          />
-        </div>
-      </div>
+      />
 
-      {/* Mute toggle */}
-      <Tooltip label={muteButtonLabel}>
-        <button
-          type="button"
-          onClick={() => {
-            if (!audioAutoMuted) {
-              trackStudioEvent("playback", { action: "mute_toggle", muted: !audioMuted });
-              setAudioMuted(!audioMuted);
-            }
-          }}
-          disabled={controlsDisabled || audioAutoMuted}
-          aria-label={muteButtonLabel}
-          aria-pressed={effectiveAudioMuted}
-          className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors disabled:pointer-events-none ${
-            effectiveAudioMuted
-              ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-              : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
-          } ${audioAutoMuted ? "opacity-70" : ""}`}
-        >
-          {effectiveAudioMuted ? (
-            <svg
-              width="13"
-              height="13"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M11 5 6 9H3v6h3l5 4V5Z" />
-              <path d="m19 9-6 6" />
-              <path d="m13 9 6 6" />
-            </svg>
-          ) : (
-            <svg
-              width="13"
-              height="13"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M11 5 6 9H3v6h3l5 4V5Z" />
-              <path d="M15.5 8.5a5 5 0 0 1 0 7" />
-              <path d="M18.5 5.5a9 9 0 0 1 0 13" />
-            </svg>
-          )}
-        </button>
-      </Tooltip>
+      <MuteButton
+        audioMuted={audioMuted}
+        audioAutoMuted={audioAutoMuted}
+        effectiveAudioMuted={effectiveAudioMuted}
+        controlsDisabled={controlsDisabled}
+        setAudioMuted={setAudioMuted}
+      />
 
-      {/* Speed control */}
-      <div ref={speedMenuContainerRef} className="relative flex-shrink-0">
-        <Tooltip label="Playback speed">
-          <button
-            type="button"
-            onClick={() => setShowSpeedMenu((v) => !v)}
-            disabled={disabled}
-            className="w-10 px-2 py-1 rounded-md text-[10px] font-mono tabular-nums transition-colors"
-            style={{ color: "#71717A", background: "rgba(255,255,255,0.04)" }}
-          >
-            {playbackRate === 1 ? "1x" : `${playbackRate}x`}
-          </button>
-        </Tooltip>
-        {showSpeedMenu && (
-          <div
-            className="absolute bottom-full right-0 mb-1.5 rounded-lg shadow-xl z-50 min-w-[56px] overflow-hidden"
-            style={{ background: "#161618", border: "1px solid rgba(255,255,255,0.08)" }}
-          >
-            {SPEED_OPTIONS.map((rate) => (
-              <button
-                key={rate}
-                onClick={() => {
-                  trackStudioEvent("playback", { action: "speed_change", rate });
-                  setPlaybackRate(rate);
-                  setShowSpeedMenu(false);
-                }}
-                className="block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors"
-                style={{
-                  color: rate === playbackRate ? "#FAFAFA" : "#71717A",
-                  background: rate === playbackRate ? "rgba(255,255,255,0.06)" : "transparent",
-                }}
-                onMouseEnter={(e) => {
-                  if (rate !== playbackRate)
-                    e.currentTarget.style.background = "rgba(255,255,255,0.04)";
-                }}
-                onMouseLeave={(e) => {
-                  if (rate !== playbackRate) e.currentTarget.style.background = "transparent";
-                }}
-              >
-                {rate}x
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
+      <SpeedMenu
+        playbackRate={playbackRate}
+        setPlaybackRate={setPlaybackRate}
+        disabled={disabled}
+      />
 
-      <Tooltip label="Loop playback">
-        <button
-          type="button"
-          onClick={() => {
-            trackStudioEvent("playback", { action: "loop_toggle", enabled: !loopEnabled });
-            setLoopEnabled(!loopEnabled);
-          }}
-          disabled={disabled}
-          className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
-            loopEnabled
-              ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-              : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
-          }`}
-          aria-label={loopEnabled ? "Disable loop playback" : "Enable loop playback"}
-          aria-pressed={loopEnabled}
-        >
-          <svg
-            width="13"
-            height="13"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M17 2l4 4-4 4" />
-            <path d="M3 11V9a4 4 0 0 1 4-4h14" />
-            <path d="M7 22l-4-4 4-4" />
-            <path d="M21 13v2a4 4 0 0 1-4 4H3" />
-          </svg>
-        </button>
-      </Tooltip>
+      <LoopButton loopEnabled={loopEnabled} disabled={disabled} setLoopEnabled={setLoopEnabled} />
 
-      {/* Fullscreen toggle */}
       {onToggleFullscreen && (
-        <Tooltip label={isFullscreen ? "Exit fullscreen (F)" : "Enter fullscreen (F)"}>
-          <button
-            type="button"
-            onClick={() => {
-              trackStudioEvent("playback", { action: "fullscreen_toggle", active: !isFullscreen });
-              onToggleFullscreen();
-            }}
-            className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors ${
-              isFullscreen
-                ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
-            }`}
-            aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
-          >
-            {isFullscreen ? (
-              <svg
-                width="13"
-                height="13"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <path d="M8 3v3a2 2 0 0 1-2 2H3" />
-                <path d="M21 8h-3a2 2 0 0 1-2-2V3" />
-                <path d="M3 16h3a2 2 0 0 1 2 2v3" />
-                <path d="M16 21v-3a2 2 0 0 1 2-2h3" />
-              </svg>
-            ) : (
-              <svg
-                width="13"
-                height="13"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                aria-hidden="true"
-              >
-                <path d="M8 3H5a2 2 0 0 0-2 2v3" />
-                <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
-                <path d="M3 16v3a2 2 0 0 0 2 2h3" />
-                <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
-              </svg>
-            )}
-          </button>
-        </Tooltip>
+        <FullscreenButton isFullscreen={isFullscreen} onToggleFullscreen={onToggleFullscreen} />
       )}
 
-      {/* Keyboard shortcuts + frame jump + work area — click to open panel */}
-      <div ref={shortcutsPanelRef} className="relative flex-shrink-0">
-        <Tooltip label="Shortcuts and tools">
-          <button
-            type="button"
-            onClick={() => setShowShortcuts((v) => !v)}
-            className={`w-6 h-6 flex items-center justify-center rounded border transition-colors ${
-              showShortcuts
-                ? "border-neutral-600 text-neutral-200 bg-neutral-800"
-                : "border-neutral-800 text-neutral-600 hover:text-neutral-300 hover:border-neutral-600"
-            }`}
-            aria-label="Shortcuts and tools"
-            aria-expanded={showShortcuts}
-          >
-            <svg
-              width="11"
-              height="11"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.75"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <rect x="2" y="4" width="20" height="16" rx="2" />
-              <path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8" />
-            </svg>
-          </button>
-        </Tooltip>
-        {showShortcuts && (
-          <div
-            className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto"
-            style={{
-              background: "#161618",
-              border: "1px solid rgba(255,255,255,0.08)",
-              maxHeight: "min(280px, calc(100vh - 80px))",
-            }}
-          >
-            {/* Frame jump */}
-            <div className="px-3 pt-3 pb-2.5">
-              <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
-                Jump to frame
-              </p>
-              <form onSubmit={handleJumpSubmit} className="flex items-center gap-1.5">
-                <input
-                  value={jumpFrame}
-                  onChange={(e) => setJumpFrame(e.target.value)}
-                  disabled={disabled}
-                  inputMode="numeric"
-                  pattern="[0-9]*"
-                  aria-label="Jump to frame"
-                  placeholder="frame number"
-                  className="h-6 flex-1 rounded border border-neutral-700 bg-neutral-900 px-2 text-[10px] font-mono tabular-nums text-neutral-200 outline-none transition-colors placeholder:text-neutral-600 focus:border-studio-accent/60"
-                  onKeyDown={handleJumpKeyDown}
-                  onBlur={commitJumpFrame}
-                />
-                <Tooltip label="Jump to frame">
-                  <button
-                    type="submit"
-                    disabled={disabled}
-                    className="h-6 px-2 rounded border border-neutral-700 text-[10px] text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800 disabled:opacity-40"
-                  >
-                    Go
-                  </button>
-                </Tooltip>
-              </form>
-            </div>
-            <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
-            {/* Work area */}
-            <div className="px-3 pt-2.5 pb-2">
-              <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
-                Work area
-              </p>
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
-                      style={{ background: "rgba(255,255,255,0.05)" }}
-                    >
-                      I
-                    </span>
-                    <span className="text-[10px] text-neutral-400">In-point</span>
-                  </div>
-                  <div className="flex items-center gap-1.5">
-                    {inPoint !== null ? (
-                      <>
-                        <span className="font-mono text-[10px] text-neutral-300">
-                          {formatTime(inPoint)}
-                        </span>
-                        <Tooltip label="Clear in-point">
-                          <button
-                            type="button"
-                            onClick={() => setInPoint(null)}
-                            className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
-                            aria-label="Clear in-point"
-                          >
-                            <svg
-                              width="8"
-                              height="8"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2.5"
-                            >
-                              <path d="M18 6L6 18M6 6l12 12" />
-                            </svg>
-                          </button>
-                        </Tooltip>
-                      </>
-                    ) : (
-                      <span className="text-[10px] text-neutral-600">—</span>
-                    )}
-                  </div>
-                </div>
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
-                      style={{ background: "rgba(255,255,255,0.05)" }}
-                    >
-                      O
-                    </span>
-                    <span className="text-[10px] text-neutral-400">Out-point</span>
-                  </div>
-                  <div className="flex items-center gap-1.5">
-                    {outPoint !== null ? (
-                      <>
-                        <span className="font-mono text-[10px] text-neutral-300">
-                          {formatTime(outPoint)}
-                        </span>
-                        <Tooltip label="Clear out-point">
-                          <button
-                            type="button"
-                            onClick={() => setOutPoint(null)}
-                            className="w-4 h-4 flex items-center justify-center rounded text-neutral-500 hover:text-neutral-200 transition-colors"
-                            aria-label="Clear out-point"
-                          >
-                            <svg
-                              width="8"
-                              height="8"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2.5"
-                            >
-                              <path d="M18 6L6 18M6 6l12 12" />
-                            </svg>
-                          </button>
-                        </Tooltip>
-                      </>
-                    ) : (
-                      <span className="text-[10px] text-neutral-600">—</span>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
-            {/* Shortcuts */}
-            <div className="px-3 pt-2.5 pb-3 flex flex-col gap-3">
-              {SHORTCUT_SECTIONS.map((section) => (
-                <div key={section.title}>
-                  <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
-                    {section.title}
-                  </p>
-                  <div className="flex flex-col gap-1">
-                    {section.hints.map((hint) => (
-                      <div key={hint.key} className="flex items-center gap-3">
-                        <span
-                          className="font-mono text-[10px] rounded border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center"
-                          style={{ background: "rgba(255,255,255,0.05)" }}
-                        >
-                          {hint.key}
-                        </span>
-                        <span className="text-[10px] text-neutral-400">{hint.label}</span>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
+      <ShortcutsPanel
+        disabled={disabled}
+        duration={duration}
+        inPoint={inPoint}
+        outPoint={outPoint}
+        setInPoint={setInPoint}
+        setOutPoint={setOutPoint}
+        onSeek={onSeek}
+      />
     </div>
   );
 });