🐛(frontend) fix missing user label in prejoin screen

Add missing hint to guide user entering their name while
joining a room.

I introduced this bug while merging @manuhabitela works on
the newly prejoin screen.

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

.sops.yaml

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

Dockerfile

@@ -1,18 +1,17 @@
 # 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
+FROM base AS back-builder
 
 WORKDIR /builder
 
@@ -24,7 +23,7 @@ RUN mkdir /install && \
 
 
 # ---- mails ----
-FROM node:20 as mail-builder
+FROM node:20 AS mail-builder
 
 COPY ./src/mail /mail/app
 
@@ -35,15 +34,12 @@ RUN yarn install --frozen-lockfile && \
 
 
 # ---- static link collector ----
-FROM base as link-collector
+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
@@ -62,21 +58,18 @@ RUN DJANGO_CONFIGURATION=Build DJANGO_JWT_PRIVATE_SIGNING_KEY=Dummy \
 RUN rdfind -makesymlinks true -followsymlinks true -makeresultsfile false ${MEET_STATIC_ROOT}
 
 # ---- Core application image ----
-FROM base as core
+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
@@ -100,15 +93,13 @@ WORKDIR /app
 ENTRYPOINT [ "/usr/local/bin/entrypoint" ]
 
 # ---- Development image ----
-FROM core as backend-development
+FROM core AS backend-development
 
 # Switch back to the root user to install development dependencies
 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
@@ -128,7 +119,7 @@ ENV DB_HOST=postgresql \
 CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
 
 # ---- Production image ----
-FROM core as backend-production
+FROM core AS backend-production
 
 ARG MEET_STATIC_ROOT=/data/static
 

Makefile

@@ -302,6 +302,7 @@ build-k8s-cluster: ## build the kubernetes cluster using kind
 .PHONY: build-k8s-cluster
 
 start-tilt: ## start the kubernetes cluster using kind
+	kubectl config set-context --current --namespace=meet
 	tilt up -f ./bin/Tiltfile
 .PHONY: build-k8s-cluster
 

bin/_config.sh

@@ -5,7 +5,7 @@ set -eo pipefail
 REPO_DIR="$(cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd)"
 UNSET_USER=0
 
-COMPOSE_FILE="${REPO_DIR}/docker-compose.yml"
+COMPOSE_FILE="${REPO_DIR}/compose.yml"
 COMPOSE_PROJECT="meet"
 
 

bin/start-kind.sh

@@ -97,6 +97,41 @@ data:
     help: "https://kind.sigs.k8s.io/docs/user/local-registry/"
 EOF
 
+cat <<EOF | kubectl apply -f -
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: coredns
+  namespace: kube-system
+data:
+  Corefile: |
+    .:53 {
+        errors
+        health {
+          lameduck 5s
+        }
+        ready
+        kubernetes cluster.local in-addr.arpa ip6.arpa {
+          pods insecure
+          fallthrough in-addr.arpa ip6.arpa
+          ttl 30
+        }
+        prometheus :9153
+        forward . /etc/resolv.conf {
+          max_concurrent 1000
+        }
+        rewrite stop {
+          name regex (.*).127.0.0.1.nip.io ingress-nginx-controller.ingress-nginx.svc.cluster.local answer auto
+        }
+        cache 30
+        loop
+        reload
+        loadbalance
+    }
+EOF
+
+kubectl -n kube-system rollout restart deployments/coredns
+
 echo "6. Install ingress-nginx"
 kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml
 kubectl -n ingress-nginx create secret tls mkcert --key /tmp/127.0.0.1.nip.io+1-key.pem --cert /tmp/127.0.0.1.nip.io+1.pem

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

compose.yml

@@ -1,4 +1,3 @@
-version: '3.8'
 
 services:
   postgresql:

renovate.json

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

src/backend/.pylintrc

@@ -447,10 +447,10 @@ max-bool-expr=5
 max-branches=12
 
 # Maximum number of locals for function / method body
-max-locals=15
+max-locals=20
 
 # 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/admin.py

@@ -77,3 +77,18 @@ class RoomAdmin(admin.ModelAdmin):
     """Room admin interface declaration."""
 
     inlines = (ResourceAccessInline,)
+
+
+class RecordingAccessInline(admin.TabularInline):
+    """Inline admin class for recording accesses."""
+
+    model = models.RecordingAccess
+    extra = 0
+
+
+@admin.register(models.Recording)
+class RecordingAdmin(admin.ModelAdmin):
+    """Recording admin interface declaration."""
+
+    inlines = (RecordingAccessInline,)
+    list_display = ("id", "status", "room", "created_at", "worker_id")

src/backend/core/analytics.py

@@ -1,58 +0,0 @@
-"""
-Meet analytics class.
-"""
-
-import uuid
-
-from django.conf import settings
-
-from june import analytics as jAnalytics
-
-
-class Analytics:
-    """Analytics integration
-
-    This class wraps the June analytics code to avoid coupling our code directly
-    with this third-party library. By doing so, we create a generic interface
-    for analytics that can be easily modified or replaced in the future.
-    """
-
-    def __init__(self):
-        key = getattr(settings, "ANALYTICS_KEY", None)
-
-        if key is not None:
-            jAnalytics.write_key = key
-
-        self._enabled = key is not None
-
-    def _is_anonymous_user(self, user):
-        """Check if the user is anonymous."""
-        return user is None or user.is_anonymous
-
-    def identify(self, user, **kwargs):
-        """Identify a user"""
-
-        if self._is_anonymous_user(user) or not self._enabled:
-            return
-
-        traits = kwargs.pop("traits", {})
-        traits.update({"email": user.email_anonymized})
-
-        jAnalytics.identify(user_id=user.sub, traits=traits, **kwargs)
-
-    def track(self, user, **kwargs):
-        """Track an event"""
-
-        if not self._enabled:
-            return
-
-        event_data = {}
-        if self._is_anonymous_user(user):
-            event_data["anonymous_id"] = str(uuid.uuid4())
-        else:
-            event_data["user_id"] = user.sub
-
-        jAnalytics.track(**event_data, **kwargs)
-
-
-analytics = Analytics()

src/backend/core/api/permissions.py

@@ -65,15 +65,11 @@ class RoomPermissions(permissions.BasePermission):
         return obj.is_administrator(user)
 
 
-class ResourceAccessPermission(permissions.BasePermission):
+class ResourceAccessPermission(IsAuthenticated):
     """
     Permissions for a room that can only be updated by room administrators.
     """
 
-    def has_permission(self, request, view):
-        """Only allow authenticated users."""
-        return request.user.is_authenticated
-
     def has_object_permission(self, request, view, obj):
         """
         Check that the logged-in user is administrator of the linked room.
@@ -83,3 +79,11 @@ class ResourceAccessPermission(permissions.BasePermission):
             return obj.user == user
 
         return obj.resource.is_administrator(user)
+
+
+class HasAbilityPermission(IsAuthenticated):
+    """Permission class for access objects."""
+
+    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."""
 
@@ -136,3 +145,14 @@ class RoomSerializer(serializers.ModelSerializer):
         output["is_administrable"] = is_admin
 
         return output
+
+
+class RecordingSerializer(serializers.ModelSerializer):
+    """Serialize Recording for the API."""
+
+    room = ListRoomSerializer(read_only=True)
+
+    class Meta:
+        model = models.Recording
+        fields = ["id", "room", "created_at", "updated_at", "status"]
+        read_only_fields = fields

src/backend/core/api/viewsets.py

@@ -20,7 +20,6 @@ from rest_framework import (
 
 from core import models, utils
 
-from ..analytics import analytics
 from . import permissions, serializers
 
 # pylint: disable=too-many-ancestors
@@ -186,13 +185,6 @@ 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
@@ -241,14 +233,6 @@ class RoomViewSet(
             role=models.RoleChoices.OWNER,
         )
 
-        analytics.track(
-            user=self.request.user,
-            event="Create Room",
-            properties={
-                "slug": room.slug,
-            },
-        )
-
 
 class ResourceAccessListModelMixin:
     """List mixin for resource access API."""
@@ -293,3 +277,27 @@ 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.HasAbilityPermission]
+    queryset = models.Recording.objects.all()
+    serializer_class = serializers.RecordingSerializer
+
+    def get_queryset(self):
+        """Restrict recordings to the user's ones."""
+        user = self.request.user
+        return (
+            super()
+            .get_queryset()
+            .filter(Q(accesses__user=user) | Q(accesses__team__in=user.get_teams()))
+        )

src/backend/core/authentication/backends.py

