wip update tag

Functional but not mergeable—remote participants need to be informed
when recording starts, including the egress ID to prevent collisions.

Quick and dirty implementation.

.github/workflows/docker-hub.yml

@@ -1,5 +1,4 @@
 name: Docker Hub Workflow
-run-name: Docker Hub Workflow
 
 on:
   workflow_dispatch:
@@ -49,15 +48,9 @@ jobs:
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
         run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        with:
-          docker-build-args: '--target backend-production -f Dockerfile'
-          docker-image-name: 'docker.io/lasuite/meet-backend:${{ github.sha }}'
       -
         name: Build and push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           target: backend-production
@@ -99,15 +92,9 @@ jobs:
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
         run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        with:
-          docker-build-args: '-f src/frontend/Dockerfile --target frontend-production'
-          docker-image-name: 'docker.io/lasuite/meet-frontend:${{ github.sha }}'
       -
         name: Build and push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: ./src/frontend/Dockerfile

.github/workflows/helmfile-linter.yml

@@ -1,22 +0,0 @@
-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/meet.yml

@@ -122,9 +122,6 @@ jobs:
       DB_PASSWORD: pass
       DB_PORT: 5432
       STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
-      AWS_S3_ENDPOINT_URL: http://localhost:9000
-      AWS_S3_ACCESS_KEY_ID: meet
-      AWS_S3_SECRET_ACCESS_KEY: password
       LIVEKIT_API_SECRET: secret
       LIVEKIT_API_KEY: devkey
 

.sops.yaml

@@ -8,5 +8,3 @@ creation_rules:
       - age1tl80n23wq6zxegupwn70ew0yp225ua5v4dk800x7g2w6pvlxz46qk592pa #marie
       - age1qy04neuzwpasmvljqrcvhwnf0kz5cpyteze38c8avp0czewskasszv9pyw #argocd
       - age18fgn6j2vwwswqcpv9xpcehq8mrf9zs2sglwkamp3tzwx8d9jq9jsrskrk9 #manuuu
-      - age1hm2hsfgjezpsc3k0y5w5feq9t8vl3seq04qjhgt6ztd6403wfvpsgxu09m # github-repo
-      - age1hnhuzj96ktkhpyygvmz0x9h8mfvssz7ss6emmukags644mdhf4msajk93r # Samuel Paccoud

Dockerfile

@@ -1,14 +1,15 @@
 # Django Meet
 
 # ---- base image to inherit from ----
-FROM python:3.12.6-alpine3.20 as base
+FROM python:3.10-slim-bullseye as base
 
 # Upgrade pip to its latest release to speed up dependencies installation
-RUN python -m pip install --upgrade pip setuptools
+RUN python -m pip install --upgrade pip
 
 # Upgrade system packages to install security updates
-RUN apk update && \
-  apk upgrade
+RUN apt-get update && \
+  apt-get -y upgrade && \
+  rm -rf /var/lib/apt/lists/*
 
 # ---- Back-end builder image ----
 FROM base as back-builder
@@ -37,9 +38,12 @@ RUN yarn install --frozen-lockfile && \
 FROM base as link-collector
 ARG MEET_STATIC_ROOT=/data/static
 
-RUN apk add \
-  pango \
-  rdfind
+# Install libpangocairo & rdfind
+RUN apt-get update && \
+    apt-get install -y \
+      libpangocairo-1.0-0 \
+      rdfind && \
+    rm -rf /var/lib/apt/lists/*
 
 # Copy installed python dependencies
 COPY --from=back-builder /install /usr/local
@@ -62,14 +66,17 @@ FROM base as core
 
 ENV PYTHONUNBUFFERED=1
 
-RUN apk add \
-  gettext \
-  cairo \
-  libffi-dev \
-  gdk-pixbuf \
-  pango \
-  shared-mime-info
-
+# Install required system libs
+RUN apt-get update && \
+    apt-get install -y \
+      gettext \
+      libcairo2 \
+      libffi-dev \
+      libgdk-pixbuf2.0-0 \
+      libpango-1.0-0 \
+      libpangocairo-1.0-0 \
+      shared-mime-info && \
+  rm -rf /var/lib/apt/lists/*
 
 # Copy entrypoint
 COPY ./docker/files/usr/local/bin/entrypoint /usr/local/bin/entrypoint
@@ -99,7 +106,9 @@ FROM core as backend-development
 USER root:root
 
 # Install psql
-RUN apk add postgresql-client
+RUN apt-get update && \
+    apt-get install -y postgresql-client && \
+    rm -rf /var/lib/apt/lists/*
 
 # Uninstall Meet and re-install it in editable mode along with development
 # dependencies

bin/validate-helm-configuration.sh

@@ -1,13 +0,0 @@
-#!/bin/bash
-
-set -e
-
-HELMFILE=src/helm/helmfile.yaml
-
-environments=$(awk '/environments:/ {flag=1; next} flag && NF {print} !NF {flag=0}' "$HELMFILE" | grep -E '^[[:space:]]{2}[a-zA-Z]+' | sed 's/^[[:space:]]*//;s/:.*//')
-
-for env in $environments; do
-	echo "################### $env lint ###################"
-	helmfile -e $env -f src/helm/helmfile.yaml lint || exit 1
-	echo -e "\n"
-done

docker-compose.yml

@@ -16,30 +16,6 @@ services:
     ports:
       - "1081:1080"
 
-  minio:
-    user: ${DOCKER_USER:-1000}
-    image: minio/minio
-    environment:
-      - MINIO_ROOT_USER=meet
-      - MINIO_ROOT_PASSWORD=password
-    ports:
-      - '9000:9000'
-      - '9001:9001'
-    entrypoint: ""
-    command: minio server --console-address :9001 /data
-    volumes:
-      - ./data/media:/data
-
-  createbuckets:
-    image: minio/mc
-    depends_on:
-      - minio
-    entrypoint: >
-      sh -c "
-      /usr/bin/mc alias set meet http://minio:9000 meet password && \
-      /usr/bin/mc mb meet/meet-media-storage && \
-      exit 0;"
-
   app-dev:
     build:
       context: .
@@ -64,7 +40,6 @@ services:
         - mailcatcher
         - redis
         - nginx
-        - createbuckets
         - livekit
   
   celery-dev:
@@ -98,7 +73,6 @@ services:
     depends_on:
       - postgresql
       - redis
-      - createbuckets
       - livekit
 
   celery:

env.d/development/common.dist

@@ -18,9 +18,6 @@ MEET_BASE_URL="http://localhost:8072"
 
 # Media
 STORAGES_STATICFILES_BACKEND=django.contrib.staticfiles.storage.StaticFilesStorage
-AWS_S3_ENDPOINT_URL=http://minio:9000
-AWS_S3_ACCESS_KEY_ID=meet
-AWS_S3_SECRET_ACCESS_KEY=password
 
 # OIDC
 OIDC_OP_JWKS_ENDPOINT=http://nginx:8083/realms/meet/protocol/openid-connect/certs

renovate.json

@@ -13,9 +13,7 @@
       "enabled": false,
       "groupName": "ignored js dependencies",
       "matchManagers": ["npm"],
-      "matchPackageNames": [
-        "eslint"
-      ]
+      "matchPackageNames": []
     }
   ]
 }

src/backend/.pylintrc

@@ -450,7 +450,7 @@ max-branches=12
 max-locals=15
 
 # Maximum number of parents for a class (see R0901).
-max-parents=10
+max-parents=7
 
 # Maximum number of public methods for a class (see R0904).
 max-public-methods=20

src/backend/core/api/permissions.py

@@ -39,30 +39,30 @@ class IsSelf(IsAuthenticated):
         return obj == request.user
 
 
-# class RoomPermissions(permissions.BasePermission):
-#     """
-#     Permissions applying to the room API endpoint.
-#     """
+class RoomPermissions(permissions.BasePermission):
+    """
+    Permissions applying to the room API endpoint.
+    """
 
-#     def has_permission(self, request, view):
-#         """Only allow authenticated users for unsafe methods."""
-#         if request.method in permissions.SAFE_METHODS:
-#             return True
+    def has_permission(self, request, view):
+        """Only allow authenticated users for unsafe methods."""
+        if request.method in permissions.SAFE_METHODS:
+            return True
 
-#         return request.user.is_authenticated
+        return request.user.is_authenticated
 
-#     def has_object_permission(self, request, view, obj):
-#         """Object permissions are only given to administrators of the room."""
+    def has_object_permission(self, request, view, obj):
+        """Object permissions are only given to administrators of the room."""
 
-#         if request.method in permissions.SAFE_METHODS:
-#             return True
+        if request.method in permissions.SAFE_METHODS:
+            return True
 
-#         user = request.user
+        user = request.user
 
-#         if request.method == "DELETE":
-#             return obj.is_owner(user)
+        if request.method == "DELETE":
+            return obj.is_owner(user)
 
-#         return obj.is_administrator(user)
+        return obj.is_administrator(user)
 
 
 class ResourceAccessPermission(permissions.BasePermission):
@@ -82,15 +82,4 @@ class ResourceAccessPermission(permissions.BasePermission):
         if request.method == "DELETE" and obj.role == RoleChoices.OWNER:
             return obj.user == user
 
-        return RoleChoices.is_administrator(obj.resource.get_roles(user))
-
-
-class AccessPermission(permissions.BasePermission):
-    """Permission class for access objects."""
-
-    def has_permission(self, request, view):
-        return request.user.is_authenticated or view.action != "create"
-
-    def has_object_permission(self, request, view, obj):
-        """Check permission for a given object."""
-        return obj.get_abilities(request.user).get(view.action, False)
+        return obj.resource.is_administrator(user)

src/backend/core/api/serializers.py

@@ -87,15 +87,6 @@ class NestedResourceAccessSerializer(ResourceAccessSerializer):
     user = UserSerializer(read_only=True)
 
 
-class ListRoomSerializer(serializers.ModelSerializer):
-    """Serialize Room model for a list API endpoint."""
-
-    class Meta:
-        model = models.Room
-        fields = ["id", "name", "slug", "is_public"]
-        read_only_fields = ["id", "slug"]
-
-
 class RoomSerializer(serializers.ModelSerializer):
     """Serialize Room model for the API."""
 
@@ -115,10 +106,10 @@ class RoomSerializer(serializers.ModelSerializer):
         if not request:
             return output
 
-        roles = instance.get_roles(request.user)
-        is_administrator = models.RoleChoices.is_administrator(roles)
+        role = instance.get_role(request.user)
+        is_admin = models.RoleChoices.check_administrator_role(role)
 
-        if roles:
+        if role is not None:
             access_serializer = NestedResourceAccessSerializer(
                 instance.accesses.select_related("resource", "user").all(),
                 context=self.context,
@@ -126,10 +117,10 @@ class RoomSerializer(serializers.ModelSerializer):
             )
             output["accesses"] = access_serializer.data
 
-        if not is_administrator:
+        if not is_admin:
             del output["configuration"]
 
-        if roles or instance.is_public:
+        if role is not None or instance.is_public:
             slug = f"{instance.id!s}".replace("-", "")
 
             username = request.query_params.get("username", None)
@@ -142,17 +133,6 @@ class RoomSerializer(serializers.ModelSerializer):
                 ),
             }
 
-        output["is_administrable"] = is_administrator
+        output["is_administrable"] = is_admin
 
         return output
-
-
-class RecordingSerializer(serializers.ModelSerializer):
-    """Serialize Recording for the API."""
-
-    room = ListRoomSerializer(read_only=True)
-
-    class Meta:
-        model = models.Recording
-        fields = ["id", "room", "created_at", "updated_at", "stopped_at", "status"]
-        read_only_fields = fields

src/backend/core/api/utils.py

@@ -1,33 +0,0 @@
-"""Util to generate S3 authorization headers for object storage access control"""
-
-from django.core.files.storage import default_storage
-
-import botocore
-
-
-def generate_s3_authorization_headers(key):
-    """
-    Generate authorization headers for an s3 object.
-    These headers can be used as an alternative to signed urls with many benefits:
-    - the urls of our files never expire and can be stored in our documents' content
-    - we don't leak authorized urls that could be shared (file access can only be done
-      with cookies)
-    - access control is truly realtime
-    - the object storage service does not need to be exposed on internet
-    """
-    url = default_storage.unsigned_connection.meta.client.generate_presigned_url(
-        "get_object",
-        ExpiresIn=0,
-        Params={"Bucket": default_storage.bucket_name, "Key": key},
-    )
-    request = botocore.awsrequest.AWSRequest(method="get", url=url)
-
-    s3_client = default_storage.connection.meta.client
-    # pylint: disable=protected-access
-    credentials = s3_client._request_signer._credentials  # noqa: SLF001
-    frozen_credentials = credentials.get_frozen_credentials()
-    region = s3_client.meta.region_name
-    auth = botocore.auth.S3SigV4Auth(frozen_credentials, "s3", region)
-    auth.add_auth(request)
-
-    return request

src/backend/core/api/viewsets.py

@@ -1,22 +1,17 @@
 """API endpoints"""
 
-import re
 import uuid
-from urllib.parse import urlparse
 
 from django.conf import settings
 from django.db.models import Q
 from django.http import Http404
 from django.shortcuts import get_object_or_404
