✨(helm) add pdbs to deployments

In order to avoid a service interruption during a Kubernetes (k8s) upgrade, we add a Pod Disruption Budget (PDB) to deployments.
🔒️(docker) patch libssl3 and libcrypto3 to address CVE-2024-12797
2025-02-12 11:54:08 +01:00 · 2025-02-12 11:52:40 +01:00 · 2025-02-12 11:52:40 +01:00 · 2025-02-12 11:52:40 +01:00 · 2025-02-12 11:52:40 +01:00 · 2025-02-12 11:52:40 +01:00
98 changed files with 2492 additions and 556 deletions
@@ -11,34 +11,17 @@ 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 ''${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
+          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 }}

  start-test-on-preprod:
    needs:
@@ -19,26 +19,9 @@ 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
@@ -48,7 +31,7 @@ jobs:
      -
        name: Login to DockerHub
        if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
      -
        name: Run trivy scan
        uses: numerique-gouv/action-trivy-cache@main
@@ -69,26 +52,9 @@ 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
@@ -98,7 +64,7 @@ jobs:
      -
        name: Login to DockerHub
        if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
      -
        name: Run trivy scan
        uses: numerique-gouv/action-trivy-cache@main
@@ -120,26 +86,9 @@ 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
@@ -149,7 +98,7 @@ jobs:
      -
        name: Login to DockerHub
        if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
      -
        name: Build and push
        uses: docker/build-push-action@v6
@@ -162,7 +111,6 @@ jobs:
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}

-
  notify-argocd:
    needs:
      - build-and-push-frontend
