🔧(ci) fix argocd notification

Argocd deployment use numerique-gouv/lasuite-deploiement as source so the webhook need to tell argocd to refresh apps that use this repos
🩹(frontend) fix visual regression on Ratings buttons
2025-02-21 11:06:59 +01:00 · 2025-02-20 19:00:46 +01:00 · 2025-02-20 10:31:55 +01:00 · 2025-02-19 22:47:49 +01:00 · 2025-02-19 22:47:03 +01:00 · 2025-02-19 22:47:03 +01:00
170 changed files with 39275 additions and 597 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,39 +111,20 @@ jobs:
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}

-
  notify-argocd:
    needs:
      - build-and-push-frontend
      - build-and-push-backend
      - build-and-push-summary
    runs-on: ubuntu-latest
-    if: |
-      github.event_name != 'pull_request'
+    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
+          data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/numerique-gouv/lasuite-deploiement"}}'
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac "${{ secrets.ARGOCD_PREPROD_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 }}
@@ -175,25 +175,56 @@ jobs:
      - name: Check format
        run: cd src/frontend/ && npm run check

+  lint-sdk:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: src/sdk/library
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check linting
+        run: npm run lint
+
+      - name: Check format
+        run: npm run check
+
+  build-sdk:
+    runs-on: ubuntu-latest
+    needs: lint-sdk
+    defaults:
+      run:
+        working-directory: src/sdk/library
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build SDK
+        run: npm run build
+
  i18n-crowdin:
    runs-on: ubuntu-latest
    steps:
-      -
-        uses: actions/create-github-app-token@v1
+      - 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: "infrastructure,secrets"
-      -
-        name: Checkout repository
+      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
+      - name: Load sops secrets
        uses: rouja/actions-sops@main
        with:
          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
@@ -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.
@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name = "meet"
-version = "0.1.12"
+version = "0.1.13"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
    "Development Status :: 5 - Production/Stable",
