diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx index 09bf0cc..c7bb0e6 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx @@ -32,6 +32,7 @@ export type SelectToggleDeviceConfig = { iconOn: RemixiconComponentType iconOff: RemixiconComponentType shortcut?: Shortcut + longPress?: Shortcut } type SelectToggleDeviceConfigMap = { @@ -47,6 +48,9 @@ const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = { key: 'd', ctrlKey: true, }, + longPress: { + key: 'Space', + }, }, [Track.Source.Camera]: { kind: 'videoinput', diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx index c8fcc28..b3cde88 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx @@ -1,9 +1,12 @@ import { ToggleButton } from '@/primitives' import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut' -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { appendShortcutLabel } from '@/features/shortcuts/utils' import { useTranslation } from 'react-i18next' import { SelectToggleDeviceConfig } from './SelectToggleDevice' +import useLongPress from '@/features/shortcuts/useLongPress' +import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker' +import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react' export type ToggleDeviceProps = { enabled: boolean @@ -18,9 +21,23 @@ export const ToggleDevice = ({ }: ToggleDeviceProps) => { const { t } = useTranslation('rooms', { keyPrefix: 'join' }) - const { kind, shortcut, iconOn, iconOff } = config + const { kind, shortcut, iconOn, iconOff, longPress } = config + + const [pushToTalk, setPushToTalk] = useState(false) + + const onKeyDown = () => { + if (pushToTalk || enabled) return + toggle() + setPushToTalk(true) + } + const onKeyUp = () => { + if (!pushToTalk) return + toggle() + setPushToTalk(false) + } useRegisterKeyboardShortcut({ shortcut, handler: toggle }) + useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp }) const toggleLabel = useMemo(() => { const label = t(enabled ? 'disable' : 'enable', { @@ -31,6 +48,13 @@ export const ToggleDevice = ({ const Icon = enabled ? iconOn : iconOff + const { localParticipant } = useLocalParticipant() + const isSpeaking = useIsSpeaking(localParticipant) + + if (kind === 'audioinput' && pushToTalk) { + return + } + return (