✨(frontend) add effects quick access from in-conference video controls

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.

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>

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",

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",

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",

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",