From 359c4af0984d2ab257c22efef763c4142d638fda Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sat, 22 Aug 2026 23:38:42 +0200
Subject: [PATCH] fixup! wip handle device in use

---
 .../controls/Device/PermissionNeededButton.tsx | 18 ++++++++++++------
 .../controls/Device/ToggleDevice.tsx           |  5 +++--
 .../livekit/hooks/useWatchMediaDeviceErrors.ts |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

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 0641ae80..388af375 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
@@ -5,16 +5,18 @@ import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 
 type PermissionNeededButtonProps = {
-  tooltip?: string
-  onPress?: () => void
+  tooltip?: string | null
+  onPress?: (() => void) | null
+  ariaLabel?: string
 }
 
 export const PermissionNeededButton = ({
   tooltip,
   onPress,
+  ariaLabel,
 }: PermissionNeededButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'permissionsButton' })
-  const label = tooltip ?? t('tooltip')
+  const label = tooltip === undefined ? t('tooltip') : tooltip
   return (
     <div
       className={css({
@@ -26,9 +28,13 @@ export const PermissionNeededButton = ({
       })}
     >
       <Button
-        aria-label={tooltip ? label : t('ariaLabel')}
-        tooltip={label}
-        onPress={onPress ?? (() => openPermissionsDialog())}
+        aria-label={ariaLabel ?? label ?? t('ariaLabel')}
+        tooltip={label ?? undefined}
+        onPress={
+          onPress === undefined
+            ? () => openPermissionsDialog()
+            : (onPress ?? undefined)
+        }
         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 98679135..d857d6fb 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
@@ -206,11 +206,12 @@ export const ToggleDevice = <T extends ToggleSource>({
       )}
       {deviceInUse && (
         <PermissionNeededButton
-          tooltip={explainDeviceInUse ? t(`deviceInUse.${kind}`) : undefined}
+          tooltip={explainDeviceInUse ? t(`deviceInUse.${kind}`) : null}
+          ariaLabel={t(`deviceInUse.${kind}`)}
           onPress={
             explainDeviceInUse
               ? () => setAlertError(MediaDeviceFailure.DeviceInUse)
-              : undefined
+              : null
           }
         />
       )}
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useWatchMediaDeviceErrors.ts b/src/frontend/src/features/rooms/livekit/hooks/useWatchMediaDeviceErrors.ts
index 985ad5fe..740c4453 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useWatchMediaDeviceErrors.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useWatchMediaDeviceErrors.ts
@@ -78,7 +78,7 @@ export const useWatchMediaDeviceErrors = (): MediaDeviceAlert & {
       const permissionKind = PERMISSION_BY_DEVICE_KIND[kind]
       switch (failure) {
         case MediaDeviceFailure.DeviceInUse:
-          noteDeviceInUse(permissionKind)
+          if (permissionKind) noteDeviceInUse(permissionKind)
           setAlert({ error: failure, kind })
           break
         case MediaDeviceFailure.NotFound: