From 5fa98f0afabf463c08ee08abc8538d224443638a Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Mon, 18 Sep 2023 14:11:57 +0200
Subject: [PATCH] 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 | 20 +++++++++++++++++---
 src/settings/SettingsModal.tsx      | 15 +++++++++------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx
index c99eada8..8262e68c 100644
--- a/src/livekit/MediaDevicesContext.tsx
+++ b/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]);
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 75f1d23a..7f593cf0 100644
--- a/src/settings/SettingsModal.tsx
+++ b/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
-  // and might be the source for echo cancellation issues on firefox.
-  // TODO this should be put behind a condition.
-  // we should only call useMediaDeviceNames if enumerateDevices fails.
-  // useMediaDeviceNames(devices);
+  // we pass isOpen so that the hook is calling enumerate devices whenever we open the settings.
+  // It would be desirable if this hook would get updated as soon as the permissions are granted
+  // Is there a state storing an approval of the device permissions triggered by the livekit room/lobby?
+  useMediaDeviceNames(devices, props.isOpen);
 
   const audioTab = (
     <TabItem