-from django.utils import timezone
 from django.utils.text import slugify
 
 from rest_framework import (
     decorators,
-    exceptions,
     mixins,
     pagination,
-    status,
     viewsets,
 )
 from rest_framework import (
@@ -30,13 +25,6 @@ from . import permissions, serializers
 
 # pylint: disable=too-many-ancestors
 
-UUID_REGEX = (
-    r"[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
-)
-RECORDING_URL_PATTERN = re.compile(
-    f"{settings.MEDIA_URL:s}recordings/({UUID_REGEX:s})/file.mp4/$"
-)
-
 
 class NestedGenericViewSet(viewsets.GenericViewSet):
     """
@@ -174,7 +162,7 @@ class RoomViewSet(
     API endpoints to access and perform actions on rooms.
     """
 
-    permission_classes = [permissions.AccessPermission]
+    permission_classes = [permissions.RoomPermissions]
     queryset = models.Room.objects.all()
     serializer_class = serializers.RoomSerializer
 
@@ -198,10 +186,16 @@ class RoomViewSet(
         """
         try:
             instance = self.get_object()
+
+            analytics.track(
+                user=self.request.user,
+                event="Get Room",
+                properties={"slug": instance.slug},
+            )
+
         except Http404:
             if not settings.ALLOW_UNREGISTERED_ROOMS:
                 raise
-
             slug = slugify(self.kwargs["pk"])
             username = request.query_params.get("username", None)
             data = {
@@ -215,11 +209,6 @@ class RoomViewSet(
                 },
             }
         else:
-            analytics.track(
-                user=self.request.user,
-                event="Get Room",
-                properties={"slug": instance.slug},
-            )
             data = self.get_serializer(instance).data
 
         return drf_response.Response(data)
@@ -260,17 +249,6 @@ class RoomViewSet(
             },
         )
 
-    @decorators.action(detail=True, methods=["post"], url_path="start-recording")
-    def start_recording(self, request, *args, **kwargs):
-        """This view is used to start a recording for a room."""
-        # Check permission first
-        room = self.get_object()
-        recording = room.start_recording()
-
-        return drf_response.Response(
-            {"recording": recording.id}, status=status.HTTP_201_CREATED
-        )
-
 
 class ResourceAccessListModelMixin:
     """List mixin for resource access API."""
@@ -315,96 +293,3 @@ class ResourceAccessViewSet(
     permission_classes = [permissions.ResourceAccessPermission]
     queryset = models.ResourceAccess.objects.all()
     serializer_class = serializers.ResourceAccessSerializer
-
-
-class RecordingViewSet(
-    mixins.DestroyModelMixin,
-    mixins.ListModelMixin,
-    viewsets.GenericViewSet,
-):
-    """
-    API endpoints to access and perform actions on recordings.
-    """
-
-    pagination_class = Pagination
-    permission_classes = [permissions.AccessPermission]
-    queryset = models.Recording.objects.all()
-    serializer_class = serializers.RecordingSerializer
-
-    def list(self, request, *args, **kwargs):
-        """Restrict resources returned by the list endpoint to a user's room."""
-        queryset = self.filter_queryset(self.get_queryset())
-        user = self.request.user
-        if user.is_authenticated:
-            queryset = queryset.filter(room__accesses__user=user)
-        else:
-            queryset = queryset.none()
-
-        page = self.paginate_queryset(queryset)
-        if page is not None:
-            serializer = self.get_serializer(page, many=True)
-            return self.get_paginated_response(serializer.data)
-
-        serializer = self.get_serializer(queryset, many=True)
-        return drf_response.Response(serializer.data)
-
-    @decorators.action(detail=True, methods=["post"], url_path="stop")
-    def stop(self, request, *args, **kwargs):
-        """
-        This view is used to stop a recording. It can be called anonymously as the
-        recording ID will not have been communicated anywhere at the time of recording.
-        """
-        recording = self.get_object()
-
-        if recording.stopped_at is not None:
-            raise exceptions.PermissionDenied()
-
-        recording.stopped_at = timezone.now()
-        recording.save()
-
-        # TODO: Generate summary and send to note taking app
-
-        serializer = self.get_serializer(recording)
-        return drf_response.Response(serializer.data, status=status.HTTP_200_OK)
-
-    @decorators.action(detail=False, methods=["get"], url_path="retrieve-auth")
-    def retrieve_auth(self, request, *args, **kwargs):
-        """
-        This view is used by an Nginx subrequest to control access to a recording file.
-
-        The original url is passed by nginx in the "HTTP_X_ORIGINAL_URL" header.
-        See corresponding ingress configuration in Helm chart and read about the
-        nginx.ingress.kubernetes.io/auth-url annotation to understand how the Nginx ingress
-        is configured to do this.
-
-        Based on the original url and the logged in user, we must decide if we authorize Nginx
-        to let this request go through (by returning a 200 code) or if we block it (by returning
-        a 403 error). Note that we return 403 errors without any further details for security
-        reasons.
-
-        When we let the request go through, we compute authorization headers that will be added to
-        the request going through thanks to the nginx.ingress.kubernetes.io/auth-response-headers
-        annotation. The request will then be proxied to the object storage backend who will
-        respond with the file after checking the signature included in headers.
-        """
-        if not request.user.is_authenticated:
-            raise exceptions.AuthenticationFailed()
-
-        original_url = urlparse(request.META.get("HTTP_X_ORIGINAL_URL"))
-        match = RECORDING_URL_PATTERN.search(original_url.path)
-
-        try:
-            (pk,) = match.groups()
-        except AttributeError as excpt:
-            raise exceptions.PermissionDenied() from excpt
-
-        # Check permission
-        if not models.Recording.objects.filter(
-            pk=pk, room__accesses__user=request.user
-        ).exists():
-            raise exceptions.PermissionDenied()
-
-        # Generate authorization headers and return an authorization to proceed with the request
-        key = models.Recording(pk=pk).key
-        request = utils.generate_s3_authorization_headers(key)
-        return drf_response.Response("authorized", headers=request.headers, status=200)

src/backend/core/factories.py

@@ -65,12 +65,3 @@ class RoomFactory(ResourceFactory):
 
     name = factory.Faker("catch_phrase")
     slug = factory.LazyAttribute(lambda o: slugify(o.name))
-
-
-class RecordingFactory(factory.django.DjangoModelFactory):
-    """Create fake recordings for testing."""
-
-    class Meta:
-        model = models.Recording
-
-    room = factory.SubFactory(RoomFactory)

src/backend/core/migrations/0005_alter_user_language_recording.py

@@ -1,37 +0,0 @@
-# Generated by Django 5.1.1 on 2024-10-12 11:52
-
-import django.db.models.deletion
-import uuid
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('core', '0004_alter_user_language'),
-    ]
-
-    operations = [
-        migrations.AlterField(
-            model_name='user',
-            name='language',
-            field=models.CharField(choices="(('en-us', 'English'), ('fr-fr', 'French'))", default='en-us', help_text='The language in which the user wants to see the interface.', max_length=10, verbose_name='language'),
-        ),
-        migrations.CreateModel(
-            name='Recording',
-            fields=[
-                ('id', models.UUIDField(default=uuid.uuid4, editable=False, help_text='primary key for the record as UUID', primary_key=True, serialize=False, verbose_name='id')),
-                ('created_at', models.DateTimeField(auto_now_add=True, help_text='date and time at which a record was created', verbose_name='created on')),
-                ('updated_at', models.DateTimeField(auto_now=True, help_text='date and time at which a record was last updated', verbose_name='updated on')),
-                ('stopped_at', models.DateTimeField(blank=True, null=True, verbose_name='End Time')),
-                ('status', models.CharField(choices=[('recording', 'Recording'), ('done', 'Done')], default='recording')),
-                ('room', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='meetings', to='core.room', verbose_name='Room')),
-            ],
-            options={
-                'verbose_name': 'Recording',
-                'verbose_name_plural': 'Recordings',
-                'db_table': 'meet_recording',
-                'ordering': ('created_at',),
-            },
-        ),
-    ]

src/backend/core/models.py

@@ -28,16 +28,14 @@ class RoleChoices(models.TextChoices):
     OWNER = "owner", _("Owner")
 
     @classmethod
-    def is_administrator(cls, roles):
+    def check_administrator_role(cls, role):
         """Check if a role is administrator."""
-        return bool(set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN}))
+        return role in [cls.ADMIN, cls.OWNER]
 
-
-class RecordingStatusChoices(models.TextChoices):
-    """Recording status choices."""
-
-    RECORDING = "recording", _("Recording")
-    DONE = "done", _("Done")
+    @classmethod
+    def check_owner_role(cls, role):
+        """Check if a role is owner."""
+        return role == cls.OWNER
 
 
 class BaseModel(models.Model):
@@ -195,44 +193,34 @@ class Resource(BaseModel):
         except AttributeError:
             return f"Resource {self.id!s}"
 
+    def get_role(self, user):
+        """
+        Determine the role of a given user in this resource.
+        """
+        if not user or not user.is_authenticated:
+            return None
+
+        role = None
+        for access in self.accesses.filter(user=user):
+            if access.role == RoleChoices.OWNER:
+                return RoleChoices.OWNER
+            if access.role == RoleChoices.ADMIN:
+                role = RoleChoices.ADMIN
+            if access.role == RoleChoices.MEMBER and role != RoleChoices.ADMIN:
+                role = RoleChoices.MEMBER
+        return role
+
     def is_administrator(self, user):
         """
         Check if a user is administrator of the resource.
+
         Users carrying the "owner" role are considered as administrators a fortiori.
         """
-        return RoleChoices.is_administrator(self.get_roles(user))
+        return RoleChoices.check_administrator_role(self.get_role(user))
 
     def is_owner(self, user):
         """Check if a user is owner of the resource."""
-        return RoleChoices.OWNER in self.get_roles(user)
-
-    def get_roles(self, user):
-        """Compute the roles a user has in a room."""
-        if not user or not user.is_authenticated:
-            return self.accesses.none()
-
-        try:
-            roles = self.user_roles or []
-        except AttributeError:
-            try:
-                roles = self.accesses.filter(user=user).values_list("role", flat=True)
-            except (models.ObjectDoesNotExist, IndexError):
-                roles = self.accesses.none()
-        return roles
-
-    def get_abilities(self, user):
-        """Compute and return abilities for a given user on the room."""
-        roles = self.get_roles(user)
-        is_owner_or_admin = RoleChoices.is_administrator(roles)
-
-        return {
-            "start_recording": is_owner_or_admin,
-            "destroy": RoleChoices.OWNER in roles,
-            "manage_accesses": is_owner_or_admin,
-            "partial_update": is_owner_or_admin,
-            "retrieve": True,
-            "update": is_owner_or_admin,
-        }
+        return RoleChoices.check_owner_role(self.get_role(user))
 
 
 class ResourceAccess(BaseModel):
@@ -337,47 +325,3 @@ class Room(Resource):
         else:
             raise ValidationError({"name": f'Room name "{self.name:s}" is reserved.'})
         super().clean_fields(exclude=exclude)
-
-    def start_recording(self):
-        """Create a new related recording object to which Livekit will be able to save a file."""
-        return Recording.objects.create(room=self)
-
-
-class Recording(BaseModel):
-    """Model for recording meetings that take place in a room"""
-
-    room = models.ForeignKey(
-        Room, on_delete=models.CASCADE, related_name="meetings", verbose_name=_("Room")
-    )
-    stopped_at = models.DateTimeField(verbose_name=_("End Time"), null=True, blank=True)
-    status = models.CharField(
-        choices=RecordingStatusChoices, default=RecordingStatusChoices.RECORDING
-    )
-
-    class Meta:
-        db_table = "meet_recording"
-        ordering = ("created_at",)
-        verbose_name = _("Recording")
-        verbose_name_plural = _("Recordings")
-
-    def __str__(self):
-        return _(
-            f"Recording in {self.room.name:s} on {self.created_at:%B %d, %Y at %I:%M %p}"
-        )
-
-    @property
-    def key(self):
-        """Return the path where the recording file will be stored in object storage."""
-        return f"recordings/{self.pk!s}/file.mp4/"
-
-    def get_abilities(self, user):
-        """Compute and return abilities for a given user on the recording."""
-        roles = self.room.get_roles(user)
-
-        return {
-            "destroy": RoleChoices.OWNER in roles,
-            "partial_update": False,
-            "retrieve": False,
-            "stop": True,
-            "update": False,
-        }

src/backend/core/tests/recordings/test_api_recordings_delete.py

@@ -1,102 +0,0 @@
-"""
-Test recordings API endpoints in the Meet core app: delete.
-"""
-
-import pytest
-from rest_framework.test import APIClient
-
-from ...factories import RecordingFactory, UserFactory
-from ...models import Recording
-
-pytestmark = pytest.mark.django_db
-
-
-def test_api_recordings_delete_anonymous():
-    """Anonymous users should not be allowed to destroy a recording."""
-    recording = RecordingFactory()
-    client = APIClient()
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{recording.id!s}/",
-    )
-
-    assert response.status_code == 401
-    assert Recording.objects.count() == 1
-
-
-def test_api_recordings_delete_authenticated():
-    """
-    Authenticated users should not be allowed to delete a recording from a room to which
-    they are not related.
-    """
-    recording = RecordingFactory()
-    user = UserFactory()
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{recording.id!s}/",
-    )
-
-    assert response.status_code == 403
-    assert Recording.objects.count() == 1
-
-
-def test_api_recordings_delete_members():
-    """
-    Authenticated users should not be allowed to delete a recording from a room of which
-    they are only a member.
-    """
-    user = UserFactory()
-    recording = RecordingFactory(
-        room__users=[(user, "member")]
-    )  # as user declared in the room but not administrator
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{recording.id}/",
-    )
-
-    assert response.status_code == 403
-    assert Recording.objects.count() == 1
-
-
-def test_api_recordings_delete_administrators():
-    """
-    Authenticated users should not be allowed to delete a recording from a room in which
-    they are administrator.
-    """
-    user = UserFactory()
-    recording = RecordingFactory(room__users=[(user, "administrator")])
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{recording.id}/",
-    )
-
-    assert response.status_code == 403
-    assert Recording.objects.count() == 1
-
-
-def test_api_recordings_delete_owners():
-    """
-    Authenticated users should be able to delete a recording from a room in which they are
-    directly owner.
-    """
-    user = UserFactory()
-    recording = RecordingFactory(room__users=[(user, "owner")])
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.delete(
-        f"/api/v1.0/recordings/{recording.id}/",
-    )
-
-    assert response.status_code == 204
-    assert Recording.objects.exists() is False

src/backend/core/tests/recordings/test_api_recordings_list.py

@@ -1,132 +0,0 @@
-"""
-Test recordings API endpoints in the Meet core app: list.
-"""
-
-from unittest import mock
-
-import pytest
-from rest_framework.pagination import PageNumberPagination
-from rest_framework.test import APIClient
-
-from core import factories
-
-pytestmark = pytest.mark.django_db
-
-
-def test_api_recordings_list_anonymous():
-    """Anonymous users should not be able to list recordings."""
-    factories.RecordingFactory(room__is_public=False)
-    factories.RecordingFactory(room__is_public=True)
-
-    response = APIClient().get("/api/v1.0/recordings/")
-
-    assert response.status_code == 200
-    assert response.json() == {
-        "count": 0,
-        "next": None,
-        "previous": None,
-        "results": [],
-    }
-
-
-def test_api_recordings_list_authenticated():
-    """
-    Authenticated users listing recordings, should only see the recordings
-    to which they are related.
-    """
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    other_user = factories.UserFactory()
-
-    factories.RecordingFactory(room__is_public=False)
-    factories.RecordingFactory(room__is_public=True)
-    factories.RecordingFactory(room__is_public=False, room__users=[other_user])
-
-    recording = factories.RecordingFactory(room__is_public=False, room__users=[user])
-    room = recording.room
-
-    response = client.get(
-        "/api/v1.0/recordings/",
-    )
-
-    assert response.status_code == 200
-    results = response.json()["results"]
-    assert len(results) == 1
-    expected_ids = {
-        str(recording.id),
-    }
-    result_ids = {result["id"] for result in results}
-    assert expected_ids == result_ids
-    assert results[0] == {
-        "id": str(recording.id),
-        "created_at": recording.created_at.isoformat().replace("+00:00", "Z"),
-        "stopped_at": None,
-        "room": {
-            "id": str(room.id),
-            "is_public": room.is_public,
-            "name": room.name,
-            "slug": room.slug,
-        },
-        "status": "recording",
-        "updated_at": recording.updated_at.isoformat().replace("+00:00", "Z"),
-    }
-
-
-@mock.patch.object(PageNumberPagination, "get_page_size", return_value=2)
-def test_api_recordings_list_pagination(_mock_page_size):
-    """Pagination should work as expected."""
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    recordings = factories.RecordingFactory.create_batch(3, room__users=[user])
-    recording_ids = [str(r.id) for r in recordings]
-
-    response = client.get("/api/v1.0/recordings/")
-
-    assert response.status_code == 200
-    content = response.json()
-    assert content["count"] == 3
-    assert content["next"] == "http://testserver/api/v1.0/recordings/?page=2"
-    assert content["previous"] is None
-
-    assert len(content["results"]) == 2
-    for item in content["results"]:
-        recording_ids.remove(item["id"])
-
-    # Get page 2
-    response = client.get(
-        "/api/v1.0/recordings/?page=2",
-    )
-
-    assert response.status_code == 200
-    content = response.json()
-
-    assert content["count"] == 3
-    assert content["next"] is None
-    assert content["previous"], "http://testserver/api/v1.0/recordings/"
-
-    assert len(content["results"]) == 1
-    recording_ids.remove(content["results"][0]["id"])
-    assert recording_ids == []
-
-
-def test_api_recordings_list_authenticated_distinct():
-    """A recording for a public room with several related users should only be listed once."""
-    user = factories.UserFactory()
-    other_user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    recording = factories.RecordingFactory(
-        room__is_public=True, room__users=[user, other_user]
-    )
-
-    response = client.get("/api/v1.0/recordings/")
-
-    assert response.status_code == 200
-    content = response.json()
-    assert len(content["results"]) == 1
-    assert content["results"][0]["id"] == str(recording.id)

