♿️(frontend) improve mic button accessibility in participant list

Add aria-label to microphone buttons in participant list to clearly indicate
mute functionality for current user and other participants. Set
aria-hidden on SVG icons to prevent redundant screen reader announcements.

.github/workflows/meet.yml

@@ -135,6 +135,9 @@ jobs:
       STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
       LIVEKIT_API_SECRET: secret
       LIVEKIT_API_KEY: devkey
+      AWS_S3_ENDPOINT_URL: http://localhost:9000
+      AWS_S3_ACCESS_KEY_ID: meet
+      AWS_S3_SECRET_ACCESS_KEY: password
 
     steps:
       - name: Checkout repository
@@ -152,6 +155,33 @@ jobs:
           path: "src/backend/core/templates/mail"
           key: mail-templates-${{ hashFiles('src/mail/mjml') }}
 
+      - name: Start MinIO
+        run: |
+          docker pull minio/minio
+          docker run -d --name minio \
+            -p 9000:9000 \
+            -e "MINIO_ACCESS_KEY=meet" \
+            -e "MINIO_SECRET_KEY=password" \
+            -v /data/media:/data \
+            minio/minio server --console-address :9001 /data
+
+      # Tool to wait for a service to be ready
+      - name: Install Dockerize
+        run: |
+          curl -sSL https://github.com/jwilder/dockerize/releases/download/v0.8.0/dockerize-linux-amd64-v0.8.0.tar.gz | sudo tar -C /usr/local/bin -xzv
+
+      - name: Wait for MinIO to be ready
+        run: |
+          dockerize -wait tcp://localhost:9000 -timeout 10s
+
+      - name: Configure MinIO
+        run: |
+          MINIO=$(docker ps | grep minio/minio | sed -E 's/.*\s+([a-zA-Z0-9_-]+)$/\1/')
+          docker exec ${MINIO} sh -c \
+            "mc alias set meet http://localhost:9000 meet password && \
+            mc alias ls && \
+            mc mb meet/meet-media-storage"
+
       - name: Install Python
         uses: actions/setup-python@v5
         with:

compose.yml

@@ -15,6 +15,37 @@ services:
     ports:
       - "1081:1080"
 
+  minio:
+    user: ${DOCKER_USER:-1000}
+    image: minio/minio
+    environment:
+      - MINIO_ROOT_USER=meet
+      - MINIO_ROOT_PASSWORD=password
+    ports:
+      - '9000:9000'
+      - '9001:9001'
+    healthcheck:
+      test: [ "CMD", "mc", "ready", "local" ]
+      interval: 1s
+      timeout: 20s
+      retries: 300
+    entrypoint: ""
+    command: minio server --console-address :9001 /data
+    volumes:
+      - ./data/media:/data
+
+  createbuckets:
+    image: minio/mc
+    depends_on:
+      minio:
+        condition: service_healthy
+        restart: true
+    entrypoint: >
+      sh -c "
+      /usr/bin/mc alias set meet http://minio:9000 meet password && \
+      /usr/bin/mc mb meet/meet-media-storage && \
+      exit 0;"
+
   app-dev:
     build:
       context: .
@@ -40,6 +71,7 @@ services:
         - redis
         - nginx
         - livekit
+        - createbuckets
   
   celery-dev:
     user: ${DOCKER_USER:-1000}
@@ -73,6 +105,7 @@ services:
       - postgresql
       - redis
       - livekit
+      - minio
 
   celery:
     user: ${DOCKER_USER:-1000}

env.d/development/common.dist

@@ -12,12 +12,20 @@ PYTHONPATH=/app
 # Mail
 DJANGO_EMAIL_HOST="mailcatcher"
 DJANGO_EMAIL_PORT=1025
+DJANGO_EMAIL_BRAND_NAME=La Suite Numérique
+DJANGO_EMAIL_SUPPORT_EMAIL=test@yopmail.com
+DJANGO_EMAIL_LOGO_IMG=http://localhost:3000/assets/logo-suite-numerique.png
+DJANGO_EMAIL_DOMAIN=localhost:3000
+DJANGO_EMAIL_APP_BASE_URL=http://localhost:3000
 
 # Backend url
 MEET_BASE_URL="http://localhost:8072"
 
 # Media
 STORAGES_STATICFILES_BACKEND=django.contrib.staticfiles.storage.StaticFilesStorage
+AWS_S3_ENDPOINT_URL=http://minio:9000
+AWS_S3_ACCESS_KEY_ID=meet
+AWS_S3_SECRET_ACCESS_KEY=password
 
 # OIDC
 OIDC_OP_JWKS_ENDPOINT=http://nginx:8083/realms/meet/protocol/openid-connect/certs
@@ -42,3 +50,6 @@ LIVEKIT_API_SECRET=secret
 LIVEKIT_API_KEY=devkey
 LIVEKIT_API_URL=http://localhost:7880
 ALLOW_UNREGISTERED_ROOMS=False
+
+# Recording
+SCREEN_RECORDING_BASE_URL=http://localhost:3000/recordings

src/backend/core/api/permissions.py

@@ -94,7 +94,7 @@ class HasAbilityPermission(IsAuthenticated):
 class HasPrivilegesOnRoom(IsAuthenticated):
     """Check if user has privileges on a given room."""
 
-    message = "You must have privileges to start a recording."
+    message = "You must have privileges on room to perform this action."
 
     def has_object_permission(self, request, view, obj):
         """Determine if user has privileges on room."""

src/backend/core/api/serializers.py

@@ -156,7 +156,7 @@ class RecordingSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = models.Recording
-        fields = ["id", "room", "created_at", "updated_at", "status"]
+        fields = ["id", "room", "created_at", "updated_at", "status", "mode", "key"]
         read_only_fields = fields
 
 
@@ -189,11 +189,11 @@ class RequestEntrySerializer(serializers.Serializer):
 
     def create(self, validated_data):
         """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
+        raise NotImplementedError("RequestEntrySerializer is validation-only")
 
     def update(self, instance, validated_data):
         """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
+        raise NotImplementedError("RequestEntrySerializer is validation-only")
 
 
 class ParticipantEntrySerializer(serializers.Serializer):
@@ -204,11 +204,11 @@ class ParticipantEntrySerializer(serializers.Serializer):
 
     def create(self, validated_data):
         """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
+        raise NotImplementedError("ParticipantEntrySerializer is validation-only")
 
     def update(self, instance, validated_data):
         """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
+        raise NotImplementedError("ParticipantEntrySerializer is validation-only")
 
 
 class CreationCallbackSerializer(serializers.Serializer):
@@ -218,8 +218,22 @@ class CreationCallbackSerializer(serializers.Serializer):
 
     def create(self, validated_data):
         """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
+        raise NotImplementedError("CreationCallbackSerializer is validation-only")
 
     def update(self, instance, validated_data):
         """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
+        raise NotImplementedError("CreationCallbackSerializer is validation-only")
+
+
+class RoomInviteSerializer(serializers.Serializer):
+    """Validate room invite creation data."""
+
+    emails = serializers.ListField(child=serializers.EmailField(), allow_empty=False)
+
+    def create(self, validated_data):
+        """Not implemented as this is a validation-only serializer."""
+        raise NotImplementedError("RoomInviteSerializer is validation-only")
+
+    def update(self, instance, validated_data):
+        """Not implemented as this is a validation-only serializer."""
+        raise NotImplementedError("RoomInviteSerializer is validation-only")

src/backend/core/api/viewsets.py

@@ -2,6 +2,7 @@
 
 import uuid
 from logging import getLogger
+from urllib.parse import urlparse
 
 from django.conf import settings
 from django.db.models import Q
@@ -20,7 +21,8 @@ from rest_framework import (
     status as drf_status,
 )
 
