wip unit test parser classes

sorry for this absurd commit, mybad quentin … I'll rework my commits' history before merging.

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

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,25 @@ class RoomAdmin(admin.ModelAdmin):
     """Room admin interface declaration."""
 
     inlines = (ResourceAccessInline,)
+
+
+@admin.register(models.Recording)
+class RecordingAdmin(admin.ModelAdmin):
+    """Recording admin interface declaration."""
+
+    list_display = ("id", "status", "room", "created_at", "worker_id")
+    list_select_related = ("creator",)
+    readonly_fields = (
+        "id",
+        "created_at",
+        "updated_at",
+        "worker_id",
+        "room",
+        "creator",
+        "mode",
+    )
+
+    fieldsets = (
+        (None, {"fields": ("status", "room", "creator", "worker_id", "mode")}),
+        ("Timestamps", {"fields": ("created_at", "updated_at")}),
+    )

src/backend/core/api/permissions.py

@@ -1,5 +1,7 @@
 """Permission handlers for the Meet core app."""
 
+from django.conf import settings
+
 from rest_framework import permissions
 
 from ..models import RoleChoices
@@ -65,6 +67,21 @@ class RoomPermissions(permissions.BasePermission):
         return obj.is_administrator(user)
 
 
+class IsRoomOwnerOrAdministrator(permissions.BasePermission):
+    """Temporary"""
+
+    message = "You must be an admin or owner to start a recording."
+
+    def has_permission(self, request, view):
+        # Get the room object
+        room = view.get_object()
+
+        if not room.is_owner(request.user) and not room.is_administrator(request.user):
+            return False
+
+        return True
+
+
 class ResourceAccessPermission(permissions.BasePermission):
     """
     Permissions for a room that can only be updated by room administrators.
@@ -83,3 +100,23 @@ class ResourceAccessPermission(permissions.BasePermission):
             return obj.user == user
 
         return obj.resource.is_administrator(user)
+
+
+class IsRecordingEnabled(permissions.BasePermission):
+    """Check if the recording feature is enabled."""
+
+    message = "Access denied, recording is disabled."
+
+    def has_permission(self, request, view):
+        """Determine if access is allowed based on settings."""
+        return settings.RECORDING_ENABLE
+
+
+class IsStorageEventEnabled(permissions.BasePermission):
+    """Check if the storage event feature is enabled."""
+
+    message = "Access denied, storage event is disabled."
+
+    def has_permission(self, request, view):
+        """Determine if access is allowed based on settings."""
+        return settings.RECORDING_STORAGE_EVENT_ENABLE

src/backend/core/api/viewsets.py

@@ -1,6 +1,7 @@
 """API endpoints"""
 
 import uuid
+from logging import getLogger
 
 from django.conf import settings
 from django.db.models import Q
@@ -14,17 +15,38 @@ from rest_framework import (
     pagination,
     viewsets,
 )
+from rest_framework import (
+    exceptions as drf_exceptions,
+)
 from rest_framework import (
     response as drf_response,
 )
+from rest_framework import (
+    status as drf_status,
+)
 
 from core import models, utils
+from core.recording.event import (
+    InvalidBucketError,
+    InvalidFileTypeError,
+    ParsingEventDataError,
+    StorageEventAuthentication,
+    get_parser,
+)
+from core.recording.worker import (
+    RecordingStartError,
+    RecordingStopError,
+    WorkerServiceMediator,
+    worker_service_provider,
+)
 
 from ..analytics import analytics
 from . import permissions, serializers
 
 # pylint: disable=too-many-ancestors
 
+logger = getLogger(__name__)
+
 
 class NestedGenericViewSet(viewsets.GenericViewSet):
     """
@@ -186,13 +208,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
@@ -209,10 +224,96 @@ class RoomViewSet(
                 },
             }
         else:
+            analytics.track(
+                user=self.request.user,
+                event="Get Room",
+                properties={"slug": instance.slug},
+            )
             data = self.get_serializer(instance).data
 
         return drf_response.Response(data)
 
+    @decorators.action(
+        detail=True,
+        methods=["post"],
+        url_path="start-recording",
+        permission_classes=[
+            permissions.IsRoomOwnerOrAdministrator,
+            permissions.IsRecordingEnabled,
+        ],
+    )
+    def start_room_recording(self, request, pk=None):  # pylint: disable=unused-argument
+        """Start recording a room."""
+
+        room = self.get_object()
+        mode = request.data.get("mode")
+
+        if mode is None:
+            return drf_response.Response(
+                {"error": "Recording mode is required."},
+                status=drf_status.HTTP_400_BAD_REQUEST,
+            )
+
+        # May raise exception if an active or initiated recording already exist for the room
+        recording = models.Recording.objects.create(
+            creator=request.user, room=room, mode=mode
+        )
+
+        worker_service = worker_service_provider.create(mode=recording.mode)
+        worker_manager = WorkerServiceMediator(worker_service=worker_service)
+
+        try:
+            worker_manager.start(recording)
+        except RecordingStartError:
+            return drf_response.Response(
+                {"error": f"Recording failed to start for room {room.slug}"},
+                status=drf_status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
+
+        return drf_response.Response(
+            {"message": f"Recording successfully started for room {room.slug}"},
+            status=drf_status.HTTP_201_CREATED,
+        )
+
+    @decorators.action(
+        detail=True,
+        methods=["post"],
+        url_path="stop-recording",
+        permission_classes=[
+            permissions.IsRoomOwnerOrAdministrator,
+            permissions.IsRecordingEnabled,
+        ],
+    )
+    def stop_room_recording(self, request, pk=None):  # pylint: disable=unused-argument
+        """Stop room recording."""
+
+        room = self.get_object()
+
+        # fixme - do I need to be the creator of the recording to stop it?
+        try:
+            recording = models.Recording.objects.get(
+                room=room, status=models.RecordingStatusChoices.ACTIVE
+            )
+        except models.Recording.DoesNotExist as e:
+            raise drf_exceptions.NotFound(
+                "No active recording found for this room."
+            ) from e
+
+        worker_service = worker_service_provider.create(mode=recording.mode)
+        worker_manager = WorkerServiceMediator(worker_service=worker_service)
+
+        try:
+            worker_manager.stop(recording)
+        except RecordingStopError:
+            return drf_response.Response(
+                {"error": f"Recording failed to stop for room {room.slug}"},
+                status=drf_status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
+
+        return drf_response.Response(
+            {"message": f"Recording stopped for room {room.slug}."}
+        )
+
     def list(self, request, *args, **kwargs):
         """Limit listed rooms to the ones related to the authenticated user."""
         user = self.request.user
@@ -293,3 +394,55 @@ class ResourceAccessViewSet(
     permission_classes = [permissions.ResourceAccessPermission]
     queryset = models.ResourceAccess.objects.all()
     serializer_class = serializers.ResourceAccessSerializer
+
+
+class RecordingViewSet(viewsets.GenericViewSet, mixins.ListModelMixin):
+    """
+    API endpoints to access and perform actions on recording.
+    """
+
+    @decorators.action(
+        detail=False,
+        methods=["post"],
+        url_path="storage-hook",
+        authentication_classes=[StorageEventAuthentication],
+        permission_classes=[permissions.IsStorageEventEnabled],
+    )
+    def on_storage_event_received(self, request, pk=None):  # pylint: disable=unused-argument
+        """Handle incoming storage hook events for recordings."""
+
+        parser = get_parser()
+
+        try:
+            recording_id = parser.get_recording_id(request.data)
+
+        except ParsingEventDataError as e:
+            raise drf_exceptions.PermissionDenied(f"Invalid request data: {e}") from e
+
+        except InvalidBucketError as e:
+            raise drf_exceptions.PermissionDenied("Invalid bucket specified") from e
+
+        except InvalidFileTypeError as e:
+            return drf_response.Response(
+                {"message": f"Ignore this file type, {e}"},
+            )
+
+        try:
+            recording = models.Recording.objects.get(id=recording_id)
+        except models.Recording.DoesNotExist as e:
+            raise drf_exceptions.NotFound("No recording found for this event.") from e
+
+        if not recording.is_savable():
+            raise drf_exceptions.PermissionDenied(
+                f"Recording with ID {recording_id} cannot be saved because it is either,"
+                f"in an error state or has already been saved."
+            )
+
+        recording.status = models.RecordingStatusChoices.SAVED
+        recording.save()
+
+        # todo - trigger post-processing
+
+        return drf_response.Response(
+            {"message": "Event processed."},
+        )

src/backend/core/factories.py

@@ -65,3 +65,18 @@ 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
+
+    creator = factory.SubFactory(UserFactory)
+    room = factory.SubFactory(RoomFactory)
+    status = models.RecordingStatusChoices.INITIATED
+    mode = factory.fuzzy.FuzzyChoice(
+        [choice[0] for choice in models.RecordingModeChoices.choices]
+    )
+    worker_id = None

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

@@ -0,0 +1,41 @@
+# Generated by Django 5.1.1 on 2024-10-24 18:51
+
+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.AlterField(
+            model_name='user',
+            name='language',
+            field=models.CharField(choices="(('en-us', 'English'), ('fr-fr', 'French'))", default='en-us', help_text='The language in which the user wants to see the interface.', max_length=10, verbose_name='language'),
+        ),
+        migrations.CreateModel(
+            name='Recording',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, help_text='primary key for the record as UUID', primary_key=True, serialize=False, verbose_name='id')),
+                ('created_at', models.DateTimeField(auto_now_add=True, help_text='date and time at which a record was created', verbose_name='created on')),
+                ('updated_at', models.DateTimeField(auto_now=True, help_text='date and time at which a record was last updated', verbose_name='updated on')),
+                ('status', models.CharField(choices=[('active', 'Active'), ('stopped', 'Stopped'), ('aborted', 'Aborted'), ('saved', 'Saved'), ('failed_to_start', 'Failed to Start'), ('failed_to_stop', 'Failed to Stop')], default='active', max_length=20)),
+                ('mode', models.CharField(choices=[('screen_recording', 'SCREEN_RECORDING'), ('transcript', 'TRANSCRIPT')], default='screen_recording', help_text='Defines the type of recording being performed.', max_length=20, verbose_name='Recording mode')),
+                ('worker_id', models.CharField(blank=True, help_text='Enter an identifier for the worker recording. This ID is retained even whenthe worker stops, allowing for easy tracking and management of recorded data.', max_length=255, null=True, verbose_name='Worker ID')),
+                ('creator', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='recordings', to=settings.AUTH_USER_MODEL, verbose_name='Creator')),
+                ('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',),
+                'constraints': [models.UniqueConstraint(condition=models.Q(('status', 'active')), fields=('room',), name='unique_active_recording_per_room')],
+            },
+        ),
+    ]

src/backend/core/migrations/0006_remove_recording_unique_active_recording_per_room_and_more.py