src/backend/core/tests/recordings/test_api_recordings_retrieve_auth.py

@@ -1,128 +0,0 @@
-"""
-Test file downloads API endpoint for users in Meet's core app.
-"""
-
-from urllib.parse import urlparse
-
-from django.conf import settings
-from django.core.files.storage import default_storage
-from django.utils import timezone
-
-import pytest
-import requests
-from rest_framework.test import APIClient
-
-from core import factories, models
-
-pytestmark = pytest.mark.django_db
-
-
-# This is a minimal MP4 file header, which creates a 1-second empty video
-VIDEO_BYTES = (
-    b"\x00\x00\x00\x18ftypmp42\x00\x00\x00\x00mp42mp41"
-    b"\x00\x00\x00\x08free\x00\x00\x02\xeemdat"
-)
-
-
-@pytest.mark.parametrize("is_public", [True, False])
-def test_api_recordings_retrieve_auth_anonymous(is_public):
-    """Anonymous users should not be able to retrieve recordings for a room."""
-    room = factories.RoomFactory(is_public=is_public)
-    recording = room.start_recording()
-
-    default_storage.connection.meta.client.put_object(
-        Bucket=default_storage.bucket_name,
-        Key=recording.key,
-        Body=VIDEO_BYTES,
-        ContentType="video/mp4",
-    )
-
-    original_url = f"http://localhost/media/{recording.key:s}"
-    response = APIClient().get(
-        "/api/v1.0/recordings/retrieve-auth/", HTTP_X_ORIGINAL_URL=original_url
-    )
-
-    assert response.status_code == 401
-
-
-@pytest.mark.parametrize("is_public", [True, False])
-def test_api_recordings_retrieve_auth_authenticated(is_public):
-    """
-    Authenticated users who are not related to a room should not be able to
-    retrieve recordings for this room.
-    """
-    room = factories.RoomFactory(is_public=is_public)
-    recording = room.start_recording()
-
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    default_storage.connection.meta.client.put_object(
-        Bucket=default_storage.bucket_name,
-        Key=recording.key,
-        Body=VIDEO_BYTES,
-        ContentType="video/mp4",
-    )
-
-    original_url = f"http://localhost/media/{recording.key:s}"
-    response = client.get(
-        "/api/v1.0/recordings/retrieve-auth/", HTTP_X_ORIGINAL_URL=original_url
-    )
-
-    assert response.status_code == 403
-
-
-@pytest.mark.parametrize("is_public", [True, False])
-@pytest.mark.parametrize("role", models.RoleChoices.values)
-def test_api_recordings_retrieve_auth_admin_or_owner(role, is_public):
-    """
-    Users who are administrator or owner of a room, should be able to retrieve recordings.
-    """
-    room = factories.RoomFactory(is_public=is_public)
-    recording = room.start_recording()
-
-    user = factories.UserFactory()
-    client = APIClient()
-    client.force_login(user)
-
-    factories.UserResourceAccessFactory(resource=room, user=user, role=role)
-
-    # deposit a recording in S3
-    default_storage.connection.meta.client.put_object(
-        Bucket=default_storage.bucket_name,
-        Key=recording.key,
-        Body=VIDEO_BYTES,
-        ContentType="video/mp4",
-    )
-
-    # verify getting object content from url with authorization headers
-    original_url = f"http://localhost/media/{recording.key:s}"
-    response = client.get(
-        "/api/v1.0/recordings/retrieve-auth/", HTTP_X_ORIGINAL_URL=original_url
-    )
-
-    assert response.status_code == 200
-
-    authorization = response["Authorization"]
-    assert "AWS4-HMAC-SHA256 Credential=" in authorization
-    assert (
-        "SignedHeaders=host;x-amz-content-sha256;x-amz-date, Signature="
-        in authorization
-    )
-    assert response["X-Amz-Date"] == timezone.now().strftime("%Y%m%dT%H%M%SZ")
-
-    s3_url = urlparse(settings.AWS_S3_ENDPOINT_URL)
-    file_url = f"{settings.AWS_S3_ENDPOINT_URL:s}/meet-media-storage/{recording.key:s}"
-    response = requests.get(
-        file_url,
-        headers={
-            "authorization": authorization,
-            "x-amz-date": response["x-amz-date"],
-            "x-amz-content-sha256": response["x-amz-content-sha256"],
-            "Host": f"{s3_url.hostname:s}:{s3_url.port:d}",
-        },
-        timeout=1,
-    )
-
-    assert response.content == VIDEO_BYTES

src/backend/core/tests/recordings/test_api_recordings_stop.py

@@ -1,56 +0,0 @@
-"""
-Test recordings API endpoints in the Meet core app: stop.
-"""
-
-from datetime import datetime, timezone
-from unittest import mock
-from uuid import uuid4
-
-from django.utils import timezone as django_timezone
-
-import pytest
-from rest_framework.test import APIClient
-
-from core import factories
-
-pytestmark = pytest.mark.django_db
-
-
-def test_api_recording_stop_recording_success():
-    """Anonymous users can stop a recording just with its UUID."""
-    recording = factories.RecordingFactory()
-
-    now = datetime(2010, 1, 1, tzinfo=timezone.utc)
-    with mock.patch.object(django_timezone, "now", return_value=now):
-        response = APIClient().post(f"/api/v1.0/recordings/{recording.id!s}/stop/")
-
-    assert response.status_code == 200
-    recording.refresh_from_db()
-    assert recording.stopped_at == now
-
-
-def test_api_recording_stop_recording_unknown():
-    """Trying to stop an unknown recording should return a 404."""
-    response = APIClient().post(f"/api/v1.0/recordings/{uuid4()!s}/stop/")
-
-    assert response.status_code == 404
-
-
-def test_api_recording_stop_recording_already_stopped():
-    """
-    Trying to stop a recording that was already stopped should return a 403 and leave
-    the recording unmodified.
-    """
-    recording = factories.RecordingFactory()
-
-    response = APIClient().post(f"/api/v1.0/recordings/{recording.id!s}/stop/")
-
-    assert response.status_code == 200
-    recording.refresh_from_db()
-    stopped_at = recording.stopped_at
-
-    response = APIClient().post(f"/api/v1.0/recordings/{recording.id!s}/stop/")
-
-    assert response.status_code == 403
-    recording.refresh_from_db()
-    assert recording.stopped_at == stopped_at

src/backend/core/tests/rooms/test_api_rooms_retrieve.py

@@ -286,7 +286,7 @@ def test_api_rooms_retrieve_members(mock_token, django_assert_num_queries):
     client = APIClient()
     client.force_login(user)
 
-    with django_assert_num_queries(5):
+    with django_assert_num_queries(4):
         response = client.get(
             f"/api/v1.0/rooms/{room.id!s}/",
         )
@@ -360,7 +360,7 @@ def test_api_rooms_retrieve_administrators(mock_token, django_assert_num_queries
     client = APIClient()
     client.force_login(user)
 
-    with django_assert_num_queries(5):
+    with django_assert_num_queries(4):
         response = client.get(
             f"/api/v1.0/rooms/{room.id!s}/",
         )

src/backend/core/tests/rooms/test_api_rooms_start_recording.py

@@ -1,88 +0,0 @@
-"""
-Test rooms API endpoints in the Meet core app: start-recording.
-"""
-
-import pytest
-from rest_framework.test import APIClient
-
-from core import factories, models
-
-pytestmark = pytest.mark.django_db
-
-
-def test_api_rooms_start_recording_anonymous():
-    """Anonymous users should not be allowed to start a recording for a room."""
-    room = factories.RoomFactory()
-
-    response = APIClient().post(f"/api/v1.0/rooms/{room.id!s}/start-recording/")
-
-    assert response.status_code == 401
-    assert models.Recording.objects.exists() is False
-
-
-def test_api_rooms_start_recording_authenticated():
-    """
-    Authenticated users should not be allowed to start a recording for a room
-    to which they are not related.
-    """
-    user = factories.UserFactory()
-    room = factories.RoomFactory()
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(f"/api/v1.0/rooms/{room.id!s}/start-recording/")
-
-    assert response.status_code == 403
-    assert models.Recording.objects.exists() is False
-
-
-def test_api_rooms_start_recording_members():
-    """
-    Users who are members of a room but not administrators should
-    not be allowed to start a recording in this room.
-    """
-    user = factories.UserFactory()
-    room = factories.RoomFactory(users=[(user, "member")])
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(f"/api/v1.0/rooms/{room.id!s}/start-recording/")
-
-    assert response.status_code, 403
-    assert models.Recording.objects.exists() is False
-
-
-@pytest.mark.parametrize("role", ["administrator", "owner"])
-def test_api_rooms_start_recording_administrators(role):
-    """Administrators or owners of a room should be allowed to start a recording in this room."""
-    user = factories.UserFactory()
-    room = factories.RoomFactory(users=[(user, role)])
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(f"/api/v1.0/rooms/{room.id!s}/start-recording/")
-
-    assert response.status_code == 201
-    assert models.Recording.objects.get().room == room
-
-
-@pytest.mark.parametrize("role", ["administrator", "owner"])
-def test_api_rooms_start_recording_administrators_of_another(role):
-    """
-    Being administrator or owner of a room should not grant authorization
-    to update another room.
-    """
-    user = factories.UserFactory()
-    factories.RoomFactory(users=[(user, role)])
-    other_room = factories.RoomFactory()
-
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(f"/api/v1.0/rooms/{other_room.id!s}/start-recording/")
-
-    assert response.status_code, 403
-    assert models.Recording.objects.exists() is False

src/backend/core/tests/test_models_rooms.py

@@ -86,66 +86,81 @@ def test_models_rooms_is_public_default():
     assert room.is_public is True
 
 
-def test_models_recordings_key():
-    """Check the room key format."""
-    room = RoomFactory()
-    recording = room.start_recording()
-    assert recording.key == f"recordings/{recording.pk!s}/file.mp4/"
-
-
 # Access rights methods
 
 
 def test_models_rooms_access_rights_none(django_assert_num_queries):
-    """The `get_roles` method should return an empty list when called with None."""
+    """Calling access rights methods with None should return None."""
     room = RoomFactory()
 
     with django_assert_num_queries(0):
-        assert not list(room.get_roles(None))
+        assert room.get_role(None) is None
+    with django_assert_num_queries(0):
+        assert room.is_administrator(None) is False
+    with django_assert_num_queries(0):
+        assert room.is_owner(None) is False
 
 
 def test_models_rooms_access_rights_anonymous(django_assert_num_queries):
-    """The `get_roles` method should return an empty list for an anonymous user."""
+    """Check access rights methods on the room object for an anonymous user."""
     user = AnonymousUser()
     room = RoomFactory()
 
     with django_assert_num_queries(0):
-        assert not list(room.get_roles(user))
+        assert room.get_role(user) is None
+    with django_assert_num_queries(0):
+        assert room.is_administrator(user) is False
+    with django_assert_num_queries(0):
+        assert room.is_owner(user) is False
 
 
 def test_models_rooms_access_rights_authenticated(django_assert_num_queries):
-    """
-    The `get_roles` method should return an empty list for a user not related to the room.
-    """
+    """Check access rights methods on the room object for an unrelated user."""
     user = UserFactory()
     room = RoomFactory()
 
     with django_assert_num_queries(1):
-        assert not list(room.get_roles(user))
+        assert room.get_role(user) is None
+    with django_assert_num_queries(1):
+        assert room.is_administrator(user) is False
+    with django_assert_num_queries(1):
+        assert room.is_owner(user) is False
 
 
 def test_models_rooms_access_rights_member_direct(django_assert_num_queries):
-    """Check `get_roles` method on the room object for a direct member."""
+    """Check access rights methods on the room object for a direct member."""
     user = UserFactory()
     room = RoomFactory(users=[(user, "member")])
 
     with django_assert_num_queries(1):
-        assert list(room.get_roles(user)) == ["member"]
+        assert room.get_role(user) == "member"
+    with django_assert_num_queries(1):
+        assert room.is_administrator(user) is False
+    with django_assert_num_queries(1):
+        assert room.is_owner(user) is False
 
 
 def test_models_rooms_access_rights_administrator_direct(django_assert_num_queries):
-    """Check `get_roles` method on the room object for a direct administrator."""
+    """The is_administrator method should return True for a direct administrator."""
     user = UserFactory()
     room = RoomFactory(users=[(user, "administrator")])
 
     with django_assert_num_queries(1):
-        assert list(room.get_roles(user)) == ["administrator"]
+        assert room.get_role(user) == "administrator"
+    with django_assert_num_queries(1):
+        assert room.is_administrator(user) is True
+    with django_assert_num_queries(1):
+        assert room.is_owner(user) is False
 
 
 def test_models_rooms_access_rights_owner_direct(django_assert_num_queries):
-    """Check `get_roles` method on the room object for an owner."""
+    """Check access rights methods on the room object for an owner."""
     user = UserFactory()
     room = RoomFactory(users=[(user, "owner")])
 
     with django_assert_num_queries(1):
-        assert list(room.get_roles(user)) == ["owner"]
+        assert room.get_role(user) == "owner"
+    with django_assert_num_queries(1):
+        assert room.is_administrator(user) is True
+    with django_assert_num_queries(1):
+        assert room.is_owner(user) is True

src/backend/core/urls.py

@@ -5,13 +5,12 @@ from django.urls import include, path
 
 from rest_framework.routers import DefaultRouter
 
-from core.api import get_frontend_configuration, viewsets
+from core.api import viewsets
 from core.authentication.urls import urlpatterns as oidc_urls
 
 # - Main endpoints
 router = DefaultRouter()
 router.register("users", viewsets.UserViewSet, basename="users")
-router.register("recordings", viewsets.RecordingViewSet, basename="recordings")
 router.register("rooms", viewsets.RoomViewSet, basename="rooms")
 router.register(
     "resource-accesses", viewsets.ResourceAccessViewSet, basename="resource_accesses"
@@ -24,7 +23,6 @@ urlpatterns = [
             [
                 *router.urls,
                 *oidc_urls,
-                path("config/", get_frontend_configuration, name="config"),
             ]
         ),
     ),

src/backend/core/utils.py

@@ -11,9 +11,7 @@ from typing import Optional
 from uuid import uuid4
 
 from django.conf import settings
-from django.core.files.storage import default_storage
 
-import botocore
 from livekit.api import AccessToken, VideoGrants
 
 
@@ -55,6 +53,7 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
         room=room,
         room_join=True,
         room_admin=True,
+        room_record=True,
         can_update_own_metadata=True,
         can_publish_sources=[
             "camera",
@@ -83,31 +82,3 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
     )
 
     return token.to_jwt()
-
-
-def generate_s3_authorization_headers(key):
-    """
-    Generate authorization headers for an s3 object.
-    These headers can be used as an alternative to signed urls with many benefits:
-    - the urls of our files never expire and can be stored in our documents' content
-    - we don't leak authorized urls that could be shared (file access can only be done
-      with cookies)
-    - access control is truly realtime
-    - the object storage service does not need to be exposed on internet
-    """
-    url = default_storage.unsigned_connection.meta.client.generate_presigned_url(
-        "get_object",
-        ExpiresIn=0,
-        Params={"Bucket": default_storage.bucket_name, "Key": key},
-    )
-    request = botocore.awsrequest.AWSRequest(method="get", url=url)
-
-    s3_client = default_storage.connection.meta.client
-    # pylint: disable=protected-access
-    credentials = s3_client._request_signer._credentials  # noqa: SLF001
-    frozen_credentials = credentials.get_frozen_credentials()
-    region = s3_client.meta.region_name
-    auth = botocore.auth.S3SigV4Auth(frozen_credentials, "s3", region)
-    auth.add_auth(request)
-
-    return request

src/backend/meet/settings.py

@@ -119,25 +119,6 @@ class Base(Configuration):
         },
     }
 
