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 && (
+
+ {shortcuts.map(({ keys, label }) => (
+ -
+ {label}
+ {keys}
+
+ ))}
+
+ )}
+
+ );
+}
+
export default function VideoEditor() {
const {
file, duration, recipe, status, progress,
@@ -347,6 +407,8 @@ export default function VideoEditor() {
+
+