@@ -0,0 +1,36 @@
+# Generated by Django 5.1.1 on 2024-10-31 21:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0005_alter_user_language_recording'),
+    ]
+
+    operations = [
+        migrations.RemoveConstraint(
+            model_name='recording',
+            name='unique_active_recording_per_room',
+        ),
+        migrations.AlterField(
+            model_name='recording',
+            name='mode',
+            field=models.CharField(choices=[('screen_recording', 'SCREEN_RECORDING'), ('transcript', 'TRANSCRIPT')], help_text='Defines the kind of worker being called.', max_length=20, verbose_name='Worker kind'),
+        ),
+        migrations.AlterField(
+            model_name='recording',
+            name='status',
+            field=models.CharField(choices=[('active', 'Active'), ('initiated', 'Initiated'), ('stopped', 'Stopped'), ('aborted', 'Aborted'), ('saved', 'Saved'), ('failed_to_start', 'Failed to Start'), ('failed_to_stop', 'Failed to Stop')], default='initiated', max_length=20),
+        ),
+        migrations.AlterField(
+            model_name='user',
+            name='language',
+            field=models.CharField(choices="(('en-us', 'English'), ('fr-fr', 'French'))", default='en-us', help_text='The language in which the user wants to see the interface.', max_length=10, verbose_name='language'),
+        ),
+        migrations.AddConstraint(
+            model_name='recording',
+            constraint=models.UniqueConstraint(condition=models.Q(('status', 'active'), ('status', 'initiated'), _connector='OR'), fields=('room',), name='unique_initiated_or_active_recording_per_room'),
+        ),
+    ]

src/backend/core/models.py

@@ -38,6 +38,41 @@ class RoleChoices(models.TextChoices):
         return role == cls.OWNER
 
 
+class RecordingStatusChoices(models.TextChoices):
+    """Recording status choices."""
+
+    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_status(cls, status):
+        """Check if the status is a final status."""
+        return status in [
+            cls.STOPPED,
+            cls.SAVED,
+            cls.ABORTED,
+            cls.FAILED_TO_START,
+            cls.FAILED_TO_STOP,
+        ]
+
+    @classmethod
+    def is_error_status(cls, status):
+        """Check if the status is an error status."""
+        return status in [cls.ABORTED, cls.FAILED_TO_START, cls.FAILED_TO_STOP]
+
+
+class RecordingModeChoices(models.TextChoices):
+    """Recording mode choices."""
+
+    SCREEN_RECORDING = "screen_recording", _("SCREEN_RECORDING")
+    TRANSCRIPT = "transcript", _("TRANSCRIPT")
+
+
 class BaseModel(models.Model):
     """
     Serves as an abstract base model for other models, ensuring that records are validated
@@ -325,3 +360,83 @@ class Room(Resource):
         else:
             raise ValidationError({"name": f'Room name "{self.name:s}" is reserved.'})
         super().clean_fields(exclude=exclude)
+
+
+# todo - discuss how the path could changed, and we could loose track of file
+# todo - discuss having constraint to avoid transitioning from a final status to another
+# todo - discuss persisting extra metadata on the event sent by the storage
+# todo - discuss inheriting from ResourceAccess model
+class Recording(BaseModel):
+    """Model for recordings that take place in a room"""
+
+    creator = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE,
+        related_name="recordings",
+        verbose_name=_("Creator"),
+    )
+    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,
+    )
+    mode = models.CharField(
+        max_length=20,
+        choices=RecordingModeChoices.choices,
+        verbose_name=_("Worker kind"),
+        help_text=_("Defines the kind of worker being called."),
+    )
+    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 and management of recorded data."
+        ),
+    )
+
+    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=RecordingStatusChoices.ACTIVE)
+                | models.Q(status=RecordingStatusChoices.INITIATED),
+                name="unique_initiated_or_active_recording_per_room",
+            )
+        ]
+
+    def __str__(self):
+        return str(self.id)
+
+    def get_abilities(self, user):
+        """Compute and return abilities for a given user on the recording."""
+        is_creator = user == self.creator
+        is_final_status = RecordingStatusChoices.is_final_status(self.status)
+
+        return {
+            "destroy": is_creator and is_final_status,
+            "partial_update": False,
+            "retrieve": is_creator,
+            "stop": is_creator 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_in_error = RecordingStatusChoices.is_error_status(self.status)
+        is_already_saved = self.status == RecordingStatusChoices.SAVED
+
+        return not is_in_error and not is_already_saved

src/backend/core/recording/event/__init__.py

@@ -0,0 +1,5 @@
+"""Meet event parser classes and exceptions."""
+
+from .authentication import *
+from .exceptions import *
+from .parsers import *

src/backend/core/recording/event/authentication.py

@@ -0,0 +1,65 @@
+"""Authentication class for storage event token validation."""
+
+import logging
+import secrets
+
+from django.conf import settings
+from django.utils.translation import gettext_lazy as _
+
+from rest_framework.authentication import BaseAuthentication
+from rest_framework.exceptions import AuthenticationFailed
+
+logger = logging.getLogger(__name__)
+
+
+class StorageEventAuthentication(BaseAuthentication):
+    """Authenticate requests using a Bearer token for storage event integration.
+
+    This class validates Bearer tokens for storage events that don't map to database users.
+    It's designed for S3-compatible storage integrations and similar use cases.
+
+    Events are submitted when a webhook is configured on some bucket's events.
+    """
+
+    AUTH_HEADER = "Authorization"
+    TOKEN_TYPE = "Bearer"  # noqa S105
+
+    def authenticate(self, request):
+        """Validate the Bearer token from the Authorization header."""
+
+        required_token = settings.RECORDING_STORAGE_EVENT_TOKEN
+        if not required_token:
+            return None
+
+        auth_header = request.headers.get(self.AUTH_HEADER)
+
+        if not auth_header:
+            logger.warning(
+                "Authentication failed: Missing Authorization header (ip: %s)",
+                request.META.get("REMOTE_ADDR"),
+            )
+            raise AuthenticationFailed(_("Authorization header is required"))
+
+        auth_parts = auth_header.split(" ")
+        if len(auth_parts) != 2 or auth_parts[0] != self.TOKEN_TYPE:
+            logger.warning(
+                "Authentication failed: Invalid authorization header (ip: %s)",
+                request.META.get("REMOTE_ADDR"),
+            )
+            raise AuthenticationFailed(_("Invalid authorization header."))
+
+        token = auth_parts[1]
+
+        # Use constant-time comparison to prevent timing attacks
+        if not secrets.compare_digest(token.encode(), required_token.encode()):
+            logger.warning(
+                "Authentication failed: Invalid token (ip: %s)",
+                request.META.get("REMOTE_ADDR"),
+            )
+            raise AuthenticationFailed(_("Invalid token"))
+
+        return None
+
+    def authenticate_header(self, request):
+        """Return the WWW-Authenticate header value."""
+        return f"{self.TOKEN_TYPE} realm='Storage event API'"

src/backend/core/recording/event/exceptions.py

@@ -0,0 +1,17 @@
+"""Storage parsers specific exceptions."""
+
+
+class ParsingEventDataError(Exception):
+    """Raised when the request data is malformed, incomplete, or missing."""
+
+
+class InvalidBucketError(Exception):
+    """Raised when the bucket name in the request does not match the expected one."""
+
+
+class InvalidFileTypeError(Exception):
+    """Raised when the file type in the request is not supported."""
+
+
+class InvalidFilepathError(Exception):
+    """Raised when the filepath in the request is invalid."""

src/backend/core/recording/event/parsers.py

@@ -0,0 +1,149 @@
+"""Meet storage event parser classes."""
+
+import logging
+import re
+from dataclasses import dataclass
+from functools import lru_cache
+from typing import Any, Dict, Optional, Protocol
+
+from django.conf import settings
+from django.utils.module_loading import import_string
+
+from .exceptions import (
+    InvalidBucketError,
+    InvalidFilepathError,
+    InvalidFileTypeError,
+    ParsingEventDataError,
+)
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class StorageEvent:
+    """Represents a storage event with relevant metadata.
+
+    Attributes:
+        filepath: Identifier for the affected recording
+        filetype: Type of storage event
+        bucket_name: When the event occurred
+        metadata: Additional event data
+    """
+
+    filepath: str
+    filetype: str
+    bucket_name: str
+    metadata: Optional[Dict[str, Any]]
+
+    def __post_init__(self):
+        if self.filepath is None:
+            raise TypeError("filepath cannot be None")
+        if self.filetype is None:
+            raise TypeError("filetype cannot be None")
+        if self.bucket_name is None:
+            raise TypeError("bucket_name cannot be None")
+
+
+class EventParser(Protocol):
+    """Interface for parsing storage events."""
+
+    def __init__(self, bucket_name, allowed_filetypes=None):
+        """Initialize parser with bucket name and optional allowed filetypes."""
+
+    def parse(self, data: Dict) -> StorageEvent:
+        """Extract storage event data from raw dictionary input."""
+
+    def validate(self, data: StorageEvent) -> None:
+        """Verify storage event data meets all requirements."""
+
+    def get_recording_id(self, data: Dict) -> str:
+        """Extract recording ID from event dictionary."""
+
+
+@lru_cache(maxsize=1)
+def get_parser() -> EventParser:
+    """Return cached instance of configured event parser.
+
+    Uses function memoization instead of a factory class since the only
+    varying parameter is the parser class from settings. A factory class
+    would add unnecessary complexity when a cached function provides the
+    same singleton behavior with simpler code.
+    """
+
+    event_parser_cls = import_string(settings.RECORDING_EVENT_PARSER_CLASS)
+    return event_parser_cls(bucket_name=settings.AWS_STORAGE_BUCKET_NAME)
+
+
+class MinioParser:
+    """Handle parsing and validation of Minio storage events."""
+
+    def __init__(self, bucket_name: str, allowed_filetypes=None):
+        """Initialize parser with target bucket name and accepted filetypes."""
+
+        if not bucket_name:
+            raise ValueError("Bucket name cannot be None or empty")
+
+        self._bucket_name = bucket_name
+        self._allowed_filetypes = allowed_filetypes or {"audio/ogg", "video/mp4"}
+
+        # pylint: disable=line-too-long
+        self._filepath_regex = re.compile(
+            r"(?P<url_encoded_folder_path>(?:[^%]+%2F)*)?(?P<recording_id>[0-9a-fA-F\-]{36})\.(?P<extension>[a-zA-Z0-9]+)"
+        )
+
+    @staticmethod
+    def parse(data):
+        """Convert raw Minio event dictionary to StorageEvent object."""
+
+        if not data:
+            raise ParsingEventDataError("Received empty data.")
+
+        try:
+            record = data["Records"][0]
+            s3 = record["s3"]
+            bucket_name = s3["bucket"]["name"]
+            file_object = s3["object"]
+            filepath = file_object["key"]
+            filetype = file_object["contentType"]
+        except (KeyError, IndexError) as e:
+            raise ParsingEventDataError(f"Missing or malformed key: {e}.") from e
+        try:
+            return StorageEvent(
+                filepath=filepath,
+                filetype=filetype,
+                bucket_name=bucket_name,
+                metadata=None,
+            )
+        except TypeError as e:
+            raise ParsingEventDataError(f"Missing essential data fields: {e}") from e
+
+    def validate(self, event_data: StorageEvent) -> str:
+        """Verify StorageEvent matches bucket, filetype and filepath requirements."""
+
+        if event_data.bucket_name != self._bucket_name:
+            raise InvalidBucketError(
+                f"Invalid bucket: expected {self._bucket_name}, got {event_data.bucket_name}"
+            )
+
+        if not event_data.filetype in self._allowed_filetypes:
+            raise InvalidFileTypeError(
+                f"Invalid file type, expected {self._allowed_filetypes},"
+                f"got '{event_data.filetype}'"
+            )
+
+        match = self._filepath_regex.match(event_data.filepath)
+        if not match:
+            raise InvalidFilepathError(
+                f"Invalid filepath structure: {event_data.filepath}"
+            )
+
+        recording_id = match.group("recording_id")
+        return recording_id
+
+    def get_recording_id(self, data):
+        """Extract recording ID from Minio event through parsing and validation."""
+
+        event_data = self.parse(data)
+        recording_id = self.validate(event_data)
+
+        return recording_id

src/backend/core/recording/worker/__init__.py

@@ -0,0 +1,13 @@
+"""Meet worker services classes and exceptions."""
+
+from .exceptions import *
+from .factories import WorkerServiceFactory
+from .mediator import WorkerServiceMediator
+from .services import AudioCompositeEgressService, VideoCompositeEgressService
+
+# Expose the worker service factory instance at the module level.
+# This provides a centralized access point and abstracts away the service creation
+# details from the code using the services.
+worker_service_provider = WorkerServiceFactory()
+worker_service_provider.register("transcript", AudioCompositeEgressService)
+worker_service_provider.register("screen_recording", VideoCompositeEgressService)

src/backend/core/recording/worker/exceptions.py

@@ -0,0 +1,21 @@
+"""Recording and worker services specific exceptions."""
+
+
+class WorkerRequestError(Exception):
+    """Raised when there is an issue with the worker request"""
+
+
+class WorkerConnectionError(Exception):
+    """Raised when there is an issue connecting to the worker."""
+
+
+class WorkerResponseError(Exception):
+    """Raised when the worker's response is not as expected."""
+
+
+class RecordingStartError(Exception):
+    """Raised when there is an error starting the recording."""
+
+
+class RecordingStopError(Exception):
+    """Raised when there is an error stopping the recording."""