-    # Media
-    AWS_S3_ENDPOINT_URL = values.Value(
-        environ_name="AWS_S3_ENDPOINT_URL", environ_prefix=None
-    )
-    AWS_S3_ACCESS_KEY_ID = values.Value(
-        environ_name="AWS_S3_ACCESS_KEY_ID", environ_prefix=None
-    )
-    AWS_S3_SECRET_ACCESS_KEY = values.Value(
-        environ_name="AWS_S3_SECRET_ACCESS_KEY", environ_prefix=None
-    )
-    AWS_S3_REGION_NAME = values.Value(
-        environ_name="AWS_S3_REGION_NAME", environ_prefix=None
-    )
-    AWS_STORAGE_BUCKET_NAME = values.Value(
-        "meet-media-storage",
-        environ_name="AWS_STORAGE_BUCKET_NAME",
-        environ_prefix=None,
-    )
-
     # Internationalization
     # https://docs.djangoproject.com/en/3.1/topics/i18n/
 
@@ -270,19 +251,6 @@ class Base(Configuration):
         "REDOC_DIST": "SIDECAR",
     }
 
-    # Frontend
-    FRONTEND_CONFIGURATION = {
-        "analytics": values.DictValue(
-            {}, environ_name="FRONTEND_ANALYTICS", environ_prefix=None
-        ),
-        "support": values.DictValue(
-            {}, environ_name="FRONTEND_SUPPORT", environ_prefix=None
-        ),
-        "silence_livekit_debug_logs": values.BooleanValue(
-            False, environ_name="FRONTEND_SILENCE_LIVEKIT_DEBUG", environ_prefix=None
-        ),
-    }
-
     # Mail
     EMAIL_BACKEND = values.Value("django.core.mail.backends.smtp.EmailBackend")
     EMAIL_HOST = values.Value(None)
@@ -290,7 +258,6 @@ class Base(Configuration):
     EMAIL_HOST_PASSWORD = values.Value(None)
     EMAIL_PORT = values.PositiveIntegerValue(None)
     EMAIL_USE_TLS = values.BooleanValue(False)
-    EMAIL_USE_SSL = values.BooleanValue(False)
     EMAIL_FROM = values.Value("from@example.com")
 
     AUTH_USER_MODEL = "core.User"
@@ -568,14 +535,6 @@ class Production(Base):
     #
     # In other cases, you should comment the following line to avoid security issues.
     SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
-    SECURE_HSTS_SECONDS = 60
-    SECURE_HSTS_PRELOAD = True
-    SECURE_HSTS_INCLUDE_SUBDOMAINS = True
-    SECURE_SSL_REDIRECT = True
-    SECURE_REDIRECT_EXEMPT = [
-        "^__lbheartbeat__",
-        "^__heartbeat__",
-    ]
 
     # Modern browsers require to have the `secure` attribute on cookies with `Samesite=none`
     CSRF_COOKIE_SECURE = True

src/backend/meet/urls.py

@@ -1,6 +1,7 @@
 """URL configuration for the Meet project"""
 
 from django.conf import settings
+from django.conf.urls.static import static
 from django.contrib import admin
 from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 from django.urls import include, path, re_path
@@ -17,7 +18,11 @@ urlpatterns = [
 ]
 
 if settings.DEBUG:
-    urlpatterns = urlpatterns + staticfiles_urlpatterns()
+    urlpatterns = (
+        urlpatterns
+        + staticfiles_urlpatterns()
+        + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+    )
 
 
 if settings.USE_SWAGGER or settings.DEBUG:

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.7"
+version = "0.1.5"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,33 +25,34 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.34",
+    "boto3==1.35.10",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
     "django-cors-headers==4.4.0",
     "django-countries==7.6.1",
     "django-parler==2.3",
-    "redis==5.1.1",
+    "redis==5.0.8",
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.1",
+    "django==5.1",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
-    "easy_thumbnails==2.10",
+    "easy_thumbnails==2.9",
     "factory_boy==3.3.1",
+    "freezegun==1.5.1",
     "gunicorn==23.0.0",
     "jsonschema==4.23.0",
     "june-analytics-python==2.3.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.3",
+    "psycopg[binary]==3.2.1",
     "PyJWT==2.9.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.15.0",
+    "sentry-sdk==2.13.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
@@ -69,20 +70,19 @@ dependencies = [
 dev = [
     "django-extensions==3.2.3",
     "drf-spectacular-sidecar==2024.7.1",
-    "freezegun==1.5.1",
     "ipdb==0.13.13",
     "ipython==8.27.0",
     "pyfakefs==5.6.0",
     "pylint-django==2.5.5",
     "pylint==3.2.7",
     "pytest-cov==5.0.0",
-    "pytest-django==4.9.0",
-    "pytest==8.3.3",
+    "pytest-django==4.8.0",
+    "pytest==8.3.2",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.5",
-    "types-requests==2.32.0.20240914",
+    "ruff==0.6.3",
+    "types-requests==2.32.0.20240712",
 ]
 
 [tool.setuptools]

src/frontend/Dockerfile

@@ -32,7 +32,7 @@ WORKDIR /home/frontend
 RUN npm run build
 
 # ---- Front-end image ----
-FROM nginxinc/nginx-unprivileged:1.26-alpine as frontend-production
+FROM nginxinc/nginx-unprivileged:1.25 as frontend-production
 
 # Un-privileged user running the application
 ARG DOCKER_USER

src/frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/play-icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visio</title>
+    <title>Meet</title>
   </head>
   <body>
     <div id="root"></div>

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.7",
+  "version": "0.1.5",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,48 +13,45 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.6.5",
-    "@livekit/components-styles": "1.1.3",
-    "@livekit/track-processors": "0.3.2",
-    "@pandacss/preset-panda": "0.46.1",
-    "@react-aria/toast": "3.0.0-beta.16",
+    "@livekit/components-react": "2.3.3",
+    "@livekit/components-styles": "1.0.12",
+    "@pandacss/preset-panda": "0.41.0",
+    "@react-aria/toast": "3.0.0-beta.15",
     "@remixicon/react": "4.2.0",
-    "@tanstack/react-query": "5.59.4",
-    "crisp-sdk-web": "1.0.25",
+    "@tanstack/react-query": "5.49.2",
     "hoofd": "1.7.1",
-    "i18next": "23.15.2",
+    "i18next": "23.12.1",
     "i18next-browser-languagedetector": "8.0.0",
-    "i18next-parser": "9.0.2",
+    "i18next-parser": "9.0.0",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.5.7",
-    "posthog-js": "1.167.0",
-    "react": "18.3.1",
-    "react-aria-components": "1.4.0",
-    "react-dom": "18.3.1",
-    "react-i18next": "15.0.2",
+    "livekit-client": "2.3.1",
+    "react": "18.2.0",
+    "react-aria-components": "1.2.1",
+    "react-dom": "18.2.0",
+    "react-i18next": "14.1.3",
     "use-sound": "4.0.3",
-    "valtio": "2.0.0",
-    "wouter": "3.3.5"
+    "valtio": "1.13.2",
+    "wouter": "3.3.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.46.1",
-    "@tanstack/eslint-plugin-query": "5.59.2",
-    "@tanstack/react-query-devtools": "5.59.4",
-    "@types/node": "20.16.11",
-    "@types/react": "18.3.11",
+    "@pandacss/dev": "0.41.0",
+    "@tanstack/eslint-plugin-query": "5.49.1",
+    "@tanstack/react-query-devtools": "5.49.2",
+    "@types/node": "20.14.9",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
-    "@vitejs/plugin-react": "4.3.2",
+    "@typescript-eslint/eslint-plugin": "7.13.1",
+    "@typescript-eslint/parser": "7.13.1",
+    "@vitejs/plugin-react": "4.3.1",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.12",
-    "postcss": "8.4.47",
+    "eslint-plugin-react-refresh": "0.4.7",
+    "postcss": "8.4.39",
     "prettier": "3.3.3",
-    "typescript": "5.6.3",
-    "vite": "5.4.8",
-    "vite-tsconfig-paths": "5.0.1"
+    "typescript": "5.5.2",
+    "vite": "5.3.1",
+    "vite-tsconfig-paths": "4.3.2"
   }
 }

src/frontend/panda.config.ts

@@ -64,16 +64,16 @@ const config: Config = {
         '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
       },
       active_speaker: {
-        '0%': { height: '25%' },
-        '25%': { height: '45%' },
-        '50%': { height: '20%' },
-        '100%': { height: '55%' },
+        '0%': { height: '4px' },
+        '25%': { height: '8px' },
+        '50%': { height: '6px' },
+        '100%': { height: '16px' },
       },
