From aa09c15ecccece447b875441a46755e5a9ff5f2c Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 22 Aug 2025 01:32:55 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20effects=20quick=20a?=
 =?UTF-8?q?ccess=20from=20in-conference=20video=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Provide direct access to background and effects options from video
device controls during conference for additional user convenience.

Creates another pathway to effects configuration, giving users more
flexibility in accessing video enhancement features while in meetings.
---
 .../controls/Device/VideoDeviceControl.tsx    | 21 ++++++++++++++++++-
 src/frontend/src/locales/de/rooms.json        |  1 +
 src/frontend/src/locales/en/rooms.json        |  1 +
 src/frontend/src/locales/fr/rooms.json        |  1 +
 src/frontend/src/locales/nl/rooms.json        |  1 +
 5 files changed, 24 insertions(+), 1 deletion(-)

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 1f305597..836adde8 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
@@ -1,13 +1,14 @@
 import { useTranslation } from 'react-i18next'
 import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
 import { Button, Popover } from '@/primitives'
-import { RiArrowUpSLine } from '@remixicon/react'
+import { RiArrowUpSLine, RiImageCircleAiFill } from '@remixicon/react'
 import { Track, VideoCaptureOptions } from 'livekit-client'
 
 import { ToggleDevice } from './ToggleDevice'
 import { css } from '@/styled-system/css'
 import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import { useSidePanel } from '../../../hooks/useSidePanel'
 import { BackgroundProcessorFactory } from '../../blur'
 import Source = Track.Source
 import * as React from 'react'
@@ -15,6 +16,23 @@ import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 
+const EffectsButton = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const { toggleEffects } = useSidePanel()
+  return (
+    <Button
+      size="sm"
+      square
+      tooltip={t('effects')}
+      aria-label={t('effects')}
+      variant="primaryDark"
+      onPress={toggleEffects}
+    >
+      <RiImageCircleAiFill size={24} />
+    </Button>
+  )
+}
+
 type VideoDeviceControlProps = Omit<
   UseTrackToggleProps<Source.Camera>,
   'source' | 'onChange'
@@ -128,6 +146,7 @@ export const VideoDeviceControl = ({
                 onSubmit={saveVideoInputDeviceId}
               />
             </div>
+            <EffectsButton />
             <SettingsButton settingTab={SettingsDialogExtendedKey.VIDEO} />
           </div>
         </Popover>
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index da8d008e..b3f61b5d 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -15,6 +15,7 @@
       "audio": "Audioeinstellungen",
       "video": "Videoeinstellungen"
     },
+    "effects": "Effekte anwenden",
     "videoinput": {
       "choose": "Kamera auswählen",
       "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 59cffb9f..853a7570 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -15,6 +15,7 @@
       "audio": "Audio settings",
       "video": "Video settings"
     },
+    "effects": "Effects",
     "videoinput": {
       "choose": "Select camera",
       "permissionsNeeded": "Select camera - permission needed",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 643708c7..38920c81 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -15,6 +15,7 @@
       "audio": "Paramètres audio",
       "video": "Paramètres video"
     },
+    "effects": "Effets d'arrière plan",
     "videoinput": {
       "choose": "Choisir la webcam",
       "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index a0f22d15..5846341b 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -15,6 +15,7 @@
       "audio": "Audio-instellingen",
       "video": "Video-instellingen"
     },
+    "effects": "Pas effecten toe",
     "videoinput": {
       "choose": "Selecteer camera",
       "permissionsNeeded": "Selecteer camera - Toestemming vereist",