src/backend/core/recording/worker/factories.py

@@ -0,0 +1,90 @@
+"""Factory, configurations and Protocol to create worker services"""
+
+import logging
+from dataclasses import dataclass
+from functools import lru_cache
+from typing import Any, ClassVar, Dict, Optional, Protocol
+
+from django.conf import settings
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass(frozen=True)
+class WorkerServiceConfig:
+    """Declare Worker Service common configurations"""
+
+    output_folder: str
+    server_configurations: Dict[str, Any]
+    verify_ssl: Optional[bool]
+    bucket_args: Optional[dict]
+
+    @classmethod
+    @lru_cache
+    def from_settings(cls) -> "WorkerServiceConfig":
+        """Load configuration from Django settings with caching for efficiency."""
+
+        logger.debug("Loading WorkerServiceConfig from settings.")
+        return cls(
+            output_folder=settings.RECORDING_OUTPUT_FOLDER,
+            server_configurations=settings.LIVEKIT_CONFIGURATION,
+            verify_ssl=settings.RECORDING_VERIFY_SSL,
+            bucket_args={
+                "endpoint": settings.AWS_S3_ENDPOINT_URL,
+                "access_key": settings.AWS_S3_ACCESS_KEY_ID,
+                "secret": settings.AWS_S3_SECRET_ACCESS_KEY,
+                "region": settings.AWS_S3_REGION_NAME,
+                "bucket": settings.AWS_STORAGE_BUCKET_NAME,
+                "force_path_style": True,
+            },
+        )
+
+
+class WorkerService(Protocol):
+    """Define the interface for interacting with a worker service."""
+
+    hrid: ClassVar[str]
+
+    def __init__(self, config: WorkerServiceConfig):
+        """Initialize the service with the given configuration."""
+
+    def start(self, room_id: str, recording_id: str) -> str:
+        """Start a recording for a specified room."""
+
+    def stop(self, worker_id: str) -> str:
+        """Stop recording for a specified worker."""
+
+
+class WorkerServiceFactory:
+    """Factory to instantiate worker services based on a specified mode
+
+    This factory currently uses a common configuration (`_default_config`) to initialize all
+    workers. In the future, if workers require different configurations, consider refactoring
+    to a builder pattern. With a builder pattern, specific builders could be registered per
+    WorkerService type, allowing each builder to handle instantiation of the worker with its
+    unique configuration requirements.
+    """
+
+    def __init__(self):
+        """Initialize the WorkerServiceFactory with a default configuration and worker registry."""
+
+        self._worker_service_registry = {}
+        self._default_config = WorkerServiceConfig.from_settings()
+
+    def register(self, mode, worker_service: WorkerService):
+        """Register a worker service for a specific mode."""
+
+        if mode in self._worker_service_registry:
+            raise KeyError(f"Worker service for mode '{mode}' is already registered.")
+
+        self._worker_service_registry[mode] = worker_service
+
+    def create(self, mode: str) -> WorkerService:
+        """Instantiate a worker service for the specified mode."""
+
+        worker_service_cls = self._worker_service_registry.get(mode)
+
+        if not worker_service_cls:
+            raise ValueError(f"Unknown worker service for mode: {mode}.")
+
+        return worker_service_cls(config=self._default_config)

src/backend/core/recording/worker/mediator.py

@@ -0,0 +1,102 @@
+"""Mediator between the worker service and recording instances in the Django ORM."""
+
+import logging
+
+from core.models import Recording, RecordingStatusChoices
+
+from .exceptions import (
+    RecordingStartError,
+    RecordingStopError,
+    WorkerConnectionError,
+    WorkerRequestError,
+    WorkerResponseError,
+)
+from .factories import WorkerService
+
+logger = logging.getLogger(__name__)
+
+
+class WorkerServiceMediator:
+    """Mediate interactions between a worker service and a recording instance.
+
+    This class avoids direct coupling between the worker service and the Django ORM.
+    It is responsible for updating the recording instance based on the worker service's
+    status and responses. It also encapsulates worker-related errors into more
+    user-friendly higher-level exceptions.
+
+    This class follows the Mediator design pattern to centralize and coordinate
+    the communication between the worker service and the recording instances. It's not only
+    a facade for the worker service, because it adds functionalities to the worker service.
+    """
+
+    def __init__(self, worker_service: WorkerService):
+        """Initialize the WorkerServiceMediator with the provided worker service."""
+
+        self._worker_service = worker_service
+
+    def start(self, recording: Recording):
+        """Start the recording process using the worker service.
+
+        Args:
+            recording (Recording): The recording instance to start.
+
+        Raises:
+            RecordingStartError: If there is an error starting the recording.
+        """
+
+        # FIXME - no manipulations of room_name should be required
+        room_name = f"{recording.room.id!s}".replace("-", "")
+
+        if recording.status != RecordingStatusChoices.INITIATED:
+            logger.error("Cannot start recording in %s status.", recording.status)
+            raise RecordingStartError()
+
+        try:
+            worker_id = self._worker_service.start(room_name, recording.id)
+        except (WorkerRequestError, WorkerConnectionError, WorkerResponseError) as e:
+            logger.exception(
+                "Failed to start recording for room %s: %s", recording.room.slug, e
+            )
+            recording.status = RecordingStatusChoices.FAILED_TO_START
+            raise RecordingStartError() from e
+        else:
+            recording.worker_id = worker_id
+            recording.status = RecordingStatusChoices.ACTIVE
+        finally:
+            recording.save()
+
+        logger.info(
+            "Worker started for room %s (worker ID: %s, mode: %s)",
+            recording.room,
+            recording.worker_id,
+            recording.mode,
+        )
+
+    def stop(self, recording: Recording):
+        """Stop the recording process using the worker service.
+
+        Args:
+            recording (Recording): The recording instance to stop.
+
+        Raises:
+            RecordingStopError: If there is an error stopping the recording.
+        """
+
+        if recording.status != RecordingStatusChoices.ACTIVE:
+            logger.error("Cannot stop recording in %s status.", recording.status)
+            raise RecordingStopError()
+
+        try:
+            response = self._worker_service.stop(worker_id=recording.worker_id)
+        except (WorkerConnectionError, WorkerResponseError) as e:
+            logger.exception(
+                "Failed to stop recording for room %s: %s", recording.room.slug, e
+            )
+            recording.status = RecordingStatusChoices.FAILED_TO_STOP
+            raise RecordingStopError() from e
+        else:
+            recording.status = RecordingStatusChoices[response]
+        finally:
+            recording.save()
+
+        logger.info("Worker stopped for room %s", recording.room)

src/backend/core/recording/worker/services.py

@@ -0,0 +1,141 @@
+"""Worker services in charge of recording a room."""
+
+# pylint: disable=no-member
+
+import aiohttp
+from asgiref.sync import async_to_sync
+from livekit import api as livekit_api
+from livekit.api.egress_service import EgressService
+
+from .exceptions import WorkerConnectionError, WorkerResponseError
+from .factories import WorkerServiceConfig
+
+
+class BaseEgressService:
+    """Base egress defining common method to manage and interact with LiveKit egress processes."""
+
+    def __init__(self, config: WorkerServiceConfig):
+        self._config = config
+        self._s3 = livekit_api.S3Upload(**config.bucket_args)
+
+    def _get_filepath(self, filename, extension):
+        """Construct the file path for a given filename and extension.
+        Unsecure method, doesn't handle paths robustly and securely.
+        """
+        return f"{self._config.output_folder}/{filename}.{extension}"
+
+    @async_to_sync
+    async def _handle_request(self, request, method_name: str):
+        """Handle making a request to the LiveKit API and returns the response."""
+
+        # Use HTTP connector for local development with Tilt,
+        # where cluster communications are unsecure
+        connector = aiohttp.TCPConnector(ssl=self._config.verify_ssl)
+
+        async with aiohttp.ClientSession(connector=connector) as session:
+            client = EgressService(session, **self._config.server_configurations)
+            method = getattr(client, method_name)
+            try:
+                response = await method(request)
+            except livekit_api.TwirpError as e:
+                raise WorkerConnectionError(
+                    f"LiveKit client connection error, {e.message}."
+                ) from e
+
+            return response
+
+    def stop(self, worker_id):
+        """Stop an ongoing egress worker.
+
+        The StopEgressRequest is shared among all types of egress,
+        so a single implementation in the base class should be sufficient.
+        """
+
+        request = livekit_api.StopEgressRequest(
+            egress_id=worker_id,
+        )
+
+        response = self._handle_request(request, "stop_egress")
+
+        if not response.status:
+            raise WorkerResponseError(
+                "LiveKit response is missing the recording status."
+            )
+
+        # To avoid exposing EgressStatus values and coupling with LiveKit outside of this class,
+        # the response status is mapped to simpler "ABORTED", "STOPPED" or "FAILED_TO_STOP" strings.
+        if response.status == livekit_api.EgressStatus.EGRESS_ABORTED:
+            return "ABORTED"
+
+        # todo - verify if it's functional
+        if response.status == livekit_api.EgressStatus.EGRESS_ENDING:
+            return "STOPPED"
+
+        return "FAILED_TO_STOP"
+
+    def start(self, room_name, recording_id):
+        """Start the egress process for a recording (not implemented in the base class).
+
+        Each derived class must implement this method, providing the necessary parameters for
+        its specific egress type (e.g. audio_only, streaming output).
+        """
+        raise NotImplementedError("Subclass must implement this method.")
+
+
+class VideoCompositeEgressService(BaseEgressService):
+    """Record multiple participant video and audio tracks into a single output '.mp4' file."""
+
+    hrid = "video-recording-composite-livekit-egress"
+
+    def start(self, room_name, recording_id):
+        """Start the video composite egress process for a recording."""
+
+        file_type = livekit_api.EncodedFileType.MP4
+        filepath = self._get_filepath(filename=recording_id, extension="mp4")
+
+        file_output = livekit_api.EncodedFileOutput(
+            file_type=file_type,
+            filepath=filepath,
+            s3=self._s3,
+        )
+
+        request = livekit_api.RoomCompositeEgressRequest(
+            room_name=room_name,
+            file_outputs=[file_output],
+        )
+
+        response = self._handle_request(request, "start_room_composite_egress")
+
+        if not response.egress_id:
+            raise WorkerResponseError("Egress ID not found in the response.")
+
+        return response.egress_id
+
+
+class AudioCompositeEgressService(BaseEgressService):
+    """Record multiple participant audio tracks into a single output '.ogg' file."""
+
+    hrid = "audio-recording-composite-livekit-egress"
+
+    def start(self, room_name, recording_id):
+        """Start the audio composite egress process for a recording."""
+
+        file_type = livekit_api.EncodedFileType.OGG
+        filepath = self._get_filepath(filename=recording_id, extension="ogg")
+
+        file_output = livekit_api.EncodedFileOutput(
+            file_type=file_type,
+            filepath=filepath,
+            s3=self._s3,
+        )
+
+        request = livekit_api.RoomCompositeEgressRequest(
+            room_name=room_name, file_outputs=[file_output], audio_only=True
+        )
+
+        response = self._handle_request(request, "start_room_composite_egress")
+
+        if not response.egress_id:
+            raise WorkerResponseError("Egress ID not found in the response.")
+
+        return response.egress_id

