🚨(frontend) resolve key prop warning in ParticipantListItem

Key prop was incorrectly passed down as a regular prop to ParticipantListItem
instead of being used at the array mapping level. Key is a special React prop
for list rendering and cannot be accessed as a component prop.

renovate.json

@@ -14,7 +14,7 @@
       "groupName": "ignored js dependencies",
       "matchManagers": ["npm"],
       "matchPackageNames": [
-        "eslint", "react", "react-dom", "@types/react-dom", "@types/react", "react-i18next"
+        "eslint"
       ]
     }
   ]

src/backend/pyproject.toml

@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.36.6",
+    "boto3==1.35.97",
     "Brotli==1.1.0",
     "brevo-python==1.1.2",
     "celery[redis]==5.4.0",
@@ -48,11 +48,11 @@ dependencies = [
     "june-analytics-python==2.3.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.4",
+    "psycopg[binary]==3.2.3",
     "PyJWT==2.10.1",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.20.0",
+    "sentry-sdk==2.19.2",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.8.2",
@@ -74,7 +74,7 @@ dev = [
     "freezegun==1.5.1",
     "ipdb==0.13.13",
     "ipython==8.31.0",
-    "pyfakefs==5.7.4",
+    "pyfakefs==5.7.3",
     "pylint-django==2.6.1",
     "pylint==3.3.3",
     "pytest-cov==6.0.0",
@@ -82,8 +82,8 @@ dev = [
     "pytest==8.3.4",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
-    "responses==0.25.6",
-    "ruff==0.9.3",
+    "responses==0.25.5",
+    "ruff==0.9.1",
     "types-requests==2.32.0.20241016",
 ]
 

src/frontend/package.json

@@ -13,48 +13,48 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.8.1",
+    "@livekit/components-react": "2.6.9",
     "@livekit/components-styles": "1.1.4",
-    "@livekit/track-processors": "0.3.3",
-    "@pandacss/preset-panda": "0.51.1",
-    "@react-aria/toast": "3.0.0-beta.19",
-    "@remixicon/react": "4.6.0",
-    "@tanstack/react-query": "5.64.2",
+    "@livekit/track-processors": "0.3.2",
+    "@pandacss/preset-panda": "0.48.0",
+    "@react-aria/toast": "3.0.0-beta.18",
+    "@remixicon/react": "4.5.0",
+    "@tanstack/react-query": "5.61.3",
     "crisp-sdk-web": "1.0.25",
-    "hoofd": "1.7.3",
-    "i18next": "24.2.2",
-    "i18next-browser-languagedetector": "8.0.2",
-    "i18next-parser": "9.1.0",
+    "hoofd": "1.7.1",
+    "i18next": "24.0.2",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-parser": "9.0.2",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.8.1",
-    "posthog-js": "1.210.2",
+    "livekit-client": "2.6.3",
+    "posthog-js": "1.188.0",
     "react": "18.3.1",
-    "react-aria-components": "1.6.0",
+    "react-aria-components": "1.5.0",
     "react-dom": "18.3.1",
     "react-i18next": "15.1.1",
     "use-sound": "4.0.3",
-    "valtio": "2.1.3",
-    "wouter": "3.4.0"
+    "valtio": "2.1.2",
+    "wouter": "3.3.5"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.51.1",
-    "@tanstack/eslint-plugin-query": "5.64.2",
-    "@tanstack/react-query-devtools": "5.64.2",
-    "@types/node": "22.10.10",
+    "@pandacss/dev": "0.48.0",
+    "@tanstack/eslint-plugin-query": "5.61.3",
+    "@tanstack/react-query-devtools": "5.61.3",
+    "@types/node": "22.9.3",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.21.0",
-    "@typescript-eslint/parser": "8.21.0",
-    "@vitejs/plugin-react": "4.3.4",
+    "@typescript-eslint/eslint-plugin": "8.15.0",
+    "@typescript-eslint/parser": "8.15.0",
+    "@vitejs/plugin-react": "4.3.3",
     "eslint": "8.57.0",
-    "eslint-config-prettier": "10.0.1",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-react-refresh": "0.4.18",
-    "postcss": "8.5.1",
-    "prettier": "3.4.2",
-    "typescript": "5.7.3",
-    "vite": "6.0.11",
-    "vite-tsconfig-paths": "5.1.4"
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.14",
+    "postcss": "8.4.49",
+    "prettier": "3.3.3",
+    "typescript": "5.7.2",
+    "vite": "5.4.11",
+    "vite-tsconfig-paths": "5.1.3"
   }
 }

src/frontend/src/features/home/routes/Home.tsx