@@ -172,29 +120,12 @@ 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 ''${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 "${{ 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 }}
@@ -3,10 +3,8 @@ run-name: Release Chart

 on:
  push:
-    branches:
-      - 'main'
    paths:
-      - ./src/helm/meet/**
+      - src/helm/meet/**

 jobs:
  release:
@@ -1,3 +1,4 @@
+
 # Changelog

 All notable changes to this project will be documented in this file.
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.36.2",
+    "boto3==1.36.6",
    "Brotli==1.1.0",
    "brevo-python==1.1.2",
    "celery[redis]==5.4.0",
@@ -83,7 +83,7 @@ dev = [
    "pytest-icdiff==0.9",
    "pytest-xdist==3.6.1",
    "responses==0.25.6",
-    "ruff==0.9.2",
+    "ruff==0.9.3",
    "types-requests==2.32.0.20241016",
 ]

@@ -34,6 +34,11 @@ 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}
@@ -8,7 +8,7 @@
      "name": "meet",
      "version": "0.1.12",
      "dependencies": {
-        "@livekit/components-react": "2.8.0",
+        "@livekit/components-react": "2.8.1",
        "@livekit/components-styles": "1.1.4",
        "@livekit/track-processors": "0.3.3",
        "@pandacss/preset-panda": "0.51.1",
@@ -17,25 +17,25 @@
        "@tanstack/react-query": "5.64.2",
        "crisp-sdk-web": "1.0.25",
        "hoofd": "1.7.3",
-        "i18next": "24.2.1",
+        "i18next": "24.2.2",
        "i18next-browser-languagedetector": "8.0.2",
        "i18next-parser": "9.1.0",
        "i18next-resources-to-backend": "1.2.1",
        "livekit-client": "2.8.1",
-        "posthog-js": "1.207.0",
+        "posthog-js": "1.210.2",
        "react": "18.3.1",
        "react-aria-components": "1.6.0",
        "react-dom": "18.3.1",
        "react-i18next": "15.1.1",
        "use-sound": "4.0.3",
-        "valtio": "2.1.2",
-        "wouter": "3.3.5"
+        "valtio": "2.1.3",
+        "wouter": "3.4.0"
      },
      "devDependencies": {
        "@pandacss/dev": "0.51.1",
        "@tanstack/eslint-plugin-query": "5.64.2",
        "@tanstack/react-query-devtools": "5.64.2",
-        "@types/node": "22.10.7",
+        "@types/node": "22.10.10",
        "@types/react": "18.3.12",
        "@types/react-dom": "18.3.1",
        "@typescript-eslint/eslint-plugin": "8.21.0",
@@ -49,7 +49,7 @@
        "postcss": "8.5.1",
        "prettier": "3.4.2",
        "typescript": "5.7.3",
-        "vite": "6.0.10",
+        "vite": "6.0.11",
        "vite-tsconfig-paths": "5.1.4"
      }
    },
@@ -436,6 +436,7 @@
    },
    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
      "version": "1.3.0",
+      "dev": true,
      "inBundle": true,
      "license": "MIT",
      "engines": {
@@ -1240,9 +1241,9 @@
      }
    },
    "node_modules/@livekit/components-react": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.8.0.tgz",
-      "integrity": "sha512-Zgt2zv+j2gWJad0mcTDR8cS6KQNXYfAeOL9Si5Lb2Q2k3iPUJinPDMqubM6btnduhkPjy+EF4kA8bNAY0xu4Ig==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.8.1.tgz",
+      "integrity": "sha512-XpuDu7iDMcN4pkV8CYNzHf9hLNdYOeEtbmCr7Zesy6Au3BxUl4aS1Ajmg0b75Rx7zTlkyCJt9Lm4VrEqbJCI6Q==",
      "license": "Apache-2.0",
      "dependencies": {
        "@livekit/components-core": "0.12.1",
@@ -3879,9 +3880,9 @@
      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
    },
    "node_modules/@types/node": {
-      "version": "22.10.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz",
-      "integrity": "sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==",
+      "version": "22.10.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.10.tgz",
+      "integrity": "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -6395,9 +6396,9 @@
      }
    },
    "node_modules/i18next": {
-      "version": "24.2.1",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.1.tgz",
-      "integrity": "sha512-Q2wC1TjWcSikn1VAJg13UGIjc+okpFxQTxjVAymOnSA3RpttBQNMPf2ovcgoFVsV4QNxTfNZMAxorXZXsk4fBA==",
+      "version": "24.2.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz",
+      "integrity": "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==",
      "funding": [
        {
          "type": "individual",
@@ -8444,9 +8445,9 @@
      "license": "MIT"
    },
    "node_modules/posthog-js": {
-      "version": "1.207.0",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.207.0.tgz",
-      "integrity": "sha512-Sx+xamhg1/iKGAtUNh3uAUtAAza4j/yBhxcfUxfqR++WrZdw0V6nmh7LSfVNl7+QVl2qmiPSoZA7z+5ojaWDDQ==",
+      "version": "1.210.2",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.210.2.tgz",
+      "integrity": "sha512-rIbn/h9ur7uA0PS4dClOr9w6txLfHS94yh9yafA5VM2eXToM951XtMYtIQ6bi6wFzpvpFvTQFeYLQ/9/xZ59AQ==",
      "license": "MIT",
      "dependencies": {
        "core-js": "^3.38.1",
@@ -8503,9 +8504,10 @@
      }
    },
    "node_modules/proxy-compare": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.0.tgz",
-      "integrity": "sha512-y44MCkgtZUCT9tZGuE278fB7PWVf7fRYy0vbRXAts2o5F0EfC4fIQrvQQGBJo1WJbFcVLXzApOscyJuZqHQc1w=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.1.tgz",
+      "integrity": "sha512-V9plBAt3qjMlS1+nC8771KNf6oJ12gExvaxnNzN/9yVRLdTv/lc+oJlnSzrdYDAvBfTStPCoiaCOTmTs0adv7Q==",
+      "license": "MIT"
    },
    "node_modules/punycode": {
      "version": "2.3.1",
@@ -9791,12 +9793,12 @@
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
    "node_modules/valtio": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.2.tgz",
-      "integrity": "sha512-fhekN5Rq7dvHULHHBlJeXHrQDl0Jj9GXfNavCm3gkD06crGchaG1nf/J7gSlfZU2wPcRdVS5jBKWHtE2NNz97A==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.3.tgz",
+      "integrity": "sha512-q+dVczY5zf7kO39JPVq2qR0VXMeEpF1t+P1njHU7hAhwgtyVa/p38YmgyHZq2IQYwnkNrkvh412k4sfDmcIJ2g==",
      "license": "MIT",
      "dependencies": {
-        "proxy-compare": "^3.0.0"
+        "proxy-compare": "^3.0.1"
      },
      "engines": {
        "node": ">=12.20.0"
@@ -9890,9 +9892,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.10.tgz",
-      "integrity": "sha512-MEszunEcMo6pFsfXN1GhCFQqnE25tWRH0MA4f0Q7uanACi4y1Us+ZGpTMnITwCTnYzB2b9cpmnelTlxgTBmaBA==",
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
+      "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -10582,9 +10584,10 @@
      }
    },
    "node_modules/wouter": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/wouter/-/wouter-3.3.5.tgz",
-      "integrity": "sha512-bx3fLQAMn+EhYbBdY3W1gw9ZfO/uchudxYMwOIBzF3HVgqNEEIT199vEoh7FLTC0Vz5+rpMO6NdFsOkGX1QQCw==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/wouter/-/wouter-3.4.0.tgz",
+      "integrity": "sha512-Qx4L+EnYk7AF+pNU9TM+lQtkceL5Qm+oDZU9720DUx+/7K6v7fnlHnRLI78KjEbCqdGFeroW5P0M1t8WYSloQA==",
+      "license": "Unlicense",
      "dependencies": {
        "mitt": "^3.0.1",
        "regexparam": "^3.0.0",
@@ -13,7 +13,7 @@
    "check": "prettier --check ./src"
  },
  "dependencies": {
-    "@livekit/components-react": "2.8.0",
+    "@livekit/components-react": "2.8.1",
    "@livekit/components-styles": "1.1.4",
    "@livekit/track-processors": "0.3.3",
    "@pandacss/preset-panda": "0.51.1",
@@ -22,25 +22,25 @@
    "@tanstack/react-query": "5.64.2",
    "crisp-sdk-web": "1.0.25",
    "hoofd": "1.7.3",
-    "i18next": "24.2.1",
+    "i18next": "24.2.2",
    "i18next-browser-languagedetector": "8.0.2",
    "i18next-parser": "9.1.0",
    "i18next-resources-to-backend": "1.2.1",
    "livekit-client": "2.8.1",
-    "posthog-js": "1.207.0",
+    "posthog-js": "1.210.2",
    "react": "18.3.1",
    "react-aria-components": "1.6.0",
    "react-dom": "18.3.1",
    "react-i18next": "15.1.1",
    "use-sound": "4.0.3",
-    "valtio": "2.1.2",
-    "wouter": "3.3.5"
+    "valtio": "2.1.3",
+    "wouter": "3.4.0"
  },
  "devDependencies": {
    "@pandacss/dev": "0.51.1",
    "@tanstack/eslint-plugin-query": "5.64.2",
    "@tanstack/react-query-devtools": "5.64.2",
-    "@types/node": "22.10.7",
+    "@types/node": "22.10.10",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
    "@typescript-eslint/eslint-plugin": "8.21.0",
@@ -54,7 +54,7 @@
    "postcss": "8.5.1",
    "prettier": "3.4.2",
    "typescript": "5.7.3",
-    "vite": "6.0.10",
+    "vite": "6.0.11",
    "vite-tsconfig-paths": "5.1.4"
  }
 }
@@ -121,6 +121,32 @@ 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.
@@ -9,7 +9,6 @@ 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'
@@ -18,6 +17,7 @@ import { ReactNode, useState } from 'react'

 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'

 const Columns = ({ children }: { children?: ReactNode }) => {
  return (
@@ -32,10 +32,10 @@ const Columns = ({ children }: { children?: ReactNode }) => {
        justifyContent: 'normal',
        padding: '0 1rem',
        width: 'calc(100% - 2rem)',
-        '@media(prefers-reduced-motion: reduce)': {
+        _motionReduce: {
          opacity: 1,
        },
-        '@media(prefers-reduced-motion: no-preference)': {
+        _motionSafe: {
          opacity: 0,
          animation: '.5s ease-in fade 0s forwards',
        },
@@ -1,16 +1,81 @@
 import { useEffect } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { Participant, RoomEvent } from 'livekit-client'
+import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
-import { isMobileBrowser } from '@livekit/components-core'
+import { ChatMessage, 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()) {
@@ -23,7 +88,7 @@ export const MainNotificationToast = () => {
          type: NotificationType.ParticipantJoined,
        },
        {
-          timeout: 5000,
+          timeout: NotificationDuration.PARTICIPANT_JOINED,
        }
      )
    }
@@ -82,7 +147,7 @@ export const MainNotificationToast = () => {
            participant,
            type: NotificationType.HandRaised,
          },
-          { timeout: 5000 }
+          { timeout: NotificationDuration.HAND_RAISED }
        )
      }
    }
@@ -1,5 +1,6 @@
 export enum NotificationType {
  ParticipantJoined = 'participantJoined',
  HandRaised = 'handRaised',
-  // todo - implement message received notification
+  ParticipantMuted = 'participantMuted',
+  MessageReceived = 'messageReceived',
 }
@@ -0,0 +1,74 @@
+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>
+  )
+}
@@ -0,0 +1,26 @@
+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>
+  )
+}
@@ -5,7 +5,9 @@ import { useRef } from 'react'
 import { NotificationType } from '../NotificationType'
 import { ToastJoined } from './ToastJoined'
 import { ToastData } from './ToastProvider'
-import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
+import { ToastRaised } from './ToastRaised'
+import { ToastMuted } from './ToastMuted'
+import { ToastMessageReceived } from './ToastMessageReceived'

 interface ToastRegionProps extends AriaToastRegionProps {
  state: ToastState<ToastData>
@@ -23,6 +25,14 @@ 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>
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
+import { LiveKitRoom } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -12,10 +12,11 @@ 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,
@@ -31,7 +32,7 @@ export const Conference = ({
  useEffect(() => {
    posthog.capture('visit-room', { slug: roomId })
  }, [roomId])
-  const fetchKey = [keys.room, roomId, userConfig.username]
+  const fetchKey = [keys.room, roomId]

  const {
    mutateAsync: createRoom,
@@ -48,6 +49,7 @@ 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,
@@ -111,7 +113,13 @@ export const Conference = ({
          token={data?.livekit?.token}
          connect={true}
          audio={userConfig.audioEnabled}
-          video={userConfig.videoEnabled}
+          video={
+            userConfig.videoEnabled && {
+              processor: BackgroundProcessorFactory.deserializeProcessor(
+                userConfig.processorSerialized
+              ),
+            }
+          }
          connectOptions={connectOptions}
          className={css({
            backgroundColor: 'primaryDark.50 !important',
@@ -1,30 +1,390 @@
 import { useTranslation } from 'react-i18next'
-import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
+import { usePreviewTracks } from '@livekit/components-react'
+import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
-import { CenteredContent } from '@/layout/CenteredContent'
-import { useUser } from '@/features/auth'
+import { useMemo, useEffect, useRef, useState } from 'react'
+import { LocalVideoTrack, Track } from 'livekit-client'
+import { H } from '@/primitives/H'
+import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
+import { Field } from '@/primitives/Field'
+import { Button, Dialog, Text, Form } from '@/primitives'
+import { HStack, VStack } from '@/styled-system/jsx'
+import { LocalUserChoices } from '../routes/Room'
+import { Heading } from 'react-aria-components'
+import { RiImageCircleAiFill } from '@remixicon/react'
+import {
+  EffectsConfiguration,
+  EffectsConfigurationProps,
+} from '../livekit/components/effects/EffectsConfiguration'
+import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
+import { BackgroundProcessorFactory } from '../livekit/components/blur'
+import { isMobileBrowser } from '@livekit/components-core'
+
+const onError = (e: Error) => console.error('ERROR', e)
+
+const Effects = ({
+  videoTrack,
+  onSubmit,
+}: Pick<EffectsConfigurationProps, 'videoTrack' | 'onSubmit'>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join.effects' })
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const openDialog = () => setIsDialogOpen(true)
+
+  if (!BackgroundProcessorFactory.isSupported() || isMobileBrowser()) {
+    return
+  }
+
+  return (
+    <>
+      <Dialog
+        isOpen={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        role="dialog"
+        type="flex"
+        size="large"
+      >
+        <Heading
+          slot="title"
+          level={1}
+          className={css({
+            textStyle: 'h1',
+            marginBottom: '0.25rem',
+          })}
+        >
+          {t('title')}
+        </Heading>
+        <Text
+          variant="subTitle"
+          className={css({
+            marginBottom: '1.5rem',
+          })}
+        >
+          {t('subTitle')}
+        </Text>
+        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
+      </Dialog>
+      <div
+        className={css({
+          position: 'absolute',
+          right: 0,
+          bottom: '0',
+          padding: '1rem',
+          zIndex: '1',
+        })}
+      >
+        <Button
+          variant="whiteCircle"
+          onPress={openDialog}
+          tooltip={t('description')}
+          aria-label={t('description')}
+        >
+          <RiImageCircleAiFill size={24} />
+        </Button>
+      </div>
+      <div
+        className={css({
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '20%',
+          backgroundImage:
+            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
+          borderBottomRadius: '1rem',
+        })}
+      />
+    </>
+  )
+}

 export const Join = ({
  onSubmit,
 }: {
  onSubmit: (choices: LocalUserChoices) => void
 }) => {
-  const { t } = useTranslation('rooms')
-  const { user } = useUser()
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const {
+    userChoices: initialUserChoices,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+    saveUsername,
+    saveProcessorSerialized,
+  } = usePersistentUserChoices({})
+
+  const [audioEnabled, setAudioEnabled] = useState(true)
+  const [videoEnabled, setVideoEnabled] = useState(true)
+  const [audioDeviceId, setAudioDeviceId] = useState<string>(
+    initialUserChoices.audioDeviceId
+  )
+  const [videoDeviceId, setVideoDeviceId] = useState<string>(
+    initialUserChoices.videoDeviceId
+  )
+  const [username, setUsername] = useState<string>(initialUserChoices.username)
+  const [processor, setProcessor] = useState(
+    BackgroundProcessorFactory.deserializeProcessor(
+      initialUserChoices.processorSerialized
+    )
+  )
+
+  useEffect(() => {
+    saveAudioInputDeviceId(audioDeviceId)
+  }, [audioDeviceId, saveAudioInputDeviceId])
+
+  useEffect(() => {
+    saveVideoInputDeviceId(videoDeviceId)
+  }, [videoDeviceId, saveVideoInputDeviceId])
+
+  useEffect(() => {
+    saveUsername(username)
+  }, [username, saveUsername])
+
+  useEffect(() => {
+    saveProcessorSerialized(processor?.serialize())
+  }, [
+    processor,
+    saveProcessorSerialized,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(processor?.serialize()),
+  ])
+
+  const tracks = usePreviewTracks(
+    {
+      audio: { deviceId: initialUserChoices.audioDeviceId },
+      video: { deviceId: initialUserChoices.videoDeviceId },
+    },
+    onError
+  )
+
+  const videoTrack = useMemo(
+    () =>
+      tracks?.filter(
+        (track) => track.kind === Track.Kind.Video
+      )[0] as LocalVideoTrack,
+    [tracks]
+  )
+
+  const audioTrack = useMemo(
+    () =>
+      tracks?.filter(
+        (track) => track.kind === Track.Kind.Audio
+      )[0] as LocalVideoTrack,
+    [tracks]
+  )
+
+  const videoEl = useRef(null)
+
+  useEffect(() => {
+    const videoElement = videoEl.current as HTMLVideoElement | null
+
+    const handleVideoLoaded = () => {
+      if (videoElement) {
+        videoElement.style.opacity = '1'
+      }
+    }
+
+    if (videoElement && videoTrack && videoEnabled) {
+      videoTrack.unmute()
+      videoTrack.attach(videoElement)
+      videoElement.addEventListener('loadedmetadata', handleVideoLoaded)
+    }
+
+    return () => {
+      videoTrack?.detach()
+      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
+    }
+  }, [videoTrack, videoEnabled])
+
+  function handleSubmit() {
+    onSubmit({
+      audioEnabled,
+      videoEnabled,
+      audioDeviceId,
+      videoDeviceId,
+      username,
+      processorSerialized: processor?.serialize(),
+    })
+  }
+
+  // This hook is used to setup the persisted user choice processor on initialization.
+  // So it's on purpose that processor is not included in the deps.
+  // We just want to wait for the videoTrack to be loaded to apply the default processor.
+  useEffect(() => {
+    if (processor && videoTrack && !videoTrack.getProcessor()) {
+      videoTrack.setProcessor(processor)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoTrack])

  return (
-    <Screen layout="centered" footer={false}>
-      <CenteredContent title={t('join.heading')}>
-        <PreJoin
-          persistUserChoices
-          onSubmit={onSubmit}
-          micLabel={t('join.audioinput.label')}
-          camLabel={t('join.videoinput.label')}
-          joinLabel={t('join.joinLabel')}
-          userLabel={t('join.usernameLabel')}
-          defaults={{ username: user?.full_name }}
-        />
-      </CenteredContent>
+    <Screen footer={false}>
+      <div
+        className={css({
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+          flexGrow: 1,
+          lg: {
+            alignItems: 'center',
+          },
+        })}
+      >
+        <div
+          className={css({
+            display: 'flex',
+            height: 'auto',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '2rem',
+            padding: '0 2rem',
+            flexDirection: 'column',
+            minWidth: 0,
+            width: '100%',
+            lg: {
+              flexDirection: 'row',
+              width: 'auto',
+              height: '570px',
+            },
+          })}
+        >
+          <div
+            className={css({
+              width: '100%',
+              lg: {
+                width: '740px',
+              },
+            })}
+          >
+            <div
+              className={css({
+                borderRadius: '1rem',
+                overflow: 'hidden',
+                position: 'relative',
+                width: '100%',
+                height: 'auto',
+                aspectRatio: 16 / 9,
+                '--tw-shadow':
+                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
+                '--tw-shadow-colored':
+                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
+                boxShadow:
+                  'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
+                backgroundColor: 'black',
+              })}
+            >
+              {videoTrack && videoEnabled ? (
+                // eslint-disable-next-line jsx-a11y/media-has-caption
+                <video
+                  ref={videoEl}
+                  width="1280"
+                  height="720"
+                  className={css({
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    transform: 'rotateY(180deg)',
+                    opacity: 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    borderRadius: '1rem',
+                  })}
+                  disablePictureInPicture
+                  disableRemotePlayback
+                />
+              ) : (
+                <div
+                  className={css({
+                    width: '100%',
+                    height: '100%',
+                    color: 'white',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  })}
+                >
+                  <p
+                    className={css({
+                      fontSize: '24px',
+                      fontWeight: '300',
+                    })}
+                  >
+                    {!videoEnabled && t('cameraDisabled')}
+                    {videoEnabled && !videoTrack && t('cameraStarting')}
+                  </p>
+                </div>
+              )}
+              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
+            </div>
+            <HStack justify="center" padding={1.5}>
+              <SelectToggleDevice
+                source={Track.Source.Microphone}
+                initialState={audioEnabled}
+                track={audioTrack}
+                initialDeviceId={initialUserChoices.audioDeviceId}
+                onChange={(enabled) => setAudioEnabled(enabled)}
+                onDeviceError={(error) => console.error(error)}
+                onActiveDeviceChange={(deviceId) =>
+                  setAudioDeviceId(deviceId ?? '')
+                }
+                variant="tertiary"
+              />
+              <SelectToggleDevice
+                source={Track.Source.Camera}
+                initialState={videoEnabled}
+                track={videoTrack}
+                initialDeviceId={initialUserChoices.videoDeviceId}
+                onChange={(enabled) => setVideoEnabled(enabled)}
+                onDeviceError={(error) => console.error(error)}
+                onActiveDeviceChange={(deviceId) =>
+                  setVideoDeviceId(deviceId ?? '')
+                }
+                variant="tertiary"
+              />
+            </HStack>
+          </div>
+          <div
+            className={css({
+              width: '100%',
+              flexShrink: 0,
+              padding: '0',
+              sm: {
+                width: '448px',
+                padding: '0 3rem 9rem 3rem',
+              },
+            })}
+          >
+            <Form
+              onSubmit={handleSubmit}
+              submitLabel={t('joinLabel')}
+              submitButtonProps={{
+                fullWidth: true,
+              }}
+            >
+              <VStack marginBottom={1}>
+                <H lvl={1} margin={false}>
+                  {t('heading')}
+                </H>
+                <Field
+                  type="text"
+                  onChange={setUsername}
+                  label={t('usernameLabel')}
+                  aria-label={t('usernameLabel')}
+                  defaultValue={initialUserChoices?.username}
+                  validate={(value) => !value && t('errors.usernameEmpty')}
+                  wrapperProps={{
+                    noMargin: true,
+                    fullWidth: true,
+                  }}
+                  labelProps={{
+                    center: true,
+                  }}
+                  maxLength={50}
+                />
+              </VStack>
+            </Form>
+          </div>
+        </div>
+      </div>
    </Screen>
  )
 }
@@ -3,11 +3,23 @@ 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 muteParticipant = (participant: Participant) => {
+  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) => {
    if (!data || !data?.livekit) {
      throw new Error('Room data is not available')
    }
@@ -18,22 +30,33 @@ export const useMuteParticipant = () => {
    if (!trackSid) {
      throw new Error('Missing audio track')
    }
-    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,
-        }),
-      }
-    )
+
+    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 { muteParticipant }
 }
@@ -1,188 +0,0 @@
-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>
-  )
-}
@@ -0,0 +1,36 @@
+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>
+  )
+}
@@ -1,7 +1,6 @@
 import {
  AudioTrack,
  ConnectionQualityIndicator,
-  FocusToggle,
  LockLockedIcon,
  ParticipantName,
  ParticipantTileProps,
@@ -23,11 +22,12 @@ 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 '@/features/rooms/livekit/hooks/useRaisedHand'
+import { useRaisedHand } from '../hooks/useRaisedHand'
 import { HStack } from '@/styled-system/jsx'
-import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
+import { MutedMicIndicator } from './MutedMicIndicator'
+import { ParticipantPlaceholder } from './ParticipantPlaceholder'
+import { ParticipantTileFocus } from './ParticipantTileFocus'

 export function TrackRefContextIfNeeded(
  props: React.PropsWithChildren<{
@@ -173,7 +173,9 @@ export const ParticipantTile: (
              )}
            </>
          )}
-          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
+          {!disableMetadata && (
+            <ParticipantTileFocus trackRef={trackReference} />
+          )}
        </ParticipantContextIfNeeded>
      </TrackRefContextIfNeeded>
    </div>
@@ -0,0 +1,208 @@
+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>
+  )
+}
@@ -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
@@ -4,7 +4,11 @@ import {
  ProcessorWrapper,
 } from '@livekit/track-processors'
 import { ProcessorOptions, Track } from 'livekit-client'
-import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
+import {
+  BackgroundProcessorInterface,
+  BackgroundOptions,
+  ProcessorType,
+} from '.'

 /**
 * This is simply a wrapper around track-processor-js Processor
@@ -12,14 +16,17 @@ import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 * used accross the project.
 */
 export class BackgroundBlurTrackProcessorJsWrapper
-  implements BackgroundBlurProcessorInterface
+  implements BackgroundProcessorInterface
 {
-  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>) {
@@ -45,4 +52,17 @@ 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,
+    }
+  }
 }