@@ -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}
@@ -1,14 +1,14 @@
 {
  "name": "meet",
-  "version": "0.1.12",
+  "version": "0.1.13",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "meet",
-      "version": "0.1.12",
+      "version": "0.1.13",
      "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",
@@ -1,7 +1,7 @@
 {
  "name": "meet",
  "private": true,
-  "version": "0.1.12",
+  "version": "0.1.13",
  "type": "module",
  "scripts": {
    "dev": "panda codegen && vite",
@@ -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.
@@ -13,24 +13,41 @@ import { routes } from './routes'
 import './i18n/init'
 import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
+import { SdkCreateButton } from './features/sdk/routes/CreateButton'

 function App() {
  const { i18n } = useTranslation()
  useLang(i18n.language)
  return (
    <QueryClientProvider client={queryClient}>
-      <AppInitialization />
      <Suspense fallback={null}>
        <I18nProvider locale={i18n.language}>
-          <Layout>
-            <Switch>
-              {Object.entries(routes).map(([, route], i) => (
-                <Route key={i} path={route.path} component={route.Component} />
-              ))}
-              <Route component={NotFoundScreen} />
-            </Switch>
-          </Layout>
-          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
+          <Switch>
+            <Route path="/sdk" nest>
+              <Route path="/create-button">
+                <SdkCreateButton />
+              </Route>
+            </Route>
+            {/* We only want support and ReactQueryDevTools in non /sdk routes */}
+            <Route path="*">
+              <AppInitialization />
+              <Layout>
+                {Object.entries(routes).map(([, route], i) => (
+                  <Route
+                    key={i}
+                    path={route.path}
+                    component={route.Component}
+                  />
+                ))}
+              </Layout>
+              <ReactQueryDevtools
+                initialIsOpen={false}
+                buttonPosition="top-left"
+              />
+            </Route>
+
+            <Route component={NotFoundScreen} />
+          </Switch>
        </I18nProvider>
      </Suspense>
    </QueryClientProvider>
@@ -0,0 +1,24 @@
+export const VisioIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.841702 8.95427C0.75 9.42479 0.75 10.0042 0.75 10.9748V13.3096C0.75 14.5138 0.75 15.1159 0.925134 15.6549C1.08009 16.1319 1.33356 16.5709 1.6691 16.9435C2.04833 17.3647 2.56977 17.6658 3.61264 18.2679L5.6346 19.4353C6.55753 19.9681 7.07208 20.2652 7.56247 20.4081V13.2043C7.56247 12.8442 7.36578 12.5129 7.04965 12.3404L0.841702 8.95427Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.747 10.0123V13.7685C17.747 14.2878 17.9727 14.7815 18.3654 15.1214L21.0688 17.4609C21.227 17.5947 21.3912 17.7042 21.5616 17.7894C21.738 17.8685 21.9084 17.9081 22.0726 17.9081C22.4255 17.9081 22.7084 17.7925 22.9213 17.5613C23.1404 17.324 23.2499 17.0168 23.2499 16.6396V7.14866C23.2499 6.77146 23.1404 6.46726 22.9213 6.23607C22.7084 5.9988 22.4255 5.88017 22.0726 5.88017C21.9084 5.88017 21.738 5.91971 21.5616 5.9988C21.3912 6.07789 21.227 6.1874 21.0688 6.32733L18.3675 8.65759C17.9735 8.99746 17.747 9.49201 17.747 10.0123Z"
+        fill="currentColor"
+      />
+      <path
+        d="M1.74517 7.61282C1.67 7.57182 1.59117 7.54405 1.51135 7.52872C1.56171 7.46443 1.61433 7.40178 1.66914 7.34091C2.04837 6.91973 2.56981 6.61868 3.61268 6.01657L5.63464 4.84919C6.67751 4.24708 7.19894 3.94603 7.7533 3.82819C8.2438 3.72394 8.75074 3.72394 9.24124 3.82819C9.7956 3.94603 10.317 4.24708 11.3599 4.84919L13.358 6.0028C13.366 6.00738 13.374 6.01197 13.3819 6.01658C14.4248 6.61868 14.9462 6.91973 15.3255 7.34091C15.661 7.71357 15.9145 8.15259 16.0694 8.62951C16.2446 9.16852 16.2446 9.77063 16.2446 10.9748V13.3096C16.2446 14.5138 16.2446 15.1159 16.0694 15.6549C15.9145 16.1319 15.661 16.5709 15.3255 16.9435C14.9462 17.3647 14.4248 17.6657 13.382 18.2678C13.373 18.273 13.364 18.2782 13.3551 18.2833L11.3599 19.4353C10.317 20.0374 9.7956 20.3384 9.24124 20.4562C9.21846 20.4611 9.19564 20.4657 9.17279 20.4701L9.17278 13.2043C9.17278 12.255 8.65422 11.3814 7.82079 10.9268L1.74517 7.61282Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
@@ -10,7 +10,13 @@ import { attemptSilentLogin, canAttemptSilentLogin } from '../utils/silentLogin'
 * Here our wrapper just returns false in that case, without triggering an error:
 * this is done to prevent unnecessary query retries with react query
 */
-export const fetchUser = (): Promise<ApiUser | false> => {
+export const fetchUser = (
+  opts: {
+    attemptSilent?: boolean
+  } = {
+    attemptSilent: true,
+  }
+): Promise<ApiUser | false> => {
  return new Promise((resolve, reject) => {
    fetchApi<ApiUser>('/users/me')
      .then(resolve)
@@ -19,7 +25,7 @@ export const fetchUser = (): Promise<ApiUser | false> => {
        if (error instanceof ApiError && error.statusCode === 401) {
          // make sure to not resolve the promise while trying to silent login
          // so that consumers of fetchUser don't think the work already ended
-          if (canAttemptSilentLogin()) {
+          if (opts.attemptSilent && canAttemptSilentLogin()) {
            attemptSilentLogin(300)
          } else {
            resolve(false)
@@ -11,10 +11,15 @@ import { initializeSupportSession } from '@/features/support/hooks/useSupport'
 *
 * `isLoggedIn` is undefined while query is loading and true/false when it's done
 */
-export const useUser = () => {
+export const useUser = (
+  opts: {
+    fetchUserOptions?: Parameters<typeof fetchUser>[0]
+  } = {}
+) => {
  const query = useQuery({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
    queryKey: [keys.user],
-    queryFn: fetchUser,
+    queryFn: () => fetchUser(opts.fetchUserOptions),
    staleTime: Infinity,
  })

@@ -9,15 +9,16 @@ 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'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'

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

 const Columns = ({ children }: { children?: ReactNode }) => {
  return (
@@ -156,6 +157,18 @@ export const Home = () => {
  const { mutateAsync: createRoom } = useCreateRoom()
  const [laterRoomId, setLaterRoomId] = useState<null | string>(null)

+  const { user } = useUser()
+
+  /**
+   * Used for SDK popup to close automatically.
+   */
+  useEffect(() => {
+    if (!user) {
+      return
+    }
+    SdkReverseClient.broadcastAuthentication()
+  }, [user])
+
  return (
    <UserAware>
      <Screen>
@@ -1,16 +1,69 @@
 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 { NotificationDuration } from './NotificationDuration'
 import { Div } from '@/primitives'
-import { isMobileBrowser } from '@livekit/components-core'
+import { ChatMessage, isMobileBrowser } from '@livekit/components-core'
 import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'

 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 +76,7 @@ export const MainNotificationToast = () => {
          type: NotificationType.ParticipantJoined,
        },
        {
-          timeout: 5000,
+          timeout: NotificationDuration.PARTICIPANT_JOINED,
        }
      )
    }
@@ -82,7 +135,7 @@ export const MainNotificationToast = () => {
            participant,
            type: NotificationType.HandRaised,
          },
-          { timeout: 5000 }
+          { timeout: NotificationDuration.HAND_RAISED }
        )
      }
    }
@@ -0,0 +1,14 @@
+export enum ToastDuration {
+  SHORT = 3000,
+  MEDIUM = 4000,
+  LONG = 5000,
+  EXTRA_LONG = 7000,
+}
+
+export const NotificationDuration = {
+  ALERT: ToastDuration.SHORT,
+  MESSAGE: ToastDuration.LONG,
+  PARTICIPANT_JOINED: ToastDuration.LONG,
+  HAND_RAISED: ToastDuration.LONG,
+  LOWER_HAND: ToastDuration.EXTRA_LONG,
+} as const
@@ -1,5 +1,7 @@
 export enum NotificationType {
  ParticipantJoined = 'participantJoined',
  HandRaised = 'handRaised',
-  // todo - implement message received notification
+  ParticipantMuted = 'participantMuted',
+  MessageReceived = 'messageReceived',
+  LowerHand = 'lowerHand',
 }
@@ -0,0 +1,45 @@
+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'
+import { Button } from '@/primitives'
+
+export function ToastLowerHand({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications', { keyPrefix: 'lowerHand' })
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const toast = props.toast
+
+  const handleDismiss = () => {
+    // Clear onClose handler to prevent lowering the hand when user dismisses
+    toast.onClose = undefined
+    state.close(toast.key)
+  }
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        <p>{t('auto')}</p>
+        <Button
+          size="sm"
+          variant="text"
+          style={{
+            color: '#60a5fa',
+            marginLeft: '0.5rem',
+          }}
+          onPress={() => handleDismiss()}
+        >
+          {t('dismiss')}
+        </Button>
+      </HStack>
+    </StyledToastContainer>
+  )
+}
@@ -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} centered={false} wrap={'pretty'} fullWidth>
+            {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>
+  )
+}
@@ -1,30 +1,52 @@
 import { AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
-import type { ToastState } from '@react-stately/toast'
+import type { QueuedToast, ToastState } from '@react-stately/toast'
 import { Toast } from './Toast'
 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'
+import { ToastLowerHand } from './ToastLowerHand'

 interface ToastRegionProps extends AriaToastRegionProps {
  state: ToastState<ToastData>
 }

+const renderToast = (
+  toast: QueuedToast<ToastData>,
+  state: ToastState<ToastData>
+) => {
+  switch (toast.content?.type) {
+    case NotificationType.ParticipantJoined:
+      return <ToastJoined key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.HandRaised:
+      return <ToastRaised key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.ParticipantMuted:
+      return <ToastMuted key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.MessageReceived:
+      return (
+        <ToastMessageReceived key={toast.key} toast={toast} state={state} />
+      )
+
+    case NotificationType.LowerHand:
+      return <ToastLowerHand key={toast.key} toast={toast} state={state} />
+
+    default:
+      return <Toast key={toast.key} toast={toast} state={state} />
+  }
+}
+
 export function ToastRegion({ state, ...props }: ToastRegionProps) {
  const ref = useRef(null)
  const { regionProps } = useToastRegion(props, state, ref)
  return (
    <div {...regionProps} ref={ref} className="toast-region">
-      {state.visibleToasts.map((toast) => {
-        if (toast.content?.type === NotificationType.ParticipantJoined) {
-          return <ToastJoined key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.HandRaised) {
-          return <ToastRaised key={toast.key} toast={toast} state={state} />
-        }
-        return <Toast key={toast.key} toast={toast} state={state} />
-      })}
+      {state.visibleToasts.map((toast) => renderToast(toast, state))}
    </div>
  )
 }
@@ -0,0 +1,28 @@
+import { toastQueue } from './components/ToastProvider'
+import { NotificationType } from './NotificationType'
+import { NotificationDuration } from './NotificationDuration'
+import { Participant } from 'livekit-client'
+
+export const showLowerHandToast = (
+  participant: Participant,
+  onClose: () => void
+) => {
+  toastQueue.add(
+    {
+      participant,
+      type: NotificationType.LowerHand,
+    },
+    {
+      timeout: NotificationDuration.LOWER_HAND,
+      onClose,
+    }
+  )
+}
+
+export const closeLowerHandToasts = () => {
+  toastQueue.visibleToasts.forEach((toast) => {
+    if (toast.content.type === NotificationType.LowerHand) {
+      toastQueue.close(toast.key)
+    }
+  })
+}
@@ -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>
  )
 }
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { styled, VStack } from '@/styled-system/jsx'
 import { usePostHog } from 'posthog-js/react'
 import { PostHog } from 'posthog-js'
+import { Button as RACButton } from 'react-aria-components'

 const Card = styled('div', {
  base: {
@@ -170,7 +171,7 @@ const RateQuality = ({
      <H lvl={3}>{t('question')}</H>
      <Bar>
        {[...Array(maxRating)].map((_, index) => (
-          <Button
+          <RACButton
            key={index}
            onPress={() => handleRatingClick(index + 1)}
            className={ratingButtonRecipe({
@@ -179,7 +180,7 @@ const RateQuality = ({
            })}
          >
            {index + 1}
-          </Button>
+          </RACButton>
        ))}
      </Bar>
      <div
@@ -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,121 @@
+import { css } from '@/styled-system/css'
+import { Button, Text } from '@/primitives'
+import { useMemo, useRef } from 'react'
+import { ScreenSharePreferenceStore } from '@/stores/ScreenSharePreferences'
+import { useSnapshot } from 'valtio'
+import { useLocalParticipant } from '@livekit/components-react'
+import { useSize } from '../hooks/useResizeObserver'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+
+export const FullScreenShareWarning = ({
+  trackReference,
+}: {
+  trackReference: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'fullScreenWarning' })
+
+  const warningContainerRef = useRef<HTMLDivElement>(null)
+  const { width: containerWidth } = useSize(warningContainerRef)
+  const { localParticipant } = useLocalParticipant()
+  const screenSharePreferences = useSnapshot(ScreenSharePreferenceStore)
+
+  const isFullScreenCapture = useMemo(() => {
+    const trackLabel =
+      trackReference.publication?.track?.mediaStreamTrack?.label
+    return trackLabel?.includes('screen')
+  }, [trackReference])
+
+  const shouldShowWarning =
+    screenSharePreferences.enabled && isFullScreenCapture
+
+  const handleStopScreenShare = async () => {
+    if (!localParticipant.isScreenShareEnabled) return
+    await localParticipant.setScreenShareEnabled(false, {}, {})
+  }
+
+  const handleDismissWarning = () => {
+    ScreenSharePreferenceStore.enabled = false
+  }
+
+  if (!shouldShowWarning) return null
+
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        zIndex: '1000',
+        height: '100%',
+        width: '100%',
+      })}
+      ref={warningContainerRef}
+    >
+      {(!containerWidth || containerWidth >= 300) && (
+        <div
+          className={css({
+            position: 'absolute',
+            zIndex: '1000',
+            height: '100%',
+            width: '100%',
+            backgroundColor: 'rgba(22, 22, 34, 0.9)',
+            padding: '2rem',
+          })}
+        >
+          <div
+            className={css({
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'column',
+              gap: '1rem',
+              md: {
+                flexDirection: 'row',
+              },
+            })}
+          >
+            <Text
+              style={{
+                color: 'white',
+                flexBasis: '55%',
+                fontWeight: '500',
+              }}
+              margin={false}
+              wrap={'pretty'}
+            >
+              {t('message')}
+            </Text>
+            <div
+              className={css({
+                display: 'flex',
+                flexDirection: 'row',
+                gap: '1rem',
+              })}
+            >
+              <Button
+                variant="tertiary"
+                size="sm"
+                style={{
+                  height: 'fit-content',
+                }}
+                onPress={async () => {
+                  await handleStopScreenShare()
+                }}
+              >
+                {t('stop')}
+              </Button>
+              <Button
+                variant="primaryTextDark"
+                size="sm"
+                style={{
+                  height: 'fit-content',
+                }}
+                onPress={() => handleDismissWarning()}
+              >
+                {t('ignore')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -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,13 @@ 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'
+import { FullScreenShareWarning } from './FullScreenShareWarning'

 export function TrackRefContextIfNeeded(
  props: React.PropsWithChildren<{
@@ -100,6 +101,7 @@ export const ParticipantTile: (
    <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
      <TrackRefContextIfNeeded trackRef={trackReference}>
        <ParticipantContextIfNeeded participant={trackReference.participant}>
+          <FullScreenShareWarning trackReference={trackReference} />
          {children ?? (
            <>
              {isTrackReference(trackReference) &&
@@ -173,7 +175,9 @@ export const ParticipantTile: (
              )}
            </>
          )}
-          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
+          {!disableMetadata && (
+            <ParticipantTileFocus trackRef={trackReference} />
+          )}
        </ParticipantContextIfNeeded>
      </TrackRefContextIfNeeded>
    </div>
@@ -0,0 +1,224 @@
+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, useRef, 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}
+      />
+    </>
+  )
+}
+
+const MOUSE_IDLE_TIME = 3000
+
+export const ParticipantTileFocus = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const [hovered, setHovered] = useState(false)
+  const [opacity, setOpacity] = useState(0)
+
+  const idleTimerRef = useRef<number | null>(null)
+  const [isIdleRef, setIsIdleRef] = useState(false)
+
+  useEffect(() => {
+    if (hovered && !isIdleRef) {
+      // Wait for next frame to ensure element is mounted
+      requestAnimationFrame(() => {
+        setOpacity(0.6)
+      })
+    } else {
+      setOpacity(0)
+    }
+  }, [hovered, isIdleRef])
+
+  const handleMouseMove = () => {
+    if (idleTimerRef.current) {
+      window.clearTimeout(idleTimerRef.current)
+    }
+    idleTimerRef.current = window.setTimeout(() => {
+      setIsIdleRef(true)
+    }, MOUSE_IDLE_TIME)
+    setIsIdleRef(false)
+  }
+
+  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)}
+      onMouseMove={handleMouseMove}
+    >
+      {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
  }
 }
@@ -4,6 +4,13 @@ import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useRoomContext } from '@livekit/components-react'
 import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { useEffect, useRef, useState } from 'react'
+import {
+  closeLowerHandToasts,
+  showLowerHandToast,
+} from '@/features/notifications/utils'
+
+const SPEAKING_DETECTION_DELAY = 3000

 export const HandToggle = () => {
  const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
@@ -13,6 +20,39 @@ export const HandToggle = () => {
    participant: room.localParticipant,
  })

+  const isSpeaking = room.localParticipant.isSpeaking
+  const speakingTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const [hasShownToast, setHasShownToast] = useState(false)
+
+  const resetToastState = () => {
+    setHasShownToast(false)
+  }
+
+  useEffect(() => {
+    if (isHandRaised) return
+    closeLowerHandToasts()
+  }, [isHandRaised])
+
+  useEffect(() => {
+    const shouldShowToast = isSpeaking && isHandRaised && !hasShownToast
+
+    if (shouldShowToast && !speakingTimerRef.current) {
+      speakingTimerRef.current = setTimeout(() => {
+        setHasShownToast(true)
+        const onClose = () => {
+          if (isHandRaised) toggleRaisedHand()
+          resetToastState()
+        }
+        showLowerHandToast(room.localParticipant, onClose)
+      }, SPEAKING_DETECTION_DELAY)
+    }
+    if ((!isSpeaking || !isHandRaised) && speakingTimerRef.current) {
+      clearTimeout(speakingTimerRef.current)
+      speakingTimerRef.current = null
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSpeaking, isHandRaised, hasShownToast, toggleRaisedHand])
+
  const tooltipLabel = isHandRaised ? 'lower' : 'raise'

  return (
@@ -28,7 +68,10 @@ export const HandToggle = () => {
        aria-label={t(tooltipLabel)}
        tooltip={t(tooltipLabel)}
        isSelected={isHandRaised}
-        onPress={() => toggleRaisedHand()}
+        onPress={() => {
+          toggleRaisedHand()
+          resetToastState()
+        }}
        data-attr={`controls-hand-${tooltipLabel}`}
      >
        <RiHand />
@@ -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()
@@ -0,0 +1,84 @@
+import { authUrl, useUser } from '../auth'
+
+export enum ClientMessageType {
+  ROOM_CREATED = 'ROOM_CREATED',
+}
+
+export class SdkReverseClient {
+  /**
+   * IDEA: Use API Key. Must be based on some sort of credentials? No needs for now as there are no security
+   * plausible at the moment.
+   */
+  static getAllowTargetOrigin() {
+    return '*'
+  }
+
+  static post(type: ClientMessageType, data: unknown = {}) {
+    window.parent.postMessage(
+      {
+        type,
+        data,
+      },
+      SdkReverseClient.getAllowTargetOrigin()
+    )
+  }
+
+  static broadcastAuthentication() {
+    const bc = new BroadcastChannel('APP_CHANNEL')
+    bc.postMessage({ type: 'AUTHENTICATED' })
+
+    /**
+     * This means the parent window has authenticated has successfully refetched user, then we can close the popup.
+     */
+    bc.onmessage = (event) => {
+      if (event.data.type === 'AUTHENTICATED_ACK') {
+        window.close()
+      }
+    }
+  }
+
+  static waitForAuthenticationAck() {
+    return new Promise<void>((resolve) => {
+      const bc = new BroadcastChannel('APP_CHANNEL')
+      bc.onmessage = async (event) => {
+        if (event.data.type === 'AUTHENTICATED') {
+          resolve()
+          bc.postMessage({ type: 'AUTHENTICATED_ACK' })
+        }
+      }
+    })
+  }
+}
+
+/**
+ * Returns a function to be awaited in order to make sure the user is logged in.
+ * If not logged-in it opens a popup with the connection flow, the promise returned is resolved
+ * once logged-in.
+ *
+ * To be used in SDK scope.
+ */
+export function useEnsureAuth() {
+  const { isLoggedIn, ...other } = useUser({
+    fetchUserOptions: { attemptSilent: false },
+  })
+
+  const startSSO = () => {
+    return new Promise<void>((resolve) => {
+      SdkReverseClient.waitForAuthenticationAck().then(async () => {
+        await other.refetch()
+        resolve()
+      })
+      const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
+  width=400,height=900,left=100,top=100`
+      window.open(new URL('authenticate/', authUrl()).href, '', params)
+    })
+  }
+
+  const ensureAuth = async () => {
+    if (!isLoggedIn) {
+      await startSSO()
+    }
+  }
+
+  return { ensureAuth }
+}
@@ -0,0 +1,103 @@
+import { Button } from '@/primitives/Button'
+import { useTranslation } from 'react-i18next'
+import { usePersistentUserChoices } from '@livekit/components-react'
+import { useState } from 'react'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { css } from '@/styled-system/css'
+import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
+import { VisioIcon } from '@/assets/VisioIcon'
+import { generateRoomId, useCreateRoom } from '../../rooms'
+import {
+  ClientMessageType,
+  SdkReverseClient,
+  useEnsureAuth,
+} from '../SdkReverseClient'
+
+export const SdkCreateButton = () => {
+  const { t } = useTranslation('sdk', { keyPrefix: 'createButton' })
+  const [roomUrl, setRoomUrl] = useState<string>()
+  const [isLoading, setIsLoading] = useState(false)
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
+  const { mutateAsync: createRoom } = useCreateRoom()
+  const { ensureAuth } = useEnsureAuth()
+
+  const submitCreateRoom = async () => {
+    setIsLoading(true)
+    const slug = generateRoomId()
+    const data = await createRoom({ slug, username })
+    const roomUrlTmp = getRouteUrl('room', data.slug)
+    setRoomUrl(roomUrlTmp)
+    setIsLoading(false)
+    SdkReverseClient.post(ClientMessageType.ROOM_CREATED, {
+      url: roomUrlTmp,
+    })
+  }
+
+  const submit = async () => {
+    await ensureAuth()
+    submitCreateRoom()
+  }
+
+  return (
+    <div
+      className={css({
+        paddingTop: '3px',
+        paddingLeft: '3px',
+      })}
+    >
+      {roomUrl ? (
+        <RoomUrl roomUrl={roomUrl} />
+      ) : (
+        <Button
+          variant="primaryDark"
+          aria-label={t('label')}
+          onPress={submit}
+          data-attr="sdk-create"
+          loading={isLoading}
+          icon={<VisioIcon />}
+        >
+          {t('label')}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+const RoomUrl = ({ roomUrl }: { roomUrl: string }) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copy = () => {
+    navigator.clipboard.writeText(roomUrl!)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 1000)
+  }
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+      })}
+    >
+      <span
+        className={css({
+          color: 'greyscale.600',
+        })}
+      >
+        {roomUrl}
+      </span>
+      <Button
+        variant={isCopied ? 'success' : 'quaternaryText'}
+        data-attr="sdk-create-copy"
+        onPress={copy}
+        square
+      >
+        {isCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+      </Button>
+    </div>
+  )
+}
@@ -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,11 @@
  "raised": {
    "description": "",
    "cta": ""
+  },
+  "muted": "",
+  "openChat": "",
+  "lowerHand": {
+    "auto": "",
+    "dismiss": ""
  }
 }
@@ -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,19 @@
  },
  "recording": {
    "label": ""
+  },
+  "participantTileFocus": {
+    "pin": {
+      "enable": "",
+      "disable": ""
+    },
+    "effects": "",
+    "muteParticipant": "",
+    "fullScreen": ""
+  },
+  "fullScreenWarning": {
+    "message": "",
+    "stop": "",
+    "ignore": ""
  }
 }
@@ -0,0 +1,5 @@
+{
+  "createButton": {
+    "label": ""
+  }
+}
@@ -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,11 @@
  "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",
+  "lowerHand": {
+    "auto": "It seems you have started speaking, so your hand will be lowered.",
+    "dismiss": "Keep hand raised"
  }
 }
@@ -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,19 @@
  },
  "recording": {
    "label": "Recording"
+  },
+  "participantTileFocus": {
+    "pin": {
+      "enable": "Pin",
+      "disable": "Unpin"
+    },
+    "effects": "Apply visual effects",
+    "muteParticipant": "Mute {{name}}",
+    "fullScreen": "Full screen"
+  },
+  "fullScreenWarning": {
+    "message": "To avoid infinite loop display, do not share your entire screen or browser window. Instead, share a tab or another window.",
+    "stop": "Stop presenting",
+    "ignore": "Ignore"
  }
 }
@@ -0,0 +1,5 @@
+{
+  "createButton": {
+    "label": "Create a Visio link"
+  }
+}
@@ -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,11 @@
  "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",
+  "lowerHand": {
+    "auto": "Il semblerait que vous ayez pris la parole, donc la main va être baissée.",
+    "dismiss": "Laisser la main levée"
  }
 }
@@ -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,19 @@
  },
  "recording": {
    "label": "Enregistrement"
+  },
+  "participantTileFocus": {
+    "pin": {
+      "enable": "Épingler",
+      "disable": "Annuler l'épinglage"
+    },
+    "effects": "Appliquer des effets",
+    "muteParticipant": "Couper le micro de {{name}}",
+    "fullScreen": "Plein écran"
+  },
+  "fullScreenWarning": {
+    "message": "Pour éviter l'affichage en boucle infinie, ne partagez pas l'intégralité de votre écran ni de votre fenêtre de navigateur. Partagez plutôt un onglet ou une autre fenêtre.",
+    "stop": "Arrêter la présentation",
+    "ignore": "Ignorer"
  }
 }
@@ -0,0 +1,5 @@
+{
+  "createButton": {
+    "label": "Créer un lien Visio"
+  }
+}
@@ -41,7 +41,7 @@
  },
  "settingsButtonLabel": "Paramètres",
  "tabs": {
-    "account": "Profile",
+    "account": "Profil",
    "audio": "Audio",
    "general": "Général",
    "notifications": "Notifications"
@@ -6,12 +6,15 @@ import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
 import { ReactNode } from 'react'
+import { Loader } from './Loader'

 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
  RACButtonsProps &
  TooltipWrapperProps & {
    // Use tooltip as description below the button.
    description?: boolean
+  } & {
+    icon?: ReactNode
  }

 export const Button = ({
@@ -20,13 +23,16 @@ export const Button = ({
  ...props
 }: ButtonProps) => {
  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+  const { className, ...remainingComponentProps } = componentProps

  return (
    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
      <RACButton
-        className={buttonRecipe(variantProps)}
-        {...(componentProps as RACButtonsProps)}
+        className={[buttonRecipe(variantProps), className].join(' ')}
+        {...(remainingComponentProps as RACButtonsProps)}
      >
+        {!props.loading && props.icon}
+        {props.loading && <Loader />}
        {componentProps.children as ReactNode}
        {props.description && <span>{tooltip}</span>}
      </RACButton>
@@ -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}>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jacques ROUSSEL	de1ca27b8b	🔧(ci) fix argocd notification Argocd deployment use numerique-gouv/lasuite-deploiement as source so the webhook need to tell argocd to refresh apps that use this repos	2025-02-21 11:06:59 +01:00
lebaudantoine	9fc5681137	🩹(frontend) fix visual regression on Ratings buttons Visual regression was introduced probably by a change on button style. As this button is quite different than the usual one, remove its inheritance from the primitive ones.	2025-02-20 19:00:46 +01:00
renovate[bot]	edf29076ba	⬆️(dependencies) update vite to v5.4.12 [SECURITY]	2025-02-20 10:31:55 +01:00
lebaudantoine	337181add8	🩹(frontend) fix text overflow in message notification Minor issue, layout overflow occurred when sharing url or long text.	2025-02-19 22:47:49 +01:00
lebaudantoine	5af64e539d	♻️(frontend) refactor toast selection to use a switch More extensible design. Still a poor piece of code. Technical debt here.	2025-02-19 22:47:03 +01:00
lebaudantoine	291544bd52	✨(frontend) lower hand autonomously for active speakers Users requested that their raised hands be lowered automatically if they become the active speaker. This change ensures a more natural experience during discussions, preventing user from forgetting to lower their hand while speaking.	2025-02-19 22:47:03 +01:00
lebaudantoine	13bb6acdf6	♻️(frontend) extract notification duration in a proper file As for notification's type, extract notification's duration in a dedicated file.	2025-02-19 22:47:03 +01:00
lebaudantoine	aa2783ae2e	🚸(frontend) auto-hide participant controls after 3s of inactivity Auto-hides participant tile controls after 3 seconds of cursor inactivity to reduce visual clutter. Controls reappear on cursor movement.	2025-02-19 22:37:48 +01:00
Nathan Vasse	c3e4ea0fd1	🔧(ci) add sdk to workflow Add basic jobs to handle the new sdk.	2025-02-18 16:16:07 +01:00
Nathan Vasse	183e8f6a72	✨(sdk) add sdk projects It includes a consumer project which is simply a demo app. The sdk project includes the first version of the SDK, with a light React implementation. The first version lays down the foundations of the iframe sdk framework. The npm package logic is also already ready to be published.	2025-02-18 16:16:07 +01:00
Nathan Vasse	452dbe8bba	✨(front) add sdk related routes and logic The create room button is a dedicated route. There is also a bit of logic implied in this commit, including the BroadcastChannel. The router has been updated with a /sdk negation in order to avoid including support and react query debug tool in the iframe.	2025-02-18 16:16:07 +01:00
Nathan Vasse	8818d12ee9	♻️(front) add option to disable silent login When displayed in an iframe, not being logged-in causes a redirection to the home page. Which is not what we want with the SDK integration. We just want to stay on the same page.	2025-02-18 16:16:07 +01:00
Nathan Vasse	fb0c9b766d	✨(front) add quaternary variant to Button This variant is needed to implement the sdk create room button.	2025-02-18 16:16:07 +01:00
Nathan Vasse	ba873196c7	✨(front) add loader and icon props to Button These shortcuts improve DX and will be used in the next commits.	2025-02-18 16:16:07 +01:00
Jacques ROUSSEL	48937bb7a3	♻️(helm) fix helm chart for keycloak stack Ingress stop working, so this commit fix it	2025-02-14 11:51:31 +01:00
lebaudantoine	6f09eb3602	🚸(frontend) add warning for full screen capture Following user feedback about infinite loops risks, add warning overlay when users attempt to share their entire screen. The warning explains the risk and suggests sharing a specific tab instead, providing options to stop sharing or dismiss the warning while respecting user preferences for future sessions.	2025-02-13 16:30:22 +01:00
lebaudantoine	b7fb6b1b69	🔖(patch) bump release to 0.1.13	2025-02-12 12:35:55 +01:00
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