feat: add common keyboard shortcuts

app/custom/VideoConferenceClientImpl.tsx

@@ -13,6 +13,7 @@ import {
 import { DebugMode } from '@/lib/Debug';
 import { useEffect, useMemo } from 'react';
 import { decodePassphrase } from '@/lib/client-utils';
+import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts';
 import { SettingsMenu } from '@/lib/SettingsMenu';
 
 export function VideoConferenceClientImpl(props: {
@@ -39,9 +40,9 @@ export function VideoConferenceClientImpl(props: {
       dynacast: true,
       e2ee: e2eeEnabled
         ? {
-            keyProvider,
-            worker,
-          }
+          keyProvider,
+          worker,
+        }
         : undefined,
     };
   }, []);
@@ -69,6 +70,7 @@ export function VideoConferenceClientImpl(props: {
   return (
     <div className="lk-room-container">
       <RoomContext.Provider value={room}>
+        <KeyboardShortcuts />
         <VideoConference
           chatMessageFormatter={formatChatMessageLinks}
           SettingsComponent={

app/rooms/[roomName]/PageClientImpl.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+import React from 'react';
 import { decodePassphrase } from '@/lib/client-utils';
 import { DebugMode } from '@/lib/Debug';
+import { KeyboardShortcuts } from '@/lib/KeyboardShortcuts';
 import { RecordingIndicator } from '@/lib/RecordingIndicator';
 import { SettingsMenu } from '@/lib/SettingsMenu';
 import { ConnectionDetails } from '@/lib/types';
@@ -23,7 +25,6 @@ import {
   RoomEvent,
 } from 'livekit-client';
 import { useRouter } from 'next/navigation';
-import React from 'react';
 
 const CONN_DETAILS_ENDPOINT =
   process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details';
@@ -128,9 +129,9 @@ function VideoConferenceComponent(props: {
       dynacast: true,
       e2ee: e2eeEnabled
         ? {
-            keyProvider,
-            worker,
-          }
+          keyProvider,
+          worker,
+        }
         : undefined,
     };
   }, [props.userChoices, props.options.hq, props.options.codec]);
@@ -213,6 +214,7 @@ function VideoConferenceComponent(props: {
   return (
     <div className="lk-room-container">
       <RoomContext.Provider value={room}>
+        <KeyboardShortcuts />
         <VideoConference
           chatMessageFormatter={formatChatMessageLinks}
           SettingsComponent={SHOW_SETTINGS_MENU ? SettingsMenu : undefined}

lib/KeyboardShortcuts.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import React from 'react';
+import { Track } from 'livekit-client';
+import { useLocalParticipant, useTrackToggle } from '@livekit/components-react';
+
+export function KeyboardShortcuts() {
+  const _ = useLocalParticipant();
+  const { toggle: toggleMic, enabled: micEnabled } = useTrackToggle({ source: Track.Source.Microphone });
+  const { toggle: toggleCamera, enabled: cameraEnabled } = useTrackToggle({ source: Track.Source.Camera });
+
+  React.useEffect(() => {
+    function handleShortcut(event: KeyboardEvent) {
+      // Toggle microphone: Cmd/Ctrl-Shift-A
+      if (toggleMic && event.key === 'A' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        toggleMic(!micEnabled, true);
+      }
+
+      // Toggle camera: Cmd/Ctrl-Shift-V
+      if (event.key === 'V' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        toggleCamera(!cameraEnabled, true);
+      }
+    }
+
+    window.addEventListener('keydown', handleShortcut);
+    return () => window.removeEventListener('keydown', handleShortcut);
+  }, [
+    toggleMic, micEnabled,
+    toggleCamera, cameraEnabled,
+  ]);
+
+  return null;
+}