wip invalidate cache when room is finished

wip fix errors related to re-rendering and web workers
wip encrypt and encode passphrase while storing it in cache
2025-01-06 19:37:46 +01:00 · 2025-01-05 01:13:17 +01:00 · 2025-01-04 23:58:49 +01:00 · 2025-01-04 23:11:45 +01:00 · 2025-01-04 23:11:22 +01:00 · 2025-01-04 14:12:45 +01:00
128 changed files with 3395 additions and 7627 deletions
@@ -0,0 +1,22 @@
+name: Helmfile lint
+run-name: Helmfile lint
+
+on:
+  pull_request:
+    branches:
+      - 'main'
+
+jobs:
+  helmfile-lint:
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/helmfile/helmfile:latest
+    steps:
+      -
+        uses: numerique-gouv/action-helmfile-lint@main
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          age-key: ${{ secrets.SOPS_PRIVATE }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          helmfile-src: "src/helm"
+          repositories: "meet,secrets"
@@ -1,35 +0,0 @@
-name: Release Chart
-run-name: Release Chart
-
-on:
-  push:
-    branches:
-      - 'main'
-    paths:
-      - ./src/helm/meet/**
-
-jobs:
-  release:
-    permissions:
-      contents: write
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Cleanup
-        run: rm -rf ./src/helm/extra
-
-      - name: Install Helm
-        uses: azure/setup-helm@v4
-        env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
-
-      - name: Publish Helm charts
-        uses: numerique-gouv/helm-gh-pages@add-overwrite-option
-        with:
-          charts_dir: ./src/helm
-          linting: on
-          token: ${{ secrets.GITHUB_TOKEN }}
@@ -301,10 +301,6 @@ build-k8s-cluster: ## build the kubernetes cluster using kind
 	./bin/start-kind.sh
 .PHONY: build-k8s-cluster

-install-external-secrets: ## install the kubernetes secrets from Vaultwarden
-	./bin/install-external-secrets.sh
-.PHONY: build-k8s-cluster
-
 start-tilt: ## start the kubernetes cluster using kind
 	tilt up -f ./bin/Tiltfile
 .PHONY: build-k8s-cluster
@@ -1,90 +0,0 @@
-#!/usr/bin/env bash
-set -o errexit
-
-CURRENT_DIR=$(pwd)
-NAMESPACE=${1:-meet}
-SECRET_NAME=${2:-bitwarden-cli-meet}
-TEMP_SECRET_FILE=$(mktemp)
-
-
-cleanup() {
-    rm -f "${TEMP_SECRET_FILE}"
-}
-trap cleanup EXIT
-
-
-# Check if kubectl is available
-check_prerequisites() {
-    if ! command -v kubectl &> /dev/null; then
-        echo "Error: kubectl is not installed or not in PATH"
-        exit 1
-    fi
-}
-
-# Check if secret already exists
-check_secret_exists() {
-    kubectl -n "${NAMESPACE}" get secrets "${SECRET_NAME}" &> /dev/null
-}
-
-
-# Collect user input securely
-get_user_input() {
-    echo "Please provide the following information:"
-    read -p "Enter your Vaultwarden email login: " LOGIN
-    read -s -p "Enter your Vaultwarden password: " PASSWORD
-    echo
-    read -p "Enter your Vaultwarden server url: " URL
-}
-
-# Create and apply the secret
-create_secret() {
-    cat > "${TEMP_SECRET_FILE}" << EOF
-apiVersion: v1
-kind: Secret
-metadata:
-  name: ${SECRET_NAME}
-  namespace: ${NAMESPACE}
-type: Opaque
-stringData:
-  BW_HOST: ${URL}
-  BW_PASSWORD: ${PASSWORD}
-  BW_USERNAME: ${LOGIN}
-EOF
-
-    kubectl -n "${NAMESPACE}" apply -f "${TEMP_SECRET_FILE}"
-}
-
-# Install external-secrets using Helm
-install_external_secrets() {
-    if ! kubectl get ns external-secrets &>/dev/null; then
-        echo "Installing external-secrets…"
-        helm repo add external-secrets https://charts.external-secrets.io
-        helm upgrade --install external-secrets \
-            external-secrets/external-secrets \
-            -n external-secrets \
-            --create-namespace \
-            --set installCRDs=true
-    else
-        echo "External secrets already deployed"
-    fi
-}
-
-main() {
-    check_prerequisites
-
-    if check_secret_exists; then
-        echo "Secret '${SECRET_NAME}' already present in namespace '${NAMESPACE}'"
-        exit 0
-    fi
-
-    echo -e ${TEMP_SECRET_FILE}
-
-    get_user_input
-    echo -e "\nCreating Vaultwarden secret…"
-    create_secret
-    install_external_secrets
-
-    echo "Secret installation completed successfully"
-}
-
-main "$@"
@@ -1,4 +1,4 @@
-#!/usr/bin/env bash
+#!/bin/bash

 mkdir -p "$(dirname -- "${BASH_SOURCE[0]}")/../.git/hooks/"
 PRE_COMMIT_FILE="$(dirname -- "${BASH_SOURCE[0]}")/../.git/hooks/pre-commit"
@@ -1,3 +1,139 @@
-#!/usr/bin/env bash
+#!/bin/sh
+set -o errexit

-curl https://raw.githubusercontent.com/numerique-gouv/tools/refs/heads/main/kind/create_cluster.sh | bash -s -- meet
+CURRENT_DIR=$(pwd)
+
+echo "0. Create ca"
+# 0. Create ca
+mkcert -install
+cd /tmp
+mkcert "127.0.0.1.nip.io" "*.127.0.0.1.nip.io"
+cd $CURRENT_DIR
+
+echo "1. Create registry container unless it already exists"
+# 1. Create registry container unless it already exists
+reg_name='kind-registry'
+reg_port='5001'
+if [ "$(docker inspect -f '{{.State.Running}}' "${reg_name}" 2>/dev/null || true)" != 'true' ]; then
+	docker run \
+		-d --restart=always -p "127.0.0.1:${reg_port}:5000" --network bridge --name "${reg_name}" \
+		registry:2
+fi
+
+echo "2. Create kind cluster with containerd registry config dir enabled"
+# 2. Create kind cluster with containerd registry config dir enabled
+# TODO: kind will eventually enable this by default and this patch will
+# be unnecessary.
+#
+# See:
+# https://github.com/kubernetes-sigs/kind/issues/2875
+# https://github.com/containerd/containerd/blob/main/docs/cri/config.md#registry-configuration
+# See: https://github.com/containerd/containerd/blob/main/docs/hosts.md
+cat <<EOF | kind create cluster --name visio --config=-
+kind: Cluster
+apiVersion: kind.x-k8s.io/v1alpha4
+containerdConfigPatches:
+- |-
+  [plugins."io.containerd.grpc.v1.cri".registry]
+    config_path = "/etc/containerd/certs.d"
+nodes:
+- role: control-plane
+  image: kindest/node:v1.27.3
+  kubeadmConfigPatches:
+  - |
+    kind: InitConfiguration
+    nodeRegistration:
+      kubeletExtraArgs:
+        node-labels: "ingress-ready=true"
+  extraPortMappings:
+  - containerPort: 80
+    hostPort: 80
+    protocol: TCP
+  - containerPort: 443
+    hostPort: 443
+    protocol: TCP
+EOF
+
+echo "3. Add the registry config to the nodes"
+# 3. Add the registry config to the nodes
+#
+# This is necessary because localhost resolves to loopback addresses that are
+# network-namespace local.
+# In other words: localhost in the container is not localhost on the host.
+#
+# We want a consistent name that works from both ends, so we tell containerd to
+# alias localhost:${reg_port} to the registry container when pulling images
+REGISTRY_DIR="/etc/containerd/certs.d/localhost:${reg_port}"
+for node in $(kind get nodes --name visio); do
+	docker exec "${node}" mkdir -p "${REGISTRY_DIR}"
+	cat <<EOF | docker exec -i "${node}" cp /dev/stdin "${REGISTRY_DIR}/hosts.toml"
+[host."http://${reg_name}:5000"]
+EOF
+done
+
+echo "4. Connect the registry to the cluster network if not already connected"
+# 4. Connect the registry to the cluster network if not already connected
+# This allows kind to bootstrap the network but ensures they're on the same network
+if [ "$(docker inspect -f='{{json .NetworkSettings.Networks.kind}}' "${reg_name}")" = 'null' ]; then
+	docker network connect "kind" "${reg_name}"
+fi
+
+echo "5. Document the local registry"
+# 5. Document the local registry
+# https://github.com/kubernetes/enhancements/tree/master/keps/sig-cluster-lifecycle/generic/1755-communicating-a-local-registry
+cat <<EOF | kubectl apply -f -
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: local-registry-hosting
+  namespace: kube-public
+data:
+  localRegistryHosting.v1: |
+    host: "localhost:${reg_port}"
+    help: "https://kind.sigs.k8s.io/docs/user/local-registry/"
+EOF
+
+cat <<EOF | kubectl apply -f -
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: coredns
+  namespace: kube-system
+data:
+  Corefile: |
+    .:53 {
+        errors
+        health {
+          lameduck 5s
+        }
+        ready
+        kubernetes cluster.local in-addr.arpa ip6.arpa {
+          pods insecure
+          fallthrough in-addr.arpa ip6.arpa
+          ttl 30
+        }
+        prometheus :9153
+        forward . /etc/resolv.conf {
+          max_concurrent 1000
+        }
+        rewrite stop {
+          name regex (.*).127.0.0.1.nip.io ingress-nginx-controller.ingress-nginx.svc.cluster.local answer auto
+        }
+        cache 30
+        loop
+        reload
+        loadbalance
+    }
+EOF
+
+kubectl -n kube-system rollout restart deployments/coredns
+
+echo "6. Install ingress-nginx"
+kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml
+kubectl -n ingress-nginx create secret tls mkcert --key /tmp/127.0.0.1.nip.io+1-key.pem --cert /tmp/127.0.0.1.nip.io+1.pem
+kubectl -n ingress-nginx patch deployments.apps ingress-nginx-controller --type 'json' -p '[{"op": "add", "path": "/spec/template/spec/containers/0/args/-", "value":"--default-ssl-certificate=ingress-nginx/mkcert"}]'
+
+echo "7. Setup namespace"
+kubectl create ns meet
+kubectl config set-context --current --namespace=meet
+kubectl -n meet create secret generic mkcert --from-file=rootCA.pem="$(mkcert -CAROOT)/rootCA.pem"
@@ -1,4 +1,4 @@
-#!/usr/bin/env bash
+#!/bin/bash

 git submodule update --init --recursive
 git submodule foreach 'git fetch origin; git checkout $(git rev-parse --abbrev-ref HEAD); git reset --hard origin/$(git rev-parse --abbrev-ref HEAD); git submodule update --recursive; git clean -dfx'
@@ -1,3 +1,3 @@
-#!/usr/bin/env bash
+#!/bin/bash

 find . -name "*.enc.*" -exec sops updatekeys -y {} \;
@@ -1,4 +1,4 @@
-#!/usr/bin/env bash
+#!/bin/bash

 set -e

@@ -1,40 +0,0 @@
-replicaCount: 1
-terminationGracePeriodSeconds: 18000
-
-livekit:
-  keys:
-      devkey: secret
-  log_level: debug
-  rtc:
-    use_external_ip: false
-    port_range_start: 50000
-    port_range_end: 60000
-    tcp_port: 7881
-  redis:
-    address: redis-master:6379
-    password: pass
-  turn:
-    enabled: true
-    udp_port: 443
-    domain: livekit.127.0.0.1.nip.io
-    loadBalancerAnnotations: {}
-
-
-loadBalancer:
-  type: nginx
-  annotations:
-    nginx.ingress.kubernetes.io/rewrite-target: /
-    nginx.ingress.kubernetes.io/ssl-redirect: "true"
-  tls:
-    - hosts:
-        - livekit.127.0.0.1.nip.io
-      secretName: livekit-dinum-cert
-
-autoscaling:
-  enabled: false
-  minReplicas: 1
-  maxReplicas: 5
-  targetCPUUtilizationPercentage: 60
-
-nodeSelector: {}
-resources: {}
@@ -1,120 +0,0 @@
-image:
-  repository: lasuite/meet-backend
-  pullPolicy: Always
-  tag: "latest"
-
-backend:
-  replicas: 1
-  envVars:
-    DJANGO_CSRF_TRUSTED_ORIGINS: https://meet.127.0.0.1.nip.io,http://meet.127.0.0.1.nip.io
-    DJANGO_CONFIGURATION: Production
-    DJANGO_ALLOWED_HOSTS: meet.127.0.0.1.nip.io
-    DJANGO_SECRET_KEY: ThisCouldBeAReallyGoodOrPerhapsABadKeyToUseSometimes
-    DJANGO_SETTINGS_MODULE: meet.settings
-    DJANGO_SILENCED_SYSTEM_CHECKS: security.W004, security.W008
-    DJANGO_SUPERUSER_PASSWORD: admin
-    DJANGO_EMAIL_HOST: "mailcatcher"
-    DJANGO_EMAIL_PORT: 1025
-    DJANGO_EMAIL_USE_SSL: False
-    OIDC_OP_JWKS_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/certs
-    OIDC_OP_AUTHORIZATION_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/auth
-    OIDC_OP_TOKEN_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/token
-    OIDC_OP_USER_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/userinfo
-    OIDC_OP_LOGOUT_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/session/end
-    OIDC_RP_CLIENT_ID: meet
-    OIDC_RP_CLIENT_SECRET: ThisIsAnExampleKeyForDevPurposeOnly
-    OIDC_RP_SIGN_ALGO: RS256
-    OIDC_RP_SCOPES: "openid email"
-    OIDC_REDIRECT_ALLOWED_HOSTS: https://meet.127.0.0.1.nip.io
-    OIDC_AUTH_REQUEST_EXTRA_PARAMS: "{'acr_values': 'eidas1'}"
-    LOGIN_REDIRECT_URL: https://meet.127.0.0.1.nip.io
-    LOGIN_REDIRECT_URL_FAILURE: https://meet.127.0.0.1.nip.io
-    LOGOUT_REDIRECT_URL: https://meet.127.0.0.1.nip.io
-    DB_HOST: postgresql
-    DB_NAME: meet
-    DB_USER: dinum
-    DB_PASSWORD: pass
-    DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
-    REDIS_URL: redis://default:pass@redis-master:6379/1
-    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
-    LIVEKIT_API_SECRET: secret
-    LIVEKIT_API_KEY: devkey
-    LIVEKIT_API_URL: https://livekit.127.0.0.1.nip.io/
-    ALLOW_UNREGISTERED_ROOMS: False
-    FRONTEND_SILENCE_LIVEKIT_DEBUG: False
-
-
-  migrate:
-    command:
-      - "/bin/sh"
-      - "-c"
-      - |
-        python manage.py migrate --no-input &&
-        python manage.py create_demo --force
-    restartPolicy: Never
-
-  command:
-    - "gunicorn"
-    - "-c"
-    - "/usr/local/etc/gunicorn/meet.py"
-    - "meet.wsgi:application"
-    - "--reload"
-
-  createsuperuser:
-    command:
-      - "/bin/sh"
-      - "-c"
-      - |
-        python manage.py createsuperuser --email admin@example.com --password admin
-    restartPolicy: Never
-
-  # Exra volume to manage our local custom CA and avoid to set ssl_verify: false
-  extraVolumeMounts:
-    - name: certs
-      mountPath: /usr/local/lib/python3.12/site-packages/certifi/cacert.pem
-      subPath: cacert.pem
-
-  # Exra volume to manage our local custom CA and avoid to set ssl_verify: false
-  extraVolumes:
-    - name: certs
-      configMap:
-        name: certifi
-        items:
-        - key: cacert.pem
-          path: cacert.pem
-
-frontend:
-  envVars:
-    VITE_PORT: 8080
-    VITE_HOST: 0.0.0.0
-    VITE_API_BASE_URL: https://meet.127.0.0.1.nip.io/
-
-  replicas: 1
-
-  image:
-    repository: lasuite/meet-frontend
-    pullPolicy: Always
-    tag: "latest"
-
-ingress:
-  enabled: true
-  host: meet.127.0.0.1.nip.io
-
-ingressAdmin:
-  enabled: true
-  host: meet.127.0.0.1.nip.io
-
-posthog:
-  ingress:
-    enabled: false
-  ingressAssets:
-    enabled: false
-
-summary:
-  replicas: 0
-
-celery:
-  replicas: 0
@@ -1,7 +0,0 @@
-auth:
-  username: dinum
-  password: pass
-  database: meet
-tls:
-  enabled: true
-  autoGenerated: true
@@ -1,3 +0,0 @@
-auth:
-  password: pass
-architecture: standalone
@@ -1,233 +0,0 @@
-# Installation on a k8s cluster
-
-This document is a step-by-step guide that describes how to install Visio on a k8s cluster without AI features.
-
-
-## Prerequisites
-
- k8s cluster with an nginx-ingress controller
- an OIDC provider (if you don't have one, we will provide an example)
- a LiveKit server (if you don't have one, we will provide an example)
- a PostgreSQL server (if you don't have one, we will provide an example)
- a Memcached server (if you don't have one, we will provide an example)
-
-### Test cluster
-
-If you do not have a test cluster, you can install everything on a local kind cluster. In this case, the simplest way is to use our script **bin/start-kind.sh**.
-
-To be able to use the script, you will need to install:
-
- Docker (https://docs.docker.com/desktop/)
- Kind (https://kind.sigs.k8s.io/docs/user/quick-start/#installation)
- Mkcert (https://github.com/FiloSottile/mkcert#installation)
- Helm (https://helm.sh/docs/intro/quickstart/#install-helm)
-
-```
-$ ./bin/start-kind.sh
-0. Create ca
-The local CA is already installed in the system trust store! 👍
-The local CA is already installed in the Firefox and/or Chrome/Chromium trust store! 👍
-
-
-Created a new certificate valid for the following names 📜
- - "127.0.0.1.nip.io"
- - "*.127.0.0.1.nip.io"
-
-Reminder: X.509 wildcards only go one level deep, so this won't match a.b.127.0.0.1.nip.io ℹ️
-
-The certificate is at "./127.0.0.1.nip.io+1.pem" and the key at "./127.0.0.1.nip.io+1-key.pem" ✅
-
-It will expire on 23 March 2027 🗓
-
-1. Create registry container unless it already exists
-2. Create kind cluster with containerd registry config dir enabled
-Creating cluster "visio" ...
- ✓ Ensuring node image (kindest/node:v1.27.3) 🖼
- ✓ Preparing nodes 📦  
- ✓ Writing configuration 📜 
- ✓ Starting control-plane 🕹️ 
- ✓ Installing CNI 🔌 
- ✓ Installing StorageClass 💾 
-Set kubectl context to "kind-visio"
-You can now use your cluster with:
-
-kubectl cluster-info --context kind-visio
-
-Thanks for using kind! 😊
-3. Add the registry config to the nodes
-4. Connect the registry to the cluster network if not already connected
-5. Document the local registry
-configmap/local-registry-hosting created
-Warning: resource configmaps/coredns is missing the kubectl.kubernetes.io/last-applied-configuration annotation which is required by kubectl apply. kubectl apply should only be used on resources created declaratively by either kubectl create --save-config or kubectl apply. The missing annotation will be patched automatically.
-configmap/coredns configured
-deployment.apps/coredns restarted
-6. Install ingress-nginx
-namespace/ingress-nginx created
-serviceaccount/ingress-nginx created
-serviceaccount/ingress-nginx-admission created
-role.rbac.authorization.k8s.io/ingress-nginx created
-role.rbac.authorization.k8s.io/ingress-nginx-admission created
-clusterrole.rbac.authorization.k8s.io/ingress-nginx created
-clusterrole.rbac.authorization.k8s.io/ingress-nginx-admission created
-rolebinding.rbac.authorization.k8s.io/ingress-nginx created
-rolebinding.rbac.authorization.k8s.io/ingress-nginx-admission created
-clusterrolebinding.rbac.authorization.k8s.io/ingress-nginx created
-clusterrolebinding.rbac.authorization.k8s.io/ingress-nginx-admission created
-configmap/ingress-nginx-controller created
-service/ingress-nginx-controller created
-service/ingress-nginx-controller-admission created
-deployment.apps/ingress-nginx-controller created
-job.batch/ingress-nginx-admission-create created
-job.batch/ingress-nginx-admission-patch created
-ingressclass.networking.k8s.io/nginx created
-validatingwebhookconfiguration.admissionregistration.k8s.io/ingress-nginx-admission created
-secret/mkcert created
-deployment.apps/ingress-nginx-controller patched
-7. Setup namespace
-namespace/meet created
-Context "kind-visio" modified.
-secret/mkcert created
-$ kind get clusters
-visio
-$ kubectl -n ingress-nginx get po
-NAME                                        READY   STATUS      RESTARTS   AGE
-ingress-nginx-admission-create-jgnc9        0/1     Completed   0          2m44s
-ingress-nginx-admission-patch-wrt47         0/1     Completed   0          2m44s
-ingress-nginx-controller-57c548c4cd-9xwt6   1/1     Running     0          2m44s
-```
-When your k8s cluster is ready, you can start the deployment. This cluster is special because it uses the *.127.0.0.1.nip.io domain and mkcert certificates to have full HTTPS support and easy domain name management.
-
-Please remember that *.127.0.0.1.nip.io will always resolve to 127.0.0.1, except in the k8s cluster where we configure CoreDNS to answer with the ingress-nginx service IP.
-
-## Preparation
-
-### What will you use to authenticate your users ? 
-
-Visio uses OIDC, so if you already have an OIDC provider, obtain the necessary information to use it. In the next step, we will see how to configure Django (and thus Visio) to use it. If you do not have a provider, we will show you how to deploy a local Keycloak instance (this is not a production deployment, just a demo).
-
-If you haven't run the script **bin/start-kind.sh**, you'll need to manually create the namespace by running the following command:
-
-```
-$ kubectl create namespace meet
-```
-
-If you have already run the script, you can skip this step and proceed to the next instruction.
-
-```
-$ kubectl config set-context --current --namespace=meet
-$ helm install keycloak oci://registry-1.docker.io/bitnamicharts/keycloak -f examples/keycloak.values.yaml
-$ #wait until
-$ kubectl get po
-NAME                    READY   STATUS    RESTARTS   AGE
-keycloak-0              1/1     Running   0          6m48s
-keycloak-postgresql-0   1/1     Running   0          6m48s
-```
-
-From here the important information you will need are :
-
-```
-OIDC_OP_JWKS_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/certs
-OIDC_OP_AUTHORIZATION_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/auth
-OIDC_OP_TOKEN_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/token
-OIDC_OP_USER_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/userinfo
-OIDC_OP_LOGOUT_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/session/end
-OIDC_RP_CLIENT_ID: meet
-OIDC_RP_CLIENT_SECRET: ThisIsAnExampleKeyForDevPurposeOnly
-OIDC_RP_SIGN_ALGO: RS256
-OIDC_RP_SCOPES: "openid email"
-```
-
-You can find these values in **examples/keycloak.values.yaml**
-
-### Find livekit server connexion values
-
-Visio use livekit for streaming part so if you have a livekit provider, obtain the necessary information to use it. If you do not have a provider, you can install a livekit testing environment as follows:
-
-Livekit need a redis (and meet too) so we will start by deploying a redis :
-
-```
-$ helm install redis oci://registry-1.docker.io/bitnamicharts/redis -f examples/redis.values.yaml
-$ kubectl get po
-NAME                    READY   STATUS    RESTARTS   AGE
-keycloak-0              1/1     Running   0          26m
-keycloak-postgresql-0   1/1     Running   0          26m
-redis-master-0          1/1     Running   0          35s
-```
-When the redis is ready we can deploy livekit-server.
-
-```
-$ helm repo add livekit https://helm.livekit.io
-$ helm repo update
-$ helm install livekit livekit/livekit-server -f examples/livekit.values.yaml
-$ kubectl get po
-NAME                                      READY   STATUS    RESTARTS   AGE
-keycloak-0                                1/1     Running   0          30m
-keycloak-postgresql-0                     1/1     Running   0          30m
-livekit-livekit-server-5c5fb87f7f-ct6x5   1/1     Running   0          7s
-redis-master-0                            1/1     Running   0          4m30s
-$ curl https://livekit.127.0.0.1.nip.io
-OK
-```
-
-From here important information you will need are :
-
-```
-LIVEKIT_API_SECRET: secret
-LIVEKIT_API_KEY: devkey
-LIVEKIT_API_URL: https://livekit.127.0.0.1.nip.io/
-REDIS_URL: redis://default:pass@redis-master:6379/1
-CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
-CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
-```
-
-### Find postgresql connexion values
-
-Visio uses a postgresql db as backend so if you have a provider, obtain the necessary information to use it. If you do not have, you can install a postgresql testing environment as follows:
-
-```
-$ helm install postgresql oci://registry-1.docker.io/bitnamicharts/postgresql -f examples/postgresql.values.yaml
-$ kubectl get po
-NAME                                      READY   STATUS    RESTARTS   AGE
-keycloak-0                                1/1     Running   0          45m
-keycloak-postgresql-0                     1/1     Running   0          45m
-livekit-livekit-server-5c5fb87f7f-ct6x5   1/1     Running   0          15m
-postgresql-0                              1/1     Running   0          50s
-redis-master-0                            1/1     Running   0          19
-```
-From here important information you will need are :
-
-```
-DB_HOST: postgres-postgresql
-DB_NAME: meet
-DB_USER: dinum
-DB_PASSWORD: pass
-DB_PORT: 5432
-POSTGRES_DB: meet
-POSTGRES_USER: dinum
-POSTGRES_PASSWORD: pass
-```
-
-## Deployment
-
-Now you are ready to deploy Visio without AI. AI required more dependencies (Openai-compliant API, LiveKit Egress, Cold storage and a docs deployment to push resumes). To deploy meet you need to provide all previous information to the helm chart.
-
-```
-$ helm repo add meet https://numerique-gouv.github.io/meet/
-$ helm repo update
-$ helm install meet meet/meet -f examples/meet.values.yaml
-```
-
-## Test your deployment
-
-In order to test your deployment you have to log in to your instance. If you use exclusively our examples you can do:
-
-```
-$ kubectl get ingress
-NAME                     CLASS    HOSTS                       ADDRESS     PORTS     AGE
-keycloak                 <none>   keycloak.127.0.0.1.nip.io   localhost   80        58m
-livekit-livekit-server   <none>   livekit.127.0.0.1.nip.io    localhost   80, 443   106m
-meet                     <none>   meet.127.0.0.1.nip.io       localhost   80, 443   52m
-meet-admin               <none>   meet.127.0.0.1.nip.io       localhost   80, 443   52m
-```
-
-You can use Visio on https://meet.127.0.0.1.nip.io. The provisioning user in keycloak is meet/meet.
@@ -14,7 +14,7 @@
      "groupName": "ignored js dependencies",
      "matchManagers": ["npm"],
      "matchPackageNames": [
-        "eslint", "react", "react-dom", "@types/react-dom", "@types/react", "react-i18next"
+        "eslint"
      ]
    }
  ]
@@ -130,17 +130,18 @@ class RoomSerializer(serializers.ModelSerializer):
            del output["configuration"]

        if role is not None or instance.is_public:
-            slug = f"{instance.id!s}"
+            room_id = f"{instance.id!s}"
            username = request.query_params.get("username", None)

            output["livekit"] = {
                "url": settings.LIVEKIT_CONFIGURATION["url"],
-                "room": slug,
+                "room": room_id,
                "token": utils.generate_token(
-                    room=slug, user=request.user, username=username
+                    room=room_id, user=request.user, username=username
                ),
+                "passphrase": utils.get_cached_passphrase(room_id)
            }
-
+            
        output["is_administrable"] = is_admin

        return output
@@ -47,6 +47,8 @@ from core.recording.worker.mediator import (

 from . import permissions, serializers

+from livekit import api as livekit_api
+
 # pylint: disable=too-many-ancestors

 logger = getLogger(__name__)
@@ -210,6 +212,10 @@ class RoomViewSet(
        Allow unregistered rooms when activated.
        For unregistered rooms we only return a null id and the livekit room and token.
        """
+
+        # todo - determine whether encryption is needed store a shared secret in memory or in redis
+        # todo - check if a secret already exists, else create one.
+
        try:
            instance = self.get_object()
        except Http404:
@@ -343,6 +349,36 @@ class RoomViewSet(
            {"message": f"Recording stopped for room {room.slug}."}
        )

+    @decorators.action(
+        detail=False,
+        methods=["post"],
+        url_path="livekit-webhook",
+        permission_classes=[],
+        authentication_classes=[],
+    )
+    def handle_livekit_webhook(self, request, pk=None):  # pylint: disable=unused-argument
+        """Handle LiveKit webhook events."""
+        auth_token = request.headers.get("Authorization")
+        if not auth_token:
+            return drf_response.Response(
+                {"error": "Missing LiveKit authentication token"},
+                status=drf_status.HTTP_401_UNAUTHORIZED
+            )
+
+        token_verifier = livekit_api.TokenVerifier()
+        webhook_receiver = livekit_api.WebhookReceiver(token_verifier)
+
+        webhook_data = webhook_receiver.receive(request.body.decode("utf-8"), auth_token)
+
+        # Todo - livekit triggers a webhook for all events, see if we can restrict webhook to a limited number of events.
+        # Todo - handle Egress stopped / aborted events.
+
+        if webhook_data.event == "room_finished":
+            room_id = webhook_data.room.name
+            utils.clear_cache_passphrase(room_id)
+
+        return drf_response.Response({"message": f"Event processed"})
+

 class ResourceAccessListModelMixin:
    """List mixin for resource access API."""
@@ -1,21 +0,0 @@
-# Generated by Django 5.1.4 on 2025-01-13 12:25
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('core', '0009_alter_recording_status'),
-    ]
-
-    operations = [
-        migrations.AlterModelOptions(
-            name='resourceaccess',
-            options={'ordering': ('-created_at',), 'verbose_name': 'Resource access', 'verbose_name_plural': 'Resource accesses'},
-        ),
-        migrations.AlterModelOptions(
-            name='user',
-            options={'ordering': ('-created_at',), 'verbose_name': 'user', 'verbose_name_plural': 'users'},
-        ),
-    ]
@@ -14,6 +14,47 @@ from django.conf import settings

 from livekit.api import AccessToken, VideoGrants

+import secrets
+import string
+
+from django.core.cache import cache
+from cryptography.fernet import Fernet
+
+import base64
+
+
+def generate_random_passphrase(length=26):
+    """Generate a random passphrase using letters and digits"""
+    alphabet = string.ascii_letters + string.digits
+    return ''.join(secrets.choice(alphabet) for _ in range(length))
+
+
+def build_room_passphrase_key(room_id: str) -> str:
+    """Build cache key for room passphrase."""
+    return f"room_passphrase:{room_id}"
+
+def get_cached_passphrase(room_id: str) -> str:
+    """Get or generate encrypted passphrase for a room.
+
+    Retrieves existing passphrase from cache or generates,
+    encrypts and caches a new one if not found.
+    """
+    cypher = Fernet(settings.PASSPHRASE_ENCRYPTION_KEY.encode())
+    cache_key = build_room_passphrase_key(room_id)
+    encrypted_passphrase = cache.get(cache_key)
+
+    if encrypted_passphrase is None:
+        passphrase = generate_random_passphrase()
+        encrypted_passphrase = cypher.encrypt(passphrase.encode()).decode()
+        cache.set(cache_key, encrypted_passphrase, timeout=86400)  # 24 hours
+        return passphrase
+
+    return cypher.decrypt(encrypted_passphrase.encode()).decode()
+
+def clear_room_passphrase(room_id: str) -> None:
+    """Remove room passphrase from cache."""
+    cache.delete(build_room_passphrase_key(room_id))
+

 def generate_color(identity: str) -> str:
    """Generates a consistent HSL color based on a given identity string.
@@ -459,9 +459,13 @@ class Base(Configuration):

    # Marketing and communication settings
    SIGNUP_NEW_USER_TO_MARKETING_EMAIL = values.BooleanValue(
-        False,  # When enabled, new users are automatically added to mailing list.
-        environ_name="SIGNUP_NEW_USER_TO_MARKETING_EMAIL",
+        False,
+        environ_name="SIGNUP_NEW_USERS_TO_NEWSLETTER",
        environ_prefix=None,
+        help_text=(
+            "When enabled, new users are automatically added to mailing list "
+            "for product updates, marketing communications, and customized emails. "
+        ),
    )
    MARKETING_SERVICE_CLASS = values.Value(
        "core.services.marketing_service.BrevoMarketingService",
@@ -479,6 +483,8 @@ class Base(Configuration):
    )
    BREVO_API_CONTACT_ATTRIBUTES = values.DictValue({"VISIO_USER": True})

+    PASSPHRASE_ENCRYPTION_KEY = values.Value(environ_name="PASSPHRASE_ENCRYPTION_KEY", environ_prefix=None)
+
    # pylint: disable=invalid-name
    @property
    def ENVIRONMENT(self):
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.36.6",
+    "boto3==1.35.90",
    "Brotli==1.1.0",
    "brevo-python==1.1.2",
    "celery[redis]==5.4.0",
@@ -37,7 +37,7 @@ dependencies = [
    "django-redis==5.4.0",
    "django-storages[s3]==1.14.4",
    "django-timezone-field>=5.1",
-    "django==5.1.5",
+    "django==5.1.4",
    "djangorestframework==3.15.2",
    "drf_spectacular==0.28.0",
    "dockerflow==2024.4.2",
@@ -48,11 +48,11 @@ dependencies = [
    "june-analytics-python==2.3.0",
    "markdown==3.7",
    "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.4",
+    "psycopg[binary]==3.2.3",
    "PyJWT==2.10.1",
    "python-frontmatter==1.1.0",
    "requests==2.32.3",
-    "sentry-sdk==2.20.0",
+    "sentry-sdk==2.19.2",
    "url-normalize==1.4.3",
    "WeasyPrint>=60.2",
    "whitenoise==6.8.2",
@@ -74,7 +74,7 @@ dev = [
    "freezegun==1.5.1",
    "ipdb==0.13.13",
    "ipython==8.31.0",
-    "pyfakefs==5.7.4",
+    "pyfakefs==5.7.3",
    "pylint-django==2.6.1",
    "pylint==3.3.3",
    "pytest-cov==6.0.0",
@@ -82,8 +82,8 @@ dev = [
    "pytest==8.3.4",
    "pytest-icdiff==0.9",
    "pytest-xdist==3.6.1",
-    "responses==0.25.6",
-    "ruff==0.9.3",
+    "responses==0.25.3",
+    "ruff==0.8.4",
    "types-requests==2.32.0.20241016",
 ]

@@ -13,48 +13,48 @@
    "check": "prettier --check ./src"
  },
  "dependencies": {
-    "@livekit/components-react": "2.8.1",
+    "@livekit/components-react": "2.6.9",
    "@livekit/components-styles": "1.1.4",
-    "@livekit/track-processors": "0.3.3",
-    "@pandacss/preset-panda": "0.51.1",
-    "@react-aria/toast": "3.0.0-beta.19",
-    "@remixicon/react": "4.6.0",
-    "@tanstack/react-query": "5.64.2",
+    "@livekit/track-processors": "0.3.2",
+    "@pandacss/preset-panda": "0.48.0",
+    "@react-aria/toast": "3.0.0-beta.18",
+    "@remixicon/react": "4.5.0",
+    "@tanstack/react-query": "5.61.3",
    "crisp-sdk-web": "1.0.25",
-    "hoofd": "1.7.3",
-    "i18next": "24.2.2",
-    "i18next-browser-languagedetector": "8.0.2",
-    "i18next-parser": "9.1.0",
+    "hoofd": "1.7.1",
+    "i18next": "24.0.2",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-parser": "9.0.2",
    "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.8.1",
-    "posthog-js": "1.210.2",
+    "livekit-client": "2.6.3",
+    "posthog-js": "1.188.0",
    "react": "18.3.1",
-    "react-aria-components": "1.6.0",
+    "react-aria-components": "1.5.0",
    "react-dom": "18.3.1",
    "react-i18next": "15.1.1",
    "use-sound": "4.0.3",
-    "valtio": "2.1.3",
-    "wouter": "3.4.0"
+    "valtio": "2.1.2",
+    "wouter": "3.3.5"
  },
  "devDependencies": {
-    "@pandacss/dev": "0.51.1",
-    "@tanstack/eslint-plugin-query": "5.64.2",
-    "@tanstack/react-query-devtools": "5.64.2",
-    "@types/node": "22.10.10",
+    "@pandacss/dev": "0.48.0",
+    "@tanstack/eslint-plugin-query": "5.61.3",
+    "@tanstack/react-query-devtools": "5.61.3",
+    "@types/node": "22.9.3",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.21.0",
-    "@typescript-eslint/parser": "8.21.0",
-    "@vitejs/plugin-react": "4.3.4",
+    "@typescript-eslint/eslint-plugin": "8.15.0",
+    "@typescript-eslint/parser": "8.15.0",
+    "@vitejs/plugin-react": "4.3.3",
    "eslint": "8.57.0",
-    "eslint-config-prettier": "10.0.1",
+    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-react-refresh": "0.4.18",
-    "postcss": "8.5.1",
-    "prettier": "3.4.2",
-    "typescript": "5.7.3",
-    "vite": "6.0.11",
-    "vite-tsconfig-paths": "5.1.4"
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.14",
+    "postcss": "8.4.49",
+    "prettier": "3.3.3",
+    "typescript": "5.7.2",
+    "vite": "5.4.11",
+    "vite-tsconfig-paths": "5.1.3"
  }
 }
@@ -9,6 +9,7 @@ import { useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
@@ -17,7 +18,6 @@ import { ReactNode, useState } from 'react'

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

 const Columns = ({ children }: { children?: ReactNode }) => {
  return (
@@ -32,10 +32,10 @@ const Columns = ({ children }: { children?: ReactNode }) => {
        justifyContent: 'normal',
        padding: '0 1rem',
        width: 'calc(100% - 2rem)',
-        _motionReduce: {
+        '@media(prefers-reduced-motion: reduce)': {
          opacity: 1,
        },
-        _motionSafe: {
+        '@media(prefers-reduced-motion: no-preference)': {
          opacity: 0,
          animation: '.5s ease-in fade 0s forwards',
        },
@@ -8,6 +8,7 @@ export type ApiRoom = {
    url: string
    room: string
    token: string
+    passphrase: string
  }
  configuration?: {
    [key: string]: string | number | boolean
@@ -1,8 +1,13 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom } from '@livekit/components-react'
-import { Room, RoomOptions } from 'livekit-client'
+import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
+import {
+  Room,
+  RoomOptions,
+  ExternalE2EEKeyProvider,
+  DeviceUnsupportedError,
+} from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
 import { Screen } from '@/layout/Screen'
@@ -12,11 +17,13 @@ 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'
+
+// todo - release worker when quitting the room, same for the key provider?
+// todo - check, seems the demo app from livekit trigger the web worker twice because of re-rendering

 export const Conference = ({
  roomId,
@@ -64,12 +71,49 @@ export const Conference = ({
    retry: false,
  })

+  const e2eeEnabled = true
+
+  const workerRef = useRef<Worker | null>(null)
+  const keyProvider = useRef<any | null>(null)
+
+  const getKeyProvider = () => {
+    if (!keyProvider.current && typeof window !== 'undefined') {
+      keyProvider.current = new ExternalE2EEKeyProvider()
+    }
+    return keyProvider.current
+  }
+
+  const getWorker = () => {
+    if (!e2eeEnabled) {
+      return
+    }
+    if (!workerRef.current && typeof window !== 'undefined') {
+      workerRef.current = new Worker(
+        new URL('livekit-client/e2ee-worker', import.meta.url)
+      )
+    }
+    return workerRef.current
+  }
+
+  const e2eePassphrase = data?.livekit?.passphrase
+
+  const [e2eeSetupComplete, setE2eeSetupComplete] = useState(false)
+
  const roomOptions = useMemo((): RoomOptions => {
+    const worker = getWorker()
+    const keyProvider = getKeyProvider()
+
+    // todo - explain why
+    const videoCodec = e2eeEnabled ? undefined : 'vp9'
+    const e2ee = e2eeEnabled ? { keyProvider, worker } : undefined
+
    return {
      adaptiveStream: true,
      dynacast: true,
      publishDefaults: {
-        videoCodec: 'vp9',
+        // todo - explain why
+        red: !e2eeEnabled,
+        videoCodec,
      },
      videoCaptureDefaults: {
        deviceId: userConfig.videoDeviceId ?? undefined,
@@ -77,12 +121,35 @@ export const Conference = ({
      audioCaptureDefaults: {
        deviceId: userConfig.audioDeviceId ?? undefined,
      },
+      e2ee,
    }
    // do not rely on the userConfig object directly as its reference may change on every render
  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])

  const room = useMemo(() => new Room(roomOptions), [roomOptions])

+  useEffect(() => {
+    console.log('enter', e2eePassphrase)
+    if (e2eePassphrase) {
+      const keyProvider = getKeyProvider()
+      keyProvider
+        .setKey(e2eePassphrase)
+        .then(() => {
+          room.setE2EEEnabled(true).catch((e) => {
+            if (e instanceof DeviceUnsupportedError) {
+              alert(
+                `You're trying to join an encrypted meeting, but your browser does not support it. Please update it to the latest version and try again.`
+              )
+              console.error(e)
+            } else {
+              throw e
+            }
+          })
+        })
+        .then(() => setE2eeSetupComplete(true))
+    }
+  }, [room, e2eePassphrase])
+
  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')

  const { t } = useTranslation('rooms')
@@ -103,6 +170,10 @@ export const Conference = ({
    peerConnectionTimeout: 60000, // Default: 15s. Extended for slow TURN/TLS negotiation
  }

+  const handleEncryptionError = () => {
+    console.log('error')
+  }
+
  return (
    <QueryAware status={isFetchError ? createStatus : fetchStatus}>
      <Screen header={false} footer={false}>
@@ -110,19 +181,14 @@ export const Conference = ({
          room={room}
          serverUrl={data?.livekit?.url}
          token={data?.livekit?.token}
-          connect={true}
+          connect={e2eeSetupComplete}
          audio={userConfig.audioEnabled}
-          video={
-            userConfig.videoEnabled && {
-              processor: BackgroundProcessorFactory.deserializeProcessor(
-                userConfig.processorSerialized
-              ),
-            }
-          }
+          video={userConfig.videoEnabled}
          connectOptions={connectOptions}
          className={css({
            backgroundColor: 'primaryDark.50 !important',
          })}
+          onEncryptionError={handleEncryptionError}
        >
          <VideoConference />
          {showInviteDialog && (
@@ -1,390 +1,30 @@
 import { useTranslation } from 'react-i18next'
-import { usePreviewTracks } from '@livekit/components-react'
-import { css } from '@/styled-system/css'
+import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
 import { Screen } from '@/layout/Screen'
-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',
-        })}
-      />
-    </>
-  )
-}
+import { CenteredContent } from '@/layout/CenteredContent'
+import { useUser } from '@/features/auth'

 export const Join = ({
  onSubmit,
 }: {
  onSubmit: (choices: LocalUserChoices) => void
 }) => {
-  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])
+  const { t } = useTranslation('rooms')
+  const { user } = useUser()

  return (
-    <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 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>
  )
 }
@@ -0,0 +1,189 @@
+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 {
+  BackgroundBlur,
+  BackgroundOptions,
+  ProcessorWrapper,
+  BackgroundTransformer,
+} from '@livekit/track-processors'
+
+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,
+}
+
+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 ProcessorWrapper<BackgroundOptions>
+  }
+
+  const getBlurRadius = (): BlurRadius => {
+    const processor = getProcessor()
+    return (
+      (processor?.transformer as BackgroundTransformer)?.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(BackgroundBlur(blurRadius))
+      } else {
+        await processor?.updateTransformerOptions({ 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>
+        {ProcessorWrapper.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>
+  )
+}
@@ -15,8 +15,9 @@ import {
  VideoTrack,
  TrackRefContext,
  ParticipantContextIfNeeded,
+  useIsSpeaking,
 } from '@livekit/components-react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
  isTrackReference,
  isTrackReferencePinned,
@@ -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
@@ -1,68 +0,0 @@
-import {
-  BackgroundBlur,
-  BackgroundTransformer,
-  ProcessorWrapper,
-} from '@livekit/track-processors'
-import { ProcessorOptions, Track } from 'livekit-client'
-import {
-  BackgroundProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
-
-/**
- * This is simply a wrapper around track-processor-js Processor
- * in order to be compatible with a common interface BackgroundBlurProcessorInterface
- * used accross the project.
- */
-export class BackgroundBlurTrackProcessorJsWrapper
-  implements BackgroundProcessorInterface
-{
-  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>) {
-    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 BackgroundBlurTrackProcessorJsWrapper({
-      blurRadius: this.options!.blurRadius,
-    })
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.BLUR,
-      options: this.options,
-    }
-  }
-}
@@ -1,368 +0,0 @@
-import { ProcessorOptions, Track } from 'livekit-client'
-import posthog from 'posthog-js'
-import {
-  FilesetResolver,
-  ImageSegmenter,
-  ImageSegmenterResult,
-} from '@mediapipe/tasks-vision'
-import {
-  CLEAR_TIMEOUT,
-  SET_TIMEOUT,
-  TIMEOUT_TICK,
-  timerWorkerScript,
-} from './TimerWorker'
-import {
-  BackgroundProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
-
-const PROCESSING_WIDTH = 256
-const PROCESSING_HEIGHT = 144
-
-const SEGMENTATION_MASK_CANVAS_ID = 'background-blur-local-segmentation'
-const BLUR_CANVAS_ID = 'background-blur-local'
-
-const DEFAULT_BLUR = '10'
-
-/**
- * This implementation of video blurring is made to be run on CPU for browser that are
- * not compatible with track-processor-js.
- *
- * It also make possible to run blurring on browser that does not implement MediaStreamTrackGenerator and
- * MediaStreamTrackProcessor.
- */
-export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
-  options: BackgroundOptions
-  name: string
-  processedTrack?: MediaStreamTrack | undefined
-
-  source?: MediaStreamTrack
-  sourceSettings?: MediaTrackSettings
-  videoElement?: HTMLVideoElement
-  videoElementLoaded?: boolean
-
-  // Canvas containg the video processing result, of which we extract as stream.
-  outputCanvas?: HTMLCanvasElement
-  outputCanvasCtx?: CanvasRenderingContext2D
-
-  imageSegmenter?: ImageSegmenter
-  imageSegmenterResult?: ImageSegmenterResult
-
-  // Canvas used for resizing video source and projecting mask.
-  segmentationMaskCanvas?: HTMLCanvasElement
-  segmentationMaskCanvasCtx?: CanvasRenderingContext2D
-
-  // Mask containg the inference result.
-  segmentationMask?: ImageData
-
-  // The resized image of the video source.
-  sourceImageData?: ImageData
-
-  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() {
-    return navigator.userAgent.toLowerCase().includes('firefox')
-  }
-
-  async init(opts: ProcessorOptions<Track.Kind>) {
-    if (!opts.element) {
-      throw new Error('Element is required for processing')
-    }
-
-    this.source = opts.track as MediaStreamTrack
-    this.sourceSettings = this.source!.getSettings()
-    this.videoElement = opts.element as HTMLVideoElement
-
-    this._initVirtualBackgroundImage()
-    this._createMainCanvas()
-    this._createMaskCanvas()
-
-    const stream = this.outputCanvas!.captureStream()
-    const tracks = stream.getVideoTracks()
-    if (tracks.length == 0) {
-      throw new Error('No tracks found for processing')
-    }
-    this.processedTrack = tracks[0]
-
-    this.segmentationMask = new ImageData(PROCESSING_WIDTH, PROCESSING_HEIGHT)
-    await this.initSegmenter()
-    this._initWorker()
-
-    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() {
-    this.timerWorker = new Worker(timerWorkerScript, {
-      name: 'Blurring',
-    })
-    this.timerWorker.onmessage = (data) => this.onTimerMessage(data)
-    // When hiding camera then showing it again, the onloadeddata callback is not fired again.
-    if (this.videoElementLoaded) {
-      this.timerWorker!.postMessage({
-        id: SET_TIMEOUT,
-        timeMs: 1000 / 30,
-      })
-    } else {
-      this.videoElement!.onloadeddata = () => {
-        this.videoElementLoaded = true
-        this.timerWorker!.postMessage({
-          id: SET_TIMEOUT,
-          timeMs: 1000 / 30,
-        })
-      }
-    }
-  }
-
-  onTimerMessage(response: { data: { id: number } }) {
-    if (response.data.id === TIMEOUT_TICK) {
-      this.process()
-    }
-  }
-
-  async initSegmenter() {
-    const vision = await FilesetResolver.forVisionTasks(
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
-    )
-    this.imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
-      baseOptions: {
-        modelAssetPath:
-          'https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter_landscape/float16/latest/selfie_segmenter_landscape.tflite',
-        delegate: 'CPU', // Use CPU for Firefox.
-      },
-      runningMode: 'VIDEO',
-      outputCategoryMask: true,
-      outputConfidenceMasks: false,
-    })
-  }
-
-  /**
-   * Resize the source video to the processing resolution.
-   */
-  async sizeSource() {
-    this.segmentationMaskCanvasCtx?.drawImage(
-      this.videoElement!,
-      0,
-      0,
-      this.videoElement!.videoWidth,
-      this.videoElement!.videoHeight,
-      0,
-      0,
-      PROCESSING_WIDTH,
-      PROCESSING_HEIGHT
-    )
-
-    this.sourceImageData = this.segmentationMaskCanvasCtx?.getImageData(
-      0,
-      0,
-      PROCESSING_WIDTH,
-      PROCESSING_WIDTH
-    )
-  }
-
-  /**
-   * Run the segmentation.
-   */
-  async segment() {
-    const startTimeMs = performance.now()
-    return new Promise<void>((resolve) => {
-      this.imageSegmenter!.segmentForVideo(
-        this.sourceImageData!,
-        startTimeMs,
-        (result: ImageSegmenterResult) => {
-          this.imageSegmenterResult = result
-          resolve()
-        }
-      )
-    })
-  }
-
-  /**
-   * TODO: future improvement with WebGL.
-   */
-  async blur() {
-    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 blurry background.
-    this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
-    this.outputCanvasCtx!.filter = `blur(${this.options.blurRadius ?? DEFAULT_BLUR}px)`
-    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
-  }
-
-  /**
-   * TODO: future improvement with WebGL.
-   */
-  async drawVirtualBackground() {
-    const mask = this.imageSegmenterResult!.categoryMask!.getAsUint8Array()
-    for (let i = 0; i < mask.length; ++i) {
-      this.segmentationMask!.data[i * 4 + 3] = 255 - mask[i]
-    }
-
-    this.segmentationMaskCanvasCtx!.putImageData(this.segmentationMask!, 0, 0)
-
-    this.outputCanvasCtx!.globalCompositeOperation = 'copy'
-    this.outputCanvasCtx!.filter = 'blur(8px)'
-
-    // Put opacity mask.
-    this.outputCanvasCtx!.drawImage(
-      this.segmentationMaskCanvas!,
-      0,
-      0,
-      PROCESSING_WIDTH,
-      PROCESSING_HEIGHT,
-      0,
-      0,
-      this.videoElement!.videoWidth,
-      this.videoElement!.videoHeight
-    )
-
-    // Draw clear body.
-    this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
-    this.outputCanvasCtx!.filter = 'none'
-    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
-
-    // Draw virtual background.
-    this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
-    this.outputCanvasCtx!.drawImage(
-      this.virtualBackgroundImage!,
-      0,
-      0,
-      this.outputCanvas!.width,
-      this.outputCanvas!.height
-    )
-  }
-
-  async process() {
-    await this.sizeSource()
-    await this.segment()
-
-    if (this.options.blurRadius) {
-      await this.blur()
-    } else {
-      await this.drawVirtualBackground()
-    }
-    this.timerWorker!.postMessage({
-      id: SET_TIMEOUT,
-      timeMs: 1000 / 30,
-    })
-  }
-
-  _createMainCanvas() {
-    this.outputCanvas = document.querySelector(
-      'canvas#background-blur-local'
-    ) as HTMLCanvasElement
-    if (!this.outputCanvas) {
-      this.outputCanvas = this._createCanvas(
-        BLUR_CANVAS_ID,
-        this.sourceSettings!.width!,
-        this.sourceSettings!.height!
-      )
-    }
-    this.outputCanvasCtx = this.outputCanvas.getContext('2d')!
-  }
-
-  _createMaskCanvas() {
-    this.segmentationMaskCanvas = document.querySelector(
-      `#${SEGMENTATION_MASK_CANVAS_ID}`
-    ) as HTMLCanvasElement
-    if (!this.segmentationMaskCanvas) {
-      this.segmentationMaskCanvas = this._createCanvas(
-        SEGMENTATION_MASK_CANVAS_ID,
-        PROCESSING_WIDTH,
-        PROCESSING_HEIGHT
-      )
-    }
-    this.segmentationMaskCanvasCtx =
-      this.segmentationMaskCanvas.getContext('2d')!
-  }
-
-  _createCanvas(id: string, width: number, height: number) {
-    const element = document.createElement('canvas')
-    element.setAttribute('id', id)
-    element.setAttribute('width', '' + width)
-    element.setAttribute('height', '' + height)
-    return element
-  }
-
-  async restart(opts: ProcessorOptions<Track.Kind>) {
-    await this.destroy()
-    return this.init(opts)
-  }
-
-  async destroy() {
-    this.timerWorker?.postMessage({
-      id: CLEAR_TIMEOUT,
-    })
-
-    this.timerWorker?.terminate()
-    this.imageSegmenter?.close()
-  }
-
-  clone() {
-    return new BackgroundCustomProcessor(this.options)
-  }
-
-  serialize() {
-    return {
-      type: this.type,
-      options: this.options,
-    }
-  }
-}
@@ -1,61 +0,0 @@
-import { ProcessorOptions, Track } from 'livekit-client'
-import {
-  BackgroundOptions,
-  BackgroundProcessorInterface,
-  ProcessorType,
-} from '.'
-import {
-  BackgroundTransformer,
-  ProcessorWrapper,
-  VirtualBackground,
-} from '@livekit/track-processors'
-
-export class BackgroundVirtualTrackProcessorJsWrapper
-  implements BackgroundProcessorInterface
-{
-  name = 'virtual'
-
-  processor: ProcessorWrapper<BackgroundOptions>
-
-  opts: BackgroundOptions
-
-  constructor(opts: BackgroundOptions) {
-    this.processor = VirtualBackground(opts.imagePath!)
-    this.opts = opts
-  }
-
-  async init(opts: ProcessorOptions<Track.Kind>) {
-    return this.processor.init(opts)
-  }
-
-  async restart(opts: ProcessorOptions<Track.Kind>) {
-    return this.processor.restart(opts)
-  }
-
-  async destroy() {
-    return this.processor.destroy()
-  }
-
-  update(opts: BackgroundOptions): void {
-    this.processor.updateTransformerOptions(opts)
-  }
-
-  get processedTrack() {
-    return this.processor.processedTrack
-  }
-
-  get options() {
-    return (this.processor.transformer as BackgroundTransformer).options
-  }
-
-  clone() {
-    return new BackgroundVirtualTrackProcessorJsWrapper(this.options)
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.VIRTUAL,
-      options: this.options,
-    }
-  }
-}
@@ -1,71 +0,0 @@
-/**
- * From https://github.com/jitsi/jitsi-meet
- */
-
-/**
- * SET_TIMEOUT constant is used to set interval and it is set in
- * the id property of the request.data property. TimeMs property must
- * also be set.
- *
- * ```
- * //Request.data example:
- * {
- *      id: SET_TIMEOUT,
- *      timeMs: 33
- * }
- * ```
- */
-export const SET_TIMEOUT = 1
-
-/**
- * CLEAR_TIMEOUT constant is used to clear the interval and it is set in
- * the id property of the request.data property.
- *
- * ```
- * {
- *      id: CLEAR_TIMEOUT
- * }
- * ```
- */
-export const CLEAR_TIMEOUT = 2
-
-/**
- * TIMEOUT_TICK constant is used as response and it is set in the id property.
- *
- * ```
- * {
- *      id: TIMEOUT_TICK
- * }
- * ```
- */
-export const TIMEOUT_TICK = 3
-
-/**
- * The following code is needed as string to create a URL from a Blob.
- * The URL is then passed to a WebWorker. Reason for this is to enable
- * use of setInterval that is not throttled when tab is inactive.
- */
-const code = `
-    var timer;
-
-    onmessage = function(request) {
-        switch (request.data.id) {
-        case ${SET_TIMEOUT}: {
-            timer = setTimeout(() => {
-                postMessage({ id: ${TIMEOUT_TICK} });
-            }, request.data.timeMs);
-            break;
-        }
-        case ${CLEAR_TIMEOUT}: {
-            if (timer) {
-                clearTimeout(timer);
-            }
-            break;
-        }
-        }
-    };
-`
-
-export const timerWorkerScript = URL.createObjectURL(
-  new Blob([code], { type: 'application/javascript' })
-)
@@ -1,63 +0,0 @@
-import { ProcessorWrapper } from '@livekit/track-processors'
-import { Track, TrackProcessor } from 'livekit-client'
-import { BackgroundBlurTrackProcessorJsWrapper } from './BackgroundBlurTrackProcessorJsWrapper'
-import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
-import { BackgroundVirtualTrackProcessorJsWrapper } from './BackgroundVirtualTrackProcessorJsWrapper'
-
-export type BackgroundOptions = {
-  blurRadius?: number
-  imagePath?: string
-}
-
-export interface ProcessorSerialized {
-  type: ProcessorType
-  options: BackgroundOptions
-}
-
-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 || BackgroundCustomProcessor.isSupported
-  }
-
-  static getProcessor(
-    type: ProcessorType,
-    opts: BackgroundOptions
-  ): BackgroundProcessorInterface | undefined {
-    if (type === ProcessorType.BLUR) {
-      if (ProcessorWrapper.isSupported) {
-        return new BackgroundBlurTrackProcessorJsWrapper(opts)
-      }
-      if (BackgroundCustomProcessor.isSupported) {
-        return new BackgroundCustomProcessor(opts)
-      }
-    } else if (type === ProcessorType.VIRTUAL) {
-      if (ProcessorWrapper.isSupported) {
-        return new BackgroundVirtualTrackProcessorJsWrapper(opts)
-      }
-      if (BackgroundCustomProcessor.isSupported) {
-        return new BackgroundCustomProcessor(opts)
-      }
-    }
-    return undefined
-  }
-
-  static deserializeProcessor(data?: ProcessorSerialized) {
-    if (data?.type) {
-      return BackgroundProcessorFactory.getProcessor(data?.type, data?.options)
-    }
-    return undefined
-  }
-}
@@ -1,123 +0,0 @@
-import { Button } from '@/primitives'
-import { useMediaDeviceSelect } from '@livekit/components-react'
-import { RiCameraSwitchLine } from '@remixicon/react'
-import { useEffect, useState } from 'react'
-import { ButtonProps } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-
-enum FacingMode {
-  USER = 'user',
-  ENVIRONMENT = 'environment',
-}
-
-export const CameraSwitchButton = (props: Partial<ButtonProps>) => {
-  const { t } = useTranslation('rooms')
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({
-      kind: 'videoinput',
-      requestPermissions: true,
-    })
-
-  // getCapabilities type is not available.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const getDeviceFacingMode = (device: any): string[] => {
-    if (!device.getCapabilities) {
-      return []
-    }
-    const capabilities = device.getCapabilities()
-    if (!capabilities) {
-      return []
-    }
-    if (typeof capabilities.facingMode !== 'object') {
-      return []
-    }
-    return capabilities.facingMode
-  }
-
-  const detectCurrentFacingMode = (): FacingMode | null => {
-    if (!activeDeviceId) {
-      return null
-    }
-    const activeDevice = devices.find(
-      (device) => device.deviceId === activeDeviceId
-    )
-    if (!activeDevice) {
-      return null
-    }
-    const facingMode = getDeviceFacingMode(activeDevice)
-    if (facingMode.indexOf(FacingMode.USER) >= 0) {
-      return FacingMode.USER
-    }
-    if (facingMode.indexOf(FacingMode.ENVIRONMENT) >= 0) {
-      return FacingMode.ENVIRONMENT
-    }
-    return null
-  }
-
-  const guessCurrentFacingMode = () => {
-    const facingMode = detectCurrentFacingMode()
-    if (facingMode) {
-      return facingMode
-    }
-    // We consider by default if we have no clue that the user camera is used.
-    return FacingMode.USER
-  }
-
-  const [facingMode, setFacingMode] = useState<FacingMode | null>()
-
-  /**
-   * Before setting the initial value of facingMode we need to wait for devices to
-   * be loaded ( because in detectCurrentFacingMode we need to find the active device
-   * in the devices list ), which is not the case at first render.
-   */
-  useEffect(() => {
-    if (devices.length == 0) {
-      return
-    }
-    if (facingMode) {
-      return
-    }
-
-    setFacingMode(guessCurrentFacingMode())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [devices])
-
-  const getUserDevice = (
-    facingMode: FacingMode
-  ): MediaDeviceInfo | undefined => {
-    return devices.find((device) => {
-      return getDeviceFacingMode(device).indexOf(facingMode) >= 0
-    })
-  }
-
-  const toggle = () => {
-    let target: FacingMode
-    if (facingMode === FacingMode.USER) {
-      target = FacingMode.ENVIRONMENT
-    } else {
-      target = FacingMode.USER
-    }
-    const device = getUserDevice(target)
-    if (device) {
-      setActiveMediaDevice(device.deviceId)
-      setFacingMode(target)
-    } else {
-      console.error('Cannot get user device with facingMode ' + target)
-    }
-  }
-  return (
-    <Button
-      onPress={(e) => {
-        toggle()
-        props.onPress?.(e)
-      }}
-      variant="primaryTextDark"
-      aria-label={t('options.items.switchCamera')}
-      tooltip={t('options.items.switchCamera')}
-      description={true}
-    >
-      <RiCameraSwitchLine size={20} />
-    </Button>
-  )
-}
@@ -1,20 +0,0 @@
-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>
-  )
-}
@@ -1,20 +0,0 @@
-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>
-  )
-}
@@ -1,34 +0,0 @@
-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>
-  )
-}
@@ -8,7 +8,7 @@ export const OptionsButton = () => {

  return (
    <>
-      <Menu variant="dark">
+      <Menu>
        <Button
          square
          variant="primaryDark"
@@ -1,12 +1,21 @@
-import { Menu as RACMenu, MenuSection } from 'react-aria-components'
+import {
+  RiAccountBoxLine,
+  RiMegaphoneLine,
+  RiSettings3Line,
+} from '@remixicon/react'
+import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
 import { Separator } from '@/primitives/Separator'
-import { FullScreenMenuItem } from './FullScreenMenuItem'
-import { SettingsMenuItem } from './SettingsMenuItem'
-import { FeedbackMenuItem } from './FeedbackMenuItem'
-import { EffectsMenuItem } from './EffectsMenuItem'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { useSettingsDialog } from '../SettingsDialogContext'
+import { GRIST_FORM } from '@/utils/constants'

 // @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={{
@@ -14,15 +23,33 @@ export const OptionsMenuItems = () => {
        width: '300px',
      }}
    >
-      <MenuSection>
-        <FullScreenMenuItem />
-        <EffectsMenuItem />
-      </MenuSection>
+      <Section>
+        <MenuItem
+          onAction={() => toggleEffects()}
+          className={menuRecipe({ icon: true }).item}
+        >
+          <RiAccountBoxLine size={20} />
+          {t('effects')}
+        </MenuItem>
+      </Section>
      <Separator />
-      <MenuSection>
-        <FeedbackMenuItem />
-        <SettingsMenuItem />
-      </MenuSection>
+      <Section>
+        <MenuItem
+          href={GRIST_FORM}
+          target="_blank"
+          className={menuRecipe({ icon: true }).item}
+        >
+          <RiMegaphoneLine size={20} />
+          {t('feedbacks')}
+        </MenuItem>
+        <MenuItem
+          className={menuRecipe({ icon: true }).item}
+          onAction={() => setDialogOpen(true)}
+        >
+          <RiSettings3Line size={20} />
+          {t('settings')}
+        </MenuItem>
+      </Section>
    </RACMenu>
  )
 }