src/backend/core/tests/recording/event/test_authentication.py

@@ -0,0 +1,107 @@
+"""
+Test event authentication.
+"""
+
+# pylint: disable=E1128
+
+from django.test import RequestFactory, override_settings
+
+import pytest
+from rest_framework.exceptions import AuthenticationFailed
+
+from core.recording.event.authentication import (
+    StorageEventAuthentication,
+)
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN="valid-test-token")
+def test_successful_authentication():
+    """Test successful authentication with valid token."""
+
+    request = RequestFactory().get("/")
+    request.headers = {"Authorization": "Bearer valid-test-token"}
+
+    result = StorageEventAuthentication().authenticate(request)
+    assert (
+        result is None
+    )  # Authentication successful but returns None as per implementation
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN=None)
+@pytest.mark.parametrize("add_header", [True, False])
+def test_disabled_authentication(add_header):
+    """Test behavior when token is not configured in settings."""
+    # mock_settings.RECORDING_STORAGE_EVENT_TOKEN = ''
+    request = RequestFactory().get("/")
+    if add_header:
+        request.headers = {"Authorization": "Bearer some-token"}
+
+    result = StorageEventAuthentication().authenticate(request)
+    assert result is None
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN="valid-test-token")
+def test_missing_auth_header():
+    """Test failure when Authorization header is missing."""
+    request = RequestFactory().get("/")
+    request.headers = {}
+
+    with pytest.raises(AuthenticationFailed, match="Authorization header is required"):
+        StorageEventAuthentication().authenticate(request)
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN="valid-test-token")
+def test_invalid_auth_header_format():
+    """Test failure when Authorization header has invalid format."""
+    request = RequestFactory().get("/")
+    request.headers = {"Authorization": "InvalidFormat"}
+
+    with pytest.raises(AuthenticationFailed, match="Invalid authorization header"):
+        StorageEventAuthentication().authenticate(request)
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN="valid-test-token")
+def test_invalid_token_type():
+    """Test failure when token type is not Bearer."""
+    request = RequestFactory().get("/")
+    request.headers = {"Authorization": "Basic some-token"}
+
+    with pytest.raises(AuthenticationFailed, match="Invalid authorization header"):
+        StorageEventAuthentication().authenticate(request)
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN="valid-test-token")
+def test_invalid_token():
+    """Test failure when token is invalid."""
+    request = RequestFactory().get("/")
+    request.headers = {"Authorization": "Bearer wrong-token"}
+
+    with pytest.raises(AuthenticationFailed, match="Invalid token"):
+        StorageEventAuthentication().authenticate(request)
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN="valid-test-token")
+def test_malformed_auth_header():
+    """Test failure when Authorization header is malformed."""
+    request = RequestFactory().get("/")
+    request.headers = {"Authorization": "Bearer"}  # Missing token part
+
+    with pytest.raises(AuthenticationFailed, match="Invalid authorization header"):
+        StorageEventAuthentication().authenticate(request)
+
+
+def test_authenticate_header():
+    """Test the WWW-Authenticate header value."""
+    request = RequestFactory().get("/")
+    header = StorageEventAuthentication().authenticate_header(request)
+    assert header == "Bearer realm='Storage event API'"
+
+
+@override_settings(RECORDING_STORAGE_EVENT_TOKEN="valid-test-token")
+def test_multiple_spaces_in_auth_header():
+    """Test failure when Authorization header contains multiple spaces."""
+    request = RequestFactory().get("/")
+    request.headers = {"Authorization": "Bearer   extra-spaces-token"}
+
+    with pytest.raises(AuthenticationFailed, match="Invalid authorization header"):
+        StorageEventAuthentication().authenticate(request)

src/backend/core/tests/recording/event/test_parsers.py

@@ -0,0 +1,308 @@
+"""
+Test event parsers.
+"""
+
+# pylint: disable=W0212,W0621,W0613
+
+from unittest import mock
+
+from django.conf import settings
+from django.test import override_settings
+
+import pytest
+
+from core.recording.event.exceptions import (
+    InvalidBucketError,
+    InvalidFilepathError,
+    InvalidFileTypeError,
+    ParsingEventDataError,
+)
+from core.recording.event.parsers import (
+    MinioParser,
+    StorageEvent,
+    get_parser,
+)
+
+
+@pytest.fixture
+def valid_minio_event():
+    """Mock a valid Minio event."""
+    return {
+        "Records": [
+            {
+                "s3": {
+                    "bucket": {"name": "test-bucket"},
+                    "object": {
+                        "key": "recording%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg",
+                        "contentType": "audio/ogg",
+                    },
+                }
+            }
+        ]
+    }
+
+
+@pytest.fixture
+def minio_parser():
+    """Mock a Minio parser."""
+    return MinioParser(bucket_name="test-bucket")
+
+
+def test_parse_valid_event(minio_parser, valid_minio_event):
+    """Test parsing a valid Minio event."""
+    event = minio_parser.parse(valid_minio_event)
+    assert isinstance(event, StorageEvent)
+    assert event.filepath == "recording%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg"
+    assert event.filetype == "audio/ogg"
+    assert event.bucket_name == "test-bucket"
+    assert event.metadata is None
+
+
+def test_parse_empty_data(minio_parser):
+    """Test parsing empty event data raises error."""
+    with pytest.raises(ParsingEventDataError, match="Received empty data."):
+        minio_parser.parse({})
+
+
+def test_parse_missing_keys(minio_parser):
+    """Test parsing event with missing key."""
+
+    invalid_minio_event = {
+        "Records": [
+            {
+                "s3": {
+                    "bucket": {"name": None},
+                    # Missing 'object' key
+                }
+            }
+        ]
+    }
+
+    with pytest.raises(ParsingEventDataError, match="Missing or malformed key"):
+        minio_parser.parse(invalid_minio_event)
+
+
+def test_parse_none_key(minio_parser):
+    """Test parsing event with None field."""
+
+    invalid_minio_event = {
+        "Records": [
+            {
+                "s3": {
+                    "bucket": {"name": "test-bucket"},
+                    "object": {
+                        "key": "recording%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg",
+                        "contentType": None,  # 'contentType' should not be None
+                    },
+                }
+            }
+        ]
+    }
+
+    with pytest.raises(ParsingEventDataError, match="Missing essential data fields"):
+        minio_parser.parse(invalid_minio_event)
+
+
+def test_validate_invalid_bucket(minio_parser):
+    """Test validation with wrong bucket name."""
+    event = StorageEvent(
+        filepath="recording%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg",
+        filetype="audio/ogg",
+        bucket_name="wrong-bucket",
+        metadata=None,
+    )
+    with pytest.raises(InvalidBucketError):
+        minio_parser.validate(event)
+
+
+def test_validate_invalid_filetype(minio_parser):
+    """Test validation with unsupported file type."""
+    event = StorageEvent(
+        filepath="recording%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.txt",
+        filetype="text/plain",  # Not included in the default allowed filetypes
+        bucket_name="test-bucket",
+        metadata=None,
+    )
+    with pytest.raises(InvalidFileTypeError):
+        minio_parser.validate(event)
+
+
+@pytest.mark.parametrize(
+    "invalid_filepath",
+    [
+        "invalid_filepath",
+        "recording/46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg",
+        "recording%2F46d1a1212426484d8fb309b5d886f7a8.ogg",
+    ],
+)
+def test_validate_invalid_filepath(invalid_filepath, minio_parser):
+    """Test validation with malformed filepath."""
+    event = StorageEvent(
+        filepath=invalid_filepath,
+        filetype="audio/ogg",
+        bucket_name="test-bucket",
+        metadata=None,
+    )
+    with pytest.raises(InvalidFilepathError):
+        minio_parser.validate(event)
+
+
+def test_validate_valid_event(minio_parser):
+    """Test validation with valid event data."""
+    event = StorageEvent(
+        filepath="recording%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg",
+        filetype="audio/ogg",
+        bucket_name="test-bucket",
+        metadata=None,
+    )
+    recording_id = minio_parser.validate(event)
+    assert recording_id == "46d1a121-2426-484d-8fb3-09b5d886f7a8"
+
+
+def test_get_recording_id_success(minio_parser, valid_minio_event):
+    """Test successful extraction of recording ID."""
+    recording_id = minio_parser.get_recording_id(valid_minio_event)
+    assert recording_id == "46d1a121-2426-484d-8fb3-09b5d886f7a8"
+
+
+def test_validate_filepath_with_folder(minio_parser):
+    """Test validation of filepath with folder structure."""
+    event = StorageEvent(
+        filepath="parent_folder%2Ffolder%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg",
+        filetype="audio/ogg",
+        bucket_name="test-bucket",
+        metadata=None,
+    )
+    recording_id = minio_parser.validate(event)
+    assert recording_id == "46d1a121-2426-484d-8fb3-09b5d886f7a8"
+
+
+def test_parse_with_video_type(minio_parser):
+    """Test parsing event with video file type."""
+    video_event = {
+        "Records": [
+            {
+                "s3": {
+                    "bucket": {"name": "test-bucket"},
+                    "object": {
+                        "key": "46d1a121-2426-484d-8fb3-09b5d886f7a8.mp4",
+                        "contentType": "video/mp4",
+                    },
+                }
+            }
+        ]
+    }
+    event = minio_parser.parse(video_event)
+    assert event.filetype == "video/mp4"
+    assert event.filepath.endswith(".mp4")
+
+
+def test_empty_allowed_filetypes():
+    """Test MinioParser with empty allowed_filetypes."""
+    empty_types = set()
+    parser = MinioParser(bucket_name="test-bucket", allowed_filetypes=empty_types)
+    assert parser._allowed_filetypes == {"audio/ogg", "video/mp4"}
+
+
+def test_custom_allowed_filetypes():
+    """Test MinioParser with empty allowed_filetypes."""
+    custom_types = {"audio/mp3", "video/mov"}
+    parser = MinioParser(bucket_name="test-bucket", allowed_filetypes=custom_types)
+    assert parser._allowed_filetypes == {"audio/mp3", "video/mov"}
+
+
+def test_validate_custom_filetypes():
+    """Test validation of filepath with folder structure."""
+
+    parser = MinioParser(bucket_name="test-bucket", allowed_filetypes={"audio/mp3"})
+
+    event = StorageEvent(
+        filepath="parent_folder%2Ffolder%2F46d1a121-2426-484d-8fb3-09b5d886f7a8.ogg",
+        filetype="audio/mp3",
+        bucket_name="test-bucket",
+        metadata=None,
+    )
+    parser.validate(event)
+
+
+def test_constructor_none_bucket():
+    """Test MinioParser constructor with None bucket name."""
+    with pytest.raises(ValueError, match="Bucket name cannot be None or empty"):
+        MinioParser(bucket_name=None)
+
+
+def test_constructor_empty_bucket():
+    """Test MinioParser constructor with empty bucket name."""
+    with pytest.raises(ValueError, match="Bucket name cannot be None or empty"):
+        MinioParser(bucket_name="")
+
+
+@pytest.fixture
+def clear_lru_cache():
+    """Fixture to clear the LRU cache between tests."""
+    get_parser.cache_clear()
+    yield
+    get_parser.cache_clear()
+
+
+@override_settings(AWS_STORAGE_BUCKET_NAME="test-bucket")
+def test_returns_correct_instance(clear_lru_cache):
+    """Test if get_parser returns the correct parser instance."""
+    parser = get_parser()
+    assert isinstance(parser, MinioParser)
+    assert parser._bucket_name == "test-bucket"
+
+
+@override_settings(AWS_STORAGE_BUCKET_NAME="test-bucket")
+def test_caching_behavior(clear_lru_cache):
+    """Test if the function properly caches the parser instance."""
+    parser1 = get_parser()
+    parser2 = get_parser()
+    assert parser1 is parser2  # Check object identity
+
+
+@override_settings(AWS_STORAGE_BUCKET_NAME="different-bucket")
+def test_different_settings_new_instance():
+    """Test if changing settings creates a new instance."""
+    parser = get_parser()
+    assert parser._bucket_name == "different-bucket"
+
+
+def test_import_error_handling(clear_lru_cache):
+    """Test handling of import errors for invalid parser class."""
+    with override_settings(RECORDING_EVENT_PARSER_CLASS="invalid.parser.path"):
+        with pytest.raises(ImportError):
+            get_parser()
+
+
+@mock.patch("core.recording.event.parsers.import_string")
+def test_parser_instantiation_called_once(mock_import_string, clear_lru_cache):
+    """Test that parser class is instantiated only once due to caching."""
+    mock_parser_cls = type(
+        "MockParser",
+        (),
+        {
+            "__init__": lambda self, bucket_name: setattr(
+                self, "_bucket_name", bucket_name
+            )
+        },
+    )
+    mock_import_string.return_value = mock_parser_cls
+
+    # First call
+    parser1 = get_parser()
+    # Second call
+    parser2 = get_parser()
+
+    # Verify import_string was called only once
+    mock_import_string.assert_called_once_with(settings.RECORDING_EVENT_PARSER_CLASS)
+    assert parser1 is parser2
+
+
+def test_cache_clear_behavior(clear_lru_cache):
+    """Test that cache clearing creates new instance."""
+    parser1 = get_parser()
+    get_parser.cache_clear()
+    parser2 = get_parser()
+
+    assert parser1 is not parser2  # Should be different instances after cache clear

