Redo request device permissions when opening menu (#820)

livekit · Apr 3, 2024 · f9b3d53 · f9b3d53
1 parent 98ac0ca
commit f9b3d53
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/hip-guests-cross.md b/.changeset/hip-guests-cross.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Request device permissions when opening media device menu
diff --git a/packages/react/src/prefabs/MediaDeviceMenu.tsx b/packages/react/src/prefabs/MediaDeviceMenu.tsx
@@ -48,6 +48,7 @@ export function MediaDeviceMenu({
   const [isOpen, setIsOpen] = React.useState(false);
   const [devices, setDevices] = React.useState<MediaDeviceInfo[]>([]);
   const [updateRequired, setUpdateRequired] = React.useState<boolean>(true);
+  const [needPermissions, setNeedPermissions] = React.useState(requestPermissions);
 
   const handleActiveDeviceChange = (kind: MediaDeviceKind, deviceId: string) => {
     log.debug('handle device change');
@@ -58,6 +59,12 @@ export function MediaDeviceMenu({
   const button = React.useRef<HTMLButtonElement>(null);
   const tooltip = React.useRef<HTMLDivElement>(null);
 
+  React.useLayoutEffect(() => {
+    if (isOpen) {
+      setNeedPermissions(true);
+    }
+  }, [isOpen]);
+
   React.useLayoutEffect(() => {
     if (button.current && tooltip.current && (devices || updateRequired)) {
       computeMenuPosition(button.current, tooltip.current).then(({ x, y }) => {
@@ -118,7 +125,7 @@ export function MediaDeviceMenu({
               onDeviceListChange={setDevices}
               kind={kind}
               track={tracks?.[kind]}
-              requestPermissions={requestPermissions}
+              requestPermissions={needPermissions}
             />
           ) : (
             <>
@@ -130,7 +137,7 @@ export function MediaDeviceMenu({
                 }
                 onDeviceListChange={setDevices}
                 track={tracks?.audioinput}
-                requestPermissions={requestPermissions}
+                requestPermissions={needPermissions}
               />
               <div className="lk-device-menu-heading">Video inputs</div>
               <MediaDeviceSelect
@@ -140,7 +147,7 @@ export function MediaDeviceMenu({
                 }
                 onDeviceListChange={setDevices}
                 track={tracks?.videoinput}
-                requestPermissions={requestPermissions}
+                requestPermissions={needPermissions}
               />
             </>
           )}