@@ -1,20 +0,0 @@
-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>
-  )
-}
@@ -118,6 +118,7 @@ export const ParticipantListItem = ({
    <HStack
      role="listitem"
      justify="space-between"
+      key={participant.identity}
      id={participant.identity}
      className={css({
        padding: '0.25rem 0',
@@ -56,10 +56,7 @@ export const ParticipantsList = () => {
            heading={t('raisedHands')}
            participants={raisedHandParticipants}
            renderParticipant={(participant) => (
-              <HandRaisedListItem
-                key={participant.identity}
-                participant={participant}
-              />
+              <HandRaisedListItem participant={participant} />
            )}
            action={() => (
              <LowerAllHandsButton participants={raisedHandParticipants} />
@@ -71,10 +68,7 @@ export const ParticipantsList = () => {
        heading={t('contributors')}
        participants={sortedParticipants}
        renderParticipant={(participant) => (
-          <ParticipantListItem
-            key={participant.identity}
-            participant={participant}
-          />
+          <ParticipantListItem participant={participant} />
        )}
      />
    </Div>
@@ -46,9 +46,9 @@ export const ScreenShareToggle = ({
      {...props}
    >
      <Div position="relative">
-        <RiRectangleLine size={24} />
+        <RiRectangleLine size={28} />
        <Icon
-          size={14}
+          size={16}
          style={{
            position: 'absolute',
            top: '50%',
@@ -13,21 +13,12 @@ import {
  RiVideoOffLine,
  RiVideoOnLine,
 } from '@remixicon/react'
-import {
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-  VideoCaptureOptions,
-} from 'livekit-client'
+import { Track } 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,
@@ -74,22 +65,12 @@ 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
  }

 export const SelectToggleDevice = <T extends ToggleSource>({
-  track,
-  initialDeviceId,
  onActiveDeviceChange,
-  hideMenu,
-  variant = 'primaryDark',
-  menuVariant = 'light',
  ...props
 }: SelectToggleDeviceProps<T>) => {
  const config = selectToggleDeviceConfig[props.source]
@@ -99,53 +80,8 @@ export const SelectToggleDevice = <T extends ToggleSource>({
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
  const trackProps = useTrackToggle(props)

-  const { userChoices } = usePersistentUserChoices({})
-
-  const toggle = () => {
-    if (props.source === Track.Source.Camera) {
-      /**
-       * We need to make sure that we apply the in-memory processor when re-enabling the camera.
-       * Before, we had the following bug:
-       * 1 - Configure a processor on join screen
-       * 2 - Turn off camera on join screen
-       * 3 - Join the room
-       * 4 - Turn on the camera
-       * 5 - No processor is applied to the camera
-       * Expected: The processor is applied.
-       *
-       * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
-       */
-      const processor = BackgroundProcessorFactory.deserializeProcessor(
-        userChoices.processorSerialized
-      )
-
-      const toggle = trackProps.toggle as (
-        forceState: boolean,
-        captureOptions: VideoCaptureOptions
-      ) => Promise<void>
-
-      toggle(!trackProps.enabled, {
-        processor: processor,
-      } as VideoCaptureOptions)
-    } else {
-      trackProps.toggle()
-    }
-  }
-
  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind, track })
-
-  /**
-   * 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])
+    useMediaDeviceSelect({ kind: config.kind })

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

@@ -156,44 +92,29 @@ export const SelectToggleDevice = <T extends ToggleSource>({
        gap: '1px',
      })}
    >
-      <ToggleDevice
-        {...trackProps}
-        config={config}
-        variant={variant}
-        toggle={toggle}
-        toggleButtonProps={{
-          ...(hideMenu
-            ? {
-                groupPosition: undefined,
-              }
-            : {}),
-        }}
-      />
-      {!hideMenu && (
-        <Menu variant={menuVariant}>
-          <Button
-            tooltip={selectLabel}
-            aria-label={selectLabel}
-            groupPosition="right"
-            square
-            variant={trackProps.enabled ? variant : 'error2'}
-          >
-            <RiArrowDownSLine />
-          </Button>
-          <MenuList
-            items={devices.map((d) => ({
-              value: d.deviceId,
-              label: d.label,
-            }))}
-            selectedItem={activeDeviceId}
-            onAction={(value) => {
-              setActiveMediaDevice(value as string)
-              onActiveDeviceChange(value as string)
-            }}
-            variant={menuVariant}
-          />
-        </Menu>
-      )}
+      <ToggleDevice {...trackProps} config={config} />
+      <Menu>
+        <Button
+          tooltip={selectLabel}
+          aria-label={selectLabel}
+          groupPosition="right"
+          square
+          variant={trackProps.enabled ? 'primaryDark' : 'error2'}
+        >
+          <RiArrowDownSLine />
+        </Button>
+        <MenuList
+          items={devices.map((d) => ({
+            value: d.deviceId,
+            label: d.label,
+          }))}
+          selectedItem={activeDeviceId}
+          onAction={(value) => {
+            setActiveMediaDevice(value as string)
+            onActiveDeviceChange(value as string)
+          }}
+        />
+      </Menu>
    </div>
  )
 }
@@ -4,14 +4,10 @@ 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(() => {
-    return window?.$crisp?.is?.('chat:opened') || false
-  })
+  const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))

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

-  const isSupportEnabled = useIsSupportEnabled()
-
-  if (!isSupportEnabled) {
-    return
-  }
-
  return (
    <ToggleButton
      square
@@ -6,28 +6,18 @@ 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,
-  useMaybeRoomContext,
-} from '@livekit/components-react'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'

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

 export const ToggleDevice = ({
  config,
  enabled,
  toggle,
-  variant = 'primaryDark',
-  toggleButtonProps,
 }: ToggleDeviceProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })

@@ -58,29 +48,24 @@ export const ToggleDevice = ({

  const Icon = enabled ? iconOn : iconOff

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

  return (
    <ToggleButton
      isSelected={!enabled}
-      variant={enabled ? variant : 'error2'}
+      variant={enabled ? 'primaryDark' : 'error2'}
      shySelected
      onPress={() => toggle()}
      aria-label={toggleLabel}
      tooltip={toggleLabel}
      groupPosition="left"
-      {...toggleButtonProps}
    >
      <Icon />
    </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 = 'primaryTextDark',
+  variant = 'primaryDark',
  onPress,
  ...props
 }: ToggleButtonProps) => {
@@ -1,27 +0,0 @@
-import { useLocalParticipant } from '@livekit/components-react'
-import { LocalVideoTrack } from 'livekit-client'
-import { css } from '@/styled-system/css'
-import { EffectsConfiguration } from './EffectsConfiguration'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-
-export const Effects = () => {
-  const { cameraTrack } = useLocalParticipant()
-  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
-  const { saveProcessorSerialized } = usePersistentUserChoices()
-
-  return (
-    <div
-      className={css({
-        padding: '0 1.5rem',
-      })}
-    >
-      <EffectsConfiguration
-        videoTrack={localCameraTrack}
-        layout="vertical"
-        onSubmit={(processor) =>
-          saveProcessorSerialized(processor?.serialize())
-        }
-      />
-    </div>
-  )
-}
@@ -1,316 +0,0 @@
-import { LocalVideoTrack } 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'
-
-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 [processorPending, setProcessorPending] = useState(false)
-
-  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
-  ) => {
-    if (!videoTrack) return
-    setProcessorPending(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 blur:', 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,
-        })}
-      >
-        {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>
-        )}
-      </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={processorPending}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.LIGHT,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                  >
-                    <BlurOn />
-                  </ToggleButton>
-                  <ToggleButton
-                    variant="bigSquare"
-                    aria-label={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    tooltip={tooltipLabel(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    isDisabled={processorPending}
-                    onChange={async () =>
-                      await toggleEffect(ProcessorType.BLUR, {
-                        blurRadius: BlurRadius.NORMAL,
-                      })
-                    }
-                    isSelected={isSelected(ProcessorType.BLUR, {
-                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                  >
-                    <BlurOnStrong />
-                  </ToggleButton>
-                </div>
-              </div>
-              <div
-                className={css({
-                  marginTop: '1.5rem',
-                })}
-              >
-                <H
-                  lvl={3}
-                  style={{
-                    marginBottom: '1rem',
-                  }}
-                  variant="bodyXsBold"
-                >
-                  {t('virtual.title')}
-                </H>
-                <div
-                  className={css({
-                    display: 'flex',
-                    gap: '1.25rem',
-                    flexWrap: 'wrap',
-                  })}
-                >
-                  {[...Array(8).keys()].map((i) => {
-                    const imagePath = `/assets/backgrounds/${i + 1}.jpg`
-                    const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
-                    return (
-                      <ToggleButton
-                        key={i}
-                        variant="bigSquare"
-                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        isDisabled={processorPending}
-                        onChange={async () =>
-                          await toggleEffect(ProcessorType.VIRTUAL, {
-                            imagePath,
-                          })
-                        }
-                        isSelected={isSelected(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        className={css({
-                          bgSize: 'cover',
-                        })}
-                        style={{
-                          backgroundImage: `url(${thumbnailPath})`,
-                        }}
-                      ></ToggleButton>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-            <Information className={css({ marginTop: '1rem' })}>
-              <Text variant="sm">⚠︎ {t('experimental')}</Text>
-            </Information>
-          </>
-        ) : (
-          <Information>
-            <Text variant="sm">{t('notAvailable')}</Text>
-          </Information>
-        )}
-      </div>
-    </div>
-  )
-}
@@ -1,68 +0,0 @@
-// We use vendor prefix properties
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-import { useState } from 'react'
-
-export function useFullScreen() {
-  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 = 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,
-  }
-}
@@ -1,56 +0,0 @@
-import { UsePersistentUserChoicesOptions } from '@livekit/components-react'
-import React from 'react'
-import { LocalUserChoices } from '../../routes/Room'
-import { saveUserChoices, loadUserChoices } from '@livekit/components-core'
-import { ProcessorSerialized } from '../components/blur'
-
-/**
- * From @livekit/component-react
- *
- * A hook that provides access to user choices stored in local storage, such as
- * selected media devices and their current state (on or off), as well as the user name.
- * @alpha
- */
-export function usePersistentUserChoices(
-  options: UsePersistentUserChoicesOptions = {}
-) {
-  const [userChoices, setSettings] = React.useState<LocalUserChoices>(
-    loadUserChoices(options.defaults, options.preventLoad ?? false)
-  )
-
-  const saveAudioInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, audioEnabled: isEnabled }))
-  }, [])
-  const saveVideoInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, videoEnabled: isEnabled }))
-  }, [])
-  const saveAudioInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, audioDeviceId: deviceId }))
-  }, [])
-  const saveVideoInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, videoDeviceId: deviceId }))
-  }, [])
-  const saveUsername = React.useCallback((username: string) => {
-    setSettings((prev) => ({ ...prev, username: username }))
-  }, [])
-  const saveProcessorSerialized = React.useCallback(
-    (processorSerialized?: ProcessorSerialized) => {
-      setSettings((prev) => ({ ...prev, processorSerialized }))
-    },
-    []
-  )
-
-  React.useEffect(() => {
-    saveUserChoices(userChoices, options.preventSave ?? false)
-  }, [userChoices, options.preventSave])
-
-  return {
-    userChoices,
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-    saveUsername,
-    saveProcessorSerialized,
-  }
-}
@@ -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,8 +8,10 @@ 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 { MoreOptions } from './MoreOptions'
-import { useRef } from 'react'
+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'

 export function DesktopControlBar({
  onDeviceError,
@@ -19,11 +21,9 @@ 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,6 @@ export function DesktopControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveAudioInputDeviceId(deviceId ?? '')
            }
-            menuVariant="dark"
          />
          <SelectToggleDevice
            source={Track.Source.Camera}
@@ -73,7 +72,6 @@ export function DesktopControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveVideoInputDeviceId(deviceId ?? '')
            }