src/backend/core/tests/recording/worker/test_factories.py

@@ -0,0 +1,154 @@
+"""
+Test worker service factories.
+"""
+
+# pylint: disable=W0212,W0621,W0613
+
+from dataclasses import FrozenInstanceError
+
+from django.test import override_settings
+
+import pytest
+
+from core.recording.worker.factories import WorkerServiceConfig, WorkerServiceFactory
+
+
+@pytest.fixture(autouse=True)
+def clear_lru_cache():
+    """Clear the lru_cache before and after each test"""
+    WorkerServiceConfig.from_settings.cache_clear()
+    yield
+    WorkerServiceConfig.from_settings.cache_clear()
+
+
+@pytest.fixture
+def test_settings():
+    """Fixture to provide test Django settings"""
+    mocked_settings = {
+        "RECORDING_OUTPUT_FOLDER": "/test/output",
+        "LIVEKIT_CONFIGURATION": {"server": "test.example.com"},
+        "RECORDING_VERIFY_SSL": True,
+        "AWS_S3_ENDPOINT_URL": "https://s3.test.com",
+        "AWS_S3_ACCESS_KEY_ID": "test_key",
+        "AWS_S3_SECRET_ACCESS_KEY": "test_secret",
+        "AWS_S3_REGION_NAME": "test-region",
+        "AWS_STORAGE_BUCKET_NAME": "test-bucket",
+    }
+
+    # Use override_settings to properly patch Django settings
+    with override_settings(**mocked_settings):
+        yield test_settings
+
+
+@pytest.fixture
+def config(test_settings):
+    """Fixture to provide a WorkerServiceConfig instance"""
+    return WorkerServiceConfig.from_settings()
+
+
+# Tests
+def test_config_initialization(config):
+    """Test that WorkerServiceConfig is properly initialized from settings"""
+    assert config.output_folder == "/test/output"
+    assert config.server_configurations == {"server": "test.example.com"}
+    assert config.verify_ssl is True
+    assert config.bucket_args == {
+        "endpoint": "https://s3.test.com",
+        "access_key": "test_key",
+        "secret": "test_secret",
+        "region": "test-region",
+        "bucket": "test-bucket",
+        "force_path_style": True,
+    }
+
+
+def test_config_immutability(config):
+    """Test that config instances are immutable after creation"""
+    with pytest.raises(FrozenInstanceError):
+        config.output_folder = "new/path"
+
+
+@override_settings(
+    RECORDING_OUTPUT_FOLDER="/test/output",
+    LIVEKIT_CONFIGURATION={"server": "test.example.com"},
+    RECORDING_VERIFY_SSL=True,
+    AWS_S3_ENDPOINT_URL="https://s3.test.com",
+    AWS_S3_ACCESS_KEY_ID="test_key",
+    AWS_S3_SECRET_ACCESS_KEY="test_secret",
+    AWS_S3_REGION_NAME="test-region",
+    AWS_STORAGE_BUCKET_NAME="test-bucket",
+)
+def test_config_caching():
+    """Test that from_settings method caches its result"""
+    # Clear cache before testing caching behavior
+    WorkerServiceConfig.from_settings.cache_clear()
+
+    config1 = WorkerServiceConfig.from_settings()
+    config2 = WorkerServiceConfig.from_settings()
+    assert config1 is config2
+
+
+@pytest.fixture
+def mock_worker_service():
+    """Fixture to provide a mock WorkerService implementation"""
+
+    class TestWorkerService:
+        """Mock WorkerService"""
+
+        hrid = "test-worker"
+
+        def __init__(self, config):
+            """Mock init"""
+            self.config = config
+
+        def start(self, room_id, recording_id):
+            """Mock start method"""
+            return f"worker_{room_id}_{recording_id}"
+
+        def stop(self, worker_id):
+            """Mock stop method"""
+            return f"stopped_{worker_id}"
+
+    return TestWorkerService
+
+
+@pytest.fixture
+def factory():
+    """Fixture to provide a clean WorkerServiceFactory instance"""
+    return WorkerServiceFactory()
+
+
+def test_factory_initialization(factory, config):
+    """Test that factory is properly initialized"""
+    assert factory._worker_service_registry == {}
+    assert isinstance(factory._default_config, WorkerServiceConfig)
+    assert factory._default_config == config
+
+
+def test_register_worker_service(factory, mock_worker_service):
+    """Test registering a new worker service"""
+    factory.register("test", mock_worker_service)
+    assert factory._worker_service_registry["test"] == mock_worker_service
+
+
+def test_register_duplicate_worker_service(factory, mock_worker_service):
+    """Test that registering a duplicate worker service raises an error"""
+    factory.register("test", mock_worker_service)
+    with pytest.raises(KeyError) as exc_info:
+        factory.register("test", mock_worker_service)
+    assert "already registered" in str(exc_info.value)
+
+
+def test_create_worker_service(factory, mock_worker_service):
+    """Test creating a worker service instance"""
+    factory.register("test", mock_worker_service)
+    worker = factory.create("test")
+    assert isinstance(worker, mock_worker_service)
+    assert worker.hrid == "test-worker"
+
+
+def test_create_unknown_worker_service(factory):
+    """Test that creating an unknown worker service raises an error"""
+    with pytest.raises(ValueError) as exc_info:
+        factory.create("unknown")
+    assert "Unknown worker service" in str(exc_info.value)

src/backend/core/tests/recording/worker/test_mediator.py