-      active_speaker_small: {
-        '0%': { height: '20%' },
-        '25%': { height: '25%' },
-        '50%': { height: '18%' },
-        '100%': { height: '25%' },
+      active_speake_small: {
+        '0%': { height: '4px' },
+        '25%': { height: '6px' },
+        '50%': { height: '4px' },
+        '100%': { height: '8px' },
       },
       wave_hand: {
         '0%': { transform: 'rotate(0deg)' },

src/frontend/src/App.tsx

@@ -11,15 +11,18 @@ import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
 import { routes } from './routes'
 import './i18n/init'
+import { silenceLiveKitLogs } from '@/utils/livekit.ts'
 import { queryClient } from '@/api/queryClient'
-import { AppInitialization } from '@/components/AppInitialization'
 
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
+
+  const isProduction = import.meta.env.PROD
+  silenceLiveKitLogs(isProduction)
+
   return (
     <QueryClientProvider client={queryClient}>
-      <AppInitialization />
       <Suspense fallback={null}>
         <I18nProvider locale={i18n.language}>
           <Layout>

src/frontend/src/api/queryKeys.ts

@@ -1,5 +1,4 @@
 export const keys = {
   user: 'user',
   room: 'room',
-  config: 'config',
 }

src/frontend/src/api/useConfig.ts

@@ -1,26 +0,0 @@
-import { fetchApi } from './fetchApi'
-import { keys } from './queryKeys'
-import { useQuery } from '@tanstack/react-query'
-
-export interface ApiConfig {
-  analytics?: {
-    id: string
-    host: string
-  }
-  support?: {
-    id: string
-  }
-  silence_livekit_debug_logs?: boolean
-}
-
-const fetchConfig = (): Promise<ApiConfig> => {
-  return fetchApi<ApiConfig>(`config/`)
-}
-
-export const useConfig = () => {
-  return useQuery({
-    queryKey: [keys.config],
-    queryFn: fetchConfig,
-    staleTime: Infinity,
-  })
-}

src/frontend/src/components/AppInitialization.tsx

@@ -1,20 +0,0 @@
-import { silenceLiveKitLogs } from '@/utils/livekit'
-import { useConfig } from '@/api/useConfig'
-import { useAnalytics } from '@/features/analytics/hooks/useAnalytics'
-import { useSupport } from '@/features/support/hooks/useSupport'
-
-export const AppInitialization = () => {
-  const { data } = useConfig()
-
-  const {
-    analytics = {},
-    support = {},
-    silence_livekit_debug_logs = false,
-  } = data || {}
-
-  useAnalytics(analytics)
-  useSupport(support)
-  silenceLiveKitLogs(silence_livekit_debug_logs)
-
-  return null
-}

src/frontend/src/components/Feedback.tsx

@@ -1,12 +1,12 @@
+import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { RiExternalLinkLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { LinkButton } from '@/primitives'
 
 export const Feedback = () => {
   const { t } = useTranslation()
   return (
-    <LinkButton
+    <Button
       href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
       variant="success"
       target="_blank"
@@ -20,6 +20,6 @@ export const Feedback = () => {
         className={css({ marginLeft: 0.5 })}
         aria-hidden="true"
       />
-    </LinkButton>
+    </Button>
   )
 }

src/frontend/src/features/analytics/hooks/useAnalytics.tsx

@@ -1,39 +0,0 @@
-import { useEffect } from 'react'
-import { useLocation } from 'wouter'
-import posthog from 'posthog-js'
-import { ApiUser } from '@/features/auth/api/ApiUser'
-
-export const startAnalyticsSession = (data: ApiUser) => {
-  if (posthog._isIdentified()) return
-  const { id, email } = data
-  posthog.identify(id, { email })
-}
-
-export const terminateAnalyticsSession = () => {
-  if (!posthog._isIdentified()) return
-  posthog.reset()
-}
-
-export type useAnalyticsProps = {
-  id?: string
-  host?: string
-}
-
-export const useAnalytics = ({ id, host }: useAnalyticsProps) => {
-  const [location] = useLocation()
-  useEffect(() => {
-    if (!id || !host) return
-    if (posthog.__loaded) return
-    posthog.init(id, {
-      api_host: host,
-      person_profiles: 'always',
-    })
-  }, [id, host])
-
-  // From PostHog tutorial on PageView tracking in a Single Page Application (SPA) context.
-  useEffect(() => {
-    posthog.capture('$pageview')
-  }, [location])
-
-  return null
-}

src/frontend/src/features/auth/api/fetchUser.ts

@@ -20,7 +20,7 @@ export const fetchUser = (): Promise<ApiUser | false> => {
           // make sure to not resolve the promise while trying to silent login
           // so that consumers of fetchUser don't think the work already ended
           if (canAttemptSilentLogin()) {
-            attemptSilentLogin(300)
+            attemptSilentLogin(3600)
           } else {
             resolve(false)
           }

src/frontend/src/features/auth/api/useUser.tsx

@@ -2,12 +2,9 @@ import { useQuery } from '@tanstack/react-query'
 import { keys } from '@/api/queryKeys'
 import { fetchUser } from './fetchUser'
 import { type ApiUser } from './ApiUser'
-import { useEffect } from 'react'
-import { startAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
-import { initializeSupportSession } from '@/features/support/hooks/useSupport'
 
 /**
- * returns info about currently logged-in user
+ * returns info about currently logged in user
  *
  * `isLoggedIn` is undefined while query is loading and true/false when it's done
  */
@@ -15,16 +12,9 @@ export const useUser = () => {
   const query = useQuery({
     queryKey: [keys.user],
     queryFn: fetchUser,
-    staleTime: Infinity,
+    staleTime: 1000 * 60 * 60, // 1 hour
   })
 
-  useEffect(() => {
-    if (query?.data) {
-      startAnalyticsSession(query.data)
-      initializeSupportSession(query.data)
-    }
-  }, [query.data])
-
   const isLoggedIn =
     query.status === 'success' ? query.data !== false : undefined
   const isLoggedOut = isLoggedIn === false

src/frontend/src/features/home/components/JoinMeetingDialog.tsx

@@ -23,7 +23,7 @@ export const JoinMeetingDialog = () => {
           name="roomId"
           label={t('joinInputLabel')}
           description={t('joinInputExample', {
-            example: 'https://visio.numerique.gouv.fr/azer-tyu-qsdf',
+            example: 'https://meet.numerique.gouv.fr/azer-tyu-qsdf',
           })}
           validate={(value) => {
             return !isRoomValid(value.trim()) ? (

src/frontend/src/features/home/components/LaterMeetingDialog.tsx

@@ -44,7 +44,6 @@ export const LaterMeetingDialog = ({
           setIsCopied(true)
         }}
         onHoverChange={setIsHovered}
-        data-attr="later-dialog-copy"
       >
         {isCopied ? (
           <>

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

@@ -1,18 +1,18 @@
 import { useTranslation } from 'react-i18next'
-import { DialogTrigger, MenuItem, Menu as RACMenu } from 'react-aria-components'
+import { DialogTrigger } from 'react-aria-components'
 import { Button, Menu, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { Centered } from '@/layout/Centered'
 import { generateRoomId } from '@/features/rooms'
-import { useUser, UserAware } from '@/features/auth'
+import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
-import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
 import { usePersistentUserChoices } from '@livekit/components-react'
 import { menuItemRecipe } from '@/primitives/menuItemRecipe'
 import { RiAddLine, RiLink } from '@remixicon/react'
+import { MenuItem, Menu as RACMenu } from 'react-aria-components'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { useState } from 'react'
 
@@ -42,12 +42,10 @@ export const Home = () => {
               {t('loginToCreateMeeting')}
             </Text>
           )}
-          <HStack gap="gutter" alignItems="start">
+          <HStack gap="gutter">
             {isLoggedIn ? (
               <Menu>
-                <Button variant="primary" data-attr="create-meeting">
-                  {t('createMeeting')}
-                </Button>
+                <Button variant="primary">{t('createMeeting')}</Button>
                 <RACMenu>
                   <MenuItem
                     className={menuItemRecipe({ icon: true })}
@@ -59,7 +57,6 @@ export const Home = () => {
                         })
                       )
                     }}
-                    data-attr="create-option-instant"
                   >
                     <RiAddLine size={18} />
                     {t('createMenu.instantOption')}
@@ -72,7 +69,6 @@ export const Home = () => {
                         setLaterRoomId(data.slug)
                       )
                     }}
-                    data-attr="create-option-later"
                   >
                     <RiLink size={18} />
                     {t('createMenu.laterOption')}
@@ -80,16 +76,12 @@ export const Home = () => {
                 </RACMenu>
               </Menu>
             ) : (
-              <ProConnectButton />
+              <Button variant="primary" href={authUrl()}>
+                {t('login', { ns: 'global' })}
+              </Button>
             )}
             <DialogTrigger>
-              <Button
-                variant="primary"
-                outline
-                style={{
-                  height: !isLoggedIn ? '56px' : undefined, // Temporary, Align with ProConnect Button fixed height
-                }}
-              >
+              <Button variant="primary" outline>
                 {t('joinMeeting')}
               </Button>
               <JoinMeetingDialog />

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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { Participant, RoomEvent } from 'livekit-client'
+import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
@@ -50,32 +50,31 @@ export const MainNotificationToast = () => {
     }
   }, [room])
 
+  // fixme - close all related toasters when hands are lowered remotely
   useEffect(() => {
+    const decoder = new TextDecoder()
+
     const handleNotificationReceived = (
-      prevMetadataStr: string | undefined,
-      participant: Participant
+      payload: Uint8Array,
+      participant?: RemoteParticipant
     ) => {
-      if (!participant) return
-      if (isMobileBrowser()) return
-      if (participant.isLocal) return
-
-      const prevMetadata = JSON.parse(prevMetadataStr || '{}')
-      const metadata = JSON.parse(participant.metadata || '{}')
-
-      if (prevMetadata.raised == metadata.raised) return
-
+      if (!participant) {
+        return
+      }
+      if (isMobileBrowser()) {
+        return
+      }
+      const notification = decoder.decode(payload)
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>
           toast.content.participant === participant &&
           toast.content.type === NotificationType.Raised
       )
-
-      if (existingToast && prevMetadata.raised && !metadata.raised) {
+      if (existingToast && notification === NotificationType.Lowered) {
         toastQueue.close(existingToast.key)
         return
       }
-
-      if (!existingToast && !prevMetadata.raised && metadata.raised) {
+      if (!existingToast && notification === NotificationType.Raised) {
         triggerNotificationSound(NotificationType.Raised)
         toastQueue.add(
           {
@@ -87,23 +86,13 @@ export const MainNotificationToast = () => {
       }
     }
 
-    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
+    room.on(RoomEvent.DataReceived, handleNotificationReceived)
 
     return () => {
-      room.off(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
+      room.off(RoomEvent.DataReceived, handleNotificationReceived)
     }
   }, [room, triggerNotificationSound])
 
-  useEffect(() => {
-    const closeAllToasts = () => {
-      toastQueue.visibleToasts.forEach(({ key }) => toastQueue.close(key))
-    }
-    room.on(RoomEvent.Disconnected, closeAllToasts)
-    return () => {
-      room.off(RoomEvent.Disconnected, closeAllToasts)
-    }
-  }, [room])
-
   return (
     <Div position="absolute" bottom={20} right={5} zIndex={1000}>
       <ToastProvider />

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

@@ -12,19 +12,6 @@ const StyledContainer = styled('div', {
     justifyContent: 'center',
     gap: '2px',
   },
-  variants: {
-    pushToTalk: {
-      true: {
-        height: '46px',
-        width: '58px',
-        borderLeftRadius: 8,
-        borderRightRadius: 0,
-        backgroundColor: '#dbeafe',
-        border: '1px solid #3b82f6',
-        gap: '3px',
-      },
-    },
-  },
 })
 
 const StyledChild = styled('div', {
@@ -49,32 +36,16 @@ const StyledChild = styled('div', {
     },
     size: {
       small: {
-        animationName: 'active_speaker_small',
-      },
-    },
-    pushToTalk: {
-      true: {
-        backgroundColor: 'primary',
-        width: '6px',
-        height: '6px',
+        animationName: 'active_speake_small',
       },
     },
   },
 })
 
-export type ActiveSpeakerProps = {
-  isSpeaking: boolean
-  pushToTalk?: boolean
-}
-
-export const ActiveSpeaker = ({
-  isSpeaking,
-  pushToTalk,
-}: ActiveSpeakerProps) => {
+export const ActiveSpeaker = ({ isSpeaking }: { isSpeaking: boolean }) => {
   return (
-    <StyledContainer pushToTalk={pushToTalk}>
+    <StyledContainer>
       <StyledChild
-        pushToTalk={pushToTalk}
         active={isSpeaking}
         size="small"
         style={{
@@ -82,14 +53,12 @@ export const ActiveSpeaker = ({
         }}
       />
       <StyledChild
-        pushToTalk={pushToTalk}
         active={isSpeaking}
         style={{
           animationDelay: '100ms',
         }}
       />
       <StyledChild
-        pushToTalk={pushToTalk}
         active={isSpeaking}
         size="small"
         style={{

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

@@ -9,6 +9,7 @@ import {
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
+import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { QueryAware } from '@/components/QueryAware'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -18,7 +19,6 @@ import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
 
 import { VideoConference } from '../livekit/prefabs/VideoConference'
-import posthog from 'posthog-js'
 
 export const Conference = ({
   roomId,
@@ -31,9 +31,6 @@ export const Conference = ({
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
-  useEffect(() => {
-    posthog.capture('visit-room', { slug: roomId })
-  }, [roomId])
   const fetchKey = [keys.room, roomId, userConfig.username]
 
   const {
@@ -82,6 +79,25 @@ export const Conference = ({
 
   const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
 
+  /**
+   * checks for actual click on the leave button instead of
+   * relying on LiveKitRoom onDisconnected because onDisconnected
+   * triggers even on page reload, it's not a user "onLeave" event really.
+   * Here we want to react to the user actually deciding to leave.
+   */
+  useEffect(() => {
+    const checkOnLeaveClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (target.classList.contains('lk-disconnect-button')) {
+        navigateTo('feedback')
+      }
+    }
+    document.body.addEventListener('click', checkOnLeaveClick)
+    return () => {
+      document.body.removeEventListener('click', checkOnLeaveClick)
+    }
+  }, [])
+
   const { t } = useTranslation('rooms')
   if (isCreateError) {
     // this error screen should be replaced by a proper waiting room for anonymous user.

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

@@ -90,7 +90,6 @@ export const InviteDialog = ({
               setIsCopied(true)
             }}
             onHoverChange={setIsHovered}
-            data-attr="share-dialog-copy"
           >
             {isCopied ? (
               <>

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

@@ -16,8 +16,8 @@ export const Join = ({
         <PreJoin
           persistUserChoices
           onSubmit={onSubmit}
-          micLabel={t('join.audioinput.label')}
-          camLabel={t('join.videoinput.label')}
+          micLabel={t('join.micLabel')}
+          camLabel={t('join.camlabel')}
           joinLabel={t('join.joinLabel')}
           userLabel={t('join.userLabel')}
         />

src/frontend/src/features/rooms/livekit/api/lowerHandParticipants.ts

@@ -11,7 +11,6 @@ export const useLowerHandParticipants = () => {
       )
       return Promise.all(promises)
     } catch (error) {
-      console.error('An error occurred while lowering hands :', error)
       throw new Error('An error occurred while lowering hands.')
     }
   }

src/frontend/src/features/rooms/livekit/api/recordRoom.ts

@@ -0,0 +1,56 @@
+import { fetchServerApi } from './fetchServerApi'
+import { buildServerApiUrl } from './buildServerApiUrl'
+import { useRoomData } from '../hooks/useRoomData'
+import { useParams } from 'wouter'
+
+export const useRecordRoom = () => {
+  const data = useRoomData()
+  const { roomId: roomSlug } = useParams()
+
+  const recordRoom = () => {
+    if (!data || !data?.livekit) {
+      throw new Error('Room data is not available')
+    }
+    if (!roomSlug) {
+      throw new Error('Room ID is not available')
+    }
+    return fetchServerApi(
+      buildServerApiUrl(
+        data.livekit.url,
+        '/twirp/livekit.Egress/StartRoomCompositeEgress'
+      ),
+      data.livekit.token,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          room_name: data.livekit.room,
+          audio_only: true,
+          file_outputs: [
+            {
+              file_extension: 'ogg',
+              filepath: `{room_name}_{time}_${roomSlug}`,
+            },
+          ],
+        }),
+      }
+    )
+  }
+
+  const stopRecordingRoom = (egressId: string) => {
+    if (!data || !data?.livekit) {
+      throw new Error('Room data is not available')
+    }
+    return fetchServerApi(
+      buildServerApiUrl(data.livekit.url, '/twirp/livekit.Egress/StopEgress'),
+      data.livekit.token,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          egressId,
+        }),
+      }
+    )
+  }
+
+  return { recordRoom, stopRecordingRoom }
+}

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

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

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

@@ -0,0 +1,32 @@
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect, useState } from 'react'
+import { RoomEvent } from 'livekit-client'
+
+export const RecordingIndicator = () => {
+  const room = useRoomContext()
+  const [isRecording, setIsRecording] = useState(room.isRecording)
+
+  useEffect(() => {
+    const handleRecordingStatusChanges = (isRecording: boolean) => {
+      setIsRecording(isRecording)
+    }
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
+    return () => {
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanges)
+    }
+  }, [room])
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        width: '100%',
+      }}
+    >
+      Room is recording: {isRecording ? 'yes' : 'no'}
+    </div>
+  )
+}

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

@@ -1,88 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { layoutStore } from '@/stores/layout'
-import { css } from '@/styled-system/css'
-import { Heading } from 'react-aria-components'
-import { text } from '@/primitives/Text'
-import { Box, Button, Div } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useWidgetInteraction } from '../hooks/useWidgetInteraction'
-import { ReactNode } from 'react'
-import { Effects } from './Effects'
-
-type StyledSidePanelProps = {
-  title: string
-  children: ReactNode
-  onClose: () => void
-  closeButtonTooltip: string
-}
-
-const StyledSidePanel = ({
-  title,
-  children,
-  onClose,
-  closeButtonTooltip,
-}: StyledSidePanelProps) => (
-  <Box
-    size="sm"
-    minWidth="360px"
-    className={css({
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column',
-      margin: '1.5rem 1.5rem 1.5rem 0',
-      padding: 0,
-      gap: 0,
-    })}
-  >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-      }}
-    >
-      {title}
-    </Heading>
-    <Div position="absolute" top="5" right="5">
-      <Button
-        invisible
-        size="xs"
-        onPress={onClose}
-        aria-label={closeButtonTooltip}
-        tooltip={closeButtonTooltip}
-      >
-        <RiCloseLine />
-      </Button>
-    </Div>
-    <Div overflowY="scroll">{children}</Div>
-  </Box>
-)
-
-export const SidePanel = () => {
-  const layoutSnap = useSnapshot(layoutStore)
-  const sidePanel = layoutSnap.sidePanel
-
-  const { isParticipantsOpen, isEffectsOpen } = useWidgetInteraction()
-  const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
-
-  if (!sidePanel) {
-    return
-  }
-
-  return (
-    <StyledSidePanel
-      title={t(`heading.${sidePanel}`)}
-      onClose={() => (layoutStore.sidePanel = null)}
-      closeButtonTooltip={t('closeButton', {
-        content: t(`content.${sidePanel}`),
-      })}
-    >
-      {isParticipantsOpen && <ParticipantsList />}
-      {isEffectsOpen && <Effects />}
-    </StyledSidePanel>
-  )
-}

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

@@ -5,7 +5,7 @@ import { css } from '@/styled-system/css'
 import { useWidgetInteraction } from '../../hooks/useWidgetInteraction'
 
 export const ChatToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
+  const { t } = useTranslation('rooms')
 
   const { isChatOpen, unreadMessages, toggleChat } = useWidgetInteraction()
   const tooltipLabel = isChatOpen ? 'open' : 'closed'
@@ -20,11 +20,10 @@ export const ChatToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
+        aria-label={t(`controls.chat.${tooltipLabel}`)}
+        tooltip={t(`controls.chat.${tooltipLabel}`)}
         isSelected={isChatOpen}
         onPress={() => toggleChat()}
-        data-attr={`controls-chat-${tooltipLabel}`}
       >
         <RiChat1Line />
       </ToggleButton>

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

@@ -4,16 +4,30 @@ import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useRoomContext } from '@livekit/components-react'
 import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { NotificationType } from '@/features/notifications/NotificationType'
 
 export const HandToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
+  const { t } = useTranslation('rooms')
 
   const room = useRoomContext()
   const { isHandRaised, toggleRaisedHand } = useRaisedHand({
     participant: room.localParticipant,
   })
 
-  const tooltipLabel = isHandRaised ? 'lower' : 'raise'
+  const label = isHandRaised
+    ? t('controls.hand.lower')
+    : t('controls.hand.raise')
+
+  const notifyOtherParticipants = (isHandRaised: boolean) => {
+    room.localParticipant.publishData(
+      new TextEncoder().encode(
+        !isHandRaised ? NotificationType.Raised : NotificationType.Lowered
+      ),
+      {
+        reliable: true,
+      }
+    )
+  }
 
   return (
     <div
@@ -25,11 +39,13 @@ export const HandToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
+        aria-label={label}
+        tooltip={label}
         isSelected={isHandRaised}
-        onPress={() => toggleRaisedHand()}
-        data-attr={`controls-hand-${tooltipLabel}`}
+        onPress={() => {
+          notifyOtherParticipants(isHandRaised)
+          toggleRaisedHand()
+        }}
       >
         <RiHand />
       </ToggleButton>

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

@@ -1,37 +0,0 @@
-import { useConnectionState, useRoomContext } from '@livekit/components-react'
-import { Button } from '@/primitives'
-import { navigateTo } from '@/navigation/navigateTo'
-import { RiPhoneFill } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { ConnectionState } from 'livekit-client'
-
-export const LeaveButton = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-  const room = useRoomContext()
-  const connectionState = useConnectionState(room)
-  return (
-    <Button
-      isDisabled={connectionState === ConnectionState.Disconnected}
-      variant={'danger'}
-      tooltip={t('leave')}
-      aria-label={t('leave')}
-      onPress={() => {
-        room
-          .disconnect(true)
-          .catch((e) =>
-            console.error('An error occurred while disconnecting:', e)
-          )
-          .finally(() => {
-            navigateTo('feedback')
-          })
-      }}
-      data-attr="controls-leave"
-    >
-      <RiPhoneFill
-        style={{
-          transform: 'rotate(135deg)',
-        }}
-      />
-    </Button>
-  )
-}

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

@@ -1,15 +1,14 @@
 import { menuItemRecipe } from '@/primitives/menuItemRecipe'
 import {
-  RiAccountBoxLine,
   RiFeedbackLine,
+  RiQuestionLine,
   RiSettings3Line,
 } from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
+import { MenuItem, Menu as RACMenu } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from './OptionsButton'
-import { Separator } from '@/primitives/Separator'
-import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
+import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
+import { RecordingMenuItem } from './RecordingMenuItem.tsx'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({
@@ -17,8 +16,8 @@ export const OptionsMenuItems = ({
 }: {
   onOpenDialog: Dispatch<SetStateAction<DialogState>>
 }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useWidgetInteraction()
+  const { t } = useTranslation('rooms')
+
   return (
     <RACMenu
       style={{
@@ -26,33 +25,30 @@ export const OptionsMenuItems = ({
         width: '300px',
       }}
     >
-      <Section>
-        <MenuItem
-          onAction={() => toggleEffects()}
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiAccountBoxLine size={20} />
-          {t('effects')}
-        </MenuItem>
-      </Section>
-      <Separator />
-      <Section>
-        <MenuItem
-          href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
-          target="_blank"
-          className={menuItemRecipe({ icon: true })}
-        >
-          <RiFeedbackLine size={20} />
-          {t('feedbacks')}
-        </MenuItem>
-        <MenuItem
-          className={menuItemRecipe({ icon: true })}
-          onAction={() => onOpenDialog('settings')}
-        >
-          <RiSettings3Line size={20} />
-          {t('settings')}
-        </MenuItem>
-      </Section>
+      <MenuItem
+        href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
+        target="_blank"
+        className={menuItemRecipe({ icon: true })}
+      >
+        <RiQuestionLine size={18} />
+        {t('options.items.support')}
+      </MenuItem>
+      <MenuItem
+        href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+        target="_blank"
+        className={menuItemRecipe({ icon: true })}
+      >
+        <RiFeedbackLine size={18} />
+        {t('options.items.feedbacks')}
+      </MenuItem>
+      <MenuItem
+        className={menuItemRecipe({ icon: true })}
+        onAction={() => onOpenDialog('settings')}
+      >
+        <RiSettings3Line size={18} />
+        {t('options.items.settings')}
+      </MenuItem>
+      <RecordingMenuItem />
     </RACMenu>
   )
 }

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

@@ -0,0 +1,51 @@
+import { MenuItem } from 'react-aria-components'
+import { menuItemRecipe } from '@/primitives/menuItemRecipe.ts'
+import { RiPauseCircleLine, RiRecordCircleLine } from '@remixicon/react'
+import { useRecordRoom } from '@/features/rooms/livekit/api/recordRoom.ts'
+import { useState } from 'react'
+import { egressStore } from '@/stores/egress.tsx'
+import { useSnapshot } from 'valtio'
+
+export const RecordingMenuItem = () => {
+  const { recordRoom, stopRecordingRoom } = useRecordRoom()
+
+  const egressSnap = useSnapshot(egressStore)
+  const egressId = egressSnap.egressId
+
+  const [isPending, setIsPending] = useState(false)
+
+  const handleAction = async () => {
+    if (egressId) {
+      setIsPending(true)
+      const response = await stopRecordingRoom(egressId)
+      console.log(response)
+      egressStore.egressId = undefined
+      setIsPending(false)
+    } else {
+      setIsPending(true)
+      const response = await recordRoom()
+      egressStore.egressId = response['egress_id'] as string
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <MenuItem
+      isDisabled={isPending}
+      className={menuItemRecipe({ icon: true })}
+      onAction={handleAction}
+    >
+      {egressId ? (
+        <>
+          <RiPauseCircleLine size={18} />
+          Stop recording room
+        </>
+      ) : (
+        <>
+          <RiRecordCircleLine size={18} />
+          Record room
+        </>
+      )}
+    </MenuItem>
+  )
+}

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

@@ -73,7 +73,6 @@ export const HandRaisedListItem = ({
         size="sm"
         onPress={() => lowerHandParticipant(participant)}
         tooltip={t('participants.lowerParticipantHand', { name })}
-        data-attr="participants-lower-hand"
       >
         <RiHand />
       </Button>

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

@@ -19,7 +19,6 @@ export const LowerAllHandsButton = ({
       fullWidth
       variant="text"
       onPress={() => lowerHandParticipants(participants)}
-      data-attr="participants-lower-hands"
     >
       {t('participants.lowerParticipantsHand')}
     </Button>

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

@@ -78,7 +78,6 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
             ? muteParticipant(participant)
             : setIsAlertOpen(true)
         }
-        data-attr="participants-mute"
       >
         {isMuted ? (
           <RiMicOffFill color={'gray'} />

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

@@ -1,27 +1,27 @@
 import { css } from '@/styled-system/css'
-import { allParticipantRoomEvents } from '@livekit/components-core'
 import { useParticipants } from '@livekit/components-react'
 
-import { Div, H } from '@/primitives'
+import { Heading } from 'react-aria-components'
+import { Box, Button, Div, H } from '@/primitives'
+import { text } from '@/primitives/Text'
+import { RiCloseLine } from '@remixicon/react'
+import { participantsStore } from '@/stores/participants'
 import { useTranslation } from 'react-i18next'
-import { ParticipantListItem } from '../../controls/Participants/ParticipantListItem'
-import { ParticipantsCollapsableList } from '../../controls/Participants/ParticipantsCollapsableList'
-import { HandRaisedListItem } from '../../controls/Participants/HandRaisedListItem'
-import { LowerAllHandsButton } from '../../controls/Participants/LowerAllHandsButton'
-import { RoomEvent } from 'livekit-client'
+import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
+import { ParticipantListItem } from '@/features/rooms/livekit/components/controls/Participants/ParticipantListItem'
+import { ParticipantsCollapsableList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList'
+import { HandRaisedListItem } from '@/features/rooms/livekit/components/controls/Participants/HandRaisedListItem'
+import { LowerAllHandsButton } from '@/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton'
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
+  const { t } = useTranslation('rooms')
 
   // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
   // because the 'useLocalParticipant' hook does not update the participant's information when their
   // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
   const participants = useParticipants({
-    updateOnlyOn: [
-      RoomEvent.ParticipantNameChanged,
-      ...allParticipantRoomEvents,
-    ],
+    updateOnlyOn: allParticipantRoomEvents,
   })
 
   const sortedRemoteParticipants = participants
@@ -44,40 +44,75 @@ export const ParticipantsList = () => {
 
   // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
   return (
-    <>
-      <H
-        lvl={2}
-        className={css({
-          fontSize: '0.875rem',
-          fontWeight: 'bold',
-          color: '#5f6368',
-          padding: '0 1.5rem',
-          marginBottom: '0.83em',
-        })}
+    <Box
+      size="sm"
+      minWidth="360px"
+      className={css({
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '1.5rem 1.5rem 1.5rem 0',
+        padding: 0,
+        gap: 0,
+      })}
+    >
+      <Heading
+        slot="title"
+        level={1}
+        className={text({ variant: 'h2' })}
+        style={{
+          paddingLeft: '1.5rem',
+          paddingTop: '1rem',
+        }}
       >
-        {t('subheading').toUpperCase()}
-      </H>
-      {raisedHandParticipants.length > 0 && (
-        <Div marginBottom=".9375rem">
-          <ParticipantsCollapsableList
-            heading={t('raisedHands')}
-            participants={raisedHandParticipants}
-            renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
-            )}
-            action={() => (
-              <LowerAllHandsButton participants={raisedHandParticipants} />
-            )}
-          />
-        </Div>
-      )}
-      <ParticipantsCollapsableList
-        heading={t('contributors')}
-        participants={sortedParticipants}
-        renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
+        {t('participants.heading')}
+      </Heading>
+      <Div position="absolute" top="5" right="5">
+        <Button
+          invisible
+          size="xs"
+          onPress={() => (participantsStore.showParticipants = false)}
+          aria-label={t('participants.closeButton')}
+          tooltip={t('participants.closeButton')}
+        >
+          <RiCloseLine />
+        </Button>
+      </Div>
+      <Div overflowY="scroll">
+        <H
+          lvl={2}
+          className={css({
+            fontSize: '0.875rem',
+            fontWeight: 'bold',
+            color: '#5f6368',
+            padding: '0 1.5rem',
+            marginBottom: '0.83em',
+          })}
+        >
+          {t('participants.subheading').toUpperCase()}
+        </H>
+        {raisedHandParticipants.length > 0 && (
+          <Div marginBottom=".9375rem">
+            <ParticipantsCollapsableList
+              heading={t('participants.raisedHands')}
+              participants={raisedHandParticipants}
+              renderParticipant={(participant) => (
+                <HandRaisedListItem participant={participant} />
+              )}
+              action={() => (
+                <LowerAllHandsButton participants={raisedHandParticipants} />
+              )}
+            />
+          </Div>
         )}
-      />
-    </>
+        <ParticipantsCollapsableList
+          heading={t('participants.contributors')}
+          participants={sortedParticipants}
+          renderParticipant={(participant) => (
+            <ParticipantListItem participant={participant} />
+          )}
+        />
+      </Div>
+    </Box>
   )
 }

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

@@ -6,7 +6,7 @@ import { useParticipants } from '@livekit/components-react'
 import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
 
 export const ParticipantsToggle = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
+  const { t } = useTranslation('rooms')
 
   /**
    * Context could not be used due to inconsistent refresh behavior.
@@ -30,11 +30,10 @@ export const ParticipantsToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
+        aria-label={t(`controls.participants.${tooltipLabel}`)}
+        tooltip={t(`controls.participants.${tooltipLabel}`)}
         isSelected={isParticipantsOpen}
         onPress={() => toggleParticipants()}
-        data-attr={`controls-participants-${tooltipLabel}`}
       >
         <RiGroupLine />
       </ToggleButton>

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

@@ -1,56 +0,0 @@
-import { Div, ToggleButton } from '@/primitives'
-import { RiArrowUpLine, RiCloseFill, RiRectangleLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
-import { Track } from 'livekit-client'
-import React from 'react'
-
-export const ScreenShareToggle = (
-  props: Omit<
-    UseTrackToggleProps<Track.Source.ScreenShare>,
-    'source' | 'captureOptions'
-  >
-) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.screenShare' })
-  const { buttonProps, enabled } = useTrackToggle({
-    ...props,
-    source: Track.Source.ScreenShare,
-    captureOptions: { audio: true, selfBrowserSurface: 'include' },
-  })
-
-  const tooltipLabel = enabled ? 'stop' : 'start'
-  const Icon = enabled ? RiCloseFill : RiArrowUpLine
-
-  // fixme - remove ToggleButton custom styles when we design a proper icon
-  return (
-    <ToggleButton
-      isSelected={enabled}
-      square
-      legacyStyle
-      tooltip={t(tooltipLabel)}
-      onPress={(e) =>
-        buttonProps.onClick?.(
-          e as unknown as React.MouseEvent<HTMLButtonElement, MouseEvent>
-        )
-      }
-      style={{
-        maxWidth: '46px',
-        maxHeight: '46px',
-      }}
-      data-attr={`controls-screenshare-${tooltipLabel}`}
-    >
-      <Div position="relative">
-        <RiRectangleLine size={28} />
-        <Icon
-          size={16}
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          }}
-        />
-      </Div>
-    </ToggleButton>
-  )
-}

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

@@ -1,114 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import {
-  useMediaDeviceSelect,
-  useTrackToggle,
-  UseTrackToggleProps,
-} from '@livekit/components-react'
-import { HStack } from '@/styled-system/jsx'
-import { Button, Menu, MenuList } from '@/primitives'
-import {
-  RemixiconComponentType,
-  RiArrowDownSLine,
-  RiMicLine,
-  RiMicOffLine,
-  RiVideoOffLine,
-  RiVideoOnLine,
-} from '@remixicon/react'
-import { Track } from 'livekit-client'
-
-import { Shortcut } from '@/features/shortcuts/types'
-
-import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
-
-export type ToggleSource = Exclude<
-  Track.Source,
-  Track.Source.ScreenShareAudio | Track.Source.Unknown
->
-
-type SelectToggleSource = Exclude<ToggleSource, Track.Source.ScreenShare>
-
-export type SelectToggleDeviceConfig = {
-  kind: MediaDeviceKind
-  iconOn: RemixiconComponentType
-  iconOff: RemixiconComponentType
-  shortcut?: Shortcut
-  longPress?: Shortcut
-}
-
-type SelectToggleDeviceConfigMap = {
-  [key in SelectToggleSource]: SelectToggleDeviceConfig
-}
-
-const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {
-  [Track.Source.Microphone]: {
-    kind: 'audioinput',
-    iconOn: RiMicLine,
-    iconOff: RiMicOffLine,
-    shortcut: {
-      key: 'd',
-      ctrlKey: true,
-    },
-    longPress: {
-      key: 'Space',
-    },
-  },
-  [Track.Source.Camera]: {
-    kind: 'videoinput',
-    iconOn: RiVideoOnLine,
-    iconOff: RiVideoOffLine,
-    shortcut: {
-      key: 'e',
-      ctrlKey: true,
-    },
-  },
-}
-
-type SelectToggleDeviceProps<T extends ToggleSource> =
-  UseTrackToggleProps<T> & {
-    onActiveDeviceChange: (deviceId: string) => void
-    source: SelectToggleSource
-  }
-
-export const SelectToggleDevice = <T extends ToggleSource>({
-  onActiveDeviceChange,
-  ...props
-}: SelectToggleDeviceProps<T>) => {
-  const config = selectToggleDeviceConfig[props.source]
-  if (!config) {
-    throw new Error('Invalid source')
-  }
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-  const trackProps = useTrackToggle(props)
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind })
-
-  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
-
-  return (
-    <HStack gap={0}>
-      <ToggleDevice {...trackProps} config={config} />
-      <Menu>
-        <Button
-          tooltip={selectLabel}
-          aria-label={selectLabel}
-          groupPosition="right"
-          square
-        >
-          <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>
-    </HStack>
-  )
-}

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

@@ -1,71 +0,0 @@
-import { ToggleButton } from '@/primitives'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useMemo, useState } from 'react'
-import { appendShortcutLabel } from '@/features/shortcuts/utils'
-import { useTranslation } from 'react-i18next'
-import { SelectToggleDeviceConfig } from './SelectToggleDevice'
-import useLongPress from '@/features/shortcuts/useLongPress'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
-
-export type ToggleDeviceProps = {
-  enabled: boolean
-  toggle: () => void
-  config: SelectToggleDeviceConfig
-}
-
-export const ToggleDevice = ({
-  config,
-  enabled,
-  toggle,
-}: ToggleDeviceProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const { kind, shortcut, iconOn, iconOff, longPress } = config
-
-  const [pushToTalk, setPushToTalk] = useState(false)
-
-  const onKeyDown = () => {
-    if (pushToTalk || enabled) return
-    toggle()
-    setPushToTalk(true)
-  }
-  const onKeyUp = () => {
-    if (!pushToTalk) return
-    toggle()
-    setPushToTalk(false)
-  }
-
-  useRegisterKeyboardShortcut({ shortcut, handler: toggle })
-  useLongPress({ keyCode: longPress?.key, onKeyDown, onKeyUp })
-
-  const toggleLabel = useMemo(() => {
-    const label = t(enabled ? 'disable' : 'enable', {
-      keyPrefix: `join.${kind}`,
-    })
-    return shortcut ? appendShortcutLabel(label, shortcut) : label
-  }, [enabled, kind, shortcut, t])
-
-  const Icon = enabled ? iconOn : iconOff
-
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-
-  if (kind === 'audioinput' && pushToTalk) {
-    return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-  }
-
-  return (
-    <ToggleButton
-      isSelected={enabled}
-      variant={enabled ? undefined : 'danger'}
-      toggledStyles={false}
-      onPress={() => toggle()}
-      aria-label={toggleLabel}
-      tooltip={toggleLabel}
-      groupPosition="left"
-    >
-      <Icon />
-    </ToggleButton>
-  )
-}

src/frontend/src/features/rooms/livekit/constants/events.ts

@@ -0,0 +1,33 @@
+import { RoomEvent } from 'livekit-client'
+
+// Issue: 'allRemoteParticipantRoomEvents' is not exposed or importable. One event is missing
+// to trigger the real-time update of participants when they change their name.
+// This code is duplicated from LiveKit.
+export const allRemoteParticipantRoomEvents = [
+  RoomEvent.ConnectionStateChanged,
+  RoomEvent.RoomMetadataChanged,
+
+  RoomEvent.ActiveSpeakersChanged,
+  RoomEvent.ConnectionQualityChanged,
+
+  RoomEvent.ParticipantConnected,
+  RoomEvent.ParticipantDisconnected,
+  RoomEvent.ParticipantPermissionsChanged,
+  RoomEvent.ParticipantMetadataChanged,
+  RoomEvent.ParticipantNameChanged, // This element is missing in LiveKit and causes problems
+
+  RoomEvent.TrackMuted,
+  RoomEvent.TrackUnmuted,
+  RoomEvent.TrackPublished,
+  RoomEvent.TrackUnpublished,
+  RoomEvent.TrackStreamStateChanged,
+  RoomEvent.TrackSubscriptionFailed,
+  RoomEvent.TrackSubscriptionPermissionChanged,
+  RoomEvent.TrackSubscriptionStatusChanged,
+]
+
+export const allParticipantRoomEvents = [
+  ...allRemoteParticipantRoomEvents,
+  RoomEvent.LocalTrackPublished,
+  RoomEvent.LocalTrackUnpublished,
+]

src/frontend/src/features/rooms/livekit/hooks/useRaisedHand.tsx

@@ -7,7 +7,6 @@ type useRaisedHandProps = {
 }
 
 export function useRaisedHand({ participant }: useRaisedHandProps) {
-  // fixme - refactor this part to rely on attributes
   const { metadata } = useParticipantInfo({ participant })
   const parsedMetadata = JSON.parse(metadata || '{}')
 

src/frontend/src/features/rooms/livekit/hooks/useWidgetInteraction.ts

@@ -1,46 +1,34 @@
 import { useLayoutContext } from '@livekit/components-react'
 import { useSnapshot } from 'valtio'
-import { layoutStore } from '@/stores/layout'
+import { participantsStore } from '@/stores/participants.ts'
 
 export const useWidgetInteraction = () => {
   const { dispatch, state } = useLayoutContext().widget
 
-  const layoutSnap = useSnapshot(layoutStore)
-  const sidePanel = layoutSnap.sidePanel
-
-  const isParticipantsOpen = sidePanel == 'participants'
-  const isEffectsOpen = sidePanel == 'effects'
+  const participantsSnap = useSnapshot(participantsStore)
+  const isParticipantsOpen = participantsSnap.showParticipants
 
   const toggleParticipants = () => {
     if (dispatch && state?.showChat) {
       dispatch({ msg: 'toggle_chat' })
     }
-    layoutStore.sidePanel = isParticipantsOpen ? null : 'participants'
+    participantsStore.showParticipants = !isParticipantsOpen
   }
 
   const toggleChat = () => {
-    if (isParticipantsOpen || isEffectsOpen) {
-      layoutStore.sidePanel = null
+    if (isParticipantsOpen) {
+      participantsStore.showParticipants = false
     }
     if (dispatch) {
       dispatch({ msg: 'toggle_chat' })
     }
   }
 
-  const toggleEffects = () => {
-    if (dispatch && state?.showChat) {
-      dispatch({ msg: 'toggle_chat' })
-    }
-    layoutStore.sidePanel = isEffectsOpen ? null : 'effects'
-  }
-
   return {
     toggleParticipants,
     toggleChat,
-    toggleEffects,
     isChatOpen: state?.showChat,
     unreadMessages: state?.unreadMessages,
     isParticipantsOpen,
-    isEffectsOpen,
   }
 }

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

@@ -4,6 +4,10 @@ import * as React from 'react'
 import { supportsScreenSharing } from '@livekit/components-core'
 
 import {
+  DisconnectButton,
+  LeaveIcon,
+  MediaDeviceMenu,
+  TrackToggle,
   useMaybeLayoutContext,
   usePersistentUserChoices,
 } from '@livekit/components-react'
@@ -11,13 +15,11 @@ import {
 import { mergeProps } from '@/utils/mergeProps.ts'
 import { StartMediaButton } from '../components/controls/StartMediaButton'
 import { useMediaQuery } from '../hooks/useMediaQuery'
+import { useTranslation } from 'react-i18next'
 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 { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
+import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
 
 /** @public */
 export type ControlBarControls = {
@@ -36,7 +38,7 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
   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.
+   * This will enables the user to have the same device choices when they rejoin the room.
    * @defaultValue true
    * @alpha
    */
@@ -65,6 +67,7 @@ export function ControlBar({
   onDeviceError,
   ...props
 }: ControlBarProps) {
+  const { t } = useTranslation('rooms')
   const [isChatOpen, setIsChatOpen] = React.useState(false)
   const layoutContext = useMaybeLayoutContext()
   React.useEffect(() => {
@@ -80,8 +83,26 @@ export function ControlBar({
   const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose'
   variation ??= defaultVariation
 
+  const showIcon = React.useMemo(
+    () => variation === 'minimal' || variation === 'verbose',
+    [variation]
+  )
+  const showText = React.useMemo(
+    () => variation === 'textOnly' || variation === 'verbose',
+    [variation]
+  )
+
   const browserSupportsScreenSharing = supportsScreenSharing()
 
+  const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false)
+
+  const onScreenShareChange = React.useCallback(
+    (enabled: boolean) => {
+      setIsScreenShareEnabled(enabled)
+    },
+    [setIsScreenShareEnabled]
+  )
+
   const htmlProps = mergeProps({ className: 'lk-control-bar' }, props)
 
   const {
@@ -105,38 +126,72 @@ export function ControlBar({
 
   return (
     <div {...htmlProps}>
-      <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 ?? '')
-        }
-      />
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Microphone}
+          showIcon={showIcon}
+          onChange={microphoneOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Microphone, error })
+          }
+        >
+          {showText && t('controls.microphone')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="audioinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Camera}
+          showIcon={showIcon}
+          onChange={cameraOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Camera, error })
+          }
+        >
+          {showText && t('controls.camera')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="videoinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
       {browserSupportsScreenSharing && (
-        <ScreenShareToggle
+        <TrackToggle
+          source={Track.Source.ScreenShare}
+          captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
+          showIcon={showIcon}
+          onChange={onScreenShareChange}
           onDeviceError={(error) =>
             onDeviceError?.({ source: Track.Source.ScreenShare, error })
           }
-        />
+        >
+          {showText &&
+            t(
+              isScreenShareEnabled
+                ? 'controls.stopScreenShare'
+                : 'controls.shareScreen'
+            )}
+        </TrackToggle>
       )}
       <HandToggle />
       <ChatToggle />
       <ParticipantsToggle />
       <OptionsButton />
-      <LeaveButton />
+      <DisconnectButton>
+        {showIcon && <LeaveIcon />}
+        {showText && t('controls.leave')}
+      </DisconnectButton>
       <StartMediaButton />
     </div>
   )

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

@@ -30,12 +30,13 @@ import {
 import { ControlBar } from './ControlBar'
 import { styled } from '@/styled-system/jsx'
 import { cva } from '@/styled-system/css'
+import { ParticipantsList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsList'
 import { useSnapshot } from 'valtio'
-import { layoutStore } from '@/stores/layout'
+import { participantsStore } from '@/stores/participants'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
-import { SidePanel } from '../components/SidePanel'
 import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
+import { RecordingIndicator } from '@/features/rooms/livekit/components/RecordingIndicator.tsx'
 
 const LayoutWrapper = styled(
   'div',
@@ -172,8 +173,8 @@ export function VideoConference({
   ])
   /* eslint-enable react-hooks/exhaustive-deps */
 
-  const layoutSnap = useSnapshot(layoutStore)
-  const sidePanel = layoutSnap.sidePanel
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
 
   return (
     <div className="lk-video-conference" {...props}>
@@ -184,6 +185,7 @@ export function VideoConference({
           onWidgetChange={widgetUpdate}
         >
           <div className="lk-video-conference-inner">
+            <RecordingIndicator />
             <LayoutWrapper>
               <div
                 style={{ display: 'flex', position: 'relative', width: '100%' }}
@@ -223,7 +225,7 @@ export function VideoConference({
                 messageEncoder={chatMessageEncoder}
                 messageDecoder={chatMessageDecoder}
               />
-              {sidePanel && <SidePanel />}
+              {showParticipants && <ParticipantsList />}
             </LayoutWrapper>
             <ControlBar />
           </div>

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

@@ -8,7 +8,6 @@ import { ErrorScreen } from '@/components/ErrorScreen'
 import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
-import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 
 export const Room = () => {
   const { isLoggedIn } = useUser()
@@ -20,8 +19,6 @@ export const Room = () => {
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
-  useKeyboardShortcuts()
-
   const clearRouterState = () => {
     if (window?.history?.state) {
       window.history.replaceState({}, '')

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

@@ -1,8 +1,7 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
 import { A, Badge, Dialog, type DialogProps, Field, H, P } from '@/primitives'
-import { logoutUrl, useUser } from '@/features/auth'
-import { ProConnectButton } from '@/components/ProConnectButton'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 
 export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
 
@@ -29,7 +28,9 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
       ) : (
         <>
           <P>{t('account.youAreNotLoggedIn')}</P>
-          <ProConnectButton />
+          <P>
+            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
+          </P>
         </>
       )}
       <H lvl={2}>{t('language.heading')}</H>

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

@@ -4,12 +4,11 @@ import {
   usePersistentUserChoices,
   useRoomContext,
 } from '@livekit/components-react'
-import { logoutUrl, useUser } from '@/features/auth'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { HStack } from '@/styled-system/jsx'
 import { useState } from 'react'
-import { ProConnectButton } from '@/components/ProConnectButton'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -59,7 +58,9 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
       ) : (
         <>
           <P>{t('account.youAreNotLoggedIn')}</P>
-          <ProConnectButton />
+          <P>
+            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
+          </P>
         </>
       )}
       <HStack

src/frontend/src/features/shortcuts/types.ts

@@ -1,4 +0,0 @@
-export type Shortcut = {
-  key: string
-  ctrlKey?: boolean
-}

src/frontend/src/features/shortcuts/useKeyboardShortcuts.ts

@@ -1,31 +0,0 @@
-import { useEffect } from 'react'
-import { useSnapshot } from 'valtio'
-import { keyboardShortcutsStore } from '@/stores/keyboardShortcuts'
-import { isMacintosh } from '@/utils/livekit'
-import { formatShortcutKey } from './utils'
-
-export const useKeyboardShortcuts = () => {
-  const shortcutsSnap = useSnapshot(keyboardShortcutsStore)
-
-  useEffect(() => {
-    // This approach handles basic shortcuts but isn't comprehensive.
-    // Issues might occur. First draft.
-    const onKeyDown = (e: KeyboardEvent) => {
-      const { key, metaKey, ctrlKey } = e
-      const shortcutKey = formatShortcutKey({
-        key,
-        ctrlKey: ctrlKey || (isMacintosh() && metaKey),
-      })
-      const shortcut = shortcutsSnap.shortcuts.get(shortcutKey)
-      if (!shortcut) return
-      e.preventDefault()
-      shortcut()
-    }
-
-    window.addEventListener('keydown', onKeyDown)
-
-    return () => {
-      window.removeEventListener('keydown', onKeyDown)
-    }
-  }, [shortcutsSnap])
-}

src/frontend/src/features/shortcuts/useLongPress.ts

@@ -1,47 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export type useLongPressProps = {
-  keyCode?: string
-  onKeyDown: () => void
-  onKeyUp: () => void
-  longPressThreshold?: number
-}
-
-export const useLongPress = ({
-  keyCode,
-  onKeyDown,
-  onKeyUp,
-  longPressThreshold = 300,
-}: useLongPressProps) => {
-  const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.code != keyCode || timeoutIdRef.current) return
-      timeoutIdRef.current = setTimeout(() => {
-        onKeyDown()
-      }, longPressThreshold)
-    }
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.code != keyCode || !timeoutIdRef.current) return
-      clearTimeout(timeoutIdRef.current)
-      timeoutIdRef.current = null
-      onKeyUp()
-    }
-
-    if (!keyCode) return
-
-    window.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('keyup', handleKeyUp)
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('keyup', handleKeyUp)
-    }
-  }, [keyCode, onKeyDown, onKeyUp, longPressThreshold])
-
-  return
-}
-
-export default useLongPress

src/frontend/src/features/shortcuts/useRegisterKeyboardShortcut.ts

@@ -1,19 +0,0 @@
-import { useEffect } from 'react'
-import { keyboardShortcutsStore } from '@/stores/keyboardShortcuts'
-import { formatShortcutKey } from '@/features/shortcuts/utils'
-import { Shortcut } from '@/features/shortcuts/types'
-
-export type useRegisterKeyboardShortcutProps = {
-  shortcut?: Shortcut
-  handler: () => void
-}
-
-export const useRegisterKeyboardShortcut = ({
-  shortcut,
-  handler,
-}: useRegisterKeyboardShortcutProps) => {
-  useEffect(() => {
-    if (!shortcut) return
-    keyboardShortcutsStore.shortcuts.set(formatShortcutKey(shortcut), handler)
-  }, [handler, shortcut])
-}

src/frontend/src/features/shortcuts/utils.ts

@@ -1,18 +0,0 @@
-import { isMacintosh } from '@/utils/livekit'
-import { Shortcut } from '@/features/shortcuts/types'
-
-export const CTRL = 'ctrl'
-
-export const formatShortcutKey = (shortcut: Shortcut) => {
-  if (shortcut.ctrlKey) return `${CTRL}+${shortcut.key.toUpperCase()}`
-  return shortcut.key.toUpperCase()
-}
-
-export const appendShortcutLabel = (label: string, shortcut: Shortcut) => {
-  if (!shortcut.key) return
-  let formattedKeyLabel = shortcut.key.toLowerCase()
-  if (shortcut.ctrlKey) {
-    formattedKeyLabel = `${isMacintosh() ? '⌘' : 'Ctrl'}+${formattedKeyLabel}`
-  }
-  return `${label} (${formattedKeyLabel})`
-}

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

@@ -1,31 +0,0 @@
-import { useEffect } from 'react'
-import { Crisp } from 'crisp-sdk-web'
-import { ApiUser } from '@/features/auth/api/ApiUser'
-
-export const initializeSupportSession = (user: ApiUser) => {
-  if (!Crisp.isCrispInjected()) return
-  const { id, email } = user
-  Crisp.setTokenId(`meet-${id}`)
-  Crisp.user.setEmail(email)
-}
-
-export const terminateSupportSession = () => {
-  if (!Crisp.isCrispInjected()) return
-  Crisp.setTokenId()
-  Crisp.session.reset()
-}
-
-export type useSupportProps = {
-  id?: string
-}
-
-// Configure Crisp chat for real-time support across all pages.
-export const useSupport = ({ id }: useSupportProps) => {
-  useEffect(() => {
-    if (!id || Crisp.isCrispInjected()) return
-    Crisp.configure(id)
-    Crisp.setHideOnMobile(true)
-  }, [id])
-
-  return null
-}

src/frontend/src/layout/Header.tsx

@@ -2,16 +2,13 @@ import { Link } from 'wouter'
 import { css } from '@/styled-system/css'
 import { Stack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
-import { Text, Button } from '@/primitives'
+import { A, Text, Button } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
-import { logoutUrl, useUser } from '@/features/auth'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 import { useMatchesRoute } from '@/navigation/useMatchesRoute'
 import { Feedback } from '@/components/Feedback'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
-import { ProConnectButton } from '@/components/ProConnectButton'
-import { terminateAnalyticsSession } from '@/features/analytics/hooks/useAnalytics'
-import { terminateSupportSession } from '@/features/support/hooks/useSupport'
 
 export const Header = () => {
   const { t } = useTranslation()
@@ -66,7 +63,7 @@ export const Header = () => {
         <nav>
           <Stack gap={1} direction="row" align="center">
             {isLoggedIn === false && !isHome && (
-              <ProConnectButton hint={false} />
+              <A href={authUrl()}>{t('login')}</A>
             )}
             {!!user && (
               <Menu>
@@ -82,8 +79,6 @@ export const Header = () => {
                   items={[{ value: 'logout', label: t('logout') }]}
                   onAction={(value) => {
                     if (value === 'logout') {
-                      terminateAnalyticsSession()
-                      terminateSupportSession()
                       window.location.href = logoutUrl()
                     }
                   }}

src/frontend/src/locales/de/global.json

@@ -1,5 +1,5 @@
 {
-  "app": "Visio",
+  "app": "Meet",
   "backToHome": "",
   "cancel": "",
   "closeDialog": "",
@@ -12,11 +12,7 @@
   },
   "loading": "",
   "loggedInUserTooltip": "",
-  "login": {
-    "buttonLabel": "",
-    "linkLabel": "",
-    "link": ""
-  },
+  "login": "Anmelden",
   "logout": "",
   "notFound": {
     "heading": ""

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

@@ -4,27 +4,11 @@
     "heading": ""
   },
   "join": {
-    "videoinput": {
-      "choose": "",
-      "disable": "",
-      "enable": "",
-      "label": "",
-      "placeholder": ""
-    },
-    "audioinput": {
-      "choose": "",
-      "disable": "",
-      "enable": "",
-      "label": ""
-    },
+    "camlabel": "",
     "heading": "",
     "joinLabel": "",
-    "joinMeeting": "",
-    "toggleOff": "",
-    "toggleOn": "",
-    "userLabel": "",
-    "usernameHint": "",
-    "usernameLabel": ""
+    "micLabel": "",
+    "userLabel": ""
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
@@ -53,10 +37,6 @@
       "raise": "",
       "lower": ""
     },
-    "screenShare": {
-      "start": "",
-      "stop": ""
-    },
     "leave": "",
     "participants": {
       "open": "",
@@ -69,35 +49,13 @@
       "feedbacks": "",
       "support": "",
       "settings": "",
-      "username": "",
-      "effects": ""
+      "username": ""
     }
   },
-  "effects": {
-    "activateCamera": "",
-    "notAvailable": "",
-    "heading": "",
-    "blur": {
-      "light": "",
-      "normal": "",
-      "apply": "",
-      "clear": ""
-    },
-    "experimental": ""
-  },
-  "sidePanel": {
-    "heading": {
-      "participants": "",
-      "effects": ""
-    },
-    "content": {
-      "participants": "",
-      "effects": ""
-    },
-    "closeButton": ""
-  },
   "participants": {
+    "heading": "",
     "subheading": "",
+    "closeButton": "",
     "contributors": "",
     "collapsable": {
       "open": "",

src/frontend/src/locales/en/global.json

@@ -1,10 +1,10 @@
 {
-  "app": "Visio",
+  "app": "Meet",
   "backToHome": "Back to homescreen",
   "cancel": "Cancel",
   "closeDialog": "Close dialog",
   "error": {
-    "heading": "An error occurred while loading the page"
+    "heading": "An error occured while loading the page"
   },
   "feedbackAlert": "Give us feedback",
   "forbidden": {
@@ -12,11 +12,7 @@
   },
   "loading": "Loading…",
   "loggedInUserTooltip": "Logged in as…",
-  "login": {
-    "buttonLabel": "Login with ProConnect",
-    "linkLabel": "What is ProConnect? - new tab",
-    "link": "What is ProConnect?"
-  },
+  "login": "Login",
   "logout": "Logout",
   "notFound": {
     "heading": "Page not found"

src/frontend/src/locales/en/home.json

@@ -1,6 +1,6 @@
 {
   "createMeeting": "Create a meeting",
-  "heading": "Welcome in Visio",
+  "heading": "Welcome in Meet",
   "intro": "Work easily, from anywhere.",
   "joinInputError": "Use a meeting link or code. Examples:",
   "joinInputExample": "URL or 10-letter code",

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

@@ -1,30 +1,14 @@
 {
   "feedback": {
     "body": "Please fill out the form available in the header to give us your precious feedback! Thanks.",
-    "heading": "Help us improve Visio"
+    "heading": "Help us improve Meet"
   },
   "join": {
-    "videoinput": {
-      "choose": "Select camera",
-      "disable": "Disable camera",
-      "enable": "Enable camera",
-      "label": "Camera",
-      "placeholder": "Enable camera to see the preview"
-    },
-    "audioinput": {
-      "choose": "Select microphone",
-      "disable": "Disable microphone",
-      "enable": "Enable microphone",
-      "label": "Microphone"
-    },
-    "heading": "Verify your settings",
+    "camlabel": "Camera",
+    "heading": "Join the meeting",
     "joinLabel": "Join",
-    "joinMeeting": "Join meeting",
-    "toggleOff": "Click to turn off",
-    "toggleOn": "Click to turn on",
-    "userLabel": "",
-    "usernameHint": "Shown to other participants",
-    "usernameLabel": "Your name"
+    "micLabel": "Microphone",
+    "userLabel": "Your name"
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
@@ -43,6 +27,8 @@
   "controls": {
     "microphone": "Microphone",
     "camera": "Camera",
+    "shareScreen": "Share screen",
+    "stopScreenShare": "Stop screen share",
     "chat": {
       "open": "Close the chat",
       "closed": "Open the chat"
@@ -51,10 +37,6 @@
       "raise": "Raise hand",
       "lower": "Lower hand"
     },
-    "screenShare": {
-      "start": "Share screen",
-      "stop": "Stop screen share"
-    },
     "leave": "Leave",
     "participants": {
       "open": "Hide everyone",
@@ -67,35 +49,13 @@
       "feedbacks": "Give us feedbacks",
       "support": "Get Help on Tchap",
       "settings": "Settings",
-      "username": "Update Your Name",
-      "effects": "Apply effects"
+      "username": "Update Your Name"
     }
   },
-  "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 :(",
-    "heading": "Blur",
-    "blur": {
-      "light": "Light blur",
-      "normal": "Blur",
-      "apply": "Enable blur",
-      "clear": "Disable blur"
-    },
-    "experimental": "Experimental feature. A v2 is coming for full browser support and improved quality."
-  },
-  "sidePanel": {
-    "heading": {
-      "participants": "Participants",
-      "effects": "Effects"
-    },
-    "content": {
-      "participants": "participants",
-      "effects": "effects"
-    },
-    "closeButton": "Hide {{content}}"
-  },
   "participants": {
+    "heading": "Participants",
     "subheading": "In room",
+    "closeButton": "Hide participants",
     "you": "You",
     "contributors": "Contributors",
     "collapsable": {

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

@@ -3,7 +3,7 @@
     "currentlyLoggedAs": "You are currently logged in as <0>{{user}}</0>",
     "heading": "Account",
     "youAreNotLoggedIn": "You are not logged in.",
-    "nameLabel": "Your Name",
+    "nameLabel": "Votre Nom",
     "authentication": "Authentication"
   },
   "audio": {

src/frontend/src/locales/fr/global.json

@@ -1,5 +1,5 @@
 {
-  "app": "Visio",
+  "app": "Meet",
   "backToHome": "Retour à l'accueil",
   "cancel": "Annuler",
   "closeDialog": "Fermer la fenêtre modale",
@@ -12,11 +12,7 @@
   },
   "loading": "Chargement…",
   "loggedInUserTooltip": "Connecté en tant que…",
-  "login": {
-    "buttonLabel": "S'identifier avec ProConnect",
-    "linkLabel": "Qu'est-ce que ProConnect ? - nouvelle fenêtre",
-    "link": "Qu'est-ce que ProConnect ?"
-  },
+  "login": "Se connecter",
   "logout": "Se déconnecter",
   "notFound": {
     "heading": "Page introuvable"

src/frontend/src/locales/fr/home.json

@@ -1,6 +1,6 @@
 {
   "createMeeting": "Créer une réunion",
-  "heading": "Visio",
+  "heading": "Meet",
   "intro": "Collaborez en toute simplicité, où que vous soyez.",
   "joinInputError": "Saisissez un lien ou un code de réunion. Exemples :",
   "joinInputExample": "Un code de réunion ressemble à ceci : abc-defg-hij",

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

@@ -1,30 +1,14 @@
 {
   "feedback": {
     "body": "Remplissez le formulaire disponible dans l'entête du site pour nous donner votre avis sur l'outil. Vos retours sont précieux ! Merci.",
-    "heading": "Aidez-nous à améliorer Visio"
+    "heading": "Aidez-nous à améliorer Meet"
   },
   "join": {
-    "videoinput": {
-      "choose": "Choisir la webcam",
-      "disable": "Désactiver la webcam",
-      "enable": "Activer la webcam",
-      "label": "Webcam",
-      "placeholder": "Activez la webcam pour prévisualiser l'affichage"
-    },
-    "audioinput": {
-      "choose": "Choisir le micro",
-      "disable": "Désactiver le micro",
-      "enable": "Activer le micro",
-      "label": "Microphone"
-    },
-    "heading": "Vérifiez vos paramètres",
+    "camlabel": "Webcam",
+    "heading": "Rejoindre la réunion",
     "joinLabel": "Rejoindre",
-    "joinMeeting": "Rejoindre la réjoindre",
-    "toggleOff": "Cliquez pour désactiver",
-    "toggleOn": "Cliquez pour activer",
-    "userLabel": "",
-    "usernameHint": "Affiché aux autres participants",
-    "usernameLabel": "Votre nom"
+    "micLabel": "Micro",
+    "userLabel": "Votre nom"
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
@@ -43,6 +27,8 @@
   "controls": {
     "microphone": "Microphone",
     "camera": "Camera",
+    "shareScreen": "Partager l'écran",
+    "stopScreenShare": "Arrêter le partage",
     "chat": {
       "open": "Masquer le chat",
       "closed": "Afficher le chat"
@@ -51,10 +37,6 @@
       "raise": "Lever la main",
       "lower": "Baisser la main"
     },
-    "screenShare": {
-      "start": "Partager l'écran",
-      "stop": "Arrêter le partage"
-    },
     "leave": "Quitter",
     "participants": {
       "open": "Masquer les participants",
@@ -67,35 +49,13 @@
       "feedbacks": "Partager votre avis",
       "support": "Obtenir de l'aide sur Tchap",
       "settings": "Paramètres",
-      "username": "Choisir votre nom",
-      "effects": "Appliquer des effets"
+      "username": "Choisir votre nom"
     }
   },
-  "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 :(",
-    "heading": "Flou",
-    "blur": {
-      "light": "Léger flou",
-      "normal": "Flou",
-      "apply": "Appliquer le flou",
-      "clear": "Désactiver le flou"
-    },
-    "experimental": "Fonctionnalité expérimentale. Une v2 arrive pour un support complet sur tous les navigateurs et une meilleur qualité."
-  },
-  "sidePanel": {
-    "heading": {
-      "participants": "Participants",
-      "effects": "Effets"
-    },
-    "content": {
-      "participants": "les participants",
-      "effects": "les effets"
-    },
-    "closeButton": "Masquer {{content}}"
-  },
   "participants": {
+    "heading": "Participants",
     "subheading": "Dans la réunion",
+    "closeButton": "Masquer les participants",
     "you": "Vous",
     "contributors": "Contributeurs",
     "collapsable": {

src/frontend/src/primitives/Button.tsx

@@ -1,6 +1,8 @@
 import {
   Button as RACButton,
   type ButtonProps as RACButtonsProps,
+  Link,
+  LinkProps,
 } from 'react-aria-components'
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
@@ -10,12 +12,25 @@ export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
   RACButtonsProps &
   TooltipWrapperProps
 
+type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
+  LinkProps &
+  TooltipWrapperProps
+
+type ButtonOrLinkProps = ButtonProps | LinkButtonProps
+
 export const Button = ({
   tooltip,
   tooltipType = 'instant',
   ...props
-}: ButtonProps) => {
+}: ButtonOrLinkProps) => {
   const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+  if ((props as LinkButtonProps).href !== undefined) {
+    return (
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+        <Link className={buttonRecipe(variantProps)} {...componentProps} />
+      </TooltipWrapper>
+    )
+  }
 
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>

src/frontend/src/primitives/Checkbox.tsx

@@ -134,11 +134,10 @@ export const Checkbox = ({
       >
         <StyledCheckbox {...props}>
           {(renderProps) => {
-            if (renderProps.isInvalid && !!props.validate) {
-              setError(props.validate(renderProps.isSelected))
-            } else {
-              setError(null)
-            }
+            renderProps.isInvalid && !!props.validate
+              ? setError(props.validate(renderProps.isSelected))
+              : setError(null)
+
             return (
               <>
                 <div className="mt-Checkbox-checkbox">

src/frontend/src/primitives/LinkButton.tsx

@@ -1,22 +0,0 @@
-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'
-
-type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
-  LinkProps &
-  TooltipWrapperProps
-
-export const LinkButton = ({
-  tooltip,
-  tooltipType = 'instant',
-  ...props
-}: LinkButtonProps) => {
-  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
-
-  return (
-    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <Link className={buttonRecipe(variantProps)} {...componentProps} />
-    </TooltipWrapper>
-  )
-}