🩹(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.

.github/workflows/deploy.yml

@@ -11,17 +11,34 @@ jobs:
   notify-argocd:
     runs-on: ubuntu-latest
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Call argocd github webhook
         run: |
           data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/'$GITHUB_REPOSITORY'"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_WEBHOOK_SECRET }}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_WEBHOOK_URL }}
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_PRODUCTION_WEBHOOK_SECRET }}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ secrets.ARGOCD_PRODUCTION_WEBHOOK_URL }}
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_WEBHOOK_URL
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_PRODUCTION_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_PRODUCTION_WEBHOOK_URL
 
   start-test-on-preprod:
     needs:

.github/workflows/docker-hub.yml

@@ -19,9 +19,26 @@ jobs:
   build-and-push-backend:
     runs-on: ubuntu-latest
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -31,7 +48,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -52,9 +69,26 @@ jobs:
   build-and-push-frontend:
     runs-on: ubuntu-latest
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -64,7 +98,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -86,9 +120,26 @@ jobs:
   build-and-push-summary:
     runs-on: ubuntu-latest
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -98,7 +149,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
       -
         name: Build and push
         uses: docker/build-push-action@v6
@@ -111,6 +162,7 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
 
+
   notify-argocd:
     needs:
       - build-and-push-frontend
@@ -120,12 +172,29 @@ jobs:
     if: |
       github.event_name != 'pull_request'
     steps:
+      -
+        uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+          repositories: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+      -
+        name: Load sops secrets
+        uses: rouja/actions-sops@main
+        with:
+          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
+          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Call argocd github webhook
         run: |
           data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/'$GITHUB_REPOSITORY'"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac "${{ secrets.ARGOCD_WEBHOOK_SECRET }}" | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_PREPROD_WEBHOOK_URL }}
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_WEBHOOK_URL

src/frontend/Dockerfile

@@ -34,11 +34,6 @@ RUN npm run build
 # ---- Front-end image ----
 FROM nginxinc/nginx-unprivileged:1.26-alpine AS frontend-production
 
-USER root
-RUN apk update && apk upgrade libssl3 libcrypto3
-
-USER nginx
-
 # Un-privileged user running the application
 ARG DOCKER_USER
 USER ${DOCKER_USER}

src/frontend/panda.config.ts

@@ -121,32 +121,6 @@ const config: Config = {
         '50%': { opacity: '0.65' },
         '100%': { opacity: '1' },
       },
-      rotate: {
-        '0%': {
-          transform: 'rotate(0deg)',
-        },
-        '100%': {
-          transform: 'rotate(360deg)',
-        },
-      },
-      prixClipFix: {
-        '0%': {
-          clipPath: 'polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)',
-        },
-        '25%': {
-          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)',
-        },
-        '50%': {
-          clipPath:
-            'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)',
-        },
-        '75%': {
-          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)',
-        },
-        '100%': {
-          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)',
-        },
-      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -1,81 +1,16 @@
 import { useEffect } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