@@ -0,0 +1,161 @@
+"""Test WorkerServiceMediator class."""
+
+# pylint: disable=W0621,W0613
+
+from unittest.mock import Mock
+
+import pytest
+
+from core.factories import RecordingFactory
+from core.models import RecordingStatusChoices
+from core.recording.worker.exceptions import (
+    RecordingStartError,
+    RecordingStopError,
+    WorkerConnectionError,
+    WorkerRequestError,
+    WorkerResponseError,
+)
+from core.recording.worker.factories import WorkerService
+from core.recording.worker.mediator import WorkerServiceMediator
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def mock_worker_service():
+    """Fixture for mock worker service"""
+    return Mock(spec=WorkerService)
+
+
+@pytest.fixture
+def mediator(mock_worker_service):
+    """Fixture for WorkerServiceMediator"""
+    return WorkerServiceMediator(mock_worker_service)
+
+
+def test_start_recording_success(mediator, mock_worker_service):
+    """Test successful recording start"""
+    # Setup
+    worker_id = "test-worker-123"
+    mock_worker_service.start.return_value = worker_id
+
+    mock_recording = RecordingFactory(
+        status=RecordingStatusChoices.INITIATED, worker_id=None
+    )
+    mediator.start(mock_recording)
+
+    # Verify worker service call
+    expected_room_name = str(mock_recording.room.id).replace("-", "")
+    mock_worker_service.start.assert_called_once_with(
+        expected_room_name, mock_recording.id
+    )
+
+    # Verify recording updates
+    mock_recording.refresh_from_db()
+    assert mock_recording.worker_id == worker_id
+    assert mock_recording.status == RecordingStatusChoices.ACTIVE
+
+
+@pytest.mark.parametrize(
+    "error_class", [WorkerRequestError, WorkerConnectionError, WorkerResponseError]
+)
+def test_mediator_start_recording_worker_errors(
+    mediator, mock_worker_service, error_class
+):
+    """Test handling of various worker errors during start"""
+    # Setup
+    mock_worker_service.start.side_effect = error_class("Test error")
+    mock_recording = RecordingFactory(
+        status=RecordingStatusChoices.INITIATED, worker_id=None
+    )
+
+    # Execute and verify
+    with pytest.raises(RecordingStartError):
+        mediator.start(mock_recording)
+
+    # Verify recording updates
+    mock_recording.refresh_from_db()
+    assert mock_recording.status == RecordingStatusChoices.FAILED_TO_START
+    assert mock_recording.worker_id is None
+
+
+@pytest.mark.parametrize(
+    "status",
+    [
+        RecordingStatusChoices.ACTIVE,
+        RecordingStatusChoices.FAILED_TO_START,
+        RecordingStatusChoices.FAILED_TO_STOP,
+        RecordingStatusChoices.STOPPED,
+        RecordingStatusChoices.SAVED,
+        RecordingStatusChoices.ABORTED,
+    ],
+)
+def test_mediator_start_recording_from_forbidden_status(
+    mediator, mock_worker_service, status
+):
+    """Test handling of various worker errors during start"""
+    # Setup
+    mock_recording = RecordingFactory(status=status)
+
+    # Execute and verify
+    with pytest.raises(RecordingStartError):
+        mediator.start(mock_recording)
+
+    # Verify recording was not updated
+    mock_recording.refresh_from_db()
+    assert mock_recording.status == status
+
+
+def test_mediator_stop_recording_success(mediator, mock_worker_service):
+    """Test successful recording stop"""
+    # Setup
+    mock_recording = RecordingFactory(
+        status=RecordingStatusChoices.ACTIVE, worker_id="test-worker-123"
+    )
+    mock_worker_service.stop.return_value = "STOPPED"
+
+    # Execute
+    mediator.stop(mock_recording)
+
+    # Verify worker service call
+    mock_worker_service.stop.assert_called_once_with(worker_id=mock_recording.worker_id)
+
+    # Verify recording updates
+    mock_recording.refresh_from_db()
+    assert mock_recording.status == RecordingStatusChoices.STOPPED
+
+
+def test_mediator_stop_recording_aborted(mediator, mock_worker_service):
+    """Test recording stop when worker returns ABORTED"""
+    # Setup
+    mock_recording = RecordingFactory(
+        status=RecordingStatusChoices.ACTIVE, worker_id="test-worker-123"
+    )
+    mock_worker_service.stop.return_value = "ABORTED"
+
+    # Execute
+    mediator.stop(mock_recording)
+
+    # Verify recording updates
+    mock_recording.refresh_from_db()
+    assert mock_recording.status == RecordingStatusChoices.ABORTED
+
+
+@pytest.mark.parametrize("error_class", [WorkerConnectionError, WorkerResponseError])
+def test_mediator_stop_recording_worker_errors(
+    mediator, mock_worker_service, error_class
+):
+    """Test handling of worker errors during stop"""
+    # Setup
+    mock_recording = RecordingFactory(
+        status=RecordingStatusChoices.ACTIVE, worker_id="test-worker-123"
+    )
+    mock_worker_service.stop.side_effect = error_class("Test error")
+
+    # Execute and verify
+    with pytest.raises(RecordingStopError):
+        mediator.stop(mock_recording)
+
+    # Verify recording updates
+    mock_recording.refresh_from_db()
+    assert mock_recording.status == RecordingStatusChoices.FAILED_TO_STOP

src/backend/core/tests/recording/worker/test_services.py

@@ -0,0 +1,368 @@
+"""
+Test worker service classes.
+"""
+
+# pylint: disable=W0212,W0621,W0613,E1101
+
+from unittest.mock import AsyncMock, Mock, patch
+
+import aiohttp
+import pytest
+
+from core.recording.worker.exceptions import WorkerConnectionError, WorkerResponseError
+from core.recording.worker.factories import WorkerServiceConfig
+from core.recording.worker.services import (
+    AudioCompositeEgressService,
+    BaseEgressService,
+    VideoCompositeEgressService,
+    livekit_api,
+)
+
+
+@pytest.fixture
+def config():
+    """Fixture to provide a WorkerServiceConfig instance"""
+    return WorkerServiceConfig(
+        output_folder="/test/output",
+        server_configurations={
+            "host": "test.livekit.io",
+            "api_key": "test_key",
+            "api_secret": "test_secret",
+        },
+        verify_ssl=True,
+        bucket_args={
+            "endpoint": "https://s3.test.com",
+            "access_key": "test_key",
+            "secret": "test_secret",
+            "region": "test-region",
+            "bucket": "test-bucket",
+            "force_path_style": True,
+        },
+    )
+
+
+@pytest.fixture
+def mock_s3_upload():
+    """Fixture for mocked S3Upload"""
+    with patch("core.recording.worker.services.livekit_api.S3Upload") as mock:
+        yield mock
+
+
+@pytest.fixture
+def mock_egress_service():
+    """Fixture for mocked EgressService"""
+    with patch("core.recording.worker.services.EgressService") as mock:
+        yield mock
+
+
+@pytest.fixture
+def service(config, mock_s3_upload):
+    """Fixture for BaseEgressService instance"""
+    return BaseEgressService(config)
+
+
+@pytest.fixture
+def mock_client_session():
+    """Fixture for mocked aiohttp.ClientSession"""
+    with patch("aiohttp.ClientSession") as mock:
+        mock.return_value.__aenter__ = AsyncMock()
+        mock.return_value.__aexit__ = AsyncMock()
+        yield mock
+
+
+@pytest.fixture
+def mock_tcp_connector():
+    """Fixture for TCPConnector"""
+    with patch("aiohttp.TCPConnector") as mock_connector:
+        mock_connector_instance = Mock()
+        mock_connector.return_value = mock_connector_instance
+        yield mock_connector
+
+
+@pytest.fixture
+def video_service(config):
+    """Fixture for VideoCompositeEgressService"""
+    service = VideoCompositeEgressService(config)
+    service._handle_request = Mock()  # Mock the request handler
+    return service
+
+
+@pytest.fixture
+def audio_service(config):
+    """Fixture for AudioCompositeEgressService"""
+    service = AudioCompositeEgressService(config)
+    service._handle_request = Mock()  # Mock the request handler
+    return service
+
+
+def test_base_egress_initialization(config, mock_s3_upload):
+    """Test service initialization"""
+
+    service = BaseEgressService(config)
+    assert service._config == config
+
+    mock_s3_upload.assert_called_once_with(
+        endpoint="https://s3.test.com",
+        access_key="test_key",
+        secret="test_secret",
+        region="test-region",
+        bucket="test-bucket",
+        force_path_style=True,
+    )
+
+
+@pytest.mark.parametrize(
+    "filename,extension,expected",
+    [
+        ("test", "mp4", "/test/output/test.mp4"),
+        ("recording123", "ogg", "/test/output/recording123.ogg"),
+        ("live_stream", "m3u8", "/test/output/live_stream.m3u8"),
+    ],
+)
+def test_base_egress_filepath_construction(service, filename, extension, expected):
+    """Test filepath construction with various inputs"""
+    result = service._get_filepath(filename, extension)
+    assert result == expected
+    assert result.startswith(service._config.output_folder)
+    assert result.endswith(f"{filename}.{extension}")
+
+
+def test_base_egress_handle_request_success(
+    config, service, mock_client_session, mock_egress_service, mock_tcp_connector
+):
+    """Test successful request handling"""
+    # Setup mock response
+    mock_response = Mock()
+    mock_method = AsyncMock(return_value=mock_response)
+    mock_egress_instance = Mock()
+    mock_egress_instance.test_method = mock_method
+    mock_egress_service.return_value = mock_egress_instance
+
+    # Create test request
+    test_request = Mock()
+
+    response = service._handle_request(test_request, "test_method")
+
+    mock_client_session.assert_called_once_with(
+        connector=mock_tcp_connector.return_value
+    )
+
+    # Verify EgressService initialization
+    mock_egress_service.assert_called_once_with(
+        mock_client_session.return_value.__aenter__.return_value,
+        **service._config.server_configurations,
+    )
+
+    # Verify method call and response
+    mock_method.assert_called_once_with(test_request)
+    assert response == mock_response
+
+
+def test_base_egress_handle_request_connection_error(service, mock_egress_service):
+    """Test handling of connection errors"""
+    # Setup mock error
+    mock_method = AsyncMock(
+        side_effect=livekit_api.TwirpError(msg="Connection failed", code=500)
+    )
+    mock_egress_instance = Mock()
+    mock_egress_instance.test_method = mock_method
+    mock_egress_service.return_value = mock_egress_instance
+
+    # Create test request
+    test_request = Mock()
+
+    # Verify error handling
+    with pytest.raises(WorkerConnectionError) as exc:
+        service._handle_request(test_request, "test_method")
+
+    assert "LiveKit client connection error" in str(exc.value)
+    assert "Connection failed" in str(exc.value)
+
+
+@pytest.mark.parametrize(
+    "response_status,expected_result",
+    [
+        (livekit_api.EgressStatus.EGRESS_ABORTED, "ABORTED"),
+        (livekit_api.EgressStatus.EGRESS_COMPLETE, "FAILED_TO_STOP"),
+        (livekit_api.EgressStatus.EGRESS_ENDING, "STOPPED"),
+        (livekit_api.EgressStatus.EGRESS_FAILED, "FAILED_TO_STOP"),
+    ],
+)
+def test_base_egress_stop_with_status(service, response_status, expected_result):
+    """Test stop method with different response statuses"""
+    # Mock _handle_request
+    mock_response = Mock(status=response_status)
+    service._handle_request = Mock(return_value=mock_response)
+
+    # Execute stop
+    result = service.stop("test_worker_id")
+
+    # Verify request and response handling
+    service._handle_request.assert_called_once_with(
+        livekit_api.StopEgressRequest(egress_id="test_worker_id"), "stop_egress"
+    )
+    assert result == expected_result
+
+
+def test_base_egress_stop_missing_status(service):
+    """Test stop method when response is missing status"""
+    # Mock _handle_request with missing status
+    mock_response = Mock(status=None)
+    service._handle_request = Mock(return_value=mock_response)
+
+    # Verify error handling
+    with pytest.raises(WorkerResponseError) as exc:
+        service.stop("test_worker_id")
+
+    assert "missing the recording status" in str(exc.value)
+
+
+def test_base_egress_start_not_implemented(service):
+    """Test that start method raises NotImplementedError"""
+    with pytest.raises(NotImplementedError) as exc:
+        service.start("test_room", "test_recording")
+    assert "Subclass must implement this method" in str(exc.value)
+
+
+@pytest.mark.parametrize("verify_ssl", [True, False])
+def test_base_egress_ssl_verification_config(verify_ssl):
+    """Test SSL verification configuration"""
+    config = WorkerServiceConfig(
+        output_folder="/test/output",
+        server_configurations={
+            "host": "test.livekit.io",
+            "api_key": "test_key",
+            "api_secret": "test_secret",
+        },
+        verify_ssl=verify_ssl,
+        bucket_args={
+            "endpoint": "https://s3.test.com",
+            "access_key": "test_key",
+            "secret": "test_secret",
+            "region": "test-region",
+            "bucket": "test-bucket",
+            "force_path_style": True,
+        },
+    )
+
+    service = BaseEgressService(config)
+
+    # Mock ClientSession to capture connector configuration
+    with patch("aiohttp.ClientSession") as mock_session:
+        mock_session.return_value.__aenter__ = AsyncMock()
+        mock_session.return_value.__aexit__ = AsyncMock()
+
+        # Trigger request to verify connector configuration
+        service._handle_request(Mock(), "test_method")
+
+        # Verify SSL configuration
+        connector = mock_session.call_args[1]["connector"]
+        assert isinstance(connector, aiohttp.TCPConnector)
+        assert connector._ssl == verify_ssl
+
+
+def test_video_composite_egress_hrid(video_service):
+    """Test HRID is correct"""
+    assert video_service.hrid == "video-recording-composite-livekit-egress"
+
+
+def test_video_composite_egress_start_success(video_service):
+    """Test successful start of video composite egress"""
+    # Setup mock response
+    egress_id = "test-egress-123"
+    video_service._handle_request.return_value = Mock(egress_id=egress_id)
+
+    # Test parameters
+    room_name = "test-room"
+    recording_id = "rec-123"
+
+    # Call start
+    result = video_service.start(room_name, recording_id)
+
+    # Verify result
+    assert result == egress_id
+
+    # Verify request construction
+    video_service._handle_request.assert_called_once()
+    request = video_service._handle_request.call_args[0][0]
+    method = video_service._handle_request.call_args[0][1]
+
+    # Verify request properties
+    assert isinstance(request, livekit_api.RoomCompositeEgressRequest)
+    assert request.room_name == room_name
+    assert len(request.file_outputs) == 1
+
+    assert not request.audio_only  # Video service shouldn't set audio_only
+
+    # Verify file output configuration
+    file_output = request.file_outputs[0]
+    assert file_output.file_type == livekit_api.EncodedFileType.MP4
+    assert file_output.filepath == f"/test/output/{recording_id}.mp4"
+    assert file_output.s3.bucket == "test-bucket"
+
+    # Verify method name
+    assert method == "start_room_composite_egress"
+
+
+def test_video_composite_egress_start_missing_egress_id(video_service):
+    """Test handling of missing egress ID in response"""
+    # Setup mock response without egress_id
+    video_service._handle_request.return_value = Mock(egress_id=None)
+
+    with pytest.raises(WorkerResponseError) as exc_info:
+        video_service.start("test-room", "rec-123")
+
+    assert "Egress ID not found" in str(exc_info.value)
+
+
+def test_audio_composite_egress_hrid(audio_service):
+    """Test HRID is correct"""
+    assert audio_service.hrid == "audio-recording-composite-livekit-egress"
+
+
+def test_audio_composite_egress_start_success(audio_service):
+    """Test successful start of audio composite egress"""
+    # Setup mock response
+    egress_id = "test-egress-123"
+    audio_service._handle_request.return_value = Mock(egress_id=egress_id)
+
+    # Test parameters
+    room_name = "test-room"
+    recording_id = "rec-123"
+
+    # Call start
+    result = audio_service.start(room_name, recording_id)
+
+    # Verify result
+    assert result == egress_id
+
+    # Verify request construction
+    audio_service._handle_request.assert_called_once()
+    request = audio_service._handle_request.call_args[0][0]
+    method = audio_service._handle_request.call_args[0][1]
+
+    # Verify request properties
+    assert isinstance(request, livekit_api.RoomCompositeEgressRequest)
+    assert request.room_name == room_name
+    assert len(request.file_outputs) == 1
+    assert request.audio_only is True  # Audio service should set audio_only
+
+    # Verify file output configuration
+    file_output = request.file_outputs[0]
+    assert file_output.file_type == livekit_api.EncodedFileType.OGG
+    assert file_output.filepath == f"/test/output/{recording_id}.ogg"
+    assert file_output.s3.bucket == "test-bucket"
+
+    # Verify method name
+    assert method == "start_room_composite_egress"
+
+
+def test_audio_composite_egress_start_missing_egress_id(audio_service):
+    """Test handling of missing egress ID in response"""
+    # Setup mock response without egress_id
+    audio_service._handle_request.return_value = Mock(egress_id=None)
+
+    with pytest.raises(WorkerResponseError) as exc_info:
+        audio_service.start("test-room", "rec-123")
+
+    assert "Egress ID not found" in str(exc_info.value)

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

