🚸(frontend) replace effects icons in menu option

Align effects icon with the one from the newly refactored pre-join screen.
This new icon is stylish.

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 (

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 { BackgroundBlurFactory } 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: BackgroundBlurFactory.deserializeProcessor(
-                userConfig.processorSerialized
-              ),
-            }
-          }
+          video={userConfig.videoEnabled}
           connectOptions={connectOptions}
           className={css({
             backgroundColor: 'primaryDark.50 !important',

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

@@ -1,5 +1,9 @@
 import { useTranslation } from 'react-i18next'
-import { usePreviewTracks } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  usePreviewTracks,
+  type LocalUserChoices,
+} from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
 import { useMemo, useEffect, useRef, useState } from 'react'
@@ -9,13 +13,6 @@ import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleD
 import { Field } from '@/primitives/Field'
 import { Form } from '@/primitives'
 import { HStack, VStack } from '@/styled-system/jsx'
-import { Button, Dialog } from '@/primitives'
-import { LocalUserChoices } from '../routes/Room'
-import { Heading } from 'react-aria-components'
-import { RiImageCircleAiFill } from '@remixicon/react'
-import { EffectsConfiguration } from '../livekit/components/effects/EffectsConfiguration'
-import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
-import { BackgroundBlurFactory } from '../livekit/components/blur'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -31,7 +28,6 @@ export const Join = ({
     saveAudioInputDeviceId,
     saveVideoInputDeviceId,
     saveUsername,
-    saveProcessorSerialized,
   } = usePersistentUserChoices({})
 
   const [audioDeviceId, setAudioDeviceId] = useState<string>(
@@ -41,11 +37,6 @@ export const Join = ({
     initialUserChoices.videoDeviceId
   )
   const [username, setUsername] = useState<string>(initialUserChoices.username)
-  const [processor, setProcessor] = useState(
-    BackgroundBlurFactory.deserializeProcessor(
-      initialUserChoices.processorSerialized
-    )
-  )
 
   useEffect(() => {
     saveAudioInputDeviceId(audioDeviceId)
@@ -58,9 +49,6 @@ export const Join = ({
   useEffect(() => {
     saveUsername(username)
   }, [username, saveUsername])
-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [processor, saveProcessorSerialized])
 
   const [audioEnabled, setAudioEnabled] = useState(true)
   const [videoEnabled, setVideoEnabled] = useState(true)
@@ -119,52 +107,11 @@ export const Join = ({
       audioDeviceId,
       videoDeviceId,
       username,
-      processorSerialized: processor?.serialize(),
     })
   }
 
-  const [isEffectsOpen, setEffectsOpen] = useState(false)
-
-  const openEffects = () => {
-    setEffectsOpen(true)
-  }
-
-  // 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])
-
   return (
     <Screen footer={false}>
-      <Dialog
-        isOpen={isEffectsOpen}
-        onOpenChange={setEffectsOpen}
-        role="dialog"
-        type="flex"
-        size="large"
-      >
-        <Heading
-          slot="title"
-          level={1}
-          className={css({
-            textStyle: 'h1',
-            marginBottom: '1.5rem',
-          })}
-        >
-          {t('effects.title')}
-        </Heading>
-        <EffectsConfiguration
-          videoTrack={videoTrack}
-          onSubmit={(processor) => {
-            setProcessor(processor)
-          }}
-        />
-      </Dialog>
       <div
         className={css({
           display: 'flex',
@@ -257,35 +204,8 @@ export const Join = ({
                   </p>
                 </div>
               )}
-              <div
-                className={css({
-                  position: 'absolute',
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  height: '20%',
-                  backgroundImage:
-                    'linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(255,255,255,0) 100%)',
-                })}
-              ></div>
-              <div
-                className={css({
-                  position: 'absolute',
-                  right: 0,
-                  bottom: '0',
-                  padding: '1rem',
-                })}
-              >
-                <Button
-                  variant="whiteCircle"
-                  onPress={openEffects}
-                  tooltip={t('effects.description')}
-                  aria-label={t('effects.description')}
-                >
-                  <RiImageCircleAiFill size={24} />
-                </Button>
-              </div>
             </div>
+
             <HStack justify="center" padding={1.5}>
               <SelectToggleDevice
                 source={Track.Source.Microphone}

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

@@ -1,21 +1,13 @@
-import { LocalVideoTrack } from 'livekit-client'
 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'
-import { css } from '@/styled-system/css'
-import { Text, P, ToggleButton, H } from '@/primitives'
-import { HStack, styled } from '@/styled-system/jsx'
-
-enum BlurRadius {
-  NONE = 0,
-  LIGHT = 5,
-  NORMAL = 10,
-}
-
-const isSupported = BackgroundBlurFactory.isSupported()
+} from './blur/index'
 
 const Information = styled('div', {
   base: {
@@ -27,49 +19,50 @@ const Information = styled('div', {
   },
 })
 
-export const EffectsConfiguration = ({
-  videoTrack,
-  onSubmit,
-  layout = 'horizontal',
-}: {
-  videoTrack: LocalVideoTrack
-  onSubmit?: (processor?: BackgroundBlurProcessorInterface) => void
-  layout?: 'vertical' | 'horizontal'
-}) => {
-  const videoRef = useRef<HTMLVideoElement>(null)
+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)
 
-  useEffect(() => {
-    const videoElement = videoRef.current
-    if (!videoElement) return
+  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
 
-    const attachVideoTrack = async () => videoTrack?.attach(videoElement)
-    attachVideoTrack()
+  const getProcessor = () => {
+    return localCameraTrack?.getProcessor() as BackgroundBlurProcessorInterface
+  }
 
-    return () => {
-      if (!videoElement) return
-      videoTrack.detach(videoElement)
-    }
-  }, [videoTrack, videoTrack?.isMuted])
+  const getBlurRadius = (): BlurRadius => {
+    const processor = getProcessor()
+    return processor?.options.blurRadius || BlurRadius.NONE
+  }
 
   const toggleBlur = async (blurRadius: number) => {
-    if (!videoTrack) return
+    if (!isCameraEnabled) await localParticipant.setCameraEnabled(true)
+    if (!localCameraTrack) return
+
     setProcessorPending(true)
+
     const processor = getProcessor()
     const currentBlurRadius = getBlurRadius()
+
     try {
       if (blurRadius == currentBlurRadius && processor) {
-        await videoTrack.stopProcessor()
-        onSubmit?.(undefined)
+        await localCameraTrack.stopProcessor()
       } else if (!processor) {
-        const newProcessor = BackgroundBlurFactory.getProcessor({ blurRadius })!
-        await videoTrack.setProcessor(newProcessor)
-        onSubmit?.(newProcessor)
+        await localCameraTrack.setProcessor(
+          BackgroundBlurFactory.getProcessor({ blurRadius })!
+        )
       } else {
         processor?.update({ blurRadius })
-        // 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)
@@ -78,17 +71,21 @@ export const EffectsConfiguration = ({
     }
   }
 
-  const getProcessor = () => {
-    return videoTrack?.getProcessor() as BackgroundBlurProcessorInterface
-  }
+  useEffect(() => {
+    const videoElement = videoRef.current
+    if (!videoElement) return
 
-  const getBlurRadius = (): BlurRadius => {
-    const processor = getProcessor()
-    return processor?.options.blurRadius || BlurRadius.NONE
-  }
+    const attachVideoTrack = async () => localCameraTrack?.attach(videoElement)
+    attachVideoTrack()
+
+    return () => {
+      if (!videoElement) return
+      localCameraTrack.detach(videoElement)
+    }
+  }, [localCameraTrack, isCameraEnabled])
 
   const isSelected = (blurRadius: BlurRadius) => {
-    return getBlurRadius() == blurRadius
+    return isCameraEnabled && getBlurRadius() == blurRadius
   }
 
   const tooltipLabel = (blurRadius: BlurRadius) => {
@@ -96,82 +93,55 @@ export const EffectsConfiguration = ({
   }
 
   return (
-    <div
-      className={css(
-        layout === 'vertical'
-          ? {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.5rem',
-            }
-          : {
-              display: 'flex',
-              gap: '1.5rem',
-              flexDirection: 'column',
-              md: {
-                flexDirection: 'row',
-              },
-            }
-      )}
-    >
-      <div
-        className={css({
-          width: '100%',
-          aspectRatio: 16 / 9,
-        })}
-      >
-        {videoTrack && !videoTrack.isMuted ? (
-          <video
-            ref={videoRef}
-            width="100%"
-            muted
+    <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={{
-              transform: 'rotateY(180deg)',
-              minHeight: '175px',
-              borderRadius: '8px',
-            }}
-          />
-        ) : (
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              backgroundColor: 'black',
-              justifyContent: 'center',
-              flexDirection: 'column',
+              color: 'white',
+              textAlign: 'center',
+              textWrap: 'balance',
+              marginBottom: 0,
             }}
           >
-            <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',
-                },
-              }
-            : {}
-        )}
+            {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',
-            fontWeight: 'bold',
           }}
         >
           {t('heading')}
@@ -203,9 +173,16 @@ export const EffectsConfiguration = ({
           <Text variant="sm">{t('notAvailable')}</Text>
         )}
         <Information>
-          <Text variant="sm">⚠︎ {t('experimental')}</Text>
+          <Text
+            variant="sm"
+            style={{
+              textWrap: 'balance',
+            }}
+          >
+            ⚠︎ {t('experimental')}
+          </Text>
         </Information>
-      </div>
-    </div>
+      </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 {
-  BackgroundBlurProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 const PROCESSING_WIDTH = 256
 const PROCESSING_HEIGHT = 144
@@ -282,15 +278,4 @@ export class BackgroundBlurCustomProcessor
     this.timerWorker?.terminate()
     this.imageSegmenter?.close()
   }
-
-  clone() {
-    return new BackgroundBlurCustomProcessor(this.options)
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.BLUR,
-      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 {
-  BackgroundBlurProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 /**
  * This is simply a wrapper around track-processor-js Processor
@@ -22,11 +18,8 @@ export class BackgroundBlurTrackProcessorJsWrapper
 
   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/index.ts

@@ -7,21 +7,10 @@ export type BackgroundOptions = {
   blurRadius?: number
 }
 
-export interface ProcessorSerialized {
-  type: ProcessorType
-  options: BackgroundOptions
-}
-
 export interface BackgroundBlurProcessorInterface
   extends TrackProcessor<Track.Kind> {
   update(opts: BackgroundOptions): void
   options: BackgroundOptions
-  clone(): BackgroundBlurProcessorInterface
-  serialize(): ProcessorSerialized
-}
-
-export enum ProcessorType {
-  BLUR = 'blur',
 }
 
 export class BackgroundBlurFactory {
@@ -31,22 +20,13 @@ export class BackgroundBlurFactory {
     )
   }
 
-  static getProcessor(
-    opts: BackgroundOptions
-  ): BackgroundBlurProcessorInterface | undefined {
+  static getProcessor(opts: BackgroundOptions) {
     if (ProcessorWrapper.isSupported) {
       return new BackgroundBlurTrackProcessorJsWrapper(opts)
     }
     if (BackgroundBlurCustomProcessor.isSupported) {
       return new BackgroundBlurCustomProcessor(opts)
     }
-    return undefined
-  }
-
-  static deserializeProcessor(data?: ProcessorSerialized) {
-    if (data?.type === ProcessorType.BLUR) {
-      return BackgroundBlurFactory.getProcessor(data?.options)
-    }
-    return undefined
+    return null
   }
 }

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

@@ -1,4 +1,4 @@
-import { RiAccountBoxLine } from '@remixicon/react'
+import { RiImageCircleAiFill } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
@@ -13,7 +13,7 @@ export const EffectsMenuItem = () => {
       onAction={() => toggleEffects()}
       className={menuRecipe({ icon: true, variant: 'dark' }).item}
     >
-      <RiAccountBoxLine size={20} />
+      <RiImageCircleAiFill size={20} />
       {t('effects')}
     </MenuItem>
   )

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

@@ -13,12 +13,7 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import {
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-  VideoCaptureOptions,
-} from 'livekit-client'
+import { LocalAudioTrack, LocalVideoTrack, Track } from 'livekit-client'
 
 import { Shortcut } from '@/features/shortcuts/types'
 
@@ -26,8 +21,6 @@ import { ToggleDevice } from '@/features/rooms/livekit/components/controls/Toggl
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { useEffect } from 'react'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-import { BackgroundBlurFactory } from '../blur'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -99,39 +92,6 @@ 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 = BackgroundBlurFactory.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 })
 
@@ -160,7 +120,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         {...trackProps}
         config={config}
         variant={variant}
-        toggle={toggle}
         toggleButtonProps={{
           ...(hideMenu
             ? {

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/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/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

@@ -31,17 +31,7 @@ export const useSupport = ({ id }: useSupportProps) => {
   return null
 }
 
-// Some users may block Crisp chat widget with browser ad blockers or anti-tracking plugins
-// So we need to safely check if Crisp is available and not blocked
-const isCrispAvailable = () => {
-  try {
-    return !!window?.$crisp?.is
-  } catch {
-    return false
-  }
-}
-
 export const useIsSupportEnabled = () => {
   const { data } = useConfig()
-  return !!data?.support?.id && isCrispAvailable()
+  return !!data?.support?.id
 }

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

@@ -18,10 +18,6 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "effects": {
-      "description": "Apply effects",
-      "title": "Effects"
-    },
     "heading": "Join the meeting",
     "joinLabel": "Join",
     "joinMeeting": "Join meeting",

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

@@ -19,10 +19,6 @@
       "label": "Microphone"
     },
     "heading": "Rejoindre la réunion",
-    "effects": {
-      "description": "Appliquer des effets",
-      "title": "Effets"
-    },
     "joinLabel": "Rejoindre",
     "joinMeeting": "Rejoindre la réjoindre",
     "toggleOff": "Cliquez pour désactiver",

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/buttonRecipe.ts

@@ -73,19 +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',
-        },
-      },
       tertiary: {
         backgroundColor: 'primary.100',
         color: 'primary.800',