fixup! ✨(front) revamp join screen

suitenumerique · Jan 21, 2025 · b114fb2 · b114fb2
1 parent 39cdd9b
commit b114fb2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
@@ -122,6 +122,14 @@ export const Join = ({
     [tracks]
   )
 
+  const audioTrack = React.useMemo(
+    () =>
+      tracks?.filter(
+        (track) => track.kind === Track.Kind.Audio
+      )[0] as LocalVideoTrack,
+    [tracks]
+  )
+
   const facingMode = React.useMemo(() => {
     if (videoTrack) {
       const { facingMode } = facingModeFromLocalTrack(videoTrack)
@@ -283,8 +291,10 @@ export const Join = ({
             >
               <SelectToggleDevice
                 source={Track.Source.Microphone}
-                onChange={(enabled) => setAudioEnabled(enabled)}
                 initialState={audioEnabled}
+                track={audioTrack}
+                initialDeviceId={audioDeviceId}
+                onChange={(enabled) => setAudioEnabled(enabled)}
                 onDeviceError={(error) => console.error(error)}
                 onActiveDeviceChange={(deviceId) =>
                   setAudioDeviceId(deviceId ?? '')
@@ -294,6 +304,8 @@ export const Join = ({
               <SelectToggleDevice
                 source={Track.Source.Camera}
                 initialState={videoEnabled}
+                track={videoTrack}
+                initialDeviceId={videoDeviceId}
                 onChange={(enabled) => {
                   setVideoEnabled(enabled)
                 }}

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
@@ -13,13 +13,19 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import { Track } from 'livekit-client'
+import {
+  LocalAudioTrack,
+  LocalTrack,
+  LocalVideoTrack,
+  Track,
+} from 'livekit-client'
 
 import { Shortcut } from '@/features/shortcuts/types'
 
 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { useEffect } from 'react'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -66,12 +72,16 @@ const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
 
 type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
+    track?: LocalAudioTrack | LocalVideoTrack | undefined
+    initialDeviceId?: string
     onActiveDeviceChange: (deviceId: string) => void
     source: SelectToggleSource
     variant?: NonNullable<ButtonRecipeProps>['variant']
   }
 
 export const SelectToggleDevice = <T extends ToggleSource>({
+  track,
+  initialDeviceId,
   onActiveDeviceChange,
   variant = 'primaryDark',
   ...props
@@ -84,7 +94,19 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const trackProps = useTrackToggle(props)
 
   const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind })
+    useMediaDeviceSelect({ kind: config.kind, track })
+
+  /**
+   * When providing only track outside of a room context, activeDeviceId is undefined.
+   * So we need to initialise it with the initialDeviceId.
+   * nb: I don't understand why useMediaDeviceSelect cannot infer it from track device id.
+   */
+  useEffect(() => {
+    if (initialDeviceId !== undefined) {
+      setActiveMediaDevice(initialDeviceId)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setActiveMediaDevice])
 
   const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })