diff --git a/app/custom/VideoConferenceClientImpl.tsx b/app/custom/VideoConferenceClientImpl.tsx index baa6872..b00fa17 100644 --- a/app/custom/VideoConferenceClientImpl.tsx +++ b/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: { @@ -69,6 +70,7 @@ export function VideoConferenceClientImpl(props: { return (
+ + ( diff --git a/lib/KeyboardShortcuts.tsx b/lib/KeyboardShortcuts.tsx new file mode 100644 index 0000000..5a0c659 --- /dev/null +++ b/lib/KeyboardShortcuts.tsx @@ -0,0 +1,31 @@ +'use client'; + +import React from 'react'; +import { Track } from 'livekit-client'; +import { useTrackToggle } from '@livekit/components-react'; + +export function KeyboardShortcuts() { + const { toggle: toggleMic } = useTrackToggle({ source: Track.Source.Microphone }); + const { toggle: toggleCamera } = 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(); + } + + // Toggle camera: Cmd/Ctrl-Shift-V + if (event.key === 'V' && (event.ctrlKey || event.metaKey)) { + event.preventDefault(); + toggleCamera(); + } + } + + window.addEventListener('keydown', handleShortcut); + return () => window.removeEventListener('keydown', handleShortcut); + }, [toggleMic, toggleCamera]); + + return null; +} diff --git a/package.json b/package.json index 07084fe..b032c61 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,10 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "lint:fix": "next lint --fix", + "format:check": "prettier --check \"**/*.{ts,tsx,md,json}\"", + "format:write": "prettier --write \"**/*.{ts,tsx,md,json}\"" }, "dependencies": { "@datadog/browser-logs": "^5.23.3",