+import { Participant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
-import { ChatMessage, isMobileBrowser } from '@livekit/components-core'
+import { isMobileBrowser } from '@livekit/components-core'
 import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
 
-enum ToastDuration {
-  SHORT = 3000,
-  MEDIUM = 4000,
-  LONG = 5000,
-}
-
-const NotificationDuration = {
-  ALERT: ToastDuration.SHORT,
-  MESSAGE: ToastDuration.LONG,
-  PARTICIPANT_JOINED: ToastDuration.LONG,
-  HAND_RAISED: ToastDuration.LONG,
-} as const
-
 export const MainNotificationToast = () => {
   const room = useRoomContext()
   const { triggerNotificationSound } = useNotificationSound()
 
-  useEffect(() => {
-    const handleChatMessage = (
-      chatMessage: ChatMessage,
-      participant?: Participant | undefined
-    ) => {
-      if (!participant || participant.isLocal) return
-      triggerNotificationSound(NotificationType.MessageReceived)
-      toastQueue.add(
-        {
-          participant: participant,
-          message: chatMessage.message,
-          type: NotificationType.MessageReceived,
-        },
-        { timeout: NotificationDuration.MESSAGE }
-      )
-    }
-    room.on(RoomEvent.ChatMessage, handleChatMessage)
-    return () => {
-      room.off(RoomEvent.ChatMessage, handleChatMessage)
-    }
-  }, [room, triggerNotificationSound])
-
-  useEffect(() => {
-    const handleDataReceived = (
-      payload: Uint8Array,
-      participant?: RemoteParticipant
-    ) => {
-      const decoder = new TextDecoder()
-      const notificationType = decoder.decode(payload)
-
-      if (!participant) return
-
-      switch (notificationType) {
-        case NotificationType.ParticipantMuted:
-          toastQueue.add(
-            {
-              participant,
-              type: NotificationType.ParticipantMuted,
-            },
-            { timeout: NotificationDuration.ALERT }
-          )
-          break
-        default:
-          return
-      }
-    }
-    room.on(RoomEvent.DataReceived, handleDataReceived)
-    return () => {
-      room.off(RoomEvent.DataReceived, handleDataReceived)
-    }
-  }, [room])
-
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
       if (isMobileBrowser()) {
@@ -88,7 +23,7 @@ export const MainNotificationToast = () => {
           type: NotificationType.ParticipantJoined,
         },
         {
-          timeout: NotificationDuration.PARTICIPANT_JOINED,
+          timeout: 5000,
         }
       )
     }
@@ -147,7 +82,7 @@ export const MainNotificationToast = () => {
             participant,
             type: NotificationType.HandRaised,
           },
-          { timeout: NotificationDuration.HAND_RAISED }
+          { timeout: 5000 }
         )
       }
     }

src/frontend/src/features/notifications/NotificationType.ts

@@ -1,6 +1,5 @@
 export enum NotificationType {
   ParticipantJoined = 'participantJoined',
   HandRaised = 'handRaised',
-  ParticipantMuted = 'participantMuted',
-  MessageReceived = 'messageReceived',
+  // todo - implement message received notification
 }

src/frontend/src/features/notifications/components/ToastMessageReceived.tsx

