wip

In object-oriented terms, the previous implementation violated the Liskov
Substitution Principle. Props between these two components (Button and Link)
were not substitutable.

This led to TypeScript errors and increased overall complexity without
significant DX gains. To address this, the LinkButton has been extracted
into a dedicated component.

.github/workflows/docker-hub.yml

@@ -1,4 +1,5 @@
 name: Docker Hub Workflow
+run-name: Docker Hub Workflow
 
 on:
   workflow_dispatch:
@@ -48,9 +49,15 @@ 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@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           target: backend-production
@@ -92,9 +99,15 @@ 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@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./src/frontend/Dockerfile

.github/workflows/helmfile-linter.yml

@@ -0,0 +1,22 @@
+name: Helmfile lint
+run-name: Helmfile lint
+
+on:
+  pull_request:
+    branches:
+      - 'main'
+
+jobs:
+  helmfile-lint:
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/helmfile/helmfile:latest
+    steps:
+      -
+        uses: numerique-gouv/action-helmfile-lint@main
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          age-key: ${{ secrets.SOPS_PRIVATE }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+          helmfile-src: "src/helm"
+          repositories: "meet,secrets"

.github/workflows/meet.yml

@@ -122,6 +122,9 @@ 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,3 +8,5 @@ creation_rules:
       - age1tl80n23wq6zxegupwn70ew0yp225ua5v4dk800x7g2w6pvlxz46qk592pa #marie
       - age1qy04neuzwpasmvljqrcvhwnf0kz5cpyteze38c8avp0czewskasszv9pyw #argocd
       - age18fgn6j2vwwswqcpv9xpcehq8mrf9zs2sglwkamp3tzwx8d9jq9jsrskrk9 #manuuu
+      - age1hm2hsfgjezpsc3k0y5w5feq9t8vl3seq04qjhgt6ztd6403wfvpsgxu09m # github-repo
+      - age1hnhuzj96ktkhpyygvmz0x9h8mfvssz7ss6emmukags644mdhf4msajk93r # Samuel Paccoud

Dockerfile

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

bin/validate-helm-configuration.sh

@@ -0,0 +1,13 @@
+#!/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,6 +16,30 @@ 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: .
@@ -40,6 +64,7 @@ services:
         - mailcatcher
         - redis
         - nginx
+        - createbuckets
         - livekit
   
   celery-dev:
@@ -73,6 +98,7 @@ services:
     depends_on:
       - postgresql
       - redis
+      - createbuckets
       - livekit
 
   celery:

env.d/development/common.dist

@@ -18,6 +18,9 @@ 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,7 +13,9 @@
       "enabled": false,
       "groupName": "ignored js dependencies",
       "matchManagers": ["npm"],
-      "matchPackageNames": []
+      "matchPackageNames": [
+        "eslint"
+      ]
     }
   ]
 }

src/backend/.pylintrc

@@ -450,7 +450,7 @@ max-branches=12
 max-locals=15
 
 # Maximum number of parents for a class (see R0901).
-max-parents=7
+max-parents=10
 
 # 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,4 +82,15 @@ class ResourceAccessPermission(permissions.BasePermission):
         if request.method == "DELETE" and obj.role == RoleChoices.OWNER:
             return obj.user == user
 
-        return obj.resource.is_administrator(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)

src/backend/core/api/serializers.py

@@ -87,6 +87,15 @@ 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."""
 
@@ -106,10 +115,10 @@ class RoomSerializer(serializers.ModelSerializer):
         if not request:
             return output
 
-        role = instance.get_role(request.user)
-        is_admin = models.RoleChoices.check_administrator_role(role)
+        roles = instance.get_roles(request.user)
+        is_administrator = models.RoleChoices.is_administrator(roles)
 
-        if role is not None:
+        if roles:
             access_serializer = NestedResourceAccessSerializer(
                 instance.accesses.select_related("resource", "user").all(),
                 context=self.context,
@@ -117,10 +126,10 @@ class RoomSerializer(serializers.ModelSerializer):
             )
             output["accesses"] = access_serializer.data
 
-        if not is_admin:
+        if not is_administrator:
             del output["configuration"]
 
-        if role is not None or instance.is_public:
+        if roles or instance.is_public:
             slug = f"{instance.id!s}".replace("-", "")
 
             username = request.query_params.get("username", None)
@@ -133,6 +142,17 @@ class RoomSerializer(serializers.ModelSerializer):
                 ),
             }
 
-        output["is_administrable"] = is_admin
+        output["is_administrable"] = is_administrator
 
         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

@@ -0,0 +1,33 @@
+"""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,17 +1,22 @@
 """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 (
@@ -25,6 +30,13 @@ 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):
     """
@@ -162,7 +174,7 @@ class RoomViewSet(
     API endpoints to access and perform actions on rooms.
     """
 
-    permission_classes = [permissions.RoomPermissions]
+    permission_classes = [permissions.AccessPermission]
     queryset = models.Room.objects.all()
     serializer_class = serializers.RoomSerializer
 
@@ -186,16 +198,10 @@ 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 = {
@@ -209,6 +215,11 @@ 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)
@@ -249,6 +260,17 @@ 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."""
@@ -293,3 +315,96 @@ 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,3 +65,12 @@ 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

@@ -0,0 +1,37 @@
+# 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,14 +28,16 @@ class RoleChoices(models.TextChoices):
     OWNER = "owner", _("Owner")
 
     @classmethod
-    def check_administrator_role(cls, role):
+    def is_administrator(cls, roles):
         """Check if a role is administrator."""
-        return role in [cls.ADMIN, cls.OWNER]
+        return bool(set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN}))
 
-    @classmethod
-    def check_owner_role(cls, role):
-        """Check if a role is owner."""
-        return role == cls.OWNER
+
+class RecordingStatusChoices(models.TextChoices):
+    """Recording status choices."""
+
+    RECORDING = "recording", _("Recording")
+    DONE = "done", _("Done")
 
 
 class BaseModel(models.Model):
@@ -193,34 +195,44 @@ 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.check_administrator_role(self.get_role(user))
+        return RoleChoices.is_administrator(self.get_roles(user))
 
     def is_owner(self, user):
         """Check if a user is owner of the resource."""
-        return RoleChoices.check_owner_role(self.get_role(user))
+        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,
+        }
 
 
 class ResourceAccess(BaseModel):
@@ -325,3 +337,47 @@ 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

@@ -0,0 +1,102 @@
+"""
+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

@@ -0,0 +1,132 @@
+"""
+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

@@ -0,0 +1,128 @@
+"""
+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

@@ -0,0 +1,56 @@
+"""
+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(4):
+    with django_assert_num_queries(5):
         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(4):
+    with django_assert_num_queries(5):
         response = client.get(
             f"/api/v1.0/rooms/{room.id!s}/",
         )

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

@@ -0,0 +1,88 @@
+"""
+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,81 +86,66 @@ 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):
-    """Calling access rights methods with None should return None."""
+    """The `get_roles` method should return an empty list when called with None."""
     room = RoomFactory()
 
     with django_assert_num_queries(0):
-        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
+        assert not list(room.get_roles(None))
 
 
 def test_models_rooms_access_rights_anonymous(django_assert_num_queries):
-    """Check access rights methods on the room object for an anonymous user."""
+    """The `get_roles` method should return an empty list for an anonymous user."""
     user = AnonymousUser()
     room = RoomFactory()
 
     with django_assert_num_queries(0):
-        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
+        assert not list(room.get_roles(user))
 
 
 def test_models_rooms_access_rights_authenticated(django_assert_num_queries):
-    """Check access rights methods on the room object for an unrelated user."""
+    """
+    The `get_roles` method should return an empty list for a user not related to the room.
+    """
     user = UserFactory()
     room = RoomFactory()
 
     with django_assert_num_queries(1):
-        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
+        assert not list(room.get_roles(user))
 
 
 def test_models_rooms_access_rights_member_direct(django_assert_num_queries):
-    """Check access rights methods on the room object for a direct member."""
+    """Check `get_roles` method on the room object for a direct member."""
     user = UserFactory()
     room = RoomFactory(users=[(user, "member")])
 
     with django_assert_num_queries(1):
-        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
+        assert list(room.get_roles(user)) == ["member"]
 
 
 def test_models_rooms_access_rights_administrator_direct(django_assert_num_queries):
-    """The is_administrator method should return True for a direct administrator."""
+    """Check `get_roles` method on the room object for a direct administrator."""
     user = UserFactory()
     room = RoomFactory(users=[(user, "administrator")])
 
     with django_assert_num_queries(1):
-        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
+        assert list(room.get_roles(user)) == ["administrator"]
 
 
 def test_models_rooms_access_rights_owner_direct(django_assert_num_queries):
-    """Check access rights methods on the room object for an owner."""
+    """Check `get_roles` method on the room object for an owner."""
     user = UserFactory()
     room = RoomFactory(users=[(user, "owner")])
 
     with django_assert_num_queries(1):
-        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
+        assert list(room.get_roles(user)) == ["owner"]

src/backend/core/urls.py

@@ -5,12 +5,13 @@ from django.urls import include, path
 
 from rest_framework.routers import DefaultRouter
 
-from core.api import viewsets
+from core.api import get_frontend_configuration, 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"
@@ -23,6 +24,7 @@ urlpatterns = [
             [
                 *router.urls,
                 *oidc_urls,
+                path("config/", get_frontend_configuration, name="config"),
             ]
         ),
     ),

src/backend/core/utils.py

@@ -4,13 +4,16 @@ Utils functions used in the core app
 
 # ruff: noqa:S311
 
+import hashlib
 import json
 import random
 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
 
 
@@ -24,7 +27,11 @@ def generate_color(identity: str) -> str:
     range and ensure predictability.
     """
 
