🩹(frontend) prevent support toggle when Crisp chat is blocked

Some users have ad-blockers or privacy extensions that prevent the Crisp chat
widget script from loading properly. This was causing the support toggle to
still display in rooms, but clicking it had no effect since Crisp was blocked.

This ensures users don't see an inactive support button when their browser
is blocking Crisp functionality.

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

@@ -16,7 +16,7 @@ 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'
+import { BackgroundBlurFactory } from '../livekit/components/blur'
 
 export const Conference = ({
   roomId,
@@ -114,7 +114,7 @@ export const Conference = ({
           audio={userConfig.audioEnabled}
           video={
             userConfig.videoEnabled && {
-              processor: BackgroundProcessorFactory.deserializeProcessor(
+              processor: BackgroundBlurFactory.deserializeProcessor(
                 userConfig.processorSerialized
               ),
             }

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

@@ -7,96 +7,18 @@ 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 { 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,
-  EffectsConfigurationProps,
-} from '../livekit/components/effects/EffectsConfiguration'
+import { EffectsConfiguration } from '../livekit/components/effects/EffectsConfiguration'
 import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../livekit/components/blur'
-import { isMobileBrowser } from '@livekit/components-core'
+import { BackgroundBlurFactory } from '../livekit/components/blur'
 
 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',
-        })}
-      />
-    </>
-  )
-}
-
 export const Join = ({
   onSubmit,
 }: {
@@ -112,8 +34,6 @@ export const Join = ({
     saveProcessorSerialized,
   } = usePersistentUserChoices({})
 
-  const [audioEnabled, setAudioEnabled] = useState(true)
-  const [videoEnabled, setVideoEnabled] = useState(true)
   const [audioDeviceId, setAudioDeviceId] = useState<string>(
     initialUserChoices.audioDeviceId
   )
@@ -122,7 +42,7 @@ export const Join = ({
   )
   const [username, setUsername] = useState<string>(initialUserChoices.username)
   const [processor, setProcessor] = useState(
-    BackgroundProcessorFactory.deserializeProcessor(
+    BackgroundBlurFactory.deserializeProcessor(
       initialUserChoices.processorSerialized
     )
   )
@@ -138,15 +58,12 @@ export const Join = ({
   useEffect(() => {
     saveUsername(username)
   }, [username, saveUsername])
-
   useEffect(() => {
     saveProcessorSerialized(processor?.serialize())
-  }, [
-    processor,
-    saveProcessorSerialized,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(processor?.serialize()),
-  ])
+  }, [processor, saveProcessorSerialized])
+
+  const [audioEnabled, setAudioEnabled] = useState(true)
+  const [videoEnabled, setVideoEnabled] = useState(true)
 
   const tracks = usePreviewTracks(
     {
@@ -206,6 +123,12 @@ export const Join = ({
     })
   }
 
+  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.
@@ -218,6 +141,30 @@ export const Join = ({
 
   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',
@@ -280,16 +227,13 @@ export const Join = ({
                   height="720"
                   className={css({
                     display: 'block',
-                    width: '100%',
-                    height: '100%',
+                    width: '102%',
+                    height: '102%',
                     objectFit: 'cover',
                     transform: 'rotateY(180deg)',
                     opacity: 0,
                     transition: 'opacity 0.3s ease-in-out',
-                    borderRadius: '1rem',
                   })}
-                  disablePictureInPicture
-                  disableRemotePlayback
                 />
               ) : (
                 <div
@@ -313,7 +257,34 @@ export const Join = ({
                   </p>
                 </div>
               )}
-              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
+              <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

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

@@ -12,7 +12,7 @@ import {
   timerWorkerScript,
 } from './TimerWorker'
 import {
-  BackgroundProcessorInterface,
+  BackgroundBlurProcessorInterface,
   BackgroundOptions,
   ProcessorType,
 } from '.'
@@ -32,7 +32,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 +63,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 +81,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 +98,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 +201,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 +213,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,
@@ -356,12 +284,12 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
   }
 
   clone() {
-    return new BackgroundCustomProcessor(this.options)
+    return new BackgroundBlurCustomProcessor(this.options)
   }
 
   serialize() {
     return {
-      type: this.type,
+      type: ProcessorType.BLUR,
       options: this.options,
     }
   }

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

@@ -5,7 +5,7 @@ import {
 } from '@livekit/track-processors'
 import { ProcessorOptions, Track } from 'livekit-client'
 import {
-  BackgroundProcessorInterface,
+  BackgroundBlurProcessorInterface,
   BackgroundOptions,
   ProcessorType,
 } from '.'
@@ -16,9 +16,9 @@ import {
  * used accross the project.
  */
 export class BackgroundBlurTrackProcessorJsWrapper
-  implements BackgroundProcessorInterface
+  implements BackgroundBlurProcessorInterface
 {
-  name: string = 'blur'
+  name: string = 'Blur'
 
   processor: ProcessorWrapper<BackgroundOptions>
 

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,12 +1,10 @@
 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 {
@@ -14,49 +12,40 @@ export interface ProcessorSerialized {
   options: BackgroundOptions
 }
 
-export interface BackgroundProcessorInterface
+export interface BackgroundBlurProcessorInterface
   extends TrackProcessor<Track.Kind> {
   update(opts: BackgroundOptions): void
   options: BackgroundOptions
-  clone(): BackgroundProcessorInterface
+  clone(): BackgroundBlurProcessorInterface
   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)
-      }
+  ): BackgroundBlurProcessorInterface | undefined {
+    if (ProcessorWrapper.isSupported) {
+      return new BackgroundBlurTrackProcessorJsWrapper(opts)
+    }
+    if (BackgroundBlurCustomProcessor.isSupported) {
+      return new BackgroundBlurCustomProcessor(opts)
     }
     return undefined
   }
 
   static deserializeProcessor(data?: ProcessorSerialized) {
-    if (data?.type) {
-      return BackgroundProcessorFactory.getProcessor(data?.type, data?.options)
+    if (data?.type === ProcessorType.BLUR) {
+      return BackgroundBlurFactory.getProcessor(data?.options)
     }
     return undefined
   }

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

@@ -1,4 +1,4 @@
-import { RiImageCircleAiFill } from '@remixicon/react'
+import { RiAccountBoxLine } 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}
     >
-      <RiImageCircleAiFill size={20} />
+      <RiAccountBoxLine size={20} />
       {t('effects')}
     </MenuItem>
   )

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

@@ -27,7 +27,7 @@ import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { useEffect } from 'react'
 import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../blur'
+import { BackgroundBlurFactory } from '../blur'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -115,7 +115,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
        *
        * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
        */
-      const processor = BackgroundProcessorFactory.deserializeProcessor(
+      const processor = BackgroundBlurFactory.deserializeProcessor(
         userChoices.processorSerialized
       )
 

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

@@ -2,16 +2,12 @@ import { LocalVideoTrack } from 'livekit-client'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  BackgroundProcessorFactory,
-  BackgroundProcessorInterface,
-  ProcessorType,
+  BackgroundBlurFactory,
+  BackgroundBlurProcessorInterface,
 } 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'
+import { HStack, styled } from '@/styled-system/jsx'
 
 enum BlurRadius {
   NONE = 0,
@@ -19,28 +15,27 @@ enum BlurRadius {
   NORMAL = 10,
 }
 
-const isSupported = BackgroundProcessorFactory.isSupported()
+const isSupported = BackgroundBlurFactory.isSupported()
 
 const Information = styled('div', {
   base: {
     backgroundColor: 'orange.50',
     borderRadius: '4px',
     padding: '0.75rem 0.75rem',
+    marginTop: '0.8rem',
     alignItems: 'start',
   },
 })
 
-export type EffectsConfigurationProps = {
-  videoTrack: LocalVideoTrack
-  onSubmit?: (processor?: BackgroundProcessorInterface) => void
-  layout?: 'vertical' | 'horizontal'
-}
-
 export const EffectsConfiguration = ({
   videoTrack,
   onSubmit,
   layout = 'horizontal',
-}: EffectsConfigurationProps) => {
+}: {
+  videoTrack: LocalVideoTrack
+  onSubmit?: (processor?: BackgroundBlurProcessorInterface) => void
+  layout?: 'vertical' | 'horizontal'
+}) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
   const [processorPending, setProcessorPending] = useState(false)
@@ -58,56 +53,46 @@ export const EffectsConfiguration = ({
     }
   }, [videoTrack, videoTrack?.isMuted])
 
-  const toggleEffect = async (
-    type: ProcessorType,
-    options: BackgroundOptions
-  ) => {
+  const toggleBlur = async (blurRadius: number) => {
     if (!videoTrack) return
     setProcessorPending(true)
     const processor = getProcessor()
+    const currentBlurRadius = getBlurRadius()
     try {
-      if (isSelected(type, options)) {
-        // Stop processor.
+      if (blurRadius == currentBlurRadius && processor) {
         await videoTrack.stopProcessor()
         onSubmit?.(undefined)
-      } else if (!processor || processor.serialize().type !== type) {
-        // Change processor.
-        const newProcessor = BackgroundProcessorFactory.getProcessor(
-          type,
-          options
-        )!
+      } else if (!processor) {
+        const newProcessor = BackgroundBlurFactory.getProcessor({ blurRadius })!
         await videoTrack.setProcessor(newProcessor)
         onSubmit?.(newProcessor)
       } else {
-        // Update processor.
-        processor?.update(options)
+        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)
     } finally {
-      // Without setTimeout the DOM is not refreshing when updating the options.
-      setTimeout(() => setProcessorPending(false))
+      setProcessorPending(false)
     }
   }
 
   const getProcessor = () => {
-    return videoTrack?.getProcessor() as BackgroundProcessorInterface
+    return videoTrack?.getProcessor() as BackgroundBlurProcessorInterface
   }
 
-  const isSelected = (type: ProcessorType, options: BackgroundOptions) => {
+  const getBlurRadius = (): BlurRadius => {
     const processor = getProcessor()
-    const processorSerialized = processor?.serialize()
-    return (
-      !!processor &&
-      processorSerialized.type === type &&
-      JSON.stringify(processorSerialized.options) === JSON.stringify(options)
-    )
+    return processor?.options.blurRadius || BlurRadius.NONE
   }
 
-  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
-    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
+  const isSelected = (blurRadius: BlurRadius) => {
+    return getBlurRadius() == blurRadius
+  }
+
+  const tooltipLabel = (blurRadius: BlurRadius) => {
+    return t(`blur.${isSelected(blurRadius) ? 'clear' : 'apply'}`)
   }
 
   return (
@@ -117,7 +102,7 @@ export const EffectsConfiguration = ({
           ? {
               display: 'flex',
               flexDirection: 'column',
-              gap: '1.5rem',
+              gap: '0.5rem',
             }
           : {
               display: 'flex',
@@ -125,7 +110,6 @@ export const EffectsConfiguration = ({
               flexDirection: 'column',
               md: {
                 flexDirection: 'row',
-                overflow: 'hidden',
               },
             }
       )}
@@ -178,138 +162,49 @@ export const EffectsConfiguration = ({
                 md: {
                   borderLeft: '1px solid #dadce0',
                   paddingLeft: '1.5rem',
-                  width: '420px',
-                  flexShrink: 0,
                 },
               }
             : {}
         )}
       >
+        <H
+          lvl={3}
+          style={{
+            marginBottom: '0.4rem',
+            fontWeight: 'bold',
+          }}
+        >
+          {t('heading')}
+        </H>
         {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>
-          </>
+          <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>
         ) : (
-          <Information>
-            <Text variant="sm">{t('notAvailable')}</Text>
-          </Information>
+          <Text variant="sm">{t('notAvailable')}</Text>
         )}
+        <Information>
+          <Text variant="sm">⚠︎ {t('experimental')}</Text>
+        </Information>
       </div>
     </div>
   )

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

@@ -31,7 +31,17 @@ 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
+  return !!data?.support?.id && isCrispAvailable()
 }

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,11 +19,6 @@
       "label": ""
     },
     "heading": "",
-    "effects": {
-      "description": "",
-      "title": "",
-      "subTitle": ""
-    },
     "joinLabel": "",
     "joinMeeting": "",
     "toggleOff": "",
@@ -107,17 +102,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

@@ -20,8 +20,7 @@
     },
     "effects": {
       "description": "Apply effects",
-      "title": "Effects",
-      "subTitle": "Configure your camera's effects."
+      "title": "Effects"
     },
     "heading": "Join the meeting",
     "joinLabel": "Join",
@@ -103,20 +102,14 @@
   },
   "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

@@ -21,8 +21,7 @@
     "heading": "Rejoindre la réunion",
     "effects": {
       "description": "Appliquer des effets",
-      "title": "Effets",
-      "subTitle": "Paramétrez les effets de votre caméra."
+      "title": "Effets"
     },
     "joinLabel": "Rejoindre",
     "joinMeeting": "Rejoindre la réjoindre",
@@ -103,20 +102,14 @@
   },
   "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/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

@@ -86,22 +86,6 @@ export const buttonRecipe = cva({
           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',