@@ -1,74 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { useEffect, useRef } from 'react'
-
-import { StyledToastContainer, ToastProps } from './Toast'
-import { Text } from '@/primitives'
-import { RiMessage2Line } from '@remixicon/react'
-import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import { Button as RACButton } from 'react-aria-components'
-import { css } from '@/styled-system/css'
-import { useTranslation } from 'react-i18next'
-
-export function ToastMessageReceived({ state, ...props }: ToastProps) {
-  const { t } = useTranslation('notifications')
-  const ref = useRef(null)
-  const { toastProps } = useToast(props, state, ref)
-
-  const toast = props.toast
-
-  const participant = toast.content.participant
-  const message = toast.content.message
-
-  const { isChatOpen, toggleChat } = useSidePanel()
-
-  useEffect(() => {
-    if (isChatOpen) {
-      state.close(toast.key)
-    }
-  }, [isChatOpen, toast, state])
-
-  if (isChatOpen) return null
-
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <RACButton onPress={() => toggleChat()} aria-label={t('openChat')}>
-        <div
-          className={css({
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'start',
-            padding: '14px',
-            gap: '0.75rem',
-            textAlign: 'start',
-            width: '150px',
-            md: {
-              width: '260px',
-            },
-          })}
-        >
-          <div
-            className={css({
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'start',
-              gap: '0.5rem',
-            })}
-          >
-            <RiMessage2Line
-              size={20}
-              className={css({
-                color: 'primary.300',
-                marginTop: '3px',
-              })}
-              aria-hidden="true"
-            />
-            <span>{participant.name}</span>
-          </div>
-          <Text margin={false} wrap={'pretty'} centered={false}>
-            {message}
-          </Text>
-        </div>
-      </RACButton>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastMuted.tsx

@@ -1,26 +0,0 @@
-import { useToast } from '@react-aria/toast'
-import { useRef } from 'react'
-
-import { StyledToastContainer, ToastProps } from './Toast'
-import { HStack } from '@/styled-system/jsx'
-import { useTranslation } from 'react-i18next'
-
-export function ToastMuted({ state, ...props }: ToastProps) {
-  const { t } = useTranslation('notifications')
-  const ref = useRef(null)
-  const { toastProps, contentProps } = useToast(props, state, ref)
-  const participant = props.toast.content.participant
-  return (
-    <StyledToastContainer {...toastProps} ref={ref}>
-      <HStack
-        justify="center"
-        alignItems="center"
-        {...contentProps}
-        padding={14}
-        gap={0}
-      >
-        {t('muted', { name: participant.name })}
-      </HStack>
-    </StyledToastContainer>
-  )
-}

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -5,9 +5,7 @@ import { useRef } from 'react'
 import { NotificationType } from '../NotificationType'
 import { ToastJoined } from './ToastJoined'
 import { ToastData } from './ToastProvider'
-import { ToastRaised } from './ToastRaised'
-import { ToastMuted } from './ToastMuted'
-import { ToastMessageReceived } from './ToastMessageReceived'
+import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -25,14 +23,6 @@ export function ToastRegion({ state, ...props }: ToastRegionProps) {
         if (toast.content?.type === NotificationType.HandRaised) {
           return <ToastRaised key={toast.key} toast={toast} state={state} />
         }
-        if (toast.content?.type === NotificationType.ParticipantMuted) {
-          return <ToastMuted key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.MessageReceived) {
-          return (
-            <ToastMessageReceived key={toast.key} toast={toast} state={state} />
-          )
-        }
         return <Toast key={toast.key} toast={toast} state={state} />
       })}
     </div>

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,
@@ -32,7 +32,7 @@ export const Conference = ({
   useEffect(() => {
     posthog.capture('visit-room', { slug: roomId })
   }, [roomId])
-  const fetchKey = [keys.room, roomId]
+  const fetchKey = [keys.room, roomId, userConfig.username]
 
   const {
     mutateAsync: createRoom,
@@ -49,7 +49,6 @@ export const Conference = ({
     isError: isFetchError,
     data,
   } = useQuery({
-    /* eslint-disable @tanstack/query/exhaustive-deps */
     queryKey: fetchKey,
     staleTime: 6 * 60 * 60 * 1000, // By default, LiveKit access tokens expire 6 hours after generation
     initialData: initialRoomData,
@@ -115,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/api/muteParticipant.ts

@@ -3,23 +3,11 @@ import Source = Track.Source
 import { fetchServerApi } from './fetchServerApi'
 import { buildServerApiUrl } from './buildServerApiUrl'
 import { useRoomData } from '../hooks/useRoomData'
-import { useRoomContext } from '@livekit/components-react'
-import { NotificationType } from '@/features/notifications/NotificationType'
 
 export const useMuteParticipant = () => {
   const data = useRoomData()
-  const room = useRoomContext()
 
-  const notifyParticipant = async (participant: Participant) => {
-    const encoder = new TextEncoder()
-    const data = encoder.encode(NotificationType.ParticipantMuted)
-    await room.localParticipant.publishData(data, {
-      reliable: true,
-      destinationIdentities: [participant.identity],
-    })
-  }
-
-  const muteParticipant = async (participant: Participant) => {
+  const muteParticipant = (participant: Participant) => {
     if (!data || !data?.livekit) {
       throw new Error('Room data is not available')
     }
@@ -30,33 +18,22 @@ export const useMuteParticipant = () => {
     if (!trackSid) {
       throw new Error('Missing audio track')
     }
-
-    try {
-      const response = await fetchServerApi(
-        buildServerApiUrl(
-          data.livekit.url,
-          'twirp/livekit.RoomService/MutePublishedTrack'
-        ),
-        data.livekit.token,
-        {
-          method: 'POST',
-          body: JSON.stringify({
-            room: data.livekit.room,
-            identity: participant.identity,
-            muted: true,
-            track_sid: trackSid,
-          }),
-        }
-      )
-
-      await notifyParticipant(participant)
-
-      return response
-    } catch (error) {
-      console.error(
-        `Failed to mute participant ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
-      )
-    }
+    return fetchServerApi(
+      buildServerApiUrl(
+        data.livekit.url,
+        'twirp/livekit.RoomService/MutePublishedTrack'
+      ),
+      data.livekit.token,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          room: data.livekit.room,
+          identity: participant.identity,
+          muted: true,
+          track_sid: trackSid,
+        }),
+      }
+    )
   }
   return { muteParticipant }
 }

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

@@ -1,36 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { Button, Dialog, P } from '@/primitives'
-import { HStack } from '@/styled-system/jsx'
-
-export const MuteAlertDialog = ({
-  isOpen,
-  onClose,
-  onSubmit,
-  name,
-}: {
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-  name: string
-}) => {
-  const { t } = useTranslation('rooms', {
-    keyPrefix: 'participants.muteParticipantAlert',
-  })
-  return (
-    <Dialog
-      isOpen={isOpen}
-      role="alertdialog"
-      aria-label={t('heading', { name })}
-    >
-      <P>{t('description', { name })}</P>
-      <HStack gap={1}>
-        <Button variant="text" size="sm" onPress={onClose}>
-          {t('cancel')}
-        </Button>
-        <Button variant="text" size="sm" onPress={onSubmit}>
-          {t('confirm')}
-        </Button>
-      </HStack>
-    </Dialog>
-  )
-}

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

@@ -1,6 +1,7 @@
 import {
   AudioTrack,
   ConnectionQualityIndicator,
+  FocusToggle,
   LockLockedIcon,
   ParticipantName,
   ParticipantTileProps,
@@ -22,12 +23,11 @@ import {
   TrackReferenceOrPlaceholder,
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
+import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
 import { RiHand } from '@remixicon/react'
-import { useRaisedHand } from '../hooks/useRaisedHand'
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
 import { HStack } from '@/styled-system/jsx'
-import { MutedMicIndicator } from './MutedMicIndicator'
-import { ParticipantPlaceholder } from './ParticipantPlaceholder'
-import { ParticipantTileFocus } from './ParticipantTileFocus'
+import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -173,9 +173,7 @@ export const ParticipantTile: (
               )}
             </>
           )}
-          {!disableMetadata && (
-            <ParticipantTileFocus trackRef={trackReference} />
-          )}
+          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
     </div>

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

@@ -1,208 +0,0 @@
-import { css } from '@/styled-system/css'
-import { HStack } from '@/styled-system/jsx'
-import { Button } from '@/primitives'
-import {
-  RiFullscreenLine,
-  RiImageCircleAiFill,
-  RiMicLine,
-  RiMicOffLine,
-  RiPushpin2Line,
-  RiUnpinLine,
-} from '@remixicon/react'
-import {
-  useFocusToggle,
-  useTrackMutedIndicator,
-} from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'
-import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { useEffect, useState } from 'react'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { useFullScreen } from '../hooks/useFullScreen'
-import { Participant, Track } from 'livekit-client'
-import { MuteAlertDialog } from './MuteAlertDialog'
-import { useMuteParticipant } from '../api/muteParticipant'
-
-const ZoomButton = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
-    trackRef,
-  })
-
-  if (!isFullscreenAvailable) {
-    return
-  }
-
-  return (
-    <Button
-      size="sm"
-      variant="primaryTextDark"
-      square
-      tooltip={t('fullScreen')}
-      onPress={() => toggleFullScreen()}
-    >
-      <RiFullscreenLine />
-    </Button>
-  )
-}
-
-const FocusButton = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { mergedProps, inFocus } = useFocusToggle({
-    trackRef,
-    props: {},
-  })
-  return (
-    <Button
-      size="sm"
-      variant="primaryTextDark"
-      square
-      tooltip={inFocus ? t('pin.disable') : t('pin.enable')}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      onPress={(event) => mergedProps?.onClick?.(event as any)}
-    >
-      {inFocus ? <RiUnpinLine /> : <RiPushpin2Line />}
-    </Button>
-  )
-}
-
-const EffectsButton = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-  const { isEffectsOpen, toggleEffects } = useSidePanel()
-  return (
-    <Button
-      size={'sm'}
-      variant={'primaryTextDark'}
-      square
-      tooltip={t('effects')}
-      onPress={() => !isEffectsOpen && toggleEffects()}
-    >
-      <RiImageCircleAiFill />
-    </Button>
-  )
-}
-
-const MuteButton = ({ participant }: { participant: Participant }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
-
-  const { isMuted } = useTrackMutedIndicator({
-    participant: participant,
-    source: Track.Source.Microphone,
-  })
-
-  const { muteParticipant } = useMuteParticipant()
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
-
-  const name = participant.name || participant.identity
-
-  return (
-    <>
-      <Button
-        isDisabled={isMuted}
-        size={'sm'}
-        variant={'primaryTextDark'}
-        square
-        onPress={() => setIsAlertOpen(true)}
-        tooltip={t('muteParticipant', { name })}
-      >
-        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
-      </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
-  )
-}
-
-export const ParticipantTileFocus = ({
-  trackRef,
-}: {
-  trackRef: TrackReferenceOrPlaceholder
-}) => {
-  const [hovered, setHovered] = useState(false)
-  const [opacity, setOpacity] = useState(0)
-
-  useEffect(() => {
-    if (hovered) {
-      // Wait for next frame to ensure element is mounted
-      requestAnimationFrame(() => {
-        setOpacity(0.6)
-      })
-    } else {
-      setOpacity(0)
-    }
-  }, [hovered])
-
-  const participant = trackRef.participant
-
-  const isScreenShare = trackRef.source == Track.Source.ScreenShare
-  const isLocal = trackRef.participant.isLocal
-
-  return (
-    <div
-      className={css({
-        position: 'absolute',
-        left: '0',
-        top: '0',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%',
-      })}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {hovered && (
-        <div
-          className={css({
-            backgroundColor: 'primaryDark.50',
-            transition: 'opacity 200ms linear',
-            zIndex: 1,
-            borderRadius: '0.25rem',
-            display: 'flex',
-            _hover: {
-              opacity: '0.95 !important',
-            },
-          })}
-          style={{ opacity }}
-        >
-          <HStack
-            gap={0.5}
-            className={css({
-              padding: '0.5rem',
-              _hover: {
-                opacity: '1 !important',
-              },
-            })}
-          >
-            <FocusButton trackRef={trackRef} />
-            {!isScreenShare ? (
-              <>
-                {participant.isLocal ? (
-                  <EffectsButton />
-                ) : (
-                  <MuteButton participant={participant} />
-                )}
-              </>
-            ) : (
-              !isLocal && <ZoomButton trackRef={trackRef} />
-            )}
-          </HStack>
-        </div>
-      )}
-    </div>
-  )
-}

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/Options/FullScreenMenuItem.tsx

@@ -7,7 +7,7 @@ import { useFullScreen } from '../../../hooks/useFullScreen'
 export const FullScreenMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
-    useFullScreen({})
+    useFullScreen()
 
   if (!isFullscreenAvailable) {
     return null

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -13,10 +13,36 @@ import {
 } from '@livekit/components-react'
 import Source = Track.Source
 import { RiMicFill, RiMicOffFill } from '@remixicon/react'
-import { Button } from '@/primitives'
+import { Button, Dialog, P } from '@/primitives'
 import { useState } from 'react'
 import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
-import { MuteAlertDialog } from '../../MuteAlertDialog'
+
+const MuteAlertDialog = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  name,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: () => void
+  name: string
+}) => {
+  const { t } = useTranslation('rooms')
+  return (
+    <Dialog isOpen={isOpen} role="alertdialog">
+      <P>{t('participants.muteParticipantAlert.description', { name })}</P>
+      <HStack gap={1}>
+        <Button variant="text" size="sm" onPress={onClose}>
+          {t('participants.muteParticipantAlert.cancel')}
+        </Button>
+        <Button variant="text" size="sm" onPress={onSubmit}>
+          {t('participants.muteParticipantAlert.confirm')}
+        </Button>
+      </HStack>
+    </Dialog>
+  )
+}
 
 type MicIndicatorProps = {
   participant: Participant

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

@@ -1,20 +1,13 @@
-import { LocalVideoTrack, Track } from 'livekit-client'
+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 { useTrackToggle } from '@livekit/components-react'
-import { Loader } from '@/primitives/Loader'
-import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
+import { HStack, styled } from '@/styled-system/jsx'
 
 enum BlurRadius {
   NONE = 0,
@@ -22,33 +15,30 @@ 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 { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
   const [processorPending, setProcessorPending] = useState(false)
-  const processorPendingReveal = useSyncAfterDelay(processorPending)
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -63,78 +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)
-    if (!videoTrack) {
-      /**
-       * Special case: if no video track is available, then we must pass directly the processor into the
-       * toggle call. Otherwise, the rest of the function below would not have a videoTrack to call
-       * setProccesor on.
-       *
-       * We arrive in this condition when we enter the room with the camera already off.
-       */
-      const newProcessorTmp = BackgroundProcessorFactory.getProcessor(
-        type,
-        options
-      )!
-      await toggle(true, {
-        processor: newProcessorTmp,
-      })
-      setTimeout(() => setProcessorPending(false))
-      return
-    }
-
-    if (!enabled) {
-      await toggle(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 effect:', 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 (
@@ -144,7 +102,7 @@ export const EffectsConfiguration = ({
           ? {
               display: 'flex',
               flexDirection: 'column',
-              gap: '1.5rem',
+              gap: '0.5rem',
             }
           : {
               display: 'flex',
@@ -152,7 +110,6 @@ export const EffectsConfiguration = ({
               flexDirection: 'column',
               md: {
                 flexDirection: 'row',
-                overflow: 'hidden',
               },
             }
       )}
@@ -161,7 +118,6 @@ export const EffectsConfiguration = ({
         className={css({
           width: '100%',
           aspectRatio: 16 / 9,
-          position: 'relative',
         })}
       >
         {videoTrack && !videoTrack.isMuted ? (
@@ -198,17 +154,6 @@ export const EffectsConfiguration = ({
             </P>
           </div>
         )}
-        {processorPendingReveal && (
-          <div
-            className={css({
-              position: 'absolute',
-              right: '8px',
-              bottom: '8px',
-            })}
-          >
-            <Loader />
-          </div>
-        )}
       </div>
       <div
         className={css(
@@ -217,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={processorPendingReveal}
-                    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={processorPendingReveal}
-                    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={processorPendingReveal}
-                        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/rooms/livekit/hooks/useFullScreen.ts

@@ -2,32 +2,9 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
-import { useMemo, useState } from 'react'
-import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-
-export function useFullScreen({
-  trackRef,
-}: {
-  trackRef?: TrackReferenceOrPlaceholder
-}) {
-  const videoElement = useMemo(() => {
-    const elements = trackRef?.publication?.track?.attachedElements
-
-    if (!elements) return
-
-    // Find the visible video element
-    const likeKitElement = elements.find((el) =>
-      el.classList.contains('lk-participant-media-video')
-    )
-
-    if (!likeKitElement) {
-      console.warn('Could not find LiveKit-managed video element')
-      return elements[0] || null
-    }
-
-    return likeKitElement
-  }, [trackRef])
+import { useState } from 'react'
 
+export function useFullScreen() {
   const getIsFullscreen = () => {
     return !!(
       document.fullscreenElement ||
@@ -47,7 +24,7 @@ export function useFullScreen({
 
   const enterFullscreen = async () => {
     try {
-      const docEl = videoElement || document.documentElement
+      const docEl = document.documentElement
       if (docEl.requestFullscreen) {
         await docEl.requestFullscreen()
       } else if (docEl.webkitRequestFullscreen) {

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

@@ -19,5 +19,5 @@ export function useRaisedHand({ participant }: useRaisedHandProps) {
     }
   }
 
-  return { isHandRaised: parsedMetadata.raised || false, toggleRaisedHand }
+  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
 }

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

@@ -1,10 +1,12 @@
 import { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { useRoomContext } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
 
 export const useRoomData = (): ApiRoom | undefined => {
+  const room = useRoomContext()
   const { roomId } = useParams()
-  const queryKey = [keys.room, roomId]
+  const queryKey = [keys.room, roomId, room.localParticipant.name]
   return queryClient.getQueryData<ApiRoom>(queryKey)
 }

src/frontend/src/hooks/useSyncAfterDelay.ts

@@ -1,30 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-
-/**
- * If value stays truthy for more than waitFor ms, syncValue takes the value of value.
- * @param value
- * @param waitFor
- * @returns
- */
-export function useSyncAfterDelay<T>(value: T, waitFor: number = 300) {
-  const valueRef = useRef(value)
-  const timeoutRef = useRef<NodeJS.Timeout>()
-  const [syncValue, setSyncValue] = useState<T>()
-
-  useEffect(() => {
-    valueRef.current = value
-    if (value) {
-      if (!timeoutRef.current) {
-        timeoutRef.current = setTimeout(() => {
-          setSyncValue(valueRef.current)
-          timeoutRef.current = undefined
-        }, waitFor)
-      }
-    } else {
-      setSyncValue(value)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value])
-
-  return syncValue
-}

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/notifications.json

@@ -6,7 +6,5 @@
   "raised": {
     "description": "",
     "cta": ""
-  },
-  "muted": "",
-  "openChat": ""
+  }
 }

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": {
@@ -179,7 +168,6 @@
     "muteYourself": "",
     "muteParticipant": "",
     "muteParticipantAlert": {
-      "heading": "",
       "description": "",
       "confirm": "",
       "cancel": ""
@@ -190,14 +178,5 @@
   },
   "recording": {
     "label": ""
-  },
-  "participantTileFocus": {
-    "pin": {
-      "enable": "",
-      "disable": ""
-    },
-    "effects": "",
-    "muteParticipant": "",
-    "fullScreen": ""
   }
 }

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/notifications.json

@@ -6,7 +6,5 @@
   "raised": {
     "description": "{{name}} has raised their hand.",
     "cta": "Open waiting list"
-  },
-  "muted": "{{name}} has muted your microphone. No participant can hear you.",
-  "openChat": "Open chat"
+  }
 }

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": {
@@ -178,7 +171,6 @@
     "muteYourself": "Close your mic",
     "muteParticipant": "Close the mic of {{name}}",
     "muteParticipantAlert": {
-      "heading": "Mute {{name}}",
       "description": "Mute {{name}} for all participants? {{name}} will be the only one who can unmute themselves.",
       "confirm": "Mute",
       "cancel": "Cancel"
@@ -189,14 +181,5 @@
   },
   "recording": {
     "label": "Recording"
-  },
-  "participantTileFocus": {
-    "pin": {
-      "enable": "Pin",
-      "disable": "Unpin"
-    },
-    "effects": "Apply visual effects",
-    "muteParticipant": "Mute {{name}}",
-    "fullScreen": "Full screen"
   }
 }

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/notifications.json

@@ -6,7 +6,5 @@
   "raised": {
     "description": "{{name}} a levé la main.",
     "cta": "Ouvrir la file d'attente"
-  },
-  "muted": "{{name}} a coupé votre micro. Aucun participant ne peut l'entendre.",
-  "openChat": "Ouvrir le chat"
+  }
 }

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": {
@@ -178,7 +171,6 @@
     "muteYourself": "Couper votre micro",
     "muteParticipant": "Couper le micro de {{name}}",
     "muteParticipantAlert": {
-      "heading": "Couper le micro de {{name}}",
       "description": "Couper le micro de {{name}} pour tous les participants ? {{name}} est la seule personne habilitée à réactiver son micro",
       "confirm": "Couper le micro",
       "cancel": "Annuler"
@@ -189,14 +181,5 @@
   },
   "recording": {
     "label": "Enregistrement"
-  },
-  "participantTileFocus": {
-    "pin": {
-      "enable": "Épingler",
-      "disable": "Annuler l'épinglage"
-    },
-    "effects": "Appliquer des effets",
-    "muteParticipant": "Couper le micro de {{name}}",
-    "fullScreen": "Plein écran"
   }
 }

src/frontend/src/locales/fr/settings.json

@@ -41,7 +41,7 @@
   },
   "settingsButtonLabel": "Paramètres",
   "tabs": {
-    "account": "Profil",
+    "account": "Profile",
     "audio": "Audio",
     "general": "Général",
     "notifications": "Notifications"

src/frontend/src/primitives/Loader.tsx

@@ -1,45 +0,0 @@
-import { cva } from '@/styled-system/css'
-
-const loader = cva({
-  base: {
-    borderRadius: '50%',
-    position: 'relative',
-    animation: 'rotate 1s linear infinite',
-    '&:before, &:after': {
-      content: '""',
-      boxSizing: 'border-box',
-      position: 'absolute',
-      inset: '0',
-      borderRadius: '50%',
-      borderStyle: 'solid',
-      borderColor: 'white',
-    },
-    _before: {
-      animation: 'prixClipFix 2s linear infinite',
-    },
-    _after: {
-      borderColor: 'white',
-      animation:
-        'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse',
-      inset: 6,
-    },
-  },
-  variants: {
-    size: {
-      small: {
-        width: '24px',
-        height: '24px',
-        '&:before, &:after': {
-          borderWidth: '2px',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'small',
-  },
-})
-
-export const Loader = () => {
-  return <div className={loader()}></div>
-}

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

@@ -8,9 +8,6 @@ export const buttonRecipe = cva({
     transition: 'background 200ms, outline 200ms, border-color 200ms',
     cursor: 'pointer',
     border: '1px solid transparent',
-    '&[data-disabled]': {
-      cursor: 'default',
-    },
   },
   variants: {
     size: {
@@ -89,27 +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',
-        },
-        '&[data-disabled]': {
-          backgroundColor: 'greyscale.100',
-          color: 'greyscale.400',
-          opacity: '0.7',
-        },
-      },
       tertiary: {
         backgroundColor: 'primary.100',
         color: 'primary.800',

src/frontend/src/stores/notifications.ts

@@ -14,7 +14,6 @@ const DEFAULT_STATE: State = {
     new Map([
       [NotificationType.ParticipantJoined, true],
       [NotificationType.HandRaised, true],
-      [NotificationType.MessageReceived, true],
     ])
   ),
   soundNotificationVolume: 0.1,
@@ -25,21 +24,7 @@ function getNotificationsState(): State {
     const stored = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS)
     if (!stored) return DEFAULT_STATE
     const parsed = JSON.parse(stored, deserializeToProxyMap)
-    // Ensure all default notification types exist in the recovered state
-    return {
-      ...DEFAULT_STATE,
-      ...parsed,
-      soundNotifications: proxyMap(
-        new Map(
-          Array.from(DEFAULT_STATE.soundNotifications.keys()).map((key) => [
-            key,
-            parsed.soundNotifications.has(key)
-              ? parsed.soundNotifications.get(key)
-              : DEFAULT_STATE.soundNotifications.get(key),
-          ])
-        )
-      ),
-    }
+    return parsed || DEFAULT_STATE
   } catch (error: unknown) {
     console.error(
       '[NotificationsStore] Failed to parse stored settings:',

src/helm/meet/Chart.yaml

@@ -1,4 +1,4 @@
 apiVersion: v2
 type: application
 name: meet
-version: 0.0.2
+version: 0.0.1