@@ -10,8 +10,6 @@ from mozilla_django_oidc.auth import (
 
 from core.models import User
 
-from ..analytics import analytics
-
 
 class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
     """Custom OpenID Connect (OIDC) Authentication Backend.
@@ -81,7 +79,6 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
             else:
                 user = None
 
-        analytics.identify(user=user)
         return user
 
     def create_user(self, claims):

src/backend/core/authentication/views.py

@@ -22,8 +22,6 @@ from mozilla_django_oidc.views import (
     OIDCLogoutView as MozillaOIDCOIDCLogoutView,
 )
 
-from ..analytics import analytics
-
 
 class OIDCLogoutView(MozillaOIDCOIDCLogoutView):
     """Custom logout view for handling OpenID Connect (OIDC) logout flow.
@@ -100,10 +98,6 @@ class OIDCLogoutView(MozillaOIDCOIDCLogoutView):
 
         logout_url = self.redirect_url
 
-        analytics.track(
-            user=request.user,
-            event="Signed Out",
-        )
         if request.user.is_authenticated:
             logout_url = self.construct_oidc_logout_url(request)
 

src/backend/core/factories.py

@@ -65,3 +65,48 @@ class RoomFactory(ResourceFactory):
 
     name = factory.Faker("catch_phrase")
     slug = factory.LazyAttribute(lambda o: slugify(o.name))
+
+
+class RecordingFactory(factory.django.DjangoModelFactory):
+    """Create fake recording for testing."""
+
+    class Meta:
+        model = models.Recording
+
+    room = factory.SubFactory(RoomFactory)
+    status = models.RecordingStatusChoices.INITIATED
+    worker_id = None
+
+    @factory.post_generation
+    def users(self, create, extracted, **kwargs):
+        """Add users to recording from a given list of users with or without roles."""
+        if create and extracted:
+            for item in extracted:
+                if isinstance(item, models.User):
+                    UserRecordingAccessFactory(recording=self, user=item)
+                else:
+                    UserRecordingAccessFactory(
+                        recording=self, user=item[0], role=item[1]
+                    )
+
+
+class UserRecordingAccessFactory(factory.django.DjangoModelFactory):
+    """Create fake recording user accesses for testing."""
+
+    class Meta:
+        model = models.RecordingAccess
+
+    recording = factory.SubFactory(RecordingFactory)
+    user = factory.SubFactory(UserFactory)
+    role = factory.fuzzy.FuzzyChoice(models.RoleChoices.values)
+
+
+class TeamRecordingAccessFactory(factory.django.DjangoModelFactory):
+    """Create fake recording team accesses for testing."""
+
+    class Meta:
+        model = models.RecordingAccess
+
+    recording = factory.SubFactory(RecordingFactory)
+    team = factory.Sequence(lambda n: f"team{n}")
+    role = factory.fuzzy.FuzzyChoice(models.RoleChoices.values)

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

@@ -0,0 +1,67 @@
+# Generated by Django 5.1.1 on 2024-11-06 14:31
+
+import django.db.models.deletion
+import uuid
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0004_alter_user_language'),
+    ]
+
+    operations = [
+        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')),
+                ('status', models.CharField(choices=[('initiated', 'Initiated'), ('active', 'Active'), ('stopped', 'Stopped'), ('saved', 'Saved'), ('aborted', 'Aborted'), ('failed_to_start', 'Failed to Start'), ('failed_to_stop', 'Failed to Stop')], default='initiated', max_length=20)),
+                ('worker_id', models.CharField(blank=True, help_text='Enter an identifier for the worker recording.This ID is retained even when the worker stops, allowing for easy tracking.', max_length=255, null=True, verbose_name='Worker ID')),
+                ('room', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='recordings', to='core.room', verbose_name='Room')),
+            ],
+            options={
+                'verbose_name': 'Recording',
+                'verbose_name_plural': 'Recordings',
+                'db_table': 'meet_recording',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.CreateModel(
+            name='RecordingAccess',
+            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')),
+                ('team', models.CharField(blank=True, max_length=100)),
+                ('role', models.CharField(choices=[('member', 'Member'), ('administrator', 'Administrator'), ('owner', 'Owner')], default='member', max_length=20)),
+                ('recording', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='accesses', to='core.recording')),
+                ('user', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name': 'Recording/user relation',
+                'verbose_name_plural': 'Recording/user relations',
+                'db_table': 'meet_recording_access',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.AddConstraint(
+            model_name='recording',
+            constraint=models.UniqueConstraint(condition=models.Q(('status__in', ['active', 'initiated'])), fields=('room',), name='unique_initiated_or_active_recording_per_room'),
+        ),
+        migrations.AddConstraint(
+            model_name='recordingaccess',
+            constraint=models.UniqueConstraint(condition=models.Q(('user__isnull', False)), fields=('user', 'recording'), name='unique_recording_user', violation_error_message='This user is already in this recording.'),
+        ),
+        migrations.AddConstraint(
+            model_name='recordingaccess',
+            constraint=models.UniqueConstraint(condition=models.Q(('team__gt', '')), fields=('team', 'recording'), name='unique_recording_team', violation_error_message='This team is already in this recording.'),
+        ),
+        migrations.AddConstraint(
+            model_name='recordingaccess',
+            constraint=models.CheckConstraint(condition=models.Q(models.Q(('team', ''), ('user__isnull', False)), models.Q(('team__gt', ''), ('user__isnull', True)), _connector='OR'), name='check_recording_access_either_user_or_team', violation_error_message='Either user or team must be set, not both.'),
+        ),
+    ]

src/backend/core/models.py

@@ -4,6 +4,7 @@ Declare and configure the models for the Meet core application
 
 import uuid
 from logging import getLogger
+from typing import List
 
 from django.conf import settings
 from django.contrib.auth import models as auth_models
@@ -38,6 +39,39 @@ class RoleChoices(models.TextChoices):
         return role == cls.OWNER
 
 
+class RecordingStatusChoices(models.TextChoices):
+    """Enumeration of possible states for a recording operation."""
+
+    INITIATED = "initiated", _("Initiated")
+    ACTIVE = "active", _("Active")
+    STOPPED = "stopped", _("Stopped")
+    SAVED = "saved", _("Saved")
+    ABORTED = "aborted", _("Aborted")
+    FAILED_TO_START = "failed_to_start", _("Failed to Start")
+    FAILED_TO_STOP = "failed_to_stop", _("Failed to Stop")
+
+    @classmethod
+    def is_final(cls, status):
+        """Determine if the recording status represents a final state.
+
+        A final status indicates the recording flow has completed, either
+        successfully or unsuccessfully.
+        """
+
+        return status in {
+            cls.STOPPED,
+            cls.SAVED,
+            cls.ABORTED,
+            cls.FAILED_TO_START,
+            cls.FAILED_TO_STOP,
+        }
+
+    @classmethod
+    def is_unsuccessful(cls, status):
+        """Determine if the recording status represents an unsuccessful state."""
+        return status in {cls.ABORTED, cls.FAILED_TO_START, cls.FAILED_TO_STOP}
+
+
 class BaseModel(models.Model):
     """
     Serves as an abstract base model for other models, ensuring that records are validated
@@ -171,10 +205,38 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
         return f"***@{self.email.split('@')[1]}"
 
 
+def get_resource_roles(resource: models.Model, user: User) -> List[str]:
+    """
+    Get all roles assigned to a user for a specific resource, including team-based roles.
+
+    Args:
+        resource: The resource to check permissions for
+        user: The user to get roles for
+
+    Returns:
+        List of role strings assigned to the user
+    """
+    if not user.is_authenticated:
+        return []
+
+    # Use pre-annotated roles if available from viewset optimization
+    if hasattr(resource, "user_roles"):
+        return resource.user_roles or []
+
+    try:
+        return list(
+            resource.accesses.filter_user(user)
+            .values_list("role", flat=True)
+            .distinct()
+        )
+    except (IndexError, models.ObjectDoesNotExist):
+        return []
+
+
 class Resource(BaseModel):
     """Model to define access control"""
 
-    is_public = models.BooleanField(default=settings.DEFAULT_ROOM_IS_PUBLIC)
+    is_public = models.BooleanField(default=settings.RESOURCE_DEFAULT_IS_PUBLIC)
     users = models.ManyToManyField(
         User,
         through="ResourceAccess",
@@ -325,3 +387,206 @@ class Room(Resource):
         else:
             raise ValidationError({"name": f'Room name "{self.name:s}" is reserved.'})
         super().clean_fields(exclude=exclude)
+
+
+class BaseAccessManager(models.Manager):
+    """Base manager for handling resource access control."""
+
+    def filter_user(self, user):
+        """Filter accesses for a given user, including both direct and team-based access."""
+        return self.filter(models.Q(user=user) | models.Q(team__in=user.get_teams()))
+
+
+class BaseAccess(BaseModel):
+    """Base model for accesses to handle resources."""
+
+    user = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE,
+        null=True,
+        blank=True,
+    )
+    team = models.CharField(max_length=100, blank=True)
+    role = models.CharField(
+        max_length=20, choices=RoleChoices.choices, default=RoleChoices.MEMBER
+    )
+
+    objects = BaseAccessManager()
+
+    class Meta:
+        abstract = True
+
+    def _get_abilities(self, resource, user):
+        """
+        Compute and return abilities for a given user taking into account
+        the current state of the object.
+        """
+
+        roles = get_resource_roles(resource, user)
+
+        is_owner = RoleChoices.OWNER in roles
+        has_privileges = is_owner or RoleChoices.ADMIN in roles
+
+        # Default values for unprivileged users
+        set_role_to = set()
+        can_delete = False
+
+        # Special handling when modifying an owner's access
+        if self.role == RoleChoices.OWNER:
+            # Prevent orphaning the resource
+            can_delete = (
+                is_owner
+                and resource.accesses.filter(role=RoleChoices.OWNER).count() > 1
+            )
+            if can_delete:
+                set_role_to = {RoleChoices.ADMIN, RoleChoices.OWNER, RoleChoices.MEMBER}
+        elif has_privileges:
+            can_delete = True
+            set_role_to = {RoleChoices.ADMIN, RoleChoices.MEMBER}
+            if is_owner:
+                set_role_to.add(RoleChoices.OWNER)
+
+        # Remove the current role as we don't want to propose it as an option
+        set_role_to.discard(self.role)
+
+        return {
+            "destroy": can_delete,
+            "update": bool(set_role_to),
+            "partial_update": bool(set_role_to),
+            "retrieve": bool(roles),
+            "set_role_to": sorted(r.value for r in set_role_to),
+        }
+
+
+class Recording(BaseModel):
+    """Model for recordings that take place in a room"""
+
+    room = models.ForeignKey(
+        Room,
+        on_delete=models.CASCADE,
+        related_name="recordings",
+        verbose_name=_("Room"),
+    )
+    status = models.CharField(
+        max_length=20,
+        choices=RecordingStatusChoices.choices,
+        default=RecordingStatusChoices.INITIATED,
+    )
+    worker_id = models.CharField(
+        max_length=255,
+        null=True,
+        blank=True,
+        verbose_name=_("Worker ID"),
+        help_text=_(
+            "Enter an identifier for the worker recording."
+            "This ID is retained even when the worker stops, allowing for easy tracking."
+        ),
+    )
+
+    class Meta:
+        db_table = "meet_recording"
+        ordering = ("-created_at",)
+        verbose_name = _("Recording")
+        verbose_name_plural = _("Recordings")
+        constraints = [
+            models.UniqueConstraint(
+                fields=["room"],
+                condition=models.Q(
+                    status__in=[
+                        RecordingStatusChoices.ACTIVE,
+                        RecordingStatusChoices.INITIATED,
+                    ]
+                ),
+                name="unique_initiated_or_active_recording_per_room",
+            )
+        ]
+
+    def __str__(self):
+        return f"Recording {self.id} ({self.status})"
+
+    def get_abilities(self, user):
+        """Compute and return abilities for a given user on the recording."""
+
+        roles = set(get_resource_roles(self, user))
+
+        is_owner_or_admin = bool(
+            roles.intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
+        )
+
+        is_final_status = RecordingStatusChoices.is_final(self.status)
+
+        return {
+            "destroy": is_owner_or_admin and is_final_status,
+            "partial_update": False,
+            "retrieve": is_owner_or_admin,
+            "stop": is_owner_or_admin and not is_final_status,
+            "update": False,
+        }
+
+    def is_savable(self) -> bool:
+        """Determine if the recording can be saved based on its current status."""
+
+        is_unsuccessful = RecordingStatusChoices.is_unsuccessful(self.status)
+        is_already_saved = self.status == RecordingStatusChoices.SAVED
+
+        return not is_unsuccessful and not is_already_saved
+
+
+class RecordingAccess(BaseAccess):
+    """Relation model to give access to a recording for a user or a team with a role.
+
+    Recording Status Flow:
+    1. INITIATED: Initial state when recording is requested
+    2. ACTIVE: Recording is currently in progress
+    3. STOPPED: Recording has been stopped by user/system
+    4. SAVED: Recording has been successfully processed and stored
+
+    Error States:
+    - FAILED_TO_START: Worker failed to initialize recording
+    - FAILED_TO_STOP: Worker failed during stop operation
+    - ABORTED: Recording was terminated before completion
+
+    Warning: Worker failures may lead to database inconsistency between the actual
+    recording state and its status in the database.
+    """
+
+    recording = models.ForeignKey(
+        Recording,
+        on_delete=models.CASCADE,
+        related_name="accesses",
+    )
+
+    class Meta:
+        db_table = "meet_recording_access"
+        ordering = ("-created_at",)
+        verbose_name = _("Recording/user relation")
+        verbose_name_plural = _("Recording/user relations")
+        constraints = [
+            models.UniqueConstraint(
+                fields=["user", "recording"],
+                condition=models.Q(user__isnull=False),  # Exclude null users
+                name="unique_recording_user",
+                violation_error_message=_("This user is already in this recording."),
+            ),
+            models.UniqueConstraint(
+                fields=["team", "recording"],
+                condition=models.Q(team__gt=""),  # Exclude empty string teams
+                name="unique_recording_team",
+                violation_error_message=_("This team is already in this recording."),
+            ),
+            models.CheckConstraint(
+                condition=models.Q(user__isnull=False, team="")
+                | models.Q(user__isnull=True, team__gt=""),
+                name="check_recording_access_either_user_or_team",
+                violation_error_message=_("Either user or team must be set, not both."),
+            ),
+        ]
+
+    def __str__(self):
+        return f"{self.user!s} is {self.role:s} in {self.recording!s}"
+
+    def get_abilities(self, user):
+        """
+        Compute and return abilities for a given user on the recording access.
+        """
+        return self._get_abilities(self.recording, user)

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

@@ -0,0 +1,114 @@
+"""
+Test recordings API endpoints in the Meet core app: delete.
+"""
+
+import pytest
+from rest_framework.test import APIClient
+
+from ...factories import RecordingFactory, UserFactory, UserRecordingAccessFactory
+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 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 == 404
+    assert Recording.objects.count() == 1
+
+
+def test_api_recordings_delete_members():
+    """
+    Authenticated users should not be allowed to delete a recording
+    from which they are only a member.
+    """
+
+    user = UserFactory()
+    access = UserRecordingAccessFactory(role="member", user=user)
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.delete(
+        f"/api/v1.0/recordings/{access.recording.id}/",
+    )
+
+    assert response.status_code == 403
+    assert Recording.objects.count() == 1
+
+
+@pytest.mark.parametrize(
+    "role",
+    ["owner", "administrator"],
+)
+def test_api_recordings_delete_active(role):
+    """
+    Authenticated users cannot delete active recordings, even with deletion privileges.
+    """
+
+    user = UserFactory()
+
+    recording = RecordingFactory(status="active")
+    access = UserRecordingAccessFactory(role=role, user=user, recording=recording)
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.delete(
+        f"/api/v1.0/recordings/{access.recording.id}/",
+    )
+
+    assert response.status_code == 403
+    assert Recording.objects.count() == 1
+
+
+@pytest.mark.parametrize(
+    "role",
+    ["owner", "administrator"],
+)
+def test_api_recordings_delete_final(role):
+    """
+    Authenticated users should not be allowed to delete an active recording
+    from which they are an admin or owner.
+    """
+
+    user = UserFactory()
+
+    recording = RecordingFactory(status="saved")
+    access = UserRecordingAccessFactory(role=role, user=user, recording=recording)
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.delete(
+        f"/api/v1.0/recordings/{access.recording.id}/",
+    )
+
+    assert response.status_code == 204
+    assert Recording.objects.count() == 0

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

@@ -0,0 +1,180 @@
+"""
+Test recordings API endpoints in the Meet core app: list.
+"""
+
+import operator
+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()
+    response = APIClient().get("/api/v1.0/recordings/")
+
+    assert response.status_code == 401
+
+
+@pytest.mark.parametrize(
+    "role",
+    ["administrator", "member", "owner"],
+)
+def test_api_recordings_list_authenticated_direct(role):
+    """
+    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()
+
+    access = factories.UserRecordingAccessFactory(role=role, user=user)
+    factories.UserRecordingAccessFactory(user=other_user)
+
+    recording = access.recording
+    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"),
+        "room": {
+            "id": str(room.id),
+            "is_public": room.is_public,
+            "name": room.name,
+            "slug": room.slug,
+        },
+        "status": "initiated",
+        "updated_at": recording.updated_at.isoformat().replace("+00:00", "Z"),
+    }
+
+
+def test_api_recording_list_authenticated_via_team(mock_user_get_teams):
+    """
+    Authenticated users should be able to list recordings they are a
+    owner/administrator/member of via a team.
+    """
+    user = factories.UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    mock_user_get_teams.return_value = ["team1", "team2", "unknown"]
+
+    recordings_team1 = [
+        access.recording
+        for access in factories.TeamRecordingAccessFactory.create_batch(2, team="team1")
+    ]
+    recordings_team2 = [
+        access.recording
+        for access in factories.TeamRecordingAccessFactory.create_batch(3, team="team2")
+    ]
+
+    expected_ids = {
+        str(recording.id) for recording in recordings_team1 + recordings_team2
+    }
+
+    response = client.get("/api/v1.0/recordings/")
+
+    assert response.status_code == 200
+    results = response.json()["results"]
+    assert len(results) == 5
+    results_id = {result["id"] for result in results}
+    assert expected_ids == results_id
+
+
+@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)
+
+    recording_ids = [
+        str(access.recording_id)
+        for access in factories.UserRecordingAccessFactory.create_batch(3, user=user)
+    ]
+
+    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 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(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)
+
+
+def test_api_recordings_list_ordering_default():
+    """Recordings should be ordered by descending "updated_at" by default"""
+    user = factories.UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    factories.RecordingFactory.create_batch(5, users=[user])
+
+    response = client.get("/api/v1.0/recordings/")
+
+    assert response.status_code == 200
+    results = response.json()["results"]
+    assert len(results) == 5
+
+    # Check that results are sorted by descending "updated_at" as expected
+    for i in range(4):
+        assert operator.ge(results[i]["updated_at"], results[i + 1]["updated_at"])