@@ -11,7 +11,11 @@ import {
  TIMEOUT_TICK,
  timerWorkerScript,
 } from './TimerWorker'
-import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
+import {
+  BackgroundProcessorInterface,
+  BackgroundOptions,
+  ProcessorType,
+} from '.'

 const PROCESSING_WIDTH = 256
 const PROCESSING_HEIGHT = 144
@@ -28,9 +32,7 @@ const DEFAULT_BLUR = '10'
 * It also make possible to run blurring on browser that does not implement MediaStreamTrackGenerator and
 * MediaStreamTrackProcessor.
 */
-export class BackgroundBlurCustomProcessor
-  implements BackgroundBlurProcessorInterface
-{
+export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
  options: BackgroundOptions
  name: string
  processedTrack?: MediaStreamTrack | undefined
@@ -59,9 +61,18 @@ export class BackgroundBlurCustomProcessor

  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() {
@@ -77,6 +88,7 @@ export class BackgroundBlurCustomProcessor
    this.sourceSettings = this.source!.getSettings()
    this.videoElement = opts.element as HTMLVideoElement

+    this._initVirtualBackgroundImage()
    this._createMainCanvas()
    this._createMaskCanvas()

@@ -94,8 +106,21 @@ export class BackgroundBlurCustomProcessor
    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() {
@@ -197,6 +222,7 @@ export class BackgroundBlurCustomProcessor
    this.outputCanvasCtx!.globalCompositeOperation = 'copy'
    this.outputCanvasCtx!.filter = 'blur(8px)'

+    // Put opacity mask.
    this.outputCanvasCtx!.drawImage(
      this.segmentationMaskCanvas!,
      0,
@@ -209,19 +235,69 @@ export class BackgroundBlurCustomProcessor
      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()
-    await this.blur()
+
+    if (this.options.blurRadius) {
+      await this.blur()
+    } else {
+      await this.drawVirtualBackground()
+    }
    this.timerWorker!.postMessage({
      id: SET_TIMEOUT,
      timeMs: 1000 / 30,
@@ -278,4 +354,15 @@ export class BackgroundBlurCustomProcessor
    this.timerWorker?.terminate()
    this.imageSegmenter?.close()
  }
+
+  clone() {
+    return new BackgroundCustomProcessor(this.options)
+  }
+
+  serialize() {
+    return {
+      type: this.type,
+      options: this.options,
+    }
+  }
 }
@@ -0,0 +1,61 @@
+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,
+    }
+  }
+}
@@ -1,32 +1,63 @@
 import { ProcessorWrapper } from '@livekit/track-processors'
 import { Track, TrackProcessor } from 'livekit-client'
 import { BackgroundBlurTrackProcessorJsWrapper } from './BackgroundBlurTrackProcessorJsWrapper'
-import { BackgroundBlurCustomProcessor } from './BackgroundBlurCustomProcessor'
+import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
+import { BackgroundVirtualTrackProcessorJsWrapper } from './BackgroundVirtualTrackProcessorJsWrapper'

 export type BackgroundOptions = {
  blurRadius?: number
+  imagePath?: string
 }

-export interface BackgroundBlurProcessorInterface
-  extends TrackProcessor<Track.Kind> {
-  update(opts: BackgroundOptions): void
+export interface ProcessorSerialized {
+  type: ProcessorType
  options: BackgroundOptions
 }

-export class BackgroundBlurFactory {
+export interface BackgroundProcessorInterface
+  extends TrackProcessor<Track.Kind> {
+  update(opts: BackgroundOptions): void
+  options: BackgroundOptions
+  clone(): BackgroundProcessorInterface
+  serialize(): ProcessorSerialized
+}
+
+export enum ProcessorType {
+  BLUR = 'blur',
+  VIRTUAL = 'virtual',
+}
+
+export class BackgroundProcessorFactory {
  static isSupported() {
-    return (
-      ProcessorWrapper.isSupported || BackgroundBlurCustomProcessor.isSupported
-    )
+    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported
  }

-  static getProcessor(opts: BackgroundOptions) {
-    if (ProcessorWrapper.isSupported) {
-      return new BackgroundBlurTrackProcessorJsWrapper(opts)
+  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)
+      }
    }
-    if (BackgroundBlurCustomProcessor.isSupported) {
-      return new BackgroundBlurCustomProcessor(opts)
+    return undefined
+  }
+
+  static deserializeProcessor(data?: ProcessorSerialized) {
+    if (data?.type) {
+      return BackgroundProcessorFactory.getProcessor(data?.type, data?.options)
    }
-    return null
+    return undefined
  }
 }
@@ -0,0 +1,20 @@
+import { RiImageCircleAiFill } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+
+export const EffectsMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleEffects } = useSidePanel()
+
+  return (
+    <MenuItem
+      onAction={() => toggleEffects()}
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiImageCircleAiFill size={20} />
+      {t('effects')}
+    </MenuItem>
+  )
+}
@@ -0,0 +1,20 @@
+import { RiMegaphoneLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { GRIST_FORM } from '@/utils/constants'
+
+export const FeedbackMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+
+  return (
+    <MenuItem
+      href={GRIST_FORM}
+      target="_blank"
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiMegaphoneLine size={20} />
+      {t('feedback')}
+    </MenuItem>
+  )
+}
@@ -0,0 +1,34 @@
+import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useFullScreen } from '../../../hooks/useFullScreen'
+
+export const FullScreenMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
+    useFullScreen({})
+
+  if (!isFullscreenAvailable) {
+    return null
+  }
+
+  return (
+    <MenuItem
+      onAction={() => toggleFullScreen()}
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      {isCurrentlyFullscreen ? (
+        <>
+          <RiFullscreenExitLine size={20} />
+          {t('fullscreen.exit')}
+        </>
+      ) : (
+        <>
+          <RiFullscreenLine size={20} />
+          {t('fullscreen.enter')}
+        </>
+      )}
+    </MenuItem>
+  )
+}
@@ -1,21 +1,12 @@
-import {
-  RiAccountBoxLine,
-  RiMegaphoneLine,
-  RiSettings3Line,
-} from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
+import { Menu as RACMenu, MenuSection } from 'react-aria-components'
 import { Separator } from '@/primitives/Separator'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { useSettingsDialog } from '../SettingsDialogContext'
