From 9cf6a7a73b11bbf0e1c5beb1248bafeade0211c1 Mon Sep 17 00:00:00 2001
From: David Zhao <dz@livekit.io>
Date: Fri, 29 Mar 2024 11:02:06 -0700
Subject: [PATCH] Revert "Request device permissions when opening menu" (#808)

---
 .changeset/witty-spoons-exercise.md              |  5 +++++
 packages/react/src/hooks/useMediaDeviceSelect.ts |  8 ++++----
 packages/react/src/prefabs/MediaDeviceMenu.tsx   | 15 ++++-----------
 3 files changed, 13 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/witty-spoons-exercise.md

diff --git a/.changeset/witty-spoons-exercise.md b/.changeset/witty-spoons-exercise.md
new file mode 100644
index 000000000..244d81ce3
--- /dev/null
+++ b/.changeset/witty-spoons-exercise.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": major
+---
+
+Revert "Request device permissions when opening menu" due to change in behavior
diff --git a/packages/react/src/hooks/useMediaDeviceSelect.ts b/packages/react/src/hooks/useMediaDeviceSelect.ts
index 5ac013fef..07e7a6b87 100644
--- a/packages/react/src/hooks/useMediaDeviceSelect.ts
+++ b/packages/react/src/hooks/useMediaDeviceSelect.ts
@@ -1,7 +1,7 @@
 import { createMediaDeviceObserver, setupDeviceSelector, log } from '@livekit/components-core';
 import type { LocalAudioTrack, LocalVideoTrack, Room } from 'livekit-client';
 import * as React from 'react';
-import { useEnsureRoom } from '../context';
+import { useMaybeRoomContext } from '../context';
 import { useObservableState } from './internal';
 
 /** @public */
@@ -45,7 +45,7 @@ export function useMediaDeviceSelect({
   requestPermissions,
   onError,
 }: UseMediaDeviceSelectProps) {
-  const roomContext = useEnsureRoom(room);
+  const roomContext = useMaybeRoomContext();
   // List of all devices.
   const deviceObserver = React.useMemo(
     () => createMediaDeviceObserver(kind, onError, requestPermissions),
@@ -55,8 +55,8 @@ export function useMediaDeviceSelect({
   // Active device management.
   const [currentDeviceId, setCurrentDeviceId] = React.useState<string>('');
   const { className, activeDeviceObservable, setActiveMediaDevice } = React.useMemo(
-    () => setupDeviceSelector(kind, roomContext, track),
-    [kind, roomContext, track],
+    () => setupDeviceSelector(kind, room ?? roomContext, track),
+    [kind, room, roomContext, track],
   );
 
   React.useEffect(() => {
diff --git a/packages/react/src/prefabs/MediaDeviceMenu.tsx b/packages/react/src/prefabs/MediaDeviceMenu.tsx
index fab5b4a30..2f9a8d51a 100644
--- a/packages/react/src/prefabs/MediaDeviceMenu.tsx
+++ b/packages/react/src/prefabs/MediaDeviceMenu.tsx
@@ -2,7 +2,7 @@ import { computeMenuPosition, wasClickOutside } from '@livekit/components-core';
 import * as React from 'react';
 import { MediaDeviceSelect } from '../components/controls/MediaDeviceSelect';
 import { log } from '@livekit/components-core';
-import { type LocalAudioTrack, type LocalVideoTrack } from 'livekit-client';
+import type { LocalAudioTrack, LocalVideoTrack } from 'livekit-client';
 
 /** @public */
 export interface MediaDeviceMenuProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -48,7 +48,6 @@ 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');
@@ -59,12 +58,6 @@ 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 }) => {
@@ -125,7 +118,7 @@ export function MediaDeviceMenu({
               onDeviceListChange={setDevices}
               kind={kind}
               track={tracks?.[kind]}
-              requestPermissions={needPermissions}
+              requestPermissions={requestPermissions}
             />
           ) : (
             <>
@@ -137,7 +130,7 @@ export function MediaDeviceMenu({
                 }
                 onDeviceListChange={setDevices}
                 track={tracks?.audioinput}
-                requestPermissions={needPermissions}
+                requestPermissions={requestPermissions}
               />
               <div className="lk-device-menu-heading">Video inputs</div>
               <MediaDeviceSelect
@@ -147,7 +140,7 @@ export function MediaDeviceMenu({
                 }
                 onDeviceListChange={setDevices}
                 track={tracks?.videoinput}
-                requestPermissions={needPermissions}
+                requestPermissions={requestPermissions}
               />
             </>
           )}