src/backend/core/tests/test_analytics.py

@@ -1,132 +0,0 @@
-"""
-Test for the Analytics class.
-"""
-
-# pylint: disable=W0212
-
-from unittest.mock import patch
-
-from django.contrib.auth.models import AnonymousUser
-from django.test.utils import override_settings
-
-import pytest
-
-from core.analytics import Analytics
-from core.factories import UserFactory
-
-pytestmark = pytest.mark.django_db
-
-
-@pytest.fixture(name="mock_june_analytics")
-def _mock_june_analytics():
-    with patch("core.analytics.jAnalytics") as mock:
-        yield mock
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-def test_analytics_init_enabled(mock_june_analytics):
-    """Should enable analytics and set the write key correctly when ANALYTICS_KEY is set."""
-    analytics = Analytics()
-    assert analytics._enabled is True
-    assert mock_june_analytics.write_key == "test_key"
-
-
-@override_settings(ANALYTICS_KEY=None)
-def test_analytics_init_disabled():
-    """Should disable analytics when ANALYTICS_KEY is not set."""
-    analytics = Analytics()
-    assert analytics._enabled is False
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-def test_analytics_identify_user(mock_june_analytics):
-    """Should identify a user with the correct traits when analytics is enabled."""
-    user = UserFactory(sub="12345", email="user@example.com")
-    analytics = Analytics()
-    analytics.identify(user)
-    mock_june_analytics.identify.assert_called_once_with(
-        user_id="12345", traits={"email": "***@example.com"}
-    )
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-def test_analytics_identify_user_with_traits(mock_june_analytics):
-    """Should identify a user with additional traits when analytics is enabled."""
-    user = UserFactory(sub="12345", email="user@example.com")
-    analytics = Analytics()
-    analytics.identify(user, traits={"email": "user@example.com", "foo": "foo"})
-    mock_june_analytics.identify.assert_called_once_with(
-        user_id="12345", traits={"email": "***@example.com", "foo": "foo"}
-    )
-
-
-@override_settings(ANALYTICS_KEY=None)
-def test_analytics_identify_not_enabled(mock_june_analytics):
-    """Should not call identify when analytics is not enabled."""
-    user = UserFactory(sub="12345", email="user@example.com")
-    analytics = Analytics()
-    analytics.identify(user)
-    mock_june_analytics.identify.assert_not_called()
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-def test_analytics_identify_no_user(mock_june_analytics):
-    """Should not call identify when the user is None."""
-    analytics = Analytics()
-    analytics.identify(None)
-    mock_june_analytics.identify.assert_not_called()
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-def test_analytics_identify_anonymous_user(mock_june_analytics):
-    """Should not call identify when the user is anonymous."""
-    user = AnonymousUser()
-    analytics = Analytics()
-    analytics.identify(user)
-    mock_june_analytics.identify.assert_not_called()
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-def test_analytics_track_event(mock_june_analytics):
-    """Should track an event with the correct user and event details when analytics is enabled."""
-    user = UserFactory(sub="12345")
-    analytics = Analytics()
-    analytics.track(user, event="test_event", foo="foo")
-    mock_june_analytics.track.assert_called_once_with(
-        user_id="12345", event="test_event", foo="foo"
-    )
-
-
-@override_settings(ANALYTICS_KEY=None)
-def test_analytics_track_event_not_enabled(mock_june_analytics):
-    """Should not call track when analytics is not enabled."""
-    user = UserFactory(sub="12345")
-    analytics = Analytics()
-    analytics.track(user, event="test_event", foo="foo")
-
-    mock_june_analytics.track.assert_not_called()
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-@patch("uuid.uuid4", return_value="test_uuid4")
-def test_analytics_track_event_no_user(mock_uuid4, mock_june_analytics):
-    """Should track an event with a random anonymous user ID when the user is None."""
-    analytics = Analytics()
-    analytics.track(None, event="test_event", foo="foo")
-    mock_june_analytics.track.assert_called_once_with(
-        anonymous_id="test_uuid4", event="test_event", foo="foo"
-    )
-    mock_uuid4.assert_called_once()
-
-
-@override_settings(ANALYTICS_KEY="test_key")
-@patch("uuid.uuid4", return_value="test_uuid4")
-def test_analytics_track_event_anonymous_user(mock_uuid4, mock_june_analytics):
-    """Should track an event with a random anonymous user ID when the user is anonymous."""
-    user = AnonymousUser()
-    analytics = Analytics()
-    analytics.track(user, event="test_event", foo="foo")
-    mock_june_analytics.track.assert_called_once_with(
-        anonymous_id="test_uuid4", event="test_event", foo="foo"
-    )
-    mock_uuid4.assert_called_once()

src/backend/core/tests/test_models_recording.py