-import { GRIST_FORM } from '@/utils/constants'
+import { FullScreenMenuItem } from './FullScreenMenuItem'
+import { SettingsMenuItem } from './SettingsMenuItem'
+import { FeedbackMenuItem } from './FeedbackMenuItem'
+import { EffectsMenuItem } from './EffectsMenuItem'

 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
-  const { setDialogOpen } = useSettingsDialog()
  return (
    <RACMenu
      style={{
@@ -24,31 +15,13 @@ export const OptionsMenuItems = () => {
      }}
    >
      <MenuSection>
-        <MenuItem
-          onAction={() => toggleEffects()}
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-        >
-          <RiAccountBoxLine size={20} />
-          {t('effects')}
-        </MenuItem>
+        <FullScreenMenuItem />
+        <EffectsMenuItem />
      </MenuSection>
      <Separator />
      <MenuSection>
-        <MenuItem
-          href={GRIST_FORM}
-          target="_blank"
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-        >
-          <RiMegaphoneLine size={20} />
-          {t('feedback')}
-        </MenuItem>
-        <MenuItem
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-          onAction={() => setDialogOpen(true)}
-        >
-          <RiSettings3Line size={20} />
-          {t('settings')}
-        </MenuItem>
+        <FeedbackMenuItem />
+        <SettingsMenuItem />
      </MenuSection>
    </RACMenu>
  )
@@ -0,0 +1,20 @@
+import { RiSettings3Line } from '@remixicon/react'
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useSettingsDialog } from '../SettingsDialogContext'
+
+export const SettingsMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { setDialogOpen } = useSettingsDialog()
+
+  return (
+    <MenuItem
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+      onAction={() => setDialogOpen(true)}
+    >
+      <RiSettings3Line size={20} />
+      {t('settings')}
+    </MenuItem>
+  )
+}
@@ -13,36 +13,10 @@ import {
 } from '@livekit/components-react'
 import Source = Track.Source
 import { RiMicFill, RiMicOffFill } from '@remixicon/react'
-import { Button, Dialog, P } from '@/primitives'
+import { Button } from '@/primitives'
 import { useState } from 'react'
 import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
-
-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>
-  )
-}
+import { MuteAlertDialog } from '../../MuteAlertDialog'

 type MicIndicatorProps = {
  participant: Participant
@@ -13,12 +13,21 @@ import {
  RiVideoOffLine,
  RiVideoOnLine,
 } from '@remixicon/react'
-import { Track } from 'livekit-client'
+import {
+  LocalAudioTrack,
+  LocalVideoTrack,
+  Track,
+  VideoCaptureOptions,
+} from 'livekit-client'

 import { Shortcut } from '@/features/shortcuts/types'

 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { useEffect } from 'react'
+import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
+import { BackgroundProcessorFactory } from '../blur'

 export type ToggleSource = Exclude<
  Track.Source,
@@ -65,16 +74,22 @@ const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {

 type SelectToggleDeviceProps<T extends ToggleSource> =
  UseTrackToggleProps<T> & {
+    track?: LocalAudioTrack | LocalVideoTrack | undefined
+    initialDeviceId?: string
    onActiveDeviceChange: (deviceId: string) => void
    source: SelectToggleSource
+    variant?: NonNullable<ButtonRecipeProps>['variant']
+    menuVariant?: 'dark' | 'light'
    hideMenu?: boolean
-    variant?: 'dark' | 'light'
  }

 export const SelectToggleDevice = <T extends ToggleSource>({
+  track,
+  initialDeviceId,
  onActiveDeviceChange,
  hideMenu,
-  variant = 'light',
+  variant = 'primaryDark',
+  menuVariant = 'light',
  ...props
 }: SelectToggleDeviceProps<T>) => {
  const config = selectToggleDeviceConfig[props.source]
@@ -84,8 +99,53 @@ 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 })
+    useMediaDeviceSelect({ kind: config.kind, track })
+
+  /**
+   * When providing only track outside of a room context, activeDeviceId is undefined.
+   * So we need to initialize it with the initialDeviceId.
+   * nb: I don't understand why useMediaDeviceSelect cannot infer it from track device id.
+   */
+  useEffect(() => {
+    if (initialDeviceId !== undefined) {
+      setActiveMediaDevice(initialDeviceId)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setActiveMediaDevice])

  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })

@@ -99,6 +159,8 @@ export const SelectToggleDevice = <T extends ToggleSource>({
      <ToggleDevice
        {...trackProps}
        config={config}
+        variant={variant}
+        toggle={toggle}
        toggleButtonProps={{
          ...(hideMenu
            ? {
@@ -108,13 +170,13 @@ export const SelectToggleDevice = <T extends ToggleSource>({
        }}
      />
      {!hideMenu && (
-        <Menu variant={variant}>
+        <Menu variant={menuVariant}>
          <Button
            tooltip={selectLabel}
            aria-label={selectLabel}
            groupPosition="right"
            square
-            variant={trackProps.enabled ? 'primaryDark' : 'error2'}
+            variant={trackProps.enabled ? variant : 'error2'}
          >
            <RiArrowDownSLine />
          </Button>
@@ -128,7 +190,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
              setActiveMediaDevice(value as string)
              onActiveDeviceChange(value as string)
            }}
-            variant={variant}
+            variant={menuVariant}
          />
        </Menu>
      )}
@@ -4,10 +4,14 @@ import { useTranslation } from 'react-i18next'
 import { Crisp } from 'crisp-sdk-web'
 import { useEffect, useState } from 'react'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'

 export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-  const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
+
+  const [isOpened, setIsOpened] = useState(() => {
+    return window?.$crisp?.is?.('chat:opened') || false
+  })

  useEffect(() => {
    if (!Crisp) {
@@ -26,6 +30,12 @@ export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
    }
  }, [])

+  const isSupportEnabled = useIsSupportEnabled()
+
+  if (!isSupportEnabled) {
+    return
+  }
+
  return (
    <ToggleButton
      square
@@ -6,13 +6,19 @@ import { useTranslation } from 'react-i18next'
 import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
+import {
+  useIsSpeaking,
+  useLocalParticipant,
+  useMaybeRoomContext,
+} from '@livekit/components-react'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'

 export type ToggleDeviceProps = {
  enabled: boolean
  toggle: () => void
  config: SelectToggleDeviceConfig
+  variant?: NonNullable<ButtonRecipeProps>['variant']
  toggleButtonProps?: Partial<ToggleButtonProps>
 }

@@ -20,6 +26,7 @@ export const ToggleDevice = ({
  config,
  enabled,
  toggle,
+  variant = 'primaryDark',
  toggleButtonProps,
 }: ToggleDeviceProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
@@ -51,17 +58,15 @@ export const ToggleDevice = ({

  const Icon = enabled ? iconOn : iconOff

-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-
-  if (kind === 'audioinput' && pushToTalk) {
-    return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
+  const context = useMaybeRoomContext()
+  if (kind === 'audioinput' && pushToTalk && context) {
+    return <ActiveSpeakerWrapper />
  }

  return (
    <ToggleButton
      isSelected={!enabled}
-      variant={enabled ? 'primaryDark' : 'error2'}
+      variant={enabled ? variant : 'error2'}
      shySelected
      onPress={() => toggle()}
      aria-label={toggleLabel}
@@ -73,3 +78,9 @@ export const ToggleDevice = ({
    </ToggleButton>
  )
 }
+
+const ActiveSpeakerWrapper = () => {
+  const { localParticipant } = useLocalParticipant()
+  const isSpeaking = useIsSpeaking(localParticipant)
+  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
+}
@@ -7,7 +7,7 @@ import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'

 export const TranscriptToggle = ({
-  variant = 'primaryDark',
+  variant = 'primaryTextDark',
  onPress,
  ...props
 }: ToggleButtonProps) => {
@@ -0,0 +1,27 @@
+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>
+  )
+}
@@ -0,0 +1,355 @@
+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>
+  )
+}
@@ -0,0 +1,91 @@
+// We use vendor prefix properties
+// 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])
+
+  const getIsFullscreen = () => {
+    return !!(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    )
+  }
+
+  const [isFullscreenAvailable] = useState(
+    () =>
+      document.fullscreenEnabled ||
+      document.webkitFullscreenEnabled ||
+      document.mozFullScreenEnabled ||
+      document.msFullscreenEnabled
+  )
+
+  const enterFullscreen = async () => {
+    try {
+      const docEl = videoElement || document.documentElement
+      if (docEl.requestFullscreen) {
+        await docEl.requestFullscreen()
+      } else if (docEl.webkitRequestFullscreen) {
+        await docEl.webkitRequestFullscreen()
+      } else if (docEl.msRequestFullscreen) {
+        await docEl.msRequestFullscreen()
+      }
+    } catch (error) {
+      console.error('Error entering fullscreen:', error)
+    }
+  }
+
+  const exitFullscreen = async () => {
+    try {
+      if (document.exitFullscreen) {
+        await document.exitFullscreen()
+      } else if (document.webkitExitFullscreen) {
+        await document.webkitExitFullscreen()
+      } else if (document.msExitFullscreen) {
+        await document.msExitFullscreen()
+      }
+    } catch (error) {
+      console.error('Error exiting fullscreen:', error)
+    }
+  }
+
+  const toggleFullScreen = async () => {
+    const isCurrentlyFullscreen = getIsFullscreen()
+    if (isCurrentlyFullscreen) {
+      await exitFullscreen()
+    } else {
+      await enterFullscreen()
+    }
+  }
+
+  return {
+    isCurrentlyFullscreen: getIsFullscreen(),
+    isFullscreenAvailable,
+    toggleFullScreen,
+  }
+}
@@ -0,0 +1,56 @@
+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,
+  }
+}
@@ -19,5 +19,5 @@ export function useRaisedHand({ participant }: useRaisedHandProps) {
    }
  }

-  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
+  return { isHandRaised: parsedMetadata.raised || false, toggleRaisedHand }
 }
@@ -1,12 +1,10 @@
 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, room.localParticipant.name]
+  const queryKey = [keys.room, roomId]
  return queryClient.getQueryData<ApiRoom>(queryKey)
 }
