From 0489033e032ec022240715e5f473b5d21e40ba12 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 18 Sep 2025 00:18:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=EF=B8=8F(frontend)=20fix=20mobile?=
 =?UTF-8?q?=20permission=20deadlock=20with=20disabled=20tracks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolve issue where users with disabled track preferences in local
storage wouldn't receive permission prompts in subsequent sessions,
causing app deadlock. Toggle tracks when permissions are disabled to
re-trigger permission requests.

This is a hotfix addressing critical user feedback. Permission handling
requires further testing and improvements based on gathered user
reports since release.
---
 .../src/features/rooms/components/Join.tsx       |  2 +-
 .../features/rooms/components/Permissions.tsx    | 16 ++++++++++++++++
 .../controls/Device/PermissionNeededButton.tsx   |  2 +-
 .../components/controls/Device/ToggleDevice.tsx  | 11 +++++++----
 src/frontend/src/stores/permissions.ts           |  7 ++++++-
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index 8736f4a4..b367c80b 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -638,7 +638,7 @@ export const Join = ({
                       <Button
                         size="sm"
                         variant="tertiary"
-                        onPress={openPermissionsDialog}
+                        onPress={() => openPermissionsDialog()}
                       >
                         {t(`permissionsButton.${permissionsButtonLabel}`)}
                       </Button>
diff --git a/src/frontend/src/features/rooms/components/Permissions.tsx b/src/frontend/src/features/rooms/components/Permissions.tsx
index 1f232aaa..178eb5d8 100644
--- a/src/frontend/src/features/rooms/components/Permissions.tsx
+++ b/src/frontend/src/features/rooms/components/Permissions.tsx
@@ -37,6 +37,22 @@ export const Permissions = () => {
     injectIconIntoTranslation(t('body.openMenu.others'))
 
   useEffect(() => {
+    if (
+      permissions.isPermissionDialogOpen &&
+      permissions.isMicrophoneGranted &&
+      permissions.requestOrigin == 'audioinput'
+    ) {
+      closePermissionsDialog()
+    }
+
+    if (
+      permissions.isPermissionDialogOpen &&
+      permissions.isCameraGranted &&
+      permissions.requestOrigin == 'videoinput'
+    ) {
+      closePermissionsDialog()
+    }
+
     if (
       permissions.isPermissionDialogOpen &&
       permissions.isCameraGranted &&
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/PermissionNeededButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/PermissionNeededButton.tsx
index ab2df0a4..5a4afa5d 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/PermissionNeededButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/PermissionNeededButton.tsx
@@ -19,7 +19,7 @@ export const PermissionNeededButton = () => {
       <Button
         aria-label={t('ariaLabel')}
         tooltip={t('tooltip')}
-        onPress={openPermissionsDialog}
+        onPress={() => openPermissionsDialog()}
         variant="permission"
       >
         <div
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
index bd77f87d..d12bb89e 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx
@@ -107,9 +107,7 @@ export const ToggleDevice = <T extends ToggleSource>({
   }, [enabled, kind, deviceShortcut, t])
 
   const Icon =
-    isDisabled || cannotUseDevice || !enabled
-      ? deviceIcons.toggleOff
-      : deviceIcons.toggleOn
+    isDisabled || !enabled ? deviceIcons.toggleOff : deviceIcons.toggleOn
 
   const roomContext = useMaybeRoomContext()
   if (kind === 'audioinput' && pushToTalk && roomContext) {
@@ -126,7 +124,12 @@ export const ToggleDevice = <T extends ToggleSource>({
           isDisabled || cannotUseDevice || !enabled ? errorVariant : variant
         }
         shySelected
-        onPress={() => (cannotUseDevice ? openPermissionsDialog() : toggle())}
+        onPress={() => {
+          if (cannotUseDevice) {
+            openPermissionsDialog(kind)
+          }
+          toggle()
+        }}
         aria-label={toggleLabel}
         tooltip={
           cannotUseDevice
diff --git a/src/frontend/src/stores/permissions.ts b/src/frontend/src/stores/permissions.ts
index 1d8091c1..a6737f77 100644
--- a/src/frontend/src/stores/permissions.ts
+++ b/src/frontend/src/stores/permissions.ts
@@ -13,6 +13,7 @@ type BaseState = {
   microphonePermission: PermissionState
   isLoading: boolean
   isPermissionDialogOpen: boolean
+  requestOrigin?: 'audioinput' | 'videoinput'
 }
 
 type DerivedState = {
@@ -31,6 +32,7 @@ export const permissionsStore = proxy<BaseState>({
   microphonePermission: undefined,
   isLoading: true,
   isPermissionDialogOpen: false,
+  requestOrigin: undefined,
 }) as State
 
 derive(
@@ -52,8 +54,11 @@ derive(
   }
 )
 
-export const openPermissionsDialog = () => {
+export const openPermissionsDialog = (
+  requestOrigin?: 'audioinput' | 'videoinput'
+) => {
   permissionsStore.isPermissionDialogOpen = true
+  permissionsStore.requestOrigin = requestOrigin
 }
 
 export const closePermissionsDialog = () => {