-    random.seed(hash(identity))
+    # ruff: noqa:S324
+    identity_hash = hashlib.sha1(identity.encode("utf-8"))
+    # Keep only hash's last 16 bits, collisions are not a concern
+    seed = int(identity_hash.hexdigest(), 16) & 0xFFFF
+    random.seed(seed)
     hue = random.randint(0, 360)
     saturation = random.randint(50, 75)
     lightness = random.randint(25, 60)
@@ -76,3 +83,31 @@ 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,6 +119,25 @@ 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/
 
@@ -251,6 +270,19 @@ 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)
@@ -258,6 +290,7 @@ 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"
@@ -535,6 +568,14 @@ 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,7 +1,6 @@
 """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
@@ -18,11 +17,7 @@ urlpatterns = [
 ]
 
 if settings.DEBUG:
-    urlpatterns = (
-        urlpatterns
-        + staticfiles_urlpatterns()
-        + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
-    )
+    urlpatterns = urlpatterns + staticfiles_urlpatterns()
 
 
 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.4"
+version = "0.1.7"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,34 +25,33 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.5",
+    "boto3==1.35.34",
     "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.0.8",
+    "redis==5.1.1",
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1",
+    "django==5.1.1",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.27.2",
     "dockerflow==2024.4.2",
-    "easy_thumbnails==2.9",
+    "easy_thumbnails==2.10",
     "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.1",
+    "psycopg[binary]==3.2.3",
     "PyJWT==2.9.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.13.0",
+    "sentry-sdk==2.15.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
@@ -70,19 +69,20 @@ dependencies = [
 dev = [
     "django-extensions==3.2.3",
     "drf-spectacular-sidecar==2024.7.1",
+    "freezegun==1.5.1",
     "ipdb==0.13.13",
-    "ipython==8.26.0",
+    "ipython==8.27.0",
     "pyfakefs==5.6.0",
     "pylint-django==2.5.5",
-    "pylint==3.2.6",
+    "pylint==3.2.7",
     "pytest-cov==5.0.0",
-    "pytest-django==4.8.0",
-    "pytest==8.3.2",
+    "pytest-django==4.9.0",
+    "pytest==8.3.3",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.2",
-    "types-requests==2.32.0.20240712",
+    "ruff==0.6.5",
+    "types-requests==2.32.0.20240914",
 ]
 
 [tool.setuptools]

src/frontend/Dockerfile

@@ -32,7 +32,7 @@ WORKDIR /home/frontend
 RUN npm run build
 
 # ---- Front-end image ----
-FROM nginxinc/nginx-unprivileged:1.25 as frontend-production
+FROM nginxinc/nginx-unprivileged:1.26-alpine 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>Meet</title>
+    <title>Visio</title>
   </head>
   <body>
     <div id="root"></div>

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.4",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,43 +13,48 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.3.3",
-    "@livekit/components-styles": "1.0.12",
-    "@pandacss/preset-panda": "0.41.0",
+    "@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",
     "@remixicon/react": "4.2.0",
-    "@tanstack/react-query": "5.49.2",
+    "@tanstack/react-query": "5.59.4",
+    "crisp-sdk-web": "1.0.25",
     "hoofd": "1.7.1",
-    "i18next": "23.12.1",
+    "i18next": "23.15.2",
     "i18next-browser-languagedetector": "8.0.0",
-    "i18next-parser": "9.0.0",
+    "i18next-parser": "9.0.2",
     "i18next-resources-to-backend": "1.2.1",
-    "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",
-    "valtio": "1.13.2",
-    "wouter": "3.3.0"
+    "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",
+    "use-sound": "4.0.3",
+    "valtio": "2.0.0",
+    "wouter": "3.3.5"
   },
   "devDependencies": {
-    "@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",
+    "@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",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.13.1",
-    "@typescript-eslint/parser": "7.13.1",
-    "@vitejs/plugin-react": "4.3.1",
+    "@typescript-eslint/eslint-plugin": "8.8.1",
+    "@typescript-eslint/parser": "8.8.1",
+    "@vitejs/plugin-react": "4.3.2",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.7",
-    "postcss": "8.4.39",
+    "eslint-plugin-react-refresh": "0.4.12",
+    "postcss": "8.4.47",
     "prettier": "3.3.3",
-    "typescript": "5.5.2",
-    "vite": "5.3.1",
-    "vite-tsconfig-paths": "4.3.2"
+    "typescript": "5.6.3",
+    "vite": "5.4.8",
+    "vite-tsconfig-paths": "5.0.1"
   }
 }

src/frontend/panda.config.ts

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

src/frontend/src/App.tsx

@@ -11,18 +11,15 @@ 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,4 +1,5 @@
 export const keys = {
   user: 'user',
   room: 'room',
+  config: 'config',
 }

src/frontend/src/api/useConfig.ts

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,20 @@
+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 (
-    <Button
+    <LinkButton
       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"
       />
-    </Button>
+    </LinkButton>
   )
 }

src/frontend/src/components/SoundTester.tsx

@@ -27,12 +27,17 @@ export const SoundTester = () => {
   return (
     <>
       <Button
+        invisible
         onPress={() => {
           audioRef?.current?.play()
           setIsPlaying(true)
         }}
         size="sm"
         isDisabled={isPlaying}
+        fullWidth
+        style={{
+          color: isPlaying ? 'var(--colors-primary)' : undefined,
+        }}
       >
         {isPlaying ? t('audio.speakers.ongoingTest') : t('audio.speakers.test')}
       </Button>

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

@@ -0,0 +1,39 @@
+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(3600)
+            attemptSilentLogin(300)
           } else {
             resolve(false)
           }

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

@@ -2,9 +2,12 @@ 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
  */
@@ -12,9 +15,16 @@ export const useUser = () => {
   const query = useQuery({
     queryKey: [keys.user],
     queryFn: fetchUser,
-    staleTime: 1000 * 60 * 60, // 1 hour
+    staleTime: Infinity,
   })
 
+  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://meet.numerique.gouv.fr/azer-tyu-qsdf',
+            example: 'https://visio.numerique.gouv.fr/azer-tyu-qsdf',
           })}
           validate={(value) => {
             return !isRoomValid(value.trim()) ? (

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

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, Dialog, Input, type DialogProps, P } from '@/primitives'
+import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
+import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
 
 // fixme - duplication with the InviteDialog
 export const LaterMeetingDialog = ({
@@ -11,19 +12,17 @@ export const LaterMeetingDialog = ({
 }: { roomId: string } & Omit<DialogProps, 'title'>) => {
   const { t } = useTranslation('home')
   const roomUrl = getRouteUrl('room', roomId)
-  const copyLabel = t('laterMeetingDialog.copy')
-  const copiedLabel = t('laterMeetingDialog.copied')
-  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
+
+  const [isCopied, setIsCopied] = useState(false)
+
   useEffect(() => {
-    if (copyLinkLabel == copiedLabel) {
-      const timeout = setTimeout(() => {
-        setCopyLinkLabel(copyLabel)
-      }, 5000)
-      return () => {
-        clearTimeout(timeout)
-      }
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), 3000)
+      return () => clearTimeout(timeout)
     }
-  }, [copyLinkLabel, copyLabel, copiedLabel])
+  }, [isCopied])
+
+  const [isHovered, setIsHovered] = useState(false)
 
   return (
     <Dialog
@@ -32,31 +31,63 @@ export const LaterMeetingDialog = ({
       title={t('laterMeetingDialog.heading')}
     >
       <P>{t('laterMeetingDialog.description')}</P>
-      <HStack alignItems="stretch" gap="gutter">
-        <Div flex="1">
-          <Input
-            type="text"
-            aria-label={t('laterMeetingDialog.inputLabel')}
-            value={roomUrl}
-            readOnly
-            onClick={(e) => {
-              e.currentTarget.select()
-            }}
-          />
-        </Div>
-        <Div minWidth="8rem">
-          <Button
-            variant="primary"
-            size="sm"
-            fullWidth
-            onPress={() => {
-              navigator.clipboard.writeText(roomUrl)
-              setCopyLinkLabel(copiedLabel)
-            }}
-          >
-            {copyLinkLabel}
-          </Button>
-        </Div>
+      <Button
+        variant={isCopied ? 'success' : 'primary'}
+        size="sm"
+        fullWidth
+        aria-label={t('laterMeetingDialog.copy')}
+        style={{
+          justifyContent: 'start',
+        }}
+        onPress={() => {
+          navigator.clipboard.writeText(roomUrl)
+          setIsCopied(true)
+        }}
+        onHoverChange={setIsHovered}
+        data-attr="later-dialog-copy"
+      >
+        {isCopied ? (
+          <>
+            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+            {t('laterMeetingDialog.copied')}
+          </>
+        ) : (
+          <>
+            <RiFileCopyLine
+              size={18}
+              style={{ marginRight: '8px', minWidth: '18px' }}
+            />
+            {isHovered ? (
+              t('laterMeetingDialog.copy')
+            ) : (
+              <div
+                style={{
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  userSelect: 'none',
+                  textWrap: 'nowrap',
+                }}
+              >
+                {roomUrl.replace(/^https?:\/\//, '')}
+              </div>
+            )}
+          </>
+        )}
+      </Button>
+      <HStack>
+        <div
+          style={{
+            backgroundColor: '#d9e5ff',
+            borderRadius: '50%',
+            padding: '4px',
+            marginTop: '1rem',
+          }}
+        >
+          <RiSpam2Fill size={22} style={{ fill: '#4c84fc' }} />
+        </div>
+        <Text variant="sm" style={{ marginTop: '1rem' }}>
+          {t('laterMeetingDialog.permissions')}
+        </Text>
       </HStack>
     </Dialog>
   )

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

@@ -1,18 +1,18 @@
 import { useTranslation } from 'react-i18next'
-import { DialogTrigger } from 'react-aria-components'
+import { DialogTrigger, MenuItem, Menu as RACMenu } 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 { authUrl, useUser, UserAware } from '@/features/auth'
+import { useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
+import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
 import { usePersistentUserChoices } from '@livekit/components-react'
 import { 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'
 
@@ -27,8 +27,6 @@ export const Home = () => {
   const { mutateAsync: createRoom } = useCreateRoom()
   const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
 
-  console.log(laterRoomId)
-
   return (
     <UserAware>
       <Screen>
@@ -44,10 +42,12 @@ export const Home = () => {
               {t('loginToCreateMeeting')}
             </Text>
           )}
-          <HStack gap="gutter">
+          <HStack gap="gutter" alignItems="start">
             {isLoggedIn ? (
               <Menu>
-                <Button variant="primary">{t('createMeeting')}</Button>
+                <Button variant="primary" data-attr="create-meeting">
+                  {t('createMeeting')}
+                </Button>
                 <RACMenu>
                   <MenuItem
                     className={menuItemRecipe({ icon: true })}
@@ -59,6 +59,7 @@ export const Home = () => {
                         })
                       )
                     }}
+                    data-attr="create-option-instant"
                   >
                     <RiAddLine size={18} />
                     {t('createMenu.instantOption')}
@@ -71,6 +72,7 @@ export const Home = () => {
                         setLaterRoomId(data.slug)
                       )
                     }}
+                    data-attr="create-option-later"
                   >
                     <RiLink size={18} />
                     {t('createMenu.laterOption')}
@@ -78,12 +80,16 @@ export const Home = () => {
                 </RACMenu>
               </Menu>
             ) : (
-              <Button variant="primary" href={authUrl()}>
-                {t('login', { ns: 'global' })}
-              </Button>
+              <ProConnectButton />
             )}
             <DialogTrigger>
-              <Button variant="primary" outline>
+              <Button
+                variant="primary"
+                outline
+                style={{
+                  height: !isLoggedIn ? '56px' : undefined, // Temporary, Align with ProConnect Button fixed height
+                }}
+              >
                 {t('joinMeeting')}
               </Button>
               <JoinMeetingDialog />

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

@@ -0,0 +1,112 @@
+import { useEffect } from 'react'
+import { useRoomContext } from '@livekit/components-react'
+import { Participant, RoomEvent } from 'livekit-client'
+import { ToastProvider, toastQueue } from './components/ToastProvider'
+import { NotificationType } from './NotificationType'
+import { Div } from '@/primitives'
+import { isMobileBrowser } from '@livekit/components-core'
+import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
+
+export const MainNotificationToast = () => {
+  const room = useRoomContext()
+  const { triggerNotificationSound } = useNotificationSound()
+
+  useEffect(() => {
+    const showJoinNotification = (participant: Participant) => {
+      if (isMobileBrowser()) {
+        return
+      }
+      triggerNotificationSound(NotificationType.Joined)
+      toastQueue.add(
+        {
+          participant,
+          type: NotificationType.Joined,
+        },
+        {
+          timeout: 5000,
+        }
+      )
+    }
+    room.on(RoomEvent.ParticipantConnected, showJoinNotification)
+    return () => {
+      room.off(RoomEvent.ParticipantConnected, showJoinNotification)
+    }
+  }, [room, triggerNotificationSound])
+
+  useEffect(() => {
+    const removeJoinNotification = (participant: Participant) => {
+      const existingToast = toastQueue.visibleToasts.find(
+        (toast) =>
+          toast.content.participant === participant &&
+          toast.content.type === NotificationType.Joined
+      )
+      if (existingToast) {
+        toastQueue.close(existingToast.key)
+      }
+    }
+    room.on(RoomEvent.ParticipantDisconnected, removeJoinNotification)
+    return () => {
+      room.off(RoomEvent.ParticipantConnected, removeJoinNotification)
+    }
+  }, [room])
+
+  useEffect(() => {
+    const handleNotificationReceived = (
+      prevMetadataStr: string | undefined,
+      participant: Participant
+    ) => {
+      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
+
+      const existingToast = toastQueue.visibleToasts.find(
+        (toast) =>
+          toast.content.participant === participant &&
+          toast.content.type === NotificationType.Raised
+      )
+
+      if (existingToast && prevMetadata.raised && !metadata.raised) {
+        toastQueue.close(existingToast.key)
+        return
+      }
+
+      if (!existingToast && !prevMetadata.raised && metadata.raised) {
+        triggerNotificationSound(NotificationType.Raised)
+        toastQueue.add(
+          {
+            participant,
+            type: NotificationType.Raised,
+          },
+          { timeout: 5000 }
+        )
+      }
+    }
+
+    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
+
+    return () => {
+      room.off(RoomEvent.ParticipantMetadataChanged, 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 />
+    </Div>
+  )
+}

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

@@ -0,0 +1,6 @@
+export enum NotificationType {
+  Joined = 'joined',
+  Default = 'default',
+  Raised = 'raised',
+  Lowered = 'lowered',
+}

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

@@ -0,0 +1,58 @@
+import { useToast } from '@react-aria/toast'
+import { Button } from '@/primitives'
+import { RiCloseLine } from '@remixicon/react'
+import { ToastState } from '@react-stately/toast'
+import { styled } from '@/styled-system/jsx'
+import { useRef } from 'react'
+import { ToastData } from './ToastProvider'
+import type { QueuedToast } from '@react-stately/toast'
+
+export const StyledToastContainer = styled('div', {
+  base: {
+    margin: 0.5,
+    boxShadow:
+      'rgba(0, 0, 0, 0.5) 0px 4px 8px 0px, rgba(0, 0, 0, 0.3) 0px 6px 20px 4px',
+    backgroundColor: '#494c4f',
+    color: 'white',
+    borderRadius: '8px',
+    '&[data-entering]': { animation: 'fade 200ms' },
+    '&[data-exiting]': { animation: 'fade 150ms reverse ease-in' },
+    width: 'fit-content',
+    marginLeft: 'auto',
+  },
+})
+
+const StyledToast = styled('div', {
+  base: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '1rem',
+    padding: '10px',
+  },
+})
+
+export interface ToastProps {
+  key: string
+  toast: QueuedToast<ToastData>
+  state: ToastState<ToastData>
+}
+
+export function Toast({ state, ...props }: ToastProps) {
+  const ref = useRef(null)
+  const { toastProps, contentProps, closeButtonProps } = useToast(
+    props,
+    state,
+    ref
+  )
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <StyledToast>
+        <div {...contentProps}>{props.toast.content?.message} machine a</div>
+        <Button square size="sm" invisible {...closeButtonProps}>
+          <RiCloseLine color="white" />
+        </Button>
+      </StyledToast>
+    </StyledToastContainer>
+  )
+}

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

@@ -0,0 +1,73 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+import { Button as RACButton } from 'react-aria-components'
+import { Track } from 'livekit-client'
+import Source = Track.Source
+
+import { useMaybeLayoutContext } from '@livekit/components-react'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack, styled } from '@/styled-system/jsx'
+import { Div } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+
+const ClickableToast = styled(RACButton, {
+  base: {
+    cursor: 'pointer',
+    display: 'flex',
+    borderRadius: 'inherit',
+  },
+})
+
+export function ToastJoined({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
+    props,
+    state,
+    ref
+  )
+  const layoutContext = useMaybeLayoutContext()
+  const participant = props.toast.content.participant
+  const trackReference = {
+    participant,
+    publication: participant.getTrackPublication(Source.Camera),
+    source: Source.Camera,
+  }
+  const pinParticipant = () => {
+    layoutContext?.pin.dispatch?.({
+      msg: 'set_pin',
+      trackReference,
+    })
+  }
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <ClickableToast
+        ref={ref}
+        onPress={(e) => {
+          pinParticipant()
+          closeButtonProps.onPress?.(e)
+        }}
+      >
+        <HStack justify="center" alignItems="center" {...contentProps}>
+          <Div display="flex" overflow="hidden" width="128" height="72">
+            <ParticipantTile
+              trackRef={trackReference}
+              disableSpeakingIndicator={true}
+              disableMetadata={true}
+              style={{
+                borderRadius: '7px 0 0 7px',
+                width: '100%',
+              }}
+            />
+          </Div>
+          <Div padding={20} {...titleProps}>
+            {t('joined.description', {
+              name: participant.name || t('defaultName'),
+            })}
+          </Div>
+        </HStack>
+      </ClickableToast>
+    </StyledToastContainer>
+  )
+}

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

@@ -0,0 +1,28 @@
+/* eslint-disable react-refresh/only-export-components */
+import { ToastQueue, useToastQueue } from '@react-stately/toast'
+import { ToastRegion } from './ToastRegion'
+import { Participant } from 'livekit-client'
+import { NotificationType } from '../NotificationType'
+
+export interface ToastData {
+  participant: Participant
+  type: NotificationType
+  message?: string
+}
+
+// Using a global queue for toasts allows for centralized management and queuing of notifications
+// from anywhere in the app, providing greater flexibility in complex scenarios.
+export const toastQueue = new ToastQueue<ToastData>({
+  maxVisibleToasts: 5,
+})
+
+export const ToastProvider = ({ ...props }) => {
+  const state = useToastQueue<ToastData>(toastQueue)
+  return (
+    <>
+      {state.visibleToasts.length > 0 && (
+        <ToastRegion {...props} state={state} />
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,66 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { Button, Div } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine, RiHand } from '@remixicon/react'
+import { useWidgetInteraction } from '@/features/rooms/livekit/hooks/useWidgetInteraction'
+
+export function ToastRaised({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
+    props,
+    state,
+    ref
+  )
+  const participant = props.toast.content.participant
+  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        <RiHand
+          color="white"
+          style={{
+            marginRight: '1rem',
+            animationDuration: '300ms',
+            animationName: 'wave_hand',
+            animationIterationCount: '2',
+          }}
+        />
+        <Div {...titleProps} marginRight={0.5}>
+          {t('raised.description', {
+            name: participant.name || t('defaultName'),
+          })}
+        </Div>
+        {!isParticipantsOpen && (
+          <Button
+            size="sm"
+            variant="text"
+            style={{
+              color: '#60a5fa',
+            }}
+            onPress={(e) => {
+              toggleParticipants()
+              closeButtonProps.onPress?.(e)
+            }}
+          >
+            {t('raised.cta')}
+          </Button>
+        )}
+        <Button square size="sm" invisible {...closeButtonProps}>
+          <RiCloseLine size={18} color="white" />
+        </Button>
+      </HStack>
+    </StyledToastContainer>
+  )
+}

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

@@ -0,0 +1,30 @@
+import { AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
+import type { ToastState } from '@react-stately/toast'
+import { Toast } from './Toast'
+import { useRef } from 'react'
+import { NotificationType } from '../NotificationType'
+import { ToastJoined } from './ToastJoined'
+import { ToastData } from './ToastProvider'
+import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
+
+interface ToastRegionProps extends AriaToastRegionProps {
+  state: ToastState<ToastData>
+}
+
+export function ToastRegion({ state, ...props }: ToastRegionProps) {
+  const ref = useRef(null)
+  const { regionProps } = useToastRegion(props, state, ref)
+  return (
+    <div {...regionProps} ref={ref} className="toast-region">
+      {state.visibleToasts.map((toast) => {
+        if (toast.content?.type === NotificationType.Joined) {
+          return <ToastJoined key={toast.key} toast={toast} state={state} />
+        }
+        if (toast.content?.type === NotificationType.Raised) {
+          return <ToastRaised key={toast.key} toast={toast} state={state} />
+        }
+        return <Toast key={toast.key} toast={toast} state={state} />
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+import useSound from 'use-sound'
+
+// fixme - handle dynamic audio output changes
+export const useNotificationSound = () => {
+  const [play] = useSound('./sounds/notifications.mp3', {
+    sprite: {
+      joined: [0, 1150],
+      raised: [1400, 180],
+      message: [1580, 300],
+      waiting: [2039, 710],
+      success: [2740, 1304],
+    },
+  })
+  const triggerNotificationSound = (type: string) => {
+    play({ id: type })
+  }
+  return { triggerNotificationSound }
+}

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

@@ -12,6 +12,19 @@ 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', {
@@ -36,16 +49,32 @@ const StyledChild = styled('div', {
     },
     size: {
       small: {
-        animationName: 'active_speake_small',
+        animationName: 'active_speaker_small',
+      },
+    },
+    pushToTalk: {
+      true: {
+        backgroundColor: 'primary',
+        width: '6px',
+        height: '6px',
       },
     },
   },
 })
 
-export const ActiveSpeaker = ({ isSpeaking }: { isSpeaking: boolean }) => {
+export type ActiveSpeakerProps = {
+  isSpeaking: boolean
+  pushToTalk?: boolean
+}
+
+export const ActiveSpeaker = ({
+  isSpeaking,
+  pushToTalk,
+}: ActiveSpeakerProps) => {
   return (
-    <StyledContainer>
+    <StyledContainer pushToTalk={pushToTalk}>
       <StyledChild
+        pushToTalk={pushToTalk}
         active={isSpeaking}
         size="small"
         style={{
@@ -53,12 +82,14 @@ export const ActiveSpeaker = ({ isSpeaking }: { isSpeaking: boolean }) => {
         }}
       />
       <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,7 +9,6 @@ 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'
@@ -19,6 +18,7 @@ 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,6 +31,9 @@ export const Conference = ({
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
+  useEffect(() => {
+    posthog.capture('visit-room', { slug: roomId })
+  }, [roomId])
   const fetchKey = [keys.room, roomId, userConfig.username]
 
   const {
@@ -50,7 +53,6 @@ export const Conference = ({
   } = useQuery({
     queryKey: fetchKey,
     staleTime: 6 * 60 * 60 * 1000, // By default, LiveKit access tokens expire 6 hours after generation
-    enabled: !initialRoomData,
     initialData: initialRoomData,
     queryFn: () =>
       fetchRoom({
@@ -80,25 +82,6 @@ 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

@@ -4,14 +4,20 @@ import { Div, Button, type DialogProps, P } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
-import { RiCloseLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
+import {
+  RiCheckLine,
+  RiCloseLine,
+  RiFileCopyLine,
+  RiSpam2Fill,
+} from '@remixicon/react'
+import { useEffect, useState } from 'react'
 
 // fixme - extract in a proper primitive this dialog without overlay
 const StyledRACDialog = styled(Dialog, {
   base: {
     position: 'fixed',
-    left: 30,
-    bottom: 90,
+    left: '0.75rem',
+    bottom: 80,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -34,17 +40,25 @@ export const InviteDialog = ({
   const { t } = useTranslation('rooms')
   const roomUrl = getRouteUrl('room', roomId)
 
+  const [isCopied, setIsCopied] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), 3000)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
+
+  const [isHovered, setIsHovered] = useState(false)
+
   return (
     <StyledRACDialog {...dialogProps}>
       {({ close }) => (
         <VStack
-          alignItems={'left'}
+          alignItems="left"
           justify="start"
           gap={0}
-          style={{
-            maxWidth: '100%',
-            overflow: 'hidden',
-          }}
+          style={{ maxWidth: '100%', overflow: 'hidden' }}
         >
           <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
             {t('shareDialog.heading')}
@@ -63,36 +77,49 @@ export const InviteDialog = ({
             </Button>
           </Div>
           <P>{t('shareDialog.description')}</P>
-          <HStack
-            justify={'space-between'}
-            alignItems="center"
+          <Button
+            variant={isCopied ? 'success' : 'primary'}
+            size="sm"
+            fullWidth
+            aria-label={t('shareDialog.copy')}
             style={{
-              backgroundColor: '#f1f3f4',
-              borderRadius: '4px',
-              maxWidth: '100%',
+              justifyContent: 'start',
             }}
-            gap={0}
+            onPress={() => {
+              navigator.clipboard.writeText(roomUrl)
+              setIsCopied(true)
+            }}
+            onHoverChange={setIsHovered}
+            data-attr="share-dialog-copy"
           >
-            <div
-              style={{
-                paddingLeft: '0.75rem',
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-                textWrap: 'nowrap',
-                userSelect: 'none',
-              }}
-            >
-              {roomUrl.replace(/^https?:\/\//, '')}
-            </div>
-            <Button
-              square
-              invisible
-              tooltip={t('shareDialog.copy')}
-              onPress={() => navigator.clipboard.writeText(roomUrl)}
-            >
-              <RiFileCopyLine size={24} />
-            </Button>
-          </HStack>
+            {isCopied ? (
+              <>
+                <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                {t('shareDialog.copied')}
+              </>
+            ) : (
+              <>
+                <RiFileCopyLine
+                  size={18}
+                  style={{ marginRight: '8px', minWidth: '18px' }}
+                />
+                {isHovered ? (
+                  t('shareDialog.copy')
+                ) : (
+                  <div
+                    style={{
+                      textOverflow: 'ellipsis',
+                      overflow: 'hidden',
+                      userSelect: 'none',
+                      textWrap: 'nowrap',
+                    }}
+                  >
+                    {roomUrl.replace(/^https?:\/\//, '')}
+                  </div>
+                )}
+              </>
+            )}
+          </Button>
           <HStack>
             <div
               style={{

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

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

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

@@ -0,0 +1,33 @@
+import { Participant } from 'livekit-client'
+import { fetchServerApi } from './fetchServerApi'
+import { buildServerApiUrl } from './buildServerApiUrl'
+import { useRoomData } from '../hooks/useRoomData'
+
+export const useLowerHandParticipant = () => {
+  const data = useRoomData()
+
+  const lowerHandParticipant = (participant: Participant) => {
+    if (!data || !data?.livekit) {
+      throw new Error('Room data is not available')
+    }
+    const newMetadata = JSON.parse(participant.metadata || '{}')
+    newMetadata.raised = !newMetadata.raised
+    return fetchServerApi(
+      buildServerApiUrl(
+        data.livekit.url,
+        'twirp/livekit.RoomService/UpdateParticipant'
+      ),
+      data.livekit.token,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          room: data.livekit.room,
+          identity: participant.identity,
+          metadata: JSON.stringify(newMetadata),
+          permission: participant.permissions,
+        }),
+      }
+    )
+  }
+  return { lowerHandParticipant }
+}

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

@@ -0,0 +1,19 @@
+import { Participant } from 'livekit-client'
+import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant'
+
+export const useLowerHandParticipants = () => {
+  const { lowerHandParticipant } = useLowerHandParticipant()
+
+  const lowerHandParticipants = (participants: Array<Participant>) => {
+    try {
+      const promises = participants.map((participant) =>
+        lowerHandParticipant(participant)
+      )
+      return Promise.all(promises)
+    } catch (error) {
+      console.error('An error occurred while lowering hands :', error)
+      throw new Error('An error occurred while lowering hands.')
+    }
+  }
+  return { lowerHandParticipants }
+}

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

@@ -0,0 +1,191 @@
+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/MutedMicIndicator.tsx

@@ -0,0 +1,26 @@
+import { useTrackMutedIndicator } from '@livekit/components-react'
+import { Participant, Track } from 'livekit-client'
+import Source = Track.Source
+import { Div } from '@/primitives'
+import { RiMicOffFill } from '@remixicon/react'
+
+export const MutedMicIndicator = ({
+  participant,
+}: {
+  participant: Participant
+}) => {
+  const { isMuted } = useTrackMutedIndicator({
+    participant: participant,
+    source: Source.Microphone,
+  })
+
+  if (!isMuted) {
+    return null
+  }
+
+  return (
+    <Div padding={0.25} backgroundColor="red" borderRadius="4px">
+      <RiMicOffFill size={16} color="white" />
+    </Div>
+  )
+}

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

@@ -6,7 +6,6 @@ import {
   ParticipantName,
   ParticipantTileProps,
   ScreenShareIcon,
-  TrackMutedIndicator,
   useEnsureTrackRef,
   useFeatureContext,
   useIsEncrypted,
@@ -25,6 +24,10 @@ import {
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
 import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
+import { RiHand } from '@remixicon/react'
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { HStack } from '@/styled-system/jsx'
+import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -41,19 +44,24 @@ export function TrackRefContextIfNeeded(
   )
 }
 
+interface ParticipantTileExtendedProps extends ParticipantTileProps {
+  disableMetadata?: boolean
+}
+
 export const ParticipantTile: (
-  props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>
+  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
   HTMLDivElement,
-  ParticipantTileProps
+  ParticipantTileExtendedProps
 >(function ParticipantTile(
   {
     trackRef,
     children,
     onParticipantClick,
     disableSpeakingIndicator,
+    disableMetadata,
     ...htmlProps
-  }: ParticipantTileProps,
+  }: ParticipantTileExtendedProps,
   ref
 ) {
   const trackReference = useEnsureTrackRef(trackRef)
@@ -84,6 +92,10 @@ export const ParticipantTile: (
     [trackReference, layoutContext]
   )
 
+  const { isHandRaised } = useRaisedHand({
+    participant: trackReference.participant,
+  })
+
   return (
     <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
@@ -112,34 +124,56 @@ export const ParticipantTile: (
                   participant={trackReference.participant}
                 />
               </div>
-              <div className="lk-participant-metadata">
-                <div className="lk-participant-metadata-item">
-                  {trackReference.source === Track.Source.Camera ? (
-                    <>
-                      {isEncrypted && (
-                        <LockLockedIcon style={{ marginRight: '0.25rem' }} />
+              {!disableMetadata && (
+                <div className="lk-participant-metadata">
+                  <HStack gap={0.25}>
+                    <MutedMicIndicator
+                      participant={trackReference.participant}
+                    />
+                    <div
+                      className="lk-participant-metadata-item"
+                      style={{
+                        minHeight: '24px',
+                        backgroundColor: isHandRaised ? 'white' : undefined,
+                        color: isHandRaised ? 'black' : undefined,
+                        transition: 'background 200ms ease, color 400ms ease',
+                      }}
+                    >
+                      {trackReference.source === Track.Source.Camera ? (
+                        <>
+                          {isHandRaised && (
+                            <RiHand
+                              color="black"
+                              size={16}
+                              style={{
+                                marginInlineEnd: '.25rem', // fixme - match TrackMutedIndicator styling
+                                animationDuration: '300ms',
+                                animationName: 'wave_hand',
+                                animationIterationCount: '2',
+                              }}
+                            />
+                          )}
+                          {isEncrypted && (
+                            <LockLockedIcon
+                              style={{ marginRight: '0.25rem' }}
+                            />
+                          )}
+                          <ParticipantName />
+                        </>
+                      ) : (
+                        <>
+                          <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
+                          <ParticipantName>&apos;s screen</ParticipantName>
+                        </>
                       )}
-                      <TrackMutedIndicator
-                        trackRef={{
-                          participant: trackReference.participant,
-                          source: Track.Source.Microphone,
-                        }}
-                        show={'muted'}
-                      ></TrackMutedIndicator>
-                      <ParticipantName />
-                    </>
-                  ) : (
-                    <>
-                      <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
-                      <ParticipantName>&apos;s screen</ParticipantName>
-                    </>
-                  )}
+                    </div>
+                  </HStack>
+                  <ConnectionQualityIndicator className="lk-participant-metadata-item" />
                 </div>
-                <ConnectionQualityIndicator className="lk-participant-metadata-item" />
-              </div>
+              )}
             </>
           )}
-          <FocusToggle trackRef={trackReference} />
+          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
     </div>

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

@@ -0,0 +1,88 @@
+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

@@ -2,18 +2,13 @@ import { useTranslation } from 'react-i18next'
 import { RiChat1Line } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useLayoutContext } from '@livekit/components-react'
-import { useSnapshot } from 'valtio'
-import { participantsStore } from '@/stores/participants'
+import { useWidgetInteraction } from '../../hooks/useWidgetInteraction'
 
 export const ChatToggle = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
 
-  const { dispatch, state } = useLayoutContext().widget
-  const tooltipLabel = state?.showChat ? 'open' : 'closed'
-
-  const participantsSnap = useSnapshot(participantsStore)
-  const showParticipants = participantsSnap.showParticipants
+  const { isChatOpen, unreadMessages, toggleChat } = useWidgetInteraction()
+  const tooltipLabel = isChatOpen ? 'open' : 'closed'
 
   return (
     <div
@@ -25,17 +20,15 @@ export const ChatToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(`controls.chat.${tooltipLabel}`)}
-        tooltip={t(`controls.chat.${tooltipLabel}`)}
-        isSelected={state?.showChat}
-        onPress={() => {
-          if (showParticipants) participantsStore.showParticipants = false
-          if (dispatch) dispatch({ msg: 'toggle_chat' })
-        }}
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
+        isSelected={isChatOpen}
+        onPress={() => toggleChat()}
+        data-attr={`controls-chat-${tooltipLabel}`}
       >
         <RiChat1Line />
       </ToggleButton>
-      {!!state?.unreadMessages && (
+      {!!unreadMessages && (
         <div
           className={css({
             position: 'absolute',

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

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { RiHand } from '@remixicon/react'
+import { ToggleButton } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useRoomContext } from '@livekit/components-react'
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+
+export const HandToggle = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
+
+  const room = useRoomContext()
+  const { isHandRaised, toggleRaisedHand } = useRaisedHand({
+    participant: room.localParticipant,
+  })
+
+  const tooltipLabel = isHandRaised ? 'lower' : 'raise'
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <ToggleButton
+        square
+        legacyStyle
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
+        isSelected={isHandRaised}
+        onPress={() => toggleRaisedHand()}
+        data-attr={`controls-hand-${tooltipLabel}`}
+      >
+        <RiHand />
+      </ToggleButton>
+    </div>
+  )
+}

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

@@ -0,0 +1,37 @@
+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,13 +1,15 @@
 import { menuItemRecipe } from '@/primitives/menuItemRecipe'
 import {
+  RiAccountBoxLine,
   RiFeedbackLine,
-  RiQuestionLine,
   RiSettings3Line,
 } from '@remixicon/react'
-import { MenuItem, Menu as RACMenu } from 'react-aria-components'
+import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { Dispatch, SetStateAction } from 'react'
-import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
+import { DialogState } from './OptionsButton'
+import { Separator } from '@/primitives/Separator'
+import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({
@@ -15,8 +17,8 @@ export const OptionsMenuItems = ({
 }: {
   onOpenDialog: Dispatch<SetStateAction<DialogState>>
 }) => {
-  const { t } = useTranslation('rooms')
-
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleEffects } = useWidgetInteraction()
   return (
     <RACMenu
       style={{
@@ -24,29 +26,33 @@ export const OptionsMenuItems = ({
         width: '300px',
       }}
     >
-      <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>
+      <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>
     </RACMenu>
   )
 }

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

@@ -0,0 +1,82 @@
+import { css } from '@/styled-system/css'
+
+import { HStack } from '@/styled-system/jsx'
+import { Text } from '@/primitives/Text'
+import { useTranslation } from 'react-i18next'
+import { Avatar } from '@/components/Avatar'
+import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
+import { Participant } from 'livekit-client'
+import { isLocal } from '@/utils/livekit'
+import { RiHand } from '@remixicon/react'
+import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant.ts'
+import { Button } from '@/primitives'
+
+type HandRaisedListItemProps = {
+  participant: Participant
+}
+
+export const HandRaisedListItem = ({
+  participant,
+}: HandRaisedListItemProps) => {
+  const { t } = useTranslation('rooms')
+  const name = participant.name || participant.identity
+
+  const { lowerHandParticipant } = useLowerHandParticipant()
+
+  return (
+    <HStack
+      role="listitem"
+      justify="space-between"
+      key={participant.identity}
+      id={participant.identity}
+      className={css({
+        padding: '0.25rem 0',
+        width: 'full',
+      })}
+    >
+      <HStack>
+        <Avatar name={name} bgColor={getParticipantColor(participant)} />
+        <Text
+          variant={'sm'}
+          className={css({
+            userSelect: 'none',
+            cursor: 'default',
+            display: 'flex',
+          })}
+        >
+          <span
+            className={css({
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              maxWidth: '120px',
+              display: 'block',
+            })}
+          >
+            {name}
+          </span>
+          {isLocal(participant) && (
+            <span
+              className={css({
+                marginLeft: '.25rem',
+                whiteSpace: 'nowrap',
+              })}
+            >
+              ({t('participants.you')})
+            </span>
+          )}
+        </Text>
+      </HStack>
+      <Button
+        square
+        invisible
+        size="sm"
+        onPress={() => lowerHandParticipant(participant)}
+        tooltip={t('participants.lowerParticipantHand', { name })}
+        data-attr="participants-lower-hand"
+      >
+        <RiHand />
+      </Button>
+    </HStack>
+  )
+}

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

@@ -0,0 +1,27 @@
+import { Button } from '@/primitives'
+import { useLowerHandParticipants } from '@/features/rooms/livekit/api/lowerHandParticipants'
+import { useTranslation } from 'react-i18next'
+import { Participant } from 'livekit-client'
+
+type LowerAllHandsButtonProps = {
+  participants: Array<Participant>
+}
+
+export const LowerAllHandsButton = ({
+  participants,
+}: LowerAllHandsButtonProps) => {
+  const { lowerHandParticipants } = useLowerHandParticipants()
+  const { t } = useTranslation('rooms')
+  return (
+    <Button
+      aria-label={t('participants.lowerParticipantsHand')}
+      size="sm"
+      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

@@ -7,15 +7,12 @@ import { Avatar } from '@/components/Avatar'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 import { Participant, Track } from 'livekit-client'
 import { isLocal } from '@/utils/livekit'
-import { Button as RACButton } from 'react-aria-components'
-import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import {
   useIsSpeaking,
   useTrackMutedIndicator,
 } from '@livekit/components-react'
 import Source = Track.Source
-import { RiMicOffLine } from '@remixicon/react'
-import { TooltipWrapper } from '@/primitives/TooltipWrapper.tsx'
+import { RiMicFill, RiMicOffFill } from '@remixicon/react'
 import { Button, Dialog, P } from '@/primitives'
 import { useState } from 'react'
 import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
@@ -36,10 +33,10 @@ const MuteAlertDialog = ({
     <Dialog isOpen={isOpen} role="alertdialog">
       <P>{t('participants.muteParticipantAlert.description', { name })}</P>
       <HStack gap={1}>
-        <Button size="sm" invisible onPress={onClose}>
+        <Button variant="text" size="sm" onPress={onClose}>
           {t('participants.muteParticipantAlert.cancel')}
         </Button>
-        <Button size="sm" invisible onPress={onSubmit}>
+        <Button variant="text" size="sm" onPress={onSubmit}>
           {t('participants.muteParticipantAlert.confirm')}
         </Button>
       </HStack>
@@ -59,45 +56,40 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
     source: Source.Microphone,
   })
   const isSpeaking = useIsSpeaking(participant)
-  const isDisabled = isLocal(participant) || (!isLocal(participant) && isMuted)
-
   const [isAlertOpen, setIsAlertOpen] = useState(false)
-
   const name = participant.name || participant.identity
 
   return (
     <>
-      <TooltipWrapper
-        tooltip={t('participants.muteParticipant', {
-          name,
-        })}
-        tooltipType="instant"
+      <Button
+        square
+        invisible
+        size="sm"
+        tooltip={
+          isLocal(participant)
+            ? t('participants.muteYourself')
+            : t('participants.muteParticipant', {
+                name,
+              })
+        }
+        isDisabled={isMuted}
+        onPress={() =>
+          !isMuted && isLocal(participant)
+            ? muteParticipant(participant)
+            : setIsAlertOpen(true)
+        }
+        data-attr="participants-mute"
       >
-        <RACButton
-          isDisabled={isDisabled}
-          className={css({
-            padding: '10px',
-            minWidth: '24px',
-            minHeight: '24px',
-            borderRadius: '50%',
-            backgroundColor: 'transparent',
-            transition: 'background 200ms',
-            '&[data-hovered]': {
-              backgroundColor: '#f5f5f5',
-            },
-            '&[data-focused]': {
-              backgroundColor: '#f5f5f5',
-            },
-          })}
-          onPress={() => !isMuted && setIsAlertOpen(true)}
-        >
-          {isMuted ? (
-            <RiMicOffLine color="gray" />
-          ) : (
-            <ActiveSpeaker isSpeaking={isSpeaking} />
-          )}
-        </RACButton>
-      </TooltipWrapper>
+        {isMuted ? (
+          <RiMicOffFill color={'gray'} />
+        ) : (
+          <RiMicFill
+            style={{
+              animation: isSpeaking ? 'pulse_mic 800ms infinite' : undefined,
+            }}
+          />
+        )}
+      </Button>
       <MuteAlertDialog
         isOpen={isAlertOpen}
         onSubmit={() =>
@@ -119,7 +111,6 @@ export const ParticipantListItem = ({
 }: ParticipantListItemProps) => {
   const { t } = useTranslation('rooms')
   const name = participant.name || participant.identity
-
   return (
     <HStack
       role="listitem"

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

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+import { css } from '@/styled-system/css'
+import { ToggleButton } from 'react-aria-components'
+import { HStack, styled, VStack } from '@/styled-system/jsx'
+import { RiArrowUpSLine } from '@remixicon/react'
+import { Participant } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+
+const ToggleHeader = styled(ToggleButton, {
+  base: {
+    minHeight: '40px', //fixme hardcoded value
+    paddingRight: '.5rem',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    alignItems: 'center',
+    transition: 'background 200ms',
+    borderTopRadius: '7px',
+    '&[data-hovered]': {
+      backgroundColor: '#f5f5f5',
+    },
+  },
+})
+
+const Container = styled('div', {
+  base: {
+    border: '1px solid #dadce0',
+    borderRadius: '8px',
+    margin: '0 .625rem',
+  },
+})
+
+const ListContainer = styled(VStack, {
+  base: {
+    borderTop: '1px solid #dadce0',
+    alignItems: 'start',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    minHeight: 0,
+    flexGrow: 1,
+    display: 'flex',
+    paddingY: '0.5rem',
+    paddingX: '1rem',
+    gap: 0,
+  },
+})
+
+type ParticipantsCollapsableListProps = {
+  heading: string
+  participants: Array<Participant>
+  renderParticipant: (participant: Participant) => JSX.Element
+  action?: () => JSX.Element
+}
+
+export const ParticipantsCollapsableList = ({
+  heading,
+  participants,
+  renderParticipant,
+  action,
+}: ParticipantsCollapsableListProps) => {
+  const { t } = useTranslation('rooms')
+  const [isOpen, setIsOpen] = useState(true)
+  const label = t(`participants.collapsable.${isOpen ? 'close' : 'open'}`, {
+    name: heading,
+  })
+  return (
+    <Container>
+      <ToggleHeader
+        isSelected={isOpen}
+        aria-label={label}
+        onPress={() => setIsOpen(!isOpen)}
+        style={{
+          borderRadius: !isOpen ? '7px' : undefined,
+        }}
+      >
+        <HStack
+          justify="space-between"
+          className={css({
+            margin: '0 1.25rem',
+            width: '100%',
+          })}
+        >
+          <div
+            className={css({
+              fontSize: '1rem',
+            })}
+          >
+            {heading}
+          </div>
+          <div>{participants?.length || 0}</div>
+        </HStack>
+        <RiArrowUpSLine
+          size={32}
+          style={{
+            transform: isOpen ? 'rotate(-180deg)' : undefined,
+            transition: 'transform 200ms',
+          }}
+        />
+      </ToggleHeader>
+      {isOpen && (
+        <ListContainer>
+          {action && action()}
+          {participants.map((participant) => renderParticipant(participant))}
+        </ListContainer>
+      )}
+    </Container>
+  )
+}

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

@@ -1,25 +1,27 @@
 import { css } from '@/styled-system/css'
+import { allParticipantRoomEvents } from '@livekit/components-core'
 import { useParticipants } from '@livekit/components-react'
 
-import { Heading } from 'react-aria-components'
-import { Box, Button, Div } from '@/primitives'
-import { text } from '@/primitives/Text'
-import { RiCloseLine } from '@remixicon/react'
-import { participantsStore } from '@/stores/participants'
+import { Div, H } from '@/primitives'
 import { useTranslation } from 'react-i18next'
-import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
-import { ParticipantListItem } from '@/features/rooms/livekit/components/controls/Participants/ParticipantListItem'
-import { VStack } from '@/styled-system/jsx'
+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'
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
 
   // 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: allParticipantRoomEvents,
+    updateOnlyOn: [
+      RoomEvent.ParticipantNameChanged,
+      ...allParticipantRoomEvents,
+    ],
   })
 
   const sortedRemoteParticipants = participants
@@ -35,59 +37,47 @@ export const ParticipantsList = () => {
     ...sortedRemoteParticipants,
   ]
 
+  const raisedHandParticipants = participants.filter((participant) => {
+    const data = JSON.parse(participant.metadata || '{}')
+    return data.raised
+  })
+
   // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
   return (
-    <Box
-      size="sm"
-      minWidth="300px"
-      className={css({
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        margin: '1.5rem 1.5rem 1.5rem 0',
-      })}
-    >
-      <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
-        <span>{t('participants.heading')}</span>{' '}
-        <span
-          className={css({
-            marginLeft: '0.75rem',
-            fontWeight: 'normal',
-            fontSize: '1rem',
-          })}
-        >
-          {participants?.length}
-        </span>
-      </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>
-      {sortedParticipants?.length > 0 && (
-        <VStack
-          role="list"
-          className={css({
-            alignItems: 'start',
-            gap: 'none',
-            overflowY: 'scroll',
-            overflowX: 'hidden',
-            minHeight: 0,
-            flexGrow: 1,
-            display: 'flex',
-          })}
-        >
-          {sortedParticipants.map((participant) => (
-            <ParticipantListItem participant={participant} />
-          ))}
-        </VStack>
+    <>
+      <H
+        lvl={2}
+        className={css({
+          fontSize: '0.875rem',
+          fontWeight: 'bold',
+          color: '#5f6368',
+          padding: '0 1.5rem',
+          marginBottom: '0.83em',
+        })}
+      >
+        {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>
       )}
-    </Box>
+      <ParticipantsCollapsableList
+        heading={t('contributors')}
+        participants={sortedParticipants}
+        renderParticipant={(participant) => (
+          <ParticipantListItem participant={participant} />
+        )}
+      />
+    </>
   )
 }

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

@@ -2,14 +2,11 @@ import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useLayoutContext, useParticipants } from '@livekit/components-react'
-import { useSnapshot } from 'valtio'
-import { participantsStore } from '@/stores/participants'
+import { useParticipants } from '@livekit/components-react'
+import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
 
 export const ParticipantsToggle = () => {
-  const { t } = useTranslation('rooms')
-
-  const { dispatch, state } = useLayoutContext().widget
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
 
   /**
    * Context could not be used due to inconsistent refresh behavior.
@@ -19,10 +16,9 @@ export const ParticipantsToggle = () => {
   const participants = useParticipants()
   const numParticipants = participants?.length
 
-  const participantsSnap = useSnapshot(participantsStore)
-  const showParticipants = participantsSnap.showParticipants
+  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
 
-  const tooltipLabel = showParticipants ? 'open' : 'closed'
+  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
 
   return (
     <div
@@ -34,13 +30,11 @@ export const ParticipantsToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(`controls.participants.${tooltipLabel}`)}
-        tooltip={t(`controls.participants.${tooltipLabel}`)}
-        isSelected={showParticipants}
-        onPress={() => {
-          if (dispatch && state?.showChat) dispatch({ msg: 'toggle_chat' })
-          participantsStore.showParticipants = !showParticipants
-        }}
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
+        isSelected={isParticipantsOpen}
+        onPress={() => toggleParticipants()}
+        data-attr={`controls-participants-${tooltipLabel}`}
       >
         <RiGroupLine />
       </ToggleButton>

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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -1,33 +0,0 @@
-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

@@ -0,0 +1,23 @@
+import { LocalParticipant, Participant } from 'livekit-client'
+import { useParticipantInfo } from '@livekit/components-react'
+import { isLocal } from '@/utils/livekit'
+
+type useRaisedHandProps = {
+  participant: Participant
+}
+
+export function useRaisedHand({ participant }: useRaisedHandProps) {
+  // fixme - refactor this part to rely on attributes
+  const { metadata } = useParticipantInfo({ participant })
+  const parsedMetadata = JSON.parse(metadata || '{}')
+
+  const toggleRaisedHand = () => {
+    if (isLocal(participant)) {
+      parsedMetadata.raised = !parsedMetadata.raised
+      const localParticipant = participant as LocalParticipant
+      localParticipant.setMetadata(JSON.stringify(parsedMetadata))
+    }
+  }
+
+  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
+}

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

@@ -0,0 +1,46 @@
+import { useLayoutContext } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { layoutStore } from '@/stores/layout'
+
+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 toggleParticipants = () => {
+    if (dispatch && state?.showChat) {
+      dispatch({ msg: 'toggle_chat' })
+    }
+    layoutStore.sidePanel = isParticipantsOpen ? null : 'participants'
+  }
+
+  const toggleChat = () => {
+    if (isParticipantsOpen || isEffectsOpen) {
+      layoutStore.sidePanel = null
+    }
+    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,10 +4,6 @@ import * as React from 'react'
 import { supportsScreenSharing } from '@livekit/components-core'
 
 import {
-  DisconnectButton,
-  LeaveIcon,
-  MediaDeviceMenu,
-  TrackToggle,
   useMaybeLayoutContext,
   usePersistentUserChoices,
 } from '@livekit/components-react'
@@ -15,10 +11,13 @@ 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 '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
-import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
+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'
 
 /** @public */
 export type ControlBarControls = {
@@ -37,7 +36,7 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
   controls?: ControlBarControls
   /**
    * If `true`, the user's device choices will be persisted.
-   * This will enables the user to have the same device choices when they rejoin the room.
+   * This will enable the user to have the same device choices when they rejoin the room.
    * @defaultValue true
    * @alpha
    */
@@ -66,7 +65,6 @@ export function ControlBar({
   onDeviceError,
   ...props
 }: ControlBarProps) {
-  const { t } = useTranslation('rooms')
   const [isChatOpen, setIsChatOpen] = React.useState(false)
   const layoutContext = useMaybeLayoutContext()
   React.useEffect(() => {
@@ -82,26 +80,8 @@ 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 {
@@ -125,71 +105,38 @@ export function ControlBar({
 
   return (
     <div {...htmlProps}>
-      <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>
+      <SelectToggleDevice
+        source={Track.Source.Microphone}
+        onChange={microphoneOnChange}
+        onDeviceError={(error) =>
+          onDeviceError?.({ source: Track.Source.Microphone, error })
+        }
+        onActiveDeviceChange={(deviceId) =>
+          saveAudioInputDeviceId(deviceId ?? '')
+        }
+      />
+      <SelectToggleDevice
+        source={Track.Source.Camera}
+        onChange={cameraOnChange}
+        onDeviceError={(error) =>
+          onDeviceError?.({ source: Track.Source.Camera, error })
+        }
+        onActiveDeviceChange={(deviceId) =>
+          saveVideoInputDeviceId(deviceId ?? '')
+        }
+      />
       {browserSupportsScreenSharing && (
-        <TrackToggle
-          source={Track.Source.ScreenShare}
-          captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
-          showIcon={showIcon}
-          onChange={onScreenShareChange}
+        <ScreenShareToggle
           onDeviceError={(error) =>
             onDeviceError?.({ source: Track.Source.ScreenShare, error })
           }
-        >
-          {showText &&
-            t(
-              isScreenShareEnabled
-                ? 'controls.stopScreenShare'
-                : 'controls.shareScreen'
-            )}
-        </TrackToggle>
+        />
       )}
+      <HandToggle />
       <ChatToggle />
       <ParticipantsToggle />
       <OptionsButton />
-      <DisconnectButton>
-        {showIcon && <LeaveIcon />}
-        {showText && t('controls.leave')}
-      </DisconnectButton>
+      <LeaveButton />
       <StartMediaButton />
     </div>
   )

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

@@ -30,11 +30,12 @@ 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 { participantsStore } from '@/stores/participants'
+import { layoutStore } from '@/stores/layout'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
+import { SidePanel } from '../components/SidePanel'
+import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
 
 const LayoutWrapper = styled(
   'div',
@@ -171,8 +172,8 @@ export function VideoConference({
   ])
   /* eslint-enable react-hooks/exhaustive-deps */
 
-  const participantsSnap = useSnapshot(participantsStore)
-  const showParticipants = participantsSnap.showParticipants
+  const layoutSnap = useSnapshot(layoutStore)
+  const sidePanel = layoutSnap.sidePanel
 
   return (
     <div className="lk-video-conference" {...props}>
@@ -184,32 +185,45 @@ export function VideoConference({
         >
           <div className="lk-video-conference-inner">
             <LayoutWrapper>
-              {!focusTrack ? (
-                <div
-                  className="lk-grid-layout-wrapper"
-                  style={{ height: 'auto' }}
-                >
-                  <GridLayout tracks={tracks}>
-                    <ParticipantTile />
-                  </GridLayout>
-                </div>
-              ) : (
-                <div className="lk-focus-layout-wrapper">
-                  <FocusLayoutContainer>
-                    <CarouselLayout tracks={carouselTracks}>
+              <div
+                style={{ display: 'flex', position: 'relative', width: '100%' }}
+              >
+                {!focusTrack ? (
+                  <div
+                    className="lk-grid-layout-wrapper"
+                    style={{ height: 'auto' }}
+                  >
+                    <GridLayout tracks={tracks}>
                       <ParticipantTile />
-                    </CarouselLayout>
-                    {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                  </FocusLayoutContainer>
-                </div>
-              )}
+                    </GridLayout>
+                  </div>
+                ) : (
+                  <div
+                    className="lk-focus-layout-wrapper"
+                    style={{ height: 'auto' }}
+                  >
+                    <FocusLayoutContainer>
+                      <CarouselLayout
+                        tracks={carouselTracks}
+                        style={{
+                          minWidth: '200px',
+                        }}
+                      >
+                        <ParticipantTile />
+                      </CarouselLayout>
+                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                    </FocusLayoutContainer>
+                  </div>
+                )}
+                <MainNotificationToast />
+              </div>
               <Chat
                 style={{ display: widgetState.showChat ? 'grid' : 'none' }}
                 messageFormatter={chatMessageFormatter}
                 messageEncoder={chatMessageEncoder}
                 messageDecoder={chatMessageDecoder}
               />
-              {showParticipants && <ParticipantsList />}
+              {sidePanel && <SidePanel />}
             </LayoutWrapper>
             <ControlBar />
           </div>

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

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

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

@@ -12,6 +12,8 @@ import {
 import { AccountTab } from './tabs/AccountTab'
 import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
 import { AudioTab } from '@/features/settings/components/tabs/AudioTab.tsx'
+import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { useRef } from 'react'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -28,13 +30,13 @@ const tabListContainerStyle = css({
   borderRight: '1px solid lightGray', // fixme poor color management
   paddingY: '1rem',
   paddingRight: '1.5rem',
-  flex: '0 0 16rem', // fixme size copied from meet settings modal
 })
 
 const tabPanelContainerStyle = css({
   display: 'flex',
   flexGrow: '1',
   marginTop: '3.5rem',
+  minWidth: 0,
 })
 
 export type SettingsDialogExtended = Pick<
@@ -45,25 +47,39 @@ export type SettingsDialogExtended = Pick<
 export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   // display only icon on small screen
   const { t } = useTranslation('settings')
+
+  const dialogEl = useRef<HTMLDivElement>(null)
+  const { width } = useSize(dialogEl)
+  const isWideScreen = !width || width >= 800 // fixme - hardcoded 50rem in pixel
+
   return (
-    <Dialog {...props} role="dialog" type="flex">
+    <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
       <Tabs orientation="vertical" className={tabsStyle}>
-        <div className={tabListContainerStyle}>
-          <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
-            {t('dialog.heading')}
-          </Heading>
+        <div
+          className={tabListContainerStyle}
+          style={{
+            flex: isWideScreen ? '0 0 16rem' : undefined,
+            paddingTop: !isWideScreen ? '64px' : undefined,
+            paddingRight: !isWideScreen ? '1rem' : undefined,
+          }}
+        >
+          {isWideScreen && (
+            <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
+              {t('dialog.heading')}
+            </Heading>
+          )}
           <TabList border={false} aria-label="Chat log orientation example">
             <Tab icon highlight id="1">
               <RiAccountCircleLine />
-              {t('tabs.account')}
+              {isWideScreen && t('tabs.account')}
             </Tab>
             <Tab icon highlight id="2">
               <RiSpeakerLine />
-              {t('tabs.audio')}
+              {isWideScreen && t('tabs.audio')}
             </Tab>
             <Tab icon highlight id="3">
               <RiSettings3Line />
-              {t('tabs.general')}
+              {isWideScreen && t('tabs.general')}
             </Tab>
           </TabList>
         </div>

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

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

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

@@ -1,10 +1,55 @@
 import { DialogProps, Field, H } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import { useMediaDeviceSelect } from '@livekit/components-react'
+import {
+  useIsSpeaking,
+  useMediaDeviceSelect,
+  useRoomContext,
+} from '@livekit/components-react'
 import { isSafari } from '@/utils/livekit'
 import { useTranslation } from 'react-i18next'
-import { SoundTester } from '@/components/SoundTester.tsx'
+import { SoundTester } from '@/components/SoundTester'
+import { HStack } from '@/styled-system/jsx'
+import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
+import { ReactNode } from 'react'
+
+type RowWrapperProps = {
+  heading: string
+  children: ReactNode[]
+}
+
+const RowWrapper = ({ heading, children }: RowWrapperProps) => {
+  return (
+    <>
+      <H lvl={2}>{heading}</H>
+      <HStack
+        gap={0}
+        style={{
+          flexWrap: 'wrap',
+        }}
+      >
+        <div
+          style={{
+            flex: '1 1 215px',
+            minWidth: 0,
+          }}
+        >
+          {children[0]}
+        </div>
+        <div
+          style={{
+            width: '10rem',
+            justifyContent: 'center',
+            display: 'flex',
+            paddingLeft: '1.5rem',
+          }}
+        >
+          {children[1]}
+        </div>
+      </HStack>
+    </>
+  )
+}
 
 export type AudioTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -13,6 +58,9 @@ type DeviceItems = Array<{ value: string; label: string }>
 
 export const AudioTab = ({ id }: AudioTabProps) => {
   const { t } = useTranslation('settings')
+  const { localParticipant } = useRoomContext()
+
+  const isSpeaking = useIsSpeaking(localParticipant)
 
   const {
     devices: devicesOut,
@@ -60,20 +108,32 @@ export const AudioTab = ({ id }: AudioTabProps) => {
 
   return (
     <TabPanel padding={'md'} flex id={id}>
-      <H lvl={2}>{t('audio.microphone.heading')}</H>
-      <Field
-        type="select"
-        label={t('audio.microphone.label')}
-        items={itemsIn}
-        defaultSelectedKey={activeDeviceIdIn || getDefaultSelectedKey(itemsIn)}
-        onSelectionChange={(key) => setActiveMediaDeviceIn(key as string)}
-        {...disabledProps}
-      />
+      <RowWrapper heading={t('audio.microphone.heading')}>
+        <Field
+          type="select"
+          label={t('audio.microphone.label')}
+          items={itemsIn}
+          defaultSelectedKey={
+            activeDeviceIdIn || getDefaultSelectedKey(itemsIn)
+          }
+          onSelectionChange={(key) => setActiveMediaDeviceIn(key as string)}
+          {...disabledProps}
+          style={{
+            width: '100%',
+          }}
+        />
+        <>
+          {localParticipant.isMicrophoneEnabled ? (
+            <ActiveSpeaker isSpeaking={isSpeaking} />
+          ) : (
+            <span>Micro désactivé</span>
+          )}
+        </>
+      </RowWrapper>
       {/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
         To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
       {!isSafari() && (
-        <>
-          <H lvl={2}>{t('audio.speakers.heading')}</H>
+        <RowWrapper heading={t('audio.speakers.heading')}>
           <Field
             type="select"
             label={t('audio.speakers.label')}
@@ -85,9 +145,12 @@ export const AudioTab = ({ id }: AudioTabProps) => {
               setActiveMediaDeviceOut(key as string)
             }
             {...disabledProps}
+            style={{
+              minWidth: 0,
+            }}
           />
           <SoundTester />
-        </>
+        </RowWrapper>
       )}
     </TabPanel>
   )

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

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

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,18 @@
+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

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