-            menuVariant="dark"
          />
          {browserSupportsScreenSharing && (
            <ScreenShareToggle
@@ -87,7 +85,21 @@ export function DesktopControlBar({
          <LeaveButton />
          <StartMediaButton />
        </div>
-        <MoreOptions parentElement={desktopControlBarEl} />
+        <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>
      </div>
    </>
  )
@@ -23,7 +23,6 @@ import { LinkButton } from '@/primitives'
 import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
 import { ResponsiveMenu } from './ResponsiveMenu'
 import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
-import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'

 export function MobileControlBar({
  onDeviceError,
@@ -56,7 +55,7 @@ export function MobileControlBar({
          className={css({
            display: 'flex',
            justifyContent: 'space-between',
-            width: '330px',
+            width: '422px',
          })}
        >
          <LeaveButton />
@@ -69,7 +68,6 @@ export function MobileControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveAudioInputDeviceId(deviceId ?? '')
            }
-            hideMenu={true}
          />
          <SelectToggleDevice
            source={Track.Source.Camera}
@@ -80,7 +78,6 @@ export function MobileControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveVideoInputDeviceId(deviceId ?? '')
            }
-            hideMenu={true}
          />
          <HandToggle />
          <Button
@@ -157,8 +154,8 @@ export function MobileControlBar({
            <LinkButton
              href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
              variant="primaryTextDark"
-              tooltip={t('options.items.feedback')}
-              aria-label={t('options.items.feedback')}
+              tooltip={t('options.items.feedbacks')}
+              aria-label={t('options.items.feedbacks')}
              description={true}
              target="_blank"
              onPress={() => setIsMenuOpened(false)}
@@ -177,7 +174,6 @@ export function MobileControlBar({
            >
              <RiSettings3Line size={20} />
            </Button>
-            <CameraSwitchButton onPress={() => setIsMenuOpened(false)} />
          </div>
        </div>
      </ResponsiveMenu>
@@ -1,87 +0,0 @@
-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 as LocalUserChoicesLK,
+  type LocalUserChoices,
 } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -9,11 +9,6 @@ import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
-import { ProcessorSerialized } from '../livekit/components/blur'
-
-export type LocalUserChoices = LocalUserChoicesLK & {
-  processorSerialized?: ProcessorSerialized
-}

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

 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
  Pick<TabPanelProps, 'id'>
@@ -1,7 +1,6 @@
 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
@@ -30,8 +29,3 @@ export const useSupport = ({ id }: useSupportProps) => {

  return null
 }
-
-export const useIsSupportEnabled = () => {
-  const { data } = useConfig()
-  return !!data?.support?.id
-}
@@ -242,7 +242,7 @@ export const Footer = () => {
              {t('links.data')}
            </A>
          </StyledLi>
-          <StyledLi divider>
+          <StyledLi>
            <A
              externalIcon
              underline={false}
@@ -255,17 +255,6 @@ export const Footer = () => {
              {t('links.accessibility')}
            </A>
          </StyledLi>
-          <StyledLi>
-            <A
-              externalIcon
-              underline={false}
-              footer="minor"
-              href="https://github.com/numerique-gouv/meet/"
-              aria-label={t('links.code') + ' - ' + t('links.ariaLabel')}
-            >
-              {t('links.code')}
-            </A>
-          </StyledLi>
        </SecondRow>
        <ThirdRow>
          {t('mentions')}{' '}
@@ -34,8 +34,7 @@
      "legalsTerms": "",
      "data": "",
      "accessibility": "",
-      "ariaLabel": "",
-      "code": ""
+      "ariaLabel": ""
    },
    "mentions": "",
    "license": ""
@@ -19,22 +19,12 @@
      "label": ""
    },
    "heading": "",
-    "effects": {
-      "description": "",
-      "title": "",
-      "subTitle": ""
-    },
    "joinLabel": "",
    "joinMeeting": "",
    "toggleOff": "",
    "toggleOn": "",
    "usernameHint": "",
-    "usernameLabel": "",
-    "errors": {
-      "usernameEmpty": ""
-    },
-    "cameraDisabled": "",
-    "cameraStarting": ""
+    "usernameLabel": ""
  },
  "leaveRoomPrompt": "",
  "shareDialog": {
@@ -85,21 +75,15 @@
      "open": "",
      "closed": ""
    },
-    "support": "",
-    "moreOptions": ""
+    "support": ""
  },
  "options": {
    "buttonLabel": "",
    "items": {
-      "feedback": "",
+      "feedbacks": "",
      "settings": "",
      "username": "",
-      "effects": "",
-      "switchCamera": "",
-      "fullscreen": {
-        "enter": "",
-        "exit": ""
-      }
+      "effects": ""
    }
  },
  "effects": {
@@ -107,17 +91,11 @@
    "notAvailable": "",
    "heading": "",
    "blur": {
-      "title": "",
      "light": "",
      "normal": "",
      "apply": "",
      "clear": ""
    },
-    "virtual": {
-      "title": "",
-      "apply": "",
-      "clear": ""
-    },
    "experimental": ""
  },
  "sidePanel": {
@@ -34,8 +34,7 @@
      "legalsTerms": "Legal Notice",
      "data": "Personal Data and Cookies",
      "accessibility": "Accessibility: audit in progress",
-      "ariaLabel": "new window",
-      "code": "Open Source Code Repository"
+      "ariaLabel": "new window"
    },
    "mentions": "Unless otherwise stated, the contents of this site are available under",
    "license": "etalab 2.0 license"
@@ -18,23 +18,13 @@
      "enable": "Enable microphone",
      "label": "Microphone"
    },
-    "effects": {
-      "description": "Apply effects",
-      "title": "Effects",
-      "subTitle": "Configure your camera's effects."
-    },
-    "heading": "Join the meeting",
+    "heading": "Verify your settings",
    "joinLabel": "Join",
    "joinMeeting": "Join meeting",
    "toggleOff": "Click to turn off",
    "toggleOn": "Click to turn on",
    "usernameHint": "Shown to other participants",
-    "usernameLabel": "Your name",
-    "errors": {
-      "usernameEmpty": "Your name cannot be empty"
-    },
-    "cameraDisabled": "Camera is disabled.",
-    "cameraStarting": "Camera is starting."
+    "usernameLabel": "Your name"
  },
  "leaveRoomPrompt": "This will make you leave the meeting.",
  "shareDialog": {
@@ -84,39 +74,27 @@
      "open": "Hide AI assistant",
      "closed": "Show AI assistant"
    },
-    "support": "Support",
-    "moreOptions": "More options"
+    "support": "Support"
  },
  "options": {
    "buttonLabel": "More Options",
    "items": {
-      "feedback": "Give us feedback",
+      "feedbacks": "Give us feedbacks",
      "settings": "Settings",
      "username": "Update Your Name",
-      "effects": "Apply effects",
-      "switchCamera": "Switch camera",
-      "fullscreen": {
-        "enter": "Fullscreen",
-        "exit": "Exit fullscreen mode"
-      }
+      "effects": "Apply effects"
    }
  },
  "effects": {
    "activateCamera": "Your camera is disabled. Choose an option to enable it.",
-    "notAvailable": "Video effects will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
+    "notAvailable": "The blur effect will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome :(",
    "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": {
@@ -34,8 +34,7 @@
      "legalsTerms": "Mentions légales",
      "data": "Données personnelles et cookie",
      "accessibility": "Accessibilités : audit en cours",
-      "ariaLabel": "nouvelle fenêtre",
-      "code": "Dépôt de code Open Source"
+      "ariaLabel": "nouvelle fenêtre"
    },
    "mentions": "Sauf mention contraire, les contenus de ce site sont disponibles sous",
    "license": "licence etalab 2.0"
@@ -18,23 +18,13 @@
      "enable": "Activer le micro",
      "label": "Microphone"
    },
-    "heading": "Rejoindre la réunion",
-    "effects": {
-      "description": "Appliquer des effets",
-      "title": "Effets",
-      "subTitle": "Paramétrez les effets de votre caméra."
-    },
+    "heading": "Vérifiez vos paramètres",
    "joinLabel": "Rejoindre",
    "joinMeeting": "Rejoindre la réjoindre",
    "toggleOff": "Cliquez pour désactiver",
    "toggleOn": "Cliquez pour activer",
    "usernameHint": "Affiché aux autres participants",
-    "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."
+    "usernameLabel": "Votre nom"
  },
  "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
  "shareDialog": {
@@ -84,39 +74,27 @@
      "open": "Masquer l'assistant IA",
      "closed": "Afficher l'assistant IA"
    },
-    "support": "Support",
-    "moreOptions": "Plus d'options"
+    "support": "Support"
  },
  "options": {
    "buttonLabel": "Plus d'options",
    "items": {
-      "feedback": "Partager votre avis",
+      "feedbacks": "Partager votre avis",
      "settings": "Paramètres",
      "username": "Choisir votre nom",
-      "effects": "Appliquer des effets",
-      "switchCamera": "Changer de caméra",
-      "fullscreen": {
-        "enter": "Plein écran",
-        "exit": "Quitter le mode plein écran"
-      }
+      "effects": "Appliquer des effets"
    }
  },
  "effects": {
    "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
-    "notAvailable": "Les effets vidéo seront bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour une meilleure performance ou Firefox :(",
+    "notAvailable": "L'effet de flou sera bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome :(",
    "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": {
@@ -30,7 +30,7 @@ const box = cva({
      },
    },
    variant: {
-      light: {
+      default: {
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: 'box.border',
@@ -46,10 +46,6 @@ const box = cva({
        backgroundColor: 'box.bg',
        color: 'control.text',
      },
-      dark: {
-        backgroundColor: 'primaryDark.50',
-        borderColord: 'primaryDark.50',
-      },
    },
    size: {
      default: {
@@ -61,7 +57,7 @@ const box = cva({
    },
  },
  defaultVariants: {
-    variant: 'light',
+    variant: 'default',
    size: 'default',
  },
 })
@@ -11,7 +11,6 @@ import {
 import { Div, Button, Box, VerticallyOffCenter } from '@/primitives'
 import { text } from './Text'
 import { MutableRefObject } from 'react'
-import { css } from '@/styled-system/css'

 const StyledModalOverlay = styled(ModalOverlay, {
  base: {
@@ -49,24 +48,6 @@ const StyledRACDialog = styled(RACDialog, {
  },
 })

-const ModalContent = styled('div', {
-  base: {
-    margin: 'auto',
-  },
-  variants: {
-    size: {
-      full: {
-        width: 'fit-content',
-        maxWidth: '100%',
-      },
-      large: {
-        width: '100%',
-        xl: { width: '1200px' },
-      },
-    },
-  },
-})
-
 export type DialogProps = RACDialogProps & {
  title?: string
  onClose?: () => void
@@ -82,7 +63,6 @@ export type DialogProps = RACDialogProps & {
  onOpenChange?: (isOpen: boolean) => void
  type?: 'flex'
  innerRef?: MutableRefObject<HTMLDivElement | null>
-  size?: 'full' | 'large'
 }

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

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

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

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

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

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

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

  if (type === 'select') {
    return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
        <Select
          validate={validate as unknown as SelectProps<T>['validate']}
          {...(props as PartialSelectProps<T>)}
@@ -3,7 +3,6 @@ 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
@@ -14,7 +13,6 @@ import { ButtonProps } from '@/primitives/Button'
 export const Form = ({
  onSubmit,
  submitLabel,
-  submitButtonProps,
  withCancelButton = true,
  onCancelButtonPress,
  children,
@@ -27,7 +25,6 @@ export const Form = ({
    event: FormEvent<HTMLFormElement>
  ) => void
  submitLabel: string
-  submitButtonProps?: ButtonProps
  withCancelButton?: boolean
  onCancelButtonPress?: () => void
 }) => {
@@ -50,7 +47,7 @@ export const Form = ({
    >
      {children}
      <HStack gap="gutter">
-        <Button type="submit" variant="primary" {...submitButtonProps}>
+        <Button type="submit" variant="primary">
          {submitLabel}
        </Button>
        {!!onCancel && (
@@ -1,12 +1,10 @@
-import { Text, TextProps } from './Text'
+import { Text } from './Text'

 export const H = ({
  children,
  lvl,
  ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & {
-  lvl: 1 | 2 | 3
-} & TextProps) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { lvl: 1 | 2 | 3 }) => {
  const tag = `h${lvl}` as const
  return (
    <Text as={tag} variant={tag} {...props}>
@@ -8,17 +8,15 @@ import { Box } from './Box'
 */
 export const Menu = ({
  children,
-  variant = 'light',
 }: {
  children: [trigger: ReactNode, menu: ReactNode]
-  variant?: 'dark' | 'light'
 }) => {
  const [trigger, menu] = children
  return (
    <MenuTrigger>
      {trigger}
      <StyledPopover>
-        <Box size="sm" type="popover" variant={variant}>
+        <Box size="sm" type="popover">
          {menu}
        </Box>
      </StyledPopover>
@@ -10,7 +10,6 @@ export const MenuList = <T extends string | number = string>({
  onAction,
  selectedItem,
  items = [],
-  variant = 'light',
  ...menuProps
 }: {
  onAction: (key: T) => void
@@ -19,11 +18,7 @@ export const MenuList = <T extends string | number = string>({
 } & MenuProps<unknown> &
  RecipeVariantProps<typeof menuRecipe>) => {
  const [variantProps] = menuRecipe.splitVariantProps(menuProps)
-  const classes = menuRecipe({
-    extraPadding: true,
-    variant: variant,
-    ...variantProps,
-  })
+  const classes = menuRecipe({ extraPadding: true, ...variantProps })
  return (
    <Menu
      selectionMode={selectedItem !== undefined ? 'single' : undefined}
@@ -4,7 +4,7 @@ import { Separator as RACSeparator } from 'react-aria-components'
 export const Separator = styled(RACSeparator, {
  base: {
    height: '1px',
-    background: 'primaryDark.200',
+    background: 'gray.400',
    margin: '4px 0',
  },
 })
@@ -28,14 +28,6 @@ export const text = cva({
          paddingTop: 'heading',
        },
      },
-      subTitle: {
-        fontSize: '1rem',
-        color: 'greyscale.600',
-      },
-      bodyXsBold: {
-        textStyle: 'body',
-        fontWeight: 'bold',
-      },
      body: {
        textStyle: 'body',
      },
@@ -27,7 +27,7 @@ export const ToggleButton = ({
    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
      <RACToggleButton
        {...componentProps}
-        className={[buttonRecipe(variantProps), props.className].join(' ')}
+        className={buttonRecipe(variantProps)}
      >
        <>
          {componentProps.children as ReactNode}
@@ -73,35 +73,6 @@ export const buttonRecipe = cva({
          color: 'greyscale.400',
        },
      },
-      whiteCircle: {
-        color: 'white',
-        border: '1px white solid',
-        width: '56px',
-        height: '56px',
-        borderRadius: '100%',
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100/20',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'greyscale.100/50',
-        },
-      },
-      bigSquare: {
-        width: '56px',
-        height: '56px',
-        borderColor: 'greyscale.200',
-        borderRadius: '4px',
-        backgroundColor: 'greyscale.50',
-        padding: '0',
-        flexShrink: 0,
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100',
-        },
-        transition: 'box-shadow 0.2s ease-in-out',
-        '&[data-selected]': {
-          boxShadow: 'token(colors.primary.400) 0px 0px 0px 3px inset',
-        },
-      },
      tertiary: {
        backgroundColor: 'primary.100',
        color: 'primary.800',
@@ -138,21 +109,6 @@ export const buttonRecipe = cva({
          color: 'primaryDark.100 !important',
        },
      },
-      secondaryDark: {
-        backgroundColor: 'primaryDark.50',
-        color: 'white',
-        '&[data-pressed]': {
-          backgroundColor: 'primaryDark.200',
-        },
-        '&[data-hovered]': {
-          backgroundColor: 'primaryDark.100',
-          color: 'white',
-        },
-        '&[data-selected]': {
-          backgroundColor: 'primaryDark.700 !important',
-          color: 'primaryDark.100 !important',
-        },
-      },
      primaryTextDark: {
        backgroundColor: 'transparent',
        color: 'white',
@@ -46,11 +46,7 @@ export const menuRecipe = sva({
          },
        },
      },
-      dark: {
-        item: {
-          color: 'white',
-        },
-      },
+      dark: {},
    },
    extraPadding: {
      true: {
@@ -71,6 +67,6 @@ export const menuRecipe = sva({
    },
  },
  defaultVariants: {
-    variant: 'light',
+    variant: 'dark',
  },
 })
@@ -10,7 +10,6 @@ export default defineConfig(({ mode }) => {
    server: {
      port: parseInt(env.VITE_PORT) || 3000,
      host: env.VITE_HOST || 'localhost',
-      allowedHosts: ['.nip.io'],
    },
  }
 })
@@ -21,12 +21,19 @@ backend:
    OIDC_OP_TOKEN_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/token
    OIDC_OP_USER_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/userinfo
    OIDC_OP_LOGOUT_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/session/end
-    OIDC_RP_CLIENT_ID: meet
-    OIDC_RP_CLIENT_SECRET: ThisIsAnExampleKeyForDevPurposeOnly
+    OIDC_RP_CLIENT_ID:
+      secretKeyRef:
+        name: backend
+        key: OIDC_RP_CLIENT_ID
+    OIDC_RP_CLIENT_SECRET:
+      secretKeyRef:
+        name: backend
+        key: OIDC_RP_CLIENT_SECRET
    OIDC_RP_SIGN_ALGO: RS256
    OIDC_RP_SCOPES: "openid email"
    OIDC_REDIRECT_ALLOWED_HOSTS: https://meet.127.0.0.1.nip.io
    OIDC_AUTH_REQUEST_EXTRA_PARAMS: "{'acr_values': 'eidas1'}"
+    OIDC_VERIFY_SSL: False
    LOGIN_REDIRECT_URL: https://meet.127.0.0.1.nip.io
    LOGIN_REDIRECT_URL_FAILURE: https://meet.127.0.0.1.nip.io
    LOGOUT_REDIRECT_URL: https://meet.127.0.0.1.nip.io
@@ -56,7 +63,7 @@ backend:
    AWS_STORAGE_BUCKET_NAME: meet-media-storage
    AWS_S3_REGION_NAME: local
    RECORDING_ENABLE: True
-    RECORDING_VERIFY_SSL: True
+    RECORDING_VERIFY_SSL: False
    RECORDING_STORAGE_EVENT_ENABLE: True
    RECORDING_STORAGE_EVENT_TOKEN: password
    SUMMARY_SERVICE_ENDPOINT: http://meet-summary:80/api/v1/tasks/
@@ -87,21 +94,6 @@ backend:
        python manage.py createsuperuser --email admin@example.com --password admin
    restartPolicy: Never

-  # Extra volume mounts to manage our local custom CA and avoid to set ssl_verify: false
-  extraVolumeMounts:
-    - name: certs
-      mountPath: /usr/local/lib/python3.12/site-packages/certifi/cacert.pem
-      subPath: cacert.pem
-
-  # Extra volumes to manage our local custom CA and avoid to set ssl_verify: false
-  extraVolumes:
-    - name: certs
-      configMap:
-        name: certifi
-        items:
-        - key: cacert.pem
-          path: cacert.pem
-
 frontend:
  envVars:
    VITE_PORT: 8080
@@ -126,7 +118,7 @@ ingressAdmin:
 posthog:
  ingress:
    enabled: false
-  
+
  ingressAssets:
    enabled: false

@@ -148,12 +140,12 @@ summary:
    WEBHOOK_URL: https://www.mock-impress.com/webhook/
    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
-  
+
  image:
    repository: localhost:5001/meet-summary
    pullPolicy: Always
    tag: "latest"
-  
+
  command:
    - "uvicorn"
    - "summary.main:app"
@@ -181,7 +173,7 @@ celery:
    WEBHOOK_URL: https://www.mock-impress.com/webhook/
    CELERY_BROKER_URL: redis://default:pass@redis-master:6379/1
    CELERY_RESULT_BACKEND: redis://default:pass@redis-master:6379/1
-  
+
  image:
    repository: localhost:5001/meet-summary
    pullPolicy: Always
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
lebaudantoine	8d9ac96d2b	wip invalidate cache when room is finished	2025-01-06 19:37:46 +01:00
lebaudantoine	5428aec43e	wip fix errors related to re-rendering and web workers	2025-01-05 01:13:17 +01:00
lebaudantoine	a2408aebff	wip encrypt and encode passphrase while storing it in cache	2025-01-04 23:58:49 +01:00
lebaudantoine	3e3ca6a87b	use redis instead of cache	2025-01-04 23:11:45 +01:00
lebaudantoine	9830940d61	rename misleading name slug is another term in our app this is the room id	2025-01-04 23:11:22 +01:00
lebaudantoine	dd7e3a7c44	wip generate a random passphrase cached by slug	2025-01-04 14:12:45 +01:00
lebaudantoine	1cf26eec19	wip get passphrase from the backend	2025-01-04 13:20:55 +01:00
lebaudantoine	83d4028e84	wip hardcode a passphrase and enable e2ee inspired by LiveKit repo, follow their example	2025-01-04 13:07:26 +01:00
lebaudantoine	ac65404ad6	⚗️(backend) annotate when and what is required for ee2e commit will be dropped.	2025-01-04 12:07:28 +01:00