diff --git a/src/components/AudioSpeedControl.tsx b/src/components/AudioSpeedControl.tsx index 3123612b..9a186748 100644 --- a/src/components/AudioSpeedControl.tsx +++ b/src/components/AudioSpeedControl.tsx @@ -1,5 +1,4 @@ "use client"; -import { useEffect } from "react"; import { EditRecipe } from "@/lib/types" import { SPEED_STEPS } from "@/lib/constants"; @@ -12,36 +11,6 @@ interface Props { } export default function AudioSpeedControl({ recipe, onChange }: Props) { - useEffect(() => { - const handler = (e: KeyboardEvent) => { - const target = e.target as HTMLElement; - - if ( - target.tagName === "INPUT" || - target.tagName === "TEXTAREA" || - target.isContentEditable - ) { - return; - } - - if ( - e.key.toLowerCase() === "m" && - !e.ctrlKey && - !e.metaKey - ) { - onChange({ - keepAudio: !recipe.keepAudio, - }); - } - }; - - document.addEventListener("keydown", handler); - - return () => { - document.removeEventListener("keydown", handler); - }; - }, [recipe.keepAudio, onChange]); - const speedIndex = SPEED_STEPS.indexOf(recipe.speed as (typeof SPEED_STEPS)[number]); const getSpeedDescription = (speed: number) => { @@ -71,7 +40,7 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx index 3ffb6a67..f8ee679e 100644 --- a/src/components/VideoEditor.tsx +++ b/src/components/VideoEditor.tsx @@ -48,6 +48,66 @@ function Section({ icon, title, children, delay = 0 }: SectionProps) { ); } +/** Inline keyboard hint badge. */ +function Kbd({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} + +/** Collapsible panel that lists all keyboard shortcuts. */ +function KeyboardShortcutsPanel() { + const [open, setOpen] = useState(false); + + const shortcuts: { keys: React.ReactNode[]; label: string }[] = [ + { keys: [M], label: "Toggle audio mute" }, + { keys: [Ctrl, +, ], label: "Export video" }, + ]; + + return ( +
+ + + {open && ( + + )} +
+ ); +} + export default function VideoEditor() { const { file, duration, recipe, status, progress, @@ -347,6 +407,8 @@ export default function VideoEditor() {
+ +