✨(frontend) introduce a recording toaster

Notify visually users that the room is being recorded.
Draft, it will be enhance the future.

.github/workflows/helmfile-linter.yml

@@ -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"

.github/workflows/release-helm-chart.yaml

@@ -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 }}

Makefile

@@ -301,14 +301,7 @@ 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
 
-start-tilt-keycloak: ## start the kubernetes cluster using kind, without Pro Connect for authentication, use keycloak
-	DEV_ENV=dev-keycloak tilt up -f ./bin/Tiltfile
-.PHONY: build-k8s-cluster

README.md

@@ -118,8 +118,6 @@ $ make build-k8s-cluster
 Once the Kubernetes cluster is ready, start the application stack locally:
 ```shell
 $ make start-tilt
-or
-$ make start-tilt-keycloak # start stack without Pro Connect, use keycloak
 ```
 These commands set up and run your application environment using Tilt for local Kubernetes development.
 

bin/Tiltfile

@@ -38,7 +38,7 @@ docker_build(
     ]
 )
 
-k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev} template .'))
+k8s_yaml(local('cd ../src/helm && helmfile -n meet -e dev template .'))
 
 migration = '''
 set -eu

bin/install-external-secrets.sh

@@ -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 "$@"

bin/install-hooks.sh

@@ -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"

bin/start-kind.sh

@@ -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"

bin/update-git-submodule.sh

@@ -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'

bin/update-keys.sh

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

bin/validate-helm-configuration.sh

@@ -1,4 +1,4 @@
-#!/usr/bin/env bash
+#!/bin/bash
 
 set -e
 

docs/examples/livekit.values.yaml

@@ -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: {}

docs/examples/meet.values.yaml

@@ -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

docs/examples/postgresql.values.yaml

@@ -1,7 +0,0 @@
-auth:
-  username: dinum
-  password: pass
-  database: meet
-tls:
-  enabled: true
-  autoGenerated: true

docs/examples/redis.values.yaml

@@ -1,3 +0,0 @@
-auth:
-  password: pass
-architecture: standalone

docs/installation.md

@@ -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.

renovate.json

@@ -14,7 +14,7 @@
       "groupName": "ignored js dependencies",
       "matchManagers": ["npm"],
       "matchPackageNames": [
-        "eslint", "react", "react-dom", "@types/react-dom", "@types/react", "react-i18next"
+        "eslint"
       ]
     }
   ]

src/backend/core/authentication/backends.py

@@ -1,7 +1,7 @@
 """Authentication Backends for the Meet core app."""
 
 from django.conf import settings
-from django.core.exceptions import ImproperlyConfigured, SuspiciousOperation
+from django.core.exceptions import SuspiciousOperation
 from django.utils.translation import gettext_lazy as _
 
 import requests
@@ -10,11 +10,6 @@ from mozilla_django_oidc.auth import (
 )
 
 from core.models import User
-from core.services.marketing_service import (
-    ContactCreationError,
-    ContactData,
-    get_marketing_service,
-)
 
 
 class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
@@ -91,10 +86,6 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
                 password="!",  # noqa: S106
                 **claims,
             )
-
-            if settings.SIGNUP_NEW_USER_TO_MARKETING_EMAIL:
-                self.signup_to_marketing_email(email)
-
         elif not user:
             return None
 
@@ -105,26 +96,6 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
 
         return user
 
-    @staticmethod
-    def signup_to_marketing_email(email):
-        """Pragmatic approach to newsletter signup during authentication flow.
-
-        Details:
-        1. Uses a very short timeout (1s) to prevent blocking the auth process
-        2. Silently fails if the marketing service is down/slow to prioritize user experience
-        3. Trade-off: May miss some signups but ensures auth flow remains fast
-
-        Note: For a more robust solution, consider using Async task processing (Celery/Django-Q)
-        """
-        try:
-            marketing_service = get_marketing_service()
-            contact_data = ContactData(
-                email=email, attributes={"VISIO_SOURCE": ["SIGNIN"]}
-            )
-            marketing_service.create_contact(contact_data, timeout=1)
-        except (ContactCreationError, ImproperlyConfigured, ImportError):
-            pass
-
     def get_existing_user(self, sub, email):
         """Fetch existing user by sub or email."""
         try:

src/backend/core/authentication/views.py

@@ -145,7 +145,7 @@ class OIDCLogoutCallbackView(MozillaOIDCOIDCLogoutView):
 
 
 class OIDCAuthenticationCallbackView(MozillaOIDCAuthenticationCallbackView):
-    """Custom callback view for handling the silent login flow."""
+    """Custom callback view for handling the silent loging flow."""
 
     @property
     def failure_url(self):
@@ -162,7 +162,7 @@ class OIDCAuthenticationCallbackView(MozillaOIDCAuthenticationCallbackView):
 
 
 class OIDCAuthenticationRequestView(MozillaOIDCAuthenticationRequestView):
-    """Custom authentication view for handling the silent login flow."""
+    """Custom authentication view for handling the silent loging flow."""
 
     def get_extra_params(self, request):
         """Handle 'prompt' extra parameter for the silent login flow

src/backend/core/migrations/0010_alter_resourceaccess_options_alter_user_options.py

@@ -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'},
-        ),
-    ]

src/backend/core/models.py

@@ -189,7 +189,6 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
 
     class Meta:
         db_table = "meet_user"
-        ordering = ("-created_at",)
         verbose_name = _("user")
         verbose_name_plural = _("users")
 
@@ -305,7 +304,6 @@ class ResourceAccess(BaseModel):
 
     class Meta:
         db_table = "meet_resource_access"
-        ordering = ("-created_at",)
         verbose_name = _("Resource access")
         verbose_name_plural = _("Resource accesses")
         constraints = [

src/backend/core/services/marketing_service.py

@@ -1,134 +0,0 @@
-"""Marketing service in charge of pushing data for marketing automation."""
-
-import logging
-from dataclasses import dataclass
-from functools import lru_cache
-from typing import Dict, List, Optional, Protocol
-
-from django.conf import settings
-from django.core.exceptions import ImproperlyConfigured
-from django.utils.module_loading import import_string
-
-import brevo_python
-
-logger = logging.getLogger(__name__)
-
-
-class ContactCreationError(Exception):
-    """Raised when the contact creation fails."""
-
-
-@dataclass
-class ContactData:
-    """Contact data for marketing service integration."""
-
-    email: str
-    attributes: Optional[Dict[str, str]] = None
-    list_ids: Optional[List[int]] = None
-    update_enabled: bool = True
-
-
-class MarketingServiceProtocol(Protocol):
-    """Interface for marketing automation service integrations."""
-
-    def create_contact(
-        self, contact_data: ContactData, timeout: Optional[int] = None
-    ) -> dict:
-        """Create or update a contact.
-
-        Args:
-            contact_data: Contact information and attributes
-            timeout: API request timeout in seconds
-
-        Returns:
-            dict: Service response
-
-        Raises:
-            ContactCreationError: If contact creation fails
-        """
-
-
-class BrevoMarketingService:
-    """Brevo marketing automation integration.
-
-    Handles:
-    - Contact management and segmentation
-    - Marketing campaigns and automation
-    - Email communications
-
-    Configuration via Django settings:
-    - BREVO_API_KEY: API authentication
-    - BREVO_API_CONTACT_LIST_IDS: Default contact lists
-    - BREVO_API_CONTACT_ATTRIBUTES: Default contact attributes
-    """
-
-    def __init__(self):
-        """Initialize Brevo (ex-sendinblue) marketing service."""
-
-        if not settings.BREVO_API_KEY:
-            raise ImproperlyConfigured("Brevo API key is required")
-
-        configuration = brevo_python.Configuration()
-        configuration.api_key["api-key"] = settings.BREVO_API_KEY
-
-        self._api_client = brevo_python.ApiClient(configuration)
-
-    def create_contact(self, contact_data: ContactData, timeout=None) -> dict:
-        """Create or update a Brevo contact.
-
-        Args:
-            contact_data: Contact information and attributes
-            timeout: API request timeout in seconds
-
-        Returns:
-            dict: Brevo API response
-
-        Raises:
-            ContactCreationError: If contact creation fails
-            ImproperlyConfigured: If required settings are missing
-
-        Note:
-            Contact attributes must be pre-configured in Brevo.
-            Changes to attributes can impact existing workflows.
-        """
-
-        if not settings.BREVO_API_CONTACT_LIST_IDS:
-            raise ImproperlyConfigured(
-                "Default Brevo List IDs must be configured in settings."
-            )
-
-        contact_api = brevo_python.ContactsApi(self._api_client)
-
-        attributes = {
-            **settings.BREVO_API_CONTACT_ATTRIBUTES,
-            **(contact_data.attributes or {}),
-        }
-
-        list_ids = (contact_data.list_ids or []) + settings.BREVO_API_CONTACT_LIST_IDS
-
-        contact = brevo_python.CreateContact(
-            email=contact_data.email,
-            attributes=attributes,
-            list_ids=list_ids,
-            update_enabled=contact_data.update_enabled,
-        )
-
-        api_configurations = {}
-
-        if timeout is not None:
-            api_configurations["_request_timeout"] = timeout
-
-        try:
-            response = contact_api.create_contact(contact, **api_configurations)
-        except brevo_python.rest.ApiException as err:
-            logger.exception("Failed to create contact in Brevo")
-            raise ContactCreationError("Failed to create contact in Brevo") from err
-
-        return response
-
-
-@lru_cache(maxsize=1)
-def get_marketing_service() -> MarketingServiceProtocol:
-    """Return cached instance of configured marketing service."""
-    marketing_service_cls = import_string(settings.MARKETING_SERVICE_CLASS)
-    return marketing_service_cls()

src/backend/core/tests/authentication/test_backends.py

@@ -1,15 +1,12 @@
 """Unit tests for the Authentication Backends."""
 
-from unittest import mock
-
-from django.core.exceptions import ImproperlyConfigured, SuspiciousOperation
+from django.core.exceptions import SuspiciousOperation
 
 import pytest
 
 from core import models
 from core.authentication.backends import OIDCAuthenticationBackend
 from core.factories import UserFactory
-from core.services import marketing_service
 
 pytestmark = pytest.mark.django_db
 
@@ -415,139 +412,3 @@ def test_update_user_when_no_update_needed(django_assert_num_queries, claims):
     user.refresh_from_db()
 
     assert user.email == "john.doe@example.com"
-
-
-@mock.patch.object(OIDCAuthenticationBackend, "signup_to_marketing_email")
-def test_marketing_signup_new_user_enabled(mock_signup, monkeypatch, settings):
-    """Test marketing signup for new user with settings enabled."""
-    settings.SIGNUP_NEW_USER_TO_MARKETING_EMAIL = True
-
-    klass = OIDCAuthenticationBackend()
-    email = "test@example.com"
-
-    def get_userinfo_mocked(*args):
-        return {"sub": "123", "email": email}
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    user = klass.get_or_create_user("test-token", None, None)
-
-    assert user.email == email
-    mock_signup.assert_called_once_with(email)
-
-
-@mock.patch.object(OIDCAuthenticationBackend, "signup_to_marketing_email")
-def test_marketing_signup_new_user_disabled(mock_signup, monkeypatch, settings):
-    """Test no marketing signup for new user with settings disabled."""
-    settings.SIGNUP_NEW_USER_TO_MARKETING_EMAIL = False
-
-    klass = OIDCAuthenticationBackend()
-    email = "test@example.com"
-
-    def get_userinfo_mocked(*args):
-        return {"sub": "123", "email": email}
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    user = klass.get_or_create_user("test-token", None, None)
-
-    assert user.email == email
-    mock_signup.assert_not_called()
-
-
-@mock.patch.object(OIDCAuthenticationBackend, "signup_to_marketing_email")
-def test_marketing_signup_new_user_default_disabled(mock_signup, monkeypatch):
-    """Test no marketing signup for new user with settings by default disabled."""
-
-    klass = OIDCAuthenticationBackend()
-    email = "test@example.com"
-
-    def get_userinfo_mocked(*args):
-        return {"sub": "123", "email": email}
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    user = klass.get_or_create_user("test-token", None, None)
-
-    assert user.email == email
-    mock_signup.assert_not_called()
-
-
-@pytest.mark.parametrize(
-    "is_signup_enabled",
-    [True, False],
-)
-@mock.patch.object(OIDCAuthenticationBackend, "signup_to_marketing_email")
-def test_marketing_signup_existing_user(
-    mock_signup, monkeypatch, settings, is_signup_enabled
-):
-    """Test no marketing signup for existing user regardless of settings."""
-
-    settings.SIGNUP_NEW_USER_TO_MARKETING_EMAIL = is_signup_enabled
-
-    klass = OIDCAuthenticationBackend()
-    db_user = UserFactory(email="test@example.com")
-
-    def get_userinfo_mocked(*args):
-        return {"sub": db_user.sub, "email": db_user.email}
-
-    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
-
-    user = klass.get_or_create_user("test-token", None, None)
-    assert user == db_user
-    mock_signup.assert_not_called()
-
-
-@mock.patch("core.authentication.backends.get_marketing_service")
-def test_signup_to_marketing_email_success(mock_marketing):
-    """Test successful marketing signup."""
-
-    email = "test@example.com"
-
-    # Call the method
-    OIDCAuthenticationBackend.signup_to_marketing_email(email)
-
-    # Verify service interaction
-    mock_service = mock_marketing.return_value
-    mock_service.create_contact.assert_called_once()
-
-
-@pytest.mark.parametrize(
-    "error",
-    [
-        ImportError,
-        ImproperlyConfigured,
-    ],
-)
-@mock.patch("core.authentication.backends.get_marketing_service")
-def test_marketing_signup_handles_service_initialization_errors(
-    mock_marketing, error, settings
-):
-    """Tests errors that occur when trying to get/initialize the marketing service."""
-    settings.SIGNUP_NEW_USER_TO_MARKETING_EMAIL = True
-
-    mock_marketing.side_effect = error
-
-    # Should not raise any exception
-    OIDCAuthenticationBackend.signup_to_marketing_email("test@example.com")
-
-
-@pytest.mark.parametrize(
-    "error",
-    [
-        marketing_service.ContactCreationError,
-        ImproperlyConfigured,
-        ImportError,
-    ],
-)
-@mock.patch("core.authentication.backends.get_marketing_service")
-def test_marketing_signup_handles_contact_creation_errors(
-    mock_marketing, error, settings
-):
-    """Tests errors that occur during the contact creation process."""
-
-    settings.SIGNUP_NEW_USER_TO_MARKETING_EMAIL = True
-    mock_marketing.return_value.create_contact.side_effect = error
-
-    # Should not raise any exception
-    OIDCAuthenticationBackend.signup_to_marketing_email("test@example.com")

src/backend/core/tests/services/test_marketing_service.py

@@ -1,187 +0,0 @@
-"""
-Test marketing services.
-"""
-
-# pylint: disable=W0621,W0613
-
-from unittest import mock
-
-from django.conf import settings
-from django.core.exceptions import ImproperlyConfigured
-
-import brevo_python
-import pytest
-
-from core.services.marketing_service import (
-    BrevoMarketingService,
-    ContactCreationError,
-    ContactData,
-    get_marketing_service,
-)
-
-
-def test_init_missing_api_key(settings):
-    """Test initialization with missing API key."""
-    settings.BREVO_API_KEY = None
-    with pytest.raises(ImproperlyConfigured, match="Brevo API key is required"):
-        BrevoMarketingService()
-
-
-def test_create_contact_missing_list_ids(settings):
-    """Test contact creation with missing list IDs."""
-
-    settings.BREVO_API_KEY = "test-api-key"
-    settings.BREVO_API_CONTACT_LIST_IDS = None
-    settings.BREVO_API_CONTACT_ATTRIBUTES = {"source": "test"}
-
-    valid_contact_data = ContactData(
-        email="test@example.com",
-        attributes={"first_name": "Test"},
-        list_ids=[1, 2],
-        update_enabled=True,
-    )
-
-    brevo_service = BrevoMarketingService()
-
-    with pytest.raises(
-        ImproperlyConfigured, match="Default Brevo List IDs must be configured"
-    ):
-        brevo_service.create_contact(valid_contact_data)
-
-
-@mock.patch("brevo_python.ContactsApi")
-def test_create_contact_success(mock_contact_api):
-    """Test successful contact creation."""
-
-    mock_api = mock_contact_api.return_value
-
-    settings.BREVO_API_KEY = "test-api-key"
-    settings.BREVO_API_CONTACT_LIST_IDS = [1, 2, 3, 4]
-    settings.BREVO_API_CONTACT_ATTRIBUTES = {"source": "test"}
-
-    valid_contact_data = ContactData(
-        email="test@example.com",
-        attributes={"first_name": "Test"},
-        list_ids=[1, 2],
-        update_enabled=True,
-    )
-
-    brevo_service = BrevoMarketingService()
-
-    mock_api.create_contact.return_value = {"id": "test-id"}
-    response = brevo_service.create_contact(valid_contact_data)
-
-    assert response == {"id": "test-id"}
-
-    mock_api.create_contact.assert_called_once()
-    contact_arg = mock_api.create_contact.call_args[0][0]
-    assert contact_arg.email == "test@example.com"
-    assert contact_arg.attributes == {
-        **settings.BREVO_API_CONTACT_ATTRIBUTES,
-        **valid_contact_data.attributes,
-    }
-    assert set(contact_arg.list_ids) == {1, 2, 3, 4}
-    assert contact_arg.update_enabled is True
-
-
-@mock.patch("brevo_python.ContactsApi")
-def test_create_contact_with_timeout(mock_contact_api):
-    """Test contact creation with timeout."""
-
-    mock_api = mock_contact_api.return_value
-
-    settings.BREVO_API_KEY = "test-api-key"
-    settings.BREVO_API_CONTACT_LIST_IDS = [1, 2, 3, 4]
-    settings.BREVO_API_CONTACT_ATTRIBUTES = {"source": "test"}
-
-    valid_contact_data = ContactData(
-        email="test@example.com",
-        attributes={"first_name": "Test"},
-        list_ids=[1, 2],
-        update_enabled=True,
-    )
-
-    brevo_service = BrevoMarketingService()
-    brevo_service.create_contact(valid_contact_data, timeout=30)
-
-    mock_api.create_contact.assert_called_once()
-    assert mock_api.create_contact.call_args[1]["_request_timeout"] == 30
-
-
-@mock.patch("brevo_python.ContactsApi")
-def test_create_contact_api_error(mock_contact_api):
-    """Test contact creation API error handling."""
-
-    mock_api = mock_contact_api.return_value
-
-    settings.BREVO_API_KEY = "test-api-key"
-    settings.BREVO_API_CONTACT_LIST_IDS = [1, 2, 3, 4]
-    settings.BREVO_API_CONTACT_ATTRIBUTES = {"source": "test"}
-
-    valid_contact_data = ContactData(
-        email="test@example.com",
-        attributes={"first_name": "Test"},
-        list_ids=[1, 2],
-        update_enabled=True,
-    )
-
-    brevo_service = BrevoMarketingService()
-
-    mock_api.create_contact.side_effect = brevo_python.rest.ApiException()
-
-    with pytest.raises(ContactCreationError, match="Failed to create contact in Brevo"):
-        brevo_service.create_contact(valid_contact_data)
-
-
-@pytest.fixture
-def clear_marketing_cache():
-    """Clear marketing service cache between tests."""
-    get_marketing_service.cache_clear()
-    yield
-    get_marketing_service.cache_clear()
-
-
-def test_get_marketing_service_caching(clear_marketing_cache):
-    """Test marketing service caching behavior."""
-    settings.BREVO_API_KEY = "test-api-key"
-    settings.MARKETING_SERVICE_CLASS = (
-        "core.services.marketing_service.BrevoMarketingService"
-    )
-
-    service1 = get_marketing_service()
-    service2 = get_marketing_service()
-
-    assert service1 is service2
-    assert isinstance(service1, BrevoMarketingService)
-
-
-def test_get_marketing_service_invalid_class(clear_marketing_cache):
-    """Test handling of invalid service class."""
-    settings.MARKETING_SERVICE_CLASS = "invalid.service.path"
-
-    with pytest.raises(ImportError):
-        get_marketing_service()
-
-
-@mock.patch("core.services.marketing_service.import_string")
-def test_service_instantiation_called_once(mock_import_string, clear_marketing_cache):
-    """Test service class is instantiated only once."""
-
-    settings.BREVO_API_KEY = "test-api-key"
-    settings.MARKETING_SERVICE_CLASS = (
-        "core.services.marketing_service.BrevoMarketingService"
-    )
-    get_marketing_service.cache_clear()
-
-    mock_service_cls = mock.Mock()
-    mock_service_instance = mock.Mock()
-    mock_service_cls.return_value = mock_service_instance
-    mock_import_string.return_value = mock_service_cls
-
-    service1 = get_marketing_service()
-    service2 = get_marketing_service()
-
-    mock_import_string.assert_called_once_with(settings.MARKETING_SERVICE_CLASS)
-    mock_service_cls.assert_called_once()
-    assert service1 is service2
-    assert service1 is mock_service_instance

src/backend/core/tests/test_api_users.py

@@ -66,7 +66,7 @@ def test_api_users_list_query_email():
 
     assert response.status_code == 200
     user_ids = [user["id"] for user in response.json()["results"]]
-    assert user_ids == [str(frank.id), str(nicole.id)]
+    assert user_ids == [str(nicole.id), str(frank.id)]
 
 
 def test_api_users_retrieve_me_anonymous():

src/backend/meet/settings.py

@@ -324,10 +324,8 @@ class Base(Configuration):
     OIDC_AUTHENTICATE_CLASS = "core.authentication.views.OIDCAuthenticationRequestView"
     OIDC_CALLBACK_CLASS = "core.authentication.views.OIDCAuthenticationCallbackView"
     OIDC_CREATE_USER = values.BooleanValue(
-        default=True, environ_name="OIDC_CREATE_USER", environ_prefix=None
-    )
-    OIDC_VERIFY_SSL = values.BooleanValue(
-        default=True, environ_name="OIDC_VERIFY_SSL", environ_prefix=None
+        default=True,
+        environ_name="OIDC_CREATE_USER",
     )
     OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = values.BooleanValue(
         default=False,
@@ -457,28 +455,6 @@ class Base(Configuration):
         None, environ_name="SUMMARY_SERVICE_API_TOKEN", environ_prefix=None
     )
 
-    # 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",
-        environ_prefix=None,
-    )
-    MARKETING_SERVICE_CLASS = values.Value(
-        "core.services.marketing_service.BrevoMarketingService",
-        environ_name="MARKETING_SERVICE_CLASS",
-        environ_prefix=None,
-    )
-    BREVO_API_KEY = values.Value(
-        None, environ_name="BREVO_API_KEY", environ_prefix=None
-    )
-    BREVO_API_CONTACT_LIST_IDS = values.ListValue(
-        [],
-        environ_name="BREVO_API_CONTACT_LIST_IDS",
-        environ_prefix=None,
-        converter=lambda x: int(x),  # pylint: disable=unnecessary-lambda
-    )
-    BREVO_API_CONTACT_ATTRIBUTES = values.DictValue({"VISIO_USER": True})
-
     # pylint: disable=invalid-name
     @property
     def ENVIRONMENT(self):
@@ -525,10 +501,8 @@ class Base(Configuration):
                 release=get_release(),
                 integrations=[DjangoIntegration()],
             )
-
-            # Add the application name to the Sentry scope
-            scope = sentry_sdk.get_global_scope()
-            scope.set_tag("application", "backend")
+            with sentry_sdk.configure_scope() as scope:
+                scope.set_extra("application", "backend")
 
 
 class Build(Base):

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.12"
+version = "0.1.10"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,21 +25,20 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.36.2",
+    "boto3==1.35.68",
     "Brotli==1.1.0",
-    "brevo-python==1.1.2",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
     "django-cors-headers==4.6.0",
     "django-countries==7.6.1",
     "django-parler==2.3",
-    "redis==5.2.1",
+    "redis==5.2.0",
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.5",
+    "django==5.1.3",
     "djangorestframework==3.15.2",
-    "drf_spectacular==0.28.0",
+    "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
     "easy_thumbnails==2.10",
     "factory_boy==3.3.1",
@@ -48,17 +47,17 @@ dependencies = [
     "june-analytics-python==2.3.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.4",
-    "PyJWT==2.10.1",
+    "psycopg[binary]==3.2.3",
+    "PyJWT==2.10.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.20.0",
+    "sentry-sdk==2.19.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.8.2",
     "mozilla-django-oidc==4.0.1",
-    "livekit-api==0.8.1",
-    "aiohttp==3.11.11",
+    "livekit-api==0.8.0",
+    "aiohttp==3.11.7",
 ]
 
 [project.urls]
@@ -70,20 +69,20 @@ dependencies = [
 [project.optional-dependencies]
 dev = [
     "django-extensions==3.2.3",
-    "drf-spectacular-sidecar==2024.12.1",
+    "drf-spectacular-sidecar==2024.11.1",
     "freezegun==1.5.1",
     "ipdb==0.13.13",
-    "ipython==8.31.0",
-    "pyfakefs==5.7.4",
+    "ipython==8.29.0",
+    "pyfakefs==5.7.1",
     "pylint-django==2.6.1",
-    "pylint==3.3.3",
+    "pylint==3.3.1",
     "pytest-cov==6.0.0",
     "pytest-django==4.9.0",
-    "pytest==8.3.4",
+    "pytest==8.3.3",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
-    "responses==0.25.6",
-    "ruff==0.9.2",
+    "responses==0.25.3",
+    "ruff==0.8.0",
     "types-requests==2.32.0.20241016",
 ]
 

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.12",
+  "version": "0.1.10",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,23 +13,23 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.8.0",
+    "@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.1",
-    "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.207.0",
+    "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",
@@ -37,24 +37,24 @@
     "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.7",
+    "@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.10",
-    "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"
   }
 }

src/frontend/src/components/FeedbackBanner.tsx

@@ -2,7 +2,9 @@ import { css } from '@/styled-system/css'
 import { RiErrorWarningLine, RiExternalLinkLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Text, A } from '@/primitives'
-import { GRIST_FORM } from '@/utils/constants'
+
+const GRIST_FORM =
+  'https://grist.numerique.gouv.fr/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4'
 
 export const FeedbackBanner = () => {
   const { t } = useTranslation()

src/frontend/src/features/home/routes/Home.tsx

@@ -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',
         },

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

@@ -16,11 +16,11 @@ export const MainNotificationToast = () => {
       if (isMobileBrowser()) {
         return
       }
-      triggerNotificationSound(NotificationType.ParticipantJoined)
+      triggerNotificationSound(NotificationType.Joined)
       toastQueue.add(
         {
           participant,
-          type: NotificationType.ParticipantJoined,
+          type: NotificationType.Joined,
         },
         {
           timeout: 5000,
@@ -67,7 +67,7 @@ export const MainNotificationToast = () => {
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>
           toast.content.participant === participant &&
-          toast.content.type === NotificationType.HandRaised
+          toast.content.type === NotificationType.Raised
       )
 
       if (existingToast && prevMetadata.raised && !metadata.raised) {
@@ -76,11 +76,11 @@ export const MainNotificationToast = () => {
       }
 
       if (!existingToast && !prevMetadata.raised && metadata.raised) {
-        triggerNotificationSound(NotificationType.HandRaised)
+        triggerNotificationSound(NotificationType.Raised)
         toastQueue.add(
           {
             participant,
-            type: NotificationType.HandRaised,
+            type: NotificationType.Raised,
           },
           { timeout: 5000 }
         )

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

@@ -1,5 +1,6 @@
 export enum NotificationType {
-  ParticipantJoined = 'participantJoined',
-  HandRaised = 'handRaised',
-  // todo - implement message received notification
+  Joined = 'joined',
+  Default = 'default',
+  Raised = 'raised',
+  Lowered = 'lowered',
 }

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

@@ -17,10 +17,10 @@ export function ToastRegion({ state, ...props }: ToastRegionProps) {
   return (
     <div {...regionProps} ref={ref} className="toast-region">
       {state.visibleToasts.map((toast) => {
-        if (toast.content?.type === NotificationType.ParticipantJoined) {
+        if (toast.content?.type === NotificationType.Joined) {
           return <ToastJoined key={toast.key} toast={toast} state={state} />
         }
-        if (toast.content?.type === NotificationType.HandRaised) {
+        if (toast.content?.type === NotificationType.Raised) {
           return <ToastRaised key={toast.key} toast={toast} state={state} />
         }
         return <Toast key={toast.key} toast={toast} state={state} />

src/frontend/src/features/notifications/hooks/useSoundNotification.tsx

@@ -1,24 +1,18 @@
 import useSound from 'use-sound'
-import { useSnapshot } from 'valtio'
-import { notificationsStore } from '@/stores/notifications'
-import { NotificationType } from '@/features/notifications/NotificationType'
 
 // fixme - handle dynamic audio output changes
 export const useNotificationSound = () => {
-  const notificationsSnap = useSnapshot(notificationsStore)
   const [play] = useSound('./sounds/notifications.mp3', {
     sprite: {
-      participantJoined: [0, 1150],
-      handRaised: [1400, 180],
-      messageReceived: [1580, 300],
+      joined: [0, 1150],
+      raised: [1400, 180],
+      message: [1580, 300],
       waiting: [2039, 710],
       success: [2740, 1304],
     },
-    volume: notificationsSnap.soundNotificationVolume,
   })
-  const triggerNotificationSound = (type: NotificationType) => {
-    const isSoundEnabled = notificationsSnap.soundNotifications.get(type)
-    if (isSoundEnabled) play({ id: type })
+  const triggerNotificationSound = (type: string) => {
+    play({ id: type })
   }
   return { triggerNotificationSound }
 }

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

@@ -65,11 +65,6 @@ export const Conference = ({
 
   const roomOptions = useMemo((): RoomOptions => {
     return {
-      adaptiveStream: true,
-      dynacast: true,
-      publishDefaults: {
-        videoCodec: 'vp9',
-      },
       videoCaptureDefaults: {
         deviceId: userConfig.videoDeviceId ?? undefined,
       },

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

@@ -1,27 +1,8 @@
 import { useTranslation } from 'react-i18next'
-import {
-  ParticipantPlaceholder,
-  usePersistentUserChoices,
-  usePreviewTracks,
-  type LocalUserChoices,
-} from '@livekit/components-react'
-import { css } from '@/styled-system/css'
-import { log } from '@livekit/components-core'
-import { defaultUserChoices } from '@livekit/components-core'
+import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
 import { Screen } from '@/layout/Screen'
+import { CenteredContent } from '@/layout/CenteredContent'
 import { useUser } from '@/features/auth'
-import React from 'react'
-import {
-  facingModeFromLocalTrack,
-  LocalVideoTrack,
-  Track,
-} from 'livekit-client'
-import { H } from '@/primitives/H'
-import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
-import { Field } from '@/primitives/Field'
-import { Button } from '@/primitives'
-
-const onError = (e: Error) => console.error('ERROR', e)
 
 export const Join = ({
   onSubmit,
@@ -30,349 +11,20 @@ export const Join = ({
 }) => {
   const { t } = useTranslation('rooms')
   const { user } = useUser()
-  const defaults: Partial<LocalUserChoices> = { username: user?.full_name }
-  const persistUserChoices = true
-  const joinLabel = t('join.joinLabel')
-  const userLabel = t('join.usernameLabel')
-
-  const [userChoices, setUserChoices] = React.useState(defaultUserChoices)
-
-  // TODO: Remove and pipe `defaults` object directly into `usePersistentUserChoices` once we fully switch from type `LocalUserChoices` to `UserChoices`.
-  const partialDefaults: Partial<LocalUserChoices> = {
-    ...(defaults.audioDeviceId !== undefined && {
-      audioDeviceId: defaults.audioDeviceId,
-    }),
-    ...(defaults.videoDeviceId !== undefined && {
-      videoDeviceId: defaults.videoDeviceId,
-    }),
-    ...(defaults.audioEnabled !== undefined && {
-      audioEnabled: defaults.audioEnabled,
-    }),
-    ...(defaults.videoEnabled !== undefined && {
-      videoEnabled: defaults.videoEnabled,
-    }),
-    ...(defaults.username !== undefined && { username: defaults.username }),
-  }
-
-  const {
-    userChoices: initialUserChoices,
-    saveAudioInputDeviceId,
-    saveAudioInputEnabled,
-    saveVideoInputDeviceId,
-    saveVideoInputEnabled,
-    saveUsername,
-  } = usePersistentUserChoices({
-    defaults: partialDefaults,
-    preventSave: !persistUserChoices,
-    preventLoad: !persistUserChoices,
-  })
-
-  // Initialize device settings
-  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(
-    initialUserChoices.audioEnabled
-  )
-  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(
-    initialUserChoices.videoEnabled
-  )
-  const [audioDeviceId, setAudioDeviceId] = React.useState<string>(
-    initialUserChoices.audioDeviceId
-  )
-  const [videoDeviceId, setVideoDeviceId] = React.useState<string>(
-    initialUserChoices.videoDeviceId
-  )
-  const [username, setUsername] = React.useState(initialUserChoices.username)
-
-  // Save user choices to persistent storage.
-  React.useEffect(() => {
-    saveAudioInputEnabled(audioEnabled)
-  }, [audioEnabled, saveAudioInputEnabled])
-  React.useEffect(() => {
-    saveVideoInputEnabled(videoEnabled)
-  }, [videoEnabled, saveVideoInputEnabled])
-  React.useEffect(() => {
-    saveAudioInputDeviceId(audioDeviceId)
-  }, [audioDeviceId, saveAudioInputDeviceId])
-  React.useEffect(() => {
-    saveVideoInputDeviceId(videoDeviceId)
-  }, [videoDeviceId, saveVideoInputDeviceId])
-  React.useEffect(() => {
-    saveUsername(username)
-  }, [username, saveUsername])
-
-  const tracks = usePreviewTracks(
-    {
-      audio: audioEnabled
-        ? { deviceId: initialUserChoices.audioDeviceId }
-        : false,
-      video: videoEnabled
-        ? { deviceId: initialUserChoices.videoDeviceId }
-        : false,
-    },
-    onError
-  )
-
-  const videoEl = React.useRef(null)
-
-  const videoTrack = React.useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Video
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
-
-  const audioTrack = React.useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Audio
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
-
-  const facingMode = React.useMemo(() => {
-    if (videoTrack) {
-      const { facingMode } = facingModeFromLocalTrack(videoTrack)
-      return facingMode
-    } else {
-      return 'undefined'
-    }
-  }, [videoTrack])
-
-  React.useEffect(() => {
-    if (videoEl.current && videoTrack) {
-      videoTrack.unmute()
-      videoTrack.attach(videoEl.current)
-    }
-
-    return () => {
-      videoTrack?.detach()
-    }
-  }, [videoTrack])
-
-  const [isValid, setIsValid] = React.useState<boolean>()
-
-  const handleValidation = React.useCallback((values: LocalUserChoices) => {
-    return values.username !== ''
-  }, [])
-
-  React.useEffect(() => {
-    const newUserChoices = {
-      username,
-      videoEnabled,
-      videoDeviceId,
-      audioEnabled,
-      audioDeviceId,
-    }
-    setUserChoices(newUserChoices)
-    setIsValid(handleValidation(newUserChoices))
-  }, [
-    username,
-    videoEnabled,
-    handleValidation,
-    audioEnabled,
-    audioDeviceId,
-    videoDeviceId,
-  ])
-
-  function handleSubmit() {
-    if (handleValidation(userChoices)) {
-      if (typeof onSubmit === 'function') {
-        onSubmit(userChoices)
-      }
-    } else {
-      log.warn('Validation failed with: ', userChoices)
-    }
-  }
 
   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 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a',
-                '--tw-shadow-colored':
-                  '0 20px 25px -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)',
-              })}
-            >
-              {videoTrack && (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
-                <video
-                  ref={videoEl}
-                  width="1280"
-                  height="720"
-                  data-lk-facing-mode={facingMode}
-                  className={css({
-                    display: 'block',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transform: 'rotateY(180deg)',
-                  })}
-                />
-              )}
-              {(!videoTrack || !videoEnabled) && (
-                <div
-                  id="container"
-                  className={css({
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    backgroundColor: '#000',
-                    display: 'grid',
-                    placeItems: 'center',
-                  })}
-                >
-                  <ParticipantPlaceholder
-                    className={css({
-                      maxWidth: '100%',
-                      height: '70%',
-                    })}
-                  />
-                </div>
-              )}
-              <div className="lk-button-group-container"></div>
-            </div>
-            <div
-              className={css({
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                padding: '1.5rem',
-                gap: '1rem',
-              })}
-            >
-              <SelectToggleDevice
-                source={Track.Source.Microphone}
-                initialState={audioEnabled}
-                track={audioTrack}
-                initialDeviceId={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={videoDeviceId}
-                onChange={(enabled) => {
-                  setVideoEnabled(enabled)
-                }}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  setVideoDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-            </div>
-          </div>
-
-          <div
-            className={css({
-              width: '100%',
-              flexShrink: 0,
-              padding: '0',
-              sm: {
-                width: '448px',
-                padding: '0 3rem 9rem 3rem',
-              },
-            })}
-          >
-            <form
-              className={css({
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                alignItems: 'center',
-                gap: '1rem',
-              })}
-            >
-              <H lvl={1} className={css({ marginBottom: 0 })}>
-                {t('join.heading')}
-              </H>
-              <Field
-                type="text"
-                label={userLabel}
-                defaultValue={username}
-                onChange={(value) => setUsername(value)}
-                validate={(value) => {
-                  return !value ? <p>{t('join.errors.usernameEmpty')}</p> : null
-                }}
-                className={css({
-                  width: '100%',
-                })}
-                wrapperProps={{
-                  noMargin: true,
-                  fullWidth: true,
-                }}
-                labelProps={{
-                  center: true,
-                }}
-                maxLength={50}
-              />
-              <Button
-                type="submit"
-                variant={'primary'}
-                onPress={handleSubmit}
-                isDisabled={!isValid}
-                fullWidth
-              >
-                {joinLabel}
-              </Button>
-            </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>
   )
 }

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

@@ -5,9 +5,11 @@ import { Text, P, ToggleButton, Div, H } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import {
-  BackgroundBlurFactory,
-  BackgroundBlurProcessorInterface,
-} from './blur/index'
+  BackgroundBlur,
+  BackgroundOptions,
+  ProcessorWrapper,
+  BackgroundTransformer,
+} from '@livekit/track-processors'
 
 const Information = styled('div', {
   base: {
@@ -25,8 +27,6 @@ enum BlurRadius {
   NORMAL = 10,
 }
 
-const isSupported = BackgroundBlurFactory.isSupported()
-
 export const Effects = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
   const { isCameraEnabled, cameraTrack, localParticipant } =
@@ -37,12 +37,15 @@ export const Effects = () => {
   const localCameraTrack = cameraTrack?.track as LocalVideoTrack
 
   const getProcessor = () => {
-    return localCameraTrack?.getProcessor() as BackgroundBlurProcessorInterface
+    return localCameraTrack?.getProcessor() as ProcessorWrapper<BackgroundOptions>
   }
 
   const getBlurRadius = (): BlurRadius => {
     const processor = getProcessor()
-    return processor?.options.blurRadius || BlurRadius.NONE
+    return (
+      (processor?.transformer as BackgroundTransformer)?.options?.blurRadius ||
+      BlurRadius.NONE
+    )
   }
 
   const toggleBlur = async (blurRadius: number) => {
@@ -58,11 +61,9 @@ export const Effects = () => {
       if (blurRadius == currentBlurRadius && processor) {
         await localCameraTrack.stopProcessor()
       } else if (!processor) {
-        await localCameraTrack.setProcessor(
-          BackgroundBlurFactory.getProcessor({ blurRadius })!
-        )
+        await localCameraTrack.setProcessor(BackgroundBlur(blurRadius))
       } else {
-        processor?.update({ blurRadius })
+        await processor?.updateTransformerOptions({ blurRadius })
       }
     } catch (error) {
       console.error('Error applying blur:', error)
@@ -146,7 +147,7 @@ export const Effects = () => {
         >
           {t('heading')}
         </H>
-        {isSupported ? (
+        {ProcessorWrapper.isSupported ? (
           <HStack>
             <ToggleButton
               size={'sm'}

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

@@ -1,281 +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 { BackgroundBlurProcessorInterface, BackgroundOptions } 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 BackgroundBlurCustomProcessor
-  implements BackgroundBlurProcessorInterface
-{
-  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
-
-  constructor(opts: BackgroundOptions) {
-    this.name = 'blur'
-    this.options = opts
-  }
-
-  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._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')
-  }
-
-  update(opts: BackgroundOptions): void {
-    this.options = opts
-  }
-
-  _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)'
-
-    this.outputCanvasCtx!.drawImage(
-      this.segmentationMaskCanvas!,
-      0,
-      0,
-      PROCESSING_WIDTH,
-      PROCESSING_HEIGHT,
-      0,
-      0,
-      this.videoElement!.videoWidth,
-      this.videoElement!.videoHeight
-    )
-
-    this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
-    this.outputCanvasCtx!.filter = 'none'
-    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
-
-    this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
-    this.outputCanvasCtx!.filter = `blur(${this.options.blurRadius ?? DEFAULT_BLUR}px)`
-    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
-  }
-
-  async process() {
-    await this.sizeSource()
-    await this.segment()
-    await this.blur()
-    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()
-  }
-}

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

@@ -1,48 +0,0 @@
-import {
-  BackgroundBlur,
-  BackgroundTransformer,
-  ProcessorWrapper,
-} from '@livekit/track-processors'
-import { ProcessorOptions, Track } from 'livekit-client'
-import { BackgroundBlurProcessorInterface, BackgroundOptions } 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 BackgroundBlurProcessorInterface
-{
-  name: string = 'Blur'
-
-  processor: ProcessorWrapper<BackgroundOptions>
-
-  constructor(opts: BackgroundOptions) {
-    this.processor = BackgroundBlur(opts.blurRadius)
-  }
-
-  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
-  }
-}

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

@@ -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' })
-)

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

@@ -1,32 +0,0 @@
-import { ProcessorWrapper } from '@livekit/track-processors'
-import { Track, TrackProcessor } from 'livekit-client'
-import { BackgroundBlurTrackProcessorJsWrapper } from './BackgroundBlurTrackProcessorJsWrapper'
-import { BackgroundBlurCustomProcessor } from './BackgroundBlurCustomProcessor'
-
-export type BackgroundOptions = {
-  blurRadius?: number
-}
-
-export interface BackgroundBlurProcessorInterface
-  extends TrackProcessor<Track.Kind> {
-  update(opts: BackgroundOptions): void
-  options: BackgroundOptions
-}
-
-export class BackgroundBlurFactory {
-  static isSupported() {
-    return (
-      ProcessorWrapper.isSupported || BackgroundBlurCustomProcessor.isSupported
-    )
-  }
-
-  static getProcessor(opts: BackgroundOptions) {
-    if (ProcessorWrapper.isSupported) {
-      return new BackgroundBlurTrackProcessorJsWrapper(opts)
-    }
-    if (BackgroundBlurCustomProcessor.isSupported) {
-      return new BackgroundBlurCustomProcessor(opts)
-    }
-    return null
-  }
-}

src/frontend/src/features/rooms/livekit/components/controls/CameraSwitchButton.tsx

@@ -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>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx

@@ -5,12 +5,8 @@ import { css } from '@/styled-system/css'
 import { ToggleButton } from '@/primitives'
 import { chatStore } from '@/stores/chat'
 import { useSidePanel } from '../../hooks/useSidePanel'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ChatToggle = ({
-  onPress,
-  ...props
-}: Partial<ToggleButtonProps>) => {
+export const ChatToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
 
   const chatSnap = useSnapshot(chatStore)
@@ -31,12 +27,8 @@ export const ChatToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
-        onPress={(e) => {
-          toggleChat()
-          onPress?.(e)
-        }}
+        onPress={() => toggleChat()}
         data-attr={`controls-chat-${tooltipLabel}`}
-        {...props}
       >
         <RiChat1Line />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -1,14 +1,19 @@
 import { useTranslation } from 'react-i18next'
 import { RiMore2Line } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
+
+import { useState } from 'react'
 import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
+import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
+
+export type DialogState = 'username' | 'settings' | null
 
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
-
+  const [dialogOpen, setDialogOpen] = useState<DialogState>(null)
   return (
     <>
-      <Menu variant="dark">
+      <Menu>
         <Button
           square
           variant="primaryDark"
@@ -17,8 +22,12 @@ export const OptionsButton = () => {
         >
           <RiMore2Line />
         </Button>
-        <OptionsMenuItems />
+        <OptionsMenuItems onOpenDialog={setDialogOpen} />
       </Menu>
+      <SettingsDialogExtended
+        isOpen={dialogOpen === 'settings'}
+        onOpenChange={(v) => !v && setDialogOpen(null)}
+      />
     </>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -3,19 +3,22 @@ import {
   RiMegaphoneLine,
   RiSettings3Line,
 } from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
+import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
+import { Dispatch, SetStateAction } from 'react'
+import { DialogState } from './OptionsButton'
 import { Separator } from '@/primitives/Separator'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { useSettingsDialog } from '../SettingsDialogContext'
-import { GRIST_FORM } from '@/utils/constants'
 
 // @todo try refactoring it to use MenuList component
-export const OptionsMenuItems = () => {
+export const OptionsMenuItems = ({
+  onOpenDialog,
+}: {
+  onOpenDialog: Dispatch<SetStateAction<DialogState>>
+}) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const { toggleEffects } = useSidePanel()
-  const { setDialogOpen } = useSettingsDialog()
   return (
     <RACMenu
       style={{
@@ -23,33 +26,33 @@ export const OptionsMenuItems = () => {
         width: '300px',
       }}
     >
-      <MenuSection>
+      <Section>
         <MenuItem
           onAction={() => toggleEffects()}
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
+          className={menuRecipe({ icon: true }).item}
         >
           <RiAccountBoxLine size={20} />
           {t('effects')}
         </MenuItem>
-      </MenuSection>
+      </Section>
       <Separator />
-      <MenuSection>
+      <Section>
         <MenuItem
-          href={GRIST_FORM}
+          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
           target="_blank"
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
+          className={menuRecipe({ icon: true }).item}
         >
           <RiMegaphoneLine size={20} />
-          {t('feedback')}
+          {t('feedbacks')}
         </MenuItem>
         <MenuItem
-          className={menuRecipe({ icon: true, variant: 'dark' }).item}
-          onAction={() => setDialogOpen(true)}
+          className={menuRecipe({ icon: true }).item}
+          onAction={() => onOpenDialog('settings')}
         >
           <RiSettings3Line size={20} />
           {t('settings')}
         </MenuItem>
-      </MenuSection>
+      </Section>
     </RACMenu>
   )
 }

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

@@ -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',

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

@@ -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>

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

@@ -4,12 +4,8 @@ import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const ParticipantsToggle = ({
-  onPress,
-  ...props
-}: ToggleButtonProps) => {
+export const ParticipantsToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
 
   /**
@@ -37,12 +33,8 @@ export const ParticipantsToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isParticipantsOpen}
-        onPress={(e) => {
-          toggleParticipants()
-          onPress?.(e)
-        }}
+        onPress={() => toggleParticipants()}
         data-attr={`controls-participants-${tooltipLabel}`}
-        {...props}
       >
         <RiGroupLine />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/ScreenShareToggle.tsx

@@ -4,21 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
 import { Track } from 'livekit-client'
 import React from 'react'
-import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-type Props = Omit<
-  UseTrackToggleProps<Track.Source.ScreenShare>,
-  'source' | 'captureOptions'
-> &
-  Pick<NonNullable<ButtonRecipeProps>, 'variant'> &
-  ToggleButtonProps
-
-export const ScreenShareToggle = ({
-  variant = 'primaryDark',
-  onPress,
-  ...props
-}: Props) => {
+export const ScreenShareToggle = (
+  props: Omit<
+    UseTrackToggleProps<Track.Source.ScreenShare>,
+    'source' | 'captureOptions'
+  >
+) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.screenShare' })
   const { buttonProps, enabled } = useTrackToggle({
     ...props,
@@ -34,21 +26,23 @@ export const ScreenShareToggle = ({
     <ToggleButton
       isSelected={enabled}
       square
-      variant={variant}
+      variant="primaryDark"
       tooltip={t(tooltipLabel)}
-      onPress={(e) => {
+      onPress={(e) =>
         buttonProps.onClick?.(
           e as unknown as React.MouseEvent<HTMLButtonElement, MouseEvent>
         )
-        onPress?.(e)
+      }
+      style={{
+        maxWidth: '46px',
+        maxHeight: '46px',
       }}
       data-attr={`controls-screenshare-${tooltipLabel}`}
-      {...props}
     >
       <Div position="relative">
-        <RiRectangleLine size={24} />
+        <RiRectangleLine size={28} />
         <Icon
-          size={14}
+          size={16}
           style={{
             position: 'absolute',
             top: '50%',

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -13,14 +13,12 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import { LocalAudioTrack, LocalVideoTrack, Track } 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'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -67,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]
@@ -93,19 +81,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const trackProps = useTrackToggle(props)
 
   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}` })
 
@@ -116,43 +92,29 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         gap: '1px',
       })}
     >
-      <ToggleDevice
-        {...trackProps}
-        config={config}
-        variant={variant}
-        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>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx

@@ -1,36 +0,0 @@
-import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
-import React, { createContext, useContext, useState } from 'react'
-
-const SettingsDialogContext = createContext<
-  | {
-      dialogOpen: boolean
-      setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>
-    }
-  | undefined
->(undefined)
-
-export const SettingsDialogProvider: React.FC<{
-  children: React.ReactNode
-}> = ({ children }) => {
-  const [dialogOpen, setDialogOpen] = useState(false)
-  return (
-    <SettingsDialogContext.Provider value={{ dialogOpen, setDialogOpen }}>
-      {children}
-      <SettingsDialogExtended
-        isOpen={dialogOpen}
-        onOpenChange={(v) => !v && setDialogOpen(false)}
-      />
-    </SettingsDialogContext.Provider>
-  )
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export const useSettingsDialog = () => {
-  const context = useContext(SettingsDialogContext)
-  if (!context) {
-    throw new Error(
-      'useSettingsDialog must be used within a SettingsDialogProvider'
-    )
-  }
-  return context
-}

src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx

@@ -3,9 +3,8 @@ import { RiQuestionLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Crisp } from 'crisp-sdk-web'
 import { useEffect, useState } from 'react'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
+export const SupportToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
   const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))
 
@@ -33,16 +32,8 @@ export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
       tooltip={t('support')}
       aria-label={t('support')}
       isSelected={isOpened}
-      onPress={(e) => {
-        if (isOpened) {
-          Crisp.chat.close()
-        } else {
-          Crisp.chat.open()
-        }
-        onPress?.(e)
-      }}
+      onPress={() => (isOpened ? Crisp.chat.close() : Crisp.chat.open())}
       data-attr="controls-support"
-      {...props}
     >
       <RiQuestionLine />
     </ToggleButton>

src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx

@@ -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 />
-}

src/frontend/src/features/rooms/livekit/components/controls/TranscriptToggle.tsx

@@ -4,13 +4,8 @@ import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { useHasTranscriptAccess } from '../../hooks/useHasTranscriptAccess'
 import { css } from '@/styled-system/css'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const TranscriptToggle = ({
-  variant = 'primaryDark',
-  onPress,
-  ...props
-}: ToggleButtonProps) => {
+export const TranscriptToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
 
   const { isTranscriptOpen, toggleTranscript } = useSidePanel()
@@ -29,15 +24,11 @@ export const TranscriptToggle = ({
     >
       <ToggleButton
         square
-        variant={variant}
+        variant="primaryTextDark"
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isTranscriptOpen}
-        onPress={(e) => {
-          toggleTranscript()
-          onPress?.(e)
-        }}
-        {...props}
+        onPress={() => toggleTranscript()}
       >
         <RiBardLine />
       </ToggleButton>

src/frontend/src/features/rooms/livekit/prefabs/ControlBar.tsx

@@ -0,0 +1,166 @@
+import { Track } from 'livekit-client'
+import * as React from 'react'
+
+import { supportsScreenSharing } from '@livekit/components-core'
+
+import { usePersistentUserChoices } from '@livekit/components-react'
+
+import { StartMediaButton } from '../components/controls/StartMediaButton'
+import { OptionsButton } from '../components/controls/Options/OptionsButton'
+import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '../components/controls/ChatToggle'
+import { HandToggle } from '../components/controls/HandToggle'
+import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
+import { LeaveButton } from '../components/controls/LeaveButton'
+import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
+import { SupportToggle } from '../components/controls/SupportToggle'
+import { TranscriptToggle } from '../components/controls/TranscriptToggle'
+
+import { css } from '@/styled-system/css'
+
+/** @public */
+export type ControlBarControls = {
+  microphone?: boolean
+  camera?: boolean
+  chat?: boolean
+  screenShare?: boolean
+  leave?: boolean
+  settings?: boolean
+}
+
+/** @public */
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
+  variation?: 'minimal' | 'verbose' | 'textOnly'
+  controls?: ControlBarControls
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enable the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   * @alpha
+   */
+  saveUserChoices?: boolean
+}
+
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ *
+ * @remarks
+ * This component is build with other LiveKit components like `TrackToggle`,
+ * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function ControlBar({
+  saveUserChoices = true,
+  onDeviceError,
+}: ControlBarProps) {
+  const browserSupportsScreenSharing = supportsScreenSharing()
+
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled]
+  )
+
+  const cameraOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled]
+  )
+
+  return (
+    <div
+      className={css({
+        width: '100vw',
+        display: 'flex',
+        position: 'absolute',
+        padding: '1.125rem',
+        bottom: 0,
+        left: 0,
+        right: 0,
+      })}
+    >
+      <div
+        className={css({
+          display: 'flex',
+          justifyContent: 'flex-start',
+          flex: '1 1 33%',
+          alignItems: 'center',
+          gap: '0.5rem',
+          marginLeft: '0.5rem',
+        })}
+      ></div>
+      <div
+        className={css({
+          flex: '1 1 33%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          gap: '0.65rem',
+        })}
+      >
+        <SelectToggleDevice
+          source={Track.Source.Microphone}
+          onChange={microphoneOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Microphone, error })
+          }
+          onActiveDeviceChange={(deviceId) =>
+            saveAudioInputDeviceId(deviceId ?? '')
+          }
+        />
+        <SelectToggleDevice
+          source={Track.Source.Camera}
+          onChange={cameraOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Camera, error })
+          }
+          onActiveDeviceChange={(deviceId) =>
+            saveVideoInputDeviceId(deviceId ?? '')
+          }
+        />
+        {browserSupportsScreenSharing && (
+          <ScreenShareToggle
+            onDeviceError={(error) =>
+              onDeviceError?.({ source: Track.Source.ScreenShare, error })
+            }
+          />
+        )}
+        <HandToggle />
+        <OptionsButton />
+        <LeaveButton />
+        <StartMediaButton />
+      </div>
+      <div
+        className={css({
+          display: 'flex',
+          justifyContent: 'flex-end',
+          flex: '1 1 33%',
+          alignItems: 'center',
+          gap: '0.5rem',
+          paddingRight: '0.25rem',
+        })}
+      >
+        <ChatToggle />
+        <ParticipantsToggle />
+        <TranscriptToggle />
+        <SupportToggle />
+      </div>
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/ControlBar.tsx

@@ -1,103 +0,0 @@
-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'
-
-/** @public */
-export type ControlBarControls = {
-  microphone?: boolean
-  camera?: boolean
-  chat?: boolean
-  screenShare?: boolean
-  leave?: boolean
-  settings?: boolean
-}
-
-/** @public */
-export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
-  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
-  variation?: 'minimal' | 'verbose' | 'textOnly'
-  controls?: ControlBarControls
-  /**
-   * If `true`, the user's device choices will be persisted.
-   * This will enable the user to have the same device choices when they rejoin the room.
-   * @defaultValue true
-   * @alpha
-   */
-  saveUserChoices?: boolean
-}
-
-/**
- * The `ControlBar` prefab gives the user the basic user interface to control their
- * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
- *
- * @remarks
- * This component is build with other LiveKit components like `TrackToggle`,
- * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
- *
- * @example
- * ```tsx
- * <LiveKitRoom>
- *   <ControlBar />
- * </LiveKitRoom>
- * ```
- * @public
- */
-export function ControlBar({
-  saveUserChoices = true,
-  onDeviceError,
-}: ControlBarProps) {
-  const {
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
-
-  const microphoneOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
-    [saveAudioInputEnabled]
-  )
-
-  const cameraOnChange = React.useCallback(
-    (enabled: boolean, isUserInitiated: boolean) =>
-      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
-    [saveVideoInputEnabled]
-  )
-
-  const barProps = {
-    onDeviceError,
-    microphoneOnChange,
-    cameraOnChange,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-  }
-
-  const isMobile = useIsMobile()
-
-  return (
-    <SettingsDialogProvider>
-      {isMobile ? (
-        <MobileControlBar {...barProps} />
-      ) : (
-        <DesktopControlBar {...barProps} />
-      )}
-    </SettingsDialogProvider>
-  )
-}
-
-export interface ControlBarAuxProps {
-  onDeviceError: ControlBarProps['onDeviceError']
-  microphoneOnChange: (
-    enabled: boolean,
-    isUserInitiated: boolean
-  ) => void | null
-  cameraOnChange: (enabled: boolean, isUserInitiated: boolean) => void | null
-  saveAudioInputDeviceId: (deviceId: string) => void
-  saveVideoInputDeviceId: (deviceId: string) => void
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -1,108 +0,0 @@
-import { supportsScreenSharing } from '@livekit/components-core'
-import { ControlBarAuxProps } from './ControlBar'
-import { css } from '@/styled-system/css'
-import { LeaveButton } from '../../components/controls/LeaveButton'
-import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
-import { Track } from 'livekit-client'
-import { HandToggle } from '../../components/controls/HandToggle'
-import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
-import { OptionsButton } from '../../components/controls/Options/OptionsButton'
-import { StartMediaButton } from '../../components/controls/StartMediaButton'
-import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
-
-export function DesktopControlBar({
-  onDeviceError,
-  microphoneOnChange,
-  cameraOnChange,
-  saveAudioInputDeviceId,
-  saveVideoInputDeviceId,
-}: ControlBarAuxProps) {
-  const browserSupportsScreenSharing = supportsScreenSharing()
-  return (
-    <>
-      <div
-        className={css({
-          width: '100vw',
-          display: 'flex',
-          position: 'absolute',
-          padding: '1.125rem',
-          bottom: 0,
-          left: 0,
-          right: 0,
-        })}
-      >
-        <div
-          className={css({
-            display: 'flex',
-            justifyContent: 'flex-start',
-            flex: '1 1 33%',
-            alignItems: 'center',
-            gap: '0.5rem',
-            marginLeft: '0.5rem',
-          })}
-        ></div>
-        <div
-          className={css({
-            flex: '1 1 33%',
-            alignItems: 'center',
-            justifyContent: 'center',
-            display: 'flex',
-            gap: '0.65rem',
-          })}
-        >
-          <SelectToggleDevice
-            source={Track.Source.Microphone}
-            onChange={microphoneOnChange}
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Microphone, error })
-            }
-            onActiveDeviceChange={(deviceId) =>
-              saveAudioInputDeviceId(deviceId ?? '')
-            }
-            menuVariant="dark"
-          />
-          <SelectToggleDevice
-            source={Track.Source.Camera}
-            onChange={cameraOnChange}
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Camera, error })
-            }
-            onActiveDeviceChange={(deviceId) =>
-              saveVideoInputDeviceId(deviceId ?? '')
-            }
-            menuVariant="dark"
-          />
-          {browserSupportsScreenSharing && (
-            <ScreenShareToggle
-              onDeviceError={(error) =>
-                onDeviceError?.({ source: Track.Source.ScreenShare, error })
-              }
-            />
-          )}
-          <HandToggle />
-          <OptionsButton />
-          <LeaveButton />
-          <StartMediaButton />
-        </div>
-        <div
-          className={css({
-            display: 'flex',
-            justifyContent: 'flex-end',
-            flex: '1 1 33%',
-            alignItems: 'center',
-            gap: '0.5rem',
-            paddingRight: '0.25rem',
-          })}
-        >
-          <ChatToggle />
-          <ParticipantsToggle />
-          <TranscriptToggle />
-          <SupportToggle />
-        </div>
-      </div>
-    </>
-  )
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -1,186 +0,0 @@
-import { supportsScreenSharing } from '@livekit/components-core'
-import { useTranslation } from 'react-i18next'
-import { ControlBarAuxProps } from './ControlBar'
-import React from 'react'
-import { css } from '@/styled-system/css'
-import { LeaveButton } from '../../components/controls/LeaveButton'
-import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
-import { Track } from 'livekit-client'
-import { HandToggle } from '../../components/controls/HandToggle'
-import { Button } from '@/primitives/Button'
-import {
-  RiAccountBoxLine,
-  RiMegaphoneLine,
-  RiMore2Line,
-  RiSettings3Line,
-} from '@remixicon/react'
-import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
-import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
-import { useSidePanel } from '../../hooks/useSidePanel'
-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,
-  microphoneOnChange,
-  cameraOnChange,
-  saveAudioInputDeviceId,
-  saveVideoInputDeviceId,
-}: ControlBarAuxProps) {
-  const { t } = useTranslation('rooms')
-  const [isMenuOpened, setIsMenuOpened] = React.useState(false)
-  const browserSupportsScreenSharing = supportsScreenSharing()
-  const { toggleEffects } = useSidePanel()
-  const { setDialogOpen } = useSettingsDialog()
-
-  return (
-    <>
-      <div
-        className={css({
-          width: '100vw',
-          display: 'flex',
-          position: 'absolute',
-          padding: '1.125rem',
-          justifyContent: 'center',
-          bottom: 0,
-          left: 0,
-          right: 0,
-        })}
-      >
-        <div
-          className={css({
-            display: 'flex',
-            justifyContent: 'space-between',
-            width: '330px',
-          })}
-        >
-          <LeaveButton />
-          <SelectToggleDevice
-            source={Track.Source.Microphone}
-            onChange={microphoneOnChange}
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Microphone, error })
-            }
-            onActiveDeviceChange={(deviceId) =>
-              saveAudioInputDeviceId(deviceId ?? '')
-            }
-            hideMenu={true}
-          />
-          <SelectToggleDevice
-            source={Track.Source.Camera}
-            onChange={cameraOnChange}
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Camera, error })
-            }
-            onActiveDeviceChange={(deviceId) =>
-              saveVideoInputDeviceId(deviceId ?? '')
-            }
-            hideMenu={true}
-          />
-          <HandToggle />
-          <Button
-            square
-            variant="primaryDark"
-            aria-label={t('options.buttonLabel')}
-            tooltip={t('options.buttonLabel')}
-            onPress={() => setIsMenuOpened(true)}
-          >
-            <RiMore2Line />
-          </Button>
-        </div>
-      </div>
-      <ResponsiveMenu
-        isOpened={isMenuOpened}
-        onClosed={() => setIsMenuOpened(false)}
-      >
-        <div
-          className={css({
-            display: 'flex',
-            justifyContent: 'center',
-          })}
-        >
-          <div
-            className={css({
-              flexGrow: 1,
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
-              gridGap: '1rem',
-              '& > *': {
-                alignSelf: 'center',
-                justifySelf: 'center',
-              },
-            })}
-          >
-            {browserSupportsScreenSharing && (
-              <ScreenShareToggle
-                onDeviceError={(error) =>
-                  onDeviceError?.({ source: Track.Source.ScreenShare, error })
-                }
-                variant="primaryTextDark"
-                description={true}
-                onPress={() => setIsMenuOpened(false)}
-              />
-            )}
-            <ChatToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
-            <ParticipantsToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
-            <TranscriptToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
-            <SupportToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
-            <Button
-              onPress={() => {
-                toggleEffects()
-                setIsMenuOpened(false)
-              }}
-              variant="primaryTextDark"
-              aria-label={t('options.items.effects')}
-              tooltip={t('options.items.effects')}
-              description={true}
-            >
-              <RiAccountBoxLine size={20} />
-            </Button>
-            <LinkButton
-              href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-              variant="primaryTextDark"
-              tooltip={t('options.items.feedback')}
-              aria-label={t('options.items.feedback')}
-              description={true}
-              target="_blank"
-              onPress={() => setIsMenuOpened(false)}
-            >
-              <RiMegaphoneLine size={20} />
-            </LinkButton>
-            <Button
-              onPress={() => {
-                setDialogOpen(true)
-                setIsMenuOpened(false)
-              }}
-              variant="primaryTextDark"
-              aria-label={t('options.items.settings')}
-              tooltip={t('options.items.settings')}
-              description={true}
-            >
-              <RiSettings3Line size={20} />
-            </Button>
-            <CameraSwitchButton onPress={() => setIsMenuOpened(false)} />
-          </div>
-        </div>
-      </ResponsiveMenu>
-    </>
-  )
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/ResponsiveMenu.tsx

@@ -1,56 +0,0 @@
-import { css } from '@/styled-system/css'
-import { PropsWithChildren } from 'react'
-import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
-
-interface ResponsiveMenuProps extends PropsWithChildren {
-  isOpened: boolean
-  onClosed: () => void
-}
-
-export function ResponsiveMenu({
-  isOpened,
-  onClosed,
-  children,
-}: ResponsiveMenuProps) {
-  return (
-    <ModalOverlay
-      isDismissable
-      isOpen={isOpened}
-      onOpenChange={(isOpened) => {
-        if (!isOpened) {
-          onClosed()
-        }
-      }}
-      className={css({
-        width: '100vw',
-        height: 'var(--visual-viewport-height)',
-        zIndex: 100,
-        justifyContent: 'center',
-        alignItems: 'flex-end',
-        display: 'flex',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        padding: '1.5rem 1.5rem 1rem 1.5rem',
-        boxSizing: 'border-box',
-      })}
-    >
-      <Modal
-        className={css({
-          backgroundColor: 'primaryDark.200',
-          borderRadius: '20px',
-          flexGrow: 1,
-          padding: '1.5rem',
-          '&[data-entering]': {
-            animation: 'slide-full 200ms',
-          },
-          '&[data-exiting]': {
-            animation: 'slide-full 200ms reverse',
-          },
-        })}
-      >
-        <Dialog>{children}</Dialog>
-      </Modal>
-    </ModalOverlay>
-  )
-}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -20,7 +20,7 @@ import {
   useCreateLayoutContext,
 } from '@livekit/components-react'
 
-import { ControlBar } from './ControlBar/ControlBar'
+import { ControlBar } from './ControlBar'
 import { styled } from '@/styled-system/jsx'
 import { cva } from '@/styled-system/css'
 import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -6,14 +6,12 @@ import { Heading } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import {
   RiAccountCircleLine,
-  RiNotification3Line,
   RiSettings3Line,
   RiSpeakerLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
-import { NotificationsTab } from './tabs/NotificationsTab'
-import { GeneralTab } from './tabs/GeneralTab'
-import { AudioTab } from './tabs/AudioTab'
+import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
+import { AudioTab } from '@/features/settings/components/tabs/AudioTab.tsx'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useRef } from 'react'
 
@@ -83,17 +81,12 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               <RiSettings3Line />
               {isWideScreen && t('tabs.general')}
             </Tab>
-            <Tab icon highlight id="4">
-              <RiNotification3Line />
-              {isWideScreen && t('tabs.notifications')}
-            </Tab>
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
           <AccountTab id="1" onOpenChange={props.onOpenChange} />
           <AudioTab id="2" />
           <GeneralTab id="3" />
-          <NotificationsTab id="4" />
         </div>
       </Tabs>
     </Dialog>

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

@@ -1,41 +0,0 @@
-import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import { H, Switch } from '@/primitives'
-import { css } from '@/styled-system/css'
-import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { notificationsStore } from '@/stores/notifications'
-
-export type NotificationsTabProps = Pick<TabPanelProps, 'id'>
-
-export const NotificationsTab = ({ id }: NotificationsTabProps) => {
-  const { t } = useTranslation('settings', { keyPrefix: 'notifications' })
-  const notificationsSnap = useSnapshot(notificationsStore)
-  return (
-    <TabPanel padding={'md'} flex id={id}>
-      <H lvl={2}>{t('heading')}</H>
-      <ul
-        className={css({
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '1rem',
-        })}
-      >
-        {Array.from(notificationsSnap.soundNotifications).map(
-          ([key, value]) => (
-            <li key={key}>
-              <Switch
-                aria-label={`${t(`actions.${value ? 'disable' : 'enable'}`)} ${t('label')} "${t(`items.${key}`)}"`}
-                isSelected={value}
-                onChange={(v) => {
-                  notificationsStore.soundNotifications.set(key, v)
-                }}
-              >
-                {t(`items.${key}`)}
-              </Switch>
-            </li>
-          )
-        )}
-      </ul>
-    </TabPanel>
-  )
-}

src/frontend/src/locales/de/rooms.json

@@ -24,10 +24,7 @@
     "toggleOff": "",
     "toggleOn": "",
     "usernameHint": "",
-    "usernameLabel": "",
-    "errors": {
-      "usernameEmpty": ""
-    }
+    "usernameLabel": ""
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
@@ -83,11 +80,10 @@
   "options": {
     "buttonLabel": "",
     "items": {
-      "feedback": "",
+      "feedbacks": "",
       "settings": "",
       "username": "",
-      "effects": "",
-      "switchCamera": ""
+      "effects": ""
     }
   },
   "effects": {

src/frontend/src/locales/de/settings.json

@@ -19,19 +19,6 @@
     },
     "permissionsRequired": ""
   },
-  "notifications": {
-    "heading": "",
-    "label": "",
-    "actions": {
-      "disable": "",
-      "enable": ""
-    },
-    "items": {
-      "participantJoined": "",
-      "handRaised": "",
-      "messageReceived": ""
-    }
-  },
   "dialog": {
     "heading": ""
   },
@@ -43,7 +30,6 @@
   "tabs": {
     "account": "",
     "audio": "",
-    "general": "",
-    "notifications": ""
+    "general": ""
   }
 }

src/frontend/src/locales/en/rooms.json

@@ -18,16 +18,13 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "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"
-    }
+    "usernameLabel": "Your name"
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
@@ -82,16 +79,15 @@
   "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"
+      "effects": "Apply effects"
     }
   },
   "effects": {
     "activateCamera": "Your camera is disabled. Choose an option to enable it.",
-    "notAvailable": "The blur effect will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(",
+    "notAvailable": "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": {
       "light": "Light blur",

src/frontend/src/locales/en/settings.json

@@ -19,19 +19,6 @@
     },
     "permissionsRequired": "Permissions required"
   },
-  "notifications": {
-    "heading": "Sound notifications",
-    "label": "sound notifications for",
-    "actions": {
-      "disable": "Disable",
-      "enable": "Enable"
-    },
-    "items": {
-      "participantJoined": "Participant joined",
-      "handRaised": "Hand raised",
-      "messageReceived": "Message received"
-    }
-  },
   "dialog": {
     "heading": "Settings"
   },
@@ -43,7 +30,6 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
-    "general": "General",
-    "notifications": "Notifications"
+    "general": "General"
   }
 }

src/frontend/src/locales/fr/rooms.json

@@ -18,16 +18,13 @@
       "enable": "Activer le micro",
       "label": "Microphone"
     },
-    "heading": "Rejoindre la réunion",
+    "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"
-    }
+    "usernameLabel": "Votre nom"
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
@@ -82,16 +79,15 @@
   "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"
+      "effects": "Appliquer des effets"
     }
   },
   "effects": {
     "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
-    "notAvailable": "L'effet de flou sera bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour une meilleure performance ou Firefox :(",
+    "notAvailable": "L'effet de flou sera bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome :(",
     "heading": "Flou",
     "blur": {
       "light": "Léger flou",

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

@@ -19,19 +19,6 @@
     },
     "permissionsRequired": "Autorisations nécessaires"
   },
-  "notifications": {
-    "heading": "Notifications sonores",
-    "label": "la notification sonore pour",
-    "actions": {
-      "disable": "Désactiver",
-      "enable": "Activer"
-    },
-    "items": {
-      "participantJoined": "Un nouveau participant",
-      "handRaised": "Une main levée",
-      "messageReceived": "Un message reçu"
-    }
-  },
   "dialog": {
     "heading": "Paramètres"
   },
@@ -43,7 +30,6 @@
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
-    "general": "Général",
-    "notifications": "Notifications"
+    "general": "Général"
   }
 }

src/frontend/src/primitives/Box.tsx

@@ -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',
   },
 })

src/frontend/src/primitives/Button.tsx

@@ -5,14 +5,10 @@ import {
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
-import { ReactNode } from 'react'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
-  TooltipWrapperProps & {
-    // Use tooltip as description below the button.
-    description?: boolean
-  }
+  TooltipWrapperProps
 
 export const Button = ({
   tooltip,
@@ -26,10 +22,7 @@ export const Button = ({
       <RACButton
         className={buttonRecipe(variantProps)}
         {...(componentProps as RACButtonsProps)}
-      >
-        {componentProps.children as ReactNode}
-        {props.description && <span>{tooltip}</span>}
-      </RACButton>
+      />
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/Field.tsx

@@ -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>)}

src/frontend/src/primitives/LinkButton.tsx

@@ -2,14 +2,10 @@ import { Link, LinkProps } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
-import { ReactNode } from 'react'
 
 type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
   LinkProps &
-  TooltipWrapperProps & {
-    // Use tooltip as description below the button.
-    description?: boolean
-  }
+  TooltipWrapperProps
 
 export const LinkButton = ({
   tooltip,
@@ -20,12 +16,7 @@ export const LinkButton = ({
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <Link className={buttonRecipe(variantProps)} {...componentProps}>
-        <>
-          {componentProps.children as ReactNode}
-          {props.description && <span>{tooltip}</span>}
-        </>
-      </Link>
+      <Link className={buttonRecipe(variantProps)} {...componentProps} />
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/Menu.tsx

@@ -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>

src/frontend/src/primitives/MenuList.tsx

@@ -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}

src/frontend/src/primitives/Separator.tsx

@@ -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',
   },
 })

src/frontend/src/primitives/Switch.tsx

@@ -1,69 +0,0 @@
-import {
-  Switch as RACSwitch,
-  SwitchProps as RACSwitchProps,
-} from 'react-aria-components'
-import { styled } from '@/styled-system/jsx'
-import { StyledVariantProps } from '@/styled-system/types'
-import { ReactNode } from 'react'
-
-export const StyledSwitch = styled(RACSwitch, {
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.571rem',
-    color: 'black',
-    forcedColorAdjust: 'none',
-    '& .indicator': {
-      width: '2.6rem',
-      height: '1.563rem',
-      border: '0.125rem solid',
-      borderColor: 'primary.800',
-      borderRadius: '1.143rem',
-      transition: 'all 200ms, outline 200ms',
-      _before: {
-        content: '""',
-        display: 'block',
-        margin: '0.125rem',
-        width: '1.063rem',
-        height: '1.063rem',
-        borderRadius: '1.063rem',
-        background: 'primary.800',
-        transition: 'all 200ms',
-      },
-    },
-    '&[data-selected] .indicator': {
-      borderColor: 'primary.800',
-      background: 'primary.800',
-      _before: {
-        background: 'white',
-        transform: 'translateX(100%)',
-      },
-    },
-    '&[data-disabled] .indicator': {
-      borderColor: 'primary.200',
-      background: 'transparent',
-      _before: {
-        background: 'primary.200',
-      },
-    },
-    '&[data-focus-visible] .indicator': {
-      outline: '2px solid!',
-      outlineColor: 'focusRing!',
-      outlineOffset: '2px!',
-    },
-  },
-  variants: {},
-})
-
-export type SwitchProps = StyledVariantProps<typeof StyledSwitch> &
-  RACSwitchProps & { children: ReactNode }
-
-/**
- * Styled RAC Switch.
- */
-export const Switch = ({ children, ...props }: SwitchProps) => (
-  <StyledSwitch {...props}>
-    <div className="indicator" />
-    {children}
-  </StyledSwitch>
-)

src/frontend/src/primitives/ToggleButton.tsx

@@ -1,17 +1,9 @@
 import {
   ToggleButton as RACToggleButton,
-  ToggleButtonProps as RACToggleButtonProps,
+  ToggleButtonProps,
 } from 'react-aria-components'
 import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
 import { TooltipWrapper, TooltipWrapperProps } from './TooltipWrapper'
-import { ReactNode } from 'react'
-
-export type ToggleButtonProps = RACToggleButtonProps &
-  ButtonRecipeProps &
-  TooltipWrapperProps & {
-    // Use tooltip as description below the button.
-    description?: boolean
-  }
 
 /**
  * React aria ToggleButton with our button styles, that can take a tooltip if needed
@@ -20,20 +12,14 @@ export const ToggleButton = ({
   tooltip,
   tooltipType,
   ...props
-}: ToggleButtonProps) => {
+}: ToggleButtonProps & ButtonRecipeProps & TooltipWrapperProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
-
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACToggleButton
         {...componentProps}
         className={buttonRecipe(variantProps)}
-      >
-        <>
-          {componentProps.children as ReactNode}
-          {props.description && <span>{tooltip}</span>}
-        </>
-      </RACToggleButton>
+      />
     </TooltipWrapper>
   )
 }

src/frontend/src/primitives/buttonRecipe.ts

@@ -1,5 +1,9 @@
 import { type RecipeVariantProps, cva } from '@/styled-system/css'
 
+export type ButtonRecipe = typeof buttonRecipe
+
+export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>
+
 export const buttonRecipe = cva({
   base: {
     display: 'flex',
@@ -218,16 +222,6 @@ export const buttonRecipe = cva({
     shySelected: {
       true: {},
     },
-    description: {
-      true: {
-        flexDirection: 'column',
-        gap: '0.5rem',
-        '& span': {
-          fontSize: '13px',
-          textAlign: 'center',
-        },
-      },
-    },
     // if the button is next to other ones to make a "button group", tell where the button is to handle radius
     groupPosition: {
       left: {
@@ -261,7 +255,3 @@ export const buttonRecipe = cva({
     variant: 'primary',
   },
 })
-
-export type ButtonRecipe = typeof buttonRecipe
-
-export type ButtonRecipeProps = RecipeVariantProps<ButtonRecipe>

src/frontend/src/primitives/index.ts

@@ -29,4 +29,3 @@ export { ToggleButton } from './ToggleButton'
 export { Ul } from './Ul'
 export { VerticallyOffCenter } from './VerticallyOffCenter'
 export { TextArea } from './TextArea'
-export { Switch } from './Switch'

src/frontend/src/primitives/menuRecipe.ts

@@ -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',
   },
 })

src/frontend/src/stores/notifications.ts

@@ -1,44 +0,0 @@
-import { proxy, subscribe } from 'valtio'
-import { proxyMap } from 'valtio/utils'
-import { deserializeToProxyMap, serializeProxyMap } from '@/utils/valtio'
-import { STORAGE_KEYS } from '@/utils/storageKeys'
-import { NotificationType } from '@/features/notifications/NotificationType'
-
-type State = {
-  soundNotifications: Map<NotificationType, boolean>
-  soundNotificationVolume: number
-}
-
-const DEFAULT_STATE: State = {
-  soundNotifications: proxyMap(
-    new Map([
-      [NotificationType.ParticipantJoined, true],
-      [NotificationType.HandRaised, true],
-    ])
-  ),
-  soundNotificationVolume: 0.1,
-}
-
-function getNotificationsState(): State {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS)
-    if (!stored) return DEFAULT_STATE
-    const parsed = JSON.parse(stored, deserializeToProxyMap)
-    return parsed || DEFAULT_STATE
-  } catch (error: unknown) {
-    console.error(
-      '[NotificationsStore] Failed to parse stored settings:',
-      error
-    )
-    return DEFAULT_STATE
-  }
-}
-
-export const notificationsStore = proxy<State>(getNotificationsState())
-
-subscribe(notificationsStore, () => {
-  localStorage.setItem(
-    STORAGE_KEYS.NOTIFICATIONS,
-    JSON.stringify(notificationsStore, serializeProxyMap)
-  )
-})

src/frontend/src/styles/index.css

@@ -29,12 +29,3 @@ body,
 body:has(.lk-video-conference) #crisp-chatbox > div > a {
   display: none !important;
 }
-
-@keyframes slide-full {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}

src/frontend/src/utils/constants.ts

@@ -1,2 +0,0 @@
-export const GRIST_FORM =
-  'https://grist.numerique.gouv.fr/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4' as const

src/frontend/src/utils/storageKeys.tsx

@@ -1,6 +0,0 @@
-/**
- * Object containing all localStorage keys used across the app
- */
-export const STORAGE_KEYS = {
-  NOTIFICATIONS: 'app_notification_settings',
-} as const

src/frontend/src/utils/useIsMobile.ts

@@ -1,20 +0,0 @@
-import { isMobileBrowser } from '@livekit/components-core'
-import { useEffect, useState } from 'react'
-
-export const useIsMobile = () => {
-  const [isMobile, setIsMobile] = useState(isMobileBrowser())
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(isMobileBrowser())
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
-  return isMobile
-}

src/frontend/src/utils/valtio.ts

@@ -1,28 +0,0 @@
-import { proxyMap } from 'valtio/utils'
-
-/**
- * Serializes Map objects into a JSON-friendly format while preserving valtio proxyMap compatibility
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function serializeProxyMap(_: string, value: any) {
-  if (value instanceof Map) {
-    return {
-      dataType: 'Map',
-      value: Array.from(value.entries()),
-    }
-  }
-  return value
-}
-
-/**
- * Custom JSON reviver function for deserializing Map objects and wrapping them in valtio proxyMap
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function deserializeToProxyMap(_: string, value: any) {
-  if (typeof value === 'object' && value !== null) {
-    if (value.dataType === 'Map') {
-      return proxyMap(new Map(value.value))
-    }
-  }
-  return value
-}

src/helm/env.d/dev-keycloak/values.egress.yaml.gotmpl

@@ -1,43 +0,0 @@
-replicaCount: 1
-terminationGracePeriodSeconds: 18000
-
-egress:
-  log_level: debug
-  ws_url: ws://livekit-livekit-server:80
-  insecure: true
-  enable_chrome_sandbox: true
-  {{- with .Values.livekit.keys }}
-  {{- range $key, $value := . }}
-  api_key: {{ $key }}
-  api_secret: {{ $value }}
-  {{- end }}
-  {{- end }}
-  redis:
-    address: redis-master:6379
-    password: pass
-  s3:
-    access_key: meet
-    secret: password
-    region: local
-    bucket: meet-media-storage
-    endpoint: http://minio:9000
-    force_path_style: true
-
-loadBalancer:
-  type: nginx
-  annotations:
-    nginx.ingress.kubernetes.io/rewrite-target: /
-    nginx.ingress.kubernetes.io/ssl-redirect: "true"
-    cert-manager.io/cluster-issuer: "letsencrypt-prod"
-  tls:
-    - hosts:
-        - livekit-egress.127.0.0.1.nip.io
-      secretName: livekit-egress-dinum-cert
-
-autoscaling:
-  enabled: false
-  minReplicas: 1
-  maxReplicas: 5
-
-nodeSelector: {}
-resources: {}

src/helm/env.d/dev-keycloak/values.livekit.yaml.gotmpl

@@ -1,40 +0,0 @@
-replicaCount: 1
-terminationGracePeriodSeconds: 18000
-
-livekit:
-  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
-  keys:
-  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"
-    cert-manager.io/cluster-issuer: "letsencrypt-prod"
-  tls:
-    - hosts:
-        - livekit.127.0.0.1.nip.io
-      secretName: livekit-dinum-cert
-
-autoscaling:
-  enabled: false
-  minReplicas: 1
-  maxReplicas: 5
-  targetCPUUtilizationPercentage: 60
-
-nodeSelector: {}
-resources: {}

src/helm/env.d/dev-keycloak/values.meet.yaml.gotmpl

@@ -1,196 +0,0 @@
-image:
-  repository: localhost:5001/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: {{ .Values.djangoSecretKey }}
-    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: postgres-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
-    {{- with .Values.livekit.keys }}
-    {{- range $key, $value := . }}
-    LIVEKIT_API_SECRET: {{ $value }}
-    LIVEKIT_API_KEY: {{ $key }}
-    {{- end }}
-    {{- end }}
-    LIVEKIT_API_URL: https://livekit.127.0.0.1.nip.io/
-    ALLOW_UNREGISTERED_ROOMS: False
-    FRONTEND_SILENCE_LIVEKIT_DEBUG: False
-    FRONTEND_SUPPORT: "{'id': '58ea6697-8eba-4492-bc59-ad6562585041'}"
-    AWS_S3_ENDPOINT_URL: http://minio.meet.svc.cluster.local:9000
-    AWS_S3_ACCESS_KEY_ID: meet
-    AWS_S3_SECRET_ACCESS_KEY: password
-    AWS_STORAGE_BUCKET_NAME: meet-media-storage
-    AWS_S3_REGION_NAME: local
-    RECORDING_ENABLE: True
-    RECORDING_VERIFY_SSL: True
-    RECORDING_STORAGE_EVENT_ENABLE: True
-    RECORDING_STORAGE_EVENT_TOKEN: password
-    SUMMARY_SERVICE_ENDPOINT: http://meet-summary:80/api/v1/tasks/
-    SUMMARY_SERVICE_API_TOKEN: password
-
-
-  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
-
-  # 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
-    VITE_HOST: 0.0.0.0
-    VITE_API_BASE_URL: https://meet.127.0.0.1.nip.io/
-
-  replicas: 1
-
-  image:
-    repository: localhost:5001/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: 1
-  envVars:
-    APP_NAME: summary-microservice
-    APP_API_TOKEN: password
-    AWS_STORAGE_BUCKET_NAME: meet-media-storage
-    AWS_S3_ENDPOINT_URL: minio.meet.svc.cluster.local:9000
-    AWS_S3_ACCESS_KEY_ID: meet
-    AWS_S3_SECRET_ACCESS_KEY: password
-    OPENAI_API_KEY: password
-    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
-    OPENAI_ASR_MODEL: openai/whisper-large-v3
-    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
-    AWS_S3_SECURE_ACCESS: False
-    WEBHOOK_API_TOKEN: password
-    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"
-    - "--host"
-    - "0.0.0.0"
-    - "--port"
-    - "8000"
-    - "--reload"
-
-celery:
-  replicas: 1
-  envVars:
-    APP_NAME: summary-microservice
-    APP_API_TOKEN: password
-    AWS_STORAGE_BUCKET_NAME: meet-media-storage
-    AWS_S3_ENDPOINT_URL: minio.meet.svc.cluster.local:9000
-    AWS_S3_ACCESS_KEY_ID: meet
-    AWS_S3_SECRET_ACCESS_KEY: password
-    OPENAI_API_KEY: password
-    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
-    OPENAI_ASR_MODEL: openai/whisper-large-v3
-    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
-    AWS_S3_SECURE_ACCESS: False
-    WEBHOOK_API_TOKEN: password
-    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:
-    - "celery"
-    - "-A"
-    - "summary.core.celery_worker"
-    - "worker"
-    - "--pool=solo"
-    - "--loglevel=info"

src/helm/env.d/dev-keycloak/values.secrets.yaml

@@ -1,10 +0,0 @@
-djangoSecretKey: u!vbjDW71aru&OZA%NZQi0x
-livekit:
-    keys:
-        devkey: secret
-livekitApi:
-    key: devkey
-    secret: secret
-oidc:
-    clientId: meet
-    clientSecret: ThisIsAnExampleKeyForDevPurposeOnly

src/helm/env.d/dev/secrets.enc.yaml

@@ -0,0 +1,103 @@
+djangoSecretKey: ENC[AES256_GCM,data:p+9m8eNB/dKMXAdfL0cVCg1uKhAv+YLrM+jjajvRYmOZZ9qbiikuFv0dyDp32va/M9w=,iv:ijUztg7ta6BBTsKs+IIfJMFdN0DfzyAKoxlfY8lisPg=,tag:B+uW6akIV0iI2LdMQotrpw==,type:str]
+oidc:
+    clientId: ENC[AES256_GCM,data:rHzKkQwFQ7hV6kOBBP60RK41NBKVMUs4dMcZavMQ8gCu9ust,iv:8vviSb+XIKS/zjBIScfmWu0VJ8lXCQZ8p7BxuvJtA2w=,tag:k8vn8I/qxKLE/+JNTDj4Jw==,type:str]
+    clientSecret: ENC[AES256_GCM,data:dOYJoG2PStlOMIJPi2exPzsqlxis73iTkcBMvjr8DBr2isWzstpbexscsog7Tuyelw4tpzrJKzC5BTTwJ+xioQ==,iv:oqkLRTPB8+qR0AHvjyNVfHRmoeGrkUvZjrTsWBjIeBc=,tag:hryfmSeqkdWCN9U38jxXlA==,type:str]
+#ENC[AES256_GCM,data:ua1td/VBXGIHDgAw/bm8XnWIRLmgeJKX9dP7g/rNv3jVsXHw6T+iDXxMWpLXNicAZ/RTymdntlwLwsH47r70Z4icEPsjps0yOZ+X734vaL9wVH9IsyFwCihtyck94kgY4CyC7DI=,iv:iGHYu+2aPaI28PQWFheVVuge8BPWLw1VB7Afsz7eLtI=,tag:pfkXsS+/QmHb3kHS/ONHCA==,type:comment]
+livekit:
+    keys:
+        devkey: ENC[AES256_GCM,data:5RnAMGm3,iv:bY4n8op2KFlXRqzV9h3QwoC3Bws2aEoN1GFxPlrrVBw=,tag:lA+b/6poVRzeJW6Bu8V29A==,type:str]
+livekitApi:
+    key: ENC[AES256_GCM,data:JP7KkPms,iv:LlIJ62IRyGf8fByl6abSZv1to2FUc90laC0oL5HFJK4=,tag:2aLMQ79GlDOaiurh8unO0Q==,type:str]
+    secret: ENC[AES256_GCM,data:kGDJo1lh,iv:dnI1OuvZGOJZEKZwzoigXqViqYCw/6H7Y0sVXH/p5RA=,tag:G1IB0mc8zuKEmkxrfyImrQ==,type:str]
+sops:
+    kms: []
+    gcp_kms: []
+    azure_kv: []
+    hc_vault: []
+    age:
+        - recipient: age15fyxdwmg5mvldtqqus87xspuws2u0cpvwheehrtvkexj4tnsqqysw6re2x
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSByR3IybDN3eGx4amYzZkFt
+            OW5VV3FQN3dkSmZBL0JwUE1qSzNLYmRTc1RjCkVCQ2ZmaHk2SFRJaXdMd0VMZUlP
+            b0VQeDVUTDBEZzhBQnhrS2RybzYvL1UKLS0tIG1CbllhWGpsOWx4WEkya0NLeUlC
+            WmRScW9MVkxQLzRxdk85WTZ4U2E0aUUKTpOPYQXutU0xYLih7SNYoQgO+PSEIERL
+            HLz+C7iV+Fj1/M7JrgiGxTB8wJoKMo7IhJ8AjxaAdxR4Q1TgUpQkPw==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age16hnlml8yv4ynwy0seer57g8qww075crd0g7nsundz3pj4wk7m3vqftszg7
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSA0aE15QkRsNmg2UTkxaWNF
+            T3NZY2RqSDd0WlRKOHYxWFE2R3J5SGJhRjJNClNIcEFwOEtoSmRWQjdaSm1ZSnlj
+            amhNci9tRDl2Qlp4dlBGZFYzTGxYdm8KLS0tIDZZWTYxQmVqOEZQaTNOODFGWUhn
+            cXpJL3poT3dpYjZKWTN6dGpOV3kxT2sKozsOz+cSYJdZ0C2L6QCf/VSU9DnOz6ae
+            lqV5MMzSl1Jf8ETpqt+PhvvWz+MLCAkIriT9yf6R29DQifCacB7XOA==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age1plkp8td6zzfcavjusmsfrlk54t9vn8jjxm8zaz7cmnr7kzl2nfnsd54hwg
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSBySkpOYWxjQVZRbGtkNXlt
+            OTRKTDlrNjNMenU3V0hPeXYyRnhGVU1mMmhNCmhJTi9ZQzB3ekpSR0k1VDFiNExu
+            dW9TQkI3Vy9LOXhQaEExZHMyM25xZlEKLS0tIGRYTkpzbjIvL1FMS2lYYXl4dDVZ
+            U040akh0Z1ZYVmdjS3k2ZjFRK2VRNGMKqSCnviWARWTkZXeht+sdOYKAxylYYyZK
+            uXYE3nBaXGosIqmTf6deVqCIY+m0mH/J4UMcbH+faMV4pWmVr2JAxg==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age12g6f5fse25tgrwweleh4jls3qs52hey2edh759smulwmk5lnzadslu2cp3
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSBJbUhzZStoUVBHUkZLWlE3
+            NWNiRkJMdXhUVXRNZTFCMUljVzIxY3BVMFQ4ClpmOGhqeUZiaG1HcU5zdndmWE5y
+            Ym5OTmoyVVVsb2Ywa3loRTVNZzdlVjQKLS0tIHNEWVV3Mkk2VGVzR3diQW5Ccm1a
+            MVNUYjZCME9rQWFUaWNycEh5THQyTTAKTBnoF76mJ/GoCIq4TsmV+luYbiWnx0+I
+            BEISvqsr9gbT0z8kfdo/htPoKHZmnyevZhRhd2AMZdKixYvQMX9sjA==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age1tl80n23wq6zxegupwn70ew0yp225ua5v4dk800x7g2w6pvlxz46qk592pa
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSBDWEZkODBNOGw2WFdncjJ0
+            TTVzRHlEa1AzaTF4V2hYR3hFRGg2cnBzYmowCmp3WDJ3bEZoTlFYL2hoZ3hhTVU1
+            WnQyYk03K2xmSk00dS92OHNNZnRIL2cKLS0tIEVrbjY4enJBZzdQMjRCRmwwVlRI
+            OHVOMm9NTGdJbnZ2aXYxdi9OdWpkVE0K4b1Hu6rOHVtfH601aXb/uTGYjNMh6yW/
+            LetO+HKk+VEzXHntObK2k/4mTl5I0+OP5H8+PR0jdIUZDpr79iEbgQ==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age1qy04neuzwpasmvljqrcvhwnf0kz5cpyteze38c8avp0czewskasszv9pyw
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSBqVE9iMmUwTXE2SHZNdG5P
+            Vi9XQ1Jkc1VDamFlakpkZk45ODZ2YnkwYkVBCnNrbktIdkV4UGltcHBUUHlXbjdx
+            Z0QwM3ZKbGI1cDBjL2g2cjdKdElOQjAKLS0tIGxrcTJDa1BWVWcxUS80MmxIMWZH
+            YjBRMDZJZWlmN1FNaXV5c04yVWtleE0K+nGNyFzqSotFP7My/kUnAgxXGu/ji50K
+            OGVLYgNvU48rCGck3r9ZrKY1HpQdAY8UMQXECsuO4HgdirNjiZ97Zg==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age18fgn6j2vwwswqcpv9xpcehq8mrf9zs2sglwkamp3tzwx8d9jq9jsrskrk9
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSA4ZXZud0dqb0dkQ0E3NnE4
+            SXB0ZENjQk1mb1BHU2R1bW0waDhTYy9OZldVCjVnRTV5d1c3Q2NzcEVRQ3BoL09I
+            T1RPQ3hHT3Y2NFNzWG9EdGM2STR2STgKLS0tIHBvL3RhREFNTVdwUGk3S1B4NWJL
+            TnZpblF1SDdGRlVXM0dEdFAzT1FEMUUK6L8gTv5gt6++A3B7PHyWl+xtBUc8bC6G
+            53xoJvyyBpaov3HgUAdrN9VHubfEJmrBGgN7DngGgwYPtlhV87M7/w==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age1hm2hsfgjezpsc3k0y5w5feq9t8vl3seq04qjhgt6ztd6403wfvpsgxu09m
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSBlaXY1VmtDejcwTmUxRVZT
+            YURhMkVPaHNvb0sxT0FYL0pvN3hqclNNcXdRCmxWV3FGeDZTM1VVMVRyalpkVnFJ
+            OGU3Wk9wVVAvejVTdjc1MENPcy9Qc1kKLS0tIGpJQXhZVzV3REc2SFlFSXg0dUo5
+            bjRBaGtJdUFmVUkxeGgwbGYwWjRnNEkKYwzwZ9oOo+C6XD57rkUTO6QADZKzYfSF
+            cFJ7fX0NyZbzxLncyofWa+dlLWLZ3KohIP0doAFngRm+RVsUEVqY5A==
+            -----END AGE ENCRYPTED FILE-----
+        - recipient: age1hnhuzj96ktkhpyygvmz0x9h8mfvssz7ss6emmukags644mdhf4msajk93r
+          enc: |
+            -----BEGIN AGE ENCRYPTED FILE-----
+            YWdlLWVuY3J5cHRpb24ub3JnL3YxCi0+IFgyNTUxOSB1aFNsL2xvWmI4UTAxREc4
+            NFF3bC9qRTBqS3JrM3B0ZjE5bEtjR0diT0VjClhFNStFU3RydnhvcG9CSmhYM3V4
+            VjZ5c0JQZjRoQXh1R2UyeDMyd2NFMEEKLS0tIDNwWUNzZmlrNGZPbERTeFpoUkxO
+            QnZTWWFMemk5djVNWFRaekVMRkMyUjgKt4dw4BOm3J1Ig6U58NbSjzJbWi3ak/Zq
+            8PX5IW7tq1q5+Qd3adqv3cd9S2aVpqjHyN34fxagmuwfvYXVyQ2GDg==
+            -----END AGE ENCRYPTED FILE-----
+    lastmodified: "2024-10-02T07:30:09Z"
+    mac: ENC[AES256_GCM,data:BdEiR/7AiTz9eppAGOAarFzUJYEfCZzb0lg8LXaHiXe74B5Ob7Ai+XuBBX+x9QPIFzbLZgVveVSrqymW0wAH9Dv5R+e4spDf5KKdRCr9RADfCXNjYC0N9grZVerM70Ic51Lc1kKDnB2mon01W5Sa77Ei29Jo988yvM8AOlXFvr4=,iv:p7PCazxKNv7YcGX7Kpp2L8wXEFaJO8FajEXcVMzmmWQ=,tag:WJKZOkFZSof6IhcXqc60uQ==,type:str]
+    pgp: []
+    unencrypted_suffix: _unencrypted
+    version: 3.9.0

src/helm/env.d/dev/values.meet.yaml.gotmpl

@@ -1,19 +1,3 @@
-secrets:
-  - name: oidcLogin
-    itemId: a25effec-eaea-4ce1-9ed8-3a3cc1c734db
-    field: username
-    podVariable: OIDC_RP_CLIENT_ID
-    clusterSecretStore: bitwarden-login-meet
-  - name: oidcPass
-    itemId: a25effec-eaea-4ce1-9ed8-3a3cc1c734db
-    field: password
-    podVariable: OIDC_RP_CLIENT_SECRET
-    clusterSecretStore: bitwarden-login-meet
-  - name: brevoApiKey
-    itemId: 99107889-6124-4436-97cc-a5193f28443f
-    field: password
-    podVariable: BREVO_API_KEY
-    clusterSecretStore: bitwarden-login-meet
 image:
   repository: localhost:5001/meet-backend
   pullPolicy: Always
@@ -37,14 +21,8 @@ backend:
     OIDC_OP_TOKEN_ENDPOINT: https://fca.integ01.dev-agentconnect.fr/api/v2/token
     OIDC_OP_USER_ENDPOINT: https://fca.integ01.dev-agentconnect.fr/api/v2/userinfo
     OIDC_OP_LOGOUT_ENDPOINT: https://fca.integ01.dev-agentconnect.fr/api/v2/session/end
-    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_CLIENT_ID: {{ .Values.oidc.clientId }}
+    OIDC_RP_CLIENT_SECRET: {{ .Values.oidc.clientSecret }}
     OIDC_RP_SIGN_ALGO: RS256
     OIDC_RP_SCOPES: "openid email given_name usual_name"
     OIDC_REDIRECT_ALLOWED_HOSTS: https://meet.127.0.0.1.nip.io
@@ -78,17 +56,11 @@ 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/
     SUMMARY_SERVICE_API_TOKEN: password
-    SIGNUP_NEW_USER_TO_MARKETING_EMAIL: True
-    BREVO_API_KEY:
-      secretKeyRef:
-        name: backend
-        key: BREVO_API_KEY
-    BREVO_API_CONTACT_LIST_IDS: 8
 
 
   migrate:
@@ -115,21 +87,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
@@ -168,9 +125,6 @@ summary:
     AWS_S3_ACCESS_KEY_ID: meet
     AWS_S3_SECRET_ACCESS_KEY: password
     OPENAI_API_KEY: password
-    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
-    OPENAI_ASR_MODEL: openai/whisper-large-v3
-    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
     AWS_S3_SECURE_ACCESS: False
     WEBHOOK_API_TOKEN: password
     WEBHOOK_URL: https://www.mock-impress.com/webhook/
@@ -201,9 +155,6 @@ celery:
     AWS_S3_ACCESS_KEY_ID: meet
     AWS_S3_SECRET_ACCESS_KEY: password
     OPENAI_API_KEY: password
-    OPENAI_BASE_URL: https://albertine.beta.numerique.gouv.fr/v1
-    OPENAI_ASR_MODEL: openai/whisper-large-v3
-    OPENAI_LLM_MODEL: meta-llama/Llama-3.1-8B-Instruct
     AWS_S3_SECURE_ACCESS: False
     WEBHOOK_API_TOKEN: password
     WEBHOOK_URL: https://www.mock-impress.com/webhook/

src/helm/env.d/dev/values.secrets.yaml

@@ -1,8 +0,0 @@
-djangoSecretKey: u!vbjDW71aru&OZA%NZQi0x
-livekit:
-    keys:
-        devkey: secret
-livekitApi:
-    key: devkey
-    secret: secret
-