@@ -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 = {
@@ -8,10 +8,8 @@ import { HandToggle } from '../../components/controls/HandToggle'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
-import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+import { MoreOptions } from './MoreOptions'
+import { useRef } from 'react'

 export function DesktopControlBar({
  onDeviceError,
@@ -21,9 +19,11 @@ export function DesktopControlBar({
  saveVideoInputDeviceId,
 }: ControlBarAuxProps) {
  const browserSupportsScreenSharing = supportsScreenSharing()
+  const desktopControlBarEl = useRef<HTMLDivElement>(null)
  return (
    <>
      <div
+        ref={desktopControlBarEl}
        className={css({
          width: '100vw',
          display: 'flex',
@@ -62,7 +62,7 @@ export function DesktopControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveAudioInputDeviceId(deviceId ?? '')
            }
-            variant="dark"
+            menuVariant="dark"
          />
          <SelectToggleDevice
            source={Track.Source.Camera}
@@ -73,7 +73,7 @@ export function DesktopControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveVideoInputDeviceId(deviceId ?? '')
            }
-            variant="dark"
+            menuVariant="dark"
          />
          {browserSupportsScreenSharing && (
            <ScreenShareToggle
@@ -87,21 +87,7 @@ export function DesktopControlBar({
          <LeaveButton />
          <StartMediaButton />
        </div>
-        <div
-          className={css({
-            display: 'flex',
-            justifyContent: 'flex-end',
-            flex: '1 1 33%',
-            alignItems: 'center',
-            gap: '0.5rem',
-            paddingRight: '0.25rem',
-          })}
-        >
-          <ChatToggle />
-          <ParticipantsToggle />
-          <TranscriptToggle />
-          <SupportToggle />
-        </div>
+        <MoreOptions parentElement={desktopControlBarEl} />
      </div>
    </>
  )
@@ -0,0 +1,87 @@
+import { css } from '@/styled-system/css'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+import { useSize } from '../../hooks/useResizeObserver'
+import { useState, RefObject } from 'react'
+import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
+import { Button } from '@/primitives'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+const CONTROL_BAR_BREAKPOINT = 750
+
+const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
+  <>
+    <ChatToggle onPress={onPress} />
+    <ParticipantsToggle onPress={onPress} />
+    <TranscriptToggle onPress={onPress} />
+    <SupportToggle onPress={onPress} />
+  </>
+)
+
+export const LateralMenu = () => {
+  const { t } = useTranslation('rooms')
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handlePress = () => setIsOpen(!isOpen)
+  const handleClose = () => setIsOpen(false)
+
+  return (
+    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+      <Button
+        square
+        variant="secondaryDark"
+        aria-label={t('controls.moreOptions')}
+        tooltip={t('controls.moreOptions')}
+        onPress={handlePress}
+      >
+        {isOpen ? <RiArrowDownSLine /> : <RiArrowUpSLine />}
+      </Button>
+      <Popover>
+        <Dialog
+          className={css({
+            width: '65px',
+            backgroundColor: 'primaryDark.50',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            borderRadius: '4px',
+            paddingTop: '10px',
+            gap: '0.5rem',
+          })}
+        >
+          <NavigationControls onPress={handleClose} />
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  )
+}
+
+export const MoreOptions = ({
+  parentElement,
+}: {
+  parentElement: RefObject<HTMLDivElement>
+}) => {
+  const { width: parentWidth } = useSize(parentElement)
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        justifyContent: 'flex-end',
+        flex: '1 1 33%',
+        alignItems: 'center',
+        gap: '0.5rem',
+        paddingRight: '0.25rem',
+      })}
+    >
+      {parentWidth > CONTROL_BAR_BREAKPOINT ? (
+        <NavigationControls />
+      ) : (
+        <LateralMenu />
+      )}
+    </div>
+  )
+}
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import {
  usePersistentUserChoices,
-  type LocalUserChoices,
+  type LocalUserChoices as LocalUserChoicesLK,
 } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -9,6 +9,11 @@ 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()
@@ -1,15 +1,13 @@
 import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives'
 import { Trans, useTranslation } from 'react-i18next'
-import {
-  usePersistentUserChoices,
-  useRoomContext,
-} from '@livekit/components-react'
+import { 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'>
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { Crisp } from 'crisp-sdk-web'
 import { ApiUser } from '@/features/auth/api/ApiUser'
+import { useConfig } from '@/api/useConfig'

 export const initializeSupportSession = (user: ApiUser) => {
  if (!Crisp.isCrispInjected()) return
@@ -29,3 +30,18 @@ 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()
+}
@@ -0,0 +1,30 @@
+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
+}
@@ -242,7 +242,7 @@ export const Footer = () => {
              {t('links.data')}
            </A>
          </StyledLi>
-          <StyledLi>
+          <StyledLi divider>
            <A
              externalIcon
              underline={false}
@@ -255,6 +255,17 @@ 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')}{' '}
@@ -34,7 +34,8 @@
      "legalsTerms": "",
      "data": "",
      "accessibility": "",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "code": ""
    },
    "mentions": "",
    "license": ""
@@ -6,5 +6,7 @@
  "raised": {
    "description": "",
    "cta": ""
-  }
+  },
+  "muted": "",
+  "openChat": ""
 }
@@ -19,12 +19,22 @@
      "label": ""
    },
    "heading": "",
+    "effects": {
+      "description": "",
+      "title": "",
+      "subTitle": ""
+    },
    "joinLabel": "",
    "joinMeeting": "",
    "toggleOff": "",
    "toggleOn": "",
    "usernameHint": "",
-    "usernameLabel": ""
+    "usernameLabel": "",
+    "errors": {
+      "usernameEmpty": ""
+    },
+    "cameraDisabled": "",
+    "cameraStarting": ""
  },
  "leaveRoomPrompt": "",
  "shareDialog": {
@@ -75,7 +85,8 @@
      "open": "",
      "closed": ""
    },
-    "support": ""
+    "support": "",
+    "moreOptions": ""
  },
  "options": {
    "buttonLabel": "",
@@ -84,7 +95,11 @@
      "settings": "",
      "username": "",
      "effects": "",
-      "switchCamera": ""
+      "switchCamera": "",
+      "fullscreen": {
+        "enter": "",
+        "exit": ""
+      }
    }
  },
  "effects": {
@@ -92,11 +107,17 @@
    "notAvailable": "",
    "heading": "",
    "blur": {
+      "title": "",
      "light": "",
      "normal": "",
      "apply": "",
      "clear": ""
    },
+    "virtual": {
+      "title": "",
+      "apply": "",
+      "clear": ""
+    },
    "experimental": ""
  },
  "sidePanel": {
@@ -158,6 +179,7 @@
    "muteYourself": "",
    "muteParticipant": "",
    "muteParticipantAlert": {
+      "heading": "",
      "description": "",
      "confirm": "",
      "cancel": ""
@@ -168,5 +190,14 @@
  },
  "recording": {
    "label": ""
+  },
+  "participantTileFocus": {
+    "pin": {
+      "enable": "",
+      "disable": ""
+    },
+    "effects": "",
+    "muteParticipant": "",
+    "fullScreen": ""
  }
 }
@@ -34,7 +34,8 @@
      "legalsTerms": "Legal Notice",
      "data": "Personal Data and Cookies",
      "accessibility": "Accessibility: audit in progress",
-      "ariaLabel": "new window"
+      "ariaLabel": "new window",
+      "code": "Open Source Code Repository"
    },
    "mentions": "Unless otherwise stated, the contents of this site are available under",
    "license": "etalab 2.0 license"
@@ -6,5 +6,7 @@
  "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"
 }
@@ -18,13 +18,23 @@
      "enable": "Enable microphone",
      "label": "Microphone"
    },
-    "heading": "Verify your settings",
+    "effects": {
+      "description": "Apply effects",
+      "title": "Effects",
+      "subTitle": "Configure your camera's effects."
+    },
+    "heading": "Join the meeting",
    "joinLabel": "Join",
    "joinMeeting": "Join meeting",
    "toggleOff": "Click to turn off",
    "toggleOn": "Click to turn on",
    "usernameHint": "Shown to other participants",
-    "usernameLabel": "Your name"
+    "usernameLabel": "Your name",
+    "errors": {
+      "usernameEmpty": "Your name cannot be empty"
+    },
+    "cameraDisabled": "Camera is disabled.",
+    "cameraStarting": "Camera is starting."
  },
  "leaveRoomPrompt": "This will make you leave the meeting.",
  "shareDialog": {
@@ -74,7 +84,8 @@
      "open": "Hide AI assistant",
      "closed": "Show AI assistant"
    },