-from core import models, utils
+from core import enums, models, utils
+from core.recording.enums import FileExtension
 from core.recording.event.authentication import StorageEventAuthentication
 from core.recording.event.exceptions import (
     InvalidBucketError,
@@ -39,6 +41,7 @@ from core.recording.worker.factories import (
 from core.recording.worker.mediator import (
     WorkerServiceMediator,
 )
+from core.services.invitation import InvitationService
 from core.services.livekit_events import (
     LiveKitEventsService,
     LiveKitWebhookError,
@@ -363,7 +366,7 @@ class RoomViewSet(
 
     @decorators.action(
         detail=True,
-        methods=["POST"],
+        methods=["post"],
         url_path="request-entry",
         permission_classes=[],
         throttle_classes=[RequestEntryAnonRateThrottle],
@@ -446,7 +449,7 @@ class RoomViewSet(
 
     @decorators.action(
         detail=False,
-        methods=["POST"],
+        methods=["post"],
         url_path="webhooks-livekit",
         permission_classes=[],
     )
@@ -472,7 +475,7 @@ class RoomViewSet(
 
     @decorators.action(
         detail=False,
-        methods=["POST"],
+        methods=["post"],
         url_path="creation-callback",
         permission_classes=[],
         throttle_classes=[CreationCallbackAnonRateThrottle],
@@ -495,6 +498,38 @@ class RoomViewSet(
             {"status": "success", "room": room}, status=drf_status.HTTP_200_OK
         )
 
+    @decorators.action(
+        detail=True,
+        methods=["post"],
+        url_path="invite",
+        permission_classes=[
+            permissions.HasPrivilegesOnRoom,
+        ],
+    )
+    def invite(self, request, pk=None):  # pylint: disable=unused-argument
+        """Send email invitations to join a room.
+
+        This API endpoint allows a user with appropriate privileges to send email invitations
+        to one or more recipients, inviting them to join the specified room.
+        """
+
+        room = self.get_object()
+
+        serializer = serializers.RoomInviteSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        emails = serializer.validated_data.get("emails")
+        emails = list(set(emails))
+
+        InvitationService().invite_to_room(
+            room=room, sender=request.user, emails=emails
+        )
+
+        return drf_response.Response(
+            {"status": "success", "message": "invitations sent"},
+            status=drf_status.HTTP_200_OK,
+        )
+
 
 class ResourceAccessListModelMixin:
     """List mixin for resource access API."""
@@ -544,6 +579,7 @@ class ResourceAccessViewSet(
 class RecordingViewSet(
     mixins.DestroyModelMixin,
     mixins.ListModelMixin,
+    mixins.RetrieveModelMixin,
     viewsets.GenericViewSet,
 ):
     """
@@ -617,3 +653,85 @@ class RecordingViewSet(
         return drf_response.Response(
             {"message": "Event processed."},
         )
+
+    def _auth_get_original_url(self, request):
+        """
+        Extracts and parses the original URL from the "HTTP_X_ORIGINAL_URL" header.
+        Raises PermissionDenied if the header is missing.
+        The original url is passed by nginx in the "HTTP_X_ORIGINAL_URL" header.
+        See corresponding ingress configuration in Helm chart and read about the
+        nginx.ingress.kubernetes.io/auth-url annotation to understand how the Nginx ingress
+        is configured to do this.
+        Based on the original url and the logged-in user, we must decide if we authorize Nginx
+        to let this request go through (by returning a 200 code) or if we block it (by returning
+        a 403 error). Note that we return 403 errors without any further details for security
+        reasons.
+        """
+        # Extract the original URL from the request header
+        original_url = request.META.get("HTTP_X_ORIGINAL_URL")
+        if not original_url:
+            logger.debug("Missing HTTP_X_ORIGINAL_URL header in subrequest")
+            raise drf_exceptions.PermissionDenied()
+
+        logger.debug("Original url: '%s'", original_url)
+        return urlparse(original_url)
+
+    def _auth_get_url_params(self, pattern, fragment):
+        """
+        Extracts URL parameters from the given fragment using the specified regex pattern.
+        Raises PermissionDenied if parameters cannot be extracted.
+        """
+
+        match = pattern.search(fragment)
+
+        try:
+            return match.groupdict()
+        except (ValueError, AttributeError) as exc:
+            logger.debug("Failed to extract parameters from subrequest URL: %s", exc)
+            raise drf_exceptions.PermissionDenied() from exc
+
+    @decorators.action(detail=False, methods=["get"], url_path="media-auth")
+    def media_auth(self, request, *args, **kwargs):
+        """
+        This view is used by an Nginx subrequest to control access to a recording's
+        media file.
+        When we let the request go through, we compute authorization headers that will be added to
+        the request going through thanks to the nginx.ingress.kubernetes.io/auth-response-headers
+        annotation. The request will then be proxied to the object storage backend who will
+        respond with the file after checking the signature included in headers.
+        """
+
+        parsed_url = self._auth_get_original_url(request)
+
+        url_params = self._auth_get_url_params(
+            enums.RECORDING_STORAGE_URL_PATTERN, parsed_url.path
+        )
+
+        user = request.user
+        recording_id = url_params["recording_id"]
+
+        extension = url_params["extension"]
+        if extension not in [item.value for item in FileExtension]:
+            raise drf_exceptions.ValidationError({"detail": "Unsupported extension."})
+
+        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 extension != recording.extension:
+            raise drf_exceptions.NotFound("No recording found with this extension.")
+
+        abilities = recording.get_abilities(user)
+
+        if not abilities["retrieve"]:
+            logger.debug("User '%s' lacks permission for attachment", user.id)
+            raise drf_exceptions.PermissionDenied()
+
+        if not recording.is_saved:
+            logger.debug("Recording '%s' has not been saved", recording)
+            raise drf_exceptions.PermissionDenied()
+
+        request = utils.generate_s3_authorization_headers(recording.key)
+
+        return drf_response.Response("authorized", headers=request.headers, status=200)

src/backend/core/enums.py

@@ -2,9 +2,21 @@
 Core application enums declaration
 """
 
+import re
+
 from django.conf import global_settings, settings
 from django.utils.translation import gettext_lazy as _
 
+UUID_REGEX = (
+    r"[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
+)
+FILE_EXT_REGEX = r"[a-zA-Z0-9]{1,10}"
+
+# pylint: disable=line-too-long
+RECORDING_STORAGE_URL_PATTERN = re.compile(
+    f"/media/{settings.RECORDING_OUTPUT_FOLDER}/(?P<recording_id>{UUID_REGEX:s}).(?P<extension>{FILE_EXT_REGEX:s})"
+)
+
 # Django sets `LANGUAGES` by default with all supported languages. We can use it for
 # the choice of languages which should not be limited to the few languages active in
 # the app.

src/backend/core/models.py

@@ -18,6 +18,8 @@ from django.utils.translation import gettext_lazy as _
 
 from timezone_field import TimeZoneField
 
+from .recording.enums import FileExtension
+
 logger = getLogger(__name__)
 
 
@@ -576,6 +578,29 @@ class Recording(BaseModel):
             RecordingStatusChoices.STOPPED,
         }
 
+    @property
+    def is_saved(self) -> bool:
+        """Check if the recording is in a saved state."""
+        return self.status in {
+            RecordingStatusChoices.NOTIFICATION_SUCCEEDED,
+            RecordingStatusChoices.SAVED,
+        }
+
+    @property
+    def extension(self):
+        """Get recording extension based on its mode."""
+        extensions = {
+            RecordingModeChoices.TRANSCRIPT: FileExtension.OGG.value,
+            RecordingModeChoices.SCREEN_RECORDING: FileExtension.MP4.value,
+        }
+        return extensions.get(self.mode, FileExtension.MP4.value)
+
+    @property
+    def key(self):
+        """Generate the file key based on recording mode."""
+
+        return f"{settings.RECORDING_OUTPUT_FOLDER}/{self.id}.{self.extension}"
+
 
 class RecordingAccess(BaseAccess):
     """Relation model to give access to a recording for a user or a team with a role."""

src/backend/core/recording/enums.py

@@ -0,0 +1,10 @@
+"""Enums related to recordings."""
+
+from enum import Enum
+
+
+class FileExtension(Enum):
+    """Enum for file extensions used in recordings."""
+
+    OGG = "ogg"
+    MP4 = "mp4"

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

@@ -1,8 +1,13 @@
 """Service to notify external services when a new recording is ready."""
 
 import logging
+import smtplib
 
 from django.conf import settings
+from django.core.mail import send_mail
+from django.template.loader import render_to_string
+from django.utils.translation import get_language, override
+from django.utils.translation import gettext_lazy as _
 
 import requests
 
@@ -21,10 +26,7 @@ class NotificationService:
             return self._notify_summary_service(recording)
 
         if recording.mode == models.RecordingModeChoices.SCREEN_RECORDING:
-            logger.warning(
-                "Screen recording mode not implemented for recording %s", recording.id
-            )
-            return False
+            return self._notify_user_by_email(recording)
 
         logger.error(
             "Unknown recording mode %s for recording %s",
@@ -33,6 +35,59 @@ class NotificationService:
         )
         return False
 
+    @staticmethod
+    def _notify_user_by_email(recording) -> bool:
+        """
+        Send an email notification to recording owners when their recording is ready.
+
+        The email includes a direct link that redirects owners to a dedicated download
+        page in the frontend where they can access their specific recording.
+        """
+
+        owner_accesses = models.RecordingAccess.objects.select_related("user").filter(
+            role=models.RoleChoices.OWNER,
+            recording_id=recording.id,
+        )
+
+        if not owner_accesses:
+            logger.error("No owner found for recording %s", recording.id)
+            return False
+
+        language = get_language()
+
+        context = {
+            "brandname": settings.EMAIL_BRAND_NAME,
+            "support_email": settings.EMAIL_SUPPORT_EMAIL,
+            "logo_img": settings.EMAIL_LOGO_IMG,
+            "domain": settings.EMAIL_DOMAIN,
+            "room_name": recording.room.name,
+            "recording_date": recording.created_at.strftime("%A %d %B %Y"),
+            "recording_time": recording.created_at.strftime("%H:%M"),
+            "link": f"{settings.SCREEN_RECORDING_BASE_URL}/{recording.id}",
+        }
+
+        emails = [access.user.email for access in owner_accesses]
+
+        with override(language):
+            msg_html = render_to_string("mail/html/screen_recording.html", context)
+            msg_plain = render_to_string("mail/text/screen_recording.txt", context)
+            subject = str(_("Your recording is ready"))  # Force translation
+
+            try:
+                send_mail(
+                    subject.capitalize(),
+                    msg_plain,
+                    settings.EMAIL_FROM,
+                    emails,
+                    html_message=msg_html,
+                    fail_silently=False,
+                )
+            except smtplib.SMTPException as exception:
+                logger.error("notification could not be sent: %s", exception)
+                return False
+
+        return True
+
     @staticmethod
     def _notify_summary_service(recording):
         """Notify summary service about a new recording."""
@@ -57,10 +112,8 @@ class NotificationService:
             logger.error("No owner found for recording %s", recording.id)
             return False
 
-        key = f"{settings.RECORDING_OUTPUT_FOLDER}/{recording.id}.ogg"
-
         payload = {
-            "filename": key,
+            "filename": recording.key,
             "email": owner_access.user.email,
             "sub": owner_access.user.sub,
         }

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

@@ -7,6 +7,7 @@ from asgiref.sync import async_to_sync
 from livekit import api as livekit_api
 from livekit.api.egress_service import EgressService
 
+from ..enums import FileExtension
 from .exceptions import WorkerConnectionError, WorkerResponseError
 from .factories import WorkerServiceConfig
 
@@ -89,7 +90,9 @@ class VideoCompositeEgressService(BaseEgressService):
 
         # Save room's recording as a mp4 video file.
         file_type = livekit_api.EncodedFileType.MP4
-        filepath = self._get_filepath(filename=recording_id, extension="mp4")
+        filepath = self._get_filepath(
+            filename=recording_id, extension=FileExtension.MP4.value
+        )
 
         file_output = livekit_api.EncodedFileOutput(
             file_type=file_type,
@@ -98,8 +101,7 @@ class VideoCompositeEgressService(BaseEgressService):
         )
 
         request = livekit_api.RoomCompositeEgressRequest(
-            room_name=room_name,
-            file_outputs=[file_output],
+            room_name=room_name, file_outputs=[file_output], layout="speaker-light"
         )
 
         response = self._handle_request(request, "start_room_composite_egress")
@@ -120,7 +122,9 @@ class AudioCompositeEgressService(BaseEgressService):
 
         # Save room's recording as an ogg audio file.
         file_type = livekit_api.EncodedFileType.OGG
-        filepath = self._get_filepath(filename=recording_id, extension="ogg")
+        filepath = self._get_filepath(
+            filename=recording_id, extension=FileExtension.OGG.value
+        )
 
         file_output = livekit_api.EncodedFileOutput(
             file_type=file_type,

src/backend/core/services/invitation.py

@@ -0,0 +1,59 @@
+"""Invitation Service."""
+
+import smtplib
+from logging import getLogger
+
+from django.conf import settings
+from django.core.mail import send_mail
+from django.template.loader import render_to_string
+from django.utils.translation import get_language, override
+from django.utils.translation import gettext_lazy as _
+
+logger = getLogger(__name__)
+
+
+class InvitationError(Exception):
+    """Exception raised when invitation emails cannot be sent."""
+
+    status_code = 500
+
+
+class InvitationService:
+    """Service for invitations to users."""
+
+    @staticmethod
+    def invite_to_room(room, sender, emails):
+        """Send invitation emails to join a room."""
+
+        language = get_language()
+
+        context = {
+            "brandname": settings.EMAIL_BRAND_NAME,
+            "logo_img": settings.EMAIL_LOGO_IMG,
+            "domain": settings.EMAIL_DOMAIN,
+            "room_url": f"{settings.EMAIL_APP_BASE_URL}/{room.slug}",
+            "room_link": f"{settings.EMAIL_DOMAIN}/{room.slug}",
+            "sender_email": sender.email,
+        }
+
+        with override(language):
+            msg_html = render_to_string("mail/html/invitation.html", context)
+            msg_plain = render_to_string("mail/text/invitation.txt", context)
+            subject = str(
+                _(
+                    f"Video call in progress: {sender.email} is waiting for you to connect"
+                )
+            )  # Force translation
+
+            try:
+                send_mail(
+                    subject,
+                    msg_plain,
+                    settings.EMAIL_FROM,
+                    emails,
+                    html_message=msg_html,
+                    fail_silently=False,
+                )
+            except smtplib.SMTPException as e:
+                logger.error("invitation to %s was not sent: %s", emails, e)
+                raise InvitationError("Could not send invitation") from e

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

@@ -0,0 +1,167 @@
+"""
+Test event notification.
+"""
+
+# pylint: disable=E1128,W0621,W0613,W0212
+
+import smtplib
+from unittest import mock
+
+from django.contrib.sites.models import Site
+
+import pytest
+
+from core import factories, models
+from core.recording.event.notification import NotificationService, notification_service
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def mocked_current_site():
+    """Mocks the Site.objects.get_current()to return a controlled predefined domain."""
+
+    site_mock = mock.Mock()
+    site_mock.domain = "test-domain.com"
+
+    with mock.patch.object(
+        Site.objects, "get_current", return_value=site_mock
+    ) as patched:
+        yield patched
+
+
+@mock.patch.object(NotificationService, "_notify_summary_service", return_value=True)
+def test_notify_external_services_transcript_mode(mock_notify_summary):
+    """Test notification routing for transcript mode recordings."""
+
+    service = NotificationService()
+
+    recording = factories.RecordingFactory(mode=models.RecordingModeChoices.TRANSCRIPT)
+    result = service.notify_external_services(recording)
+
+    assert result is True
+    mock_notify_summary.assert_called_once_with(recording)
+
+
+@mock.patch.object(NotificationService, "_notify_user_by_email", return_value=True)
+def test_notify_external_services_screen_recording_mode(mock_notify_email):
+    """Test notification routing for screen recording mode."""
+
+    service = NotificationService()
+
+    recording = factories.RecordingFactory(
+        mode=models.RecordingModeChoices.SCREEN_RECORDING
+    )
+
+    result = service.notify_external_services(recording)
+
+    assert result is True
+    mock_notify_email.assert_called_once_with(recording)
+
+
+def test_notify_external_services_unknown_mode(caplog):
+    """Test notification for unknown recording mode."""
+    recording = factories.RecordingFactory()
+
+    # Bypass validation
+    recording.mode = "unknown"
+
+    service = NotificationService()
+
+    result = service.notify_external_services(recording)
+
+    assert result is False
+    assert f"Unknown recording mode unknown for recording {recording.id}" in caplog.text
+
+
+def test_notify_user_by_email_success(mocked_current_site, settings):
+    """Test successful email notification to recording owners."""
+    settings.EMAIL_BRAND_NAME = "ACME"
+    settings.EMAIL_SUPPORT_EMAIL = "support@acme.com"
+    settings.EMAIL_LOGO_IMG = "https://acme.com/logo"
+    settings.SCREEN_RECORDING_BASE_URL = "https://acme.com/recordings"
+    settings.EMAIL_FROM = "notifications@acme.com"
+
+    recording = factories.RecordingFactory(room__name="Conference Room A")
+
+    owners = [
+        factories.UserRecordingAccessFactory(
+            recording=recording, role=models.RoleChoices.OWNER
+        ).user,
+        factories.UserRecordingAccessFactory(
+            recording=recording, role=models.RoleChoices.OWNER
+        ).user,
+    ]
+    owner_emails = [owner.email for owner in owners]
+
+    # Create non-owner users to verify they don't receive emails
+    factories.UserRecordingAccessFactory(
+        recording=recording, role=models.RoleChoices.MEMBER
+    )
+    factories.UserRecordingAccessFactory(
+        recording=recording, role=models.RoleChoices.ADMIN
+    )
+
+    notification_service = NotificationService()
+
+    with mock.patch("core.recording.event.notification.send_mail") as mock_send_mail:
+        result = notification_service._notify_user_by_email(recording)
+
+        assert result is True
+        mock_send_mail.assert_called_once()
+
+        subject, body, sender, recipients = mock_send_mail.call_args[0]
+
+        assert subject == "Your recording is ready"
+
+        # Verify email contains expected content
+        required_content = [
+            "ACME",  # Brand name
+            "support@acme.com",  # Support email
+            "https://acme.com/logo",  # Logo URL
+            f"https://acme.com/recordings/{recording.id}",  # Recording link
+            "Conference Room A",  # Room name
+            recording.created_at.strftime("%A %d %B %Y"),  # Formatted date
+            recording.created_at.strftime("%H:%M"),  # Formatted time
+        ]
+
+        for content in required_content:
+            assert content in body
+
+        assert sender == "notifications@acme.com"
+
+        # Verify all owners received the email (order-independent comparison)
+        assert sorted(recipients) == sorted(owner_emails)
+
+
+def test_notify_user_by_email_no_owners(mocked_current_site, caplog):
+    """Test email notification when no owners are found."""
+
+    # Recording with no access
+    recording = factories.RecordingFactory()
+
+    result = notification_service._notify_user_by_email(recording)
+
+    assert result is False
+    assert f"No owner found for recording {recording.id}" in caplog.text
+
+
+def test_notify_user_by_email_smtp_exception(mocked_current_site, caplog):
+    """Test email notification when an exception occurs."""
+
+    recording = factories.RecordingFactory(room__name="Conference Room A")
+    factories.UserRecordingAccessFactory(
+        recording=recording, role=models.RoleChoices.OWNER
+    )
+
+    notification_service = NotificationService()
+
+    with mock.patch(
+        "core.recording.event.notification.send_mail",
+        side_effect=smtplib.SMTPException("SMTP Error"),
+    ) as mock_send_mail:
+        result = notification_service._notify_user_by_email(recording)
+
+        assert result is False
+        mock_send_mail.assert_called_once()
+        assert "notification could not be sent:" in caplog.text

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

@@ -22,6 +22,27 @@ def test_api_recordings_list_anonymous():
     assert response.status_code == 401
 
 
+def test_api_recordings_list_authenticated_no_recording():
+    """
+    Authenticated users listing recordings should only
+    see recordings to which they have access.
+    """
+    user = factories.UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    other_user = factories.UserFactory()
+    factories.UserRecordingAccessFactory(user=other_user)
+
+    response = client.get(
+        "/api/v1.0/recordings/",
+    )
+
+    assert response.status_code == 200
+    results = response.json()["results"]
+    assert results == []
+
+
 @pytest.mark.parametrize(
     "role",
     ["administrator", "member", "owner"],
@@ -57,7 +78,9 @@ def test_api_recordings_list_authenticated_direct(role):
     assert expected_ids == result_ids
     assert results[0] == {
         "id": str(recording.id),
+        "key": recording.key,
         "created_at": recording.created_at.isoformat().replace("+00:00", "Z"),
+        "mode": recording.mode,
         "room": {
             "access_level": str(room.access_level),
             "id": str(room.id),

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

@@ -0,0 +1,284 @@
+"""
+Test media-auth authorization API endpoint in docs core app.
+"""
+
+from io import BytesIO
+from urllib.parse import urlparse
+from uuid import uuid4
+
+from django.conf import settings
+from django.core.files.storage import default_storage
+from django.utils import timezone
+
+import pytest
+import requests
+from rest_framework.test import APIClient
+
+from core import models
+from core.factories import RecordingFactory, UserFactory, UserRecordingAccessFactory
+
+pytestmark = pytest.mark.django_db
+
+
+def test_api_documents_media_auth_unauthenticated():
+    """
+    Test that unauthenticated requests to download media are rejected
+    """
+    original_url = f"http://localhost/media/recordings/{uuid4()!s}.mp4"
+
+    response = APIClient().get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 401
+
+
+def test_api_documents_media_auth_wrong_path():
+    """
+    Test that media URLs with incorrect path structures are rejected
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    original_url = f"http://localhost/media/wrong-path/{uuid4()!s}.mp4"
+
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 403
+
+
+def test_api_documents_media_auth_unknown_recording():
+    """
+    Test that requests for non-existent recordings are properly handled
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    original_url = f"http://localhost/media/recordings/{uuid4()!s}.mp4"
+
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 404
+
+
+def test_api_documents_media_auth_no_abilities():
+    """
+    Test that users without any access permissions cannot download recordings
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    recording = RecordingFactory(status=models.RecordingStatusChoices.SAVED)
+    original_url = f"http://localhost/media/recordings/{recording.id!s}.mp4"
+
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 403
+
+
+def test_api_documents_media_auth_wrong_abilities():
+    """
+    Test that users with insufficient role permissions cannot download recordings
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    recording = RecordingFactory(status=models.RecordingStatusChoices.SAVED)
+
+    UserRecordingAccessFactory(user=user, recording=recording, role="member")
+
+    original_url = f"http://localhost/media/recordings/{recording.id!s}.mp4"
+
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 403
+
+
+@pytest.mark.parametrize("wrong_status", ["initiated", "active", "failed_to_stop"])
+def test_api_documents_media_auth_unsaved(wrong_status):
+    """
+    Test that recordings that aren't in 'saved' status cannot be downloaded
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    recording = RecordingFactory(status=wrong_status)
+    UserRecordingAccessFactory(user=user, recording=recording, role="owner")
+
+    original_url = f"http://localhost/media/recordings/{recording.id!s}.mp4"
+
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 403
+
+
+def test_api_documents_media_auth_mismatched_extension():
+    """
+    Test that requests with mismatched file extensions are rejected
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    recording = RecordingFactory(
+        status=models.RecordingStatusChoices.SAVED,
+        mode=models.RecordingModeChoices.TRANSCRIPT,
+    )
+    UserRecordingAccessFactory(user=user, recording=recording, role="owner")
+
+    original_url = f"http://localhost/media/recordings/{recording.id!s}.mp4"
+
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 404
+    assert response.json() == {"detail": "No recording found with this extension."}
+
+
+@pytest.mark.parametrize(
+    "wrong_extension", ["jpg", "txt", "mp3"], ids=["image", "text", "audio"]
+)
+def test_api_documents_media_auth_wrong_extension(wrong_extension):
+    """
+    Trying to download a recording with an unsupported extension should return
+    a validation error (400) with details about allowed extensions.
+    """
+    user = UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    recording = RecordingFactory(status=models.RecordingStatusChoices.SAVED)
+    UserRecordingAccessFactory(user=user, recording=recording, role="owner")
+
+    original_url = (
+        f"http://localhost/media/recordings/{recording.id!s}.{wrong_extension}"
+    )
+
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 400
+    assert response.json() == {"detail": "Unsupported extension."}
+
+
+@pytest.mark.parametrize("mode", ["screen_recording", "transcript"])
+def test_api_documents_media_auth_success_owner(mode):
+    """
+    Test downloading a recording when logged in and authorized.
+    Verifies S3 authentication headers and successful file retrieval.
+    """
+    user = UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    recording = RecordingFactory(status=models.RecordingStatusChoices.SAVED, mode=mode)
+    UserRecordingAccessFactory(user=user, recording=recording, role="owner")
+
+    default_storage.connection.meta.client.put_object(
+        Bucket=default_storage.bucket_name,
+        Key=recording.key,
+        Body=BytesIO(b"my prose"),
+        ContentType="text/plain",
+    )
+
+    original_url = f"http://localhost/media/{recording.key:s}"
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 200
+
+    authorization = response["Authorization"]
+    assert "AWS4-HMAC-SHA256 Credential=" in authorization
+    assert (
+        "SignedHeaders=host;x-amz-content-sha256;x-amz-date, Signature="
+        in authorization
+    )
+    assert response["X-Amz-Date"] == timezone.now().strftime("%Y%m%dT%H%M%SZ")
+
+    s3_url = urlparse(settings.AWS_S3_ENDPOINT_URL)
+    file_url = f"{settings.AWS_S3_ENDPOINT_URL:s}/meet-media-storage/{recording.key:s}"
+    response = requests.get(
+        file_url,
+        headers={
+            "authorization": authorization,
+            "x-amz-date": response["x-amz-date"],
+            "x-amz-content-sha256": response["x-amz-content-sha256"],
+            "Host": f"{s3_url.hostname:s}:{s3_url.port:d}",
+        },
+        timeout=1,
+    )
+    assert response.content.decode("utf-8") == "my prose"
+
+
+@pytest.mark.parametrize("mode", ["screen_recording", "transcript"])
+def test_api_documents_media_auth_success_administrator(mode):
+    """
+    Test downloading a recording when logged in and authorized.
+    Verifies S3 authentication headers and successful file retrieval.
+    """
+    user = UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    recording = RecordingFactory(status=models.RecordingStatusChoices.SAVED, mode=mode)
+    UserRecordingAccessFactory(user=user, recording=recording, role="administrator")
+
+    default_storage.connection.meta.client.put_object(
+        Bucket=default_storage.bucket_name,
+        Key=recording.key,
+        Body=BytesIO(b"my prose"),
+        ContentType="text/plain",
+    )
+
+    original_url = f"http://localhost/media/{recording.key:s}"
+    response = client.get(
+        "/api/v1.0/recordings/media-auth/", HTTP_X_ORIGINAL_URL=original_url
+    )
+
+    assert response.status_code == 200
+
+    authorization = response["Authorization"]
+    assert "AWS4-HMAC-SHA256 Credential=" in authorization
+    assert (
+        "SignedHeaders=host;x-amz-content-sha256;x-amz-date, Signature="
+        in authorization
+    )
+    assert response["X-Amz-Date"] == timezone.now().strftime("%Y%m%dT%H%M%SZ")
+
+    s3_url = urlparse(settings.AWS_S3_ENDPOINT_URL)
+    file_url = f"{settings.AWS_S3_ENDPOINT_URL:s}/meet-media-storage/{recording.key:s}"
+    response = requests.get(
+        file_url,
+        headers={
+            "authorization": authorization,
+            "x-amz-date": response["x-amz-date"],
+            "x-amz-content-sha256": response["x-amz-content-sha256"],
+            "Host": f"{s3_url.hostname:s}:{s3_url.port:d}",
+        },
+        timeout=1,
+    )
+    assert response.content.decode("utf-8") == "my prose"

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

@@ -0,0 +1,155 @@
+"""
+Test recordings API endpoints in the Meet core app: retrieve.
+"""
+
+import pytest
+from rest_framework.test import APIClient
+
+from ...factories import RecordingFactory, UserFactory, UserRecordingAccessFactory
+from ...models import RecordingStatusChoices
+
+pytestmark = pytest.mark.django_db
+
+
+def test_api_recording_retrieve_anonymous():
+    """Anonymous users should not be able to retrieve recordings."""
+    recording = RecordingFactory()
+    client = APIClient()
+    response = client.get(f"/api/v1.0/recordings/{recording.id!s}/")
+
+    assert response.status_code == 401
+    assert response.json() == {
+        "detail": "Authentication credentials were not provided."
+    }
+
+
+def test_api_recording_retrieve_authenticated():
+    """Authenticated users without access receive 404 when requesting recordings.
+
+    The API returns 404 instead of 403 to avoid revealing the existence of
+    resources the user doesn't have permission to access.
+    """
+    user = UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    other_user = UserFactory()
+    recording = UserRecordingAccessFactory(user=other_user).recording
+
+    response = client.get(f"/api/v1.0/recordings/{recording.id!s}/")
+    assert response.status_code == 404
+    assert response.json() == {"detail": "No Recording matches the given query."}
+
+
+def test_api_recording_retrieve_members():
+    """
+    A user who is a member of a recording should not be able to retrieve it.
+    """
+    user = UserFactory()
+    recording = RecordingFactory()
+
+    UserRecordingAccessFactory(recording=recording, user=user, role="member")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.get(f"/api/v1.0/recordings/{recording.id!s}/")
+    assert response.status_code == 403
+    assert response.json() == {
+        "detail": "You do not have permission to perform this action."
+    }
+
+
+def test_api_recording_retrieve_administrators():
+    """A user who is an administrator of a recording should be able to retrieve it."""
+
+    user = UserFactory()
+    recording = RecordingFactory()
+
+    UserRecordingAccessFactory(recording=recording, user=user, role="administrator")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.get(f"/api/v1.0/recordings/{recording.id!s}/")
+
+    assert response.status_code == 200
+    content = response.json()
+    room = recording.room
+
+    assert content == {
+        "id": str(recording.id),
+        "key": recording.key,
+        "room": {
+            "access_level": str(room.access_level),
+            "id": str(room.id),
+            "name": room.name,
+            "slug": room.slug,
+        },
+        "created_at": recording.created_at.isoformat().replace("+00:00", "Z"),
+        "updated_at": recording.updated_at.isoformat().replace("+00:00", "Z"),
+        "status": str(recording.status),
+        "mode": str(recording.mode),
+    }
+
+
+def test_api_recording_retrieve_owners():
+    """A user who is an owner of a recording should be able to retrieve it."""
+    user = UserFactory()
+    recording = RecordingFactory()
+
+    UserRecordingAccessFactory(recording=recording, user=user, role="owner")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.get(f"/api/v1.0/recordings/{recording.id!s}/")
+
+    assert response.status_code == 200
+    content = response.json()
+    room = recording.room
+
+    assert content == {
+        "id": str(recording.id),
+        "key": recording.key,
+        "room": {
+            "access_level": str(room.access_level),
+            "id": str(room.id),
+            "name": room.name,
+            "slug": room.slug,
+        },
+        "created_at": recording.created_at.isoformat().replace("+00:00", "Z"),
+        "updated_at": recording.updated_at.isoformat().replace("+00:00", "Z"),
+        "status": str(recording.status),
+        "mode": str(recording.mode),
+    }
+
+
+@pytest.mark.parametrize(
+    "status",
+    [
+        RecordingStatusChoices.INITIATED,
+        RecordingStatusChoices.ACTIVE,
+        RecordingStatusChoices.SAVED,
+        RecordingStatusChoices.FAILED_TO_START,
+        RecordingStatusChoices.FAILED_TO_STOP,
+        RecordingStatusChoices.ABORTED,
+    ],
+)
+def test_api_recording_retrieve_any_status(status):
+    """Test that recordings with any status can be retrieved."""
+    user = UserFactory()
+    recording = RecordingFactory(status=status)
+
+    UserRecordingAccessFactory(recording=recording, user=user, role="owner")
+
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.get(f"/api/v1.0/recordings/{recording.id!s}/")
+
+    assert response.status_code == 200
+    content = response.json()
+    assert content["id"] == str(recording.id)
+    assert content["status"] == status

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

@@ -0,0 +1,295 @@
+"""
+Test rooms API endpoints in the Meet core app: invite.
+"""
+
+# pylint: disable=W0621,W0613
+
+import json
+import random
+from unittest import mock
+
+import pytest
+from rest_framework.test import APIClient
+
+from ...factories import RoomFactory, UserFactory
+from ...services.invitation import InvitationError, InvitationService
+
+pytestmark = pytest.mark.django_db
+
+
+def test_api_rooms_invite_anonymous():
+    """Test anonymous users should not be allowed to invite people to rooms."""
+
+    client = APIClient()
+    room = RoomFactory()
+
+    data = {"emails": ["toto@yopmail.com"]}
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 401
+
+
+def test_api_rooms_invite_no_access():
+    """Test non-privileged users should not be allowed to invite people to rooms."""
+
+    client = APIClient()
+    room = RoomFactory()
+
+    user = UserFactory()
+    client.force_login(user)
+
+    data = {"emails": ["toto@yopmail.com"]}
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 403
+    assert response.json() == {
+        "detail": "You must have privileges on room to perform this action.",
+    }
+
+
+def test_api_rooms_invite_member():
+    """Test member users should not be allowed to invite people to rooms."""
+
+    client = APIClient()
+    room = RoomFactory()
+
+    user = UserFactory()
+    client.force_login(user)
+
+    room.accesses.create(user=user, role="member")
+
+    data = {"emails": ["toto@yopmail.com"]}
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 403
+    assert response.json() == {
+        "detail": "You must have privileges on room to perform this action.",
+    }
+
+
+def test_api_rooms_invite_missing_emails():
+    """Test missing email list should return validation error."""
+
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+
+    room.accesses.create(user=user, role=random.choice(["administrator", "owner"]))
+
+    client.force_login(user)
+
+    data = {"foo": []}
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert response.json() == {
+        "emails": [
+            "This field is required.",
+        ]
+    }
+
+
+def test_api_rooms_invite_empty_emails():
+    """Test empty email list should return validation error."""
+
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+
+    room.accesses.create(user=user, role=random.choice(["administrator", "owner"]))
+
+    client.force_login(user)
+
+    data = {"emails": []}
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert response.json() == {
+        "emails": [
+            "This list may not be empty.",
+        ]
+    }
+
+
+def test_api_rooms_invite_invalid_emails():
+    """Test invalid email addresses should return validation errors."""
+
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+
+    room.accesses.create(user=user, role=random.choice(["administrator", "owner"]))
+
+    client.force_login(user)
+
+    data = {"emails": ["abdc", "efg"]}
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert response.json() == {
+        "emails": {
+            "0": ["Enter a valid email address."],
+            "1": ["Enter a valid email address."],
+        }
+    }
+
+
+def test_api_rooms_invite_partially_invalid_emails():
+    """Test partially invalid email addresses should return validation errors."""
+
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+
+    room.accesses.create(user=user, role=random.choice(["administrator", "owner"]))
+
+    client.force_login(user)
+
+    data = {"emails": ["fabrice@yopmail.com", "efg"]}
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert response.json() == {
+        "emails": {
+            "1": ["Enter a valid email address."],
+        }
+    }
+
+
+@mock.patch.object(InvitationService, "invite_to_room")
+def test_api_rooms_invite_duplicates(mock_invite_to_room):
+    """Test duplicate emails should be deduplicated before processing."""
+
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+
+    room.accesses.create(user=user, role=random.choice(["administrator", "owner"]))
+
+    client.force_login(user)
+
+    data = {"emails": ["toto@yopmail.com", "toto@yopmail.com", "Toto@yopmail.com"]}
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 200
+    mock_invite_to_room.assert_called_once()
+
+    _, kwargs = mock_invite_to_room.call_args
+
+    assert kwargs["room"] == room
+    assert kwargs["sender"] == user
+    assert sorted(kwargs["emails"]) == sorted(["Toto@yopmail.com", "toto@yopmail.com"])
+
+
+@mock.patch.object(InvitationService, "invite_to_room", side_effect=InvitationError())
+def test_api_rooms_invite_error(mock_invite_to_room):
+    """Test invitation service error should return appropriate error response."""
+
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+
+    room.accesses.create(user=user, role=random.choice(["administrator", "owner"]))
+
+    client.force_login(user)
+
+    data = {"emails": ["toto@yopmail.com", "toto@yopmail.com"]}
+
+    with pytest.raises(InvitationError) as excinfo:
+        client.post(
+            f"/api/v1.0/rooms/{room.id}/invite/",
+            json.dumps(data),
+            content_type="application/json",
+        )
+
+        mock_invite_to_room.assert_called_once()
+        assert "Could not send invitation" in str(excinfo.value)
+
+
+@mock.patch("core.services.invitation.send_mail")
+def test_api_rooms_invite_success(mock_send_mail, settings):
+    """Test privileged users should successfully send invitation emails."""
+
+    settings.EMAIL_BRAND_NAME = "ACME"
+    settings.EMAIL_LOGO_IMG = "https://acme.com/logo"
+    settings.EMAIL_APP_BASE_URL = "https://acme.com"
+    settings.EMAIL_FROM = "notifications@acme.com"
+    settings.EMAIL_DOMAIN = "acme.com"
+
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+
+    room.accesses.create(user=user, role=random.choice(["administrator", "owner"]))
+
+    client.force_login(user)
+
+    data = {"emails": ["fabien@yopmail.com", "gerald@yopmail.com"]}
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/invite/",
+        json.dumps(data),
+        content_type="application/json",
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {"status": "success", "message": "invitations sent"}
+
+    mock_send_mail.assert_called_once()
+
+    subject, body, sender, recipients = mock_send_mail.call_args[0]
+
+    assert (
+        subject == f"Video call in progress: {user.email} is waiting for you to connect"
+    )
+
+    # Verify email contains expected content
+    required_content = [
+        "ACME",  # Brand name
+        "https://acme.com/logo",  # Logo URL
+        f"https://acme.com/{room.slug}",  # Room url
+        f"acme.com/{room.slug}",  # Room link
+    ]
+
+    for content in required_content:
+        assert content in body
+
+    assert sender == "notifications@acme.com"
+
+    # Verify all owners received the email (order-independent comparison)
+    assert sorted(recipients) == sorted(["fabien@yopmail.com", "gerald@yopmail.com"])

src/backend/core/tests/test_models_recording.py

@@ -12,7 +12,8 @@ from core.factories import (
     UserFactory,
     UserRecordingAccessFactory,
 )
-from core.models import Recording, RecordingStatusChoices
+from core.models import Recording, RecordingModeChoices, RecordingStatusChoices
+from core.recording.enums import FileExtension
 
 pytestmark = pytest.mark.django_db
 
@@ -216,3 +217,74 @@ def test_models_recording_worker_id_very_long():
     too_long_id = "w" * 256
     with pytest.raises(ValidationError):
         RecordingFactory(worker_id=too_long_id)
+
+
+# Test key property method
+
+
+def test_models_recording_key_for_transcript(settings):
+    """Test key property returns correct path for transcript mode."""
+
+    settings.RECORDING_OUTPUT_FOLDER = "/custom/path"
+
+    recording = RecordingFactory(mode=RecordingModeChoices.TRANSCRIPT)
+    expected_path = f"/custom/path/{recording.id}.{FileExtension.OGG.value}"
+    assert recording.key == expected_path
+
+
+def test_models_recording_key_for_screen_recording(settings):
+    """Test key property returns correct path for screen recording mode."""
+    settings.RECORDING_OUTPUT_FOLDER = "/custom/path"
+
+    recording = RecordingFactory(mode=RecordingModeChoices.SCREEN_RECORDING)
+    expected_path = f"/custom/path/{recording.id}.{FileExtension.MP4.value}"
+    assert recording.key == expected_path
+
+
+def test_models_recording_key_for_unknown_mode(settings):
+    """Test key property uses default extension for unknown mode."""
+
+    settings.RECORDING_OUTPUT_FOLDER = "/custom/path"
+    recording = RecordingFactory()
+    # Directly set an invalid mode (bypassing validation)
+    recording.mode = "unknown_mode"
+    expected_path = f"/custom/path/{recording.id}.{FileExtension.MP4.value}"
+    assert recording.key == expected_path
+
+
+# Test is_saved method
+
+
+def test_models_recording_is_saved_true():
+    """Test is_saved property returns True for SAVED and NOTIFICATION_SUCCEEDED status."""
+    recording = RecordingFactory(status=RecordingStatusChoices.SAVED)
+    assert recording.is_saved is True
+
+    recording = RecordingFactory(status=RecordingStatusChoices.NOTIFICATION_SUCCEEDED)
+    assert recording.is_saved is True
+
+
+def test_models_recording_is_saved_false_active():
+    """Test is_saved property returns False for ACTIVE status."""
+    recording = RecordingFactory(status=RecordingStatusChoices.ACTIVE)
+    assert recording.is_saved is False
+
+
+def test_models_recording_is_saved_false_initiated():
+    """Test is_saved property returns False for INITIATED status."""
+    recording = RecordingFactory(status=RecordingStatusChoices.INITIATED)
+    assert recording.is_saved is False
+
+
+@pytest.mark.parametrize(
+    "status",
+    [
+        RecordingStatusChoices.FAILED_TO_STOP,
+        RecordingStatusChoices.FAILED_TO_START,
+        RecordingStatusChoices.ABORTED,
+    ],
+)
+def test_models_recording_is_saved_false_error_states(status):
+    """Test is_saved property returns False for error statuses."""
+    recording = RecordingFactory(status=status)
+    assert recording.is_saved is False

src/backend/core/utils.py

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

src/backend/locale/en_US/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-04-03 10:31+0000\n"
+"POT-Creation-Date: 2025-04-14 19:04+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,28 +17,32 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: core/admin.py:31
+#: core/admin.py:26
 msgid "Personal info"
 msgstr ""
 
-#: core/admin.py:33
+#: core/admin.py:39
 msgid "Permissions"
 msgstr ""
 
-#: core/admin.py:45
+#: core/admin.py:51
 msgid "Important dates"
 msgstr ""
 
-#: core/api/serializers.py:128
-msgid "Markdown Body"
+#: core/api/serializers.py:60
+msgid "You must be administrator or owner of a room to add accesses to it."
 msgstr ""
 
-#: core/authentication.py:71
+#: core/authentication/backends.py:77
 msgid "User info contained no recognizable user identification"
 msgstr ""
 
-#: core/authentication.py:91
-msgid "Claims contained no recognizable user identification"
+#: core/authentication/backends.py:102
+msgid "User account is disabled"
+msgstr ""
+
+#: core/authentication/backends.py:142
+msgid "Multiple user accounts share a common email."
 msgstr ""
 
 #: core/models.py:27
@@ -53,156 +57,412 @@ msgstr ""
 msgid "Owner"
 msgstr ""
 
-#: core/models.py:41
-msgid "id"
+#: core/models.py:45
+msgid "Initiated"
 msgstr ""
 
-#: core/models.py:42
-msgid "primary key for the record as UUID"
+#: core/models.py:46
+msgid "Active"
+msgstr ""
+
+#: core/models.py:47
+msgid "Stopped"
 msgstr ""
 
 #: core/models.py:48
-msgid "created on"
+msgid "Saved"
 msgstr ""
 
 #: core/models.py:49
+msgid "Aborted"
+msgstr ""
+
+#: core/models.py:50
+msgid "Failed to Start"
+msgstr ""
+
+#: core/models.py:51
+msgid "Failed to Stop"
+msgstr ""
+
+#: core/models.py:52
+msgid "Notification succeeded"
+msgstr ""
+
+#: core/models.py:79
+msgid "SCREEN_RECORDING"
+msgstr ""
+
+#: core/models.py:80
+msgid "TRANSCRIPT"
+msgstr ""
+
+#: core/models.py:86
+msgid "Public Access"
+msgstr ""
+
+#: core/models.py:87
+msgid "Trusted Access"
+msgstr ""
+
+#: core/models.py:88
+msgid "Restricted Access"
+msgstr ""
+
+#: core/models.py:100
+msgid "id"
+msgstr ""
+
+#: core/models.py:101
+msgid "primary key for the record as UUID"
+msgstr ""
+
+#: core/models.py:107
+msgid "created on"
+msgstr ""
+
+#: core/models.py:108
 msgid "date and time at which a record was created"
 msgstr ""
 
-#: core/models.py:54
+#: core/models.py:113
 msgid "updated on"
 msgstr ""
 
-#: core/models.py:55
+#: core/models.py:114
 msgid "date and time at which a record was last updated"
 msgstr ""
 
-#: core/models.py:75
+#: core/models.py:134
 msgid ""
 "Enter a valid sub. This value may contain only letters, numbers, and @/./+/-/"
 "_ characters."
 msgstr ""
 
-#: core/models.py:81
+#: core/models.py:140
 msgid "sub"
 msgstr ""
 
-#: core/models.py:83
+#: core/models.py:142
 msgid ""
 "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_ "
 "characters only."
 msgstr ""
 
-#: core/models.py:91
+#: core/models.py:150
 msgid "identity email address"
 msgstr ""
 
-#: core/models.py:96
+#: core/models.py:155
 msgid "admin email address"
 msgstr ""
 
-#: core/models.py:103
+#: core/models.py:157
+msgid "full name"
+msgstr ""
+
+#: core/models.py:159
+msgid "short name"
+msgstr ""
+
+#: core/models.py:165
 msgid "language"
 msgstr ""
 
-#: core/models.py:104
+#: core/models.py:166
 msgid "The language in which the user wants to see the interface."
 msgstr ""
 
-#: core/models.py:110
+#: core/models.py:172
 msgid "The timezone in which the user wants to see times."
 msgstr ""
 
-#: core/models.py:113
+#: core/models.py:175
 msgid "device"
 msgstr ""
 
-#: core/models.py:115
+#: core/models.py:177
 msgid "Whether the user is a device or a real user."
 msgstr ""
 
-#: core/models.py:118
+#: core/models.py:180
 msgid "staff status"
 msgstr ""
 
-#: core/models.py:120
+#: core/models.py:182
 msgid "Whether the user can log into this admin site."
 msgstr ""
 
-#: core/models.py:123
+#: core/models.py:185
 msgid "active"
 msgstr ""
 
-#: core/models.py:126
+#: core/models.py:188
 msgid ""
 "Whether this user should be treated as active. Unselect this instead of "
 "deleting accounts."
 msgstr ""
 
-#: core/models.py:138
+#: core/models.py:201
 msgid "user"
 msgstr ""
 
-#: core/models.py:139
+#: core/models.py:202
 msgid "users"
 msgstr ""
 
-#: core/models.py:161
-msgid "title"
+#: core/models.py:261
+msgid "Resource"
 msgstr ""
 
-#: core/models.py:162
-msgid "description"
+#: core/models.py:262
+msgid "Resources"
 msgstr ""
 
-#: core/models.py:163
-msgid "code"
+#: core/models.py:316
+msgid "Resource access"
 msgstr ""
 
-#: core/models.py:164
-msgid "css"
+#: core/models.py:317
+msgid "Resource accesses"
 msgstr ""
 
-#: core/models.py:166
-msgid "public"
+#: core/models.py:323
+msgid "Resource access with this User and Resource already exists."
 msgstr ""
 
-#: core/models.py:168
-msgid "Whether this template is public for anyone to use."
+#: core/models.py:379
+msgid "Visio room configuration"
 msgstr ""
 
-#: core/models.py:174
-msgid "Template"
+#: core/models.py:380
+msgid "Values for Visio parameters to configure the room."
 msgstr ""
 
-#: core/models.py:175
-msgid "Templates"
+#: core/models.py:386 core/models.py:506
+msgid "Room"
 msgstr ""
 
-#: core/models.py:256
-msgid "Template/user relation"
+#: core/models.py:387
+msgid "Rooms"
 msgstr ""
 
-#: core/models.py:257
-msgid "Template/user relations"
+#: core/models.py:517
+msgid "Worker ID"
 msgstr ""
 
-#: core/models.py:263
-msgid "This user is already in this template."
+#: core/models.py:519
+msgid ""
+"Enter an identifier for the worker recording.This ID is retained even when "
+"the worker stops, allowing for easy tracking."
 msgstr ""
 
-#: core/models.py:269
-msgid "This team is already in this template."
+#: core/models.py:527
+msgid "Recording mode"
 msgstr ""
 
-#: core/models.py:275
+#: core/models.py:528
+msgid "Defines the mode of recording being called."
+msgstr ""
+
+#: core/models.py:534
+msgid "Recording"
+msgstr ""
+
+#: core/models.py:535
+msgid "Recordings"
+msgstr ""
+
+#: core/models.py:592
+msgid "Recording/user relation"
+msgstr ""
+
+#: core/models.py:593
+msgid "Recording/user relations"
+msgstr ""
+
+#: core/models.py:599
+msgid "This user is already in this recording."
+msgstr ""
+
+#: core/models.py:605
+msgid "This team is already in this recording."
+msgstr ""
+
+#: core/models.py:611
 msgid "Either user or team must be set, not both."
 msgstr ""
 
-#: meet/settings.py:134
+#: core/recording/event/authentication.py:58
+msgid "Authentication is enabled but token is not configured."
+msgstr ""
+
+#: core/recording/event/authentication.py:70
+msgid "Authorization header is required"
+msgstr ""
+
+#: core/recording/event/authentication.py:78
+msgid "Invalid authorization header."
+msgstr ""
+
+#: core/recording/event/authentication.py:88
+msgid "Invalid token"
+msgstr ""
+
+#: core/recording/event/notification.py:81
+msgid "Your recording is ready"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:160
+#: core/templates/mail/text/invitation.txt:3
+msgid "La Suite Numérique"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:190
+#: core/templates/mail/text/invitation.txt:5
+msgid "Invitation to join a team"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:198
+msgid "Welcome to <strong>Meet</strong>"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:216
+#: core/templates/mail/text/invitation.txt:12
+msgid "Logo"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:226
+#: core/templates/mail/text/invitation.txt:14
+msgid ""
+"We are delighted to welcome you to our community on Meet, your new companion "
+"to collaborate on documents efficiently, intuitively, and securely."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:231
+#: core/templates/mail/text/invitation.txt:15
+msgid ""
+"Our application is designed to help you organize, collaborate, and manage "
+"permissions."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:236
+#: core/templates/mail/text/invitation.txt:16
+msgid "With Meet, you will be able to:"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:237
+#: core/templates/mail/text/invitation.txt:17
+msgid "Create documents."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:238
+#: core/templates/mail/text/invitation.txt:18
+msgid "Invite members of your document or community in just a few clicks."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:249
+#: core/templates/mail/text/invitation.txt:20
+msgid "Visit Meet"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:258
+#: core/templates/mail/text/invitation.txt:22
+msgid ""
+"We are confident that Meet will help you increase efficiency and "
+"productivity while strengthening the bond among members."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:263
+#: core/templates/mail/text/invitation.txt:23
+msgid ""
+"Feel free to explore all the features of the application and share your "
+"feedback and suggestions with us. Your feedback is valuable to us and will "
+"enable us to continually improve our service."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:268
+#: core/templates/mail/text/invitation.txt:24
+msgid ""
+"Once again, welcome aboard! We are eager to accompany you on you "
+"collaboration adventure."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:275
+#: core/templates/mail/text/invitation.txt:26
+msgid "Sincerely,"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:276
+#: core/templates/mail/text/invitation.txt:28
+msgid "The La Suite Numérique Team"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:159
+#: core/templates/mail/text/screen_recording.txt:3
+msgid "Logo email"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:188
+#: core/templates/mail/text/screen_recording.txt:6
+msgid "Your recording is ready!"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:195
+#: core/templates/mail/text/screen_recording.txt:8
+#, python-format
+msgid ""
+" Your recording of \"%(room_name)s\" on %(recording_date)s at "
+"%(recording_time)s is now ready to download. "
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:201
+#: core/templates/mail/text/screen_recording.txt:10
+msgid "To keep this recording permanently:"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:203
+#: core/templates/mail/text/screen_recording.txt:12
+msgid "Click the \\"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:204
+#: core/templates/mail/text/screen_recording.txt:13
+msgid "Use the \\"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:205
+#: core/templates/mail/text/screen_recording.txt:14
+msgid "Save the file to your preferred location"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:216
+#: core/templates/mail/text/screen_recording.txt:16
+msgid "Open"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:225
+#: core/templates/mail/text/screen_recording.txt:18
+#, python-format
+msgid ""
+" If you have any questions or need assistance, please contact our support "
+"team at %(support_email)s. "
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:240
+#: core/templates/mail/text/screen_recording.txt:22
+#, python-format
+msgid " Thank you for using %(brandname)s. "
+msgstr ""
+
+#: core/templates/mail/text/invitation.txt:8
+msgid "Welcome to Meet"
+msgstr ""
+
+#: meet/settings.py:161
 msgid "English"
 msgstr ""
 
-#: meet/settings.py:135
+#: meet/settings.py:162
 msgid "French"
 msgstr ""

src/backend/locale/fr_FR/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-04-03 10:31+0000\n"
+"POT-Creation-Date: 2025-04-14 19:04+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,28 +17,32 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: core/admin.py:31
+#: core/admin.py:26
 msgid "Personal info"
 msgstr ""
 
-#: core/admin.py:33
+#: core/admin.py:39
 msgid "Permissions"
 msgstr ""
 
-#: core/admin.py:45
+#: core/admin.py:51
 msgid "Important dates"
 msgstr ""
 
-#: core/api/serializers.py:128
-msgid "Markdown Body"
+#: core/api/serializers.py:60
+msgid "You must be administrator or owner of a room to add accesses to it."
 msgstr ""
 
-#: core/authentication.py:71
+#: core/authentication/backends.py:77
 msgid "User info contained no recognizable user identification"
 msgstr ""
 
-#: core/authentication.py:91
-msgid "Claims contained no recognizable user identification"
+#: core/authentication/backends.py:102
+msgid "User account is disabled"
+msgstr ""
+
+#: core/authentication/backends.py:142
+msgid "Multiple user accounts share a common email."
 msgstr ""
 
 #: core/models.py:27
@@ -53,156 +57,412 @@ msgstr ""
 msgid "Owner"
 msgstr ""
 
-#: core/models.py:41
-msgid "id"
+#: core/models.py:45
+msgid "Initiated"
 msgstr ""
 
-#: core/models.py:42
-msgid "primary key for the record as UUID"
+#: core/models.py:46
+msgid "Active"
+msgstr ""
+
+#: core/models.py:47
+msgid "Stopped"
 msgstr ""
 
 #: core/models.py:48
-msgid "created on"
+msgid "Saved"
 msgstr ""
 
 #: core/models.py:49
+msgid "Aborted"
+msgstr ""
+
+#: core/models.py:50
+msgid "Failed to Start"
+msgstr ""
+
+#: core/models.py:51
+msgid "Failed to Stop"
+msgstr ""
+
+#: core/models.py:52
+msgid "Notification succeeded"
+msgstr ""
+
+#: core/models.py:79
+msgid "SCREEN_RECORDING"
+msgstr ""
+
+#: core/models.py:80
+msgid "TRANSCRIPT"
+msgstr ""
+
+#: core/models.py:86
+msgid "Public Access"
+msgstr ""
+
+#: core/models.py:87
+msgid "Trusted Access"
+msgstr ""
+
+#: core/models.py:88
+msgid "Restricted Access"
+msgstr ""
+
+#: core/models.py:100
+msgid "id"
+msgstr ""
+
+#: core/models.py:101
+msgid "primary key for the record as UUID"
+msgstr ""
+
+#: core/models.py:107
+msgid "created on"
+msgstr ""
+
+#: core/models.py:108
 msgid "date and time at which a record was created"
 msgstr ""
 
-#: core/models.py:54
+#: core/models.py:113
 msgid "updated on"
 msgstr ""
 
-#: core/models.py:55
+#: core/models.py:114
 msgid "date and time at which a record was last updated"
 msgstr ""
 
-#: core/models.py:75
+#: core/models.py:134
 msgid ""
 "Enter a valid sub. This value may contain only letters, numbers, and @/./+/-/"
 "_ characters."
 msgstr ""
 
-#: core/models.py:81
+#: core/models.py:140
 msgid "sub"
 msgstr ""
 
-#: core/models.py:83
+#: core/models.py:142
 msgid ""
 "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_ "
 "characters only."
 msgstr ""
 
-#: core/models.py:91
+#: core/models.py:150
 msgid "identity email address"
 msgstr ""
 
-#: core/models.py:96
+#: core/models.py:155
 msgid "admin email address"
 msgstr ""
 
-#: core/models.py:103
+#: core/models.py:157
+msgid "full name"
+msgstr ""
+
+#: core/models.py:159
+msgid "short name"
+msgstr ""
+
+#: core/models.py:165
 msgid "language"
 msgstr ""
 
-#: core/models.py:104
+#: core/models.py:166
 msgid "The language in which the user wants to see the interface."
 msgstr ""
 
-#: core/models.py:110
+#: core/models.py:172
 msgid "The timezone in which the user wants to see times."
 msgstr ""
 
-#: core/models.py:113
+#: core/models.py:175
 msgid "device"
 msgstr ""
 
-#: core/models.py:115
+#: core/models.py:177
 msgid "Whether the user is a device or a real user."
 msgstr ""
 
-#: core/models.py:118
+#: core/models.py:180
 msgid "staff status"
 msgstr ""
 
-#: core/models.py:120
+#: core/models.py:182
 msgid "Whether the user can log into this admin site."
 msgstr ""
 
-#: core/models.py:123
+#: core/models.py:185
 msgid "active"
 msgstr ""
 
-#: core/models.py:126
+#: core/models.py:188
 msgid ""
 "Whether this user should be treated as active. Unselect this instead of "
 "deleting accounts."
 msgstr ""
 
-#: core/models.py:138
+#: core/models.py:201
 msgid "user"
 msgstr ""
 
-#: core/models.py:139
+#: core/models.py:202
 msgid "users"
 msgstr ""
 
-#: core/models.py:161
-msgid "title"
+#: core/models.py:261
+msgid "Resource"
 msgstr ""
 
-#: core/models.py:162
-msgid "description"
+#: core/models.py:262
+msgid "Resources"
 msgstr ""
 
-#: core/models.py:163
-msgid "code"
+#: core/models.py:316
+msgid "Resource access"
 msgstr ""
 
-#: core/models.py:164
-msgid "css"
+#: core/models.py:317
+msgid "Resource accesses"
 msgstr ""
 
-#: core/models.py:166
-msgid "public"
+#: core/models.py:323
+msgid "Resource access with this User and Resource already exists."
 msgstr ""
 
-#: core/models.py:168
-msgid "Whether this template is public for anyone to use."
+#: core/models.py:379
+msgid "Visio room configuration"
 msgstr ""
 
-#: core/models.py:174
-msgid "Template"
+#: core/models.py:380
+msgid "Values for Visio parameters to configure the room."
 msgstr ""
 
-#: core/models.py:175
-msgid "Templates"
+#: core/models.py:386 core/models.py:506
+msgid "Room"
 msgstr ""
 
-#: core/models.py:256
-msgid "Template/user relation"
+#: core/models.py:387
+msgid "Rooms"
 msgstr ""
 
-#: core/models.py:257
-msgid "Template/user relations"
+#: core/models.py:517
+msgid "Worker ID"
 msgstr ""
 
-#: core/models.py:263
-msgid "This user is already in this template."
+#: core/models.py:519
+msgid ""
+"Enter an identifier for the worker recording.This ID is retained even when "
+"the worker stops, allowing for easy tracking."
 msgstr ""
 
-#: core/models.py:269
-msgid "This team is already in this template."
+#: core/models.py:527
+msgid "Recording mode"
 msgstr ""
 
-#: core/models.py:275
+#: core/models.py:528
+msgid "Defines the mode of recording being called."
+msgstr ""
+
+#: core/models.py:534
+msgid "Recording"
+msgstr ""
+
+#: core/models.py:535
+msgid "Recordings"
+msgstr ""
+
+#: core/models.py:592
+msgid "Recording/user relation"
+msgstr ""
+
+#: core/models.py:593
+msgid "Recording/user relations"
+msgstr ""
+
+#: core/models.py:599
+msgid "This user is already in this recording."
+msgstr ""
+
+#: core/models.py:605
+msgid "This team is already in this recording."
+msgstr ""
+
+#: core/models.py:611
 msgid "Either user or team must be set, not both."
 msgstr ""
 
-#: meet/settings.py:134
+#: core/recording/event/authentication.py:58
+msgid "Authentication is enabled but token is not configured."
+msgstr ""
+
+#: core/recording/event/authentication.py:70
+msgid "Authorization header is required"
+msgstr ""
+
+#: core/recording/event/authentication.py:78
+msgid "Invalid authorization header."
+msgstr ""
+
+#: core/recording/event/authentication.py:88
+msgid "Invalid token"
+msgstr ""
+
+#: core/recording/event/notification.py:81
+msgid "Your recording is ready"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:160
+#: core/templates/mail/text/invitation.txt:3
+msgid "La Suite Numérique"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:190
+#: core/templates/mail/text/invitation.txt:5
+msgid "Invitation to join a team"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:198
+msgid "Welcome to <strong>Meet</strong>"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:216
+#: core/templates/mail/text/invitation.txt:12
+msgid "Logo"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:226
+#: core/templates/mail/text/invitation.txt:14
+msgid ""
+"We are delighted to welcome you to our community on Meet, your new companion "
+"to collaborate on documents efficiently, intuitively, and securely."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:231
+#: core/templates/mail/text/invitation.txt:15
+msgid ""
+"Our application is designed to help you organize, collaborate, and manage "
+"permissions."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:236
+#: core/templates/mail/text/invitation.txt:16
+msgid "With Meet, you will be able to:"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:237
+#: core/templates/mail/text/invitation.txt:17
+msgid "Create documents."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:238
+#: core/templates/mail/text/invitation.txt:18
+msgid "Invite members of your document or community in just a few clicks."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:249
+#: core/templates/mail/text/invitation.txt:20
+msgid "Visit Meet"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:258
+#: core/templates/mail/text/invitation.txt:22
+msgid ""
+"We are confident that Meet will help you increase efficiency and "
+"productivity while strengthening the bond among members."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:263
+#: core/templates/mail/text/invitation.txt:23
+msgid ""
+"Feel free to explore all the features of the application and share your "
+"feedback and suggestions with us. Your feedback is valuable to us and will "
+"enable us to continually improve our service."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:268
+#: core/templates/mail/text/invitation.txt:24
+msgid ""
+"Once again, welcome aboard! We are eager to accompany you on you "
+"collaboration adventure."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:275
+#: core/templates/mail/text/invitation.txt:26
+msgid "Sincerely,"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:276
+#: core/templates/mail/text/invitation.txt:28
+msgid "The La Suite Numérique Team"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:159
+#: core/templates/mail/text/screen_recording.txt:3
+msgid "Logo email"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:188
+#: core/templates/mail/text/screen_recording.txt:6
+msgid "Your recording is ready!"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:195
+#: core/templates/mail/text/screen_recording.txt:8
+#, python-format
+msgid ""
+" Your recording of \"%(room_name)s\" on %(recording_date)s at "
+"%(recording_time)s is now ready to download. "
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:201
+#: core/templates/mail/text/screen_recording.txt:10
+msgid "To keep this recording permanently:"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:203
+#: core/templates/mail/text/screen_recording.txt:12
+msgid "Click the \\"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:204
+#: core/templates/mail/text/screen_recording.txt:13
+msgid "Use the \\"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:205
+#: core/templates/mail/text/screen_recording.txt:14
+msgid "Save the file to your preferred location"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:216
+#: core/templates/mail/text/screen_recording.txt:16
+msgid "Open"
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:225
+#: core/templates/mail/text/screen_recording.txt:18
+#, python-format
+msgid ""
+" If you have any questions or need assistance, please contact our support "
+"team at %(support_email)s. "
+msgstr ""
+
+#: core/templates/mail/html/screen_recording.html:240
+#: core/templates/mail/text/screen_recording.txt:22
+#, python-format
+msgid " Thank you for using %(brandname)s. "
+msgstr ""
+
+#: core/templates/mail/text/invitation.txt:8
+msgid "Welcome to Meet"
+msgstr ""
+
+#: meet/settings.py:161
 msgid "English"
 msgstr ""
 
-#: meet/settings.py:135
+#: meet/settings.py:162
 msgid "French"
 msgstr ""

src/backend/meet/settings.py

@@ -307,6 +307,9 @@ class Base(Configuration):
         "silence_livekit_debug_logs": values.BooleanValue(
             False, environ_name="FRONTEND_SILENCE_LIVEKIT_DEBUG", environ_prefix=None
         ),
+        "is_silent_login_enabled": values.BooleanValue(
+            True, environ_name="FRONTEND_IS_SILENT_LOGING_ENABLED", environ_prefix=None
+        ),
     }
 
     # Mail
@@ -318,6 +321,11 @@ class Base(Configuration):
     EMAIL_USE_TLS = values.BooleanValue(False)
     EMAIL_USE_SSL = values.BooleanValue(False)
     EMAIL_FROM = values.Value("from@example.com")
+    EMAIL_BRAND_NAME = values.Value(None)
+    EMAIL_SUPPORT_EMAIL = values.Value(None)
+    EMAIL_LOGO_IMG = values.Value(None)
+    EMAIL_DOMAIN = values.Value(None)
+    EMAIL_APP_BASE_URL = values.Value(None)
 
     AUTH_USER_MODEL = "core.User"
 
@@ -481,6 +489,9 @@ class Base(Configuration):
     SUMMARY_SERVICE_API_TOKEN = values.Value(
         None, environ_name="SUMMARY_SERVICE_API_TOKEN", environ_prefix=None
     )
+    SCREEN_RECORDING_BASE_URL = values.Value(
+        None, environ_name="SCREEN_RECORDING_BASE_URL", environ_prefix=None
+    )
 
     # Marketing and communication settings
     SIGNUP_NEW_USER_TO_MARKETING_EMAIL = values.BooleanValue(

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.17"
+version = "0.1.18"
 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.37.18",
+    "boto3==1.37.24",
     "Brotli==1.1.0",
     "brevo-python==1.1.2",
     "celery[redis]==5.4.0",
@@ -53,7 +53,6 @@ dependencies = [
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
     "sentry-sdk==2.24.1",
-    "url-normalize==1.4.3",
     "whitenoise==6.9.0",
     "mozilla-django-oidc==4.0.1",
     "livekit-api==0.8.2",

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "0.1.17",
+      "version": "0.1.18",
       "dependencies": {
         "@livekit/components-react": "2.8.1",
         "@livekit/components-styles": "1.1.4",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.17",
+  "version": "0.1.18",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",

src/frontend/panda.config.ts

@@ -397,6 +397,12 @@ const config: Config = {
           lineHeight: '1.25rem',
         },
       },
+      xs: {
+        value: {
+          fontSize: '0.825rem',
+          lineHeight: '1.15rem',
+        },
+      },
       badge: {
         value: {
           fontSize: '0.75rem',

src/frontend/src/api/mediaUrl.ts

@@ -0,0 +1,11 @@
+export const mediaUrl = (path: string) => {
+  const origin =
+    import.meta.env.VITE_API_BASE_URL ||
+    (typeof window !== 'undefined' ? window.location.origin : '')
+
+  // Remove leading/trailing slashes from origin/path if it exists
+  const sanitizedOrigin = origin.replace(/\/$/, '')
+  const sanitizedPath = path.replace(/^\//, '')
+
+  return `${sanitizedOrigin}/media/${sanitizedPath}`
+}

src/frontend/src/api/useConfig.ts

@@ -1,7 +1,7 @@
 import { fetchApi } from './fetchApi'
 import { keys } from './queryKeys'
 import { useQuery } from '@tanstack/react-query'
-import { RecordingMode } from '@/features/rooms/api/startRecording'
+import { RecordingMode } from '@/features/recording'
 
 export interface ApiConfig {
   analytics?: {
@@ -12,6 +12,7 @@ export interface ApiConfig {
     id: string
   }
   silence_livekit_debug_logs?: boolean
+  is_silent_login_enabled?: boolean
   recording?: {
     is_enabled?: boolean
     available_modes?: RecordingMode[]

src/frontend/src/components/FeedbackBanner.tsx

@@ -2,7 +2,7 @@ import { css } from '@/styled-system/css'
 import { RiErrorWarningLine, RiExternalLinkLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Text, A } from '@/primitives'
-import { GRIST_FORM } from '@/utils/constants'
+import { GRIST_FEEDBACKS_FORM } from '@/utils/constants'
 
 export const FeedbackBanner = () => {
   const { t } = useTranslation()
@@ -35,7 +35,7 @@ export const FeedbackBanner = () => {
             gap: 0.25,
           })}
         >
-          <A href={GRIST_FORM} target="_blank" size="sm">
+          <A href={GRIST_FEEDBACKS_FORM} target="_blank" size="sm">
             {t('feedback.cta')}
           </A>
           <RiExternalLinkLine size={16} aria-hidden="true" />

src/frontend/src/features/analytics/enums.ts

@@ -0,0 +1,5 @@
+export enum FeatureFlags {
+  Transcript = 'transcription-summary',
+  ScreenRecording = 'screen-recording',
+  faceLandmarks = 'face-landmarks',
+}

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

@@ -2,7 +2,7 @@ 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 { useEffect, useMemo } from 'react'
 import {
   startAnalyticsSession,
   terminateAnalyticsSession,
@@ -12,6 +12,7 @@ import {
   terminateSupportSession,
 } from '@/features/support/hooks/useSupport'
 import { logoutUrl } from '../utils/logoutUrl'
+import { useConfig } from '@/api/useConfig'
 
 /**
  * returns info about currently logged-in user
@@ -23,11 +24,24 @@ export const useUser = (
     fetchUserOptions?: Parameters<typeof fetchUser>[0]
   } = {}
 ) => {
+  const { data, isLoading } = useConfig()
+
+  const options = useMemo(() => {
+    if (!data || data?.is_silent_login_enabled !== true) {
+      return {
+        ...opts,
+        attemptSilent: false,
+      }
+    }
+    return opts.fetchUserOptions
+  }, [data, opts])
+
   const query = useQuery({
     // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: [keys.user],
-    queryFn: () => fetchUser(opts.fetchUserOptions),
+    queryFn: () => fetchUser(options),
     staleTime: Infinity,
+    enabled: !isLoading,
   })
 
   useEffect(() => {
@@ -51,6 +65,7 @@ export const useUser = (
     refetch: query.refetch,
     user: isLoggedOut ? undefined : (query.data as ApiUser | undefined),
     isLoggedIn,
+    isLoading: query.isLoading,
     logout,
   }
 }

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

@@ -8,10 +8,7 @@ import { Button, LinkButton } from '@/primitives'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-
-// todo - extract in a proper env variable
-const BETA_USERS_FORM_URL =
-  'https://grist.numerique.gouv.fr/o/docs/forms/3fFfvJoTBEQ6ZiMi8zsQwX/17'
+import { BETA_USERS_FORM_URL } from '@/utils/constants'
 
 const Heading = styled('h2', {
   base: {
@@ -207,6 +204,7 @@ export const IntroSlider = () => {
                 {slide.isAvailableInBeta && (
                   <LinkButton
                     href={BETA_USERS_FORM_URL}
+                    target="_blank"
                     tooltip={t('beta.tooltip')}
                     variant={'primary'}
                     size={'sm'}

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

@@ -88,6 +88,18 @@ export const MainNotificationToast = () => {
           if (notification.data?.emoji)
             handleEmoji(notification.data.emoji, participant)
           break
+        case NotificationType.TranscriptionStarted:
+        case NotificationType.TranscriptionStopped:
+        case NotificationType.ScreenRecordingStarted:
+        case NotificationType.ScreenRecordingStopped:
+          toastQueue.add(
+            {
+              participant,
+              type: notification.type,
+            },
+            { timeout: NotificationDuration.ALERT }
+          )
+          break
         default:
           return
       }

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

@@ -6,4 +6,8 @@ export enum NotificationType {
   LowerHand = 'lowerHand',
   ReactionReceived = 'reactionReceived',
   ParticipantWaiting = 'participantWaiting',
+  TranscriptionStarted = 'transcriptionStarted',
+  TranscriptionStopped = 'transcriptionStopped',
+  ScreenRecordingStarted = 'screenRecordingStarted',
+  ScreenRecordingStopped = 'screenRecordingStopped',
 }

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

@@ -48,7 +48,7 @@ export function Toast({ state, ...props }: ToastProps) {
   return (
     <StyledToastContainer {...toastProps} ref={ref}>
       <StyledToast>
-        <div {...contentProps}>{props.toast.content?.message} machine a</div>
+        <div {...contentProps}>{props.toast.content?.message}</div>
         <Button square size="sm" invisible {...closeButtonProps}>
           <RiCloseLine color="white" />
         </Button>

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

@@ -0,0 +1,48 @@
+import { useToast } from '@react-aria/toast'
+import { useMemo, useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+import { NotificationType } from '../NotificationType'
+
+export function ToastAnyRecording({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+  const type = props.toast.content.type
+
+  const key = useMemo(() => {
+    switch (type) {
+      case NotificationType.TranscriptionStarted:
+        return 'transcript.started'
+      case NotificationType.TranscriptionStopped:
+        return 'transcript.stopped'
+      case NotificationType.ScreenRecordingStarted:
+        return 'screenRecording.started'
+      case NotificationType.ScreenRecordingStopped:
+        return 'screenRecording.stopped'
+      default:
+        return
+    }
+  }, [type])
+
+  if (!key) return
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t(key, {
+          name: participant.name,
+        })}
+      </HStack>
+    </StyledToastContainer>
+  )
+}

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

@@ -9,6 +9,7 @@ import { ToastRaised } from './ToastRaised'
 import { ToastMuted } from './ToastMuted'
 import { ToastMessageReceived } from './ToastMessageReceived'
 import { ToastLowerHand } from './ToastLowerHand'
+import { ToastAnyRecording } from './ToastAnyRecording'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -36,6 +37,12 @@ const renderToast = (
     case NotificationType.LowerHand:
       return <ToastLowerHand key={toast.key} toast={toast} state={state} />
 
+    case NotificationType.TranscriptionStarted:
+    case NotificationType.TranscriptionStopped:
+    case NotificationType.ScreenRecordingStarted:
+    case NotificationType.ScreenRecordingStopped:
+      return <ToastAnyRecording key={toast.key} toast={toast} state={state} />
+
     default:
       return <Toast key={toast.key} toast={toast} state={state} />
   }

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

@@ -10,10 +10,14 @@ import { usePrevious } from '@/hooks/usePrevious'
 import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
 import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingParticipants'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useNotificationSound } from '../hooks/useSoundNotification'
+import { NotificationType } from '@/features/notifications'
 
 export const NOTIFICATION_DISPLAY_DURATION = 10000
 
 export const WaitingParticipantNotification = () => {
+  const { triggerNotificationSound } = useNotificationSound()
+
   const { t } = useTranslation('notifications', {
     keyPrefix: 'waitingParticipants',
   })
@@ -37,6 +41,9 @@ export const WaitingParticipantNotification = () => {
       !isParticipantsOpen
     ) {
       setShowQuickActionsMessage(true)
+
+      triggerNotificationSound(NotificationType.ParticipantJoined)
+
       if (timerRef.current !== null) {
         clearTimeout(timerRef.current)
       }
@@ -48,7 +55,12 @@ export const WaitingParticipantNotification = () => {
       // Hide notification when the participant count changes
       setShowQuickActionsMessage(false)
     }
-  }, [waitingParticipants, prevWaitingParticipant, isParticipantsOpen])
+  }, [
+    waitingParticipants,
+    prevWaitingParticipant,
+    isParticipantsOpen,
+    triggerNotificationSound,
+  ])
 
   useEffect(() => {
     // This cleanup function will only run when the component unmounts

src/frontend/src/features/notifications/hooks/useNotifyParticipants.ts

@@ -0,0 +1,37 @@
+import { useRoomContext } from '@livekit/components-react'
+import { NotificationType } from '../NotificationType'
+import { NotificationPayload } from '../NotificationPayload'
+
+export const useNotifyParticipants = () => {
+  const room = useRoomContext()
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const notifyParticipants = async <T extends Record<string, any>>(options: {
+    type: NotificationType
+    destinationIdentities?: string[]
+    additionalData?: T
+    reliable?: boolean
+  }): Promise<void> => {
+    const {
+      type,
+      destinationIdentities,
+      additionalData = {} as T,
+      reliable = true,
+    } = options
+
+    const payload: NotificationPayload & T = {
+      type,
+      ...additionalData,
+    }
+
+    const encoder = new TextEncoder()
+    const data = encoder.encode(JSON.stringify(payload))
+
+    await room.localParticipant.publishData(data, {
+      reliable,
+      destinationIdentities,
+    })
+  }
+
+  return { notifyParticipants }
+}

src/frontend/src/features/notifications/index.ts

@@ -0,0 +1,2 @@
+export { useNotifyParticipants } from './hooks/useNotifyParticipants'
+export { NotificationType } from './NotificationType'

src/frontend/src/features/recording/api/fetchRecording.ts

@@ -0,0 +1,16 @@
+import { fetchApi } from '@/api/fetchApi'
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { RecordingMode, RecordingStatus } from '@/features/recording'
+
+export type RecordingApi = {
+  id: string
+  room: Pick<ApiRoom, 'id' | 'name' | 'slug' | 'access_level'>
+  created_at: string
+  key: string
+  mode: RecordingMode
+  status: RecordingStatus
+}
+
+export const fetchRecording = ({ recordingId }: { recordingId?: string }) => {
+  return fetchApi<RecordingApi>(`/recordings/${recordingId}/`)
+}

src/frontend/src/features/recording/api/startRecording.ts

@@ -1,12 +1,8 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
 import { fetchApi } from '@/api/fetchApi'
 import { ApiError } from '@/api/ApiError'
-import { ApiRoom } from './ApiRoom'
-
-export enum RecordingMode {
-  Transcript = 'transcript',
-  ScreenRecording = 'screen_recording',
-}
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { RecordingMode } from '../types'
 
 export interface StartRecordingParams {
   id: string

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

@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
 import { fetchApi } from '@/api/fetchApi'
 import { ApiError } from '@/api/ApiError'
-import { ApiRoom } from './ApiRoom'
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'
 
 export interface StopRecordingParams {
   id: string

src/frontend/src/features/recording/components/RecordingStateToast.tsx

@@ -0,0 +1,198 @@
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio/index'
+import { useRoomContext } from '@livekit/components-react'
+import { Spinner } from '@/primitives/Spinner'
+import { useEffect, useMemo } from 'react'
+import { Text } from '@/primitives'
+import { RemoteParticipant, RoomEvent } from 'livekit-client'
+import { decodeNotificationDataReceived } from '@/features/notifications/utils'
+import { NotificationType } from '@/features/notifications/NotificationType'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+import { RiRecordCircleLine } from '@remixicon/react'
+import {
+  RecordingMode,
+  useHasRecordingAccess,
+  useIsRecordingActive,
+} from '@/features/recording'
+import { FeatureFlags } from '@/features/analytics/enums'
+import { Button as RACButton } from 'react-aria-components'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+
+export const RecordingStateToast = () => {
+  const { t } = useTranslation('rooms', {
+    keyPrefix: 'recordingStateToast',
+  })
+  const room = useRoomContext()
+
+  const { openTranscript, openScreenRecording } = useSidePanel()
+
+  const recordingSnap = useSnapshot(recordingStore)
+
+  const hasTranscriptAccess = useHasRecordingAccess(
+    RecordingMode.Transcript,
+    FeatureFlags.Transcript
+  )
+
+  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
+
+  const hasScreenRecordingAccess = useHasRecordingAccess(
+    RecordingMode.ScreenRecording,
+    FeatureFlags.ScreenRecording
+  )
+
+  const isScreenRecordingActive = useIsRecordingActive(
+    RecordingMode.ScreenRecording
+  )
+
+  useEffect(() => {
+    if (room.isRecording && recordingSnap.status == RecordingStatus.STOPPED) {
+      recordingStore.status = RecordingStatus.ANY_STARTED
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [room.isRecording])
+
+  useEffect(() => {
+    const handleDataReceived = (
+      payload: Uint8Array,
+      participant?: RemoteParticipant
+    ) => {
+      const notification = decodeNotificationDataReceived(payload)
+
+      if (!participant || !notification) return
+
+      switch (notification.type) {
+        case NotificationType.TranscriptionStarted:
+          recordingStore.status = RecordingStatus.TRANSCRIPT_STARTING
+          break
+        case NotificationType.TranscriptionStopped:
+          recordingStore.status = RecordingStatus.TRANSCRIPT_STOPPING
+          break
+        case NotificationType.ScreenRecordingStarted:
+          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STARTING
+          break
+        case NotificationType.ScreenRecordingStopped:
+          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STOPPING
+          break
+        default:
+          return
+      }
+    }
+
+    const handleRecordingStatusChanged = (status: boolean) => {
+      if (!status) {
+        recordingStore.status = RecordingStatus.STOPPED
+      } else if (recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTING) {
+        recordingStore.status = RecordingStatus.TRANSCRIPT_STARTED
+      } else if (
+        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTING
+      ) {
+        recordingStore.status = RecordingStatus.SCREEN_RECORDING_STARTED
+      } else {
+        recordingStore.status = RecordingStatus.ANY_STARTED
+      }
+    }
+
+    room.on(RoomEvent.DataReceived, handleDataReceived)
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+
+    return () => {
+      room.off(RoomEvent.DataReceived, handleDataReceived)
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    }
+  }, [room, recordingSnap])
+
+  const key = useMemo(() => {
+    switch (recordingSnap.status) {
+      case RecordingStatus.TRANSCRIPT_STARTED:
+        return 'transcript.started'
+      case RecordingStatus.TRANSCRIPT_STOPPING:
+        return 'transcript.stopping'
+      case RecordingStatus.TRANSCRIPT_STARTING:
+        return 'transcript.starting'
+      case RecordingStatus.SCREEN_RECORDING_STARTED:
+        return 'screenRecording.started'
+      case RecordingStatus.SCREEN_RECORDING_STOPPING:
+        return 'screenRecording.stopping'
+      case RecordingStatus.SCREEN_RECORDING_STARTING:
+        return 'screenRecording.starting'
+      case RecordingStatus.ANY_STARTED:
+        return 'any.started'
+      default:
+        return
+    }
+  }, [recordingSnap])
+
+  if (!key) return
+
+  const isStarted = key?.includes('started')
+
+  const hasScreenRecordingAccessAndActive =
+    isScreenRecordingActive && hasScreenRecordingAccess
+  const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        position: 'fixed',
+        top: '10px',
+        left: '10px',
+        paddingY: '0.25rem',
+        paddingX: '0.75rem 0.75rem',
+        backgroundColor: 'danger.700',
+        borderColor: 'white',
+        border: '1px solid',
+        color: 'white',
+        borderRadius: '4px',
+        gap: '0.5rem',
+      })}
+    >
+      {isStarted ? (
+        <RiRecordCircleLine
+          size={20}
+          className={css({
+            animation: 'pulse_background 1s infinite',
+          })}
+        />
+      ) : (
+        <Spinner size={20} variant="dark" />
+      )}
+
+      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
+        <Text
+          variant={'sm'}
+          className={css({
+            fontWeight: '500 !important',
+          })}
+        >
+          {t(key)}
+        </Text>
+      )}
+      {hasScreenRecordingAccessAndActive && (
+        <RACButton
+          onPress={openScreenRecording}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
+      {hasTranscriptAccessAndActive && (
+        <RACButton
+          onPress={openTranscript}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
+    </div>
+  )
+}

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -0,0 +1,211 @@
+import { A, Button, Div, H, Text } from '@/primitives'
+
+import fourthSlide from '@/assets/intro-slider/4_record.png'
+import { css } from '@/styled-system/css'
+import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
+import { useRoomContext } from '@livekit/components-react'
+import {
+  RecordingMode,
+  useStartRecording,
+  useStopRecording,
+} from '@/features/recording'
+import { useEffect, useMemo, useState } from 'react'
+import { RoomEvent } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+import { CRISP_HELP_ARTICLE_RECORDING } from '@/utils/constants'
+import { useIsRecordingTransitioning } from '@/features/recording'
+
+import {
+  useNotifyParticipants,
+  NotificationType,
+} from '@/features/notifications'
+import posthog from 'posthog-js'
+import { useSnapshot } from 'valtio/index'
+import { Spinner } from '@/primitives/Spinner'
+
+export const ScreenRecordingSidePanel = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const recordingSnap = useSnapshot(recordingStore)
+  const { t } = useTranslation('rooms', { keyPrefix: 'screenRecording' })
+
+  const { notifyParticipants } = useNotifyParticipants()
+
+  const roomId = useRoomId()
+
+  const { mutateAsync: startRecordingRoom } = useStartRecording()
+  const { mutateAsync: stopRecordingRoom } = useStopRecording()
+
+  const statuses = useMemo(() => {
+    return {
+      isAnotherModeStarted:
+        recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED,
+      isStarting:
+        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTING,
+      isStarted:
+        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED,
+      isStopping:
+        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STOPPING,
+    }
+  }, [recordingSnap])
+
+  const room = useRoomContext()
+  const isRecordingTransitioning = useIsRecordingTransitioning()
+
+  useEffect(() => {
+    const handleRecordingStatusChanged = () => {
+      setIsLoading(false)
+    }
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    return () => {
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    }
+  }, [room])
+
+  const handleScreenRecording = async () => {
+    if (!roomId) {
+      console.warn('No room ID found')
+      return
+    }
+    try {
+      setIsLoading(true)
+      if (room.isRecording) {
+        await stopRecordingRoom({ id: roomId })
+        recordingStore.status = RecordingStatus.SCREEN_RECORDING_STOPPING
+        await notifyParticipants({
+          type: NotificationType.ScreenRecordingStopped,
+        })
+      } else {
+        await startRecordingRoom({
+          id: roomId,
+          mode: RecordingMode.ScreenRecording,
+        })
+        recordingStore.status = RecordingStatus.SCREEN_RECORDING_STARTING
+        await notifyParticipants({
+          type: NotificationType.ScreenRecordingStarted,
+        })
+        posthog.capture('screen-recording-started', {})
+      }
+    } catch (error) {
+      console.error('Failed to handle transcript:', error)
+      setIsLoading(false)
+    }
+  }
+
+  const isDisabled = useMemo(
+    () =>
+      isLoading || isRecordingTransitioning || statuses.isAnotherModeStarted,
+    [isLoading, isRecordingTransitioning, statuses]
+  )
+
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 1.5rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="center"
+    >
+      <img
+        src={fourthSlide}
+        alt={''}
+        className={css({
+          minHeight: '309px',
+          marginBottom: '1rem',
+        })}
+      />
+
+      {statuses.isStarted ? (
+        <>
+          <H lvl={3} margin={false}>
+            {t('stop.heading')}
+          </H>
+          <Text
+            variant="note"
+            wrap={'pretty'}
+            centered
+            className={css({
+              textStyle: 'sm',
+              marginBottom: '2.5rem',
+              marginTop: '0.25rem',
+            })}
+          >
+            {t('stop.body')}
+          </Text>
+          <Button
+            isDisabled={isDisabled}
+            onPress={() => handleScreenRecording()}
+            data-attr="stop-screen-recording"
+            size="sm"
+            variant="tertiary"
+          >
+            {t('stop.button')}
+          </Button>
+        </>
+      ) : (
+        <>
+          {statuses.isStopping ? (
+            <>
+              <H lvl={3} margin={false}>
+                {t('stopping.heading')}
+              </H>
+              <Text
+                variant="note"
+                wrap={'pretty'}
+                centered
+                className={css({
+                  textStyle: 'sm',
+                  maxWidth: '90%',
+                  marginBottom: '2.5rem',
+                  marginTop: '0.25rem',
+                })}
+              >
+                {t('stopping.body')}
+              </Text>
+              <Spinner />
+            </>
+          ) : (
+            <>
+              <H lvl={3} margin={false}>
+                {t('start.heading')}
+              </H>
+              <Text
+                variant="note"
+                wrap={'pretty'}
+                centered
+                className={css({
+                  textStyle: 'sm',
+                  maxWidth: '90%',
+                  marginBottom: '2.5rem',
+                  marginTop: '0.25rem',
+                })}
+              >
+                {t('start.body')} <br />{' '}
+                <A href={CRISP_HELP_ARTICLE_RECORDING} target="_blank">
+                  {t('start.linkMore')}
+                </A>
+              </Text>
+              <Button
+                isDisabled={isDisabled}
+                onPress={() => handleScreenRecording()}
+                data-attr="start-screen-recording"
+                size="sm"
+                variant="tertiary"
+              >
+                {statuses.isStarting ? (
+                  <>
+                    <Spinner size={20} />
+                    {t('start.loading')}
+                  </>
+                ) : (
+                  t('start.button')
+                )}
+              </Button>
+            </>
+          )}
+        </>
+      )}
+    </Div>
+  )
+}

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -0,0 +1,245 @@
+import { A, Button, Div, H, LinkButton, Text } from '@/primitives'
+
+import thirdSlide from '@/assets/intro-slider/3_resume.png'
+import { css } from '@/styled-system/css'
+import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
+import { useRoomContext } from '@livekit/components-react'
+import {
+  RecordingMode,
+  useHasRecordingAccess,
+  useIsRecordingTransitioning,
+  useStartRecording,
+  useStopRecording,
+} from '../index'
+import { useEffect, useMemo, useState } from 'react'
+import { RoomEvent } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+import {
+  BETA_USERS_FORM_URL,
+  CRISP_HELP_ARTICLE_TRANSCRIPT,
+} from '@/utils/constants'
+import { FeatureFlags } from '@/features/analytics/enums'
+import {
+  NotificationType,
+  useNotifyParticipants,
+} from '@/features/notifications'
+import posthog from 'posthog-js'
+import { useSnapshot } from 'valtio/index'
+import { Spinner } from '@/primitives/Spinner'
+
+export const TranscriptSidePanel = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
+
+  const recordingSnap = useSnapshot(recordingStore)
+
+  const { notifyParticipants } = useNotifyParticipants()
+
+  const hasTranscriptAccess = useHasRecordingAccess(
+    RecordingMode.Transcript,
+    FeatureFlags.Transcript
+  )
+  const roomId = useRoomId()
+
+  const { mutateAsync: startRecordingRoom } = useStartRecording()
+  const { mutateAsync: stopRecordingRoom } = useStopRecording()
+
+  const statuses = useMemo(() => {
+    return {
+      isAnotherModeStarted:
+        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED,
+      isStarting: recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTING,
+      isStarted: recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED,
+      isStopping: recordingSnap.status == RecordingStatus.TRANSCRIPT_STOPPING,
+    }
+  }, [recordingSnap])
+
+  const isRecordingTransitioning = useIsRecordingTransitioning()
+
+  const room = useRoomContext()
+
+  useEffect(() => {
+    const handleRecordingStatusChanged = () => {
+      setIsLoading(false)
+    }
+    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    return () => {
+      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
+    }
+  }, [room])
+
+  const handleTranscript = async () => {
+    if (!roomId) {
+      console.warn('No room ID found')
+      return
+    }
+    try {
+      setIsLoading(true)
+      if (room.isRecording) {
+        await stopRecordingRoom({ id: roomId })
+        recordingStore.status = RecordingStatus.TRANSCRIPT_STOPPING
+        await notifyParticipants({
+          type: NotificationType.TranscriptionStopped,
+        })
+      } else {
+        await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript })
+        recordingStore.status = RecordingStatus.TRANSCRIPT_STARTING
+        await notifyParticipants({
+          type: NotificationType.TranscriptionStarted,
+        })
+        posthog.capture('transcript-started', {})
+      }
+    } catch (error) {
+      console.error('Failed to handle transcript:', error)
+      setIsLoading(false)
+    }
+  }
+
+  const isDisabled = useMemo(
+    () =>
+      isLoading || isRecordingTransitioning || statuses.isAnotherModeStarted,
+    [isLoading, isRecordingTransitioning, statuses]
+  )
+
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 1.5rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="center"
+    >
+      <img
+        src={thirdSlide}
+        alt={''}
+        className={css({
+          minHeight: '309px',
+          marginBottom: '1rem',
+        })}
+      />
+      {!hasTranscriptAccess ? (
+        <>
+          <Text>{t('beta.heading')}</Text>
+          <Text
+            variant="note"
+            wrap={'pretty'}
+            centered
+            className={css({
+              textStyle: 'sm',
+              marginBottom: '2.5rem',
+              marginTop: '0.25rem',
+            })}
+          >
+            {t('beta.body')}{' '}
+            <A href={CRISP_HELP_ARTICLE_TRANSCRIPT} target="_blank">
+              {t('start.linkMore')}
+            </A>
+          </Text>
+          <LinkButton
+            size="sm"
+            variant="tertiary"
+            href={BETA_USERS_FORM_URL}
+            target="_blank"
+          >
+            {t('beta.button')}
+          </LinkButton>
+        </>
+      ) : (
+        <>
+          {statuses.isStarted ? (
+            <>
+              <H lvl={3} margin={false}>
+                {t('stop.heading')}
+              </H>
+              <Text
+                variant="note"
+                wrap={'pretty'}
+                centered
+                className={css({
+                  textStyle: 'sm',
+                  marginBottom: '2.5rem',
+                  marginTop: '0.25rem',
+                })}
+              >
+                {t('stop.body')}
+              </Text>
+              <Button
+                isDisabled={isDisabled}
+                onPress={() => handleTranscript()}
+                data-attr="stop-transcript"
+                size="sm"
+                variant="tertiary"
+              >
+                {t('stop.button')}
+              </Button>
+            </>
+          ) : (
+            <>
+              {statuses.isStopping ? (
+                <>
+                  <H lvl={3} margin={false}>
+                    {t('stopping.heading')}
+                  </H>
+                  <Text
+                    variant="note"
+                    wrap={'pretty'}
+                    centered
+                    className={css({
+                      textStyle: 'sm',
+                      maxWidth: '90%',
+                      marginBottom: '2.5rem',
+                      marginTop: '0.25rem',
+                    })}
+                  >
+                    {t('stopping.body')}
+                  </Text>
+                  <Spinner />
+                </>
+              ) : (
+                <>
+                  <H lvl={3} margin={false}>
+                    {t('start.heading')}
+                  </H>
+                  <Text
+                    variant="note"
+                    wrap={'pretty'}
+                    centered
+                    className={css({
+                      textStyle: 'sm',
+                      maxWidth: '90%',
+                      marginBottom: '2.5rem',
+                      marginTop: '0.25rem',
+                    })}
+                  >
+                    {t('start.body')} <br />{' '}
+                    <A href={CRISP_HELP_ARTICLE_TRANSCRIPT} target="_blank">
+                      {t('start.linkMore')}
+                    </A>
+                  </Text>
+                  <Button
+                    isDisabled={isDisabled}
+                    onPress={() => handleTranscript()}
+                    data-attr="start-transcript"
+                    size="sm"
+                    variant="tertiary"
+                  >
+                    {statuses.isStarting ? (
+                      <>
+                        <Spinner size={20} />
+                        {t('start.loading')}
+                      </>
+                    ) : (
+                      t('start.button')
+                    )}
+                  </Button>
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </Div>
+  )
+}

src/frontend/src/features/recording/hooks/useHasRecordingAccess.ts

@@ -0,0 +1,22 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+import { RecordingMode } from '../types'
+import { useIsRecordingModeEnabled } from './useIsRecordingModeEnabled'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { FeatureFlags } from '@/features/analytics/enums'
+
+export const useHasRecordingAccess = (
+  mode: RecordingMode,
+  featureFlag: FeatureFlags
+) => {
+  const featureEnabled = useFeatureFlagEnabled(featureFlag)
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+  const isRecordingModeEnabled = useIsRecordingModeEnabled(mode)
+  const isAdminOrOwner = useIsAdminOrOwner()
+
+  return (
+    (featureEnabled || !isAnalyticsEnabled) &&
+    isAdminOrOwner &&
+    isRecordingModeEnabled
+  )
+}

src/frontend/src/features/recording/hooks/useIsRecordingActive.ts

@@ -0,0 +1,22 @@
+import { useSnapshot } from 'valtio'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+import { RecordingMode } from '@/features/recording'
+
+export const useIsRecordingActive = (mode: RecordingMode) => {
+  const recordingSnap = useSnapshot(recordingStore)
+
+  switch (mode) {
+    case RecordingMode.Transcript:
+      return [
+        RecordingStatus.TRANSCRIPT_STARTED,
+        RecordingStatus.TRANSCRIPT_STARTING,
+        RecordingStatus.TRANSCRIPT_STOPPING,
+      ].includes(recordingSnap.status)
+    case RecordingMode.ScreenRecording:
+      return [
+        RecordingStatus.SCREEN_RECORDING_STARTED,
+        RecordingStatus.SCREEN_RECORDING_STARTING,
+        RecordingStatus.SCREEN_RECORDING_STOPPING,
+      ].includes(recordingSnap.status)
+  }
+}

src/frontend/src/features/recording/hooks/useIsRecordingModeEnabled.ts

@@ -0,0 +1,11 @@
+import { RecordingMode } from '../types'
+import { useConfig } from '@/api/useConfig'
+
+export const useIsRecordingModeEnabled = (mode: RecordingMode) => {
+  const { data } = useConfig()
+
+  return (
+    data?.recording?.is_enabled &&
+    data?.recording?.available_modes?.includes(mode)
+  )
+}

src/frontend/src/features/recording/hooks/useIsRecordingTransitioning.ts

@@ -0,0 +1,15 @@
+import { useSnapshot } from 'valtio'
+import { RecordingStatus, recordingStore } from '@/stores/recording'
+
+export const useIsRecordingTransitioning = () => {
+  const recordingSnap = useSnapshot(recordingStore)
+
+  const transitionalStates = [
+    RecordingStatus.TRANSCRIPT_STARTING,
+    RecordingStatus.TRANSCRIPT_STOPPING,
+    RecordingStatus.SCREEN_RECORDING_STARTING,
+    RecordingStatus.SCREEN_RECORDING_STOPPING,
+  ]
+
+  return transitionalStates.includes(recordingSnap.status)
+}

src/frontend/src/features/recording/index.ts

@@ -0,0 +1,18 @@
+// hooks
+export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled'
+export { useIsRecordingTransitioning } from './hooks/useIsRecordingTransitioning'
+export { useHasRecordingAccess } from './hooks/useHasRecordingAccess'
+export { useIsRecordingActive } from './hooks/useIsRecordingActive'
+
+// api
+export { useStartRecording } from './api/startRecording'
+export { useStopRecording } from './api/stopRecording'
+export { RecordingMode, RecordingStatus } from './types'
+
+// components
+export { RecordingStateToast } from './components/RecordingStateToast'
+export { TranscriptSidePanel } from './components/TranscriptSidePanel'
+export { ScreenRecordingSidePanel } from './components/ScreenRecordingSidePanel'
+
+// routes
+export { RecordingDownload as RecordingDownloadRoute } from './routes/RecordingDownload'

src/frontend/src/features/recording/routes/RecordingDownload.tsx

@@ -0,0 +1,89 @@
+import { useParams } from 'wouter'
+import { useQuery } from '@tanstack/react-query'
+import { Center, VStack } from '@/styled-system/jsx'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import fourthSlide from '@/assets/intro-slider/4_record.png'
+import { mediaUrl } from '@/api/mediaUrl'
+import { UserAware, useUser } from '@/features/auth'
+import { Screen } from '@/layout/Screen'
+import { H, LinkButton, Text } from '@/primitives'
+import { formatDate } from '@/utils/formatDate'
+import { ErrorScreen } from '@/components/ErrorScreen'
+import { LoadingScreen } from '@/components/LoadingScreen'
+import { fetchRecording } from '../api/fetchRecording'
+import { RecordingStatus } from '@/features/recording'
+
+export const RecordingDownload = () => {
+  const { t } = useTranslation('recording')
+  const { recordingId } = useParams()
+  const { isLoggedIn, isLoading: isAuthLoading } = useUser()
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['recording', recordingId],
+    queryFn: () => fetchRecording({ recordingId }),
+    retry: false,
+    enabled: !!recordingId,
+  })
+
+  if (isLoading || !data || isAuthLoading) {
+    return <LoadingScreen />
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <ErrorScreen
+        title={t('authentication.title')}
+        body={t('authentication.body')}
+      />
+    )
+  }
+
+  if (isError) {
+    return <ErrorScreen title={t('error.title')} body={t('error.body')} />
+  }
+
+  if (
+    data.status !== RecordingStatus.Saved &&
+    data.status !== RecordingStatus.NotificationSucceed
+  ) {
+    return <ErrorScreen title={t('unsaved.title')} body={t('unsaved.body')} />
+  }
+
+  return (
+    <UserAware>
+      <Screen layout="centered" footer={false}>
+        <Center>
+          <VStack>
+            <img
+              src={fourthSlide}
+              alt={''}
+              className={css({
+                maxHeight: '309px',
+              })}
+            />
+            <H lvl={1} centered>
+              {t('success.title')}
+            </H>
+            <Text centered margin="md" wrap={'balance'}>
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: t('success.body', {
+                    room: data.room.name,
+                    created_at: formatDate(data.created_at, 'YYYY-MM-DD HH:mm'),
+                  }),
+                }}
+              />
+            </Text>
+            <LinkButton
+              href={mediaUrl(data.key)}
+              download={`${data.room.name}-${formatDate(data.created_at)}`}
+            >
+              {t('success.button')}
+            </LinkButton>
+          </VStack>
+        </Center>
+      </Screen>
+    </UserAware>
+  )
+}

src/frontend/src/features/recording/types.ts

@@ -0,0 +1,15 @@
+export enum RecordingMode {
+  Transcript = 'transcript',
+  ScreenRecording = 'screen_recording',
+}
+
+export enum RecordingStatus {
+  Initiated = 'initiated',
+  Active = 'active',
+  Stopped = 'stopped',
+  Saved = 'saved',
+  Aborted = 'aborted',
+  FailedToStart = 'failedToStart',
+  FailedToStop = 'failedToStop',
+  NotificationSucceed = 'notification_succeeded',
+}

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

@@ -3,25 +3,15 @@ import Source = Track.Source
 import { fetchServerApi } from './fetchServerApi'
 import { buildServerApiUrl } from './buildServerApiUrl'
 import { useRoomData } from '../hooks/useRoomData'
-import { useRoomContext } from '@livekit/components-react'
-import { NotificationType } from '@/features/notifications/NotificationType'
-import { NotificationPayload } from '@/features/notifications/NotificationPayload'
+import {
+  useNotifyParticipants,
+  NotificationType,
+} from '@/features/notifications'
 
 export const useMuteParticipant = () => {
   const data = useRoomData()
-  const room = useRoomContext()
 
-  const notifyParticipant = async (participant: Participant) => {
-    const encoder = new TextEncoder()
-    const payload: NotificationPayload = {
-      type: NotificationType.ParticipantMuted,
-    }
-    const data = encoder.encode(JSON.stringify(payload))
-    await room.localParticipant.publishData(data, {
-      reliable: true,
-      destinationIdentities: [participant.identity],
-    })
-  }
+  const { notifyParticipants } = useNotifyParticipants()
 
   const muteParticipant = async (participant: Participant) => {
     if (!data || !data?.livekit) {
@@ -53,7 +43,10 @@ export const useMuteParticipant = () => {
         }
       )
 
-      await notifyParticipant(participant)
+      await notifyParticipants({
+        type: NotificationType.ParticipantMuted,
+        destinationIdentities: [participant.identity],
+      })
 
       return response
     } catch (error) {

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

@@ -0,0 +1,75 @@
+import { useTranslation } from 'react-i18next'
+import { useEffect, useState } from 'react'
+import { VStack } from '@/styled-system/jsx'
+import { css } from '@/styled-system/css'
+import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
+import { Button, Div, Text } from '@/primitives'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { useRoomData } from '../hooks/useRoomData'
+
+export const Info = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'info' })
+
+  const [isCopied, setIsCopied] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => setIsCopied(false), 3000)
+      return () => clearTimeout(timeout)
+    }
+  }, [isCopied])
+
+  const data = useRoomData()
+  const roomUrl = getRouteUrl('room', data?.slug)
+
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 1.5rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="start"
+    >
+      <VStack alignItems="start">
+        <Text
+          as="h3"
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+          })}
+        >
+          {t('roomInformation.title')}
+        </Text>
+        <Text as="p" variant="xsNote" wrap="pretty">
+          {roomUrl}
+        </Text>
+        <Button
+          size="sm"
+          variant={isCopied ? 'success' : 'tertiaryText'}
+          aria-label={t('roomInformation.button.ariaLabel')}
+          onPress={() => {
+            navigator.clipboard.writeText(roomUrl)
+            setIsCopied(true)
+          }}
+          data-attr="copy-info-sidepannel"
+          style={{
+            marginLeft: '-8px',
+          }}
+        >
+          {isCopied ? (
+            <>
+              <RiCheckLine size={24} style={{ marginRight: '6px' }} />
+              {t('roomInformation.button.copied')}
+            </>
+          ) : (
+            <>
+              <RiFileCopyLine size={24} style={{ marginRight: '6px' }} />
+              {t('roomInformation.button.copy')}
+            </>
+          )}
+        </Button>
+      </VStack>
+    </Div>
+  )
+}

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

@@ -1,43 +0,0 @@
-import { css } from '@/styled-system/css'
-import { RiRecordCircleLine } from '@remixicon/react'
-import { Text } from '@/primitives'
-import { useTranslation } from 'react-i18next'
-import { useRoomContext } from '@livekit/components-react'
-
-export const RecordingStateToast = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'recording' })
-
-  const room = useRoomContext()
-
-  if (!room?.isRecording) return
-
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        position: 'fixed',
-        top: '10px',
-        left: '10px',
-        paddingY: '0.25rem',
-        paddingX: '0.25rem 0.35rem',
-        backgroundColor: 'primaryDark.200',
-        borderColor: 'primaryDark.400',
-        border: '1px solid',
-        color: 'white',
-        borderRadius: '4px',
-        gap: '0.5rem',
-      })}
-    >
-      <RiRecordCircleLine
-        size={20}
-        className={css({
-          color: 'white',
-          backgroundColor: 'danger.700',
-          padding: '3px',
-          borderRadius: '3px',
-        })}
-      />
-      <Text variant={'sm'}>{t('label')}</Text>
-    </div>
-  )
-}

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

@@ -3,15 +3,16 @@ import { css } from '@/styled-system/css'
 import { Heading } from 'react-aria-components'
 import { text } from '@/primitives/Text'
 import { Button, Div } from '@/primitives'
-import { RiCloseLine } from '@remixicon/react'
+import { RiArrowLeftLine, 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 { Chat } from '../prefabs/Chat'
-import { Transcript } from './Transcript'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
+import { Tools } from './Tools'
+import { Info } from './Info'
 
 type StyledSidePanelProps = {
   title: string
@@ -19,6 +20,8 @@ type StyledSidePanelProps = {
   onClose: () => void
   isClosed: boolean
   closeButtonTooltip: string
+  isSubmenu: boolean
+  onBack: () => void
 }
 
 const StyledSidePanel = ({
@@ -27,6 +30,8 @@ const StyledSidePanel = ({
   onClose,
   isClosed,
   closeButtonTooltip,
+  isSubmenu = false,
+  onBack,
 }: StyledSidePanelProps) => (
   <div
     className={css({
@@ -61,9 +66,22 @@ const StyledSidePanel = ({
       style={{
         paddingLeft: '1.5rem',
         paddingTop: '1rem',
-        display: isClosed ? 'none' : undefined,
+        display: isClosed ? 'none' : 'flex',
+        justifyContent: 'start',
+        alignItems: 'center',
       }}
     >
+      {isSubmenu && (
+        <Button
+          variant="secondaryText"
+          size={'sm'}
+          square
+          className={css({ marginRight: '0.5rem' })}
+          onPress={onBack}
+        >
+          <RiArrowLeftLine size={20} />
+        </Button>
+      )}
       {title}
     </Heading>
     <Div
@@ -114,19 +132,27 @@ export const SidePanel = () => {
     isEffectsOpen,
     isChatOpen,
     isSidePanelOpen,
-    isTranscriptOpen,
+    isToolsOpen,
     isAdminOpen,
+    isInfoOpen,
+    isSubPanelOpen,
+    activeSubPanelId,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
   return (
     <StyledSidePanel
-      title={t(`heading.${activePanelId}`)}
-      onClose={() => (layoutStore.activePanelId = null)}
+      title={t(`heading.${activeSubPanelId || activePanelId}`)}
+      onClose={() => {
+        layoutStore.activePanelId = null
+        layoutStore.activeSubPanelId = null
+      }}
       closeButtonTooltip={t('closeButton', {
-        content: t(`content.${activePanelId}`),
+        content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
       isClosed={!isSidePanelOpen}
+      isSubmenu={isSubPanelOpen}
+      onBack={() => (layoutStore.activeSubPanelId = null)}
     >
       <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />
@@ -137,12 +163,15 @@ export const SidePanel = () => {
       <Panel isOpen={isChatOpen}>
         <Chat />
       </Panel>
-      <Panel isOpen={isTranscriptOpen}>
-        <Transcript />
+      <Panel isOpen={isToolsOpen}>
+        <Tools />
       </Panel>
       <Panel isOpen={isAdminOpen}>
         <Admin />
       </Panel>
+      <Panel isOpen={isInfoOpen}>
+        <Info />
+      </Panel>
     </StyledSidePanel>
   )
 }

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

@@ -0,0 +1,190 @@
+import { A, Div, Text } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { Button as RACButton } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { CRISP_HELP_ARTICLE_MORE_TOOLS } from '@/utils/constants'
+import { ReactNode } from 'react'
+import { RiFileTextFill, RiLiveFill } from '@remixicon/react'
+import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
+import {
+  useIsRecordingModeEnabled,
+  RecordingMode,
+  useHasRecordingAccess,
+  TranscriptSidePanel,
+  ScreenRecordingSidePanel,
+  useIsRecordingActive,
+} from '@/features/recording'
+import { FeatureFlags } from '@/features/analytics/enums'
+
+export interface ToolsButtonProps {
+  icon: ReactNode
+  title: string
+  description: string
+  onPress: () => void
+  isBetaFeature?: boolean
+  isActive?: boolean
+}
+
+const ToolButton = ({
+  icon,
+  title,
+  description,
+  onPress,
+  isBetaFeature = false,
+  isActive = false,
+}: ToolsButtonProps) => {
+  return (
+    <RACButton
+      className={css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'start',
+        paddingY: '0.5rem',
+        paddingX: '0.75rem 1.5rem',
+        borderRadius: '5px',
+        gap: '1.25rem',
+        width: 'full',
+        textAlign: 'start',
+        '&[data-hovered]': {
+          backgroundColor: 'primary.50',
+          cursor: 'pointer',
+        },
+      })}
+      onPress={onPress}
+    >
+      <div
+        className={css({
+          height: '50px',
+          minWidth: '50px',
+          borderRadius: '25px',
+          backgroundColor: 'primary.800',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          position: 'relative',
+        })}
+      >
+        {icon}
+        {isBetaFeature && (
+          <div
+            className={css({
+              position: 'absolute',
+              backgroundColor: 'primary.50',
+              color: 'primary.800',
+              fontSize: '12px',
+              fontWeight: 500,
+              borderRadius: '4px',
+              paddingX: '4px',
+              paddingBottom: '1px',
+              bottom: -8,
+              right: -8,
+            })}
+          >
+            BETA
+          </div>
+        )}
+      </div>
+      <div>
+        <Text
+          margin={false}
+          as="h3"
+          className={css({ display: 'flex', gap: 0.25 })}
+        >
+          {title}
+          {isActive && (
+            <div
+              className={css({
+                backgroundColor: 'primary.500',
+                height: '10px',
+                width: '10px',
+                marginTop: '5px',
+                borderRadius: '100%',
+              })}
+            />
+          )}
+        </Text>
+        <Text as="p" variant="smNote" wrap="pretty">
+          {description}
+        </Text>
+      </div>
+    </RACButton>
+  )
+}
+
+export const Tools = () => {
+  const { openTranscript, openScreenRecording, activeSubPanelId } =
+    useSidePanel()
+  const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
+
+  const isTranscriptEnabled = useIsRecordingModeEnabled(
+    RecordingMode.Transcript
+  )
+
+  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
+
+  const hasScreenRecordingAccess = useHasRecordingAccess(
+    RecordingMode.ScreenRecording,
+    FeatureFlags.ScreenRecording
+  )
+
+  const isScreenRecordingActive = useIsRecordingActive(
+    RecordingMode.ScreenRecording
+  )
+
+  switch (activeSubPanelId) {
+    case SubPanelId.TRANSCRIPT:
+      return <TranscriptSidePanel />
+    case SubPanelId.SCREEN_RECORDING:
+      return <ScreenRecordingSidePanel />
+    default:
+      break
+  }
+
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 0.75rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="start"
+    >
+      <Text
+        variant="note"
+        wrap="balance"
+        className={css({
+          textStyle: 'sm',
+          paddingX: '0.75rem',
+        })}
+        margin="md"
+      >
+        {t('body')}{' '}
+        <A href={CRISP_HELP_ARTICLE_MORE_TOOLS} target="_blank">
+          {t('moreLink')}
+        </A>
+        .
+      </Text>
+      {isTranscriptEnabled && (
+        <ToolButton
+          icon={<RiFileTextFill size={24} color="white" />}
+          title={t('tools.transcript.title')}
+          description={t('tools.transcript.body')}
+          onPress={() => openTranscript()}
+          isBetaFeature
+          isActive={isTranscriptActive}
+        />
+      )}
+      {hasScreenRecordingAccess && (
+        <ToolButton
+          icon={<RiLiveFill size={24} color="white" />}
+          title={t('tools.screenRecording.title')}
+          description={t('tools.screenRecording.body')}
+          onPress={() => openScreenRecording()}
+          isBetaFeature
+          isActive={isScreenRecordingActive}
+        />
+      )}
+    </Div>
+  )
+}

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

@@ -1,108 +0,0 @@
-import { Button, Div, H, Text } from '@/primitives'
-
-import thirdSlide from '@/assets/intro-slider/3_resume.png'
-import { css } from '@/styled-system/css'
-
-import { useHasTranscriptAccess } from '../hooks/useHasTranscriptAccess'
-import { RiRecordCircleLine, RiStopCircleLine } from '@remixicon/react'
-import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
-import { useRoomContext } from '@livekit/components-react'
-import {
-  RecordingMode,
-  useStartRecording,
-} from '@/features/rooms/api/startRecording'
-import { useStopRecording } from '@/features/rooms/api/stopRecording'
-import { useEffect, useState } from 'react'
-import { RoomEvent } from 'livekit-client'
-import { useTranslation } from 'react-i18next'
-
-export const Transcript = () => {
-  const [isLoading, setIsLoading] = useState(false)
-
-  const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
-
-  const hasTranscriptAccess = useHasTranscriptAccess()
-
-  const roomId = useRoomId()
-
-  const { mutateAsync: startRecordingRoom } = useStartRecording()
-  const { mutateAsync: stopRecordingRoom } = useStopRecording()
-
-  const room = useRoomContext()
-
-  useEffect(() => {
-    const handleRecordingStatusChanged = () => {
-      setIsLoading(false)
-    }
-    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-    return () => {
-      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-    }
-  }, [room])
-
-  const handleTranscript = async () => {
-    if (!roomId) {
-      console.warn('No room ID found')
-      return
-    }
-    try {
-      setIsLoading(true)
-      if (room.isRecording) {
-        await stopRecordingRoom({ id: roomId })
-      } else {
-        await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript })
-      }
-    } catch (error) {
-      console.error('Failed to handle transcript:', error)
-      setIsLoading(false)
-    }
-  }
-
-  if (!hasTranscriptAccess) return
-
-  return (
-    <Div
-      display="flex"
-      overflowY="scroll"
-      padding="0 1.5rem"
-      flexGrow={1}
-      flexDirection="column"
-      alignItems="center"
-    >
-      <img src={thirdSlide} alt={'wip'} />
-      {room.isRecording ? (
-        <>
-          <H lvl={2}>{t('stop.heading')}</H>
-          <Text variant="sm" centered wrap="balance">
-            {t('stop.body')}
-          </Text>
-          <div className={css({ height: '2rem' })} />
-          <Button
-            isDisabled={isLoading}
-            onPress={() => handleTranscript()}
-            data-attr="stop-transcript"
-          >
-            <RiStopCircleLine style={{ marginRight: '0.5rem' }} />{' '}
-            {t('stop.button')}
-          </Button>
-        </>
-      ) : (
-        <>
-          <H lvl={2}>{t('start.heading')}</H>
-          <Text variant="sm" centered wrap="balance">
-            {t('start.body')}
-          </Text>
-          <div className={css({ height: '2rem' })} />
-          <Button
-            isDisabled={isLoading}
-            onPress={() => handleTranscript()}
-            data-attr="start-transcript"
-          >
-            <RiRecordCircleLine style={{ marginRight: '0.5rem' }} />{' '}
-            {t('start.button')}
-          </Button>
-        </>
-      )}
-    </Div>
-  )
-}

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

@@ -0,0 +1,41 @@
+import { useTranslation } from 'react-i18next'
+import { RiInformationLine } from '@remixicon/react'
+import { css } from '@/styled-system/css'
+import { ToggleButton } from '@/primitives'
+import { useSidePanel } from '../../hooks/useSidePanel'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
+
+export const InfoToggle = ({
+  onPress,
+  ...props
+}: Partial<ToggleButtonProps>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.info' })
+
+  const { isInfoOpen, toggleInfo } = useSidePanel()
+  const tooltipLabel = isInfoOpen ? 'open' : 'closed'
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <ToggleButton
+        square
+        variant="primaryTextDark"
+        aria-label={t(tooltipLabel)}
+        tooltip={t(tooltipLabel)}
+        isSelected={isInfoOpen}
+        onPress={(e) => {
+          toggleInfo()
+          onPress?.(e)
+        }}
+        data-attr={`controls-info-${tooltipLabel}`}
+        {...props}
+      >
+        <RiInformationLine />
+      </ToggleButton>
+    </div>
+  )
+}

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

@@ -2,14 +2,14 @@ import { RiMegaphoneLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { GRIST_FORM } from '@/utils/constants'
+import { GRIST_FEEDBACKS_FORM } from '@/utils/constants'
 
 export const FeedbackMenuItem = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
 
   return (
     <MenuItem
-      href={GRIST_FORM}
+      href={GRIST_FEEDBACKS_FORM}
       target="_blank"
       className={menuRecipe({ icon: true, variant: 'dark' }).item}
     >

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

@@ -33,19 +33,20 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
   const [isAlertOpen, setIsAlertOpen] = useState(false)
   const name = participant.name || participant.identity
 
+  const label = isLocal(participant)
+    ? t('participants.muteYourself')
+    : t('participants.muteParticipant', {
+        name,
+      })
+
   return (
     <>
       <Button
         square
         variant="greyscale"
         size="sm"
-        tooltip={
-          isLocal(participant)
-            ? t('participants.muteYourself')
-            : t('participants.muteParticipant', {
-                name,
-              })
-        }
+        tooltip={label}
+        aria-label={label}
         isDisabled={isMuted}
         onPress={() =>
           !isMuted && isLocal(participant)
@@ -55,7 +56,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
         data-attr="participants-mute"
       >
         {isMuted ? (
-          <RiMicOffFill color={'gray'} />
+          <RiMicOffFill color={'gray'} aria-hidden={true} />
         ) : (
           <RiMicFill
             className={css({
@@ -64,6 +65,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
                 ? 'pulse_background 800ms infinite'
                 : undefined,
             })}
+            aria-hidden={true}
           />
         )}
       </Button>

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

@@ -1,24 +1,19 @@
 import { ToggleButton } from '@/primitives'
-import { RiBardLine } from '@remixicon/react'
+import { RiShapesLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
-import { useHasTranscriptAccess } from '../../hooks/useHasTranscriptAccess'
 import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
-export const TranscriptToggle = ({
+export const ToolsToggle = ({
   variant = 'primaryTextDark',
   onPress,
   ...props
 }: ToggleButtonProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.transcript' })
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.tools' })
 
-  const { isTranscriptOpen, toggleTranscript } = useSidePanel()
-  const tooltipLabel = isTranscriptOpen ? 'open' : 'closed'
-
-  const hasTranscriptAccess = useHasTranscriptAccess()
-
-  if (!hasTranscriptAccess) return
+  const { isToolsOpen, toggleTools } = useSidePanel()
+  const tooltipLabel = isToolsOpen ? 'open' : 'closed'
 
   return (
     <div
@@ -32,15 +27,15 @@ export const TranscriptToggle = ({
         variant={variant}
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
-        isSelected={isTranscriptOpen}
+        isSelected={isToolsOpen}
         onPress={(e) => {
-          toggleTranscript()
+          toggleTools()
           onPress?.(e)
         }}
         {...props}
-        data-attr="toggle-transcript"
+        data-attr="toggle-tools"
       >
-        <RiBardLine />
+        <RiShapesLine />
       </ToggleButton>
     </div>
   )

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

@@ -1,8 +1,9 @@
 import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+import { FeatureFlags } from '@/features/analytics/enums'
 
 export const useHasFaceLandmarksAccess = () => {
-  const featureEnabled = useFeatureFlagEnabled('face-landmarks')
+  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.faceLandmarks)
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
 
   return featureEnabled || !isAnalyticsEnabled

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

@@ -1,17 +0,0 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
-import { useIsTranscriptEnabled } from './useIsTranscriptEnabled'
-import { useIsAdminOrOwner } from './useIsAdminOrOwner'
-
-export const useHasTranscriptAccess = () => {
-  const featureEnabled = useFeatureFlagEnabled('transcription-summary')
-  const isAnalyticsEnabled = useIsAnalyticsEnabled()
-  const isTranscriptEnabled = useIsTranscriptEnabled()
-  const isAdminOrOwner = useIsAdminOrOwner()
-
-  return (
-    (featureEnabled || !isAnalyticsEnabled) &&
-    isAdminOrOwner &&
-    isTranscriptEnabled
-  )
-}

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

@@ -1,11 +0,0 @@
-import { RecordingMode } from '@/features/rooms/api/startRecording'
-import { useConfig } from '@/api/useConfig'
-
-export const useIsTranscriptEnabled = () => {
-  const { data } = useConfig()
-
-  return (
-    data?.recording?.is_enabled &&
-    data?.recording?.available_modes?.includes(RecordingMode.Transcript)
-  )
-}

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

@@ -5,53 +5,92 @@ export enum PanelId {
   PARTICIPANTS = 'participants',
   EFFECTS = 'effects',
   CHAT = 'chat',
-  TRANSCRIPT = 'transcript',
+  TOOLS = 'tools',
   ADMIN = 'admin',
+  INFO = 'info',
+}
+
+export enum SubPanelId {
+  TRANSCRIPT = 'transcript',
+  SCREEN_RECORDING = 'screenRecording',
 }
 
 export const useSidePanel = () => {
   const layoutSnap = useSnapshot(layoutStore)
   const activePanelId = layoutSnap.activePanelId
+  const activeSubPanelId = layoutSnap.activeSubPanelId
 
   const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
   const isEffectsOpen = activePanelId == PanelId.EFFECTS
   const isChatOpen = activePanelId == PanelId.CHAT
-  const isTranscriptOpen = activePanelId == PanelId.TRANSCRIPT
+  const isToolsOpen = activePanelId == PanelId.TOOLS
   const isAdminOpen = activePanelId == PanelId.ADMIN
+  const isInfoOpen = activePanelId == PanelId.INFO
+  const isTranscriptOpen = activeSubPanelId == SubPanelId.TRANSCRIPT
+  const isScreenRecordingOpen = activeSubPanelId == SubPanelId.SCREEN_RECORDING
   const isSidePanelOpen = !!activePanelId
+  const isSubPanelOpen = !!activeSubPanelId
 
   const toggleAdmin = () => {
     layoutStore.activePanelId = isAdminOpen ? null : PanelId.ADMIN
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleParticipants = () => {
     layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleChat = () => {
     layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
   const toggleEffects = () => {
     layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
-  const toggleTranscript = () => {
-    layoutStore.activePanelId = isTranscriptOpen ? null : PanelId.TRANSCRIPT
+  const toggleTools = () => {
+    layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const toggleInfo = () => {
+    layoutStore.activePanelId = isInfoOpen ? null : PanelId.INFO
+    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+  }
+
+  const openTranscript = () => {
+    layoutStore.activeSubPanelId = SubPanelId.TRANSCRIPT
+    layoutStore.activePanelId = PanelId.TOOLS
+  }
+
+  const openScreenRecording = () => {
+    layoutStore.activeSubPanelId = SubPanelId.SCREEN_RECORDING
+    layoutStore.activePanelId = PanelId.TOOLS
   }
 
   return {
     activePanelId,
+    activeSubPanelId,
     toggleParticipants,
     toggleChat,
     toggleEffects,
-    toggleTranscript,
+    toggleTools,
     toggleAdmin,
+    toggleInfo,
+    openTranscript,
+    openScreenRecording,
+    isSubPanelOpen,
     isChatOpen,
     isParticipantsOpen,
     isEffectsOpen,
     isSidePanelOpen,
-    isTranscriptOpen,
+    isToolsOpen,
     isAdminOpen,
+    isInfoOpen,
+    isTranscriptOpen,
+    isScreenRecordingOpen,
   }
 }

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

@@ -14,6 +14,7 @@ import {
   RiMore2Line,
   RiSettings3Line,
 } from '@remixicon/react'
+import { GRIST_FEEDBACKS_FORM } from '@/utils/constants'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { ChatToggle } from '../../components/controls/ChatToggle'
 import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
@@ -21,7 +22,7 @@ import { useSidePanel } from '../../hooks/useSidePanel'
 import { LinkButton } from '@/primitives'
 import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
 import { ResponsiveMenu } from './ResponsiveMenu'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+import { ToolsToggle } from '../../components/controls/ToolsToggle'
 import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'
 
 export function MobileControlBar({
@@ -133,7 +134,7 @@ export function MobileControlBar({
               description={true}
               onPress={() => setIsMenuOpened(false)}
             />
-            <TranscriptToggle
+            <ToolsToggle
               description={true}
               onPress={() => setIsMenuOpened(false)}
             />
@@ -150,7 +151,7 @@ export function MobileControlBar({
               <RiAccountBoxLine size={20} />
             </Button>
             <LinkButton
-              href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+              href={GRIST_FEEDBACKS_FORM}
               variant="primaryTextDark"
               tooltip={t('options.items.feedback')}
               aria-label={t('options.items.feedback')}

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

@@ -1,7 +1,8 @@
 import { css } from '@/styled-system/css'
 import { ChatToggle } from '../../components/controls/ChatToggle'
 import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
+import { ToolsToggle } from '../../components/controls/ToolsToggle'
+import { InfoToggle } from '../../components/controls/InfoToggle'
 import { AdminToggle } from '../../components/AdminToggle'
 import { useSize } from '../../hooks/useResizeObserver'
 import { useState, RefObject } from 'react'
@@ -18,9 +19,10 @@ const NavigationControls = ({
   tooltipType = 'instant',
 }: Partial<ToggleButtonProps>) => (
   <>
+    <InfoToggle onPress={onPress} tooltipType={tooltipType} />
     <ChatToggle onPress={onPress} tooltipType={tooltipType} />
     <ParticipantsToggle onPress={onPress} tooltipType={tooltipType} />
-    <TranscriptToggle onPress={onPress} tooltipType={tooltipType} />
+    <ToolsToggle onPress={onPress} tooltipType={tooltipType} />
     <AdminToggle onPress={onPress} tooltipType={tooltipType} />
   </>
 )

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

@@ -28,7 +28,7 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { RecordingStateToast } from '../components/RecordingStateToast'
+import { RecordingStateToast } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 
 const LayoutWrapper = styled(

src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx

@@ -48,6 +48,12 @@ export const CreateMeetingButton = () => {
     setRoom(data.room)
     setCallbackId(undefined)
     setIsPending(false)
+    popupManager.sendRoomData({
+      room: {
+        url: getRouteUrl('room', data.room.slug),
+        ...data.room,
+      },
+    })
   }, [data])
 
   useEffect(() => {
@@ -71,8 +77,21 @@ export const CreateMeetingButton = () => {
 
   if (isPending) {
     return (
-      <div>
-        <Spinner />
+      <div
+        className={css({
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+        })}
+      >
+        <Spinner size={34} />
+        <Button
+          variant="quaternaryText"
+          square
+          icon={<RiCloseLine />}
+          onPress={resetState}
+          aria-label={t('resetLabel')}
+        />
       </div>
     )
   }

src/frontend/src/features/sdk/utils/PopupManager.ts

@@ -39,6 +39,11 @@ export class PopupManager {
     this.messageParent(ClientMessageType.STATE_CLEAR, {})
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public sendRoomData(data: { room: any }) {
+    this.messageParent(ClientMessageType.ROOM_CREATED, data)
+  }
+
   public setupMessageListener(
     onCallbackId: (id: string) => void,
     onRoomData: (data: CallbackCreationRoomData) => void
@@ -54,7 +59,7 @@ export class PopupManager {
         case PopupMessageType.ROOM_DATA:
           if (!data?.room) return
           onRoomData(data.room)
-          this.messageParent(ClientMessageType.ROOM_CREATED, {
+          this.sendRoomData({
             room: {
               url: getRouteUrl('room', data.room.slug),
               ...data.room,

src/frontend/src/locales/de/notifications.json

@@ -21,5 +21,13 @@
     "several": "",
     "open": "",
     "accept": ""
+  },
+  "transcript": {
+    "started": "",
+    "stopped": ""
+  },
+  "screenRecording": {
+    "started": "",
+    "stopped": ""
   }
 }

src/frontend/src/locales/de/recording.json

@@ -0,0 +1,19 @@
+{
+  "error": {
+    "title": "",
+    "body": ""
+  },
+  "authentication": {
+    "title": "",
+    "body": ""
+  },
+  "unsaved": {
+    "title": "",
+    "body": ""
+  },
+  "success": {
+    "title": "",
+    "body": "",
+    "button": ""
+  }
+}

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

@@ -91,6 +91,10 @@
         }
       }
     },
+    "info": {
+      "open": "",
+      "closed": ""
+    },
     "hand": {
       "raise": "",
       "lower": ""
@@ -104,7 +108,7 @@
       "open": "",
       "closed": ""
     },
-    "transcript": {
+    "tools": {
       "open": "",
       "closed": ""
     },
@@ -169,26 +173,83 @@
       "effects": "",
       "chat": "",
       "transcript": "",
-      "admin": ""
+      "screenRecording": "",
+      "admin": "",
+      "tools": "",
+      "info": ""
     },
     "content": {
       "participants": "",
       "effects": "",
       "chat": "",
       "transcript": "",
-      "admin": ""
+      "screenRecording": "",
+      "admin": "",
+      "tools": "",
+      "info": ""
     },
     "closeButton": ""
   },
   "chat": {
     "disclaimer": ""
   },
+  "moreTools": {
+    "body": "",
+    "moreLink": "",
+    "tools": {
+      "transcript": {
+        "title": "",
+        "body": ""
+      },
+      "screenRecording": {
+        "title": "",
+        "body": ""
+      }
+    }
+  },
+  "info": {
+    "roomInformation": {
+      "title": "",
+      "button": {
+        "ariaLabel": "",
+        "copy": "",
+        "copied": ""
+      }
+    }
+  },
   "transcript": {
     "start": {
+      "heading": "",
+      "body": "",
+      "button": "",
+      "linkMore": ""
+    },
+    "stop": {
       "heading": "",
       "body": "",
       "button": ""
     },
+    "stopping": {
+      "heading": "",
+      "body": ""
+    },
+    "beta": {
+      "heading": "",
+      "body": "",
+      "button": ""
+    }
+  },
+  "screenRecording": {
+    "start": {
+      "heading": "",
+      "body": "",
+      "button": "",
+      "linkMore": ""
+    },
+    "stopping": {
+      "heading": "",
+      "body": ""
+    },
     "stop": {
       "heading": "",
       "body": "",
@@ -274,8 +335,20 @@
       }
     }
   },
-  "recording": {
-    "label": ""
+  "recordingBadge": {
+    "transcript": {
+      "started": "",
+      "starting": "",
+      "stopping": ""
+    },
+    "screenRecording": {
+      "started": "",
+      "starting": "",
+      "stopping": ""
+    },
+    "any": {
+      "started": ""
+    }
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/locales/en/notifications.json

@@ -21,5 +21,13 @@
     "several": "Several people want to join this call.",
     "open": "Open",
     "accept": "Accept"
+  },
+  "transcript": {
+    "started": "{{name}} started the meeting transcription.",
+    "stopped": "{{name}} stopped the meeting transcription."
+  },
+  "screenRecording": {
+    "started": "{{name}} started the meeting recording.",
+    "stopped": "{{name}} stopped the meeting recording."
   }
 }

src/frontend/src/locales/en/recording.json

@@ -0,0 +1,19 @@
+{
+  "error": {
+    "title": "Recording unavailable",
+    "body": "This recording could not be found or was deleted after its 7-day validity period."
+  },
+  "authentication": {
+    "title": "Authentication required",
+    "body": "Please log in to access this recording."
+  },
+  "unsaved": {
+    "title": "Download Unavailable",
+    "body": "This recording is not ready for download yet. Please try again later."
+  },
+  "success": {
+    "title": "Your recording is ready!",
+    "body": "Recording of the meeting <b>{{room}}</b> from {{created_at}}.",
+    "button": "Download"
+  }
+}

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

@@ -90,6 +90,10 @@
         }
       }
     },
+    "info": {
+      "open": "Hide information",
+      "closed": "Show information"
+    },
     "hand": {
       "raise": "Raise hand",
       "lower": "Lower hand"
@@ -103,9 +107,9 @@
       "open": "Hide everyone",
       "closed": "See everyone"
     },
-    "transcript": {
-      "open": "Hide AI assistant",
-      "closed": "Show AI assistant"
+    "tools": {
+      "open": "Hide more tools",
+      "closed": "Show more tools"
     },
     "admin": {
       "open": "Hide admin",
@@ -167,31 +171,90 @@
       "participants": "Participants",
       "effects": "Effects",
       "chat": "Messages in the chat",
-      "transcript": "AI Assistant",
-      "admin": "Admin settings"
+      "transcript": "Transcription",
+      "screenRecording": "Recording",
+      "admin": "Admin settings",
+      "tools": "More tools",
+      "info": "Meeting information"
     },
     "content": {
       "participants": "participants",
       "effects": "effects",
       "chat": "messages",
-      "transcript": "AI assistant",
-      "admin": "Admin settings"
+      "transcript": "transcription",
+      "screenRecording": "recording",
+      "admin": "admin settings",
+      "tools": "more tools",
+      "info": "meeting information"
     },
     "closeButton": "Hide {{content}}"
   },
   "chat": {
     "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call."
   },
+  "moreTools": {
+    "body": "Access more tools in Visio to enhance your meetings,",
+    "moreLink": "learn more",
+    "tools": {
+      "transcript": {
+        "title": "Transcription",
+        "body": "Keep a written record of your meeting."
+      },
+      "screenRecording": {
+        "title": "Recording",
+        "body": "Record your meeting to watch it again whenever you like."
+      }
+    }
+  },
+  "info": {
+    "roomInformation": {
+      "title": "Connection Information",
+      "button": {
+        "ariaLabel": "Copy your meeting address",
+        "copy": "Copy address",
+        "copied": "Address copied"
+      }
+    }
+  },
   "transcript": {
     "start": {
-      "heading": "Start the Assistant!",
-      "body": "The assistant automatically starts recording your meeting audio (limited to 1 hour). At the end, you'll receive a clear and concise summary of the discussion directly via email.",
-      "button": "Start"
+      "heading": "Transcribe this call",
+      "body": "Automatically transcribe this call and receive the summary in Docs.",
+      "button": "Start transcription",
+      "loading": "Transcription starting",
+      "linkMore": "Learn more"
     },
     "stop": {
-      "heading": "Recording in Progress...",
-      "body": "Your meeting is currently being recorded. You will receive a summary via email once the meeting ends.",
-      "button": "Stop Recording"
+      "heading": "Transcription in progress...",
+      "body": "The transcription of your meeting is in progress. You will receive the result by email once the meeting is finished.",
+      "button": "Stop transcription"
+    },
+    "stopping": {
+      "heading": "Saving your data…",
+      "body": "This process may take a few minutes. Thank you for your patience."
+    },
+    "beta": {
+      "heading": "Become a beta tester",
+      "body": "Record your meeting for later. You will receive a summary by email once the meeting is finished.",
+      "button": "Sign up"
+    }
+  },
+  "screenRecording": {
+    "start": {
+      "heading": "Record this call",
+      "body": "Record this call to watch it later and receive the video recording by email.",
+      "button": "Start recording",
+      "loading": "Recording starting",
+      "linkMore": "Learn more"
+    },
+    "stopping": {
+      "heading": "Saving your data…",
+      "body": "This process may take a few minutes. Thank you for your patience."
+    },
+    "stop": {
+      "heading": "Recording in progress…",
+      "body": "You will receive the result by email once the recording is complete.",
+      "button": "Stop recording"
     }
   },
   "admin": {
@@ -273,8 +336,20 @@
       }
     }
   },
-  "recording": {
-    "label": "Recording"
+  "recordingStateToast": {
+    "transcript": {
+      "started": "Transcribing",
+      "starting": "Transcription starting",
+      "stopping": "Transcription stopping"
+    },
+    "screenRecording": {
+      "started": "Recording in progress",
+      "starting": "Starting recording",
+      "stopping": "Stopping recording"
+    },
+    "any": {
+      "started": "Recording in progress"
+    }
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/locales/fr/notifications.json

@@ -21,5 +21,13 @@
     "several": "Plusieurs personnes souhaitent participer à cet appel.",
     "open": "Afficher",
     "accept": "Accepter"
+  },
+  "transcript": {
+    "started": "{{name}} a démarré la transcription de la réunion.",
+    "stopped": "{{name}} a arrêté la transcription de la réunion."
+  },
+  "screenRecording": {
+    "started": "{{name}} a démarré l'enregistrement de la réunion.",
+    "stopped": "{{name}} a arrêté l'enregistrement de la réunion."
   }
 }

src/frontend/src/locales/fr/recording.json

@@ -0,0 +1,19 @@
+{
+  "error": {
+    "title": "Enregistrement indisponible",
+    "body": "Cet enregistrement est introuvable ou a été supprimé après sa période de validité de 7 jours."
+  },
+  "authentication": {
+    "title": "Authentification requise",
+    "body": "Veuillez vous connecter pour accéder à cet enregistrement."
+  },
+  "unsaved": {
+    "title": "Téléchargement indisponible",
+    "body": "Cet enregistrement n'est pas encore prêt à être téléchargé. Veuillez réessayer plus tard."
+  },
+  "success": {
+    "title": "Votre enregistrement est prêt !",
+    "body": "Enregistrement de la réunion <b>{{room}}</b> du {{created_at}}.",
+    "button": "Télécharger"
+  }
+}

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

@@ -90,6 +90,10 @@
         }
       }
     },
+    "info": {
+      "open": "Masquer les informations",
+      "closed": "Afficher les informations"
+    },
     "hand": {
       "raise": "Lever la main",
       "lower": "Baisser la main"
@@ -103,9 +107,9 @@
       "open": "Masquer les participants",
       "closed": "Afficher les participants"
     },
-    "transcript": {
-      "open": "Masquer l'assistant IA",
-      "closed": "Afficher l'assistant IA"
+    "tools": {
+      "open": "Masquer plus d'outils",
+      "closed": "Afficher plus d'outils"
     },
     "admin": {
       "open": "Masquer l'admin",
@@ -167,30 +171,89 @@
       "participants": "Participants",
       "effects": "Effets",
       "chat": "Messages dans l'appel",
-      "transcript": "Assistant IA",
-      "admin": "Commandes de l'organisateur"
+      "transcript": "Transcription",
+      "screenRecording": "Enregistrement",
+      "admin": "Commandes de l'organisateur",
+      "tools": "Plus d'outils",
+      "info": "Informations sur la réunion"
     },
     "content": {
       "participants": "les participants",
       "effects": "les effets",
       "chat": "les messages",
-      "transcript": "l'assistant IA",
-      "admin": "Commandes de l'organisateur"
+      "transcript": "transcription",
+      "screenRecording": "enregistrement",
+      "admin": "commandes de l'organisateur",
+      "tools": "plus d'outils",
+      "info": "informations sur la réunion"
     },
     "closeButton": "Masquer {{content}}"
   },
   "chat": {
     "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel."
   },
+  "moreTools": {
+    "body": "Accèder à d'avantage d'outils dans Visio pour améliorer vos réunions,",
+    "moreLink": "en savoir plus",
+    "tools": {
+      "transcript": {
+        "title": "Transcription",
+        "body": "Conservez une trace écrite de votre réunion."
+      },
+      "screenRecording": {
+        "title": "Enregistrement",
+        "body": "Enregistrez votre réunion pour la revoir quand vous le souhaitez."
+      }
+    }
+  },
+  "info": {
+    "roomInformation": {
+      "title": "Informations de connexions",
+      "button": {
+        "ariaLabel": "Copier l'adresse de votre réunion",
+        "copy": "Copier l'adresse",
+        "copied": "Adresse copiée"
+      }
+    }
+  },
   "transcript": {
     "start": {
-      "heading": "Démarrer l'assistant !",
-      "body": "L'assistant démarre automatiquement l'enregistrement sonore de votre réunion (limité à 1h). À la fin, vous recevrez un résumé clair et concis des échanges directement par e-mail.",
-      "button": "Démarrer"
+      "heading": "Transcrire cet appel",
+      "body": "Transcrivez cet appel automatiquement et recevez le compte rendu dans Docs.",
+      "button": "Démarrer la transcription",
+      "loading": "Démarrage de la transcription",
+      "linkMore": "En savoir plus"
+    },
+    "stop": {
+      "heading": "Transcription en cours …",
+      "body": "La transcription de votre réunion est en cours. Vous recevrez le resultat par email une fois la réunion terminée.",
+      "button": "Arrêter la transcription"
+    },
+    "stopping": {
+      "heading": "Sauvegarde de vos données…",
+      "body": "Cette opération peut durer quelques minutes. Merci de votre patience."
+    },
+    "beta": {
+      "heading": "Devenez beta testeur",
+      "body": "Enregistrer votre réunion pour plus tard. Vous recevrez un compte-rendu par email une fois la réunion terminée.",
+      "button": "Inscrivez-vous"
+    }
+  },
+  "screenRecording": {
+    "start": {
+      "heading": "Enregistrer cet appel",
+      "body": "Enregistrez cet appel pour plus tard et recevez l'enregistrement vidéo par mail.",
+      "button": "Démarrer l'enregistrement",
+      "loading": "Démarrage de l'enregistrement",
+      "linkMore": "En savoir plus"
+    },
+    "stopping": {
+      "heading": "Sauvegarde de vos données…",
+      "body": "Cette opération peut durer quelques minutes. Merci de votre patience."
     },
     "stop": {
       "heading": "Enregistrement en cours …",
-      "body": "L'enregistrement de votre réunion est en cours. Vous recevrez un compte-rendu par email une fois la réunion terminée.",
+      "body": "Vous recevrez le resultat par email une fois l'enregistrement terminé.",
       "button": "Arrêter l'enregistrement"
     }
   },
@@ -273,8 +336,20 @@
       }
     }
   },
-  "recording": {
-    "label": "Enregistrement"
+  "recordingStateToast": {
+    "transcript": {
+      "started": "Transcription en cours",
+      "starting": "Démarrage de la transcription",
+      "stopping": "Arrêt de la transcription"
+    },
+    "screenRecording": {
+      "started": "Enregistrement en cours",
+      "starting": "Démarrage de l'enregistrement",
+      "stopping": "Arrêt de l'enregistrement"
+    },
+    "any": {
+      "started": "Enregistrement en cours"
+    }
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/locales/fr/sdk.json

@@ -1,6 +1,6 @@
 {
   "createMeeting": {
-    "createButton": "Créer un lien",
+    "createButton": "Créer un lien Visio",
     "joinButton": "Participer avec Visio",
     "copyLinkTooltip": "Copier le lien",
     "resetLabel": "Réinitialiser",

src/frontend/src/locales/nl/notifications.json

@@ -21,5 +21,13 @@
     "several": "Meerdere mensen willen deelnemen aan dit gesprek.",
     "open": "Openen",
     "accept": "Accepteren"
+  },
+  "transcript": {
+    "started": "{{name}} is de transcriptie van de vergadering gestart.",
+    "stopped": "{{name}} heeft de transcriptie van de vergadering gestopt."
+  },
+  "screenRecording": {
+    "started": "{{name}} is begonnen met het opnemen van de vergadering.",
+    "stopped": "{{name}} is gestopt met het opnemen van de vergadering."
   }
 }

src/frontend/src/locales/nl/recording.json

@@ -0,0 +1,19 @@
+{
+  "error": {
+    "title": "Opname niet beschikbaar",
+    "body": "Deze opname is niet gevonden of is verwijderd na de geldigheidsperiode van 7 dagen."
+  },
+  "authentication": {
+    "title": "Authenticatie vereist",
+    "body": "Log in om toegang te krijgen tot deze opname."
+  },
+  "unsaved": {
+    "title": "Download niet beschikbaar",
+    "body": "Deze opname is nog niet klaar om te worden gedownload. Probeer het later opnieuw."
+  },
+  "success": {
+    "title": "Je opname is klaar!",
+    "body": "Opname van de vergadering <b>{{room}}</b> op {{created_at}}.",
+    "button": "Downloaden"
+  }
+}

src/frontend/src/locales/nl/rooms.json

@@ -90,6 +90,10 @@
         }
       }
     },
+    "info": {
+      "open": "Informatie verbergen",
+      "closed": "Informatie tonen"
+    },
     "hand": {
       "raise": "Hand opsteken",
       "lower": "Hand laten zakken"
@@ -103,9 +107,9 @@
       "open": "Verberg iedereen",
       "closed": "Toon iedereen"
     },
-    "transcript": {
-      "open": "Verberg AI-assistent",
-      "closed": "Toon AI-assistant"
+    "tools": {
+      "open": "Meer tools verbergen",
+      "closed": "Meer tools weergeven"
     },
     "admin": {
       "open": "Verberg beheerder",
@@ -167,31 +171,90 @@
       "participants": "Deelnemers",
       "effects": "Effecten",
       "chat": "Berichten in de chat",
-      "transcript": "AI-assistent",
-      "admin": "Beheerdersbediening"
+      "transcript": "Transcriptie",
+      "screenRecording": "Schermopname",
+      "admin": "Beheerdersbediening",
+      "tools": "Meer tools",
+      "info": "Vergaderinformatie"
     },
     "content": {
       "participants": "deelnemers",
       "effects": "effecten",
       "chat": "berichten",
-      "transcript": "AI-assistent",
-      "admin": "Beheerdersbediening"
+      "screenRecording": "transcriptie",
+      "transcript": "schermopname",
+      "admin": "beheerdersbediening",
+      "tools": "meer tools",
+      "info": "vergaderinformatie"
     },
     "closeButton": "Verberg {{content}}"
   },
   "chat": {
     "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek."
   },
+  "moreTools": {
+    "body": "Toegang tot meer tools in Visio om je vergaderingen te verbeteren,",
+    "moreLink": "lees meer",
+    "tools": {
+      "transcript": {
+        "title": "Transcriptie",
+        "body": "Bewaar een schriftelijk verslag van je vergadering."
+      },
+      "screenRecording": {
+        "title": "Opname",
+        "body": "Neem je vergadering op om die later opnieuw te bekijken."
+      }
+    }
+  },
+  "info": {
+    "roomInformation": {
+      "title": "Verbindingsinformatie",
+      "button": {
+        "ariaLabel": "Kopieer je vergaderadres",
+        "copy": "Adres kopiëren",
+        "copied": "Adres gekopieerd"
+      }
+    }
+  },
   "transcript": {
     "start": {
-      "heading": "Start de assistent!",
-      "body": "De assistent begint automatisch de audio van uw vergadering op te nemen (beperkt tot 1 uur). Na afloop krijgt u direct een heldere en beknopte samenvatting van de discussies in uw e-mail.",
-      "button": "Start"
+      "heading": "Transcribeer dit gesprek",
+      "body": "Transcribeer dit gesprek automatisch en ontvang het verslag in Docs.",
+      "button": "Transcriptie starten",
+      "loading": "Transcriptie begint",
+      "linkMore": "Meer informatie"
     },
     "stop": {
-      "heading": "Opname loopt ...",
-      "body": "Uw vergadering wordt momenteel opgenomen. U ontvangt een samenvatting via e-mail, zo gauw de vergarding gesloten wordt.",
-      "button": "Stop met opname"
+      "heading": "Transcriptie bezig...",
+      "body": "De transcriptie van uw vergadering is bezig. U ontvangt het resultaat per e-mail zodra de vergadering is afgelopen.",
+      "button": "Transcriptie stoppen"
+    },
+    "stopping": {
+      "heading": "Uw gegevens worden opgeslagen…",
+      "body": "Dit proces kan enkele minuten duren. Bedankt voor uw geduld."
+    },
+    "beta": {
+      "heading": "Word betatester",
+      "body": "Neem uw vergadering op voor later. U ontvangt een samenvatting per e-mail zodra de vergadering is afgelopen.",
+      "button": "Aanmelden"
+    }
+  },
+  "screenRecording": {
+    "start": {
+      "heading": "Dit gesprek opnemen",
+      "body": "Neem dit gesprek op om het later terug te kijken. Je ontvangt de video-opname per e-mail.",
+      "button": "Opname starten",
+      "loading": "Opname gestarten",
+      "linkMore": "Meer informatie"
+    },
+    "stopping": {
+      "heading": "Uw gegevens worden opgeslagen…",
+      "body": "Dit proces kan enkele minuten duren. Bedankt voor uw geduld."
+    },
+    "stop": {
+      "heading": "Opname bezig …",
+      "body": "Je ontvangt het resultaat per e-mail zodra de opname is voltooid.",
+      "button": "Opname stoppen"
     }
   },
   "admin": {
@@ -273,8 +336,20 @@
       }
     }
   },
-  "recording": {
-    "label": "Opnemen"
+  "recordingStateToast": {
+    "transcript": {
+      "started": "Transcriptie bezig",
+      "starting": "Transcriptie begint",
+      "stopping": "Transcriptie stopt"
+    },
+    "screenRecording": {
+      "started": "Opname bezig",
+      "starting": "Opname starten",
+      "stopping": "Opname stoppen"
+    },
+    "any": {
+      "started": "Opname bezig"
+    }
   },
   "participantTileFocus": {
     "pin": {

src/frontend/src/primitives/LinkButton.tsx

@@ -9,6 +9,7 @@ type LinkButtonProps = RecipeVariantProps<ButtonRecipe> &
   TooltipWrapperProps & {
     // Use tooltip as description below the button.
     description?: boolean
+    target?: string
   }
 
 export const LinkButton = ({

src/frontend/src/primitives/Spinner.tsx

@@ -1,7 +1,13 @@
 import { ProgressBar } from 'react-aria-components'
 import { css } from '@/styled-system/css'
 
-export const Spinner = () => {
+export const Spinner = ({
+  size = 56,
+  variant = 'light',
+}: {
+  size?: number
+  variant?: 'light' | 'dark'
+}) => {
   const center = 14
   const strokeWidth = 3
   const r = 14 - strokeWidth
@@ -11,8 +17,8 @@ export const Spinner = () => {
       {({ percentage }) => (
         <>
           <svg
-            width={56}
-            height={56}
+            width={size}
+            height={size}
             viewBox="0 0 28 28"
             fill="none"
             strokeWidth={strokeWidth}
@@ -25,7 +31,7 @@ export const Spinner = () => {
               strokeDashoffset={0}
               strokeLinecap="round"
               className={css({
-                stroke: 'primary.100',
+                stroke: variant == 'light' ? 'primary.100' : 'transparent',
               })}
               style={{}}
             />
@@ -37,7 +43,7 @@ export const Spinner = () => {
               strokeDashoffset={percentage && c - (percentage / 100) * c}
               strokeLinecap="round"
               className={css({
-                stroke: 'primary.800',
+                stroke: variant == 'light' ? 'primary.800' : 'white',
               })}
               style={{
                 animation: `rotate 1s ease-in-out infinite`,

src/frontend/src/primitives/Text.tsx

@@ -57,6 +57,10 @@ export const text = cva({
         color: 'default.subtle-text',
         textStyle: 'sm',
       },
+      xsNote: {
+        color: 'default.subtle-text',
+        textStyle: 'xs',
+      },
       inherits: {},
     },
     centered: {

src/frontend/src/primitives/buttonRecipe.ts

@@ -42,6 +42,7 @@ export const buttonRecipe = cva({
       primary: {
         backgroundColor: 'primary.800',
         color: 'white',
+        fontWeight: 'medium !important',
         '&[data-hovered]': {
           backgroundColor: 'primary.action',
         },
@@ -56,6 +57,7 @@ export const buttonRecipe = cva({
       secondary: {
         backgroundColor: 'white',
         color: 'primary.800',
+        fontWeight: 'medium !important',
         borderColor: 'primary.800',
         '&[data-hovered]': {
           backgroundColor: 'greyscale.100',
@@ -113,6 +115,7 @@ export const buttonRecipe = cva({
       },
       tertiary: {
         backgroundColor: 'primary.100',
+        fontWeight: 'medium !important',
         color: 'primary.800',
         '&[data-hovered]': {
           backgroundColor: 'primary.300',
@@ -120,9 +123,14 @@ export const buttonRecipe = cva({
         '&[data-pressed]': {
           backgroundColor: 'primary.300',
         },
+        '&[data-disabled]': {
+          backgroundColor: 'transparent',
+          color: 'primary.400',
+        },
       },
       tertiaryText: {
         backgroundColor: 'transparent',
+        fontWeight: 'medium !important',
         color: 'primary.900',
         '&[data-hovered]': {
           backgroundColor: 'primary.300',
@@ -133,6 +141,7 @@ export const buttonRecipe = cva({
       },
       primaryDark: {
         backgroundColor: 'primaryDark.100',
+        fontWeight: 'medium !important',
         color: 'white',
         '&[data-pressed]': {
           backgroundColor: 'primaryDark.900',
@@ -149,6 +158,7 @@ export const buttonRecipe = cva({
       },
       secondaryDark: {
         backgroundColor: 'primaryDark.50',
+        fontWeight: 'medium !important',
         color: 'white',
         '&[data-pressed]': {
           backgroundColor: 'primaryDark.200',
@@ -164,6 +174,7 @@ export const buttonRecipe = cva({
       },
       primaryTextDark: {
         backgroundColor: 'transparent',
+        fontWeight: 'medium !important',
         color: 'white',
         '&[data-hovered]': {
           backgroundColor: 'primaryDark.100',
@@ -179,6 +190,7 @@ export const buttonRecipe = cva({
       },
       quaternaryText: {
         backgroundColor: 'transparent',
+        fontWeight: 'medium !important',
         color: 'greyscale.600',
         '&[data-hovered]': {
           backgroundColor: 'greyscale.100',

src/frontend/src/routes.ts

@@ -5,6 +5,7 @@ import { AccessibilityRoute } from '@/features/legalsTerms/Accessibility'
 import { TermsOfServiceRoute } from '@/features/legalsTerms/TermsOfService'
 import { CreatePopup } from '@/features/sdk/routes/CreatePopup'
 import { CreateMeetingButton } from '@/features/sdk/routes/CreateMeetingButton'
+import { RecordingDownloadRoute } from '@/features/recording'
 
 export const routes: Record<
   | 'home'
@@ -14,7 +15,8 @@ export const routes: Record<
   | 'accessibility'
   | 'termsOfService'
   | 'sdkCreatePopup'
-  | 'sdkCreateButton',
+  | 'sdkCreateButton'
+  | 'recordingDownload',
   {
     name: RouteName
     path: RegExp | string
@@ -64,6 +66,14 @@ export const routes: Record<
     path: '/sdk/create-button',
     Component: CreateMeetingButton,
   },
+  recordingDownload: {
+    name: 'recordingDownload',
+    path: new RegExp(
+      `^[/]recording[/](?<recordingId>[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$`
+    ),
+    to: (recordingId: string) => `/recording/${recordingId.trim()}`,
+    Component: RecordingDownloadRoute,
+  },
 }
 
 export type RouteName = keyof typeof routes

src/frontend/src/stores/layout.ts

@@ -1,14 +1,19 @@
 import { proxy } from 'valtio'
-import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
+import {
+  PanelId,
+  SubPanelId,
+} from '@/features/rooms/livekit/hooks/useSidePanel'
 
 type State = {
   showHeader: boolean
   showFooter: boolean
   activePanelId: PanelId | null
+  activeSubPanelId: SubPanelId | null
 }
 
 export const layoutStore = proxy<State>({
   showHeader: false,
   showFooter: false,
   activePanelId: null,
+  activeSubPanelId: null,
 })

src/frontend/src/stores/recording.ts

@@ -0,0 +1,20 @@
+import { proxy } from 'valtio'
+
+export enum RecordingStatus {
+  TRANSCRIPT_STARTING,
+  TRANSCRIPT_STARTED,
+  TRANSCRIPT_STOPPING,
+  STOPPED,
+  SCREEN_RECORDING_STARTING,
+  SCREEN_RECORDING_STARTED,
+  SCREEN_RECORDING_STOPPING,
+  ANY_STARTED,
+}
+
+type State = {
+  status: RecordingStatus
+}
+
+export const recordingStore = proxy<State>({
+  status: RecordingStatus.STOPPED,
+})

src/frontend/src/utils/constants.ts

@@ -1,2 +1,14 @@
-export const GRIST_FORM =
-  'https://grist.numerique.gouv.fr/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4' as const
+export const GRIST_FEEDBACKS_FORM =
+  'https://grist.numerique.gouv.fr/o/docs/cbMv4G7pLY3Z/USER-RESEARCH-or-LA-SUITE/f/26' as const
+
+export const BETA_USERS_FORM_URL =
+  'https://grist.numerique.gouv.fr/o/docs/forms/3fFfvJoTBEQ6ZiMi8zsQwX/17' as const
+
+export const CRISP_HELP_ARTICLE_MORE_TOOLS =
+  'https://lasuite.crisp.help/fr/article/visio-tools-bvxj23' as const
+
+export const CRISP_HELP_ARTICLE_TRANSCRIPT =
+  'https://lasuite.crisp.help/fr/article/visio-transcript-1sjq43x' as const
+
+export const CRISP_HELP_ARTICLE_RECORDING =
+  'https://lasuite.crisp.help/fr/article/visio-enregistrement-wgc8o0' as const

src/frontend/src/utils/formatDate.ts

@@ -0,0 +1,29 @@
+export function formatDate(
+  date: Date | string | number,
+  format: string = 'YYYY-MM-DD'
+): string {
+  const dateObj = date instanceof Date ? date : new Date(date)
+
+  if (isNaN(dateObj.getTime())) {
+    return 'Invalid Date'
+  }
+
+  const year = dateObj.getFullYear()
+  const month = dateObj.getMonth() + 1 // getMonth() returns 0-11
+  const day = dateObj.getDate()
+  const hours = dateObj.getHours()
+  const minutes = dateObj.getMinutes()
+  const seconds = dateObj.getSeconds()
+
+  const pad = (num: number): string => String(num).padStart(2, '0')
+
+  let result = format
+  result = result.replace(/YYYY/g, year.toString())
+  result = result.replace(/MM/g, pad(month))
+  result = result.replace(/DD/g, pad(day))
+  result = result.replace(/HH/g, pad(hours))
+  result = result.replace(/mm/g, pad(minutes))
+  result = result.replace(/ss/g, pad(seconds))
+
+  return result
+}

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

@@ -16,6 +16,11 @@ backend:
     DJANGO_EMAIL_HOST: "mailcatcher"
     DJANGO_EMAIL_PORT: 1025
     DJANGO_EMAIL_USE_SSL: False
+    DJANGO_EMAIL_BRAND_NAME: "La Suite Numérique"
+    DJANGO_EMAIL_SUPPORT_EMAIL: "test@yopmail.com"
+    DJANGO_EMAIL_LOGO_IMG: https://meet.127.0.0.1.nip.io/assets/logo-suite-numerique.png
+    DJANGO_EMAIL_DOMAIN: meet.127.0.0.1.nip.io
+    DJANGO_EMAIL_APP_BASE_URL: https://meet.127.0.0.1.nip.io
     OIDC_OP_JWKS_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/certs
     OIDC_OP_AUTHORIZATION_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/auth
     OIDC_OP_TOKEN_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/meet/protocol/openid-connect/token
@@ -61,6 +66,7 @@ backend:
     RECORDING_STORAGE_EVENT_TOKEN: password
     SUMMARY_SERVICE_ENDPOINT: http://meet-summary:80/api/v1/tasks/
     SUMMARY_SERVICE_API_TOKEN: password
+    SCREEN_RECORDING_BASE_URL: https://meet.127.0.0.1.nip.io/recordings
     SSL_CERT_FILE: /usr/local/lib/python3.12/site-packages/certifi/cacert.pem
 
 
@@ -195,3 +201,17 @@ celery:
     - "worker"
     - "--pool=solo"
     - "--loglevel=info"
+
+ingressMedia:
+  enabled: true
+  host: meet.127.0.0.1.nip.io
+
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: https://meet.127.0.0.1.nip.io/api/v1.0/recordings/media-auth/
+    nginx.ingress.kubernetes.io/auth-response-headers: "Authorization, X-Amz-Date, X-Amz-Content-SHA256"
+    nginx.ingress.kubernetes.io/upstream-vhost: minio.meet.svc.cluster.local:9000
+    nginx.ingress.kubernetes.io/rewrite-target: /meet-media-storage/$1
+
+serviceMedia:
+  host: minio.meet.svc.cluster.local
+  port: 9000

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

@@ -32,6 +32,11 @@ backend:
     DJANGO_EMAIL_HOST: "mailcatcher"
     DJANGO_EMAIL_PORT: 1025
     DJANGO_EMAIL_USE_SSL: False
+    DJANGO_EMAIL_BRAND_NAME: "La Suite Numérique"
+    DJANGO_EMAIL_SUPPORT_EMAIL: "test@yopmail.com"
+    DJANGO_EMAIL_LOGO_IMG: https://meet.127.0.0.1.nip.io/assets/logo-suite-numerique.png
+    DJANGO_EMAIL_DOMAIN: meet.127.0.0.1.nip.io
+    DJANGO_EMAIL_APP_BASE_URL: https://meet.127.0.0.1.nip.io
     OIDC_OP_JWKS_ENDPOINT: https://fca.integ01.dev-agentconnect.fr/api/v2/jwks
     OIDC_OP_AUTHORIZATION_ENDPOINT: https://fca.integ01.dev-agentconnect.fr/api/v2/authorize
     OIDC_OP_TOKEN_ENDPOINT: https://fca.integ01.dev-agentconnect.fr/api/v2/token
@@ -83,6 +88,7 @@ backend:
     RECORDING_STORAGE_EVENT_TOKEN: password
     SUMMARY_SERVICE_ENDPOINT: http://meet-summary:80/api/v1/tasks/
     SUMMARY_SERVICE_API_TOKEN: password
+    SCREEN_RECORDING_BASE_URL: https://meet.127.0.0.1.nip.io/recordings
     SIGNUP_NEW_USER_TO_MARKETING_EMAIL: True
     BREVO_API_KEY:
       secretKeyRef:
@@ -223,3 +229,17 @@ celery:
     - "worker"
     - "--pool=solo"
     - "--loglevel=info"
+
+ingressMedia:
+  enabled: true
+  host: meet.127.0.0.1.nip.io
+
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: https://meet.127.0.0.1.nip.io/api/v1.0/recordings/media-auth/
+    nginx.ingress.kubernetes.io/auth-response-headers: "Authorization, X-Amz-Date, X-Amz-Content-SHA256"
+    nginx.ingress.kubernetes.io/upstream-vhost: minio.meet.svc.cluster.local:9000
+    nginx.ingress.kubernetes.io/rewrite-target: /meet-media-storage/$1
+
+serviceMedia:
+  host: minio.meet.svc.cluster.local
+  port: 9000

src/helm/meet/Chart.yaml

@@ -1,4 +1,4 @@
 apiVersion: v2
 type: application
 name: meet
-version: 0.0.3
+version: 0.0.4

src/helm/meet/README.md

@@ -4,34 +4,50 @@
 
 ### General configuration
 
-| Name                                       | Description                                          | Value                  |
-| ------------------------------------------ | ---------------------------------------------------- | ---------------------- |
-| `image.repository`                         | Repository to use to pull meet's container image     | `lasuite/meet-backend` |
-| `image.tag`                                | meet's container tag                                 | `latest`               |
-| `image.pullPolicy`                         | Container image pull policy                          | `IfNotPresent`         |
-| `image.credentials.username`               | Username for container registry authentication       |                        |
-| `image.credentials.password`               | Password for container registry authentication       |                        |
-| `image.credentials.registry`               | Registry url for which the credentials are specified |                        |
-| `image.credentials.name`                   | Name of the generated secret for imagePullSecrets    |                        |
-| `nameOverride`                             | Override the chart name                              | `""`                   |
-| `fullnameOverride`                         | Override the full application name                   | `""`                   |
-| `ingress.enabled`                          | whether to enable the Ingress or not                 | `false`                |
-| `ingress.className`                        | IngressClass to use for the Ingress                  | `nil`                  |
-| `ingress.host`                             | Host for the Ingress                                 | `meet.example.com`     |
-| `ingress.path`                             | Path to use for the Ingress                          | `/`                    |
-| `ingress.hosts`                            | Additional host to configure for the Ingress         | `[]`                   |
-| `ingress.tls.enabled`                      | Weather to enable TLS for the Ingress                | `true`                 |
-| `ingress.tls.additional[].secretName`      | Secret name for additional TLS config                |                        |
-| `ingress.tls.additional[].hosts[]`         | Hosts for additional TLS config                      |                        |
-| `ingress.customBackends`                   | Add custom backends to ingress                       | `[]`                   |
-| `ingressAdmin.enabled`                     | whether to enable the Ingress or not                 | `false`                |
-| `ingressAdmin.className`                   | IngressClass to use for the Ingress                  | `nil`                  |
-| `ingressAdmin.host`                        | Host for the Ingress                                 | `meet.example.com`     |
-| `ingressAdmin.path`                        | Path to use for the Ingress                          | `/admin`               |
-| `ingressAdmin.hosts`                       | Additional host to configure for the Ingress         | `[]`                   |
-| `ingressAdmin.tls.enabled`                 | Weather to enable TLS for the Ingress                | `true`                 |
-| `ingressAdmin.tls.additional[].secretName` | Secret name for additional TLS config                |                        |
-| `ingressAdmin.tls.additional[].hosts[]`    | Hosts for additional TLS config                      |                        |
+| Name                                                                         | Description                                          | Value                                                             |
+| ---------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------- |
+| `image.repository`                                                           | Repository to use to pull meet's container image     | `lasuite/meet-backend`                                            |
+| `image.tag`                                                                  | meet's container tag                                 | `latest`                                                          |
+| `image.pullPolicy`                                                           | Container image pull policy                          | `IfNotPresent`                                                    |
+| `image.credentials.username`                                                 | Username for container registry authentication       |                                                                   |
+| `image.credentials.password`                                                 | Password for container registry authentication       |                                                                   |
+| `image.credentials.registry`                                                 | Registry url for which the credentials are specified |                                                                   |
+| `image.credentials.name`                                                     | Name of the generated secret for imagePullSecrets    |                                                                   |
+| `nameOverride`                                                               | Override the chart name                              | `""`                                                              |
+| `fullnameOverride`                                                           | Override the full application name                   | `""`                                                              |
+| `ingress.enabled`                                                            | whether to enable the Ingress or not                 | `false`                                                           |
+| `ingress.className`                                                          | IngressClass to use for the Ingress                  | `nil`                                                             |
+| `ingress.host`                                                               | Host for the Ingress                                 | `meet.example.com`                                                |
+| `ingress.path`                                                               | Path to use for the Ingress                          | `/`                                                               |
+| `ingress.hosts`                                                              | Additional host to configure for the Ingress         | `[]`                                                              |
+| `ingress.tls.enabled`                                                        | Weather to enable TLS for the Ingress                | `true`                                                            |
+| `ingress.tls.additional[].secretName`                                        | Secret name for additional TLS config                |                                                                   |
+| `ingress.tls.additional[].hosts[]`                                           | Hosts for additional TLS config                      |                                                                   |
+| `ingress.customBackends`                                                     | Add custom backends to ingress                       | `[]`                                                              |
+| `ingressAdmin.enabled`                                                       | whether to enable the Ingress or not                 | `false`                                                           |
+| `ingressAdmin.className`                                                     | IngressClass to use for the Ingress                  | `nil`                                                             |
+| `ingressAdmin.host`                                                          | Host for the Ingress                                 | `meet.example.com`                                                |
+| `ingressAdmin.path`                                                          | Path to use for the Ingress                          | `/admin`                                                          |
+| `ingressAdmin.hosts`                                                         | Additional host to configure for the Ingress         | `[]`                                                              |
+| `ingressAdmin.tls.enabled`                                                   | Weather to enable TLS for the Ingress                | `true`                                                            |
+| `ingressAdmin.tls.additional[].secretName`                                   | Secret name for additional TLS config                |                                                                   |
+| `ingressAdmin.tls.additional[].hosts[]`                                      | Hosts for additional TLS config                      |                                                                   |
+| `ingressMedia.enabled`                                                       | whether to enable the Ingress or not                 | `false`                                                           |
+| `ingressMedia.className`                                                     | IngressClass to use for the Ingress                  | `nil`                                                             |
+| `ingressMedia.host`                                                          | Host for the Ingress                                 | `meet.example.com`                                                |
+| `ingressMedia.path`                                                          | Path to use for the Ingress                          | `/media/(.*)`                                                     |
+| `ingressMedia.hosts`                                                         | Additional host to configure for the Ingress         | `[]`                                                              |
+| `ingressMedia.tls.enabled`                                                   | Weather to enable TLS for the Ingress                | `true`                                                            |
+| `ingressMedia.tls.secretName`                                                | Secret name for TLS config                           | `nil`                                                             |
+| `ingressMedia.tls.additional[].secretName`                                   | Secret name for additional TLS config                |                                                                   |
+| `ingressMedia.tls.additional[].hosts[]`                                      | Hosts for additional TLS config                      |                                                                   |
+| `ingressMedia.annotations.nginx.ingress.kubernetes.io/auth-url`              |                                                      | `https://meet.example.com/api/v1.0/recordings/media-auth/`        |
+| `ingressMedia.annotations.nginx.ingress.kubernetes.io/auth-response-headers` |                                                      | `Authorization, X-Amz-Date, X-Amz-Content-SHA256`                 |
+| `ingressMedia.annotations.nginx.ingress.kubernetes.io/upstream-vhost`        |                                                      | `minio.meet.svc.cluster.local:9000`                               |
+| `ingressMedia.annotations.nginx.ingress.kubernetes.io/configuration-snippet` |                                                      | `add_header Content-Security-Policy "default-src 'none'" always;` |
+| `serviceMedia.host`                                                          |                                                      | `minio.meet.svc.cluster.local`                                    |
+| `serviceMedia.port`                                                          |                                                      | `9000`                                                            |
+| `serviceMedia.annotations`                                                   |                                                      | `{}`                                                              |
 
 ### backend