@@ -0,0 +1,212 @@
+"""
+Unit tests for the Recording model
+"""
+
+from django.core.exceptions import ValidationError
+
+import pytest
+
+from core.factories import (
+    RecordingFactory,
+    RoomFactory,
+    UserFactory,
+    UserRecordingAccessFactory,
+)
+from core.models import Recording, RecordingStatusChoices
+
+pytestmark = pytest.mark.django_db
+
+
+def test_models_recording_str():
+    """The str representation should be the recording ID."""
+    recording = RecordingFactory()
+    assert str(recording) == f"Recording {recording.id} (initiated)"
+
+
+def test_models_recording_ordering():
+    """Recordings should be returned ordered by created_at in descending order."""
+    RecordingFactory.create_batch(3)
+    recordings = Recording.objects.all()
+    assert recordings[0].created_at >= recordings[1].created_at
+    assert recordings[1].created_at >= recordings[2].created_at
+
+
+def test_models_recording_room_relationship():
+    """It should maintain proper relationship with room."""
+    room = RoomFactory()
+    recording = RecordingFactory(room=room)
+    assert recording.room == room
+    assert recording in room.recordings.all()
+
+
+def test_models_recording_default_status():
+    """A new recording should have INITIATED status by default."""
+    recording = RecordingFactory()
+    assert recording.status == RecordingStatusChoices.INITIATED
+
+
+def test_models_recording_unique_initiated_or_active_per_room():
+    """Only one initiated or active recording should be allowed per room."""
+    room = RoomFactory()
+    RecordingFactory(room=room, status=RecordingStatusChoices.ACTIVE)
+
+    with pytest.raises(ValidationError):
+        RecordingFactory(room=room, status=RecordingStatusChoices.ACTIVE)
+
+    with pytest.raises(ValidationError):
+        RecordingFactory(room=room, status=RecordingStatusChoices.INITIATED)
+
+
+def test_models_recording_multiple_finished_allowed():
+    """Multiple finished recordings should be allowed in the same room."""
+    room = RoomFactory()
+    RecordingFactory(room=room, status=RecordingStatusChoices.SAVED)
+    RecordingFactory(room=room, status=RecordingStatusChoices.SAVED)
+    assert room.recordings.count() == 2
+
+
+# Test get_abilities method
+
+
+@pytest.mark.parametrize(
+    "role",
+    ["owner", "administrator"],
+)
+def test_models_recording_get_abilities_privileges_active(role):
+    """Test abilities for active recording and privileged user."""
+
+    user = UserFactory()
+    access = UserRecordingAccessFactory(role=role, user=user)
+    access.recording.status = RecordingStatusChoices.ACTIVE
+    abilities = access.recording.get_abilities(user)
+
+    assert abilities == {
+        "destroy": False,  # Not final status
+        "partial_update": False,
+        "retrieve": True,  # Privileged users can always retrieve
+        "stop": True,  # Not final status, so can stop
+        "update": False,
+    }
+
+
+def test_models_recording_get_abilities_member_active():
+    """Test abilities for a user who is unprivileged."""
+
+    user = UserFactory()
+    access = UserRecordingAccessFactory(role="member", user=user)
+    access.recording.status = RecordingStatusChoices.ACTIVE
+    abilities = access.recording.get_abilities(user)
+
+    assert abilities == {
+        "destroy": False,
+        "partial_update": False,
+        "retrieve": False,
+        "stop": False,
+        "update": False,
+    }
+
+
+@pytest.mark.parametrize(
+    "role",
+    ["owner", "administrator"],
+)
+def test_models_recording_get_abilities_privileges_final(role):
+    """Test abilities for active recording and privileged user."""
+
+    user = UserFactory()
+    access = UserRecordingAccessFactory(role=role, user=user)
+    access.recording.status = RecordingStatusChoices.SAVED
+    abilities = access.recording.get_abilities(user)
+
+    assert abilities == {
+        "destroy": True,
+        "partial_update": False,
+        "retrieve": True,  # Privileged users can always retrieve
+        "stop": False,  # In final status, so can not stop
+        "update": False,
+    }
+
+
+def test_models_recording_get_abilities_member_final():
+    """Test abilities for a user who is unprivileged."""
+
+    user = UserFactory()
+    access = UserRecordingAccessFactory(role="member", user=user)
+    access.recording.status = RecordingStatusChoices.SAVED
+    abilities = access.recording.get_abilities(user)
+
+    assert abilities == {
+        "destroy": False,
+        "partial_update": False,
+        "retrieve": False,
+        "stop": False,
+        "update": False,
+    }
+
+
+# Test is_savable method
+
+
+def test_models_recording_is_savable_normal():
+    """Test is_savable for normal recording status."""
+    recording = RecordingFactory(status=RecordingStatusChoices.ACTIVE)
+    assert recording.is_savable() is True
+
+
+@pytest.mark.parametrize(
+    "status",
+    [
+        RecordingStatusChoices.FAILED_TO_STOP,
+        RecordingStatusChoices.FAILED_TO_START,
+        RecordingStatusChoices.ABORTED,
+    ],
+)
+def test_models_recording_is_savable_error(status):
+    """Test is_savable for error status."""
+    recording = RecordingFactory(status=status)
+    assert recording.is_savable() is False
+
+
+def test_models_recording_is_savable_already_saved():
+    """Test is_savable for already saved recording."""
+    recording = RecordingFactory(status=RecordingStatusChoices.SAVED)
+    assert recording.is_savable() is False
+
+
+# Test few corner cases
+
+
+def test_models_recording_worker_id_optional():
+    """Worker ID should be optional."""
+    recording = RecordingFactory(worker_id=None)
+    assert recording.worker_id is None
+
+    recording = RecordingFactory(worker_id="worker-123")
+    assert recording.worker_id == "worker-123"
+
+
+def test_models_recording_invalid_status():
+    """Test that setting an invalid status raises an error."""
+    recording = RecordingFactory()
+    recording.status = "INVALID_STATUS"
+    with pytest.raises(ValidationError):
+        recording.save()
+
+
+def test_models_recording_room_deletion():
+    """Test that deleting a room cascades to its recordings."""
+    room = RoomFactory()
+    recording = RecordingFactory(room=room)
+    room.delete()
+    assert not Recording.objects.filter(id=recording.id).exists()
+
+
+def test_models_recording_worker_id_very_long():
+    """Test worker_id with maximum length."""
+    long_id = "w" * 255
+    recording = RecordingFactory(worker_id=long_id)
+    assert recording.worker_id == long_id
+
+    too_long_id = "w" * 256
+    with pytest.raises(ValidationError):
+        RecordingFactory(worker_id=too_long_id)

src/backend/core/tests/test_models_recording_accesses.py

@@ -0,0 +1,312 @@
+"""
+Unit tests for the RecordingAccess model
+"""
+
+from django.contrib.auth.models import AnonymousUser
+from django.core.exceptions import ValidationError
+
+import pytest
+
+from core import factories
+
+pytestmark = pytest.mark.django_db
+
+
+def test_models_recording_accesses_str():
+    """
+    The str representation should include user email, recording ID and role.
+    """
+    user = factories.UserFactory(email="david.bowman@example.com")
+    access = factories.UserRecordingAccessFactory(
+        role="member",
+        user=user,
+    )
+    assert (
+        str(access)
+        == f"david.bowman@example.com is member in Recording {access.recording.id} (initiated)"
+    )
+
+
+def test_models_recording_accesses_unique_user():
+    """Recording accesses should be unique for a given couple of user and recording."""
+    access = factories.UserRecordingAccessFactory()
+
+    with pytest.raises(
+        ValidationError,
+        match="This user is already in this recording.",
+    ):
+        factories.UserRecordingAccessFactory(
+            user=access.user, recording=access.recording
+        )
+
+
+def test_models_recording_accesses_several_empty_teams():
+    """A recording can have several recording accesses with an empty team."""
+    access = factories.UserRecordingAccessFactory()
+    factories.UserRecordingAccessFactory(recording=access.recording)
+
+
+def test_models_recording_accesses_unique_team():
+    """Recording accesses should be unique for a given couple of team and recording."""
+    access = factories.TeamRecordingAccessFactory()
+
+    with pytest.raises(
+        ValidationError,
+        match="This team is already in this recording.",
+    ):
+        factories.TeamRecordingAccessFactory(
+            team=access.team, recording=access.recording
+        )
+
+
+def test_models_recording_accesses_several_null_users():
+    """A recording can have several recording accesses with a null user."""
+    access = factories.TeamRecordingAccessFactory()
+    factories.TeamRecordingAccessFactory(recording=access.recording)
+
+
+def test_models_recording_accesses_user_and_team_set():
+    """User and team can't both be set on a recording access."""
+    with pytest.raises(
+        ValidationError,
+        match="Either user or team must be set, not both.",
+    ):
+        factories.UserRecordingAccessFactory(team="my-team")
+
+
+def test_models_recording_accesses_user_and_team_empty():
+    """User and team can't both be empty on a recording access."""
+    with pytest.raises(
+        ValidationError,
+        match="Either user or team must be set, not both.",
+    ):
+        factories.UserRecordingAccessFactory(user=None)
+
+
+# get_abilities
+
+
+def test_models_recording_access_get_abilities_anonymous():
+    """Check abilities returned for an anonymous user."""
+    access = factories.UserRecordingAccessFactory()
+    abilities = access.get_abilities(AnonymousUser())
+    assert abilities == {
+        "destroy": False,
+        "retrieve": False,
+        "update": False,
+        "partial_update": False,
+        "set_role_to": [],
+    }
+
+
+def test_models_recording_access_get_abilities_authenticated():
+    """Check abilities returned for an authenticated user."""
+    access = factories.UserRecordingAccessFactory()
+    user = factories.UserFactory()
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": False,
+        "retrieve": False,
+        "update": False,
+        "partial_update": False,
+        "set_role_to": [],
+    }
+
+
+# - for owner
+
+
+def test_models_recording_access_get_abilities_for_owner_of_self_allowed():
+    """
+    Check abilities of self access for the owner of a recording when
+    there is more than one owner left.
+    """
+    access = factories.UserRecordingAccessFactory(role="owner")
+    factories.UserRecordingAccessFactory(recording=access.recording, role="owner")
+    abilities = access.get_abilities(access.user)
+    assert abilities == {
+        "destroy": True,
+        "retrieve": True,
+        "update": True,
+        "partial_update": True,
+        "set_role_to": ["administrator", "member"],
+    }
+
+
+def test_models_recording_access_get_abilities_for_owner_of_self_last():
+    """
+    Check abilities of self access for the owner of a recording when there is only one owner left.
+    """
+    access = factories.UserRecordingAccessFactory(role="owner")
+    abilities = access.get_abilities(access.user)
+    assert abilities == {
+        "destroy": False,
+        "retrieve": True,
+        "update": False,
+        "partial_update": False,
+        "set_role_to": [],
+    }
+
+
+def test_models_recording_access_get_abilities_for_owner_of_owner():
+    """Check abilities of owner access for the owner of a recording."""
+    access = factories.UserRecordingAccessFactory(role="owner")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="owner"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": True,
+        "retrieve": True,
+        "update": True,
+        "partial_update": True,
+        "set_role_to": ["administrator", "member"],
+    }
+
+
+def test_models_recording_access_get_abilities_for_owner_of_administrator():
+    """Check abilities of administrator access for the owner of a recording."""
+    access = factories.UserRecordingAccessFactory(role="administrator")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="owner"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": True,
+        "retrieve": True,
+        "update": True,
+        "partial_update": True,
+        "set_role_to": ["member", "owner"],
+    }
+
+
+def test_models_recording_access_get_abilities_for_owner_of_member():
+    """Check abilities of member access for the owner of a recording."""
+    access = factories.UserRecordingAccessFactory(role="member")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="owner"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": True,
+        "retrieve": True,
+        "update": True,
+        "partial_update": True,
+        "set_role_to": ["administrator", "owner"],
+    }
+
+
+# - for administrator
+
+
+def test_models_recording_access_get_abilities_for_administrator_of_owner():
+    """Check abilities of owner access for the administrator of a recording."""
+    access = factories.UserRecordingAccessFactory(role="owner")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="administrator"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": False,
+        "retrieve": True,
+        "update": False,
+        "partial_update": False,
+        "set_role_to": [],
+    }
+
+
+def test_models_recording_access_get_abilities_for_administrator_of_administrator():
+    """Check abilities of administrator access for the administrator of a recording."""
+    access = factories.UserRecordingAccessFactory(role="administrator")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="administrator"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": True,
+        "retrieve": True,
+        "update": True,
+        "partial_update": True,
+        "set_role_to": ["member"],
+    }
+
+
+def test_models_recording_access_get_abilities_for_administrator_of_member():
+    """Check abilities of member access for the administrator of a recording."""
+    access = factories.UserRecordingAccessFactory(role="member")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="administrator"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": True,
+        "retrieve": True,
+        "update": True,
+        "partial_update": True,
+        "set_role_to": ["administrator"],
+    }
+
+
+# - for member
+
+
+def test_models_recording_access_get_abilities_for_member_of_owner():
+    """Check abilities of owner access for the member of a recording."""
+    access = factories.UserRecordingAccessFactory(role="owner")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="member"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": False,
+        "retrieve": True,
+        "update": False,
+        "partial_update": False,
+        "set_role_to": [],
+    }
+
+
+def test_models_recording_access_get_abilities_for_member_of_administrator():
+    """Check abilities of administrator access for the member of a recording."""
+    access = factories.UserRecordingAccessFactory(role="administrator")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="member"
+    ).user
+    abilities = access.get_abilities(user)
+    assert abilities == {
+        "destroy": False,
+        "retrieve": True,
+        "update": False,
+        "partial_update": False,
+        "set_role_to": [],
+    }
+
+
+def test_models_recording_access_get_abilities_for_member_of_member_user(
+    django_assert_num_queries,
+):
+    """Check abilities of member access for the member of a recording."""
+    access = factories.UserRecordingAccessFactory(role="member")
+    factories.UserRecordingAccessFactory(recording=access.recording)  # another one
+    user = factories.UserRecordingAccessFactory(
+        recording=access.recording, role="member"
+    ).user
+
+    with django_assert_num_queries(1):
+        abilities = access.get_abilities(user)
+
+    assert abilities == {
+        "destroy": False,
+        "retrieve": True,
+        "update": False,
+        "partial_update": False,
+        "set_role_to": [],
+    }

