feat(shortcut): add M key to toggle audio mute (#173)

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) {
       <button
         type="button"
         onClick={() => onChange({ keepAudio: !recipe.keepAudio })}
-        aria-label={recipe.keepAudio ? "Mute video audio" : "Unmute video audio"}
+        aria-label={recipe.keepAudio ? "Mute video audio (M)" : "Unmute video audio (M)"}
         aria-pressed={recipe.keepAudio}
         className={cn(
           "w-full flex items-center gap-3 p-3 rounded-lg border transition-all duration-150",
@@ -85,9 +54,15 @@ export default function AudioSpeedControl({ recipe, onChange }: Props) {
         <span className="sr-only">
           {recipe.keepAudio ? "Turn audio off" : "Turn audio on"}
         </span>
-        <span className="text-sm font-heading font-semibold">
+        <span className="text-sm font-heading font-semibold flex-1 text-left">
           {recipe.keepAudio ? "Audio on" : "Muted"}
         </span>
+        <kbd
+          aria-hidden="true"
+          className="ml-auto text-[10px] font-mono px-1.5 py-0.5 rounded border border-current opacity-40"
+        >
+          M
+        </kbd>
       </button>
 
       <div>

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 (
+    <kbd className="inline-flex items-center justify-center min-w-[1.5rem] px-1.5 py-0.5 rounded border border-[var(--border)] bg-[var(--bg)] text-[10px] font-mono text-[var(--muted)] leading-none">
+      {children}
+    </kbd>
+  );
+}
+
+/** Collapsible panel that lists all keyboard shortcuts. */
+function KeyboardShortcutsPanel() {
+  const [open, setOpen] = useState(false);
+
+  const shortcuts: { keys: React.ReactNode[]; label: string }[] = [
+    { keys: [<Kbd key="m">M</Kbd>], label: "Toggle audio mute" },
+    { keys: [<Kbd key="ctrl">Ctrl</Kbd>, <span key="plus" className="text-[var(--muted)] text-xs">+</span>, <Kbd key="enter">↵</Kbd>], label: "Export video" },
+  ];
+
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--surface)] animate-fade-in overflow-hidden">
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls="keyboard-shortcuts-list"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-[var(--border)] transition-colors duration-150"
+      >
+        <span className="text-[10px] font-heading font-bold uppercase tracking-widest text-[var(--muted)] flex items-center gap-2">
+          <Kbd>⌨</Kbd>
+          Keyboard Shortcuts
+        </span>
+        <svg
+          aria-hidden="true"
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          className={cn("text-[var(--muted)] transition-transform duration-200", open && "rotate-180")}
+        >
+          <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      {open && (
+        <ul
+          id="keyboard-shortcuts-list"
+          className="px-4 pb-3 space-y-2 border-t border-[var(--border)]"
+        >
+          {shortcuts.map(({ keys, label }) => (
+            <li key={label} className="flex items-center justify-between gap-3 pt-2">
+              <span className="text-xs text-[var(--muted)]">{label}</span>
+              <span className="flex items-center gap-1 shrink-0">{keys}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
 export default function VideoEditor() {
   const {
    file, duration, recipe, status, progress,
@@ -347,6 +407,8 @@ export default function VideoEditor() {
               </div>
             </div>
 
+            <KeyboardShortcutsPanel />
+
             <button
               id="export-button"
               type="button"

src/hooks/useVideoEditor.ts

@@ -331,7 +331,7 @@ export function useVideoEditor() {
         exportAbortControllerRef.current = null;
       }
     }
-  }, [file, recipe, result, status, overlayFile, overlayPosition, overlaySize, overlayOpacity, duration]);
+  }, [file, recipe, result, status, overlayFile, overlayPosition, overlaySize, overlayOpacity, duration, loopMusic, musicFile, musicVolume, originalAudioVolume]);
 
 
   useEffect(() => {
@@ -386,6 +386,31 @@ export function useVideoEditor() {
     };
   }, [file, status, handleExport]);
 
+  // M key: toggle audio mute — only when a file is loaded and focus isn't in a text field
+  useEffect(() => {
+    if (!file) return;
+
+    const handleMuteShortcut = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() !== "m" || e.ctrlKey || e.metaKey || e.altKey) return;
+
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      setRecipe((prev) => ({ ...prev, keepAudio: !prev.keepAudio }));
+    };
+
+    document.addEventListener("keydown", handleMuteShortcut);
+    return () => {
+      document.removeEventListener("keydown", handleMuteShortcut);
+    };
+  }, [file]);
+
   useEffect(()=>{
     return ()=>{
       if(result?.blobUrl){

src/lib/tests/ffmpeg.test.ts

@@ -3,41 +3,46 @@ import { buildAudioFilter } from "../ffmpeg";
 
 describe("buildAudioFilter", () => {
   it("should return an empty string for 1.0x speed", () => {
-    expect(buildAudioFilter(1)).toBe("");
+    expect(buildAudioFilter(1, false)).toBe("");
   });
 
   it("should chain two 0.5x filters for 0.25x speed", () => {
-    expect(buildAudioFilter(0.25)).toBe("atempo=0.5,atempo=0.5");
+    expect(buildAudioFilter(0.25, false)).toBe("atempo=0.5,atempo=0.5");
   });
 
   it("should chain two 2.0x filters for 4.0x speed", () => {
-    expect(buildAudioFilter(4)).toBe("atempo=2.0,atempo=2");
+    expect(buildAudioFilter(4, false)).toBe("atempo=2.0,atempo=2");
   });
 
   it("should chain multiple 0.5x filters and a remainder for 0.1x speed", () => {
     // 0.1 / 0.5 = 0.2
     // 0.2 / 0.5 = 0.4
     // 0.4 / 0.5 = 0.8
     // Result should be three 0.5s and one 0.8
-    expect(buildAudioFilter(0.1)).toBe("atempo=0.5,atempo=0.5,atempo=0.5,atempo=0.8");
+    expect(buildAudioFilter(0.1, false)).toBe("atempo=0.5,atempo=0.5,atempo=0.5,atempo=0.8");
   });
 
   it("should chain multiple 2.0x filters and a remainder for 3.0x speed", () => {
     // 3.0 / 2.0 = 1.5
-    expect(buildAudioFilter(3)).toBe("atempo=2.0,atempo=1.5");
+    expect(buildAudioFilter(3, false)).toBe("atempo=2.0,atempo=1.5");
   });
 
   it("should handle boundary values inside the 0.5x-2.0x range without chaining", () => {
-    expect(buildAudioFilter(0.5)).toBe("atempo=0.5");
-    expect(buildAudioFilter(2.0)).toBe("atempo=2"); // Note: Number(2.0.toFixed(4)) -> 2
-    expect(buildAudioFilter(1.5)).toBe("atempo=1.5");
-    expect(buildAudioFilter(0.75)).toBe("atempo=0.75");
+    expect(buildAudioFilter(0.5, false)).toBe("atempo=0.5");
+    expect(buildAudioFilter(2.0, false)).toBe("atempo=2"); // Note: Number(2.0.toFixed(4)) -> 2
+    expect(buildAudioFilter(1.5, false)).toBe("atempo=1.5");
+    expect(buildAudioFilter(0.75, false)).toBe("atempo=0.75");
   });
 
   it("should chain properly for very large speeds", () => {
     // 10 / 2.0 = 5
     // 5 / 2.0 = 2.5
     // 2.5 / 2.0 = 1.25
-    expect(buildAudioFilter(10)).toBe("atempo=2.0,atempo=2.0,atempo=2.0,atempo=1.25");
+    expect(buildAudioFilter(10, false)).toBe("atempo=2.0,atempo=2.0,atempo=2.0,atempo=1.25");
+  });
+
+  it("should append loudnorm filter when normalizeAudio is true", () => {
+    const result = buildAudioFilter(1, true);
+    expect(result).toContain("loudnorm");
   });
 });