🚸(frontend) show support toggle only if support is enabled

Avoid misleading the user, if support is not enabled, as it's optional,
avoid displaying a useless control button.

Requested by Dutch counterparts.

.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/home/routes/Home.tsx

@@ -9,6 +9,7 @@ import { useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
@@ -17,7 +18,6 @@ import { ReactNode, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (

src/frontend/src/features/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

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

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

@@ -1,5 +1,9 @@
 import { useTranslation } from 'react-i18next'
-import { usePreviewTracks } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  usePreviewTracks,
+  type LocalUserChoices,
+} from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
 import { useMemo, useEffect, useRef, useState } from 'react'
@@ -7,96 +11,11 @@ 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 { LocalUserChoices } from '../routes/Room'
-import { Heading } from 'react-aria-components'
-import { RiImageCircleAiFill } from '@remixicon/react'
-import {
-  EffectsConfiguration,
-  EffectsConfigurationProps,
-} from '../livekit/components/effects/EffectsConfiguration'
-import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../livekit/components/blur'
-import { isMobileBrowser } from '@livekit/components-core'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
-const Effects = ({
-  videoTrack,
-  onSubmit,
-}: Pick<EffectsConfigurationProps, 'videoTrack' | 'onSubmit'>) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join.effects' })
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const openDialog = () => setIsDialogOpen(true)
-
-  if (!BackgroundProcessorFactory.isSupported() || isMobileBrowser()) {
-    return
-  }
-
-  return (
-    <>
-      <Dialog
-        isOpen={isDialogOpen}
-        onOpenChange={setIsDialogOpen}
-        role="dialog"
-        type="flex"
-        size="large"
-      >
-        <Heading
-          slot="title"
-          level={1}
-          className={css({
-            textStyle: 'h1',
-            marginBottom: '0.25rem',
-          })}
-        >
-          {t('title')}
-        </Heading>
-        <Text
-          variant="subTitle"
-          className={css({
-            marginBottom: '1.5rem',
-          })}
-        >
-          {t('subTitle')}
-        </Text>
-        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
-      </Dialog>
-      <div
-        className={css({
-          position: 'absolute',
-          right: 0,
-          bottom: '0',
-          padding: '1rem',
-          zIndex: '1',
-        })}
-      >
-        <Button
-          variant="whiteCircle"
-          onPress={openDialog}
-          tooltip={t('description')}
-          aria-label={t('description')}
-        >
-          <RiImageCircleAiFill size={24} />
-        </Button>
-      </div>
-      <div
-        className={css({
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: '20%',
-          backgroundImage:
-            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
-          borderBottomRadius: '1rem',
-        })}
-      />
-    </>
-  )
-}
-
 export const Join = ({
   onSubmit,
 }: {
@@ -109,11 +28,8 @@ export const Join = ({
     saveAudioInputDeviceId,
     saveVideoInputDeviceId,
     saveUsername,
-    saveProcessorSerialized,
   } = usePersistentUserChoices({})
 
-  const [audioEnabled, setAudioEnabled] = useState(true)
-  const [videoEnabled, setVideoEnabled] = useState(true)
   const [audioDeviceId, setAudioDeviceId] = useState<string>(
     initialUserChoices.audioDeviceId
   )
@@ -121,11 +37,6 @@ export const Join = ({
     initialUserChoices.videoDeviceId
   )
   const [username, setUsername] = useState<string>(initialUserChoices.username)
-  const [processor, setProcessor] = useState(
-    BackgroundProcessorFactory.deserializeProcessor(
-      initialUserChoices.processorSerialized
-    )
-  )
 
   useEffect(() => {
     saveAudioInputDeviceId(audioDeviceId)
@@ -139,14 +50,8 @@ export const Join = ({
     saveUsername(username)
   }, [username, saveUsername])
 
-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [
-    processor,
-    saveProcessorSerialized,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(processor?.serialize()),
-  ])
+  const [audioEnabled, setAudioEnabled] = useState(true)
+  const [videoEnabled, setVideoEnabled] = useState(true)
 
   const tracks = usePreviewTracks(
     {
@@ -202,20 +107,9 @@ export const Join = ({
       audioDeviceId,
       videoDeviceId,
       username,
-      processorSerialized: processor?.serialize(),
     })
   }
 
-  // This hook is used to setup the persisted user choice processor on initialization.
-  // So it's on purpose that processor is not included in the deps.
-  // We just want to wait for the videoTrack to be loaded to apply the default processor.
-  useEffect(() => {
-    if (processor && videoTrack && !videoTrack.getProcessor()) {
-      videoTrack.setProcessor(processor)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTrack])
-
   return (
     <Screen footer={false}>
       <div
@@ -280,16 +174,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,8 +204,8 @@ export const Join = ({
                   </p>
                 </div>
               )}
-              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
             </div>
+
             <HStack justify="center" padding={1.5}>
               <SelectToggleDevice
                 source={Track.Source.Microphone}

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/Effects.tsx

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

src/frontend/src/features/rooms/livekit/components/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/SidePanel.tsx

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

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

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

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

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

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

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

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

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

src/frontend/src/features/rooms/livekit/components/controls/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

@@ -13,12 +13,7 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import {
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-  VideoCaptureOptions,
-} from 'livekit-client'
+import { LocalAudioTrack, LocalVideoTrack, Track } from 'livekit-client'
 
 import { Shortcut } from '@/features/shortcuts/types'
 
@@ -26,8 +21,6 @@ import { ToggleDevice } from '@/features/rooms/livekit/components/controls/Toggl
 import { css } from '@/styled-system/css'
 import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { useEffect } from 'react'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-import { BackgroundProcessorFactory } from '../blur'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -99,39 +92,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
   const trackProps = useTrackToggle(props)
 
-  const { userChoices } = usePersistentUserChoices({})
-
-  const toggle = () => {
-    if (props.source === Track.Source.Camera) {
-      /**
-       * We need to make sure that we apply the in-memory processor when re-enabling the camera.
-       * Before, we had the following bug:
-       * 1 - Configure a processor on join screen
-       * 2 - Turn off camera on join screen
-       * 3 - Join the room
-       * 4 - Turn on the camera
-       * 5 - No processor is applied to the camera
-       * Expected: The processor is applied.
-       *
-       * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
-       */
-      const processor = BackgroundProcessorFactory.deserializeProcessor(
-        userChoices.processorSerialized
-      )
-
-      const toggle = trackProps.toggle as (
-        forceState: boolean,
-        captureOptions: VideoCaptureOptions
-      ) => Promise<void>
-
-      toggle(!trackProps.enabled, {
-        processor: processor,
-      } as VideoCaptureOptions)
-    } else {
-      trackProps.toggle()
-    }
-  }
-
   const { devices, activeDeviceId, setActiveMediaDevice } =
     useMediaDeviceSelect({ kind: config.kind, track })
 
@@ -160,7 +120,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         {...trackProps}
         config={config}
         variant={variant}
-        toggle={toggle}
         toggleButtonProps={{
           ...(hideMenu
             ? {

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

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

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

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

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

src/frontend/src/features/rooms/livekit/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/features/rooms/livekit/prefabs/ControlBar/ControlBar.tsx

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

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

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

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

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

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

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

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

@@ -18,11 +18,6 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "effects": {
-      "description": "Apply effects",
-      "title": "Effects",
-      "subTitle": "Configure your camera's effects."
-    },
     "heading": "Join the meeting",
     "joinLabel": "Join",
     "joinMeeting": "Join meeting",
@@ -103,20 +98,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 +167,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 +177,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

@@ -19,11 +19,6 @@
       "label": "Microphone"
     },
     "heading": "Rejoindre la réunion",
-    "effects": {
-      "description": "Appliquer des effets",
-      "title": "Effets",
-      "subTitle": "Paramétrez les effets de votre caméra."
-    },
     "joinLabel": "Rejoindre",
     "joinMeeting": "Rejoindre la réjoindre",
     "toggleOff": "Cliquez pour désactiver",
@@ -103,20 +98,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 +167,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 +177,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/Dialog.tsx

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

src/frontend/src/primitives/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: {
@@ -76,40 +73,6 @@ export const buttonRecipe = cva({
           color: 'greyscale.400',
         },
       },
-      whiteCircle: {
-        color: 'white',
-        border: '1px white solid',
-        width: '56px',
-        height: '56px',
-        borderRadius: '100%',
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100/20',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'greyscale.100/50',
-        },
-      },
-      bigSquare: {
-        width: '56px',
-        height: '56px',
-        borderColor: 'greyscale.200',
-        borderRadius: '4px',
-        backgroundColor: 'greyscale.50',
-        padding: '0',
-        flexShrink: 0,
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100',
-        },
-        transition: 'box-shadow 0.2s ease-in-out',
-        '&[data-selected]': {
-          boxShadow: 'token(colors.primary.400) 0px 0px 0px 3px inset',
-        },
-        '&[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