♻️(frontend) refactor useResolveDefaultDeviceId to run initially

Limit useResolveDefaultDeviceId hook execution to initial rendering
only, considering removal due to ux concerns.

Hook's purpose is to populate select fields when 'default' device
option isn't available in enumerated device list. Current
implementation may be too confusing for code execution.

src/frontend/src/features/rooms/components/Join.tsx

@@ -30,7 +30,7 @@ import { useSnapshot } from 'valtio'
 import { openPermissionsDialog, permissionsStore } from '@/stores/permissions'
 import { ToggleDevice } from './join/ToggleDevice'
 import { SelectDevice } from './join/SelectDevice'
-import { useResolveDefaultDeviceId } from '../livekit/hooks/useResolveDefaultDevice'
+import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
 import { isSafari } from '@/utils/livekit'
 import type { LocalUserChoices } from '@/stores/userChoices'
 
@@ -163,8 +163,16 @@ export const Join = ({
 
   // LiveKit by default populates device choices with "default" value.
   // Instead, use the current device id used by the preview track as a default
-  useResolveDefaultDeviceId(audioDeviceId, audioTrack, saveAudioInputDeviceId)
-  useResolveDefaultDeviceId(videoDeviceId, videoTrack, saveVideoInputDeviceId)
+  useResolveInitiallyDefaultDeviceId(
+    audioDeviceId,
+    audioTrack,
+    saveAudioInputDeviceId
+  )
+  useResolveInitiallyDefaultDeviceId(
+    videoDeviceId,
+    videoTrack,
+    saveVideoInputDeviceId
+  )
 
   const videoEl = useRef(null)
   const isVideoInitiated = useRef(false)

src/frontend/src/features/rooms/livekit/hooks/useResolveInitiallyDefaultDeviceId.ts

@@ -1,17 +1,21 @@
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 
-export const useResolveDefaultDeviceId = <
+export const useResolveInitiallyDefaultDeviceId = <
   T extends { getDeviceId(): Promise<string | undefined> },
 >(
   currentId: string,
   track: T | undefined,
   save: (id: string) => void
 ) => {
+  const isInitiated = useRef(false)
   useEffect(() => {
-    if (currentId !== 'default' || !track) return
+    if (currentId !== 'default' || !track || isInitiated.current) return
     const resolveDefaultDeviceId = async () => {
       const actualDeviceId = await track.getDeviceId()
-      if (actualDeviceId && actualDeviceId !== 'default') save(actualDeviceId)
+      if (actualDeviceId && actualDeviceId !== 'default') {
+        isInitiated.current = true
+        save(actualDeviceId)
+      }
     }
     resolveDefaultDeviceId()
   }, [currentId, track, save])