@@ -0,0 +1,178 @@
+"""
+Test rooms API endpoints in the Meet core app: start recording.
+"""
+
+# pylint: disable=W0621,W0613
+
+from unittest import mock
+
+from django.test.utils import override_settings
+
+import pytest
+from rest_framework import status
+from rest_framework.test import APIClient
+
+from ...factories import RoomFactory, UserFactory
+from ...models import Recording
+from ...recording.worker.exceptions import RecordingStartError
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def mock_worker_service():
+    """Mock worker service."""
+    return mock.Mock()
+
+
+@pytest.fixture
+def mock_worker_service_provider(mock_worker_service):
+    """Mock worker service factory."""
+    with mock.patch(
+        "core.api.viewsets.worker_service_provider.create",
+        return_value=mock_worker_service,
+    ) as mock_worker_service_provider:
+        yield mock_worker_service_provider
+
+
+@pytest.fixture
+def mock_worker_manager(mock_worker_service):
+    """Mock worker service mediator."""
+    with mock.patch("core.api.viewsets.WorkerServiceMediator") as mock_mediator_class:
+        mock_mediator = mock.Mock()
+        mock_mediator_class.return_value = mock_mediator
+        yield mock_mediator
+
+
+def test_start_recording_anonymous():
+    """Anonymous users should not be allowed to start room recordings."""
+    room = RoomFactory()
+    client = APIClient()
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-recording/", {"mode": "standard"}
+    )
+
+    assert response.status_code == status.HTTP_401_UNAUTHORIZED
+    assert Recording.objects.count() == 0
+
+
+def test_start_recording_non_owner_and_non_administrator():
+    """Non-owner and Non-Administrator users should not be allowed to start room recordings."""
+    room = RoomFactory()
+    user = UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-recording/", {"mode": "standard"}
+    )
+
+    assert response.status_code == status.HTTP_403_FORBIDDEN
+    assert Recording.objects.count() == 0
+
+
+@override_settings(RECORDING_ENABLE=False)
+def test_start_recording_recording_disabled():
+    """Should fail if recording is disabled for the room."""
+    room = RoomFactory()
+    user = UserFactory()
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-recording/", {"mode": "standard"}
+    )
+
+    assert response.status_code == status.HTTP_403_FORBIDDEN
+    assert response.json() == {"detail": "Access denied, recording is disabled."}
+    assert Recording.objects.count() == 0
+
+
+@override_settings(RECORDING_ENABLE=True)
+def test_start_recording_missing_mode():
+    """Should fail if recording mode is not provided."""
+    room = RoomFactory()
+    user = UserFactory()
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(f"/api/v1.0/rooms/{room.id}/start-recording/", {})
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert response.json() == {"error": "Recording mode is required."}
+    assert Recording.objects.count() == 0
+
+
+@override_settings(RECORDING_ENABLE=True)
+def test_start_recording_worker_error(
+    mock_worker_service_provider, mock_worker_manager
+):
+    """Should handle worker service errors appropriately."""
+    room = RoomFactory()
+    user = UserFactory()
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    # Configure mock mediator to raise error
+    mock_start = mock.Mock()
+    mock_start.side_effect = RecordingStartError("Failed to connect to worker")
+
+    mock_worker_manager.start = mock_start
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-recording/", {"mode": "screen_recording"}
+    )
+
+    mock_worker_service_provider.assert_called_once_with(mode="screen_recording")
+
+    assert response.status_code == status.HTTP_500_INTERNAL_SERVER_ERROR
+    assert response.json() == {
+        "error": f"Recording failed to start for room {room.slug}"
+    }
+
+    # Recording object should be created even if worker fails
+    assert Recording.objects.count() == 1
+    recording = Recording.objects.first()
+    assert recording.room == room
+    assert recording.mode == "screen_recording"
+    assert recording.creator == user
+
+
+@override_settings(RECORDING_ENABLE=True)
+def test_start_recording_success(mock_worker_service_provider, mock_worker_manager):
+    """Should successfully start recording when everything is configured correctly."""
+    room = RoomFactory()
+    user = UserFactory()
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    mock_start = mock.Mock()
+    mock_worker_manager.start = mock_start
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-recording/", {"mode": "screen_recording"}
+    )
+
+    mock_worker_service_provider.assert_called_once_with(mode="screen_recording")
+
+    assert response.status_code == status.HTTP_201_CREATED
+    assert response.json() == {
+        "message": f"Recording successfully started for room {room.slug}"
+    }
+
+    # Verify the mediator was called with the recording
+    recording = Recording.objects.first()
+    mock_start.assert_called_once_with(recording)

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

