mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 01:56:04 +00:00
Miguel Ángel
ea4d920589
Split PlayerControls.tsx into focused sub-components (SeekBar, WorkAreaOverlay, MuteButton, LoopButton, FullscreenButton, ShortcutsPanel, SpeedMenu) and extracted seek bar drag/progress tracking into useSeekBarDrag hook. Split manualEditsDom.ts patch-builder functions into manualEditsDomPatches.ts with data-driven helpers to reduce duplication and complexity. Extracted per-type reapply helpers from reapplyPositionEditsAfterSeek and factored out identity-matrix check from stripGsapTranslateFromTransform. Raised file-size limit from 500 to 600 lines, removed .filesize-allowlist.
278 lines
11 KiB
TypeScript
278 lines
11 KiB
TypeScript
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<HTMLDivElement>(null);
|
|
|
|
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 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 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))",
|
|
}}
|
|
>
|
|
<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)" }} />
|
|
<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)" }} />
|
|
<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>
|
|
);
|
|
});
|