@@ -9,6 +9,7 @@ import { useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
@@ -17,7 +18,6 @@ import { ReactNode, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -32,10 +32,10 @@ const Columns = ({ children }: { children?: ReactNode }) => {
         justifyContent: 'normal',
         padding: '0 1rem',
         width: 'calc(100% - 2rem)',
-        _motionReduce: {
+        '@media(prefers-reduced-motion: reduce)': {
           opacity: 1,
         },
-        _motionSafe: {
+        '@media(prefers-reduced-motion: no-preference)': {
           opacity: 0,
           animation: '.5s ease-in fade 0s forwards',
         },

src/frontend/src/features/rooms/components/Conference.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom } from '@livekit/components-react'
+import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -12,11 +12,10 @@ import { fetchRoom } from '../api/fetchRoom'
 import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
+
 import { VideoConference } from '../livekit/prefabs/VideoConference'
 import posthog from 'posthog-js'
 import { css } from '@/styled-system/css'
-import { LocalUserChoices } from '../routes/Room'
-import { BackgroundProcessorFactory } from '../livekit/components/blur'
 
 export const Conference = ({
   roomId,
@@ -112,13 +111,7 @@ export const Conference = ({
           token={data?.livekit?.token}
           connect={true}
           audio={userConfig.audioEnabled}
-          video={
-            userConfig.videoEnabled && {
-              processor: BackgroundProcessorFactory.deserializeProcessor(
-                userConfig.processorSerialized
-              ),
-            }
-          }
+          video={userConfig.videoEnabled}
           connectOptions={connectOptions}
           className={css({
             backgroundColor: 'primaryDark.50 !important',

src/frontend/src/features/rooms/components/Join.tsx

@@ -1,390 +1,30 @@
 import { useTranslation } from 'react-i18next'
-import { usePreviewTracks } from '@livekit/components-react'
-import { css } from '@/styled-system/css'
+import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
 import { Screen } from '@/layout/Screen'
-import { useMemo, useEffect, useRef, useState } from 'react'
-import { LocalVideoTrack, Track } from 'livekit-client'
-import { H } from '@/primitives/H'
-import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
-import { Field } from '@/primitives/Field'
-import { Button, Dialog, Text, Form } from '@/primitives'
-import { HStack, VStack } from '@/styled-system/jsx'
-import { LocalUserChoices } from '../routes/Room'
-import { Heading } from 'react-aria-components'
-import { RiImageCircleAiFill } from '@remixicon/react'
-import {
-  EffectsConfiguration,
-  EffectsConfigurationProps,
-} from '../livekit/components/effects/EffectsConfiguration'
-import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../livekit/components/blur'
-import { isMobileBrowser } from '@livekit/components-core'
-
-const onError = (e: Error) => console.error('ERROR', e)
-
-const Effects = ({
-  videoTrack,
-  onSubmit,
-}: Pick<EffectsConfigurationProps, 'videoTrack' | 'onSubmit'>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join.effects' })
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const openDialog = () => setIsDialogOpen(true)
-
-  if (!BackgroundProcessorFactory.isSupported() || isMobileBrowser()) {
-    return
-  }
-
-  return (
-    <>
-      <Dialog
-        isOpen={isDialogOpen}
-        onOpenChange={setIsDialogOpen}
-        role="dialog"
-        type="flex"
-        size="large"
-      >
-        <Heading
-          slot="title"
-          level={1}
-          className={css({
-            textStyle: 'h1',
-            marginBottom: '0.25rem',
-          })}
-        >
-          {t('title')}
-        </Heading>
-        <Text
-          variant="subTitle"
-          className={css({
-            marginBottom: '1.5rem',
-          })}
-        >
-          {t('subTitle')}
-        </Text>
-        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
-      </Dialog>
-      <div
-        className={css({
-          position: 'absolute',
-          right: 0,
-          bottom: '0',
-          padding: '1rem',
-          zIndex: '1',
-        })}
-      >
-        <Button
-          variant="whiteCircle"
-          onPress={openDialog}
-          tooltip={t('description')}
-          aria-label={t('description')}
-        >
-          <RiImageCircleAiFill size={24} />
-        </Button>
-      </div>
-      <div
-        className={css({
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: '20%',
-          backgroundImage:
-            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
-          borderBottomRadius: '1rem',
-        })}
-      />
-    </>
-  )
-}
+import { CenteredContent } from '@/layout/CenteredContent'
+import { useUser } from '@/features/auth'
 
 export const Join = ({
   onSubmit,
 }: {
   onSubmit: (choices: LocalUserChoices) => void
 }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const {
-    userChoices: initialUserChoices,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-    saveUsername,
-    saveProcessorSerialized,
-  } = usePersistentUserChoices({})
-
-  const [audioEnabled, setAudioEnabled] = useState(true)
-  const [videoEnabled, setVideoEnabled] = useState(true)
-  const [audioDeviceId, setAudioDeviceId] = useState<string>(
-    initialUserChoices.audioDeviceId
-  )
-  const [videoDeviceId, setVideoDeviceId] = useState<string>(
-    initialUserChoices.videoDeviceId
-  )
-  const [username, setUsername] = useState<string>(initialUserChoices.username)
-  const [processor, setProcessor] = useState(
-    BackgroundProcessorFactory.deserializeProcessor(
-      initialUserChoices.processorSerialized
-    )
-  )
-
-  useEffect(() => {
-    saveAudioInputDeviceId(audioDeviceId)
-  }, [audioDeviceId, saveAudioInputDeviceId])
-
-  useEffect(() => {
-    saveVideoInputDeviceId(videoDeviceId)
-  }, [videoDeviceId, saveVideoInputDeviceId])
-
-  useEffect(() => {
-    saveUsername(username)
-  }, [username, saveUsername])
-
-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [
-    processor,
-    saveProcessorSerialized,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(processor?.serialize()),
-  ])
-
-  const tracks = usePreviewTracks(
-    {
-      audio: { deviceId: initialUserChoices.audioDeviceId },
-      video: { deviceId: initialUserChoices.videoDeviceId },
-    },
-    onError
-  )
-
-  const videoTrack = useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Video
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
-
-  const audioTrack = useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Audio
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
-
-  const videoEl = useRef(null)
-
-  useEffect(() => {
-    const videoElement = videoEl.current as HTMLVideoElement | null
-
-    const handleVideoLoaded = () => {
-      if (videoElement) {
-        videoElement.style.opacity = '1'
-      }
-    }
-
-    if (videoElement && videoTrack && videoEnabled) {
-      videoTrack.unmute()
-      videoTrack.attach(videoElement)
-      videoElement.addEventListener('loadedmetadata', handleVideoLoaded)
-    }
-
-    return () => {
-      videoTrack?.detach()
-      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
-    }
-  }, [videoTrack, videoEnabled])
-
-  function handleSubmit() {
-    onSubmit({
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      videoDeviceId,
-      username,
-      processorSerialized: processor?.serialize(),
-    })
-  }
-
-  // This hook is used to setup the persisted user choice processor on initialization.
-  // So it's on purpose that processor is not included in the deps.
-  // We just want to wait for the videoTrack to be loaded to apply the default processor.
-  useEffect(() => {
-    if (processor && videoTrack && !videoTrack.getProcessor()) {
-      videoTrack.setProcessor(processor)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTrack])
+  const { t } = useTranslation('rooms')
+  const { user } = useUser()
 
   return (
-    <Screen footer={false}>
-      <div
-        className={css({
-          display: 'flex',
-          alignItems: 'flex-start',
-          justifyContent: 'center',
-          flexGrow: 1,
-          lg: {
-            alignItems: 'center',
-          },
-        })}
-      >
-        <div
-          className={css({
-            display: 'flex',
-            height: 'auto',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '2rem',
-            padding: '0 2rem',
-            flexDirection: 'column',
-            minWidth: 0,
-            width: '100%',
-            lg: {
-              flexDirection: 'row',
-              width: 'auto',
-              height: '570px',
-            },
-          })}
-        >
-          <div
-            className={css({
-              width: '100%',
-              lg: {
-                width: '740px',
-              },
-            })}
-          >
-            <div
-              className={css({
-                borderRadius: '1rem',
-                overflow: 'hidden',
-                position: 'relative',
-                width: '100%',
-                height: 'auto',
-                aspectRatio: 16 / 9,
-                '--tw-shadow':
-                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
-                '--tw-shadow-colored':
-                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
-                boxShadow:
-                  'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
-                backgroundColor: 'black',
-              })}
-            >
-              {videoTrack && videoEnabled ? (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
-                <video
-                  ref={videoEl}
-                  width="1280"
-                  height="720"
-                  className={css({
-                    display: 'block',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transform: 'rotateY(180deg)',
-                    opacity: 0,
-                    transition: 'opacity 0.3s ease-in-out',
-                    borderRadius: '1rem',
-                  })}
-                  disablePictureInPicture
-                  disableRemotePlayback
-                />
-              ) : (
-                <div
-                  className={css({
-                    width: '100%',
-                    height: '100%',
-                    color: 'white',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  })}
-                >
-                  <p
-                    className={css({
-                      fontSize: '24px',
-                      fontWeight: '300',
-                    })}
-                  >
-                    {!videoEnabled && t('cameraDisabled')}
-                    {videoEnabled && !videoTrack && t('cameraStarting')}
-                  </p>
-                </div>
-              )}
-              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
-            </div>
-            <HStack justify="center" padding={1.5}>
-              <SelectToggleDevice
-                source={Track.Source.Microphone}
-                initialState={audioEnabled}
-                track={audioTrack}
-                initialDeviceId={initialUserChoices.audioDeviceId}
-                onChange={(enabled) => setAudioEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  setAudioDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-              <SelectToggleDevice
-                source={Track.Source.Camera}
-                initialState={videoEnabled}
-                track={videoTrack}
-                initialDeviceId={initialUserChoices.videoDeviceId}
-                onChange={(enabled) => setVideoEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  setVideoDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-            </HStack>
-          </div>
-          <div
-            className={css({
-              width: '100%',
-              flexShrink: 0,
-              padding: '0',
-              sm: {
-                width: '448px',
-                padding: '0 3rem 9rem 3rem',
-              },
-            })}
-          >
-            <Form
-              onSubmit={handleSubmit}
-              submitLabel={t('joinLabel')}
-              submitButtonProps={{
-                fullWidth: true,
-              }}
-            >
-              <VStack marginBottom={1}>
-                <H lvl={1} margin={false}>
-                  {t('heading')}
-                </H>
-                <Field
-                  type="text"
-                  onChange={setUsername}
-                  label={t('usernameLabel')}
-                  aria-label={t('usernameLabel')}
-                  defaultValue={initialUserChoices?.username}
-                  validate={(value) => !value && t('errors.usernameEmpty')}
-                  wrapperProps={{
-                    noMargin: true,
-                    fullWidth: true,
-                  }}
-                  labelProps={{
-                    center: true,
-                  }}
-                  maxLength={50}
-                />
-              </VStack>
-            </Form>
-          </div>
-        </div>
-      </div>
+    <Screen layout="centered" footer={false}>
+      <CenteredContent title={t('join.heading')}>
+        <PreJoin
+          persistUserChoices
+          onSubmit={onSubmit}
+          micLabel={t('join.audioinput.label')}
+          camLabel={t('join.videoinput.label')}
+          joinLabel={t('join.joinLabel')}
+          userLabel={t('join.usernameLabel')}
+          defaults={{ username: user?.full_name }}
+        />
+      </CenteredContent>
     </Screen>
   )
 }

src/frontend/src/features/rooms/livekit/components/Effects.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useRef, useState } from 'react'
+import { useLocalParticipant } from '@livekit/components-react'
+import { LocalVideoTrack } from 'livekit-client'
+import { Text, P, ToggleButton, Div, H } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { HStack, styled, VStack } from '@/styled-system/jsx'
+import {
+  BackgroundBlurFactory,
+  BackgroundBlurProcessorInterface,
+} from './blur/index'
+
+const Information = styled('div', {
+  base: {
+    backgroundColor: 'orange.50',
+    borderRadius: '4px',
+    padding: '0.75rem 0.75rem',
+    marginTop: '0.8rem',
+    alignItems: 'start',
+  },
+})
+
+enum BlurRadius {
+  NONE = 0,
+  LIGHT = 5,
+  NORMAL = 10,
+}
+
+const isSupported = BackgroundBlurFactory.isSupported()
+
+export const Effects = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
+  const { isCameraEnabled, cameraTrack, localParticipant } =
+    useLocalParticipant()
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [processorPending, setProcessorPending] = useState(false)
+
+  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
+
+  const getProcessor = () => {
+    return localCameraTrack?.getProcessor() as BackgroundBlurProcessorInterface
+  }
+
+  const getBlurRadius = (): BlurRadius => {
+    const processor = getProcessor()
+    return processor?.options.blurRadius || BlurRadius.NONE
+  }
+
+  const toggleBlur = async (blurRadius: number) => {
+    if (!isCameraEnabled) await localParticipant.setCameraEnabled(true)
+    if (!localCameraTrack) return
+
+    setProcessorPending(true)
+
+    const processor = getProcessor()
+    const currentBlurRadius = getBlurRadius()
+
+    try {
+      if (blurRadius == currentBlurRadius && processor) {
+        await localCameraTrack.stopProcessor()
+      } else if (!processor) {
+        await localCameraTrack.setProcessor(
+          BackgroundBlurFactory.getProcessor({ blurRadius })!
+        )
+      } else {
+        processor?.update({ blurRadius })
+      }
+    } catch (error) {
+      console.error('Error applying blur:', error)
+    } finally {
+      setProcessorPending(false)
+    }
+  }
+
+  useEffect(() => {
+    const videoElement = videoRef.current
+    if (!videoElement) return
+
+    const attachVideoTrack = async () => localCameraTrack?.attach(videoElement)
+    attachVideoTrack()
+
+    return () => {
+      if (!videoElement) return
+      localCameraTrack.detach(videoElement)
+    }
+  }, [localCameraTrack, isCameraEnabled])
+
+  const isSelected = (blurRadius: BlurRadius) => {
+    return isCameraEnabled && getBlurRadius() == blurRadius
+  }
+
+  const tooltipLabel = (blurRadius: BlurRadius) => {
+    return t(`blur.${isSelected(blurRadius) ? 'clear' : 'apply'}`)
+  }
+
+  return (
+    <VStack padding="0 1.5rem" overflowY="scroll">
+      {localCameraTrack && isCameraEnabled ? (
+        <video
+          ref={videoRef}
+          width="100%"
+          muted
+          style={{
+            transform: 'rotateY(180deg)',
+            minHeight: '175px',
+            borderRadius: '8px',
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '100%',
+            height: '174px',
+            display: 'flex',
+            backgroundColor: 'black',
+            justifyContent: 'center',
+            flexDirection: 'column',
+          }}
+        >
+          <P
+            style={{
+              color: 'white',
+              textAlign: 'center',
+              textWrap: 'balance',
+              marginBottom: 0,
+            }}
+          >
+            {t('activateCamera')}
+          </P>
+        </div>
+      )}
+      <Div
+        alignItems={'left'}
+        width={'100%'}
+        style={{
+          border: '1px solid #dadce0',
+          borderRadius: '8px',
+          margin: '0 .625rem',
+          padding: '0.5rem 1rem',
+        }}
+      >
+        <H
+          lvl={3}
+          style={{
+            marginBottom: '0.4rem',
+          }}
+        >
+          {t('heading')}
+        </H>
+        {isSupported ? (
+          <HStack>
+            <ToggleButton
+              size={'sm'}
+              aria-label={tooltipLabel(BlurRadius.LIGHT)}
+              tooltip={tooltipLabel(BlurRadius.LIGHT)}
+              isDisabled={processorPending}
+              onPress={async () => await toggleBlur(BlurRadius.LIGHT)}
+              isSelected={isSelected(BlurRadius.LIGHT)}
+            >
+              {t('blur.light')}
+            </ToggleButton>
+            <ToggleButton
+              size={'sm'}
+              aria-label={tooltipLabel(BlurRadius.NORMAL)}
+              tooltip={tooltipLabel(BlurRadius.NORMAL)}
+              isDisabled={processorPending}
+              onPress={async () => await toggleBlur(BlurRadius.NORMAL)}
+              isSelected={isSelected(BlurRadius.NORMAL)}
+            >
+              {t('blur.normal')}
+            </ToggleButton>
+          </HStack>
+        ) : (
+          <Text variant="sm">{t('notAvailable')}</Text>
+        )}
+        <Information>
+          <Text
+            variant="sm"
+            style={{
+              textWrap: 'balance',
+            }}
+          >
+            ⚠︎ {t('experimental')}
+          </Text>
+        </Information>
+      </Div>
+    </VStack>
+  )
+}

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -8,9 +8,9 @@ import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
 import { useSidePanel } from '../hooks/useSidePanel'
 import { ReactNode } from 'react'
+import { Effects } from './Effects'
 import { Chat } from '../prefabs/Chat'
 import { Transcript } from './Transcript'
-import { Effects } from './effects/Effects'
 
 type StyledSidePanelProps = {
   title: string

src/frontend/src/features/rooms/livekit/components/blur/BackgroundBlurCustomProcessor.ts

@@ -11,11 +11,7 @@ import {
   TIMEOUT_TICK,
   timerWorkerScript,
 } from './TimerWorker'
-import {
-  BackgroundProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 const PROCESSING_WIDTH = 256
 const PROCESSING_HEIGHT = 144
@@ -32,7 +28,9 @@ const DEFAULT_BLUR = '10'
  * It also make possible to run blurring on browser that does not implement MediaStreamTrackGenerator and
  * MediaStreamTrackProcessor.
  */
-export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
+export class BackgroundBlurCustomProcessor
+  implements BackgroundBlurProcessorInterface
+{
   options: BackgroundOptions
   name: string
   processedTrack?: MediaStreamTrack | undefined
@@ -61,18 +59,9 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
 
   timerWorker?: Worker
 
-  type: ProcessorType
-  virtualBackgroundImage?: HTMLImageElement
-
   constructor(opts: BackgroundOptions) {
     this.name = 'blur'
     this.options = opts
-
-    if (this.options.blurRadius) {
-      this.type = ProcessorType.BLUR
-    } else {
-      this.type = ProcessorType.VIRTUAL
-    }
   }
 
   static get isSupported() {
@@ -88,7 +77,6 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     this.sourceSettings = this.source!.getSettings()
     this.videoElement = opts.element as HTMLVideoElement
 
-    this._initVirtualBackgroundImage()
     this._createMainCanvas()
     this._createMaskCanvas()
 
@@ -106,21 +94,8 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     posthog.capture('firefox-blurring-init')
   }
 
-  _initVirtualBackgroundImage() {
-    const needsUpdate =
-      this.options.imagePath &&
-      this.virtualBackgroundImage &&
-      this.virtualBackgroundImage.src !== this.options.imagePath
-    if (this.options.imagePath || needsUpdate) {
-      this.virtualBackgroundImage = document.createElement('img')
-      this.virtualBackgroundImage.crossOrigin = 'anonymous'
-      this.virtualBackgroundImage.src = this.options.imagePath!
-    }
-  }
-
   update(opts: BackgroundOptions): void {
     this.options = opts
-    this._initVirtualBackgroundImage()
   }
 
   _initWorker() {
@@ -222,7 +197,6 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     this.outputCanvasCtx!.globalCompositeOperation = 'copy'
     this.outputCanvasCtx!.filter = 'blur(8px)'
 
-    // Put opacity mask.
     this.outputCanvasCtx!.drawImage(
       this.segmentationMaskCanvas!,
       0,
@@ -235,69 +209,19 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
       this.videoElement!.videoHeight
     )
 
-    // Draw clear body.
     this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
     this.outputCanvasCtx!.filter = 'none'
     this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
 
-    // Draw blurry background.
     this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
     this.outputCanvasCtx!.filter = `blur(${this.options.blurRadius ?? DEFAULT_BLUR}px)`
     this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
   }
 
-  /**
-   * TODO: future improvement with WebGL.
-   */
-  async drawVirtualBackground() {
-    const mask = this.imageSegmenterResult!.categoryMask!.getAsUint8Array()
-    for (let i = 0; i < mask.length; ++i) {
-      this.segmentationMask!.data[i * 4 + 3] = 255 - mask[i]
-    }
-
-    this.segmentationMaskCanvasCtx!.putImageData(this.segmentationMask!, 0, 0)
-
-    this.outputCanvasCtx!.globalCompositeOperation = 'copy'
-    this.outputCanvasCtx!.filter = 'blur(8px)'
-
-    // Put opacity mask.
-    this.outputCanvasCtx!.drawImage(
-      this.segmentationMaskCanvas!,
-      0,
-      0,
-      PROCESSING_WIDTH,
-      PROCESSING_HEIGHT,
-      0,
-      0,
-      this.videoElement!.videoWidth,
-      this.videoElement!.videoHeight
-    )
-
-    // Draw clear body.
-    this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
-    this.outputCanvasCtx!.filter = 'none'
-    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
-
-    // Draw virtual background.
-    this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
-    this.outputCanvasCtx!.drawImage(
-      this.virtualBackgroundImage!,
-      0,
-      0,
-      this.outputCanvas!.width,
-      this.outputCanvas!.height
-    )
-  }
-
   async process() {
     await this.sizeSource()
     await this.segment()
-
-    if (this.options.blurRadius) {
-      await this.blur()
-    } else {
-      await this.drawVirtualBackground()
-    }
+    await this.blur()
     this.timerWorker!.postMessage({
       id: SET_TIMEOUT,
       timeMs: 1000 / 30,
@@ -354,15 +278,4 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
     this.timerWorker?.terminate()
     this.imageSegmenter?.close()
   }
-
-  clone() {
-    return new BackgroundCustomProcessor(this.options)
-  }
-
-  serialize() {
-    return {
-      type: this.type,
-      options: this.options,
-    }
-  }
 }

src/frontend/src/features/rooms/livekit/components/blur/BackgroundBlurTrackProcessorJsWrapper.ts

@@ -4,11 +4,7 @@ import {
   ProcessorWrapper,
 } from '@livekit/track-processors'
 import { ProcessorOptions, Track } from 'livekit-client'
-import {
-  BackgroundProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 /**
  * This is simply a wrapper around track-processor-js Processor
@@ -16,17 +12,14 @@ import {
  * used accross the project.
  */
 export class BackgroundBlurTrackProcessorJsWrapper
-  implements BackgroundProcessorInterface
+  implements BackgroundBlurProcessorInterface
 {
-  name: string = 'blur'
+  name: string = 'Blur'
 
   processor: ProcessorWrapper<BackgroundOptions>
 
-  opts: BackgroundOptions
-
   constructor(opts: BackgroundOptions) {
     this.processor = BackgroundBlur(opts.blurRadius)
-    this.opts = opts
   }
 
   async init(opts: ProcessorOptions<Track.Kind>) {
@@ -52,17 +45,4 @@ export class BackgroundBlurTrackProcessorJsWrapper
   get options() {
     return (this.processor.transformer as BackgroundTransformer).options
   }
-
-  clone() {
-    return new BackgroundBlurTrackProcessorJsWrapper({
-      blurRadius: this.options!.blurRadius,
-    })
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.BLUR,
-      options: this.options,
-    }
-  }
 }

src/frontend/src/features/rooms/livekit/components/blur/BackgroundVirtualTrackProcessorJsWrapper.ts

@@ -1,61 +0,0 @@
-import { ProcessorOptions, Track } from 'livekit-client'
-import {
-  BackgroundOptions,
-  BackgroundProcessorInterface,
-  ProcessorType,
-} from '.'
-import {
-  BackgroundTransformer,
-  ProcessorWrapper,
-  VirtualBackground,
-} from '@livekit/track-processors'
-
-export class BackgroundVirtualTrackProcessorJsWrapper
-  implements BackgroundProcessorInterface
-{
-  name = 'virtual'
-
-  processor: ProcessorWrapper<BackgroundOptions>
-
-  opts: BackgroundOptions
-
-  constructor(opts: BackgroundOptions) {
-    this.processor = VirtualBackground(opts.imagePath!)
-    this.opts = opts
-  }
-
-  async init(opts: ProcessorOptions<Track.Kind>) {
-    return this.processor.init(opts)
-  }
-
-  async restart(opts: ProcessorOptions<Track.Kind>) {
-    return this.processor.restart(opts)
-  }
-
-  async destroy() {
-    return this.processor.destroy()
-  }
-
-  update(opts: BackgroundOptions): void {
-    this.processor.updateTransformerOptions(opts)
-  }
-
-  get processedTrack() {
-    return this.processor.processedTrack
-  }
-
-  get options() {
-    return (this.processor.transformer as BackgroundTransformer).options
-  }
-
-  clone() {
-    return new BackgroundVirtualTrackProcessorJsWrapper(this.options)
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.VIRTUAL,
-      options: this.options,
-    }
-  }
-}

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -1,63 +1,32 @@
 import { ProcessorWrapper } from '@livekit/track-processors'
 import { Track, TrackProcessor } from 'livekit-client'
 import { BackgroundBlurTrackProcessorJsWrapper } from './BackgroundBlurTrackProcessorJsWrapper'
-import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
-import { BackgroundVirtualTrackProcessorJsWrapper } from './BackgroundVirtualTrackProcessorJsWrapper'
+import { BackgroundBlurCustomProcessor } from './BackgroundBlurCustomProcessor'
 
 export type BackgroundOptions = {
   blurRadius?: number
-  imagePath?: string
 }
 
-export interface ProcessorSerialized {
-  type: ProcessorType
-  options: BackgroundOptions
-}
-
-export interface BackgroundProcessorInterface
+export interface BackgroundBlurProcessorInterface
   extends TrackProcessor<Track.Kind> {
   update(opts: BackgroundOptions): void
   options: BackgroundOptions
-  clone(): BackgroundProcessorInterface
-  serialize(): ProcessorSerialized
 }
 
-export enum ProcessorType {
-  BLUR = 'blur',
-  VIRTUAL = 'virtual',
-}
-
-export class BackgroundProcessorFactory {
+export class BackgroundBlurFactory {
   static isSupported() {
-    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported
+    return (
+      ProcessorWrapper.isSupported || BackgroundBlurCustomProcessor.isSupported
+    )
   }
 
-  static getProcessor(
-    type: ProcessorType,
-    opts: BackgroundOptions
-  ): BackgroundProcessorInterface | undefined {
-    if (type === ProcessorType.BLUR) {
-      if (ProcessorWrapper.isSupported) {
-        return new BackgroundBlurTrackProcessorJsWrapper(opts)
-      }
-      if (BackgroundCustomProcessor.isSupported) {
-        return new BackgroundCustomProcessor(opts)
-      }
-    } else if (type === ProcessorType.VIRTUAL) {
-      if (ProcessorWrapper.isSupported) {
-        return new BackgroundVirtualTrackProcessorJsWrapper(opts)
-      }
-      if (BackgroundCustomProcessor.isSupported) {
-        return new BackgroundCustomProcessor(opts)
-      }
+  static getProcessor(opts: BackgroundOptions) {
+    if (ProcessorWrapper.isSupported) {
+      return new BackgroundBlurTrackProcessorJsWrapper(opts)
     }
-    return undefined
-  }
-
-  static deserializeProcessor(data?: ProcessorSerialized) {
-    if (data?.type) {
-      return BackgroundProcessorFactory.getProcessor(data?.type, data?.options)
+    if (BackgroundBlurCustomProcessor.isSupported) {
+      return new BackgroundBlurCustomProcessor(opts)
     }
-    return undefined
+    return null
   }
 }

src/frontend/src/features/rooms/livekit/components/controls/CameraSwitchButton.tsx

@@ -1,123 +0,0 @@
-import { Button } from '@/primitives'
-import { useMediaDeviceSelect } from '@livekit/components-react'
-import { RiCameraSwitchLine } from '@remixicon/react'
-import { useEffect, useState } from 'react'
-import { ButtonProps } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-
-enum FacingMode {
-  USER = 'user',
-  ENVIRONMENT = 'environment',
-}
-
-export const CameraSwitchButton = (props: Partial<ButtonProps>) => {
-  const { t } = useTranslation('rooms')
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({
-      kind: 'videoinput',
-      requestPermissions: true,
-    })
-
-  // getCapabilities type is not available.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const getDeviceFacingMode = (device: any): string[] => {
-    if (!device.getCapabilities) {
-      return []
-    }
-    const capabilities = device.getCapabilities()
-    if (!capabilities) {
-      return []
-    }
-    if (typeof capabilities.facingMode !== 'object') {
-      return []
-    }
-    return capabilities.facingMode
-  }
-
-  const detectCurrentFacingMode = (): FacingMode | null => {
-    if (!activeDeviceId) {
-      return null
-    }
-    const activeDevice = devices.find(
-      (device) => device.deviceId === activeDeviceId
-    )
-    if (!activeDevice) {
-      return null
-    }
-    const facingMode = getDeviceFacingMode(activeDevice)
-    if (facingMode.indexOf(FacingMode.USER) >= 0) {
-      return FacingMode.USER
-    }
-    if (facingMode.indexOf(FacingMode.ENVIRONMENT) >= 0) {
-      return FacingMode.ENVIRONMENT
-    }
-    return null
-  }
-
-  const guessCurrentFacingMode = () => {
-    const facingMode = detectCurrentFacingMode()
-    if (facingMode) {
-      return facingMode
-    }
-    // We consider by default if we have no clue that the user camera is used.
-    return FacingMode.USER
-  }
-
-  const [facingMode, setFacingMode] = useState<FacingMode | null>()
-
-  /**
-   * Before setting the initial value of facingMode we need to wait for devices to
-   * be loaded ( because in detectCurrentFacingMode we need to find the active device
-   * in the devices list ), which is not the case at first render.
-   */
-  useEffect(() => {
-    if (devices.length == 0) {
-      return
-    }
-    if (facingMode) {
-      return
-    }
-
-    setFacingMode(guessCurrentFacingMode())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [devices])
-
-  const getUserDevice = (
-    facingMode: FacingMode
-  ): MediaDeviceInfo | undefined => {
-    return devices.find((device) => {
-      return getDeviceFacingMode(device).indexOf(facingMode) >= 0
-    })
-  }
-
-  const toggle = () => {
-    let target: FacingMode
-    if (facingMode === FacingMode.USER) {
-      target = FacingMode.ENVIRONMENT
-    } else {
-      target = FacingMode.USER
-    }
-    const device = getUserDevice(target)
-    if (device) {
-      setActiveMediaDevice(device.deviceId)
-      setFacingMode(target)
-    } else {
-      console.error('Cannot get user device with facingMode ' + target)
-    }
-  }
-  return (
-    <Button
-      onPress={(e) => {
-        toggle()
-        props.onPress?.(e)
-      }}
-      variant="primaryTextDark"
-      aria-label={t('options.items.switchCamera')}
-      tooltip={t('options.items.switchCamera')}
-      description={true}
-    >
-      <RiCameraSwitchLine size={20} />
-    </Button>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx

@@ -1,20 +0,0 @@
-import { RiImageCircleAiFill } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-
-export const EffectsMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
-
-  return (
-    <MenuItem
-      onAction={() => toggleEffects()}
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      <RiImageCircleAiFill size={20} />
-      {t('effects')}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx

@@ -1,20 +0,0 @@
-import { RiMegaphoneLine } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { GRIST_FORM } from '@/utils/constants'
-
-export const FeedbackMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-
-  return (
-    <MenuItem
-      href={GRIST_FORM}
-      target="_blank"
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      <RiMegaphoneLine size={20} />
-      {t('feedback')}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx

@@ -1,34 +0,0 @@
-import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useFullScreen } from '../../../hooks/useFullScreen'
-
-export const FullScreenMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
-    useFullScreen()
-
-  if (!isFullscreenAvailable) {
-    return null
-  }
-
-  return (
-    <MenuItem
-      onAction={() => toggleFullScreen()}
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      {isCurrentlyFullscreen ? (
-        <>
-          <RiFullscreenExitLine size={20} />
-          {t('fullscreen.exit')}
-        </>
-      ) : (
-        <>
-          <RiFullscreenLine size={20} />
-          {t('fullscreen.enter')}
-        </>
-      )}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -8,7 +8,7 @@ export const OptionsButton = () => {
 
   return (
     <>
-      <Menu variant="dark">
+      <Menu>
         <Button
           square
           variant="primaryDark"

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -1,12 +1,21 @@
-import { Menu as RACMenu, MenuSection } from 'react-aria-components'
+import {
+  RiAccountBoxLine,
+  RiMegaphoneLine,
+  RiSettings3Line,
+} from '@remixicon/react'
+import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
 import { Separator } from '@/primitives/Separator'
-import { FullScreenMenuItem } from './FullScreenMenuItem'
-import { SettingsMenuItem } from './SettingsMenuItem'
-import { FeedbackMenuItem } from './FeedbackMenuItem'
-import { EffectsMenuItem } from './EffectsMenuItem'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { useSettingsDialog } from '../SettingsDialogContext'
+import { GRIST_FORM } from '@/utils/constants'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleEffects } = useSidePanel()
+  const { setDialogOpen } = useSettingsDialog()
   return (
     <RACMenu
       style={{
@@ -15,13 +24,31 @@ export const OptionsMenuItems = () => {
       }}
     >
       <MenuSection>
-        <FullScreenMenuItem />
-        <EffectsMenuItem />
+        <MenuItem
+          onAction={() => toggleEffects()}
+          className={menuRecipe({ icon: true }).item}
+        >
+          <RiAccountBoxLine size={20} />
+          {t('effects')}
+        </MenuItem>
       </MenuSection>
       <Separator />
       <MenuSection>
-        <FeedbackMenuItem />
-        <SettingsMenuItem />
+        <MenuItem
+          href={GRIST_FORM}
+          target="_blank"
+          className={menuRecipe({ icon: true }).item}
+        >
+          <RiMegaphoneLine size={20} />
+          {t('feedbacks')}
+        </MenuItem>
+        <MenuItem
+          className={menuRecipe({ icon: true }).item}
+          onAction={() => setDialogOpen(true)}
+        >
+          <RiSettings3Line size={20} />
+          {t('settings')}
+        </MenuItem>
       </MenuSection>
     </RACMenu>
   )

src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx

@@ -1,20 +0,0 @@
-import { RiSettings3Line } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSettingsDialog } from '../SettingsDialogContext'
-
-export const SettingsMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { setDialogOpen } = useSettingsDialog()
-
-  return (
-    <MenuItem
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-      onAction={() => setDialogOpen(true)}
-    >
-      <RiSettings3Line size={20} />
-      {t('settings')}
-    </MenuItem>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx

@@ -46,9 +46,9 @@ export const ScreenShareToggle = ({
       {...props}
     >
       <Div position="relative">
-        <RiRectangleLine size={24} />
+        <RiRectangleLine size={28} />
         <Icon
-          size={14}
+          size={16}
           style={{
             position: 'absolute',
             top: '50%',

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -13,21 +13,12 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import {
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-  VideoCaptureOptions,
-} from 'livekit-client'
+import { Track } from 'livekit-client'
 
 import { Shortcut } from '@/features/shortcuts/types'
 
 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useEffect } from 'react'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../blur'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -74,22 +65,12 @@ const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
 
 type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
-    track?: LocalAudioTrack | LocalVideoTrack | undefined
-    initialDeviceId?: string
     onActiveDeviceChange: (deviceId: string) => void
     source: SelectToggleSource
-    variant?: NonNullable<ButtonRecipeProps>['variant']
-    menuVariant?: 'dark' | 'light'
-    hideMenu?: boolean
   }
 
 export const SelectToggleDevice = <T extends ToggleSource>({
-  track,
-  initialDeviceId,
   onActiveDeviceChange,
-  hideMenu,
-  variant = 'primaryDark',
-  menuVariant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
   const config = selectToggleDeviceConfig[props.source]
@@ -99,53 +80,8 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
   const trackProps = useTrackToggle(props)
 
-  const { userChoices } = usePersistentUserChoices({})
-
-  const toggle = () => {
-    if (props.source === Track.Source.Camera) {
-      /**
-       * We need to make sure that we apply the in-memory processor when re-enabling the camera.
-       * Before, we had the following bug:
-       * 1 - Configure a processor on join screen
-       * 2 - Turn off camera on join screen
-       * 3 - Join the room
-       * 4 - Turn on the camera
-       * 5 - No processor is applied to the camera
-       * Expected: The processor is applied.
-       *
-       * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
-       */
-      const processor = BackgroundProcessorFactory.deserializeProcessor(
-        userChoices.processorSerialized
-      )
-
-      const toggle = trackProps.toggle as (
-        forceState: boolean,
-        captureOptions: VideoCaptureOptions
-      ) => Promise<void>
-
-      toggle(!trackProps.enabled, {
-        processor: processor,
-      } as VideoCaptureOptions)
-    } else {
-      trackProps.toggle()
-    }
-  }
-
   const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind, track })
-
-  /**
-   * When providing only track outside of a room context, activeDeviceId is undefined.
-   * So we need to initialize it with the initialDeviceId.
-   * nb: I don't understand why useMediaDeviceSelect cannot infer it from track device id.
-   */
-  useEffect(() => {
-    if (initialDeviceId !== undefined) {
-      setActiveMediaDevice(initialDeviceId)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setActiveMediaDevice])
+    useMediaDeviceSelect({ kind: config.kind })
 
   const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
 
@@ -156,44 +92,29 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         gap: '1px',
       })}
     >
-      <ToggleDevice
-        {...trackProps}
-        config={config}
-        variant={variant}
-        toggle={toggle}
-        toggleButtonProps={{
-          ...(hideMenu
-            ? {
-                groupPosition: undefined,
-              }
-            : {}),
-        }}
-      />
-      {!hideMenu && (
-        <Menu variant={menuVariant}>
-          <Button
-            tooltip={selectLabel}
-            aria-label={selectLabel}
-            groupPosition="right"
-            square
-            variant={trackProps.enabled ? variant : 'error2'}
-          >
-            <RiArrowDownSLine />
-          </Button>
-          <MenuList
-            items={devices.map((d) => ({
-              value: d.deviceId,
-              label: d.label,
-            }))}
-            selectedItem={activeDeviceId}
-            onAction={(value) => {
-              setActiveMediaDevice(value as string)
-              onActiveDeviceChange(value as string)
-            }}
-            variant={menuVariant}
-          />
-        </Menu>
-      )}
+      <ToggleDevice {...trackProps} config={config} />
+      <Menu>
+        <Button
+          tooltip={selectLabel}
+          aria-label={selectLabel}
+          groupPosition="right"
+          square
+          variant={trackProps.enabled ? 'primaryDark' : 'error2'}
+        >
+          <RiArrowDownSLine />
+        </Button>
+        <MenuList
+          items={devices.map((d) => ({
+            value: d.deviceId,
+            label: d.label,
+          }))}
+          selectedItem={activeDeviceId}
+          onAction={(value) => {
+            setActiveMediaDevice(value as string)
+            onActiveDeviceChange(value as string)
+          }}
+        />
+      </Menu>
     </div>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx

@@ -4,14 +4,10 @@ import { useTranslation } from 'react-i18next'
 import { Crisp } from 'crisp-sdk-web'
 import { useEffect, useState } from 'react'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'
 
 export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-
-  const [isOpened, setIsOpened] = useState(() => {
-    return window?.$crisp?.is?.('chat:opened') || false
-  })
+  const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
 
   useEffect(() => {
     if (!Crisp) {
@@ -30,12 +26,6 @@ export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
     }
   }, [])
 
-  const isSupportEnabled = useIsSupportEnabled()
-
-  if (!isSupportEnabled) {
-    return
-  }
-
   return (
     <ToggleButton
       square

src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx

@@ -6,28 +6,18 @@ import { useTranslation } from 'react-i18next'
 import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import {
-  useIsSpeaking,
-  useLocalParticipant,
-  useMaybeRoomContext,
-} from '@livekit/components-react'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
 
 export type ToggleDeviceProps = {
   enabled: boolean
   toggle: () => void
   config: SelectToggleDeviceConfig
-  variant?: NonNullable<ButtonRecipeProps>['variant']
-  toggleButtonProps?: Partial<ToggleButtonProps>
 }
 
 export const ToggleDevice = ({
   config,
   enabled,
   toggle,
-  variant = 'primaryDark',
-  toggleButtonProps,
 }: ToggleDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
@@ -58,29 +48,24 @@ export const ToggleDevice = ({
 
   const Icon = enabled ? iconOn : iconOff
 
-  const context = useMaybeRoomContext()
-  if (kind === 'audioinput' && pushToTalk && context) {
-    return <ActiveSpeakerWrapper />
+  const { localParticipant } = useLocalParticipant()
+  const isSpeaking = useIsSpeaking(localParticipant)
+
+  if (kind === 'audioinput' && pushToTalk) {
+    return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
   }
 
   return (
     <ToggleButton
       isSelected={!enabled}
-      variant={enabled ? variant : 'error2'}
+      variant={enabled ? 'primaryDark' : 'error2'}
       shySelected
       onPress={() => toggle()}
       aria-label={toggleLabel}
       tooltip={toggleLabel}
       groupPosition="left"
-      {...toggleButtonProps}
     >
       <Icon />
     </ToggleButton>
   )
 }
-
-const ActiveSpeakerWrapper = () => {
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-}

src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx

@@ -7,7 +7,7 @@ import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 export const TranscriptToggle = ({
-  variant = 'primaryTextDark',
+  variant = 'primaryDark',
   onPress,
   ...props
 }: ToggleButtonProps) => {

src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx

@@ -1,27 +0,0 @@
-import { useLocalParticipant } from '@livekit/components-react'
-import { LocalVideoTrack } from 'livekit-client'
-import { css } from '@/styled-system/css'
-import { EffectsConfiguration } from './EffectsConfiguration'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-
-export const Effects = () => {
-  const { cameraTrack } = useLocalParticipant()
-  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
-  const { saveProcessorSerialized } = usePersistentUserChoices()
-
-  return (
-    <div
-      className={css({
-        padding: '0 1.5rem',
-      })}
-    >
-      <EffectsConfiguration
-        videoTrack={localCameraTrack}
-        layout="vertical"
-        onSubmit={(processor) =>
-          saveProcessorSerialized(processor?.serialize())
-        }
-      />
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -1,316 +0,0 @@
-import { LocalVideoTrack } from 'livekit-client'
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  BackgroundProcessorFactory,
-  BackgroundProcessorInterface,
-  ProcessorType,
-} from '../blur'
-import { css } from '@/styled-system/css'
-import { Text, P, ToggleButton, H } from '@/primitives'
-import { styled } from '@/styled-system/jsx'
-import { BackgroundOptions } from '@livekit/track-processors'
-import { BlurOn } from '@/components/icons/BlurOn'
-import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
-
-enum BlurRadius {
-  NONE = 0,
-  LIGHT = 5,
-  NORMAL = 10,
-}
-
-const isSupported = BackgroundProcessorFactory.isSupported()
-
-const Information = styled('div', {
-  base: {
-    backgroundColor: 'orange.50',
-    borderRadius: '4px',
-    padding: '0.75rem 0.75rem',
-    alignItems: 'start',
-  },
-})
-
-export type EffectsConfigurationProps = {
-  videoTrack: LocalVideoTrack
-  onSubmit?: (processor?: BackgroundProcessorInterface) => void
-  layout?: 'vertical' | 'horizontal'
-}
-
-export const EffectsConfiguration = ({
-  videoTrack,
-  onSubmit,
-  layout = 'horizontal',
-}: EffectsConfigurationProps) => {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
-  const [processorPending, setProcessorPending] = useState(false)
-
-  useEffect(() => {
-    const videoElement = videoRef.current
-    if (!videoElement) return
-
-    const attachVideoTrack = async () => videoTrack?.attach(videoElement)
-    attachVideoTrack()
-
-    return () => {
-      if (!videoElement) return
-      videoTrack.detach(videoElement)
-    }
-  }, [videoTrack, videoTrack?.isMuted])
-
-  const toggleEffect = async (
-    type: ProcessorType,
-    options: BackgroundOptions
-  ) => {
-    if (!videoTrack) return
-    setProcessorPending(true)
-    const processor = getProcessor()
-    try {
-      if (isSelected(type, options)) {
-        // Stop processor.
-        await videoTrack.stopProcessor()
-        onSubmit?.(undefined)
-      } else if (!processor || processor.serialize().type !== type) {
-        // Change processor.
-        const newProcessor = BackgroundProcessorFactory.getProcessor(
-          type,
-          options
-        )!
-        await videoTrack.setProcessor(newProcessor)
-        onSubmit?.(newProcessor)
-      } else {
-        // Update processor.
-        processor?.update(options)
-        // We want to trigger onSubmit when options changes so the parent component is aware of it.
-        onSubmit?.(processor)
-      }
-    } catch (error) {
-      console.error('Error applying blur:', error)
-    } finally {
-      // Without setTimeout the DOM is not refreshing when updating the options.
-      setTimeout(() => setProcessorPending(false))
-    }
-  }
-
-  const getProcessor = () => {
-    return videoTrack?.getProcessor() as BackgroundProcessorInterface
-  }
-
-  const isSelected = (type: ProcessorType, options: BackgroundOptions) => {
-    const processor = getProcessor()
-    const processorSerialized = processor?.serialize()
-    return (
-      !!processor &&
-      processorSerialized.type === type &&
-      JSON.stringify(processorSerialized.options) === JSON.stringify(options)
-    )
-  }
-
-  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
-    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
-  }
-
-  return (
-    <div
-      className={css(
-        layout === 'vertical'
-          ? {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '1.5rem',
-            }
-          : {
-              display: 'flex',
-              gap: '1.5rem',
-              flexDirection: 'column',
-              md: {
-                flexDirection: 'row',
-                overflow: 'hidden',
-              },
-            }
-      )}
-    >
-      <div
-        className={css({
-          width: '100%',
-          aspectRatio: 16 / 9,
-        })}
-      >
-        {videoTrack && !videoTrack.isMuted ? (
-          <video
-            ref={videoRef}
-            width="100%"
-            muted
-            style={{
-              transform: 'rotateY(180deg)',
-              minHeight: '175px',
-              borderRadius: '8px',
-            }}
-          />
-        ) : (
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              backgroundColor: 'black',
-              justifyContent: 'center',
-              flexDirection: 'column',
-            }}
-          >
-            <P
-              style={{
-                color: 'white',
-                textAlign: 'center',
-                textWrap: 'balance',
-                marginBottom: 0,
-              }}
-            >
-              {t('activateCamera')}
-            </P>
-          </div>
-        )}
-      </div>
-      <div
-        className={css(
-          layout === 'horizontal'
-            ? {
-                md: {
-                  borderLeft: '1px solid #dadce0',
-                  paddingLeft: '1.5rem',
-                  width: '420px',
-                  flexShrink: 0,
-                },
-              }
-            : {}
-        )}
-      >
-        {isSupported ? (
-          <>
-            <div>
-              <div>
-                <H
-                  lvl={3}
-                  style={{
-                    marginBottom: '1rem',
-                  }}
-                  variant="bodyXsBold"
-                >
-                  {t('blur.title')}
-                </H>
-                <div
-                  className={css({
-                    display: 'flex',
-                    gap: '1.25rem',
-                  })}
-                >
-                  <ToggleButton
-                    variant="bigSquare"
-                    aria-label={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    tooltip={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    isDisabled={processorPending}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.LIGHT,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                  >
-                    <BlurOn />
-                  </ToggleButton>
-                  <ToggleButton
-                    variant="bigSquare"
-                    aria-label={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    tooltip={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    isDisabled={processorPending}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.NORMAL,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                  >
-                    <BlurOnStrong />
-                  </ToggleButton>
-                </div>
-              </div>
-              <div
-                className={css({
-                  marginTop: '1.5rem',
-                })}
-              >
-                <H
-                  lvl={3}
-                  style={{
-                    marginBottom: '1rem',
-                  }}
-                  variant="bodyXsBold"
-                >
-                  {t('virtual.title')}
-                </H>
-                <div
-                  className={css({
-                    display: 'flex',
-                    gap: '1.25rem',
-                    flexWrap: 'wrap',
-                  })}
-                >
-                  {[...Array(8).keys()].map((i) => {
-                    const imagePath = `/assets/backgrounds/${i + 1}.jpg`
-                    const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
-                    return (
-                      <ToggleButton
-                        key={i}
-                        variant="bigSquare"
-                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        isDisabled={processorPending}
-                        onChange={async () =>
-                          await toggleEffect(ProcessorType.VIRTUAL, {
-                            imagePath,
-                          })
-                        }
-                        isSelected={isSelected(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        className={css({
-                          bgSize: 'cover',
-                        })}
-                        style={{
-                          backgroundImage: `url(${thumbnailPath})`,
-                        }}
-                      ></ToggleButton>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-            <Information className={css({ marginTop: '1rem' })}>
-              <Text variant="sm">⚠︎ {t('experimental')}</Text>
-            </Information>
-          </>
-        ) : (
-          <Information>
-            <Text variant="sm">{t('notAvailable')}</Text>
-          </Information>
-        )}
-      </div>
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts

@@ -1,68 +0,0 @@
-// We use vendor prefix properties
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-import { useState } from 'react'
-
-export function useFullScreen() {
-  const getIsFullscreen = () => {
-    return !!(
-      document.fullscreenElement ||
-      document.webkitFullscreenElement ||
-      document.mozFullScreenElement ||
-      document.msFullscreenElement
-    )
-  }
-
-  const [isFullscreenAvailable] = useState(
-    () =>
-      document.fullscreenEnabled ||
-      document.webkitFullscreenEnabled ||
-      document.mozFullScreenEnabled ||
-      document.msFullscreenEnabled
-  )
-
-  const enterFullscreen = async () => {
-    try {
-      const docEl = document.documentElement
-      if (docEl.requestFullscreen) {
-        await docEl.requestFullscreen()
-      } else if (docEl.webkitRequestFullscreen) {
-        await docEl.webkitRequestFullscreen()
-      } else if (docEl.msRequestFullscreen) {
-        await docEl.msRequestFullscreen()
-      }
-    } catch (error) {
-      console.error('Error entering fullscreen:', error)
-    }
-  }
-
-  const exitFullscreen = async () => {
-    try {
-      if (document.exitFullscreen) {
-        await document.exitFullscreen()
-      } else if (document.webkitExitFullscreen) {
-        await document.webkitExitFullscreen()
-      } else if (document.msExitFullscreen) {
-        await document.msExitFullscreen()
-      }
-    } catch (error) {
-      console.error('Error exiting fullscreen:', error)
-    }
-  }
-
-  const toggleFullScreen = async () => {
-    const isCurrentlyFullscreen = getIsFullscreen()
-    if (isCurrentlyFullscreen) {
-      await exitFullscreen()
-    } else {
-      await enterFullscreen()
-    }
-  }
-
-  return {
-    isCurrentlyFullscreen: getIsFullscreen(),
-    isFullscreenAvailable,
-    toggleFullScreen,
-  }
-}

src/frontend/src/features/rooms/livekit/hooks/usePersistentUserChoices.ts

@@ -1,56 +0,0 @@
-import { UsePersistentUserChoicesOptions } from '@livekit/components-react'
-import React from 'react'
-import { LocalUserChoices } from '../../routes/Room'
-import { saveUserChoices, loadUserChoices } from '@livekit/components-core'
-import { ProcessorSerialized } from '../components/blur'
-
-/**
- * From @livekit/component-react
- *
- * A hook that provides access to user choices stored in local storage, such as
- * selected media devices and their current state (on or off), as well as the user name.
- * @alpha
- */
-export function usePersistentUserChoices(
-  options: UsePersistentUserChoicesOptions = {}
-) {
-  const [userChoices, setSettings] = React.useState<LocalUserChoices>(
-    loadUserChoices(options.defaults, options.preventLoad ?? false)
-  )
-
-  const saveAudioInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, audioEnabled: isEnabled }))
-  }, [])
-  const saveVideoInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, videoEnabled: isEnabled }))
-  }, [])
-  const saveAudioInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, audioDeviceId: deviceId }))
-  }, [])
-  const saveVideoInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, videoDeviceId: deviceId }))
-  }, [])
-  const saveUsername = React.useCallback((username: string) => {
-    setSettings((prev) => ({ ...prev, username: username }))
-  }, [])
-  const saveProcessorSerialized = React.useCallback(
-    (processorSerialized?: ProcessorSerialized) => {
-      setSettings((prev) => ({ ...prev, processorSerialized }))
-    },
-    []
-  )
-
-  React.useEffect(() => {
-    saveUserChoices(userChoices, options.preventSave ?? false)
-  }, [userChoices, options.preventSave])
-
-  return {
-    userChoices,
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-    saveUsername,
-    saveProcessorSerialized,
-  }
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/ControlBar.tsx

@@ -1,11 +1,11 @@
 import { Track } from 'livekit-client'
 import * as React from 'react'
+import { usePersistentUserChoices } from '@livekit/components-react'
 
 import { MobileControlBar } from './MobileControlBar'
 import { DesktopControlBar } from './DesktopControlBar'
 import { SettingsDialogProvider } from '../../components/controls/SettingsDialogContext'
 import { useIsMobile } from '@/utils/useIsMobile'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 
 /** @public */
 export type ControlBarControls = {

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -8,8 +8,10 @@ import { HandToggle } from '../../components/controls/HandToggle'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
-import { MoreOptions } from './MoreOptions'
-import { useRef } from 'react'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
 
 export function DesktopControlBar({
   onDeviceError,
@@ -19,11 +21,9 @@ export function DesktopControlBar({
   saveVideoInputDeviceId,
 }: ControlBarAuxProps) {
   const browserSupportsScreenSharing = supportsScreenSharing()
-  const desktopControlBarEl = useRef<HTMLDivElement>(null)
   return (
     <>
       <div
-        ref={desktopControlBarEl}
         className={css({
           width: '100vw',
           display: 'flex',
@@ -62,7 +62,6 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
-            menuVariant="dark"
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -73,7 +72,6 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
-            menuVariant="dark"
           />
           {browserSupportsScreenSharing && (
             <ScreenShareToggle
@@ -87,7 +85,21 @@ export function DesktopControlBar({
           <LeaveButton />
           <StartMediaButton />
         </div>
-        <MoreOptions parentElement={desktopControlBarEl} />
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flex: '1 1 33%',
+            alignItems: 'center',
+            gap: '0.5rem',
+            paddingRight: '0.25rem',
+          })}
+        >
+          <ChatToggle />
+          <ParticipantsToggle />
+          <TranscriptToggle />
+          <SupportToggle />
+        </div>
       </div>
     </>
   )

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -23,7 +23,6 @@ import { LinkButton } from '@/primitives'
 import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
 import { ResponsiveMenu } from './ResponsiveMenu'
 import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
-import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'
 
 export function MobileControlBar({
   onDeviceError,
@@ -56,7 +55,7 @@ export function MobileControlBar({
           className={css({
             display: 'flex',
             justifyContent: 'space-between',
-            width: '330px',
+            width: '422px',
           })}
         >
           <LeaveButton />
@@ -69,7 +68,6 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
-            hideMenu={true}
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -80,7 +78,6 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
-            hideMenu={true}
           />
           <HandToggle />
           <Button
@@ -157,8 +154,8 @@ export function MobileControlBar({
             <LinkButton
               href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
               variant="primaryTextDark"
-              tooltip={t('options.items.feedback')}
-              aria-label={t('options.items.feedback')}
+              tooltip={t('options.items.feedbacks')}
+              aria-label={t('options.items.feedbacks')}
               description={true}
               target="_blank"
               onPress={() => setIsMenuOpened(false)}
@@ -177,7 +174,6 @@ export function MobileControlBar({
             >
               <RiSettings3Line size={20} />
             </Button>
-            <CameraSwitchButton onPress={() => setIsMenuOpened(false)} />
           </div>
         </div>
       </ResponsiveMenu>

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx

@@ -1,87 +0,0 @@
-import { css } from '@/styled-system/css'
-import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
-import { useSize } from '../../hooks/useResizeObserver'
-import { useState, RefObject } from 'react'
-import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
-import { Button } from '@/primitives'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-
-const CONTROL_BAR_BREAKPOINT = 750
-
-const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
-  <>
-    <ChatToggle onPress={onPress} />
-    <ParticipantsToggle onPress={onPress} />
-    <TranscriptToggle onPress={onPress} />
-    <SupportToggle onPress={onPress} />
-  </>
-)
-
-export const LateralMenu = () => {
-  const { t } = useTranslation('rooms')
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handlePress = () => setIsOpen(!isOpen)
-  const handleClose = () => setIsOpen(false)
-
-  return (
-    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
-      <Button
-        square
-        variant="secondaryDark"
-        aria-label={t('controls.moreOptions')}
-        tooltip={t('controls.moreOptions')}
-        onPress={handlePress}
-      >
-        {isOpen ? <RiArrowDownSLine /> : <RiArrowUpSLine />}
-      </Button>
-      <Popover>
-        <Dialog
-          className={css({
-            width: '65px',
-            backgroundColor: 'primaryDark.50',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            borderRadius: '4px',
-            paddingTop: '10px',
-            gap: '0.5rem',
-          })}
-        >
-          <NavigationControls onPress={handleClose} />
-        </Dialog>
-      </Popover>
-    </DialogTrigger>
-  )
-}
-
-export const MoreOptions = ({
-  parentElement,
-}: {
-  parentElement: RefObject<HTMLDivElement>
-}) => {
-  const { width: parentWidth } = useSize(parentElement)
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        justifyContent: 'flex-end',
-        flex: '1 1 33%',
-        alignItems: 'center',
-        gap: '0.5rem',
-        paddingRight: '0.25rem',
-      })}
-    >
-      {parentWidth > CONTROL_BAR_BREAKPOINT ? (
-        <NavigationControls />
-      ) : (
-        <LateralMenu />
-      )}
-    </div>
-  )
-}

src/frontend/src/features/rooms/routes/Room.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import {
   usePersistentUserChoices,
-  type LocalUserChoices as LocalUserChoicesLK,
+  type LocalUserChoices,
 } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -9,11 +9,6 @@ import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
-import { ProcessorSerialized } from '../livekit/components/blur'
-
-export type LocalUserChoices = LocalUserChoicesLK & {
-  processorSerialized?: ProcessorSerialized
-}
 
 export const Room = () => {
   const { isLoggedIn } = useUser()

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -1,13 +1,15 @@
 import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives'
 import { Trans, useTranslation } from 'react-i18next'
-import { useRoomContext } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
 import { logoutUrl, useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { HStack } from '@/styled-system/jsx'
 import { useState } from 'react'
 import { ProConnectButton } from '@/components/ProConnectButton'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>

src/frontend/src/features/support/hooks/useSupport.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { Crisp } from 'crisp-sdk-web'
 import { ApiUser } from '@/features/auth/api/ApiUser'
-import { useConfig } from '@/api/useConfig'
 
 export const initializeSupportSession = (user: ApiUser) => {
   if (!Crisp.isCrispInjected()) return
@@ -30,8 +29,3 @@ export const useSupport = ({ id }: useSupportProps) => {
 
   return null
 }
-
-export const useIsSupportEnabled = () => {
-  const { data } = useConfig()
-  return !!data?.support?.id
-}

src/frontend/src/layout/Footer.tsx

@@ -242,7 +242,7 @@ export const Footer = () => {
               {t('links.data')}
             </A>
           </StyledLi>
-          <StyledLi divider>
+          <StyledLi>
             <A
               externalIcon
               underline={false}
@@ -255,17 +255,6 @@ export const Footer = () => {
               {t('links.accessibility')}
             </A>
           </StyledLi>
-          <StyledLi>
-            <A
-              externalIcon
-              underline={false}
-              footer="minor"
-              href="https://github.com/numerique-gouv/meet/"
-              aria-label={t('links.code') + ' - ' + t('links.ariaLabel')}
-            >
-              {t('links.code')}
-            </A>
-          </StyledLi>
         </SecondRow>
         <ThirdRow>
           {t('mentions')}{' '}

src/frontend/src/locales/de/global.json

@@ -34,8 +34,7 @@
       "legalsTerms": "",
       "data": "",
       "accessibility": "",
-      "ariaLabel": "",
-      "code": ""
+      "ariaLabel": ""
     },
     "mentions": "",
     "license": ""

src/frontend/src/locales/de/rooms.json

@@ -19,22 +19,12 @@
       "label": ""
     },
     "heading": "",
-    "effects": {
-      "description": "",
-      "title": "",
-      "subTitle": ""
-    },
     "joinLabel": "",
     "joinMeeting": "",
     "toggleOff": "",
     "toggleOn": "",
     "usernameHint": "",
-    "usernameLabel": "",
-    "errors": {
-      "usernameEmpty": ""
-    },
-    "cameraDisabled": "",
-    "cameraStarting": ""
+    "usernameLabel": ""
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
@@ -85,21 +75,15 @@
       "open": "",
       "closed": ""
     },
-    "support": "",
-    "moreOptions": ""
+    "support": ""
   },
   "options": {
     "buttonLabel": "",
     "items": {
-      "feedback": "",
+      "feedbacks": "",
       "settings": "",
       "username": "",
-      "effects": "",
-      "switchCamera": "",
-      "fullscreen": {
-        "enter": "",
-        "exit": ""
-      }
+      "effects": ""
     }
   },
   "effects": {
@@ -107,17 +91,11 @@
     "notAvailable": "",
     "heading": "",
     "blur": {
-      "title": "",
       "light": "",
       "normal": "",
       "apply": "",
       "clear": ""
     },
-    "virtual": {
-      "title": "",
-      "apply": "",
-      "clear": ""
-    },
     "experimental": ""
   },
   "sidePanel": {

src/frontend/src/locales/en/global.json

@@ -34,8 +34,7 @@
       "legalsTerms": "Legal Notice",
       "data": "Personal Data and Cookies",
       "accessibility": "Accessibility: audit in progress",
-      "ariaLabel": "new window",
-      "code": "Open Source Code Repository"
+      "ariaLabel": "new window"
     },
     "mentions": "Unless otherwise stated, the contents of this site are available under",
     "license": "etalab 2.0 license"

src/frontend/src/locales/en/rooms.json

@@ -18,23 +18,13 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "effects": {
-      "description": "Apply effects",
-      "title": "Effects",
-      "subTitle": "Configure your camera's effects."
-    },
-    "heading": "Join the meeting",
+    "heading": "Verify your settings",
     "joinLabel": "Join",
     "joinMeeting": "Join meeting",
     "toggleOff": "Click to turn off",
     "toggleOn": "Click to turn on",
     "usernameHint": "Shown to other participants",
-    "usernameLabel": "Your name",
-    "errors": {
-      "usernameEmpty": "Your name cannot be empty"
-    },
-    "cameraDisabled": "Camera is disabled.",
-    "cameraStarting": "Camera is starting."
+    "usernameLabel": "Your name"
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
@@ -84,39 +74,27 @@
       "open": "Hide AI assistant",
       "closed": "Show AI assistant"
     },
-    "support": "Support",
-    "moreOptions": "More options"
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "More Options",
     "items": {
-      "feedback": "Give us feedback",
+      "feedbacks": "Give us feedbacks",
       "settings": "Settings",
       "username": "Update Your Name",
-      "effects": "Apply effects",
-      "switchCamera": "Switch camera",
-      "fullscreen": {
-        "enter": "Fullscreen",
-        "exit": "Exit fullscreen mode"
-      }
+      "effects": "Apply effects"
     }
   },
   "effects": {
     "activateCamera": "Your camera is disabled. Choose an option to enable it.",
-    "notAvailable": "Video effects will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
+    "notAvailable": "The blur effect will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
     "heading": "Blur",
     "blur": {
-      "title": "Background blur",
       "light": "Light blur",
       "normal": "Blur",
       "apply": "Enable blur",
       "clear": "Disable blur"
     },
-    "virtual": {
-      "title": "Virtual background",
-      "apply": "Enable virtual background",
-      "clear": "Disable virtual background"
-    },
     "experimental": "Experimental feature. A v2 is coming for full browser support and improved quality."
   },
   "sidePanel": {

src/frontend/src/locales/fr/global.json

@@ -34,8 +34,7 @@
       "legalsTerms": "Mentions légales",
       "data": "Données personnelles et cookie",
       "accessibility": "Accessibilités : audit en cours",
-      "ariaLabel": "nouvelle fenêtre",
-      "code": "Dépôt de code Open Source"
+      "ariaLabel": "nouvelle fenêtre"
     },
     "mentions": "Sauf mention contraire, les contenus de ce site sont disponibles sous",
     "license": "licence etalab 2.0"

src/frontend/src/locales/fr/rooms.json

@@ -18,23 +18,13 @@
       "enable": "Activer le micro",
       "label": "Microphone"
     },
-    "heading": "Rejoindre la réunion",
-    "effects": {
-      "description": "Appliquer des effets",
-      "title": "Effets",
-      "subTitle": "Paramétrez les effets de votre caméra."
-    },
+    "heading": "Vérifiez vos paramètres",
     "joinLabel": "Rejoindre",
     "joinMeeting": "Rejoindre la réjoindre",
     "toggleOff": "Cliquez pour désactiver",
     "toggleOn": "Cliquez pour activer",
     "usernameHint": "Affiché aux autres participants",
-    "usernameLabel": "Votre nom",
-    "errors": {
-      "usernameEmpty": "Votre nom ne peut pas être vide"
-    },
-    "cameraDisabled": "La caméra est désactivée.",
-    "cameraStarting": "La caméra va démarrer."
+    "usernameLabel": "Votre nom"
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
@@ -84,39 +74,27 @@
       "open": "Masquer l'assistant IA",
       "closed": "Afficher l'assistant IA"
     },
-    "support": "Support",
-    "moreOptions": "Plus d'options"
+    "support": "Support"
   },
   "options": {
     "buttonLabel": "Plus d'options",
     "items": {
-      "feedback": "Partager votre avis",
+      "feedbacks": "Partager votre avis",
       "settings": "Paramètres",
       "username": "Choisir votre nom",
-      "effects": "Appliquer des effets",
-      "switchCamera": "Changer de caméra",
-      "fullscreen": {
-        "enter": "Plein écran",
-        "exit": "Quitter le mode plein écran"
-      }
+      "effects": "Appliquer des effets"
     }
   },
   "effects": {
     "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
-    "notAvailable": "Les effets vidéo seront bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour une meilleure performance ou Firefox :(",
+    "notAvailable": "L'effet de flou sera bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour une meilleure performance ou Firefox :(",
     "heading": "Flou",
     "blur": {
-      "title": "Flou d'arrière-plan",
       "light": "Léger flou",
       "normal": "Flou",
       "apply": "Appliquer le flou",
       "clear": "Désactiver le flou"
     },
-    "virtual": {
-      "title": "Arrière-plan virtuel",
-      "apply": "Appliquer l'arrière plan virtuel",
-      "clear": "Désactiver l'arrière plan virtuel"
-    },
     "experimental": "Fonctionnalité expérimentale. Une v2 arrive pour un support complet sur tous les navigateurs et une meilleur qualité."
   },
   "sidePanel": {

src/frontend/src/primitives/Box.tsx

@@ -30,7 +30,7 @@ const box = cva({
       },
     },
     variant: {
-      light: {
+      default: {
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'box.border',
@@ -46,10 +46,6 @@ const box = cva({
         backgroundColor: 'box.bg',
         color: 'control.text',
       },
-      dark: {
-        backgroundColor: 'primaryDark.50',
-        borderColord: 'primaryDark.50',
-      },
     },
     size: {
       default: {
@@ -61,7 +57,7 @@ const box = cva({
     },
   },
   defaultVariants: {
-    variant: 'light',
+    variant: 'default',
     size: 'default',
   },
 })

src/frontend/src/primitives/Dialog.tsx

@@ -11,7 +11,6 @@ import {
 import { Div, Button, Box, VerticallyOffCenter } from '@/primitives'
 import { text } from './Text'
 import { MutableRefObject } from 'react'
-import { css } from '@/styled-system/css'
 
 const StyledModalOverlay = styled(ModalOverlay, {
   base: {
@@ -49,24 +48,6 @@ const StyledRACDialog = styled(RACDialog, {
   },
 })
 
-const ModalContent = styled('div', {
-  base: {
-    margin: 'auto',
-  },
-  variants: {
-    size: {
-      full: {
-        width: 'fit-content',
-        maxWidth: '100%',
-      },
-      large: {
-        width: '100%',
-        xl: { width: '1200px' },
-      },
-    },
-  },
-})
-
 export type DialogProps = RACDialogProps & {
   title?: string
   onClose?: () => void
@@ -82,7 +63,6 @@ export type DialogProps = RACDialogProps & {
   onOpenChange?: (isOpen: boolean) => void
   type?: 'flex'
   innerRef?: MutableRefObject<HTMLDivElement | null>
-  size?: 'full' | 'large'
 }
 
 export const Dialog = ({
@@ -92,7 +72,6 @@ export const Dialog = ({
   isOpen,
   onOpenChange,
   innerRef,
-  size = 'full',
   ...dialogProps
 }: DialogProps) => {
   const isAlert = dialogProps['role'] === 'alertdialog'
@@ -115,16 +94,9 @@ export const Dialog = ({
         <StyledRACDialog {...dialogProps}>
           {({ close }) => (
             <VerticallyOffCenter>
-              <ModalContent size={size}>
+              <Div margin="auto" width="fit-content" maxWidth="full">
                 <Div margin="1rem" pointerEvents="auto">
-                  <Box
-                    size="sm"
-                    type={boxType}
-                    ref={innerRef}
-                    className={css({
-                      padding: '1.5rem',
-                    })}
-                  >
+                  <Box size="sm" type={boxType} ref={innerRef}>
                     {!!title && (
                       <Heading
                         slot="title"
@@ -152,7 +124,7 @@ export const Dialog = ({
                     )}
                   </Box>
                 </Div>
-              </ModalContent>
+              </Div>
             </VerticallyOffCenter>
           )}
         </StyledRACDialog>

src/frontend/src/primitives/Field.tsx

@@ -25,31 +25,11 @@ const FieldWrapper = styled('div', {
     marginBottom: 'textfield',
     minWidth: 0,
   },
-  variants: {
-    noMargin: {
-      true: {
-        marginBottom: 0,
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-      },
-    },
-  },
 })
 
 const StyledLabel = styled(Label, {
   base: {
     display: 'block',
-    fontSize: '0.75rem',
-  },
-  variants: {
-    center: {
-      true: {
-        textAlign: 'center',
-      },
-    },
   },
 })
 
@@ -100,8 +80,6 @@ type FieldProps<T extends object> = (
 ) & {
   label: string
   description?: string
-  wrapperProps?: React.ComponentProps<typeof FieldWrapper>
-  labelProps?: React.ComponentProps<typeof StyledLabel>
 }
 
 /**
@@ -126,7 +104,7 @@ export const Field = <T extends object>({
 }: FieldProps<T>) => {
   const LabelAndDescription = (
     <>
-      <StyledLabel {...props.labelProps}>{label}</StyledLabel>
+      <StyledLabel>{label}</StyledLabel>
       <FieldDescription slot="description">{description}</FieldDescription>
     </>
   )
@@ -140,7 +118,7 @@ export const Field = <T extends object>({
 
   if (type === 'text') {
     return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
         <RACTextField
           validate={validate as unknown as TextFieldProps['validate']}
           {...(props as PartialTextFieldProps)}
@@ -155,7 +133,7 @@ export const Field = <T extends object>({
 
   if (type === 'checkbox') {
     return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
         <Checkbox
           validate={validate as unknown as CheckboxProps['validate']}
           description={description}
@@ -169,7 +147,7 @@ export const Field = <T extends object>({
 
   if (type === 'checkboxGroup') {
     return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
         <CheckboxGroup
           validate={validate as unknown as CheckboxGroupProps['validate']}
           {...(props as PartialCheckboxGroupProps)}
@@ -192,7 +170,7 @@ export const Field = <T extends object>({
 
   if (type === 'radioGroup') {
     return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
         <RadioGroup
           validate={validate as unknown as RadioGroupProps['validate']}
           {...(props as PartialRadioGroupProps)}
@@ -211,7 +189,7 @@ export const Field = <T extends object>({
 
   if (type === 'select') {
     return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
         <Select
           validate={validate as unknown as SelectProps<T>['validate']}
           {...(props as PartialSelectProps<T>)}

src/frontend/src/primitives/Form.tsx

@@ -3,7 +3,6 @@ import { Form as RACForm, type FormProps } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { HStack } from '@/styled-system/jsx'
 import { Button, useCloseDialog } from '@/primitives'
-import { ButtonProps } from '@/primitives/Button'
 
 /**
  * From wrapper that exposes form data on submit and adds submit/cancel buttons
@@ -14,7 +13,6 @@ import { ButtonProps } from '@/primitives/Button'
 export const Form = ({
   onSubmit,
   submitLabel,
-  submitButtonProps,
   withCancelButton = true,
   onCancelButtonPress,
   children,
@@ -27,7 +25,6 @@ export const Form = ({
     event: FormEvent<HTMLFormElement>
   ) => void
   submitLabel: string
-  submitButtonProps?: ButtonProps
   withCancelButton?: boolean
   onCancelButtonPress?: () => void
 }) => {
@@ -50,7 +47,7 @@ export const Form = ({
     >
       {children}
       <HStack gap="gutter">
-        <Button type="submit" variant="primary" {...submitButtonProps}>
+        <Button type="submit" variant="primary">
           {submitLabel}
         </Button>
         {!!onCancel && (

src/frontend/src/primitives/H.tsx

@@ -1,12 +1,10 @@
-import { Text, TextProps } from './Text'
+import { Text } from './Text'
 
 export const H = ({
   children,
   lvl,
   ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & {
-  lvl: 1 | 2 | 3
-} & TextProps) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { lvl: 1 | 2 | 3 }) => {
   const tag = `h${lvl}` as const
   return (
     <Text as={tag} variant={tag} {...props}>

src/frontend/src/primitives/Menu.tsx

@@ -8,17 +8,15 @@ import { Box } from './Box'
  */
 export const Menu = ({
   children,
-  variant = 'light',
 }: {
   children: [trigger: ReactNode, menu: ReactNode]
-  variant?: 'dark' | 'light'
 }) => {
   const [trigger, menu] = children
   return (
     <MenuTrigger>
       {trigger}
       <StyledPopover>
-        <Box size="sm" type="popover" variant={variant}>
+        <Box size="sm" type="popover">
           {menu}
         </Box>
       </StyledPopover>

src/frontend/src/primitives/MenuList.tsx

@@ -10,7 +10,6 @@ export const MenuList = <T extends string | number = string>({
   onAction,
   selectedItem,
   items = [],
-  variant = 'light',
   ...menuProps
 }: {
   onAction: (key: T) => void
@@ -19,11 +18,7 @@ export const MenuList = <T extends string | number = string>({
 } & MenuProps<unknown> &
   RecipeVariantProps<typeof menuRecipe>) => {
   const [variantProps] = menuRecipe.splitVariantProps(menuProps)
-  const classes = menuRecipe({
-    extraPadding: true,
-    variant: variant,
-    ...variantProps,
-  })
+  const classes = menuRecipe({ extraPadding: true, ...variantProps })
   return (
     <Menu
       selectionMode={selectedItem !== undefined ? 'single' : undefined}

src/frontend/src/primitives/Separator.tsx

@@ -4,7 +4,7 @@ import { Separator as RACSeparator } from 'react-aria-components'
 export const Separator = styled(RACSeparator, {
   base: {
     height: '1px',
-    background: 'primaryDark.200',
+    background: 'gray.400',
     margin: '4px 0',
   },
 })

src/frontend/src/primitives/Text.tsx

@@ -28,14 +28,6 @@ export const text = cva({
           paddingTop: 'heading',
         },
       },
-      subTitle: {
-        fontSize: '1rem',
-        color: 'greyscale.600',
-      },
-      bodyXsBold: {
-        textStyle: 'body',
-        fontWeight: 'bold',
-      },
       body: {
         textStyle: 'body',
       },

src/frontend/src/primitives/ToggleButton.tsx

@@ -27,7 +27,7 @@ export const ToggleButton = ({
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACToggleButton
         {...componentProps}
-        className={[buttonRecipe(variantProps), props.className].join(' ')}
+        className={buttonRecipe(variantProps)}
       >
         <>
           {componentProps.children as ReactNode}

src/frontend/src/primitives/buttonRecipe.ts

@@ -73,35 +73,6 @@ export const buttonRecipe = cva({
           color: 'greyscale.400',
         },
       },
-      whiteCircle: {
-        color: 'white',
-        border: '1px white solid',
-        width: '56px',
-        height: '56px',
-        borderRadius: '100%',
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100/20',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'greyscale.100/50',
-        },
-      },
-      bigSquare: {
-        width: '56px',
-        height: '56px',
-        borderColor: 'greyscale.200',
-        borderRadius: '4px',
-        backgroundColor: 'greyscale.50',
-        padding: '0',
-        flexShrink: 0,
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100',
-        },
-        transition: 'box-shadow 0.2s ease-in-out',
-        '&[data-selected]': {
-          boxShadow: 'token(colors.primary.400) 0px 0px 0px 3px inset',
-        },
-      },
       tertiary: {
         backgroundColor: 'primary.100',
         color: 'primary.800',
@@ -138,21 +109,6 @@ export const buttonRecipe = cva({
           color: 'primaryDark.100 !important',
         },
       },
-      secondaryDark: {
-        backgroundColor: 'primaryDark.50',
-        color: 'white',
-        '&[data-pressed]': {
-          backgroundColor: 'primaryDark.200',
-        },
-        '&[data-hovered]': {
-          backgroundColor: 'primaryDark.100',
-          color: 'white',
-        },
-        '&[data-selected]': {
-          backgroundColor: 'primaryDark.700 !important',
-          color: 'primaryDark.100 !important',
-        },
-      },
       primaryTextDark: {
         backgroundColor: 'transparent',
         color: 'white',

src/frontend/src/primitives/menuRecipe.ts

@@ -46,11 +46,7 @@ export const menuRecipe = sva({
           },
         },
       },
-      dark: {
-        item: {
-          color: 'white',
-        },
-      },
+      dark: {},
     },
     extraPadding: {
       true: {
@@ -71,6 +67,6 @@ export const menuRecipe = sva({
     },
   },
   defaultVariants: {
-    variant: 'light',
+    variant: 'dark',
   },
 })

src/frontend/vite.config.ts

@@ -10,7 +10,6 @@ export default defineConfig(({ mode }) => {
     server: {
       port: parseInt(env.VITE_PORT) || 3000,
       host: env.VITE_HOST || 'localhost',
-      allowedHosts: ['.nip.io'],
     },
   }
 })

src/mail/package.json

@@ -14,7 +14,7 @@
     "build": "npm run build-mjml-to-html && npm run build-html-to-plain-text"
   },
   "volta": {
-    "node": "22.13.1"
+    "node": "22.11.0"
   },
   "repository": "https://github.com/numerique-gouv/meet",
   "author": "DINUM",

src/summary/pyproject.toml

@@ -9,15 +9,15 @@ dependencies = [
     "pydantic-settings>=2.1.0",
     "celery==5.4.0",
     "redis==5.2.1",
-    "minio==7.2.15",
-    "openai==1.60.2",
+    "minio==7.2.14",
+    "openai==1.59.7",
     "requests==2.32.3",
-    "sentry-sdk[fastapi, celery]==2.20.0",
+    "sentry-sdk[fastapi, celery]==2.19.2",
 ]
 
 [project.optional-dependencies]
 dev = [
-    "ruff==0.9.3",
+    "ruff==0.9.1",
 ]
 
 [build-system]