src/backend/core/urls.py

@@ -5,13 +5,14 @@ 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("rooms", viewsets.RoomViewSet, basename="rooms")
+router.register("recordings", viewsets.RecordingViewSet, basename="recordings")
 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/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"
@@ -362,15 +395,12 @@ class Base(Configuration):
         ),
         "url": values.Value(environ_name="LIVEKIT_API_URL", environ_prefix=None),
     }
-    DEFAULT_ROOM_IS_PUBLIC = values.BooleanValue(
-        True, environ_name="DEFAULT_ROOM_IS_PUBLIC", environ_prefix=None
+    RESOURCE_DEFAULT_IS_PUBLIC = values.BooleanValue(
+        True, environ_name="RESOURCE_DEFAULT_IS_PUBLIC", environ_prefix=None
     )
     ALLOW_UNREGISTERED_ROOMS = values.BooleanValue(
         True, environ_name="ALLOW_UNREGISTERED_ROOMS", environ_prefix=None
     )
-    ANALYTICS_KEY = values.Value(
-        None, environ_name="ANALYTICS_KEY", environ_prefix=None
-    )
 
     # pylint: disable=invalid-name
     @property
@@ -491,8 +521,6 @@ class Test(Base):
 
     CELERY_TASK_ALWAYS_EAGER = values.BooleanValue(True)
 
-    ANALYTICS_KEY = None
-
     def __init__(self):
         # pylint: disable=invalid-name
         self.INSTALLED_APPS += ["drf_spectacular_sidecar"]
@@ -535,6 +563,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/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.5"
+version = "0.1.7"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.10",
+    "boto3==1.35.19",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -36,23 +36,22 @@ dependencies = [
     "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.2",
     "PyJWT==2.9.0",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.13.0",
+    "sentry-sdk==2.14.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.27.0",
     "pyfakefs==5.6.0",
     "pylint-django==2.5.5",
     "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.3",
-    "types-requests==2.32.0.20240712",
+    "ruff==0.6.5",
+    "types-requests==2.32.0.20240914",
 ]
 
 [tool.setuptools]

src/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as frontend-deps
+FROM node:20-alpine AS frontend-deps
 
 WORKDIR /home/frontend/
 
@@ -11,11 +11,11 @@ COPY .dockerignore ./.dockerignore
 COPY ./src/frontend/ .
 
 ### ---- Front-end builder image ----
-FROM frontend-deps as meet
+FROM frontend-deps AS meet
 
 WORKDIR /home/frontend
 
-FROM frontend-deps as meet-dev
+FROM frontend-deps AS meet-dev
 
 WORKDIR /home/frontend
 
@@ -25,14 +25,14 @@ CMD [ "npm", "run", "dev"]
 
 # Tilt will rebuild Meet target so, we dissociate meet and meet-builder
 # to avoid rebuilding the app at every changes.
-FROM meet as meet-builder
+FROM meet AS meet-builder
 
 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.5",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,45 +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",
-    "@react-aria/toast": "3.0.0-beta.15",
+    "@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",
+    "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": "1.13.2",
-    "wouter": "3.3.0"
+    "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,16 @@ 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)' },

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

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

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

@@ -1,18 +1,18 @@
 import { useTranslation } from 'react-i18next'
-import { DialogTrigger } 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'
 
@@ -42,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 })}
@@ -57,6 +59,7 @@ export const Home = () => {
                         })
                       )
                     }}
+                    data-attr="create-option-instant"
                   >
                     <RiAddLine size={18} />
                     {t('createMenu.instantOption')}
@@ -69,6 +72,7 @@ export const Home = () => {
                         setLaterRoomId(data.slug)
                       )
                     }}
+                    data-attr="create-option-later"
                   >
                     <RiLink size={18} />
                     {t('createMenu.laterOption')}
@@ -76,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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
+import { Participant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
 import { Div } from '@/primitives'
@@ -34,47 +34,48 @@ export const MainNotificationToast = () => {
   }, [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)
-      }
+    const removeParticipantNotifications = (participant: Participant) => {
+      toastQueue.visibleToasts.forEach((toast) => {
+        if (toast.content.participant === participant) {
+          toastQueue.close(toast.key)
+        }
+      })
     }
-    room.on(RoomEvent.ParticipantDisconnected, removeJoinNotification)
+    room.on(RoomEvent.ParticipantDisconnected, removeParticipantNotifications)
     return () => {
-      room.off(RoomEvent.ParticipantConnected, removeJoinNotification)
+      room.off(
+        RoomEvent.ParticipantDisconnected,
+        removeParticipantNotifications
+      )
     }
   }, [room])
 
