From ba422110f880a4fc885dedd3586cb16bd9648483 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 22 Aug 2025 12:30:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(frontend)=20clarify=20toggleButton?=
 =?UTF-8?q?Props=20override=20behavior=20in=20documentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Document that toggleButtonProps are intended to override default and
computed values within ToggleComponent, acknowledging this breaks
encapsulation but serves as useful starting point.
---
 .../controls/Device/AudioDevicesControl.tsx   |  2 +-
 .../controls/Device/ToggleDevice.tsx          | 44 ++++++++++---------
 .../controls/Device/VideoDeviceControl.tsx    |  2 +-
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
index c6fb3784..39ecde7d 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
@@ -61,7 +61,7 @@ export const AudioDevicesControl = ({
         {...trackProps}
         kind={kind}
         toggle={trackProps.toggle as () => Promise<void>}
-        toggleButtonProps={{
+        overrideToggleButtonProps={{
           ...(hideMenu
             ? {
                 groupPosition: undefined,
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 c71c887d..a567980e 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
@@ -33,7 +33,7 @@ export type ToggleDeviceProps<T extends ToggleSource> = {
   ) => Promise<void | boolean | undefined>
   context?: 'room' | 'join'
   kind: 'audioinput' | 'videoinput'
-  toggleButtonProps?: Partial<ToggleButtonProps>
+  overrideToggleButtonProps?: Partial<ToggleButtonProps>
 }
 
 export const ToggleDevice = <T extends ToggleSource>({
@@ -41,27 +41,32 @@ export const ToggleDevice = <T extends ToggleSource>({
   enabled,
   toggle,
   context = 'room',
-  ...props
+  overrideToggleButtonProps,
 }: ToggleDeviceProps<T>) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
 
-  const { variant, errorVariant, toggleButtonProps } =
-    useMemo<ToggleDeviceStyleProps>(() => {
-      if (context === 'join') {
-        return {
-          variant: 'whiteCircle',
-          errorVariant: 'errorCircle',
-          toggleButtonProps: {
-            groupPosition: undefined,
-          },
-        } as ToggleDeviceStyleProps
-      }
+  const {
+    variant,
+    errorVariant,
+    toggleButtonProps: computedToggleButtonProps,
+  } = useMemo<ToggleDeviceStyleProps>(() => {
+    if (context === 'join') {
       return {
-        variant: 'primaryDark',
-        errorVariant: 'error2',
-        toggleButtonProps: undefined,
+        variant: 'whiteCircle',
+        errorVariant: 'errorCircle',
+        toggleButtonProps: {
+          groupPosition: undefined,
+        },
       } as ToggleDeviceStyleProps
-    }, [context])
+    }
+    return {
+      variant: 'primaryDark',
+      errorVariant: 'error2',
+      toggleButtonProps: {
+        groupPosition: 'left',
+      },
+    } as ToggleDeviceStyleProps
+  }, [context])
 
   const [pushToTalk, setPushToTalk] = useState(false)
 
@@ -121,9 +126,8 @@ export const ToggleDevice = <T extends ToggleSource>({
             ? t('tooltip', { keyPrefix: 'permissionsButton' })
             : toggleLabel
         }
-        groupPosition="left"
-        {...toggleButtonProps}
-        {...props}
+        {...computedToggleButtonProps}
+        {...overrideToggleButtonProps}
       >
         <Icon />
       </ToggleButton>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
index e34d5186..8b821705 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
@@ -107,7 +107,7 @@ export const VideoDeviceControl = ({
         {...trackProps}
         kind={kind}
         toggle={toggleWithProcessor}
-        toggleButtonProps={{
+        overrideToggleButtonProps={{
           ...(hideMenu
             ? {
                 groupPosition: undefined,