more proper fix

This comes with the issue, that if
 - the user opens the settings once
 before approving the device permisions
 - the device names will not be updated.
 - closing and opening the settings does NOT fix this...

Signed-off-by: Timo K <toger5@hotmail.de>

src/livekit/MediaDevicesContext.tsx

@@ -33,6 +33,8 @@ import {
   useVideoInput,
 } from "../settings/useSetting";
 
+import { logger } from "matrix-js-sdk/src/logger";
+
 export interface MediaDevice {
   available: MediaDeviceInfo[];
   selectedId: string | undefined;
@@ -200,8 +202,20 @@ export const useMediaDevices = () => useContext(MediaDevicesContext);
  * default because it may involve requesting additional permissions from the
  * user.
  */
-export const useMediaDeviceNames = (context: MediaDevices) =>
+export const useMediaDeviceNames = (context: MediaDevices, isOpen: boolean) =>
   useEffect(() => {
-    context.startUsingDeviceNames();
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
+      const devicesHaveIds = devices.every((d) => d.deviceId.length > 0);
+      if (devicesHaveIds) {
+        // If all the devices have an id permissions we know that the permissions have been granted.
+        // We only start using the device names then. Otherwise additional tracks would be created.
+        // Those additional tracks result in audio/echo issue because multiple tracks are allowed in LK.
+        context.startUsingDeviceNames();
+      } else {
+        logger.warn(
+          "device names were requested but permissions are not yet granted."
+        );
+      }
+    });
     return context.stopUsingDeviceNames;
-  }, [context]);
+  }, [context, isOpen]);

src/settings/SettingsModal.tsx

@@ -44,7 +44,11 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
 import { useUrlParams } from "../UrlParams";
-import { useMediaDevices, MediaDevice } from "../livekit/MediaDevicesContext";
+import {
+  useMediaDevices,
+  MediaDevice,
+  useMediaDeviceNames,
+} from "../livekit/MediaDevicesContext";
 
 interface Props {
   isOpen: boolean;
@@ -115,11 +119,10 @@ export const SettingsModal = (props: Props) => {
   );
 
   const devices = useMediaDevices();
-  // We skip useMediaDeviceNames, since it will create a track in the background
+  // we pass isOpen so that the hook is calling enumerate devices whenever we open the settings.
-  // and might be the source for echo cancellation issues on firefox.
+  // It would be desirable if this hook would get updated as soon as the permissions are granted
-  // TODO this should be put behind a condition.
+  // Is there a state storing an approval of the device permissions triggered by the livekit room/lobby?
-  // we should only call useMediaDeviceNames if enumerateDevices fails.
+  useMediaDeviceNames(devices, props.isOpen);
-  // useMediaDeviceNames(devices);
 
   const audioTab = (
     <TabItem