-  // fixme - close all related toasters when hands are lowered remotely
   useEffect(() => {
-    const decoder = new TextDecoder()
-
     const handleNotificationReceived = (
-      payload: Uint8Array,
-      participant?: RemoteParticipant
+      prevMetadataStr: string | undefined,
+      participant: Participant
     ) => {
-      if (!participant) {
-        return
-      }
-      if (isMobileBrowser()) {
-        return
-      }
-      const notification = decoder.decode(payload)
+      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 && notification === NotificationType.Lowered) {
+
+      if (existingToast && prevMetadata.raised && !metadata.raised) {
         toastQueue.close(existingToast.key)
         return
       }
-      if (!existingToast && notification === NotificationType.Raised) {
+
+      if (!existingToast && !prevMetadata.raised && metadata.raised) {
         triggerNotificationSound(NotificationType.Raised)
         toastQueue.add(
           {
@@ -86,15 +87,25 @@ export const MainNotificationToast = () => {
       }
     }
 
-    room.on(RoomEvent.DataReceived, handleNotificationReceived)
+    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
 
     return () => {
-      room.off(RoomEvent.DataReceived, handleNotificationReceived)
+      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}>
+    <Div position="absolute" bottom={0} right={5} zIndex={1000}>
       <ToastProvider />
     </Div>
   )

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

@@ -6,7 +6,7 @@ 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'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 
 export function ToastRaised({ state, ...props }: ToastProps) {
   const { t } = useTranslation('notifications')
@@ -17,7 +17,7 @@ export function ToastRaised({ state, ...props }: ToastProps) {
     ref
   )
   const participant = props.toast.content.participant
-  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
+  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
 
   return (
     <StyledToastContainer {...toastProps} ref={ref}>

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

@@ -1,15 +1,10 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import {
-  formatChatMessageLinks,
-  LiveKitRoom,
-  type LocalUserChoices,
-} from '@livekit/components-react'
+import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
 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 +14,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 +27,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 {
@@ -79,25 +78,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.
@@ -120,7 +100,7 @@ export const Conference = ({
           audio={userConfig.audioEnabled}
           video={userConfig.videoEnabled}
         >
-          <VideoConference chatMessageFormatter={formatChatMessageLinks} />
+          <VideoConference />
           {showInviteDialog && (
             <InviteDialog
               isOpen={showInviteDialog}

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

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

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

@@ -16,10 +16,10 @@ 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')}
+          userLabel={t('join.usernameLabel')}
         />
       </CenteredContent>
     </Screen>

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

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

src/frontend/src/features/rooms/livekit/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" overflowY="scroll">
+      {localCameraTrack && isCameraEnabled ? (
+        <video
+          ref={videoRef}
+          width="100%"
+          muted
+          style={{
+            transform: 'rotateY(180deg)',
+            minHeight: '175px',
+            borderRadius: '8px',
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '100%',
+            height: '174px',
+            display: 'flex',
+            backgroundColor: 'black',
+            justifyContent: 'center',
+            flexDirection: 'column',
+          }}
+        >
+          <P
+            style={{
+              color: 'white',
+              textAlign: 'center',
+              textWrap: 'balance',
+              marginBottom: 0,
+            }}
+          >
+            {t('activateCamera')}
+          </P>
+        </div>
+      )}
+      <Div
+        alignItems={'left'}
+        width={'100%'}
+        style={{
+          border: '1px solid #dadce0',
+          borderRadius: '8px',
+          margin: '0 .625rem',
+          padding: '0.5rem 1rem',
+        }}
+      >
+        <H
+          lvl={3}
+          style={{
+            marginBottom: '0.4rem',
+          }}
+        >
+          {t('heading')}
+        </H>
+        {ProcessorWrapper.isSupported ? (
+          <HStack>
+            <ToggleButton
+              size={'sm'}
+              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/SidePanel.tsx

@@ -0,0 +1,131 @@
+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 { useSidePanel } from '../hooks/useSidePanel'
+import { ReactNode } from 'react'
+import { Effects } from './Effects'
+import { Chat } from '../prefabs/Chat'
+
+type StyledSidePanelProps = {
+  title: string
+  children: ReactNode
+  onClose: () => void
+  isClosed: boolean
+  closeButtonTooltip: string
+}
+
+const StyledSidePanel = ({
+  title,
+  children,
+  onClose,
+  isClosed,
+  closeButtonTooltip,
+}: StyledSidePanelProps) => (
+  <Box
+    size="sm"
+    className={css({
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+      margin: '1.5rem 1.5rem 1.5rem 0',
+      padding: 0,
+      gap: 0,
+      right: 0,
+      top: 0,
+      bottom: '80px',
+      width: '360px',
+      position: 'absolute',
+      transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
+    })}
+    style={{
+      transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
+    }}
+  >
+    <Heading
+      slot="title"
+      level={1}
+      className={text({ variant: 'h2' })}
+      style={{
+        paddingLeft: '1.5rem',
+        paddingTop: '1rem',
+        display: isClosed ? 'none' : undefined,
+      }}
+    >
+      {title}
+    </Heading>
+    <Div
+      position="absolute"
+      top="5"
+      right="5"
+      style={{
+        display: isClosed ? 'none' : undefined,
+      }}
+    >
+      <Button
+        invisible
+        size="xs"
+        onPress={onClose}
+        aria-label={closeButtonTooltip}
+        tooltip={closeButtonTooltip}
+      >
+        <RiCloseLine />
+      </Button>
+    </Div>
+    {children}
+  </Box>
+)
+
+type PanelProps = {
+  isOpen: boolean
+  children: React.ReactNode
+}
+
+const Panel = ({ isOpen, children }: PanelProps) => (
+  <div
+    style={{
+      display: isOpen ? 'inherit' : 'none',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flexGrow: 1,
+    }}
+  >
+    {children}
+  </div>
+)
+
+export const SidePanel = () => {
+  const {
+    activePanelId,
+    isParticipantsOpen,
+    isEffectsOpen,
+    isChatOpen,
+    isSidePanelOpen,
+  } = useSidePanel()
+  const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
+
+  return (
+    <StyledSidePanel
+      title={t(`heading.${activePanelId}`)}
+      onClose={() => (layoutStore.activePanelId = null)}
+      closeButtonTooltip={t('closeButton', {
+        content: t(`content.${activePanelId}`),
+      })}
+      isClosed={!isSidePanelOpen}
+    >
+      <Panel isOpen={isParticipantsOpen}>
+        <ParticipantsList />
+      </Panel>
+      <Panel isOpen={isEffectsOpen}>
+        <Effects />
+      </Panel>
+      <Panel isOpen={isChatOpen}>
+        <Chat />
+      </Panel>
+    </StyledSidePanel>
+  )
+}

src/frontend/src/features/rooms/livekit/components/chat/Entry.tsx

@@ -0,0 +1,71 @@
+import type { ReceivedChatMessage } from '@livekit/components-core'
+import * as React from 'react'
+import { css } from '@/styled-system/css'
+import { Text } from '@/primitives'
+import { MessageFormatter } from '@livekit/components-react'
+
+export interface ChatEntryProps extends React.HTMLAttributes<HTMLLIElement> {
+  entry: ReceivedChatMessage
+  hideMetadata?: boolean
+  messageFormatter?: MessageFormatter
+}
+
+export const ChatEntry: (
+  props: ChatEntryProps & React.RefAttributes<HTMLLIElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLLIElement,
+  ChatEntryProps
+>(function ChatEntry(
+  { entry, hideMetadata = false, messageFormatter, ...props }: ChatEntryProps,
+  ref
+) {
+  // Fixme - Livekit messageFormatter strips '\n' char
+  const formattedMessage = React.useMemo(() => {
+    return messageFormatter ? messageFormatter(entry.message) : entry.message
+  }, [entry.message, messageFormatter])
+  const time = new Date(entry.timestamp)
+  const locale = navigator ? navigator.language : 'en-US'
+
+  return (
+    <li
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.25rem',
+      })}
+      ref={ref}
+      title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
+      data-lk-message-origin={entry.from?.isLocal ? 'local' : 'remote'}
+      {...props}
+    >
+      {!hideMetadata && (
+        <span
+          className={css({
+            display: 'flex',
+            gap: '0.5rem',
+            paddingTop: '0.75rem',
+          })}
+        >
+          <Text bold={true} variant="sm">
+            {entry.from?.name ?? entry.from?.identity}
+          </Text>
+          <Text variant="sm" className={css({ color: 'gray.700' })}>
+            {time.toLocaleTimeString(locale, { timeStyle: 'short' })}
+          </Text>
+        </span>
+      )}
+      <Text
+        variant="sm"
+        margin={false}
+        className={css({
+          '& .lk-chat-link': {
+            color: 'blue',
+            textDecoration: 'underline',
+          },
+        })}
+      >
+        {formattedMessage}
+      </Text>
+    </li>
+  )
+})

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -0,0 +1,120 @@
+import { Button } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
+import { RiSendPlane2Fill } from '@remixicon/react'
+import { useState, useEffect } from 'react'
+import { TextArea } from '@/primitives/TextArea'
+import { RefObject } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const MAX_ROWS = 6
+
+interface ChatInputProps {
+  inputRef: RefObject<HTMLTextAreaElement>
+  onSubmit: (text: string) => void
+  isSending: boolean
+}
+
+export const ChatInput = ({
+  inputRef,
+  onSubmit,
+  isSending,
+}: ChatInputProps) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat.input' })
+  const [text, setText] = useState('')
+  const [rows, setRows] = useState(1)
+
+  const handleSubmit = () => {
+    onSubmit(text)
+    setText('')
+  }
+
+  const isDisabled = !text.trim() || isSending
+
+  const submitOnEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey)) return
+    e.preventDefault()
+    if (!isDisabled) handleSubmit()
+  }
+
+  useEffect(() => {
+    const resize = () => {
+      if (!inputRef.current) return
+
+      const textAreaLineHeight = 20 // Adjust this value based on your TextArea's line height
+      const previousRows = inputRef.current.rows
+      inputRef.current.rows = 1
+
+      const currentRows = Math.floor(
+        inputRef.current.scrollHeight / textAreaLineHeight
+      )
+
+      if (currentRows === previousRows) {
+        inputRef.current.rows = currentRows
+      }
+
+      if (currentRows >= MAX_ROWS) {
+        inputRef.current.rows = MAX_ROWS
+        inputRef.current.scrollTop = inputRef.current.scrollHeight
+      }
+
+      if (currentRows < MAX_ROWS) {
+        inputRef.current.style.overflowY = 'hidden'
+      } else {
+        inputRef.current.style.overflowY = 'auto'
+      }
+
+      setRows(currentRows < MAX_ROWS ? currentRows : MAX_ROWS)
+    }
+
+    resize()
+  }, [text, inputRef])
+
+  return (
+    <HStack
+      style={{
+        margin: '0.75rem 0 1.5rem',
+        padding: '0.5rem',
+        backgroundColor: '#f3f4f6',
+        borderRadius: 4,
+      }}
+    >
+      <TextArea
+        ref={inputRef}
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          submitOnEnter(e)
+        }}
+        onKeyUp={(e) => e.stopPropagation()}
+        placeholder={t('textArea.placeholder')}
+        value={text}
+        onChange={(e) => {
+          setText(e.target.value)
+        }}
+        rows={rows || 1}
+        style={{
+          border: 'none',
+          resize: 'none',
+          height: 'auto',
+          minHeight: `34px`,
+          lineHeight: 1.25,
+          padding: '7px 10px',
+          overflowY: 'hidden',
+        }}
+        placeholderStyle={'strong'}
+        spellCheck={false}
+        maxLength={500}
+        aria-label={t('textArea.label')}
+      />
+      <Button
+        square
+        invisible
+        size="sm"
+        onPress={handleSubmit}
+        isDisabled={isDisabled}
+        aria-label={t('button.label')}
+      >
+        <RiSendPlane2Fill />
+      </Button>
+    </HStack>
+  )
+}

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

@@ -1,13 +1,17 @@
 import { useTranslation } from 'react-i18next'
 import { RiChat1Line } from '@remixicon/react'
-import { ToggleButton } from '@/primitives'
+import { useSnapshot } from 'valtio'
 import { css } from '@/styled-system/css'
-import { useWidgetInteraction } from '../../hooks/useWidgetInteraction'
+import { ToggleButton } from '@/primitives'
+import { chatStore } from '@/stores/chat'
+import { useSidePanel } from '../../hooks/useSidePanel'
 
 export const ChatToggle = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.chat' })
 
-  const { isChatOpen, unreadMessages, toggleChat } = useWidgetInteraction()
+  const chatSnap = useSnapshot(chatStore)
+
+  const { isChatOpen, toggleChat } = useSidePanel()
   const tooltipLabel = isChatOpen ? 'open' : 'closed'
 
   return (
@@ -20,14 +24,15 @@ export const ChatToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(`controls.chat.${tooltipLabel}`)}
-        tooltip={t(`controls.chat.${tooltipLabel}`)}
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
         onPress={() => toggleChat()}
+        data-attr={`controls-chat-${tooltipLabel}`}
       >
         <RiChat1Line />
       </ToggleButton>
-      {!!unreadMessages && (
+      {!!chatSnap.unreadMessages && (
         <div
           className={css({
             position: 'absolute',

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

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

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 {
-  RiFeedbackLine,
-  RiQuestionLine,
+  RiAccountBoxLine,
+  RiMegaphoneLine,
   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 { useSidePanel } from '../../../hooks/useSidePanel'
 
 // @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 } = useSidePanel()
   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 })}
+        >
+          <RiMegaphoneLine 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

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

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

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

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

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

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

@@ -1,28 +1,21 @@
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 
-import { Heading } from 'react-aria-components'
-import { Box, Button, Div, H } from '@/primitives'
-import { text } from '@/primitives/Text'
-import { RiCloseLine } from '@remixicon/react'
-import { participantsStore } from '@/stores/participants'
+import { 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 { ParticipantsCollapsableList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList'
-import { HandRaisedListItem } from '@/features/rooms/livekit/components/controls/Participants/HandRaisedListItem'
-import { LowerAllHandsButton } from '@/features/rooms/livekit/components/controls/Participants/LowerAllHandsButton'
+import { ParticipantListItem } from '../../controls/Participants/ParticipantListItem'
+import { ParticipantsCollapsableList } from '../../controls/Participants/ParticipantsCollapsableList'
+import { HandRaisedListItem } from '../../controls/Participants/HandRaisedListItem'
+import { LowerAllHandsButton } from '../../controls/Participants/LowerAllHandsButton'
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
-  const { t } = useTranslation('rooms')
+  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,
-  })
+  const participants = useParticipants()
 
   const sortedRemoteParticipants = participants
     .slice(1)
@@ -44,75 +37,40 @@ export const ParticipantsList = () => {
 
   // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
   return (
-    <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',
-        }}
+    <Div overflowY="scroll">
+      <H
+        lvl={2}
+        className={css({
+          fontSize: '0.875rem',
+          fontWeight: 'bold',
+          color: '#5f6368',
+          padding: '0 1.5rem',
+          marginBottom: '0.83em',
+        })}
       >
-        {t('participants.heading')}
-      </Heading>
-      <Div position="absolute" top="5" right="5">
-        <Button
-          invisible
-          size="xs"
-          onPress={() => (participantsStore.showParticipants = false)}
-          aria-label={t('participants.closeButton')}
-          tooltip={t('participants.closeButton')}
-        >
-          <RiCloseLine />
-        </Button>
-      </Div>
-      <Div overflowY="scroll">
-        <H
-          lvl={2}
-          className={css({
-            fontSize: '0.875rem',
-            fontWeight: 'bold',
-            color: '#5f6368',
-            padding: '0 1.5rem',
-            marginBottom: '0.83em',
-          })}
-        >
-          {t('participants.subheading').toUpperCase()}
-        </H>
-        {raisedHandParticipants.length > 0 && (
-          <Div marginBottom=".9375rem">
-            <ParticipantsCollapsableList
-              heading={t('participants.raisedHands')}
-              participants={raisedHandParticipants}
-              renderParticipant={(participant) => (
-                <HandRaisedListItem participant={participant} />
-              )}
-              action={() => (
-                <LowerAllHandsButton participants={raisedHandParticipants} />
-              )}
-            />
-          </Div>
+        {t('subheading').toUpperCase()}
+      </H>
+      {raisedHandParticipants.length > 0 && (
+        <Div marginBottom=".9375rem">
+          <ParticipantsCollapsableList
+            heading={t('raisedHands')}
+            participants={raisedHandParticipants}
+            renderParticipant={(participant) => (
+              <HandRaisedListItem participant={participant} />
+            )}
+            action={() => (
+              <LowerAllHandsButton participants={raisedHandParticipants} />
+            )}
+          />
+        </Div>
+      )}
+      <ParticipantsCollapsableList
+        heading={t('contributors')}
+        participants={sortedParticipants}
+        renderParticipant={(participant) => (
+          <ParticipantListItem participant={participant} />
         )}
-        <ParticipantsCollapsableList
-          heading={t('participants.contributors')}
-          participants={sortedParticipants}
-          renderParticipant={(participant) => (
-            <ParticipantListItem participant={participant} />
-          )}
-        />
-      </Div>
-    </Box>
+      />
+    </Div>
   )
 }

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

@@ -3,10 +3,10 @@ import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
-import { useWidgetInteraction } from '../../../hooks/useWidgetInteraction'
+import { useSidePanel } from '../../../hooks/useSidePanel'
 
 export const ParticipantsToggle = () => {
-  const { t } = useTranslation('rooms')
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.participants' })
 
   /**
    * Context could not be used due to inconsistent refresh behavior.
@@ -16,7 +16,7 @@ export const ParticipantsToggle = () => {
   const participants = useParticipants()
   const numParticipants = participants?.length
 
-  const { isParticipantsOpen, toggleParticipants } = useWidgetInteraction()
+  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
 
   const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
 
@@ -30,10 +30,11 @@ export const ParticipantsToggle = () => {
       <ToggleButton
         square
         legacyStyle
-        aria-label={t(`controls.participants.${tooltipLabel}`)}
-        tooltip={t(`controls.participants.${tooltipLabel}`)}
+        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.ts

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

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

@@ -0,0 +1,41 @@
+import { useSnapshot } from 'valtio'
+import { layoutStore } from '@/stores/layout'
+
+export enum PanelId {
+  PARTICIPANTS = 'participants',
+  EFFECTS = 'effects',
+  CHAT = 'chat',
+}
+
+export const useSidePanel = () => {
+  const layoutSnap = useSnapshot(layoutStore)
+  const activePanelId = layoutSnap.activePanelId
+
+  const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
+  const isEffectsOpen = activePanelId == PanelId.EFFECTS
+  const isChatOpen = activePanelId == PanelId.CHAT
+  const isSidePanelOpen = !!activePanelId
+
+  const toggleParticipants = () => {
+    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
+  }
+
+  const toggleChat = () => {
+    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
+  }
+
+  const toggleEffects = () => {
+    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
+  }
+
+  return {
+    activePanelId,
+    toggleParticipants,
+    toggleChat,
+    toggleEffects,
+    isChatOpen,
+    isParticipantsOpen,
+    isEffectsOpen,
+    isSidePanelOpen,
+  }
+}

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

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

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

@@ -0,0 +1,134 @@
+import type { ChatMessage, ChatOptions } from '@livekit/components-core'
+import * as React from 'react'
+import {
+  formatChatMessageLinks,
+  useChat,
+  useParticipants,
+} from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { chatStore } from '@/stores/chat'
+import { Div, Text } from '@/primitives'
+import { ChatInput } from '../components/chat/Input'
+import { ChatEntry } from '../components/chat/Entry'
+import { useSidePanel } from '../hooks/useSidePanel'
+
+export interface ChatProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    ChatOptions {}
+
+/**
+ * The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants
+ * in the room. Only users who are in the room at the time of dispatch will receive the message.
+ */
+export function Chat({ ...props }: ChatProps) {
+  const { t } = useTranslation('rooms', { keyPrefix: 'chat' })
+
+  const inputRef = React.useRef<HTMLTextAreaElement>(null)
+  const ulRef = React.useRef<HTMLUListElement>(null)
+
+  const { send, chatMessages, isSending } = useChat()
+
+  const { isChatOpen } = useSidePanel()
+  const chatSnap = useSnapshot(chatStore)
+
+  // Use useParticipants hook to trigger a re-render when the participant list changes.
+  const participants = useParticipants()
+
+  const lastReadMsgAt = React.useRef<ChatMessage['timestamp']>(0)
+
+  async function handleSubmit(text: string) {
+    if (!send || !text) return
+    await send(text)
+    inputRef?.current?.focus()
+  }
+
+  React.useEffect(() => {
+    if (chatMessages.length > 0 && ulRef.current) {
+      ulRef.current?.scrollTo({ top: ulRef.current.scrollHeight })
+    }
+  }, [ulRef, chatMessages])
+
+  React.useEffect(() => {
+    if (chatMessages.length === 0) {
+      return
+    }
+    if (
+      isChatOpen &&
+      lastReadMsgAt.current !== chatMessages[chatMessages.length - 1]?.timestamp
+    ) {
+      lastReadMsgAt.current = chatMessages[chatMessages.length - 1]?.timestamp
+      chatStore.unreadMessages = 0
+      return
+    }
+
+    const unreadMessageCount = chatMessages.filter(
+      (msg) => !lastReadMsgAt.current || msg.timestamp > lastReadMsgAt.current
+    ).length
+
+    if (
+      unreadMessageCount > 0 &&
+      chatSnap.unreadMessages !== unreadMessageCount
+    ) {
+      chatStore.unreadMessages = unreadMessageCount
+    }
+  }, [chatMessages, chatSnap.unreadMessages, isChatOpen])
+
+  const renderedMessages = React.useMemo(() => {
+    return chatMessages.map((msg, idx, allMsg) => {
+      const hideMetadata =
+        idx >= 1 &&
+        msg.timestamp - allMsg[idx - 1].timestamp < 60_000 &&
+        allMsg[idx - 1].from === msg.from
+
+      return (
+        <ChatEntry
+          key={msg.id ?? idx}
+          hideMetadata={hideMetadata}
+          entry={msg}
+          messageFormatter={formatChatMessageLinks}
+        />
+      )
+    })
+    // This ensures that the chat message list is updated to reflect any changes in participant information.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatMessages, participants])
+
+  return (
+    <Div
+      display={'flex'}
+      padding={'0 1.5rem'}
+      flexGrow={1}
+      flexDirection={'column'}
+      minHeight={0}
+      {...props}
+    >
+      <Text
+        variant="sm"
+        style={{
+          padding: '0.75rem',
+          backgroundColor: '#f3f4f6',
+          borderRadius: 4,
+          marginBottom: '0.75rem',
+        }}
+      >
+        {t('disclaimer')}
+      </Text>
+      <Div
+        flexGrow={1}
+        flexDirection={'column'}
+        minHeight={0}
+        overflowY="scroll"
+      >
+        <ul className="lk-list lk-chat-messages" ref={ulRef}>
+          {renderedMessages}
+        </ul>
+      </Div>
+      <ChatInput
+        inputRef={inputRef}
+        onSubmit={(e) => handleSubmit(e)}
+        isSending={isSending}
+      />
+    </Div>
+  )
+}

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

@@ -4,22 +4,20 @@ import * as React from 'react'
 import { supportsScreenSharing } from '@livekit/components-core'
 
 import {
-  DisconnectButton,
-  LeaveIcon,
-  MediaDeviceMenu,
-  TrackToggle,
   useMaybeLayoutContext,
   usePersistentUserChoices,
 } from '@livekit/components-react'
 
-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 { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
+import { ParticipantsToggle } from '../components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '../components/controls/ChatToggle'
+import { HandToggle } from '../components/controls/HandToggle'
+import { SelectToggleDevice } from '../components/controls/SelectToggleDevice'
+import { LeaveButton } from '../components/controls/LeaveButton'
+import { ScreenShareToggle } from '../components/controls/ScreenShareToggle'
+import { css } from '@/styled-system/css'
 
 /** @public */
 export type ControlBarControls = {
@@ -38,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
    */
@@ -65,9 +63,7 @@ export function ControlBar({
   variation,
   saveUserChoices = true,
   onDeviceError,
-  ...props
 }: ControlBarProps) {
-  const { t } = useTranslation('rooms')
   const [isChatOpen, setIsChatOpen] = React.useState(false)
   const layoutContext = useMaybeLayoutContext()
   React.useEffect(() => {
@@ -83,28 +79,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 {
     saveAudioInputEnabled,
     saveVideoInputEnabled,
@@ -125,73 +101,55 @@ 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>
+    <div
+      className={css({
+        display: 'flex',
+        gap: '.5rem',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '.75rem',
+        borderTop: '1px solid var(--lk-border-color)',
+        maxHeight: 'var(--lk-control-bar-height)',
+        height: '80px',
+        position: 'absolute',
+        backgroundColor: '#d1d5db',
+        bottom: 0,
+        left: 0,
+        right: 0,
+      })}
+    >
+      <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

@@ -1,9 +1,4 @@
-import type {
-  MessageDecoder,
-  MessageEncoder,
-  TrackReferenceOrPlaceholder,
-  WidgetState,
-} from '@livekit/components-core'
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
 import {
   isEqualTrackRef,
   isTrackReference,
@@ -20,22 +15,19 @@ import {
   GridLayout,
   LayoutContextProvider,
   RoomAudioRenderer,
-  MessageFormatter,
   usePinnedTracks,
   useTracks,
   useCreateLayoutContext,
-  Chat,
 } from '@livekit/components-react'
 
 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 { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
 import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
-import { MainNotificationToast } from '@/features/notifications/MainNotificationToast'
+import { SidePanel } from '../components/SidePanel'
+import { useSidePanel } from '../hooks/useSidePanel'
 
 const LayoutWrapper = styled(
   'div',
@@ -44,7 +36,7 @@ const LayoutWrapper = styled(
       position: 'relative',
       display: 'flex',
       width: '100%',
-      height: 'calc(100% - var(--lk-control-bar-height))',
+      height: '100%',
     },
   })
 )
@@ -54,9 +46,6 @@ const LayoutWrapper = styled(
  */
 export interface VideoConferenceProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  chatMessageFormatter?: MessageFormatter
-  chatMessageEncoder?: MessageEncoder
-  chatMessageDecoder?: MessageDecoder
   /** @alpha */
   SettingsComponent?: React.ComponentType
 }
@@ -79,17 +68,7 @@ export interface VideoConferenceProps
  * ```
  * @public
  */
-export function VideoConference({
-  chatMessageFormatter,
-  chatMessageDecoder,
-  chatMessageEncoder,
-  ...props
-}: VideoConferenceProps) {
-  const [widgetState, setWidgetState] = React.useState<WidgetState>({
-    showChat: false,
-    unreadMessages: 0,
-    showSettings: false,
-  })
+export function VideoConference({ ...props }: VideoConferenceProps) {
   const lastAutoFocusedScreenShareTrack =
     React.useRef<TrackReferenceOrPlaceholder | null>(null)
 
@@ -101,11 +80,6 @@ export function VideoConference({
     { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
   )
 
-  const widgetUpdate = (state: WidgetState) => {
-    log.debug('updating widget state', state)
-    setWidgetState(state)
-  }
-
   const layoutContext = useCreateLayoutContext()
 
   const screenShareTracks = tracks
@@ -172,8 +146,7 @@ export function VideoConference({
   ])
   /* eslint-enable react-hooks/exhaustive-deps */
 
-  const participantsSnap = useSnapshot(participantsStore)
-  const showParticipants = participantsSnap.showParticipants
+  const { isSidePanelOpen } = useSidePanel()
 
   return (
     <div className="lk-video-conference" {...props}>
@@ -181,9 +154,17 @@ export function VideoConference({
         <LayoutContextProvider
           value={layoutContext}
           // onPinChange={handleFocusStateChange}
-          onWidgetChange={widgetUpdate}
         >
-          <div className="lk-video-conference-inner">
+          <div
+            // todo - extract these magic values into constant
+            style={{
+              position: 'absolute',
+              inset: isSidePanelOpen
+                ? 'var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px'
+                : 'var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))',
+              transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
+            }}
+          >
             <LayoutWrapper>
               <div
                 style={{ display: 'flex', position: 'relative', width: '100%' }}
@@ -193,7 +174,7 @@ export function VideoConference({
                     className="lk-grid-layout-wrapper"
                     style={{ height: 'auto' }}
                   >
-                    <GridLayout tracks={tracks}>
+                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
                       <ParticipantTile />
                     </GridLayout>
                   </div>
@@ -202,7 +183,7 @@ export function VideoConference({
                     className="lk-focus-layout-wrapper"
                     style={{ height: 'auto' }}
                   >
-                    <FocusLayoutContainer>
+                    <FocusLayoutContainer style={{ padding: 0 }}>
                       <CarouselLayout
                         tracks={carouselTracks}
                         style={{
@@ -215,18 +196,12 @@ export function VideoConference({
                     </FocusLayoutContainer>
                   </div>
                 )}
-                <MainNotificationToast />
               </div>
-              <Chat
-                style={{ display: widgetState.showChat ? 'grid' : 'none' }}
-                messageFormatter={chatMessageFormatter}
-                messageEncoder={chatMessageEncoder}
-                messageDecoder={chatMessageDecoder}
-              />
-              {showParticipants && <ParticipantsList />}
             </LayoutWrapper>
-            <ControlBar />
+            <MainNotificationToast />
           </div>
+          <ControlBar />
+          <SidePanel />
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />

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/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/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()
                     }
                   }}

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

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

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

@@ -4,11 +4,26 @@
     "heading": ""
   },
   "join": {
-    "camlabel": "",
+    "videoinput": {
+      "choose": "",
+      "disable": "",
+      "enable": "",
+      "label": "",
+      "placeholder": ""
+    },
+    "audioinput": {
+      "choose": "",
+      "disable": "",
+      "enable": "",
+      "label": ""
+    },
     "heading": "",
     "joinLabel": "",
-    "micLabel": "",
-    "userLabel": ""
+    "joinMeeting": "",
+    "toggleOff": "",
+    "toggleOn": "",
+    "usernameHint": "",
+    "usernameLabel": ""
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
@@ -31,12 +46,25 @@
     "stopScreenShare": "",
     "chat": {
       "open": "",
-      "closed": ""
+      "closed": "",
+      "input": {
+        "textArea": {
+          "label": "",
+          "placeholder": ""
+        },
+        "button": {
+          "label": ""
+        }
+      }
     },
     "hand": {
       "raise": "",
       "lower": ""
     },
+    "screenShare": {
+      "start": "",
+      "stop": ""
+    },
     "leave": "",
     "participants": {
       "open": "",
@@ -49,13 +77,40 @@
       "feedbacks": "",
       "support": "",
       "settings": "",
-      "username": ""
+      "username": "",
+      "effects": ""
     }
   },
-  "participants": {
+  "effects": {
+    "activateCamera": "",
+    "notAvailable": "",
     "heading": "",
+    "blur": {
+      "light": "",
+      "normal": "",
+      "apply": "",
+      "clear": ""
+    },
+    "experimental": ""
+  },
+  "sidePanel": {
+    "heading": {
+      "participants": "",
+      "effects": "",
+      "chat": ""
+    },
+    "content": {
+      "participants": "",
+      "effects": "",
+      "chat": ""
+    },
+    "closeButton": ""
+  },
+  "chat": {
+    "disclaimer": ""
+  },
+  "participants": {
     "subheading": "",
-    "closeButton": "",
     "contributors": "",
     "collapsable": {
       "open": "",

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

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

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

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

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

@@ -1,14 +1,29 @@
 {
   "feedback": {
     "body": "Please fill out the form available in the header to give us your precious feedback! Thanks.",
-    "heading": "Help us improve Meet"
+    "heading": "Help us improve Visio"
   },
   "join": {
-    "camlabel": "Camera",
-    "heading": "Join the meeting",
+    "videoinput": {
+      "choose": "Select camera",
+      "disable": "Disable camera",
+      "enable": "Enable camera",
+      "label": "Camera",
+      "placeholder": "Enable camera to see the preview"
+    },
+    "audioinput": {
+      "choose": "Select microphone",
+      "disable": "Disable microphone",
+      "enable": "Enable microphone",
+      "label": "Microphone"
+    },
+    "heading": "Verify your settings",
     "joinLabel": "Join",
-    "micLabel": "Microphone",
-    "userLabel": "Your name"
+    "joinMeeting": "Join meeting",
+    "toggleOff": "Click to turn off",
+    "toggleOn": "Click to turn on",
+    "usernameHint": "Shown to other participants",
+    "usernameLabel": "Your name"
   },
   "leaveRoomPrompt": "This will make you leave the meeting.",
   "shareDialog": {
@@ -27,16 +42,27 @@
   "controls": {
     "microphone": "Microphone",
     "camera": "Camera",
-    "shareScreen": "Share screen",
-    "stopScreenShare": "Stop screen share",
     "chat": {
       "open": "Close the chat",
-      "closed": "Open the chat"
+      "closed": "Open the chat",
+      "input": {
+        "textArea": {
+          "label": "Enter a message",
+          "placeholder": "Enter a message"
+        },
+        "button": {
+          "label": "Send message"
+        }
+      }
     },
     "hand": {
       "raise": "Raise hand",
       "lower": "Lower hand"
     },
+    "screenShare": {
+      "start": "Share screen",
+      "stop": "Stop screen share"
+    },
     "leave": "Leave",
     "participants": {
       "open": "Hide everyone",
@@ -49,13 +75,40 @@
       "feedbacks": "Give us feedbacks",
       "support": "Get Help on Tchap",
       "settings": "Settings",
-      "username": "Update Your Name"
+      "username": "Update Your Name",
+      "effects": "Apply effects"
     }
   },
+  "effects": {
+    "activateCamera": "Your camera is disabled. Choose an option to enable it.",
+    "notAvailable": "The blur effect will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome :(",
+    "heading": "Blur",
+    "blur": {
+      "light": "Light blur",
+      "normal": "Blur",
+      "apply": "Enable blur",
+      "clear": "Disable blur"
+    },
+    "experimental": "Experimental feature. A v2 is coming for full browser support and improved quality."
+  },
+  "sidePanel": {
+    "heading": {
+      "participants": "Participants",
+      "effects": "Effects",
+      "chat": "Messages in the chat"
+    },
+    "content": {
+      "participants": "participants",
+      "effects": "effects",
+      "chat": "messages"
+    },
+    "closeButton": "Hide {{content}}"
+  },
+  "chat": {
+    "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call."
+  },
   "participants": {
-    "heading": "Participants",
     "subheading": "In room",
-    "closeButton": "Hide participants",
     "you": "You",
     "contributors": "Contributors",
     "collapsable": {

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

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

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

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

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

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

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

@@ -1,14 +1,29 @@
 {
   "feedback": {
     "body": "Remplissez le formulaire disponible dans l'entête du site pour nous donner votre avis sur l'outil. Vos retours sont précieux ! Merci.",
-    "heading": "Aidez-nous à améliorer Meet"
+    "heading": "Aidez-nous à améliorer Visio"
   },
   "join": {
-    "camlabel": "Webcam",
-    "heading": "Rejoindre la réunion",
+    "videoinput": {
+      "choose": "Choisir la webcam",
+      "disable": "Désactiver la webcam",
+      "enable": "Activer la webcam",
+      "label": "Webcam",
+      "placeholder": "Activez la webcam pour prévisualiser l'affichage"
+    },
+    "audioinput": {
+      "choose": "Choisir le micro",
+      "disable": "Désactiver le micro",
+      "enable": "Activer le micro",
+      "label": "Microphone"
+    },
+    "heading": "Vérifiez vos paramètres",
     "joinLabel": "Rejoindre",
-    "micLabel": "Micro",
-    "userLabel": "Votre nom"
+    "joinMeeting": "Rejoindre la réjoindre",
+    "toggleOff": "Cliquez pour désactiver",
+    "toggleOn": "Cliquez pour activer",
+    "usernameHint": "Affiché aux autres participants",
+    "usernameLabel": "Votre nom"
   },
   "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
   "shareDialog": {
@@ -27,16 +42,27 @@
   "controls": {
     "microphone": "Microphone",
     "camera": "Camera",
-    "shareScreen": "Partager l'écran",
-    "stopScreenShare": "Arrêter le partage",
     "chat": {
       "open": "Masquer le chat",
-      "closed": "Afficher le chat"
+      "closed": "Afficher le chat",
+      "input": {
+        "textArea": {
+          "label": "Ecrire un message",
+          "placeholder": "Ecrire un message"
+        },
+        "button": {
+          "label": "Envoyer un message"
+        }
+      }
     },
     "hand": {
       "raise": "Lever la main",
       "lower": "Baisser la main"
     },
+    "screenShare": {
+      "start": "Partager l'écran",
+      "stop": "Arrêter le partage"
+    },
     "leave": "Quitter",
     "participants": {
       "open": "Masquer les participants",
@@ -49,13 +75,40 @@
       "feedbacks": "Partager votre avis",
       "support": "Obtenir de l'aide sur Tchap",
       "settings": "Paramètres",
-      "username": "Choisir votre nom"
+      "username": "Choisir votre nom",
+      "effects": "Appliquer des effets"
     }
   },
+  "effects": {
+    "activateCamera": "Votre camera est désactivée. Choisissez une option pour l'activer.",
+    "notAvailable": "L'effet de flou sera bientôt disponible sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome :(",
+    "heading": "Flou",
+    "blur": {
+      "light": "Léger flou",
+      "normal": "Flou",
+      "apply": "Appliquer le flou",
+      "clear": "Désactiver le flou"
+    },
+    "experimental": "Fonctionnalité expérimentale. Une v2 arrive pour un support complet sur tous les navigateurs et une meilleur qualité."
+  },
+  "sidePanel": {
+    "heading": {
+      "participants": "Participants",
+      "effects": "Effets",
+      "chat": "Messages dans l'appel"
+    },
+    "content": {
+      "participants": "les participants",
+      "effects": "les effets",
+      "chat": "les messages"
+    },
+    "closeButton": "Masquer {{content}}"
+  },
+  "chat": {
+    "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel."
+  },
   "participants": {
-    "heading": "Participants",
     "subheading": "Dans la réunion",
-    "closeButton": "Masquer les participants",
     "you": "Vous",
     "contributors": "Contributeurs",
     "collapsable": {

src/frontend/src/primitives/Button.tsx

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

src/frontend/src/primitives/Checkbox.tsx

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

src/frontend/src/primitives/LinkButton.tsx

@@ -0,0 +1,22 @@
+import { Link, LinkProps } from 'react-aria-components'
+import { type RecipeVariantProps } from '@/styled-system/css'
+import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
+import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
+
+type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
+  LinkProps &
+  TooltipWrapperProps
+
+export const LinkButton = ({
+  tooltip,
+  tooltipType = 'instant',
+  ...props
+}: LinkButtonProps) => {
+  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+
+  return (
+    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+      <Link className={buttonRecipe(variantProps)} {...componentProps} />
+    </TooltipWrapper>
+  )
+}