feat: toggle video / audio with keybinding

js/src/features/particles/stream-view.tsx

@@ -11,6 +11,7 @@ import { TextParticleView } from "@/features/particles/text-particle-view";
 import { FallbackParticleView } from "@/features/particles/fallback-particle-view";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { VideoAudioToggle } from "@/components/video-audio-toggle";
+import { useMediaSettingsStore } from "@/stores/media-settings-store";
 import { KeybindingsOverlay, type KeybindingGroup } from "@/components/keybindings-overlay";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useNetwork, useNetworks } from "@/hooks/use-networks";
@@ -132,6 +133,7 @@ const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
       { keys: ["Hold", "`"], description: "Reply" },
       { keys: ["S"], description: "Screen record" },
       { keys: ["T"], description: "Text compose" },
+      { keys: ["V"], description: "Toggle video / audio" },
       { keys: ["H"], description: "Join huddle" },
     ],
   },
@@ -174,6 +176,8 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
   usePrefetchAdjacentMedia(children, currentIndex);
 
   const authedUser = useAuthStore((s) => s.user);
+  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
+  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
   const network = useNetwork(networkId);
   const presenceBySegment = usePresencePositions(
     streamParticle.playback_markers,
@@ -284,6 +288,10 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
           navigate(`/${networkId}`);
           break;
         }
+        case "v":
+          e.preventDefault();
+          setRecordingMode(recordingMode === "video" ? "audio" : "video");
+          break;
         case "?":
           e.preventDefault();
           setShowKeybindings((v) => !v);
@@ -316,7 +324,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
       window.removeEventListener("keyup", handleKeyUp);
     };
   },
-    [composeActive, next, prev, pause, resume, navigate, networkId, streamParticle.id, setShowKeybindings, handleToggleReaction],
+    [composeActive, next, prev, pause, resume, navigate, networkId, streamParticle.id, setShowKeybindings, handleToggleReaction, recordingMode, setRecordingMode],
   );
 
   // Click-to-navigate: left 30% = prev, right 70% = next