-    "support": "Support"
+    "support": "Support",
+    "moreOptions": "More options"
  },
  "options": {
    "buttonLabel": "More Options",
@@ -83,19 +94,29 @@
      "settings": "Settings",
      "username": "Update Your Name",
      "effects": "Apply effects",
-      "switchCamera": "Switch camera"
+      "switchCamera": "Switch camera",
+      "fullscreen": {
+        "enter": "Fullscreen",
+        "exit": "Exit fullscreen mode"
+      }
    }
  },
  "effects": {
    "activateCamera": "Your camera is disabled. Choose an option to enable it.",
-    "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 :(",
+    "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 :(",
    "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": {
@@ -157,6 +178,7 @@
    "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"
@@ -167,5 +189,14 @@
  },
  "recording": {
    "label": "Recording"
+  },
+  "participantTileFocus": {
+    "pin": {
+      "enable": "Pin",
+      "disable": "Unpin"
+    },
+    "effects": "Apply visual effects",
+    "muteParticipant": "Mute {{name}}",
+    "fullScreen": "Full screen"
  }
 }
@@ -34,7 +34,8 @@
      "legalsTerms": "Mentions légales",
      "data": "Données personnelles et cookie",
      "accessibility": "Accessibilités : audit en cours",
-      "ariaLabel": "nouvelle fenêtre"
+      "ariaLabel": "nouvelle fenêtre",
+      "code": "Dépôt de code Open Source"
    },
    "mentions": "Sauf mention contraire, les contenus de ce site sont disponibles sous",
    "license": "licence etalab 2.0"
@@ -6,5 +6,7 @@
  "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"
 }
@@ -18,13 +18,23 @@
      "enable": "Activer le micro",
      "label": "Microphone"
    },
-    "heading": "Vérifiez vos paramètres",
+    "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",
    "toggleOn": "Cliquez pour activer",
    "usernameHint": "Affiché aux autres participants",
-    "usernameLabel": "Votre nom"
+    "usernameLabel": "Votre nom",
+    "errors": {
+      "usernameEmpty": "Votre nom ne peut pas être vide"
+    },
+    "cameraDisabled": "La caméra est désactivée.",
+    "cameraStarting": "La caméra va démarrer."
  },
  "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
  "shareDialog": {
@@ -74,7 +84,8 @@
      "open": "Masquer l'assistant IA",
      "closed": "Afficher l'assistant IA"
    },
-    "support": "Support"
+    "support": "Support",
+    "moreOptions": "Plus d'options"
  },
  "options": {
    "buttonLabel": "Plus d'options",
@@ -83,19 +94,29 @@
      "settings": "Paramètres",
      "username": "Choisir votre nom",
      "effects": "Appliquer des effets",
-      "switchCamera": "Changer de caméra"
+      "switchCamera": "Changer de caméra",
+      "fullscreen": {
+        "enter": "Plein écran",
+        "exit": "Quitter le mode plein écran"
+      }
    }
  },
  "effects": {
    "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
-    "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 :(",
+    "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 :(",
    "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": {
@@ -157,6 +178,7 @@
    "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"
@@ -167,5 +189,14 @@
  },
  "recording": {
    "label": "Enregistrement"
+  },
+  "participantTileFocus": {
+    "pin": {
+      "enable": "Épingler",
+      "disable": "Annuler l'épinglage"
+    },
+    "effects": "Appliquer des effets",
+    "muteParticipant": "Couper le micro de {{name}}",
+    "fullScreen": "Plein écran"
  }
 }
