feat: toggle video / audio with keybinding

js/src/hooks/use-stream-keyboard-nav.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useMediaSettingsStore } from "@/stores/media-settings-store";
 
 interface UseStreamKeyboardNavOptions {
   streams: Array<{ id: string }>;
@@ -12,6 +13,8 @@ export function useStreamKeyboardNav({
   onNavigate,
 }: UseStreamKeyboardNavOptions) {
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
+  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
 
   // Initialize selection when streams first load; clear if streams become empty.
   // Do NOT reset on every Firestore update — that would scroll the list to the top.
@@ -61,6 +64,13 @@ export function useStreamKeyboardNav({
         return;
       }
 
+      // V: toggle video / audio
+      if (e.key === "v" || e.key === "V") {
+        e.preventDefault();
+        setRecordingMode(recordingMode === "video" ? "audio" : "video");
+        return;
+      }
+
       // Arrow keys: move selection
       let delta: number | null = null;
 
@@ -81,7 +91,7 @@ export function useStreamKeyboardNav({
     // components (ToggleGroup, etc.) consume them for their own navigation.
     window.addEventListener("keydown", handleKeyDown, true);
     return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [enabled, streams, onNavigate]);
+  }, [enabled, streams, onNavigate, recordingMode, setRecordingMode]);
 
   return { selectedIndex };
 }