@@ -0,0 +1,169 @@
+"""
+Test rooms API endpoints in the Meet core app: stop recording.
+"""
+
+# pylint: disable=W0621,W0613
+
+from unittest import mock
+
+from django.test.utils import override_settings
+
+import pytest
+from rest_framework import status
+from rest_framework.test import APIClient
+
+from ...factories import RecordingFactory, RoomFactory, UserFactory
+from ...models import Recording, RecordingStatusChoices
+from ...recording.worker.exceptions import RecordingStopError
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def mock_worker_service():
+    """Mock worker service."""
+    return mock.Mock()
+
+
+@pytest.fixture
+def mock_worker_service_provider(mock_worker_service):
+    """Mock worker service factory."""
+    with mock.patch(
+        "core.api.viewsets.worker_service_provider.create",
+        return_value=mock_worker_service,
+    ) as mock_worker_service_provider:
+        yield mock_worker_service_provider
+
+
+@pytest.fixture
+def mock_worker_manager(mock_worker_service):
+    """Mock worker service mediator."""
+    with mock.patch("core.api.viewsets.WorkerServiceMediator") as mock_mediator_class:
+        mock_mediator = mock.Mock()
+        mock_mediator_class.return_value = mock_mediator
+        yield mock_mediator
+
+
+def test_stop_recording_anonymous():
+    """Anonymous users should not be allowed to stop room recordings."""
+    room = RoomFactory()
+    RecordingFactory(room=room, status=RecordingStatusChoices.ACTIVE)
+    client = APIClient()
+
+    response = client.post(f"/api/v1.0/rooms/{room.id}/stop-recording/")
+
+    assert response.status_code == status.HTTP_401_UNAUTHORIZED
+    # Verify recording status hasn't changed
+    assert Recording.objects.filter(status=RecordingStatusChoices.ACTIVE).count() == 1
+
+
+def test_stop_recording_non_owner_and_non_administrator():
+    """Non-owner and Non-Administrator users should not be allowed to stop room recordings."""
+    room = RoomFactory()
+    user = UserFactory()
+    RecordingFactory(room=room, status=RecordingStatusChoices.ACTIVE)
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(f"/api/v1.0/rooms/{room.id}/stop-recording/")
+
+    assert response.status_code == status.HTTP_403_FORBIDDEN
+    # Verify recording status hasn't changed
+    assert Recording.objects.filter(status=RecordingStatusChoices.ACTIVE).count() == 1
+
+
+@override_settings(RECORDING_ENABLE=False)
+def test_stop_recording_recording_disabled():
+    """Should fail if recording is disabled for the room."""
+    room = RoomFactory()
+    user = UserFactory()
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(f"/api/v1.0/rooms/{room.id}/stop-recording/")
+
+    assert response.status_code == status.HTTP_403_FORBIDDEN
+    assert response.json() == {"detail": "Access denied, recording is disabled."}
+    # Verify no recording exists
+    assert Recording.objects.count() == 0
+
+
+@override_settings(RECORDING_ENABLE=True)
+def test_stop_recording_no_active_recording():
+    """Should fail when there is no active recording for the room."""
+    room = RoomFactory()
+    user = UserFactory()
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(f"/api/v1.0/rooms/{room.id}/stop-recording/")
+
+    assert response.status_code == status.HTTP_404_NOT_FOUND
+    assert response.json() == {"detail": "No active recording found for this room."}
+
+
+@override_settings(RECORDING_ENABLE=True)
+def test_stop_recording_worker_error(mock_worker_service_provider, mock_worker_manager):
+    """Should handle worker service errors appropriately."""
+    room = RoomFactory()
+    user = UserFactory()
+    recording = RecordingFactory(
+        room=room, status=RecordingStatusChoices.ACTIVE, mode="screen_recording"
+    )
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    # Configure mock mediator to raise error
+    mock_stop = mock.Mock()
+    mock_stop.side_effect = RecordingStopError("Failed to connect to worker")
+    mock_worker_manager.stop = mock_stop
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(f"/api/v1.0/rooms/{room.id}/stop-recording/")
+
+    mock_worker_service_provider.assert_called_once_with(mode="screen_recording")
+    mock_stop.assert_called_once_with(recording)
+
+    assert response.status_code == status.HTTP_500_INTERNAL_SERVER_ERROR
+    assert response.json() == {
+        "error": f"Recording failed to stop for room {room.slug}"
+    }
+    # Verify recording status hasn't changed
+    assert Recording.objects.filter(status=RecordingStatusChoices.ACTIVE).count() == 1
+
+
+@override_settings(RECORDING_ENABLE=True)
+def test_stop_recording_success(mock_worker_service_provider, mock_worker_manager):
+    """Should successfully stop recording when everything is configured correctly."""
+    room = RoomFactory()
+    user = UserFactory()
+    recording = RecordingFactory(
+        room=room, status=RecordingStatusChoices.ACTIVE, mode="screen_recording"
+    )
+    # Make user the room owner
+    room.accesses.create(user=user, role="owner")
+
+    mock_stop = mock.Mock()
+    mock_worker_manager.stop = mock_stop
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(f"/api/v1.0/rooms/{room.id}/stop-recording/")
+
+    mock_worker_service_provider.assert_called_once_with(mode="screen_recording")
+    mock_stop.assert_called_once_with(recording)
+
+    assert response.status_code == status.HTTP_200_OK
+    assert response.json() == {"message": f"Recording stopped for room {room.slug}."}
+
+    # Verify the recording still exists
+    assert Recording.objects.count() == 1

src/backend/core/tests/test_model_recording.py

@@ -0,0 +1,198 @@
+"""
+Unit tests for the Recording model
+"""
+
+from django.core.exceptions import ValidationError
+
+import pytest
+
+from core.factories import RecordingFactory, RoomFactory, UserFactory
+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) == str(recording.id)
+
+
+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_creator_relationship():
+    """It should maintain proper relationship with creator."""
+    user = UserFactory()
+    recording = RecordingFactory(creator=user)
+    assert recording.creator == user
+    assert recording in user.recordings.all()
+
+
+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
+def test_models_recording_get_abilities_creator():
+    """Test abilities for the recording creator."""
+    recording = RecordingFactory(status=RecordingStatusChoices.ACTIVE)
+    abilities = recording.get_abilities(recording.creator)
+
+    assert abilities == {
+        "destroy": False,  # Not final status
+        "partial_update": False,
+        "retrieve": True,  # Creator can always retrieve
+        "stop": True,  # Not final status, so can stop
+        "update": False,
+    }
+
+
+def test_models_recording_get_abilities_non_creator():
+    """Test abilities for a user who isn't the creator."""
+    recording = RecordingFactory()
+    other_user = UserFactory()
+    abilities = recording.get_abilities(other_user)
+
+    assert abilities == {
+        "destroy": False,
+        "partial_update": False,
+        "retrieve": False,
+        "stop": False,
+        "update": False,
+    }
+
+
+def test_models_recording_get_abilities_final_status():
+    """Test abilities when recording is in final status."""
+    recording = RecordingFactory(status=RecordingStatusChoices.SAVED)
+    abilities = recording.get_abilities(recording.creator)
+
+    assert abilities == {
+        "destroy": True,  # Final status, creator can destroy
+        "partial_update": False,
+        "retrieve": True,
+        "stop": False,  # Can't stop when in final status
+        "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_mode_required():
+    """Recording mode should be required."""
+    with pytest.raises(ValidationError):
+        RecordingFactory(mode=None)
+
+
+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_invalid_mode():
+    """Test that setting an invalid mode raises an error."""
+    with pytest.raises(ValidationError):
+        RecordingFactory(mode="INVALID_MODE")
+
+
+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_creator_deletion():
+    """Test that deleting a creator cascades to their recordings."""
+    creator = UserFactory()
+    recording = RecordingFactory(creator=creator)
+    creator.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/urls.py

@@ -5,7 +5,7 @@ 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
@@ -15,6 +15,7 @@ router.register("rooms", viewsets.RoomViewSet, basename="rooms")
 router.register(
     "resource-accesses", viewsets.ResourceAccessViewSet, basename="resource_accesses"
 )
+router.register("recording", viewsets.RecordingViewSet, basename="recordings")
 
 urlpatterns = [
     path(
@@ -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"
@@ -372,6 +405,28 @@ class Base(Configuration):
         None, environ_name="ANALYTICS_KEY", environ_prefix=None
     )
 
+    # Recording settings
+    RECORDING_ENABLE = values.BooleanValue(
+        False, environ_name="RECORDING_ENABLE", environ_prefix=None
+    )
+    RECORDING_OUTPUT_FOLDER = values.Value(
+        "recordings", environ_name="RECORDING_OUTPUT_FOLDER", environ_prefix=None
+    )
+    RECORDING_VERIFY_SSL = values.BooleanValue(
+        True, environ_name="RECORDING_VERIFY_SSL", environ_prefix=None
+    )
+    RECORDING_STORAGE_EVENT_ENABLE = values.BooleanValue(
+        False, environ_name="RECORDING_STORAGE_EVENT_ENABLE", environ_prefix=None
+    )
+    RECORDING_STORAGE_EVENT_TOKEN = values.Value(
+        None, environ_name="RECORDING_STORAGE_HOOK_TOKEN", environ_prefix=None
+    )
+    RECORDING_EVENT_PARSER_CLASS = values.Value(
+        "core.recording.event.parsers.MinioParser",
+        environ_name="RECORDING_EVENT_PARSER_CLASS",
+        environ_prefix=None,
+    )
+
     # pylint: disable=invalid-name
     @property
     def ENVIRONMENT(self):
@@ -535,6 +590,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,11 +36,11 @@ 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",
@@ -48,16 +48,17 @@ dependencies = [
     "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",
     "mozilla-django-oidc==4.0.1",
     "livekit-api==0.7.0",
+    "aiohttp==3.10.10",
 ]
 
 [project.urls]
@@ -76,13 +77,13 @@ dev = [
     "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

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

src/frontend/index.html

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

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.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/api/startRecording.ts

@@ -0,0 +1,24 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { fetchApi } from '@/api/fetchApi'
+import { ApiError } from '@/api/ApiError'
+import { ApiRoom } from './ApiRoom'
+
+export interface StartRecordingParams {
+  slug: string
+}
+
+const startRecording = ({ slug }: StartRecordingParams): Promise<ApiRoom> => {
+  return fetchApi(`rooms/${slug}/start-recording/`, {
+    method: 'POST',
+    body: JSON.stringify({}),
+  })
+}
+
+export function useStartRecording(
+  options?: UseMutationOptions<ApiRoom, ApiError, StartRecordingParams>
+) {
+  return useMutation<ApiRoom, ApiError, StartRecordingParams>({
+    mutationFn: startRecording,
+    onSuccess: options?.onSuccess,
+  })
+}

src/frontend/src/features/rooms/api/stopRecording.ts

@@ -0,0 +1,24 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { fetchApi } from '@/api/fetchApi'
+import { ApiError } from '@/api/ApiError'
+import { ApiRoom } from './ApiRoom'
+
+export interface StopRecordingParams {
+  slug: string
+}
+
+const stopRecording = ({ slug }: StopRecordingParams): Promise<ApiRoom> => {
+  return fetchApi(`rooms/${slug}/stop-recording/`, {
+    method: 'POST',
+    body: JSON.stringify({}),
+  })
+}
+
+export function useStopRecording(
+  options?: UseMutationOptions<ApiRoom, ApiError, StopRecordingParams>
+) {
+  return useMutation<ApiRoom, ApiError, StopRecordingParams>({
+    mutationFn: stopRecording,
+    onSuccess: options?.onSuccess,
+  })
+}

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

src/frontend/src/features/rooms/livekit/api/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,24 @@ 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'
+import { Button } from '@/primitives'
+import { useStartRecording } from '@/features/rooms/api/startRecording.ts'
+import { useStopRecording } from '@/features/rooms/api/stopRecording.ts'
+import { useParams } from 'wouter'
 
 /** @public */
 export type ControlBarControls = {
@@ -38,7 +40,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,11 +67,15 @@ export function ControlBar({
   variation,
   saveUserChoices = true,
   onDeviceError,
-  ...props
 }: ControlBarProps) {
-  const { t } = useTranslation('rooms')
   const [isChatOpen, setIsChatOpen] = React.useState(false)
   const layoutContext = useMaybeLayoutContext()
+
+  const { roomId } = useParams()
+
+  const { mutateAsync: startRecording } = useStartRecording()
+  const { mutateAsync: stopRecording } = useStopRecording()
+
   React.useEffect(() => {
     if (layoutContext?.widget.state?.showChat !== undefined) {
       setIsChatOpen(layoutContext?.widget.state?.showChat)
@@ -83,28 +89,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,74 +111,62 @@ 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 />
+      <Button onPress={async () => await startRecording({ slug: roomId })}>
+        start
+      </Button>
+      <Button onPress={async () => await stopRecording({ slug: roomId })}>
+        stop
+      </Button>
     </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()
                     }
                   }}