@@ -41,7 +41,7 @@
  },
  "settingsButtonLabel": "Paramètres",
  "tabs": {
-    "account": "Profile",
+    "account": "Profil",
    "audio": "Audio",
    "general": "Général",
    "notifications": "Notifications"
@@ -11,6 +11,7 @@ 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: {
@@ -48,6 +49,24 @@ 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
@@ -63,6 +82,7 @@ export type DialogProps = RACDialogProps & {
  onOpenChange?: (isOpen: boolean) => void
  type?: 'flex'
  innerRef?: MutableRefObject<HTMLDivElement | null>
+  size?: 'full' | 'large'
 }

 export const Dialog = ({
@@ -72,6 +92,7 @@ export const Dialog = ({
  isOpen,
  onOpenChange,
  innerRef,
+  size = 'full',
  ...dialogProps
 }: DialogProps) => {
  const isAlert = dialogProps['role'] === 'alertdialog'
@@ -94,9 +115,16 @@ export const Dialog = ({
        <StyledRACDialog {...dialogProps}>
          {({ close }) => (
            <VerticallyOffCenter>
-              <Div margin="auto" width="fit-content" maxWidth="full">
+              <ModalContent size={size}>
                <Div margin="1rem" pointerEvents="auto">
-                  <Box size="sm" type={boxType} ref={innerRef}>
+                  <Box
+                    size="sm"
+                    type={boxType}
+                    ref={innerRef}
+                    className={css({
+                      padding: '1.5rem',
+                    })}
+                  >
                    {!!title && (
                      <Heading
                        slot="title"
@@ -124,7 +152,7 @@ export const Dialog = ({
                    )}
                  </Box>
                </Div>
-              </Div>
+              </ModalContent>
            </VerticallyOffCenter>
          )}
        </StyledRACDialog>
@@ -25,11 +25,31 @@ const FieldWrapper = styled('div', {
    marginBottom: 'textfield',
    minWidth: 0,
  },
+  variants: {
+    noMargin: {
+      true: {
+        marginBottom: 0,
+      },
+    },
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+    },
+  },
 })

 const StyledLabel = styled(Label, {
  base: {
    display: 'block',
+    fontSize: '0.75rem',
+  },
+  variants: {
+    center: {
+      true: {
+        textAlign: 'center',
+      },
+    },
  },
 })

@@ -80,6 +100,8 @@ type FieldProps<T extends object> = (
 ) & {
  label: string
  description?: string
+  wrapperProps?: React.ComponentProps<typeof FieldWrapper>
+  labelProps?: React.ComponentProps<typeof StyledLabel>
 }

 /**
@@ -104,7 +126,7 @@ export const Field = <T extends object>({
 }: FieldProps<T>) => {
  const LabelAndDescription = (
    <>
-      <StyledLabel>{label}</StyledLabel>
+      <StyledLabel {...props.labelProps}>{label}</StyledLabel>
      <FieldDescription slot="description">{description}</FieldDescription>
    </>
  )
@@ -118,7 +140,7 @@ export const Field = <T extends object>({

  if (type === 'text') {
    return (
-      <FieldWrapper>
+      <FieldWrapper {...props.wrapperProps}>
        <RACTextField
          validate={validate as unknown as TextFieldProps['validate']}
          {...(props as PartialTextFieldProps)}
@@ -133,7 +155,7 @@ export const Field = <T extends object>({

  if (type === 'checkbox') {
    return (
-      <FieldWrapper>
+      <FieldWrapper {...props.wrapperProps}>
        <Checkbox
          validate={validate as unknown as CheckboxProps['validate']}
          description={description}
@@ -147,7 +169,7 @@ export const Field = <T extends object>({

  if (type === 'checkboxGroup') {
    return (
-      <FieldWrapper>
+      <FieldWrapper {...props.wrapperProps}>
        <CheckboxGroup
          validate={validate as unknown as CheckboxGroupProps['validate']}
          {...(props as PartialCheckboxGroupProps)}
@@ -170,7 +192,7 @@ export const Field = <T extends object>({

  if (type === 'radioGroup') {
    return (
-      <FieldWrapper>
+      <FieldWrapper {...props.wrapperProps}>
        <RadioGroup
          validate={validate as unknown as RadioGroupProps['validate']}
          {...(props as PartialRadioGroupProps)}
@@ -189,7 +211,7 @@ export const Field = <T extends object>({

  if (type === 'select') {
    return (
-      <FieldWrapper>
+      <FieldWrapper {...props.wrapperProps}>
        <Select
          validate={validate as unknown as SelectProps<T>['validate']}
          {...(props as PartialSelectProps<T>)}
@@ -3,6 +3,7 @@ import { Form as RACForm, type FormProps } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { HStack } from '@/styled-system/jsx'
 import { Button, useCloseDialog } from '@/primitives'
+import { ButtonProps } from '@/primitives/Button'

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

 export const H = ({
  children,
  lvl,
  ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & { lvl: 1 | 2 | 3 }) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & {
+  lvl: 1 | 2 | 3
+} & TextProps) => {
  const tag = `h${lvl}` as const
  return (
    <Text as={tag} variant={tag} {...props}>
@@ -0,0 +1,45 @@
+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>
+}
@@ -28,6 +28,14 @@ export const text = cva({
          paddingTop: 'heading',
        },
      },
+      subTitle: {
+        fontSize: '1rem',
+        color: 'greyscale.600',
+      },
+      bodyXsBold: {
+        textStyle: 'body',
+        fontWeight: 'bold',
+      },
      body: {
        textStyle: 'body',
      },
@@ -27,7 +27,7 @@ export const ToggleButton = ({
    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
      <RACToggleButton
        {...componentProps}
-        className={buttonRecipe(variantProps)}
+        className={[buttonRecipe(variantProps), props.className].join(' ')}
      >
        <>
          {componentProps.children as ReactNode}
@@ -8,6 +8,9 @@ export const buttonRecipe = cva({
    transition: 'background 200ms, outline 200ms, border-color 200ms',
    cursor: 'pointer',
    border: '1px solid transparent',
+    '&[data-disabled]': {
+      cursor: 'default',
+    },
  },
  variants: {
    size: {
@@ -73,6 +76,40 @@ 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',
@@ -109,6 +146,21 @@ export const buttonRecipe = cva({
          color: 'primaryDark.100 !important',
        },
      },
+      secondaryDark: {
+        backgroundColor: 'primaryDark.50',
+        color: 'white',
+        '&[data-pressed]': {
+          backgroundColor: 'primaryDark.200',
+        },
+        '&[data-hovered]': {
+          backgroundColor: 'primaryDark.100',
+          color: 'white',
+        },
+        '&[data-selected]': {
+          backgroundColor: 'primaryDark.700 !important',
+          color: 'primaryDark.100 !important',
+        },
+      },
      primaryTextDark: {
        backgroundColor: 'transparent',
        color: 'white',
@@ -14,6 +14,7 @@ const DEFAULT_STATE: State = {
    new Map([
      [NotificationType.ParticipantJoined, true],
      [NotificationType.HandRaised, true],
+      [NotificationType.MessageReceived, true],
    ])
  ),
  soundNotificationVolume: 0.1,
@@ -24,7 +25,21 @@ function getNotificationsState(): State {
    const stored = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS)
    if (!stored) return DEFAULT_STATE
    const parsed = JSON.parse(stored, deserializeToProxyMap)
-    return parsed || DEFAULT_STATE
+    // 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),
+          ])
+        )
+      ),
+    }
  } catch (error: unknown) {
    console.error(
      '[NotificationsStore] Failed to parse stored settings:',
@@ -10,6 +10,7 @@ export default defineConfig(({ mode }) => {
    server: {
      port: parseInt(env.VITE_PORT) || 3000,
      host: env.VITE_HOST || 'localhost',
+      allowedHosts: ['.nip.io'],
    },
  }
 })
@@ -1,4 +1,4 @@
 apiVersion: v2
 type: application
 name: meet
-version: 0.0.1
+version: 0.0.3
@@ -82,6 +82,7 @@
 | `backend.persistence.volume-name.mountPath`           | Path where the volume should be mounted to                                         |                                                                                                                               |
 | `backend.extraVolumeMounts`                           | Additional volumes to mount on the backend.                                        | `[]`                                                                                                                          |
 | `backend.extraVolumes`                                | Additional volumes to mount on the backend.                                        | `[]`                                                                                                                          |
+| `backend.pdb.enabled`                                 | Enable pdb on backend                                                              | `true`                                                                                                                        |

 ### frontend

@@ -131,6 +132,7 @@
 | `frontend.persistence.volume-name.mountPath`           | Path where the volume should be mounted to                                          |                         |
 | `frontend.extraVolumeMounts`                           | Additional volumes to mount on the frontend.                                        | `[]`                    |
 | `frontend.extraVolumes`                                | Additional volumes to mount on the frontend.                                        | `[]`                    |
+| `frontend.pdb.enabled`                                 | Enable pdb on frontend                                                              | `true`                  |

 ### posthog

@@ -208,6 +210,7 @@
 | `summary.persistence.volume-name.mountPath`           | Path where the volume should be mounted to                                         |                    |
 | `summary.extraVolumeMounts`                           | Additional volumes to mount on the summary.                                        | `[]`               |
 | `summary.extraVolumes`                                | Additional volumes to mount on the summary.                                        | `[]`               |
+| `summary.pdb.enabled`                                 | Enable pdb on summary                                                              | `true`             |

 ### celery

@@ -255,3 +258,4 @@
 | `celery.persistence.volume-name.mountPath`           | Path where the volume should be mounted to                                        |             |
 | `celery.extraVolumeMounts`                           | Additional volumes to mount on the celery.                                        | `[]`        |
 | `celery.extraVolumes`                                | Additional volumes to mount on the celery.                                        | `[]`        |
+| `celery.pdb.enabled`                                 | Enable pdb on celery                                                              | `false`     |
@@ -138,3 +138,16 @@ spec:
          emptyDir: {}
          {{- end }}
        {{- end }}
+---
+{{ if .Values.backend.pdb.enabled }}
+apiVersion: policy/v1
+kind: PodDisruptionBudget
+metadata:
+  name: {{ $fullName }}
+  namespace: {{ .Release.Namespace | quote }}
+spec:
+  maxUnavailable: 1
+  selector:
+    matchLabels:
+      {{- include "meet.common.selectorLabels" (list . $component) | nindent 6 }}
+{{ end }}
@@ -138,3 +138,16 @@ spec:
          emptyDir: {}
          {{- end }}
        {{- end }}
+---
+{{ if .Values.celery.pdb.enabled }}
+apiVersion: policy/v1
+kind: PodDisruptionBudget
+metadata:
+  name: {{ $fullName }}
+  namespace: {{ .Release.Namespace | quote }}
+spec:
+  maxUnavailable: 1
+  selector:
+    matchLabels:
+      {{- include "meet.common.selectorLabels" (list . $component) | nindent 6 }}
+{{ end }}
@@ -138,3 +138,16 @@ spec:
          emptyDir: {}
          {{- end }}
        {{- end }}
+---
+{{ if .Values.frontend.pdb.enabled }}
+apiVersion: policy/v1
+kind: PodDisruptionBudget
+metadata:
+  name: {{ $fullName }}
+  namespace: {{ .Release.Namespace | quote }}
+spec:
+  maxUnavailable: 1
+  selector:
+    matchLabels:
+      {{- include "meet.common.selectorLabels" (list . $component) | nindent 6 }}
+{{ end }}
@@ -138,3 +138,16 @@ spec:
          emptyDir: {}
          {{- end }}
        {{- end }}
+---
+{{ if .Values.summary.pdb.enabled }}
+apiVersion: policy/v1
+kind: PodDisruptionBudget
+metadata:
+  name: {{ $fullName }}
+  namespace: {{ .Release.Namespace | quote }}
+spec:
+  maxUnavailable: 1
+  selector:
+    matchLabels:
+      {{- include "meet.common.selectorLabels" (list . $component) | nindent 6 }}
+{{ end }}
@@ -120,8 +120,8 @@ backend:
    targetPort: 8000
    annotations: {}

- ## @param backend.migrate.command backend migrate command
- ## @param backend.migrate.restartPolicy backend migrate job restart policy
+  ## @param backend.migrate.command backend migrate command
+  ## @param backend.migrate.restartPolicy backend migrate job restart policy
  migrate:
    command:
      - "python"
@@ -130,8 +130,8 @@ backend:
      - "--no-input"
    restartPolicy: Never

- ## @param backend.createsuperuser.command backend migrate command
- ## @param backend.createsuperuser.restartPolicy backend migrate job restart policy
+  ## @param backend.createsuperuser.command backend migrate command
+  ## @param backend.createsuperuser.restartPolicy backend migrate job restart policy
  createsuperuser:
    command:
      - "/bin/sh"
@@ -184,6 +184,9 @@ backend:
  ## @param backend.extraVolumes Additional volumes to mount on the backend.
  extraVolumes: []

+  ## @param backend.pdb.enabled Enable pdb on backend
+  pdb:
+    enabled: true

 ## @section frontend

@@ -279,6 +282,10 @@ frontend:
  ## @param frontend.extraVolumes Additional volumes to mount on the frontend.
  extraVolumes: []

+  ## @param frontend.pdb.enabled Enable pdb on frontend
+  pdb:
+    enabled: true
+
 ## @section posthog

 posthog:
@@ -443,6 +450,9 @@ summary:
  ## @param summary.extraVolumes Additional volumes to mount on the summary.
  extraVolumes: []

+  ## @param summary.pdb.enabled Enable pdb on summary
+  pdb:
+    enabled: true

 ## @section celery

@@ -533,3 +543,6 @@ celery:
  ## @param celery.extraVolumes Additional volumes to mount on the celery.
  extraVolumes: []

+  ## @param celery.pdb.enabled Enable pdb on celery
+  pdb:
+    enabled: false
@@ -14,7 +14,7 @@
    "build": "npm run build-mjml-to-html && npm run build-html-to-plain-text"
  },
  "volta": {
-    "node": "22.13.0"
+    "node": "22.13.1"
  },
  "repository": "https://github.com/numerique-gouv/meet",
  "author": "DINUM",
@@ -10,14 +10,14 @@ dependencies = [
    "celery==5.4.0",
    "redis==5.2.1",
    "minio==7.2.15",
-    "openai==1.59.8",
+    "openai==1.60.2",
    "requests==2.32.3",
    "sentry-sdk[fastapi, celery]==2.20.0",
 ]

 [project.optional-dependencies]
 dev = [
-    "ruff==0.9.2",
+    "ruff==0.9.3",
 ]

 [build-system]
Author	SHA1	Message	Date
Jacques ROUSSEL	2cd4a6efa8	✨(helm) add pdbs to deployments In order to avoid a service interruption during a Kubernetes (k8s) upgrade, we add a Pod Disruption Budget (PDB) to deployments.	2025-02-12 11:54:08 +01:00
lebaudantoine	b5037db685	🔒️(docker) patch libssl3 and libcrypto3 to address CVE-2024-12797 Added temporary root privileges to update OpenSSL libraries. Upgrades libssl3 and libcrypto3 to 3.3.3-r0 to fix HIGH severity vulnerability. Properly switches back to nginx user after updates. Maintains unprivileged execution while addressing security concern affecting RFC7250 Raw Public Keys authentication. Security: CVE-2024-12797	2025-02-12 11:52:40 +01:00
lebaudantoine	19804d2e3f	✨(frontend) add sound notification for unread messages Add togglable audio alerts when new chat messages arrive, allowing users to customize their notification preferences.	2025-02-12 11:52:40 +01:00
lebaudantoine	a979f05549	🐛(frontend) preserve notification preferences while merging new types When loading notification settings from localStorage, keep user preferences for existing notification types while adding new notification types with default values. If a notification type is removed, make sure to get rid of it. My initial implementation wasn't future proof.	2025-02-12 11:52:40 +01:00
lebaudantoine	09a0496d25	♻️(frontend) standardize toast notification durations Introduce ToastDuration enum to replace magic numbers for notification timeouts. Added semantic duration constants for different notification types (alerts, messages, join/leave events). Improves maintainability and consistency across toast implementations.	2025-02-12 11:52:40 +01:00
lebaudantoine	da95e804a0	✨(frontend) add toast notifications for unread chat messages Users frequently miss chat messages due to discrete visual indicators. Implemented toast notifications showing sender name and message preview to improve visibility. Added message tracking and auto-dismiss when chat panel opens. Remove the warning in handleDataReceived function, it was triggered by chat message events.	2025-02-12 11:52:40 +01:00
lebaudantoine	591a3a5d8b	✨(frontend) notify user when her was muted Add notification system to handle user mute events. Implement extensible design to support future notification types. Set notification duration to 3s.	2025-02-12 11:52:40 +01:00
lebaudantoine	30ed0da416	✨(frontend) introduce a new notification type This notification alert the user when her was muted by another one. Simple copywritting.	2025-02-12 11:52:40 +01:00
lebaudantoine	bd4fcc2a5e	✨(frontend) notify participant when her was muted Make sure a participant is notified when another one muted her. It will help display a notification to alert the participant.	2025-02-12 11:52:40 +01:00
lebaudantoine	fc36ae8b49	🐛(frontend) fix useRoomData when a participant's name has changed The participant's name in the query key prevented proper cache invalidation when renamed. Since name changes don't affect query data, removed this dependency.	2025-02-12 11:52:40 +01:00
lebaudantoine	87baca247b	🚨(frontend) fix warning component from uncontrolled to controlled When the hand has never been raised yet, the value is undefined and not false, which leads to a react aria warning. It's a bad practice. Fix it.	2025-02-12 11:52:40 +01:00
lebaudantoine	42d3846660	✏️(frontend) fix minor typo Typo identified by Celine. No "e" in french.	2025-02-11 12:04:17 +01:00
lebaudantoine	2d393f9f70	✨(frontend) add controls for full screen screenshare Requested by several users. Inspired by Jitsi. Yet imperfect implementation. Controls on video element of a screenshare should be disabled.	2025-02-11 12:01:23 +01:00
lebaudantoine	b4b4ff79d9	♻️(frontend) refactor full screen to allow video args useFullScreen hook is now generic, it allows passing a specific video element to zoom in. Needed to zoom a specific video track.	2025-02-11 12:01:23 +01:00
lebaudantoine	861244ce01	💄(frontend) update cursor on disabled button When a button is disabled, it's misleading to show a pointer. Update it to the default pointer.	2025-02-11 12:01:23 +01:00
lebaudantoine	6373593de3	🚸(frontend) offer additionnal controls on participant tile On hover, based on participant's type (remove/local) offer an appropriate action. Either applying effects on the local participant video or muting the remote participant. This is a huge enhancement in term of UX, nobody was finding these two controls in the current menus, and though the features were not implemented.	2025-02-11 12:01:23 +01:00
lebaudantoine	03f6e6519b	🩹(frontend) remove warning on modal without heading The MuteAlertDialog was triggering accessibility warnings, lacking a proper heading. Fix it.	2025-02-11 12:01:23 +01:00
lebaudantoine	716d40dd4e	🎨(frontend) avoid duplicating prefix in i18n's key Simple enhancement. Avoid duplicating prefix.	2025-02-11 12:01:23 +01:00
lebaudantoine	17f8ec6319	🚸(frontend) refactor participant tile while being hovered Inspired by GMeet. Make central actions available on a participant tile when a user hover it. This new interactive zone will be extended with more actions and controls.	2025-02-11 12:01:23 +01:00
lebaudantoine	0b74cf96f2	♻️(frontend) extract MuteAlertDialog in a dedicated component Will be reused in actions displayed when a participant tile is focused.	2025-02-11 12:01:23 +01:00
Jacques ROUSSEL	723b8718f9	🔐(helm) bump chart version Bump chart version to publish a new one with evolution	2025-02-05 22:20:49 +01:00
Nathan Vasse	07a44dab36	✨(front) turn on camera when using effects We want to automatically turn on the camera if its off when enabling a new effect.	2025-02-05 11:57:00 +01:00
Nathan Vasse	e47b027bbc	✨(front) add loading state on effects component useSyncAfterDelay allows to enable loading indicators only if the loading takes more than a specific time. It prevent blinking effect when the loading time is nearly instant.	2025-02-05 11:57:00 +01:00
Nathan Vasse	d7a4f3946c	✨(front) add Loader component This component will be used for various purpose.	2025-02-05 11:57:00 +01:00
Jacques ROUSSEL	1b7523bbf1	💚(github) fix argocd notification Use the right variable for webhook url	2025-02-05 11:53:56 +01:00
Jacques ROUSSEL	4326df4b6a	💚(github) fix argocd notification Fix double simple quote issue on argocd notification job	2025-02-05 11:48:38 +01:00
Jacques ROUSSEL	564d31ab49	💚(github) remove secret fetch The secrets are not managed in the folder anymore.	2025-02-05 11:41:37 +01:00
lebaudantoine	6e0948c696	🩹(frontend) prevent support toggle when Crisp chat is blocked Some users have ad-blockers or privacy extensions that prevent the Crisp chat widget script from loading properly. This was causing the support toggle to still display in rooms, but clicking it had no effect since Crisp was blocked. This ensures users don't see an inactive support button when their browser is blocking Crisp functionality.	2025-01-31 17:01:57 +01:00
Nathan Vasse	eff0cb4afb	✨(front) implement new ui of EffectsConfiguration This new ui implement the new sketches and also enables the usage of virtual background in a nice way.	2025-01-31 16:52:44 +01:00
Nathan Vasse	08c5245b48	✨(front) handle virtual background in custom processor BackgroundBlurCustomProcessor is renamed to BackgroundCustomProcessor in order to reflect the fact that is now handles virtual backgrounds too. BackgroundBlurFactory is also renamed to BackgroundProcessorFactory. The processor serialization handling has also been updated in order to support various options, also if persisted in local storage.	2025-01-31 16:52:44 +01:00
Nathan Vasse	465bf293f0	✨(front) add BackgroundVirtualTrackProcessorJsWrapper This is a wrapper around track-processor-js virtual background processor. This is needed in order to be used in a generic way in our code between firefox processors.	2025-01-31 16:52:44 +01:00
lebaudantoine	db51ca1aa5	🩹(frontend) fix border radius issue on safari I introduced a bug while moving the border radius css style to the parent element of the video. On safari, the video element wasn't rounded anymore. Fix this! Please note our approach should be refactored, nit-picking, but there are few pixels leaking from the black background on the video corner.	2025-01-31 14:54:26 +01:00
lebaudantoine	6935001aab	🚸(frontend) disable few native html video option Disable Picture-In-Picture option for browsers that support it, to avoid having the option appearing on the video element. It's not appropriate. Actually, I am not sure we should disable remote playback ones, feel free to challenge it.	2025-01-31 14:54:26 +01:00
lebaudantoine	bbc2b1d9f6	🚸(frontend) avoid displaying the effects option when not optimal On unsupported browser showing this option whitout offering the blur effects to the user would be quite frustrating. At the moment, safari user cannot blur their background. Also, avoid offering the option on mobile which are really cpu-constrained devices.	2025-01-31 14:54:26 +01:00
lebaudantoine	12e2149b9e	♻️(frontend) extract effects-related logic in a component Wraps all logics related to the effects on prejoin screen in a dedicated component.	2025-01-31 14:54:26 +01:00
lebaudantoine	3bd9363879	🔍️(frontend) add link to the source code in the footer Great idea suggested by @fflorent — totally worth it!	2025-01-31 14:30:52 +01:00
lebaudantoine	b48135c3b6	🚸(frontend) replace effects icons in menu option Align effects icon with the one from the newly refactored pre-join screen. This new icon is stylish.	2025-01-31 14:21:48 +01:00
Nathan Vasse	206e74c645	✨(front) add blurring feature on join This adds a button that opens a modal that allow user to enable video effects on join screen.	2025-01-31 11:42:28 +01:00
Nathan Vasse	9ebfc8ea29	♻️(front) refactor Effects We need to have an agnostic component to apply effects on any video track, enters EffectsConfiguration. It takes in input the video track and outputs the processor applied. This is gonna be used in order to use the same component on the pre join screen and the in room customization side panel.	2025-01-31 11:42:28 +01:00
Nathan Vasse	03796fcbb2	✨(front) add button white variant This variant is gonna be used on overlay over a video element.	2025-01-31 11:42:28 +01:00
Nathan Vasse	4b6bd3d1c8	♻️(front) enable custom size on Dialog We want to have a Dialog that is constrained in width. Thus, introducing this variant enables this possibility and many more in the future.	2025-01-31 11:42:28 +01:00
Nathan Vasse	d45880ab5c	♻️(front) add clone method to processors We need to make new processor instance between pre join and room in order to apply effects.	2025-01-31 11:42:28 +01:00
lebaudantoine	4ae3d965f9	🚸(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.	2025-01-29 16:12:47 +01:00
lebaudantoine	8eab45b6d5	🩹(frontend) prevent runtime error when Crisp is not initialized Prevents runtime error when Crisp chat hasn't initialized before component mount Previously caused crash since we assumed $crisp global was always available.	2025-01-29 16:12:47 +01:00
lebaudantoine	4347d87f33	🚸(frontend) improve prejoin UX - Always enable camera/mic by default (like Google Meet) - Fix video state transitions and add visual feedback - Simplify form using React Aria components - Reduce shadow intensity for better visual balance	2025-01-29 14:14:11 +01:00
lebaudantoine	1b52d76168	♻️(frontend) extract menu items into individual components Each menu item is now a standalone component, improving: - Code organization & reusability - Maintainability by reducing OptionsMenuItems complexity This breaks down large components.	2025-01-27 23:02:31 +01:00
lebaudantoine	a44b6e8e34	✨(frontend) add fullscreen mode on desktop Added an option allowing users to trigger the fullscreen mode while on desktop. Heavily inspired by the PR #279 from @sylvinus. Yet, this option allow user to enable/disable the fullscreen mode on the whole ui, in the next iteration I'll add the same feature but for a given video track. This is on purpose that the feature is available on desktop only. The hook code has been partially written by Claude and inspired by @sylvinus first suggestion.	2025-01-27 23:02:31 +01:00
lebaudantoine	126de638cd	🩹(frontend) fix allowed hosts by Vite using the Tilt stack When using nip.io for local development DNS mapping (which allows hostname-based access to localhost), we need to explicitly allow these domains in Vite's server configuration to prevent host security violations. This check should be ignored when using https.	2025-01-27 22:57:51 +01:00
lebaudantoine	bf28c5cb84	📱(frontend) enhance control bar responsiveness for better UX Implemented collapsible advanced options to maintain usability on narrow screens following GMeet's UX pattern. Dialog and popover components were chosen based on GMeet choices, though this introduces potential accessibility concerns that should be addressed in future iterations. Current implementation uses JS for breakpoint handling due to challenges with Panda CSS's pure CSS approach. This workaround was necessary to resolve a persistent issue where the popover remained open after window expansion beyond 750px, even after the lateral menu trigger was removed from view. Technical debt note: Code needs refinement, particularly around breakpoint management and component architecture. Prioritized shipping over perfection to meet immediate responsive design needs.	2025-01-27 22:57:24 +01:00
renovate[bot]	4f0e7d2c52	⬆️(dependencies) update python dependencies	2025-01-27 22:18:32 +01:00
renovate[bot]	3ab5c48296	⬆️(dependencies) update js dependencies	2025-01-27 18:12:44 +01:00
Nathan Vasse	7f1f573af8	✨(front) revamp join screen We want this screen to have a better ux, the join button was invisible on some small screen sizes, also we want to align the style of this screen with the ui of the video conference previously made.	2025-01-27 15:31:19 +01:00
Nathan Vasse	d48a18b36b	✨(front) make ToggleDevice work outside of a room This component is needed on the join screen thus out of a room context.	2025-01-27 15:31:19 +01:00
Nathan Vasse	eac9158734	✨(front) add customization to Field We want to be able to provide some custom attributes to the FieldWrapper and its label too to manage width, alignment.	2025-01-27 15:31:19 +01:00
Nathan Vasse	994f335266	✨(front) add customization to SelectToggleDevice We want to be able to change the variant of this component.	2025-01-27 15:31:19 +01:00
lebaudantoine	30bde2fe66	♻️(frontend) use pandas utilities Forgot how panda css is amazing. They provide all kinds of utilities, and few for accessibility. Amazing!	2025-01-24 13:56:32 +01:00