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 55b93712..a9e10bd3 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx @@ -67,10 +67,12 @@ type SelectToggleDeviceProps = UseTrackToggleProps & { onActiveDeviceChange: (deviceId: string) => void source: SelectToggleSource + hideMenu?: boolean } export const SelectToggleDevice = ({ onActiveDeviceChange, + hideMenu, ...props }: SelectToggleDeviceProps) => { const config = selectToggleDeviceConfig[props.source] @@ -92,29 +94,41 @@ export const SelectToggleDevice = ({ gap: '1px', })} > - - - - ({ - value: d.deviceId, - label: d.label, - }))} - selectedItem={activeDeviceId} - onAction={(value) => { - setActiveMediaDevice(value as string) - onActiveDeviceChange(value as string) - }} - /> - + + {!hideMenu && ( + + + ({ + value: d.deviceId, + label: d.label, + }))} + selectedItem={activeDeviceId} + onAction={(value) => { + setActiveMediaDevice(value as string) + onActiveDeviceChange(value as string) + }} + /> + + )} ) } 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 9ea69cfe..9930a2ef 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx @@ -7,17 +7,20 @@ import { SelectToggleDeviceConfig } from './SelectToggleDevice' import useLongPress from '@/features/shortcuts/useLongPress' import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker' import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react' +import { ToggleButtonProps } from '@/primitives/ToggleButton' export type ToggleDeviceProps = { enabled: boolean toggle: () => void config: SelectToggleDeviceConfig + toggleButtonProps?: Partial } export const ToggleDevice = ({ config, enabled, toggle, + toggleButtonProps, }: ToggleDeviceProps) => { const { t } = useTranslation('rooms', { keyPrefix: 'join' }) @@ -64,6 +67,7 @@ export const ToggleDevice = ({ aria-label={toggleLabel} tooltip={toggleLabel} groupPosition="left" + {...toggleButtonProps} > diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx index c1f38ad7..08ac676e 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx @@ -10,6 +10,7 @@ import { HandToggle } from '../../components/controls/HandToggle' import { Button } from '@/primitives/Button' import { RiAccountBoxLine, + RiCameraSwitchLine, RiMegaphoneLine, RiMore2Line, RiSettings3Line, @@ -55,7 +56,7 @@ export function MobileControlBar({ className={css({ display: 'flex', justifyContent: 'space-between', - width: '422px', + width: '330px', })} > @@ -68,6 +69,7 @@ export function MobileControlBar({ onActiveDeviceChange={(deviceId) => saveAudioInputDeviceId(deviceId ?? '') } + hideMenu={true} /> saveVideoInputDeviceId(deviceId ?? '') } + hideMenu={true} /> + diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 1f618510..5d8696a2 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -82,7 +82,8 @@ "feedbacks": "Give us feedbacks", "settings": "Settings", "username": "Update Your Name", - "effects": "Apply effects" + "effects": "Apply effects", + "switch_camera": "Switch camera" } }, "effects": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 872d4c7c..476409ad 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -82,7 +82,8 @@ "feedbacks": "Partager votre avis", "settings": "Paramètres", "username": "Choisir votre nom", - "effects": "Appliquer des effets" + "effects": "Appliquer des effets", + "switch_camera": "Changer de caméra" } }, "effects": {