⬆️(livekit) upgrade local LiveKit server to version 1.9.0

Update development environment LiveKit server from previous version
to 1.9.0 for latest features and bug fixes.

Ensures development environment stays current
with LiveKit production version.

.github/workflows/docker-hub.yml

@@ -31,7 +31,10 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -64,7 +67,10 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -98,7 +104,10 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -132,7 +141,10 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
       -
         name: Build and push
         uses: docker/build-push-action@v6
@@ -145,12 +157,44 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
 
+  build-and-push-agents:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Checkout repository
+        uses: actions/checkout@v4
+      -
+        name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: lasuite/meet-agents
+      -
+        name: Login to DockerHub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: ./src/agents
+          file: ./src/agents/Dockerfile
+          target: production
+          build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
   notify-argocd:
     needs:
       - build-and-push-frontend-generic
       - build-and-push-frontend-dinum
       - build-and-push-backend
       - build-and-push-summary
+      - build-and-push-agents
     runs-on: ubuntu-latest
     if: github.event_name != 'pull_request'
     steps:

.github/workflows/meet.yml

@@ -20,14 +20,18 @@ jobs:
       - name: show
         run: git log
       - name: Enforce absence of print statements in code
+        if: always()
         run: |
           ! git diff origin/${{ github.event.pull_request.base.ref }}..HEAD -- . ':(exclude)**/meet.yml' | grep "print("
       - name: Check absence of fixup commits
+        if: always()
         run: |
           ! git log | grep 'fixup!'
       - name: Install gitlint
+        if: always()
         run: pip install --user requests gitlint
       - name: Lint commit messages added to main
+        if: always()
         run: ~/.local/bin/gitlint --commits origin/${{ github.event.pull_request.base.ref }}..HEAD
 
   build-mails:
@@ -82,6 +86,7 @@ jobs:
         uses: actions/setup-python@v5
         with:
           python-version: "3.13"
+          cache: "pip"
       - name: Install development dependencies
         run: pip install --user .[dev]
       - name: Check code formatting with ruff
@@ -91,6 +96,46 @@ jobs:
       - name: Lint code with pylint
         run: ~/.local/bin/pylint meet demo core
 
+  lint-agents:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: src/agents
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Install Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.13"
+          cache: "pip"
+      - name: Install development dependencies
+        run: pip install --user .[dev]
+      - name: Check code formatting with ruff
+        run: ~/.local/bin/ruff format . --diff
+      - name: Lint code with ruff
+        run: ~/.local/bin/ruff check .
+
+  lint-summary:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: src/summary
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Install Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.13"
+          cache: "pip"
+      - name: Install development dependencies
+        run: pip install --user .[dev]
+      - name: Check code formatting with ruff
+        run: ~/.local/bin/ruff format . --diff
+      - name: Lint code with ruff
+        run: ~/.local/bin/ruff check .
+
   test-back:
     runs-on: ubuntu-latest
     needs: build-mails
@@ -186,6 +231,7 @@ jobs:
         uses: actions/setup-python@v5
         with:
           python-version: "3.13"
+          cache: "pip"
 
       - name: Install development dependencies
         run: pip install --user .[dev]

bin/Tiltfile

@@ -58,14 +58,26 @@ docker_build(
     'localhost:5001/meet-summary:latest',
     context='../src/summary',
     dockerfile='../src/summary/Dockerfile',
-    only=['.', '../../docker', '../../.dockerignore'],
+    only=['.'],
     target = 'production',
     live_update=[
-        sync('../src/summary', '/home/summary'),
+        sync('../src/summary', '/app'),
     ]
 )
 clean_old_images('localhost:5001/meet-summary')
 
+docker_build(
+    'localhost:5001/meet-agents:latest',
+    context='../src/agents',
+    dockerfile='../src/agents/Dockerfile',
+   only=['.'],
+    target = 'production',
+    live_update=[
+        sync('../src/agents', '/app'),
+    ]
+)
+clean_old_images('localhost:5001/meet-agents')
+
 # Copy the mkcert root CA certificate to our Docker build context
 # This is necessary because we need to inject the certificate into our LiveKit container
 local_resource(
@@ -85,6 +97,13 @@ clean_old_images('localhost:5001/meet-livekit')
 
 k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev} template .'))
 
+k8s_resource('minio-bucket', resource_deps=['minio'])
+k8s_resource('meet-backend', resource_deps=['postgresql', 'minio', 'redis', 'livekit-livekit-server'])
+k8s_resource('meet-backend-migrate', resource_deps=['meet-backend'])
+k8s_resource('livekit-livekit-server-test-connection', resource_deps=['livekit-livekit-server'])
+k8s_resource('keycloak', resource_deps=['kc-postgresql'])
+k8s_resource('meet-backend-createsuperuser', resource_deps=['meet-backend-migrate'])
+
 migration = '''
 set -eu
 # get k8s pod name from tilt resource name

docker/livekit/Dockerfile

@@ -1,4 +1,4 @@
-FROM livekit/livekit-server:v1.8.0
+FROM livekit/livekit-server:v1.9.0
 
 # We inject the nip.io certificate manually because the livekit chart doesn't support volume mounting
 COPY rootCA.pem /etc/ssl/certs/

docs/examples/meet.values.yaml

@@ -35,9 +35,6 @@ backend:
     DB_USER: dinum
     DB_PASSWORD: pass
     DB_PORT: 5432
-    POSTGRES_DB: meet
-    POSTGRES_USER: dinum
-    POSTGRES_PASSWORD: pass
     REDIS_URL: redis://default:pass@redis-master:6379/1
     STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
     LIVEKIT_API_SECRET: secret

docs/installation.md

@@ -217,9 +217,6 @@ DB_NAME: meet
 DB_USER: dinum
 DB_PASSWORD: pass
 DB_PORT: 5432
-POSTGRES_DB: meet
-POSTGRES_USER: dinum
-POSTGRES_PASSWORD: pass
 ```
 
 ## Deployment
@@ -339,6 +336,8 @@ These are the environmental options available on meet backend.
 | LIVEKIT_API_SECRET                              | LiveKit API secret                                                                                                                                           |                                                                                                                                                               |
 | LIVEKIT_API_URL                                 | LiveKit API URL                                                                                                                                              |                                                                                                                                                               |
 | LIVEKIT_VERIFY_SSL                              | Verify SSL for LiveKit connections                                                                                                                           | true                                                                                                                                                          |
+| LIVEKIT_FORCE_WSS_PROTOCOL                      | Enables WSS protocol conversion for legacy browser compatibility (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs fail in WebSocket() constructor.    | false                                                                                                                                                         |
+| LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND         | Firefox-only connection warmup: pre-calls WebSocket endpoint (expecting 401) to initialize cache, resolving proxy/network connectivity issues.               | false                                                                                                                                                         |
 | RESOURCE_DEFAULT_ACCESS_LEVEL                   | Default resource access level for rooms                                                                                                                      | public                                                                                                                                                        |
 | ALLOW_UNREGISTERED_ROOMS                        | Allow usage of unregistered rooms                                                                                                                            | true                                                                                                                                                          |
 | RECORDING_ENABLE                                | Record meeting option                                                                                                                                        | false                                                                                                                                                         |

src/agents/Dockerfile

@@ -0,0 +1,24 @@
+FROM python:3.13-slim AS base
+
+FROM base AS builder
+
+WORKDIR /builder
+
+COPY pyproject.toml .
+
+RUN mkdir /install && \
+  pip install --prefix=/install .
+
+FROM base AS production
+
+WORKDIR /app
+
+ARG DOCKER_USER
+USER ${DOCKER_USER}
+
+# Un-privileged user running the application
+COPY --from=builder /install /usr/local
+
+COPY . .
+
+CMD ["python", "multi-user-transcriber.py", "start"]

src/agents/multi-user-transcriber.py

@@ -0,0 +1,189 @@
+"""Multi user transcription agent."""
+
+import asyncio
+import logging
+import os
+
+from dotenv import load_dotenv
+from livekit import api, rtc
+from livekit.agents import (
+    Agent,
+    AgentSession,
+    AutoSubscribe,
+    JobContext,
+    JobProcess,
+    JobRequest,
+    RoomInputOptions,
+    RoomIO,
+    RoomOutputOptions,
+    WorkerOptions,
+    WorkerPermissions,
+    cli,
+    utils,
+)
+from livekit.plugins import deepgram, silero
+
+load_dotenv()
+
+logger = logging.getLogger("transcriber")
+
+TRANSCRIBER_AGENT_NAME = os.getenv("TRANSCRIBER_AGENT_NAME", "multi-user-transcriber")
+
+
+class Transcriber(Agent):
+    """Create a transcription agent for a specific participant."""
+
+    def __init__(self, *, participant_identity: str):
+        """Init transcription agent."""
+        super().__init__(
+            instructions="not-needed",
+            stt=deepgram.STT(),
+        )
+        self.participant_identity = participant_identity
+
+
+class MultiUserTranscriber:
+    """Manage transcription sessions for multiple room participants."""
+
+    def __init__(self, ctx: JobContext):
+        """Init multi user transcription agent."""
+        self.ctx = ctx
+        self._sessions: dict[str, AgentSession] = {}
+        self._tasks: set[asyncio.Task] = set()
+
+    def start(self):
+        """Start listening for participant connection events."""
+        self.ctx.room.on("participant_connected", self.on_participant_connected)
+        self.ctx.room.on("participant_disconnected", self.on_participant_disconnected)
+
+    async def aclose(self):
+        """Close all sessions and cleanup resources."""
+        await utils.aio.cancel_and_wait(*self._tasks)
+
+        await asyncio.gather(
+            *[self._close_session(session) for session in self._sessions.values()]
+        )
+
+        self.ctx.room.off("participant_connected", self.on_participant_connected)
+        self.ctx.room.off("participant_disconnected", self.on_participant_disconnected)
+
+    def on_participant_connected(self, participant: rtc.RemoteParticipant):
+        """Handle new participant connection by starting transcription session."""
+        if participant.identity in self._sessions:
+            return
+
+        logger.info(f"starting session for {participant.identity}")
+        task = asyncio.create_task(self._start_session(participant))
+        self._tasks.add(task)
+
+        def on_task_done(task: asyncio.Task):
+            try:
+                self._sessions[participant.identity] = task.result()
+            finally:
+                self._tasks.discard(task)
+
+        task.add_done_callback(on_task_done)
+
+    def on_participant_disconnected(self, participant: rtc.RemoteParticipant):
+        """Handle participant disconnection by closing transcription session."""
+        if (session := self._sessions.pop(participant.identity)) is None:
+            return
+
+        logger.info(f"closing session for {participant.identity}")
+        task = asyncio.create_task(self._close_session(session))
+        self._tasks.add(task)
+        task.add_done_callback(lambda _: self._tasks.discard(task))
+
+    async def _start_session(self, participant: rtc.RemoteParticipant) -> AgentSession:
+        """Create and start transcription session for participant."""
+        if participant.identity in self._sessions:
+            return self._sessions[participant.identity]
+
+        session = AgentSession(
+            vad=self.ctx.proc.userdata["vad"],
+        )
+        room_io = RoomIO(
+            agent_session=session,
+            room=self.ctx.room,
+            participant=participant,
+            input_options=RoomInputOptions(
+                text_enabled=False,
+            ),
+            output_options=RoomOutputOptions(
+                transcription_enabled=True,
+                audio_enabled=False,
+            ),
+        )
+        await room_io.start()
+        await session.start(
+            agent=Transcriber(
+                participant_identity=participant.identity,
+            )
+        )
+        return session
+
+    async def _close_session(self, sess: AgentSession) -> None:
+        """Close and cleanup transcription session."""
+        await sess.drain()
+        await sess.aclose()
+
+
+async def entrypoint(ctx: JobContext):
+    """Initialize and run the multi-user transcriber."""
+    transcriber = MultiUserTranscriber(ctx)
+    transcriber.start()
+
+    await ctx.connect(auto_subscribe=AutoSubscribe.AUDIO_ONLY)
+    for participant in ctx.room.remote_participants.values():
+        transcriber.on_participant_connected(participant)
+
+    async def cleanup():
+        await transcriber.aclose()
+
+    ctx.add_shutdown_callback(cleanup)
+
+
+async def handle_transcriber_job_request(job_req: JobRequest) -> None:
+    """Accept job if no transcriber exists in room, otherwise reject."""
+    room_name = job_req.room.name
+    transcriber_id = f"{TRANSCRIBER_AGENT_NAME}-{room_name}"
+
+    async with api.LiveKitAPI() as lkapi:
+        try:
+            response = await lkapi.room.list_participants(
+                list=api.ListParticipantsRequest(room=room_name)
+            )
+
+            transcriber_exists = any(
+                p.kind == rtc.ParticipantKind.PARTICIPANT_KIND_AGENT
+                and p.identity == transcriber_id
+                for p in response.participants
+            )
+
+            if transcriber_exists:
+                logger.info(f"Transcriber exists in {room_name} - rejecting")
+                await job_req.reject()
+            else:
+                logger.info(f"Accepting job for {room_name}")
+                await job_req.accept(identity=transcriber_id)
+
+        except Exception:
+            logger.exception(f"Error processing job for {room_name}")
+            await job_req.reject()
+
+
+def prewarm(proc: JobProcess):
+    """Preload voice activity detection model."""
+    proc.userdata["vad"] = silero.VAD.load()
+
+
+if __name__ == "__main__":
+    cli.run_app(
+        WorkerOptions(
+            entrypoint_fnc=entrypoint,
+            request_fnc=handle_transcriber_job_request,
+            prewarm_fnc=prewarm,
+            agent_name=TRANSCRIBER_AGENT_NAME,
+            permissions=WorkerPermissions(hidden=True),
+        )
+    )

src/agents/pyproject.toml

@@ -0,0 +1,51 @@
+
+[project]
+name = "agents"
+version = "0.1.23"
+requires-python = ">=3.12"
+dependencies = [
+    "livekit-agents==1.2.6",
+    "livekit-plugins-deepgram==1.2.6",
+    "livekit-plugins-silero==1.2.6",
+    "python-dotenv==1.1.1"
+]
+
+[project.optional-dependencies]
+dev = [
+    "ruff==0.12.0",
+]
+
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+[tool.ruff]
+target-version = "py313"
+
+[tool.ruff.lint]
+select = [
+    "B",  # flake8-bugbear
+    "C4",  # flake8-comprehensions
+    "D",  # pydocstyle
+    "E",  # pycodestyle error
+    "F",  # Pyflakes
+    "I",  # Isort
+    "ISC",  # flake8-implicit-str-concat
+    "PLC",  # Pylint Convention
+    "PLE",  # Pylint Error
+    "PLR",  # Pylint Refactor
+    "PLW",  # Pylint Warning
+    "RUF100",  # Ruff unused-noqa
+    "S",  # flake8-bandit
+    "T20", # flake8-print
+    "W",  # pycodestyle warning
+]
+
+[tool.ruff.lint.per-file-ignores]
+"tests/*" = [
+    "S101", # use of assert
+]
+
+[tool.ruff.lint.pydocstyle]
+# Use Google-style docstrings.
+convention = "google"

src/backend/core/api/__init__.py

@@ -50,6 +50,13 @@ def get_frontend_configuration(request):
             else None,
             "default_country": settings.ROOM_TELEPHONY_DEFAULT_COUNTRY,
         },
+        "subtitle": {"enabled": settings.ROOM_SUBTITLE_ENABLED},
+        "livekit": {
+            "url": settings.LIVEKIT_CONFIGURATION["url"],
+            "force_wss_protocol": settings.LIVEKIT_FORCE_WSS_PROTOCOL,
+            "enable_firefox_proxy_workaround": settings.LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND,
+            "default_sources": settings.LIVEKIT_DEFAULT_SOURCES,
+        },
     }
     frontend_configuration.update(settings.FRONTEND_CONFIGURATION)
     return Response(frontend_configuration)

src/backend/core/api/feature_flag.py

@@ -0,0 +1,45 @@
+"""Feature flag handler for the Meet core app."""
+
+from functools import wraps
+
+from django.conf import settings
+from django.http import Http404
+
+
+class FeatureFlag:
+    """Check if features are enabled and return error responses."""
+
+    FLAGS = {
+        "recording": "RECORDING_ENABLE",
+        "storage_event": "RECORDING_STORAGE_EVENT_ENABLE",
+        "subtitle": "ROOM_SUBTITLE_ENABLED",
+    }
+
+    @classmethod
+    def flag_is_active(cls, flag_name):
+        """Check if a feature flag is active."""
+
+        setting_name = cls.FLAGS.get(flag_name)
+
+        if setting_name is None:
+            return False
+
+        return getattr(settings, setting_name, False)
+
+    @classmethod
+    def require(cls, flag_name):
+        """Decorator to check feature at the beginning of endpoint methods."""
+
+        if flag_name not in cls.FLAGS:
+            raise ValueError(f"Unknown feature flag: {flag_name}")
+
+        def decorator(view_func):
+            @wraps(view_func)
+            def wrapper(self, request, *args, **kwargs):
+                if not cls.flag_is_active(flag_name):
+                    raise Http404
+                return view_func(self, request, *args, **kwargs)
+
+            return wrapper
+
+        return decorator

src/backend/core/api/permissions.py

@@ -1,7 +1,5 @@
 """Permission handlers for the Meet core app."""
 
-from django.conf import settings
-
 from rest_framework import permissions
 
 from ..models import RoleChoices
@@ -101,21 +99,10 @@ class HasPrivilegesOnRoom(IsAuthenticated):
         return obj.is_administrator_or_owner(request.user)
 
 
-class IsRecordingEnabled(permissions.BasePermission):
-    """Check if the recording feature is enabled."""
+class HasLiveKitRoomAccess(permissions.BasePermission):
+    """Check if authenticated user's LiveKit token is for the specific room."""
 
-    message = "Access denied, recording is disabled."
-
-    def has_permission(self, request, view):
-        """Determine if access is allowed based on settings."""
-        return settings.RECORDING_ENABLE
-
-
-class IsStorageEventEnabled(permissions.BasePermission):
-    """Check if the storage event feature is enabled."""
-
-    message = "Access denied, storage event is disabled."
-
-    def has_permission(self, request, view):
-        """Determine if access is allowed based on settings."""
-        return settings.RECORDING_STORAGE_EVENT_ENABLE
+    def has_object_permission(self, request, view, obj):
+        if not request.auth or not hasattr(request.auth, "video"):
+            return False
+        return request.auth.video.room == str(obj.id)

src/backend/core/api/serializers.py

@@ -1,9 +1,10 @@
 """Client serializers for the Meet core app."""
 
-import uuid
+# pylint: disable=abstract-method,no-name-in-module
 
 from django.utils.translation import gettext_lazy as _
 
+from livekit.api import ParticipantPermission
 from rest_framework import serializers
 from rest_framework.exceptions import PermissionDenied
 from timezone_field.rest_framework import TimeZoneSerializerField
@@ -134,6 +135,8 @@ class RoomSerializer(serializers.ModelSerializer):
             )
             output["accesses"] = access_serializer.data
 
+        configuration = output["configuration"]
+
         if not is_admin_or_owner:
             del output["configuration"]
 
@@ -150,7 +153,11 @@ class RoomSerializer(serializers.ModelSerializer):
             room_id = f"{instance.id!s}"
             username = request.query_params.get("username", None)
             output["livekit"] = utils.generate_livekit_config(
-                room_id=room_id, user=request.user, username=username
+                room_id=room_id,
+                user=request.user,
+                username=username,
+                configuration=configuration,
+                is_admin_or_owner=is_admin_or_owner,
             )
 
         output["is_administrable"] = is_admin_or_owner
@@ -179,7 +186,19 @@ class RecordingSerializer(serializers.ModelSerializer):
         read_only_fields = fields
 
 
-class StartRecordingSerializer(serializers.Serializer):
+class BaseValidationOnlySerializer(serializers.Serializer):
+    """Base serializer for validation-only operations."""
+
+    def create(self, validated_data):
+        """Not implemented as this is a validation-only serializer."""
+        raise NotImplementedError(f"{self.__class__.__name__} is validation-only")
+
+    def update(self, instance, validated_data):
+        """Not implemented as this is a validation-only serializer."""
+        raise NotImplementedError(f"{self.__class__.__name__} is validation-only")
+
+
+class StartRecordingSerializer(BaseValidationOnlySerializer):
     """Validate start recording requests."""
 
     mode = serializers.ChoiceField(
@@ -192,75 +211,93 @@ class StartRecordingSerializer(serializers.Serializer):
         },
     )
 
-    def create(self, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
 
-    def update(self, instance, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("StartRecordingSerializer is validation-only")
-
-
-class RequestEntrySerializer(serializers.Serializer):
+class RequestEntrySerializer(BaseValidationOnlySerializer):
     """Validate request entry data."""
 
     username = serializers.CharField(required=True)
 
-    def create(self, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("RequestEntrySerializer is validation-only")
 
-    def update(self, instance, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("RequestEntrySerializer is validation-only")
-
-
-class ParticipantEntrySerializer(serializers.Serializer):
+class ParticipantEntrySerializer(BaseValidationOnlySerializer):
     """Validate participant entry decision data."""
 
-    participant_id = serializers.CharField(required=True)
+    participant_id = serializers.UUIDField(required=True)
     allow_entry = serializers.BooleanField(required=True)
 
-    def validate_participant_id(self, value):
-        """Validate that the participant_id is a valid UUID hex string."""
-        try:
-            uuid.UUID(hex=value, version=4)
-        except (ValueError, TypeError) as e:
-            raise serializers.ValidationError("Invalid UUID hex format") from e
-        return value
 
-    def create(self, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("ParticipantEntrySerializer is validation-only")
-
-    def update(self, instance, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("ParticipantEntrySerializer is validation-only")
-
-
-class CreationCallbackSerializer(serializers.Serializer):
+class CreationCallbackSerializer(BaseValidationOnlySerializer):
     """Validate room creation callback data."""
 
     callback_id = serializers.CharField(required=True)
 
-    def create(self, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        raise NotImplementedError("CreationCallbackSerializer is validation-only")
-
-    def update(self, instance, validated_data):
-        """Not implemented as this is a validation-only serializer."""
-        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")
+class BaseParticipantsManagementSerializer(BaseValidationOnlySerializer):
+    """Base serializer for participant management operations."""
+
+    participant_identity = serializers.UUIDField(
+        help_text="LiveKit participant identity (UUID format)"
+    )
+
+
+class MuteParticipantSerializer(BaseParticipantsManagementSerializer):
+    """Validate participant muting data."""
+
+    track_sid = serializers.CharField(
+        max_length=255, help_text="LiveKit track SID to mute"
+    )
+
+
+class UpdateParticipantSerializer(BaseParticipantsManagementSerializer):
+    """Validate participant update data."""
+
+    metadata = serializers.DictField(
+        required=False, allow_null=True, help_text="Participant metadata as JSON object"
+    )
+    attributes = serializers.DictField(
+        required=False,
+        allow_null=True,
+        help_text="Participant attributes as JSON object",
+    )
+    permission = serializers.DictField(
+        required=False,
+        allow_null=True,
+        help_text="Participant permission as JSON object",
+    )
+    name = serializers.CharField(
+        max_length=255,
+        required=False,
+        allow_blank=True,
+        allow_null=True,
+        help_text="Display name for the participant",
+    )
+
+    def validate(self, attrs):
+        """Ensure at least one update field is provided."""
+        update_fields = ["metadata", "attributes", "permission", "name"]
+
+        has_update = any(
+            field in attrs and attrs[field] is not None and attrs[field] != ""
+            for field in update_fields
+        )
+
+        if not has_update:
+            raise serializers.ValidationError(
+                f"At least one of the following fields must be provided: "
+                f"{', '.join(update_fields)}."
+            )
+
+        if "permission" in attrs:
+            try:
+                ParticipantPermission(**attrs["permission"])
+            except ValueError as e:
+                raise serializers.ValidationError(
+                    {"permission": f"Invalid permission: {str(e)}"}
+                ) from e
+
+        return attrs

src/backend/core/api/viewsets.py

@@ -50,9 +50,16 @@ from core.services.lobby import (
     LobbyParticipantNotFound,
     LobbyService,
 )
+from core.services.participants_management import (
+    ParticipantsManagement,
+    ParticipantsManagementException,
+)
 from core.services.room_creation import RoomCreation
+from core.services.subtitle import SubtitleException, SubtitleService
 
+from ..authentication.livekit import LiveKitTokenAuthentication
 from . import permissions, serializers
+from .feature_flag import FeatureFlag
 
 # pylint: disable=too-many-ancestors
 
@@ -287,9 +294,9 @@ class RoomViewSet(
         url_path="start-recording",
         permission_classes=[
             permissions.HasPrivilegesOnRoom,
-            permissions.IsRecordingEnabled,
         ],
     )
+    @FeatureFlag.require("recording")
     def start_room_recording(self, request, pk=None):  # pylint: disable=unused-argument
         """Start recording a room."""
 
@@ -332,9 +339,9 @@ class RoomViewSet(
         url_path="stop-recording",
         permission_classes=[
             permissions.HasPrivilegesOnRoom,
-            permissions.IsRecordingEnabled,
         ],
     )
+    @FeatureFlag.require("recording")
     def stop_room_recording(self, request, pk=None):  # pylint: disable=unused-argument
         """Stop room recording."""
 
@@ -417,7 +424,8 @@ class RoomViewSet(
         try:
             lobby_service.handle_participant_entry(
                 room_id=room.id,
-                **serializer.validated_data,
+                participant_id=str(serializer.validated_data.get("participant_id")),
+                allow_entry=serializer.validated_data.get("allow_entry"),
             )
             return drf_response.Response({"message": "Participant was updated."})
 
@@ -530,6 +538,135 @@ class RoomViewSet(
             status=drf_status.HTTP_200_OK,
         )
 
+    @decorators.action(
+        detail=True,
+        methods=["post"],
+        url_path="start-subtitle",
+        permission_classes=[
+            permissions.HasLiveKitRoomAccess,
+        ],
+        authentication_classes=[LiveKitTokenAuthentication],
+    )
+    @FeatureFlag.require("subtitle")
+    def start_subtitle(self, request, pk=None):  # pylint: disable=unused-argument
+        """Start realtime transcription for the room.
+
+        Requires valid LiveKit token for room authorization.
+        Anonymous users can start subtitles if they have room access tokens.
+        """
+
+        room = self.get_object()
+
+        try:
+            SubtitleService().start_subtitle(room)
+        except SubtitleException:
+            return drf_response.Response(
+                {"error": f"Subtitles failed to start for room {room.slug}"},
+                status=drf_status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
+
+        return drf_response.Response(
+            {"status": "success"}, status=drf_status.HTTP_200_OK
+        )
+
+    @decorators.action(
+        detail=True,
+        methods=["post"],
+        url_path="mute-participant",
+        url_name="mute-participant",
+        permission_classes=[permissions.HasPrivilegesOnRoom],
+    )
+    def mute_participant(self, request, pk=None):  # pylint: disable=unused-argument
+        """Mute a specific track for a participant in the room."""
+        room = self.get_object()
+
+        serializer = serializers.MuteParticipantSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        try:
+            ParticipantsManagement().mute(
+                room_name=str(room.pk),
+                identity=str(serializer.validated_data["participant_identity"]),
+                track_sid=serializer.validated_data["track_sid"],
+            )
+        except ParticipantsManagementException:
+            return drf_response.Response(
+                {"error": "Failed to mute participant"},
+                status=drf_status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
+
+        return drf_response.Response(
+            {
+                "status": "success",
+            },
+            status=drf_status.HTTP_200_OK,
+        )
+
+    @decorators.action(
+        detail=True,
+        methods=["post"],
+        url_path="update-participant",
+        url_name="update-participant",
+        permission_classes=[permissions.HasPrivilegesOnRoom],
+    )
+    def update_participant(self, request, pk=None):  # pylint: disable=unused-argument
+        """Update participant attributes, permissions, or metadata."""
+        room = self.get_object()
+
+        serializer = serializers.UpdateParticipantSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        try:
+            ParticipantsManagement().update(
+                room_name=str(room.pk),
+                identity=str(serializer.validated_data["participant_identity"]),
+                metadata=serializer.validated_data.get("metadata"),
+                attributes=serializer.validated_data.get("attributes"),
+                permission=serializer.validated_data.get("permission"),
+                name=serializer.validated_data.get("name"),
+            )
+        except ParticipantsManagementException:
+            return drf_response.Response(
+                {"error": "Failed to update participant"},
+                status=drf_status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
+
+        return drf_response.Response(
+            {
+                "status": "success",
+            },
+            status=drf_status.HTTP_200_OK,
+        )
+
+    @decorators.action(
+        detail=True,
+        methods=["post"],
+        url_path="remove-participant",
+        url_name="remove-participant",
+        permission_classes=[permissions.HasPrivilegesOnRoom],
+    )
+    def remove_participant(self, request, pk=None):  # pylint: disable=unused-argument
+        """Remove a participant from the room."""
+        room = self.get_object()
+
+        serializer = serializers.BaseParticipantsManagementSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        try:
+            ParticipantsManagement().remove(
+                room_name=str(room.pk),
+                identity=str(serializer.validated_data["participant_identity"]),
+            )
+        except ParticipantsManagementException:
+            return drf_response.Response(
+                {"error": "Failed to remove participant"},
+                status=drf_status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
+
+        return drf_response.Response(
+            {"status": "success"}, status=drf_status.HTTP_200_OK
+        )
+
 
 class ResourceAccessViewSet(
     mixins.CreateModelMixin,
@@ -596,8 +733,8 @@ class RecordingViewSet(
         methods=["post"],
         url_path="storage-hook",
         authentication_classes=[StorageEventAuthentication],
-        permission_classes=[permissions.IsStorageEventEnabled],
     )
+    @FeatureFlag.require("storage_event")
     def on_storage_event_received(self, request, pk=None):  # pylint: disable=unused-argument
         """Handle incoming storage hook events for recordings."""
 

src/backend/core/authentication/livekit.py

@@ -0,0 +1,42 @@
+"""Authentication using LiveKit token for the Meet core app."""
+
+from django.conf import settings
+from django.contrib.auth import get_user_model
+from django.contrib.auth.models import AnonymousUser
+
+from livekit.api import TokenVerifier
+from rest_framework import authentication, exceptions
+
+UserModel = get_user_model()
+
+
+class LiveKitTokenAuthentication(authentication.BaseAuthentication):
+    """Authenticate using LiveKit token and load the associated Django user."""
+
+    def authenticate(self, request):
+        token = request.data.get("token")
+        if not token:
+            return None  # No authentication attempted
+
+        try:
+            verifier = TokenVerifier(
+                api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
+                api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
+            )
+            claims = verifier.verify(token)
+
+            user_id = claims.identity
+            if not user_id:
+                raise exceptions.AuthenticationFailed("Token missing user identity")
+
+            try:
+                user = UserModel.objects.get(id=user_id)
+            except UserModel.DoesNotExist:
+                user = AnonymousUser()
+
+            return (user, claims)
+
+        except Exception as e:
+            raise exceptions.AuthenticationFailed(
+                f"Invalid LiveKit token: {str(e)}"
+            ) from e

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

@@ -4,7 +4,6 @@ import logging
 import secrets
 
 from django.conf import settings
-from django.utils.translation import gettext_lazy as _
 
 from rest_framework.authentication import BaseAuthentication
 from rest_framework.exceptions import AuthenticationFailed

src/backend/core/services/livekit_events.py

@@ -1,6 +1,6 @@
 """LiveKit Events Service"""
 
-# pylint: disable=E1101
+# pylint: disable=no-member
 
 import uuid
 from enum import Enum

src/backend/core/services/lobby.py

@@ -89,7 +89,7 @@ class LobbyService:
     @staticmethod
     def _get_or_create_participant_id(request) -> str:
         """Extract unique participant identifier from the request."""
-        return request.COOKIES.get(settings.LOBBY_COOKIE_NAME, uuid.uuid4().hex)
+        return request.COOKIES.get(settings.LOBBY_COOKIE_NAME, str(uuid.uuid4()))
 
     @staticmethod
     def prepare_response(response, participant_id):
@@ -143,6 +143,8 @@ class LobbyService:
         participant_id = self._get_or_create_participant_id(request)
         participant = self._get_participant(room.id, participant_id)
 
+        room_id = str(room.id)
+
         if self.can_bypass_lobby(room=room, user=request.user):
             if participant is None:
                 participant = LobbyParticipant(
@@ -155,10 +157,13 @@ class LobbyService:
                 participant.status = LobbyParticipantStatus.ACCEPTED
 
             livekit_config = utils.generate_livekit_config(
-                room_id=str(room.id),
+                room_id=room_id,
                 user=request.user,
                 username=username,
                 color=participant.color,
+                configuration=room.configuration,
+                is_admin_or_owner=False,
+                participant_id=participant_id,
             )
             return participant, livekit_config
 
@@ -173,10 +178,13 @@ class LobbyService:
         elif participant.status == LobbyParticipantStatus.ACCEPTED:
             # wrongly named, contains access token to join a room
             livekit_config = utils.generate_livekit_config(
-                room_id=str(room.id),
+                room_id=room_id,
                 user=request.user,
                 username=username,
                 color=participant.color,
+                configuration=room.configuration,
+                is_admin_or_owner=False,
+                participant_id=participant_id,
             )
 
         return participant, livekit_config
@@ -212,7 +220,7 @@ class LobbyService:
 
         try:
             utils.notify_participants(
-                room_name=room_id,
+                room_name=str(room_id),
                 notification_data={
                     "type": settings.LOBBY_NOTIFICATION_TYPE,
                 },
@@ -334,3 +342,9 @@ class LobbyService:
             return
 
         cache.delete_many(keys)
+
+    def clear_participant_cache(self, room_id: UUID, participant_id: str) -> None:
+        """Clear a given participant entry from the cache for a specific room."""
+
+        cache_key = self._get_cache_key(room_id, participant_id)
+        cache.delete(cache_key)

src/backend/core/services/participants_management.py

@@ -0,0 +1,128 @@
+"""Participants management service for LiveKit rooms."""
+
+# pylint: disable=too-many-arguments,no-name-in-module,too-many-positional-arguments
+# ruff: noqa:PLR0913
+
+import json
+import uuid
+from logging import getLogger
+from typing import Dict, Optional
+
+from asgiref.sync import async_to_sync
+from livekit.api import (
+    MuteRoomTrackRequest,
+    RoomParticipantIdentity,
+    TwirpError,
+    UpdateParticipantRequest,
+)
+
+from core import utils
+
+from .lobby import LobbyService
+
+logger = getLogger(__name__)
+
+
+class ParticipantsManagementException(Exception):
+    """Exception raised when a participant management operations fail."""
+
+
+class ParticipantsManagement:
+    """Service for managing participants."""
+
+    @async_to_sync
+    async def mute(self, room_name: str, identity: str, track_sid: str):
+        """Mute a specific audio or video track for a participant in a room."""
+
+        lkapi = utils.create_livekit_client()
+
+        try:
+            await lkapi.room.mute_published_track(
+                MuteRoomTrackRequest(
+                    room=room_name,
+                    identity=identity,
+                    track_sid=track_sid,
+                    muted=True,
+                )
+            )
+
+        except TwirpError as e:
+            logger.exception(
+                "Unexpected error muting participant %s for room %s",
+                identity,
+                room_name,
+            )
+            raise ParticipantsManagementException("Could not mute participant") from e
+
+        finally:
+            await lkapi.aclose()
+
+    @async_to_sync
+    async def remove(self, room_name: str, identity: str):
+        """Remove a participant from a room and clear their lobby cache."""
+
+        try:
+            LobbyService().clear_participant_cache(
+                room_id=uuid.UUID(room_name), participant_id=identity
+            )
+        except (ValueError, TypeError) as exc:
+            logger.warning(
+                "participants_management.remove: room_name '%s' is not a UUID; "
+                "skipping lobby cache clear",
+                room_name,
+                exc_info=exc,
+            )
+
+        lkapi = utils.create_livekit_client()
+
+        try:
+            await lkapi.room.remove_participant(
+                RoomParticipantIdentity(room=room_name, identity=identity)
+            )
+        except TwirpError as e:
+            logger.exception(
+                "Unexpected error removing participant %s for room %s",
+                identity,
+                room_name,
+            )
+            raise ParticipantsManagementException("Could not remove participant") from e
+
+        finally:
+            await lkapi.aclose()
+
+    @async_to_sync
+    async def update(
+        self,
+        room_name: str,
+        identity: str,
+        metadata: Optional[Dict] = None,
+        attributes: Optional[Dict] = None,
+        permission: Optional[Dict] = None,
+        name: Optional[str] = None,
+    ):
+        """Update participant properties such as metadata, attributes, permissions, or name."""
+
+        lkapi = utils.create_livekit_client()
+
+        try:
+            await lkapi.room.update_participant(
+                UpdateParticipantRequest(
+                    room=room_name,
+                    identity=identity,
+                    metadata=json.dumps(metadata),
+                    permission=permission,
+                    attributes=attributes,
+                    name=name,
+                )
+            )
+
+        except TwirpError as e:
+            logger.exception(
+                "Unexpected error updating participant %s for room %s",
+                identity,
+                room_name,
+            )
+            raise ParticipantsManagementException("Could not update participant") from e
+
+        finally:
+            await lkapi.aclose()

src/backend/core/services/subtitle.py

@@ -0,0 +1,47 @@
+"""Service for managing subtitle agents in LiveKit rooms."""
+
+from logging import getLogger
+
+from django.conf import settings
+
+from asgiref.sync import async_to_sync
+from livekit.protocol.agent_dispatch import CreateAgentDispatchRequest
+
+from core import utils
+
+logger = getLogger(__name__)
+
+
+class SubtitleException(Exception):
+    """Exception raised when subtitle operations fail."""
+
+
+class SubtitleService:
+    """Service for managing subtitle agents in LiveKit rooms."""
+
+    @async_to_sync
+    async def start_subtitle(self, room):
+        """Start subtitle agent for the specified room."""
+
+        lkapi = utils.create_livekit_client()
+
+        try:
+            # Transcriber agent prevents duplicate subtitle agents per room
+            # No error is raised if agent already exists
+            await lkapi.agent_dispatch.create_dispatch(
+                CreateAgentDispatchRequest(
+                    agent_name=settings.ROOM_SUBTITLE_AGENT_NAME, room=str(room.id)
+                )
+            )
+        except Exception as e:
+            logger.exception("Failed to create agent dispatch for room %s", room.id)
+            raise SubtitleException("Failed to create subtitle agent") from e
+
+        finally:
+            await lkapi.aclose()
+
+    @async_to_sync
+    async def stop_subtitle(self, room) -> None:
+        """Stop subtitle agent for the specified room."""
+
+        raise NotImplementedError("Subtitle agent stopping not yet implemented")

src/backend/core/services/telephony.py

@@ -38,12 +38,12 @@ class TelephonyService:
 
         direct_rule = SIPDispatchRule(
             dispatch_rule_direct=SIPDispatchRuleDirect(
-                room_name=str(room.id), pin=str(room.pin_code)
+                room_name=str(room.pk), pin=str(room.pin_code)
             )
         )
 
         request = CreateSIPDispatchRuleRequest(
-            rule=direct_rule, name=self._rule_name(room.id)
+            rule=direct_rule, name=self._rule_name(room.pk)
         )
 
         lkapi = utils.create_livekit_client()

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

@@ -2,7 +2,7 @@
 Test event authentication.
 """
 
-# pylint: disable=E1128
+# pylint: disable=assignment-from-no-return
 
 from django.test import RequestFactory
 

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

@@ -2,7 +2,7 @@
 Test event notification.
 """
 
-# pylint: disable=E1128,W0621,W0613,W0212
+# pylint: disable=assignment-from-no-return,redefined-outer-name,unused-argument,protected-access
 
 import datetime
 import smtplib

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

@@ -2,7 +2,7 @@
 Test event parsers.
 """
 
-# pylint: disable=W0212,W0621,W0613
+# pylint: disable=protected-access,redefined-outer-name,unused-argument
 
 from unittest import mock
 

src/backend/core/tests/recording/service/test_recording_events.py

@@ -2,7 +2,7 @@
 Test RecordingEventsService service.
 """
 
-# pylint: disable=W0621
+# pylint: disable=redefined-outer-name
 
 from unittest import mock
 

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

@@ -2,7 +2,7 @@
 Test recordings API endpoints in the Meet core app: save recording.
 """
 
-# pylint: disable=W0621,W0613
+# pylint: disable=redefined-outer-name,unused-argument
 
 import uuid
 from unittest import mock
@@ -77,7 +77,8 @@ def test_save_recording_permission_needed(settings, client):
         HTTP_AUTHORIZATION="Bearer testAuthToken",
     )
 
-    assert response.status_code == 403
+    assert response.status_code == 404
+    assert response.json() == {"detail": "Not found."}
 
 
 def test_save_recording_parsing_error(recording_settings, mock_get_parser, client):

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

@@ -2,7 +2,7 @@
 Test worker service factories.
 """
 
-# pylint: disable=W0212,W0621,W0613
+# pylint: disable=protected-access,redefined-outer-name,unused-argument
 
 from dataclasses import FrozenInstanceError
 from unittest.mock import Mock

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

@@ -1,6 +1,6 @@
 """Test WorkerServiceMediator class."""
 
-# pylint: disable=W0621,W0613
+# pylint: disable=redefined-outer-name,unused-argument
 
 from unittest.mock import Mock
 

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

@@ -2,7 +2,7 @@
 Test worker service classes.
 """
 
-# pylint: disable=W0212,W0621,W0613,E1101
+# pylint: disable=protected-access,redefined-outer-name,unused-argument,no-member
 
 from unittest.mock import AsyncMock, Mock, patch
 

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

@@ -2,7 +2,7 @@
 Test rooms API endpoints in the Meet core app: create.
 """
 
-# pylint: disable=W0621,W0613
+# pylint: disable=redefined-outer-name,unused-argument
 from django.core.cache import cache
 
 import pytest

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

@@ -2,7 +2,7 @@
 Test rooms API endpoints in the Meet core app: creation callback functionality.
 """
 
-# pylint: disable=W0621,W0613
+# pylint: disable=redefined-outer-name,unused-argument
 from django.core.cache import cache
 
 import pytest

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

@@ -2,7 +2,7 @@
 Test rooms API endpoints in the Meet core app: invite.
 """
 
-# pylint: disable=W0621,W0613
+# pylint: disable=redefined-outer-name,unused-argument
 
 import json
 import random

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

@@ -132,9 +132,9 @@ def test_request_entry_with_existing_participants(settings):
 
     # Add two participants already waiting in the lobby
     cache.set(
-        f"mocked-cache-prefix_{room.id}_2f7f162fe7d1421b90e702bfbfbf8def",
+        f"mocked-cache-prefix_{room.id}_2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
         {
-            "id": "2f7f162fe7d1421b90e702bfbfbf8def",
+            "id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
             "username": "user1",
             "status": "waiting",
             "color": "#123456",
@@ -259,7 +259,7 @@ def test_request_entry_authenticated_user_public_room(settings):
         mock.patch.object(
             LobbyService,
             "_get_or_create_participant_id",
-            return_value="2f7f162fe7d1421b90e702bfbfbf8def",
+            return_value="2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
         ),
         mock.patch.object(
             utils, "generate_livekit_config", return_value={"token": "test-token"}
@@ -276,11 +276,11 @@ def test_request_entry_authenticated_user_public_room(settings):
     # Verify the lobby cookie was set
     cookie = response.cookies.get("mocked-cookie")
     assert cookie is not None
-    assert cookie.value == "2f7f162fe7d1421b90e702bfbfbf8def"
+    assert cookie.value == "2f7f162f-e7d1-421b-90e7-02bfbfbf8def"
 
     # Verify response content matches expected structure and values
     assert response.json() == {
-        "id": "2f7f162fe7d1421b90e702bfbfbf8def",
+        "id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
         "username": "test_user",
         "status": "accepted",
         "color": "mocked-color",
@@ -302,9 +302,9 @@ def test_request_entry_waiting_participant_public_room(settings):
 
     # Add a waiting participant to the room's lobby cache
     cache.set(
-        f"mocked-cache-prefix_{room.id}_2f7f162fe7d1421b90e702bfbfbf8def",
+        f"mocked-cache-prefix_{room.id}_2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
         {
-            "id": "2f7f162fe7d1421b90e702bfbfbf8def",
+            "id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
             "username": "user1",
             "status": "waiting",
             "color": "#123456",
@@ -312,7 +312,7 @@ def test_request_entry_waiting_participant_public_room(settings):
     )
 
     # Simulate a browser with existing participant cookie
-    client.cookies.load({"mocked-cookie": "2f7f162fe7d1421b90e702bfbfbf8def"})
+    client.cookies.load({"mocked-cookie": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def"})
 
     with (
         mock.patch.object(utils, "notify_participants", return_value=None),
@@ -330,11 +330,11 @@ def test_request_entry_waiting_participant_public_room(settings):
     # Verify the lobby cookie was set
     cookie = response.cookies.get("mocked-cookie")
     assert cookie is not None
-    assert cookie.value == "2f7f162fe7d1421b90e702bfbfbf8def"
+    assert cookie.value == "2f7f162f-e7d1-421b-90e7-02bfbfbf8def"
 
     # Verify response content matches expected structure and values
     assert response.json() == {
-        "id": "2f7f162fe7d1421b90e702bfbfbf8def",
+        "id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
         "username": "user1",
         "status": "accepted",
         "color": "#123456",
@@ -381,7 +381,7 @@ def test_allow_participant_to_enter_anonymous():
 
     response = client.post(
         f"/api/v1.0/rooms/{room.id}/enter/",
-        {"participant_id": "2f7f162fe7d1421b90e702bfbfbf8def", "allow_entry": True},
+        {"participant_id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def", "allow_entry": True},
     )
 
     assert response.status_code == 401
@@ -396,7 +396,7 @@ def test_allow_participant_to_enter_non_owner():
 
     response = client.post(
         f"/api/v1.0/rooms/{room.id}/enter/",
-        {"participant_id": "2f7f162fe7d1421b90e702bfbfbf8def", "allow_entry": True},
+        {"participant_id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def", "allow_entry": True},
     )
 
     assert response.status_code == 403
@@ -414,7 +414,7 @@ def test_allow_participant_to_enter_public_room():
 
     response = client.post(
         f"/api/v1.0/rooms/{room.id}/enter/",
-        {"participant_id": "2f7f162fe7d1421b90e702bfbfbf8def", "allow_entry": True},
+        {"participant_id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def", "allow_entry": True},
     )
 
     assert response.status_code == 404
@@ -437,9 +437,9 @@ def test_allow_participant_to_enter_success(settings, allow_entry, updated_statu
     settings.LOBBY_KEY_PREFIX = "mocked-cache-prefix"
 
     cache.set(
-        f"mocked-cache-prefix_{room.id!s}_2f7f162fe7d1421b90e702bfbfbf8def",
+        f"mocked-cache-prefix_{room.id!s}_2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
         {
-            "id": "2f7f162fe7d1421b90e702bfbfbf8def",
+            "id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
             "status": "waiting",
             "username": "foo",
             "color": "123",
@@ -449,7 +449,7 @@ def test_allow_participant_to_enter_success(settings, allow_entry, updated_statu
     response = client.post(
         f"/api/v1.0/rooms/{room.id}/enter/",
         {
-            "participant_id": "2f7f162fe7d1421b90e702bfbfbf8def",
+            "participant_id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
             "allow_entry": allow_entry,
         },
     )
@@ -458,7 +458,7 @@ def test_allow_participant_to_enter_success(settings, allow_entry, updated_statu
     assert response.json() == {"message": "Participant was updated."}
 
     participant_data = cache.get(
-        f"mocked-cache-prefix_{room.id!s}_2f7f162fe7d1421b90e702bfbfbf8def"
+        f"mocked-cache-prefix_{room.id!s}_2f7f162f-e7d1-421b-90e7-02bfbfbf8def"
     )
     assert participant_data.get("status") == updated_status
 
@@ -476,13 +476,13 @@ def test_allow_participant_to_enter_participant_not_found(settings):
     settings.LOBBY_KEY_PREFIX = "mocked-cache-prefix"
 
     participant_data = cache.get(
-        f"mocked-cache-prefix_{room.id!s}_2f7f162fe7d1421b90e702bfbfbf8def"
+        f"mocked-cache-prefix_{room.id!s}_2f7f162f-e7d1-421b-90e7-02bfbfbf8def"
     )
     assert participant_data is None
 
     response = client.post(
         f"/api/v1.0/rooms/{room.id}/enter/",
-        {"participant_id": "2f7f162fe7d1421b90e702bfbfbf8def", "allow_entry": True},
+        {"participant_id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def", "allow_entry": True},
     )
 
     assert response.status_code == 404
@@ -572,9 +572,9 @@ def test_list_waiting_participants_success(settings):
 
     # Add participants in the lobby
     cache.set(
-        f"mocked-cache-prefix_{room.id}_2f7f162fe7d1421b90e702bfbfbf8def",
+        f"mocked-cache-prefix_{room.id}_2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
         {
-            "id": "2f7f162fe7d1421b90e702bfbfbf8def",
+            "id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
             "username": "user1",
             "status": "waiting",
             "color": "#123456",
@@ -597,7 +597,7 @@ def test_list_waiting_participants_success(settings):
     participants = response.json().get("participants")
     assert sorted(participants, key=lambda p: p["id"]) == [
         {
-            "id": "2f7f162fe7d1421b90e702bfbfbf8def",
+            "id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def",
             "username": "user1",
             "status": "waiting",
             "color": "#123456",

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

@@ -0,0 +1,417 @@
+"""
+Test rooms API endpoints in the Meet core app: participants management.
+"""
+
+# pylint: disable=redefined-outer-name,unused-argument,protected-access
+
+import random
+from unittest import mock
+from uuid import uuid4
+
+from django.urls import reverse
+
+import pytest
+from livekit.api import TwirpError
+from rest_framework import status
+from rest_framework.test import APIClient
+
+from core.factories import RoomFactory, UserFactory, UserResourceAccessFactory
+from core.services.lobby import LobbyService
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def mock_livekit_client():
+    """Mock LiveKit API client."""
+    with mock.patch("core.utils.create_livekit_client") as mock_create:
+        mock_client = mock.AsyncMock()
+        mock_create.return_value = mock_client
+        yield mock_client
+
+
+def test_mute_participant_success(mock_livekit_client):
+    """Test successful participant muting."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4()), "track_sid": "test-track-sid"}
+
+    url = reverse("rooms-mute-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_200_OK
+    assert response.data == {"status": "success"}
+
+    mock_livekit_client.room.mute_published_track.assert_called_once()
+    mock_livekit_client.aclose.assert_called_once()
+
+
+def test_mute_participant_forbidden_without_access():
+    """Test mute participant returns 403 when user lacks room privileges."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()  # User without UserResourceAccess
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4()), "track_sid": "test-track-sid"}
+
+    url = reverse("rooms-mute-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_403_FORBIDDEN
+
+
+def test_mute_participant_invalid_payload():
+    """Test mute participant with invalid payload."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": "invalid-uuid", "track_sid": ""}
+
+    url = reverse("rooms-mute-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+
+def test_mute_participant_unexpected_twirp_error(mock_livekit_client):
+    """Test mute participant when LiveKit API raises TwirpError."""
+    client = APIClient()
+
+    mock_livekit_client.room.mute_published_track.side_effect = TwirpError(
+        msg="Internal server error", code=500, status=500
+    )
+
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4()), "track_sid": "test-track-sid"}
+
+    url = reverse("rooms-mute-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_500_INTERNAL_SERVER_ERROR
+    assert response.data == {"error": "Failed to mute participant"}
+
+    mock_livekit_client.aclose.assert_called_once()
+
+
+def test_update_participant_success(mock_livekit_client):
+    """Test successful participant update."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {
+        "participant_identity": str(uuid4()),
+        "metadata": {"role": "presenter"},
+        "permission": {
+            "can_subscribe": True,
+            "can_publish": True,
+            "can_publish_data": True,
+            "can_publish_sources": [
+                1,
+                2,
+            ],  # [TrackSource.CAMERA, TrackSource.MICROPHONE]
+            "hidden": False,
+            "recorder": False,
+            "can_update_metadata": True,
+            "agent": False,
+            "can_subscribe_metrics": False,
+        },
+        "name": "John Doe",
+    }
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_200_OK
+    assert response.data == {"status": "success"}
+
+    mock_livekit_client.room.update_participant.assert_called_once()
+    mock_livekit_client.aclose.assert_called_once()
+
+
+def test_update_participant_forbidden_without_access():
+    """Test update participant returns 403 when user lacks room privileges."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()  # User without UserResourceAccess
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4()), "name": "Test User"}
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_403_FORBIDDEN
+
+
+def test_update_participant_invalid_payload():
+    """Test update participant with invalid payload."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": "invalid-uuid"}
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert "Must be a valid UUID." in str(response.data)
+
+
+def test_update_participant_no_update_fields():
+    """Test update participant with no update fields provided."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {
+        "participant_identity": str(uuid4())
+        # No metadata, attributes, permission, or name
+    }
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert "At least one of the following fields must be provided" in str(response.data)
+
+
+def test_update_participant_invalid_permission():
+    """Test update participant with wrong permission object."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {
+        "participant_identity": str(uuid4()),
+        "permission": {"invalid-attributes": True},
+    }
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert "Invalid permission" in str(response.data)
+
+
+def test_update_participant_wrong_metadata_attributes():
+    """Test update participant with wrong metadata or attributes provided."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {
+        "participant_identity": str(uuid4()),
+        "metadata": "wrong string",
+        "attributes": "wrong string",
+    }
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+    assert "metadata" in response.data or "attributes" in response.data
+
+
+def test_update_participant_unexpected_twirp_error(mock_livekit_client):
+    """Test update participant when LiveKit API raises TwirpError."""
+    client = APIClient()
+
+    mock_livekit_client.room.update_participant.side_effect = TwirpError(
+        msg="Internal server error", code=500, status=500
+    )
+
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4()), "name": "Test User"}
+
+    url = reverse("rooms-update-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_500_INTERNAL_SERVER_ERROR
+    assert response.data == {"error": "Failed to update participant"}
+
+    mock_livekit_client.aclose.assert_called_once()
+
+
+def test_remove_participant_success_lobby_cache(mock_livekit_client):
+    """Test successful participant removal.
+
+    The lobby cache cleanup is crucial for security - without it, removed
+    participants could potentially re-enter the room using their cached
+    lobby session.
+    """
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    participant_identity = str(uuid4())
+
+    # Create participant in lobby cache first
+    LobbyService().enter(room.id, participant_identity, "John doe")
+
+    # Accept participant
+    LobbyService().handle_participant_entry(room.id, participant_identity, True)
+
+    payload = {"participant_identity": participant_identity}
+
+    url = reverse("rooms-remove-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_200_OK
+    assert response.data == {"status": "success"}
+
+    mock_livekit_client.room.remove_participant.assert_called_once()
+    # called twice: once for Lobby, once for ParticipantManagement
+    mock_livekit_client.aclose.assert_called()
+
+    # Verify lobby cache was cleared - participant should no longer exist
+    participant = LobbyService()._get_participant(room.id, participant_identity)
+    assert participant is None
+
+
+def test_remove_participant_success(mock_livekit_client):
+    """Test successful participant removal."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4())}
+
+    url = reverse("rooms-remove-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_200_OK
+    assert response.data == {"status": "success"}
+
+    mock_livekit_client.room.remove_participant.assert_called_once()
+    mock_livekit_client.aclose.assert_called_once()
+
+
+def test_remove_participant_forbidden_without_access():
+    """Test remove participant returns 403 when user lacks room privileges."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()  # User without UserResourceAccess
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4())}
+
+    url = reverse("rooms-remove-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_403_FORBIDDEN
+
+
+def test_remove_participant_invalid_payload():
+    """Test remove participant with invalid payload."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": "invalid-uuid"}
+
+    url = reverse("rooms-remove-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+
+def test_remove_participant_missing_identity():
+    """Test remove participant with missing participant_identity."""
+    client = APIClient()
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {}  # Missing participant_identity
+
+    url = reverse("rooms-remove-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+
+def test_remove_participant_unexpected_twirp_error(mock_livekit_client):
+    """Test remove participant when LiveKit API raises TwirpError."""
+    client = APIClient()
+
+    mock_livekit_client.room.remove_participant.side_effect = TwirpError(
+        msg="Internal server error", code=500, status=500
+    )
+
+    room = RoomFactory()
+    user = UserFactory()
+    UserResourceAccessFactory(
+        resource=room, user=user, role=random.choice(["administrator", "owner"])
+    )
+    client.force_authenticate(user=user)
+
+    payload = {"participant_identity": str(uuid4())}
+
+    url = reverse("rooms-remove-participant", kwargs={"pk": room.id})
+    response = client.post(url, payload, format="json")
+
+    assert response.status_code == status.HTTP_500_INTERNAL_SERVER_ERROR
+    assert response.data == {"error": "Failed to remove participant"}
+
+    mock_livekit_client.aclose.assert_called_once()

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

@@ -235,7 +235,10 @@ def test_api_rooms_retrieve_authenticated_public(mock_token):
     which they are not related, provided the room is public.
     They should not see related users.
     """
-    room = RoomFactory(access_level=RoomAccessLevel.PUBLIC)
+    room = RoomFactory(
+        access_level=RoomAccessLevel.PUBLIC,
+        configuration={"can_publish_sources": ["mock-source"]},
+    )
 
     user = UserFactory()
     client = APIClient()
@@ -262,7 +265,13 @@ def test_api_rooms_retrieve_authenticated_public(mock_token):
     }
 
     mock_token.assert_called_once_with(
-        room=expected_name, user=user, username=None, color=None
+        room=expected_name,
+        user=user,
+        username=None,
+        color=None,
+        sources=["mock-source"],
+        is_admin_or_owner=False,
+        participant_id=None,
     )
 
 
@@ -307,7 +316,13 @@ def test_api_rooms_retrieve_authenticated_trusted(mock_token):
     }
 
     mock_token.assert_called_once_with(
-        room=expected_name, user=user, username=None, color=None
+        room=expected_name,
+        user=user,
+        username=None,
+        color=None,
+        sources=None,
+        is_admin_or_owner=False,
+        participant_id=None,
     )
 
 
@@ -353,7 +368,9 @@ def test_api_rooms_retrieve_members(mock_token, django_assert_num_queries, setti
     user = UserFactory()
     other_user = UserFactory()
 
-    room = RoomFactory()
+    room = RoomFactory(
+        configuration={"can_publish_sources": ["mock-source"]},
+    )
     UserResourceAccessFactory(resource=room, user=user, role="member")
     UserResourceAccessFactory(resource=room, user=other_user, role="member")
 
@@ -386,7 +403,13 @@ def test_api_rooms_retrieve_members(mock_token, django_assert_num_queries, setti
     }
 
     mock_token.assert_called_once_with(
-        room=expected_name, user=user, username=None, color=None
+        room=expected_name,
+        user=user,
+        username=None,
+        color=None,
+        sources=["mock-source"],
+        is_admin_or_owner=False,
+        participant_id=None,
     )
 
 
@@ -473,5 +496,11 @@ def test_api_rooms_retrieve_administrators(
     }
 
     mock_token.assert_called_once_with(
-        room=expected_name, user=user, username=None, color=None
+        room=expected_name,
+        user=user,
+        username=None,
+        color=None,
+        sources=None,
+        is_admin_or_owner=True,
+        participant_id=None,
     )

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

@@ -2,7 +2,7 @@
 Test rooms API endpoints in the Meet core app: start recording.
 """
 
-# pylint: disable=W0621,W0613
+# pylint: disable=redefined-outer-name,unused-argument
 
 from unittest import mock
 
@@ -55,8 +55,9 @@ def test_start_recording_anonymous():
     assert Recording.objects.count() == 0
 
 
-def test_start_recording_non_owner_and_non_administrator():
+def test_start_recording_non_owner_and_non_administrator(settings):
     """Non-owner and Non-Administrator users should not be allowed to start room recordings."""
+    settings.RECORDING_ENABLE = True
     room = RoomFactory()
     user = UserFactory()
     client = APIClient()
@@ -88,8 +89,8 @@ def test_start_recording_recording_disabled(settings):
         {"mode": "screen_recording"},
     )
 
-    assert response.status_code == 403
-    assert response.json() == {"detail": "Access denied, recording is disabled."}
+    assert response.status_code == 404
+    assert response.json() == {"detail": "Not found."}
     assert Recording.objects.count() == 0
 
 

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

@@ -2,7 +2,7 @@
 Test rooms API endpoints in the Meet core app: stop recording.
 """
 
-# pylint: disable=W0621,W0613
+# pylint: disable=redefined-outer-name,unused-argument
 
 from unittest import mock
 
@@ -54,8 +54,9 @@ def test_stop_recording_anonymous():
     assert Recording.objects.filter(status=RecordingStatusChoices.ACTIVE).count() == 1
 
 
-def test_stop_recording_non_owner_and_non_administrator():
+def test_stop_recording_non_owner_and_non_administrator(settings):
     """Non-owner and Non-Administrator users should not be allowed to stop room recordings."""
+    settings.RECORDING_ENABLE = True
     room = RoomFactory()
     user = UserFactory()
     RecordingFactory(room=room, status=RecordingStatusChoices.ACTIVE)
@@ -84,8 +85,8 @@ def test_stop_recording_recording_disabled(settings):
 
     response = client.post(f"/api/v1.0/rooms/{room.id}/stop-recording/")
 
-    assert response.status_code == 403
-    assert response.json() == {"detail": "Access denied, recording is disabled."}
+    assert response.status_code == 404
+    assert response.json() == {"detail": "Not found."}
     # Verify no recording exists
     assert Recording.objects.count() == 0
 

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

@@ -0,0 +1,221 @@
+"""
+Test rooms API endpoints in the Meet core app: start subtitle.
+"""
+# pylint: disable=W0621
+
+import uuid
+from unittest import mock
+
+from django.conf import settings
+
+import pytest
+from livekit.api import AccessToken, TwirpError, VideoGrants
+from rest_framework.test import APIClient
+
+from ...factories import RoomFactory, UserFactory
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def mock_room_id() -> str:
+    """Mock room's id."""
+    return "d2aeb774-1ecd-4d73-a3ac-3d3530cad7ff"
+
+
+@pytest.fixture
+def mock_livekit_token(mock_room_id):
+    """Mock LiveKit JWT token."""
+
+    video_grants = VideoGrants(
+        room=mock_room_id,
+        room_join=True,
+        room_admin=True,
+        can_update_own_metadata=True,
+        can_publish_sources=[
+            "camera",
+            "microphone",
+            "screen_share",
+            "screen_share_audio",
+        ],
+    )
+
+    token = (
+        AccessToken(
+            api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
+            api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
+        )
+        .with_grants(video_grants)
+        .with_identity(str(uuid.uuid4()))
+    )
+
+    return token.to_jwt()
+
+
+@pytest.fixture
+def mock_livekit_client():
+    """Mock LiveKit API client."""
+    with mock.patch("core.utils.create_livekit_client") as mock_create:
+        mock_client = mock.AsyncMock()
+        mock_create.return_value = mock_client
+        yield mock_client
+
+
+def test_start_subtitle_missing_token_anonymous(settings):
+    """Test that anonymous users cannot start subtitles without a valid LiveKit token."""
+
+    settings.ROOM_SUBTITLE_ENABLED = True
+
+    room = RoomFactory()
+    client = APIClient()
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/",
+    )
+
+    assert response.status_code == 403
+    assert response.json() == {
+        "detail": "Authentication credentials were not provided."
+    }
+
+
+def test_start_subtitle_missing_token_authenticated(settings):
+    """Test that authenticated users still need a valid LiveKit token to start subtitles."""
+
+    settings.ROOM_SUBTITLE_ENABLED = True
+
+    room = RoomFactory()
+    user = UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/",
+    )
+
+    assert response.status_code == 403
+    assert response.json() == {
+        "detail": "Authentication credentials were not provided."
+    }
+
+
+def test_start_subtitle_invalid_token():
+    """Test that malformed or invalid LiveKit tokens are rejected."""
+
+    room = RoomFactory()
+    user = UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/", {"token": "invalid-token"}
+    )
+
+    assert response.status_code == 403
+    assert response.json() == {"detail": "Invalid LiveKit token: Not enough segments"}
+
+
+def test_start_subtitle_disabled_by_default(mock_livekit_token):
+    """Test that subtitle functionality is disabled when feature flag is off."""
+
+    room = RoomFactory()
+    user = UserFactory()
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/",
+        {"token": mock_livekit_token},
+    )
+
+    assert response.status_code == 404
+    assert response.json() == {"detail": "Not found."}
+
+
+def test_start_subtitle_valid_token(
+    settings, mock_livekit_client, mock_livekit_token, mock_room_id
+):
+    """Test successful subtitle initiation with valid token and enabled feature."""
+
+    settings.ROOM_SUBTITLE_ENABLED = True
+
+    room = RoomFactory(id=mock_room_id)
+    client = APIClient()
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/",
+        {"token": mock_livekit_token},
+    )
+
+    assert response.status_code == 200
+    assert response.json() == {"status": "success"}
+
+    mock_livekit_client.agent_dispatch.create_dispatch.assert_called_once()
+
+    call_args = mock_livekit_client.agent_dispatch.create_dispatch.call_args[0][0]
+    assert call_args.agent_name == "multi-user-transcriber"
+    assert call_args.room == "d2aeb774-1ecd-4d73-a3ac-3d3530cad7ff"
+
+
+def test_start_subtitle_twirp_error(
+    settings, mock_livekit_client, mock_livekit_token, mock_room_id
+):
+    """Test handling of LiveKit service errors during subtitle initiation."""
+
+    settings.ROOM_SUBTITLE_ENABLED = True
+
+    room = RoomFactory(id=mock_room_id)
+    client = APIClient()
+
+    mock_livekit_client.agent_dispatch.create_dispatch.side_effect = TwirpError(
+        msg="Internal server error", code=500, status=500
+    )
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/",
+        {"token": mock_livekit_token},
+    )
+
+    assert response.status_code == 500
+    assert response.json() == {
+        "error": f"Subtitles failed to start for room {room.slug}"
+    }
+
+
+def test_start_subtitle_wrong_room(settings, mock_livekit_token):
+    """Test that tokens are validated against the correct room ID."""
+
+    settings.ROOM_SUBTITLE_ENABLED = True
+
+    room = RoomFactory()
+    client = APIClient()
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/",
+        {"token": mock_livekit_token},
+    )
+
+    assert response.status_code == 403
+    assert response.json() == {
+        "detail": "You do not have permission to perform this action."
+    }
+
+
+def test_start_subtitle_wrong_signature(settings, mock_livekit_token):
+    """Test that tokens signed with incorrect signature are rejected."""
+
+    settings.ROOM_SUBTITLE_ENABLED = True
+    settings.LIVEKIT_CONFIGURATION["api_secret"] = "wrong-secret"
+
+    room = RoomFactory()
+    client = APIClient()
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/start-subtitle/",
+        {"token": mock_livekit_token},
+    )
+
+    assert response.status_code == 403
+    assert response.json() == {
+        "detail": "Invalid LiveKit token: Signature verification failed"
+    }

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

@@ -2,7 +2,7 @@
 Test LiveKit webhook endpoint on the rooms API.
 """
 
-# pylint: disable=R0913,W0621,R0917,W0613
+# pylint: disable=too-many-arguments,redefined-outer-name,too-many-positional-arguments,unused-argument
 import base64
 import hashlib
 import json

src/backend/core/tests/services/test_lobby.py

@@ -144,10 +144,9 @@ def test_get_or_create_participant_id_from_cookie(lobby_service):
     assert participant_id == "existing-id"
 
 
-@mock.patch("uuid.uuid4")
+@mock.patch.object(uuid, "uuid4", return_value="generated-id")
 def test_get_or_create_participant_id_new(mock_uuid4, lobby_service):
     """Test creating new participant ID when cookie is missing."""
-    mock_uuid4.return_value = mock.Mock(hex="generated-id")
     request = mock.Mock()
     request.COOKIES = {}
 
@@ -266,6 +265,9 @@ def test_request_entry_public_room(
         user=request.user,
         username=username,
         color=participant.color,
+        configuration=room.configuration,
+        is_admin_or_owner=False,
+        participant_id="test-participant-id",
     )
 
     lobby_service._get_participant.assert_called_once_with(room.id, participant_id)
@@ -302,6 +304,9 @@ def test_request_entry_trusted_room(
         user=request.user,
         username=username,
         color=participant.color,
+        configuration=room.configuration,
+        is_admin_or_owner=False,
+        participant_id="test-participant-id",
     )
 
     lobby_service._get_participant.assert_called_once_with(room.id, participant_id)
@@ -394,6 +399,9 @@ def test_request_entry_accepted_participant(
         user=request.user,
         username=username,
         color="#123456",
+        configuration=room.configuration,
+        is_admin_or_owner=False,
+        participant_id="test-participant-id",
     )
     lobby_service._get_participant.assert_called_once_with(room.id, participant_id)
 
@@ -442,7 +450,7 @@ def test_enter_success(
         timeout=settings.LOBBY_WAITING_TIMEOUT,
     )
     mock_notify.assert_called_once_with(
-        room_name=room.id, notification_data={"type": "participantWaiting"}
+        room_name=str(room.pk), notification_data={"type": "participantWaiting"}
     )
 
 
@@ -831,3 +839,35 @@ def test_clear_room_empty(settings, lobby_service):
     assert cache.keys(f"test-lobby_{room_id!s}_*") == []
     lobby_service.clear_room_cache(room_id)
     assert cache.keys(f"test-lobby_{room_id!s}_*") == []
+
+
+def test_clear_participant_cache(lobby_service):
+    """Test clearing a specific participant entry from cache."""
+    room_id = uuid.uuid4()
+    participant_id = "test-participant-id"
+
+    cache_key = f"{settings.LOBBY_KEY_PREFIX}_{room_id!s}_{participant_id}"
+    participant_data = {
+        "status": "waiting",
+        "username": "test-username",
+        "id": participant_id,
+        "color": "#123456",
+    }
+    cache.set(cache_key, participant_data, timeout=settings.LOBBY_WAITING_TIMEOUT)
+    assert cache.get(cache_key) is not None
+
+    lobby_service.clear_participant_cache(room_id, participant_id)
+    assert cache.get(cache_key) is None
+
+
+def test_clear_participant_cache_nonexistent(lobby_service):
+    """Test clearing a participant that doesn't exist in cache."""
+    room_id = uuid.uuid4()
+    participant_id = "nonexistent-participant"
+
+    cache_key = f"{settings.LOBBY_KEY_PREFIX}_{room_id!s}_{participant_id}"
+    assert cache.get(cache_key) is None
+
+    lobby_service.clear_participant_cache(room_id, participant_id)
+
+    assert cache.get(cache_key) is None

src/backend/core/tests/services/test_subtitle.py

@@ -0,0 +1,48 @@
+"""
+Test subtitle service.
+"""
+
+# pylint: disable=W0621
+from unittest import mock
+
+import pytest
+
+from core.factories import RoomFactory
+from core.services.subtitle import SubtitleService
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture
+def mock_livekit_client():
+    """Mock LiveKit API client."""
+    with mock.patch("core.utils.create_livekit_client") as mock_create:
+        mock_client = mock.AsyncMock()
+        mock_create.return_value = mock_client
+        yield mock_client
+
+
+def test_start_subtitle_settings(mock_livekit_client, settings):
+    """Test that start_subtitle uses the configured agent name from Django settings."""
+
+    settings.ROOM_SUBTITLE_AGENT_NAME = "fake-subtitle-agent-name"
+
+    room = RoomFactory(name="my room")
+    SubtitleService().start_subtitle(room)
+
+    mock_livekit_client.agent_dispatch.create_dispatch.assert_called_once()
+
+    call_args = mock_livekit_client.agent_dispatch.create_dispatch.call_args[0][0]
+    assert call_args.agent_name == "fake-subtitle-agent-name"
+    assert call_args.room == str(room.id)
+
+
+def test_stop_subtitle_not_implemented():
+    """Test that stop_subtitle raises NotImplementedError."""
+
+    room = RoomFactory(name="my room")
+
+    with pytest.raises(
+        NotImplementedError, match="Subtitle agent stopping not yet implemented"
+    ):
+        SubtitleService().stop_subtitle(room)

src/backend/core/utils.py

@@ -2,12 +2,13 @@
 Utils functions used in the core app
 """
 
-# ruff: noqa:S311
+# pylint: disable=R0913, R0917
+# ruff: noqa:S311, PLR0913
 
 import hashlib
 import json
 import random
-from typing import Optional
+from typing import List, Optional
 from uuid import uuid4
 
 from django.conf import settings
@@ -49,7 +50,13 @@ def generate_color(identity: str) -> str:
 
 
 def generate_token(
-    room: str, user, username: Optional[str] = None, color: Optional[str] = None
+    room: str,
+    user,
+    username: Optional[str] = None,
+    color: Optional[str] = None,
+    sources: Optional[List[str]] = None,
+    is_admin_or_owner: bool = False,
+    participant_id: Optional[str] = None,
 ) -> str:
     """Generate a LiveKit access token for a user in a specific room.
 
@@ -60,25 +67,34 @@ def generate_token(
                          If none, a default value will be used.
         color (Optional[str]): The color to be displayed in the room.
                          If none, a value will be generated
+        sources: (Optional[List[str]]): List of media sources the user can publish
+                         If none, defaults to LIVEKIT_DEFAULT_SOURCES.
+        is_admin_or_owner (bool): Whether user has admin privileges
+        participant_id (Optional[str]): Stable identifier for anonymous users;
+                         used as identity when user.is_anonymous.
 
     Returns:
         str: The LiveKit JWT access token.
     """
+
+    if is_admin_or_owner:
+        sources = settings.LIVEKIT_DEFAULT_SOURCES
+
+    if sources is None:
+        sources = settings.LIVEKIT_DEFAULT_SOURCES
+
     video_grants = VideoGrants(
         room=room,
         room_join=True,
-        room_admin=True,
+        room_admin=is_admin_or_owner,
         can_update_own_metadata=True,
-        can_publish_sources=[
-            "camera",
-            "microphone",
-            "screen_share",
-            "screen_share_audio",
-        ],
+        can_publish=bool(sources),
+        can_publish_sources=sources,
+        can_subscribe=True,
     )
 
     if user.is_anonymous:
-        identity = str(uuid4())
+        identity = participant_id or str(uuid4())
         default_username = "Anonymous"
     else:
         identity = str(user.sub)
@@ -95,14 +111,22 @@ def generate_token(
         .with_grants(video_grants)
         .with_identity(identity)
         .with_name(username or default_username)
-        .with_metadata(json.dumps({"color": color}))
+        .with_attributes(
+            {"color": color, "room_admin": "true" if is_admin_or_owner else "false"}
+        )
     )
 
     return token.to_jwt()
 
 
 def generate_livekit_config(
-    room_id: str, user, username: str, color: Optional[str] = None
+    room_id: str,
+    user,
+    username: str,
+    is_admin_or_owner: bool,
+    color: Optional[str] = None,
+    configuration: Optional[dict] = None,
+    participant_id: Optional[str] = None,
 ) -> dict:
     """Generate LiveKit configuration for room access.
 
@@ -110,15 +134,31 @@ def generate_livekit_config(
         room_id: Room identifier
         user: User instance requesting access
         username: Display name in room
+        is_admin_or_owner (bool): Whether the user has admin/owner privileges for this room.
+        color (Optional[str]): Optional color to associate with the participant.
+        configuration (Optional[dict]): Room configuration dict that can override default settings.
+        participant_id (Optional[str]): Stable identifier for anonymous users;
+                         used as identity when user.is_anonymous.
 
     Returns:
         dict: LiveKit configuration with URL, room and access token
     """
+
+    sources = None
+    if configuration is not None:
+        sources = configuration.get("can_publish_sources", None)
+
     return {
         "url": settings.LIVEKIT_CONFIGURATION["url"],
         "room": room_id,
         "token": generate_token(
-            room=room_id, user=user, username=username, color=color
+            room=room_id,
+            user=user,
+            username=username,
+            color=color,
+            sources=sources,
+            is_admin_or_owner=is_admin_or_owner,
+            participant_id=participant_id,
         ),
     }
 

src/backend/meet/settings.py

@@ -492,6 +492,24 @@ class Base(Configuration):
         ),
         "url": values.Value(environ_name="LIVEKIT_API_URL", environ_prefix=None),
     }
+    LIVEKIT_FORCE_WSS_PROTOCOL = values.BooleanValue(
+        False, environ_name="LIVEKIT_FORCE_WSS_PROTOCOL", environ_prefix=None
+    )
+    LIVEKIT_DEFAULT_SOURCES = values.ListValue(
+        [
+            "camera",
+            "microphone",
+            "screen_share",
+            "screen_share_audio",
+        ],
+        environ_name="LIVEKIT_DEFAULT_SOURCES",
+        environ_prefix=None,
+    )
+    LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND = values.BooleanValue(
+        environ_name="LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND",
+        environ_prefix=None,
+        default=False,
+    )
     LIVEKIT_VERIFY_SSL = values.BooleanValue(
         True, environ_name="LIVEKIT_VERIFY_SSL", environ_prefix=None
     )
@@ -636,6 +654,16 @@ class Base(Configuration):
         environ_prefix=None,
     )
 
+    # Subtitles settings
+    ROOM_SUBTITLE_ENABLED = values.BooleanValue(
+        False, environ_name="ROOM_SUBTITLE_ENABLED", environ_prefix=None
+    )
+    ROOM_SUBTITLE_AGENT_NAME = values.Value(
+        "multi-user-transcriber",
+        environ_name="ROOM_SUBTITLE_AGENT_NAME",
+        environ_prefix=None,
+    )
+
     # pylint: disable=invalid-name
     @property
     def ENVIRONMENT(self):

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.29"
+version = "0.1.34"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -60,10 +60,10 @@ dependencies = [
 ]
 
 [project.urls]
-"Bug Tracker" = "https://github.com/numerique-gouv/meet/issues/new"
-"Changelog" = "https://github.com/numerique-gouv/meet/blob/main/CHANGELOG.md"
-"Homepage" = "https://github.com/numerique-gouv/meet"
-"Repository" = "https://github.com/numerique-gouv/meet"
+"Bug Tracker" = "https://github.com/suitenumerique/meet/issues/new"
+"Changelog" = "https://github.com/suitenumerique/meet/blob/main/CHANGELOG.md"
+"Homepage" = "https://github.com/suitenumerique/meet"
+"Repository" = "https://github.com/suitenumerique/meet"
 
 [project.optional-dependencies]
 dev = [

src/frontend/index.html

@@ -2,7 +2,10 @@
 <html lang="en" data-lk-theme="visio-light">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/assets/icon.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_APP_TITLE%</title>
   </head>

src/frontend/package-lock.json

@@ -1,22 +1,24 @@
 {
   "name": "meet",
-  "version": "0.1.29",
+  "version": "0.1.34",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "0.1.29",
+      "version": "0.1.34",
       "dependencies": {
         "@livekit/components-react": "2.9.13",
         "@livekit/components-styles": "1.1.6",
-        "@livekit/track-processors": "0.5.7",
+        "@livekit/track-processors": "0.6.0",
         "@pandacss/preset-panda": "0.54.0",
         "@react-aria/toast": "3.0.5",
+        "@react-types/overlays": "3.9.0",
         "@remixicon/react": "4.6.0",
         "@tanstack/react-query": "5.81.5",
         "@timephy/rnnoise-wasm": "1.0.0",
         "crisp-sdk-web": "1.0.25",
+        "derive-valtio": "0.2.0",
         "hoofd": "1.7.3",
         "humanize-duration": "3.33.0",
         "i18next": "25.3.1",
@@ -24,7 +26,7 @@
         "i18next-parser": "9.3.0",
         "i18next-resources-to-backend": "1.2.1",
         "libphonenumber-js": "1.12.10",
-        "livekit-client": "2.15.2",
+        "livekit-client": "2.15.5",
         "posthog-js": "1.256.2",
         "react": "18.3.1",
         "react-aria-components": "1.10.1",
@@ -1279,9 +1281,9 @@
       }
     },
     "node_modules/@livekit/track-processors": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/@livekit/track-processors/-/track-processors-0.5.7.tgz",
-      "integrity": "sha512-/2SkuVAF+YiPNtOi9zQJz/yH1WGaK53XZ3PaESpLOiEYUBsYky13BrriXCXUf6kwn5R5+7ZsYWc2k3XSsAuLtg==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@livekit/track-processors/-/track-processors-0.6.0.tgz",
+      "integrity": "sha512-h0Ewdp2/u44QnfLsmhL/IBCkFJsl10eyodErOedP9yWTS4c8m8ibqBWaNH0bHDeqg4Ue+OzzUb7dogUb2nJ0Ow==",
       "license": "Apache-2.0",
       "dependencies": {
         "@mediapipe/tasks-vision": "0.10.14"
@@ -3377,12 +3379,12 @@
       }
     },
     "node_modules/@react-types/overlays": {
-      "version": "3.8.16",
-      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.16.tgz",
-      "integrity": "sha512-Aj9jIFwALk9LiOV/s3rVie+vr5qWfaJp/6aGOuc2StSNDTHvj1urSAr3T0bT8wDlkrqnlS4JjEGE40ypfOkbAA==",
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.9.0.tgz",
+      "integrity": "sha512-T2DqMcDN5p8vb4vu2igoLrAtuewaNImLS8jsK7th7OjwQZfIWJn5Y45jSxHtXJUddEg1LkUjXYPSXCMerMcULw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@react-types/shared": "^3.30.0"
+        "@react-types/shared": "^3.31.0"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -3438,9 +3440,9 @@
       }
     },
     "node_modules/@react-types/shared": {
-      "version": "3.30.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.30.0.tgz",
-      "integrity": "sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==",
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.31.0.tgz",
+      "integrity": "sha512-ua5U6V66gDcbLZe4P2QeyNgPp4YWD1ymGA6j3n+s8CGExtrCPe64v+g4mvpT8Bnb985R96e4zFT61+m0YCwqMg==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -5294,6 +5296,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/derive-valtio": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/derive-valtio/-/derive-valtio-0.2.0.tgz",
+      "integrity": "sha512-6slhaFHtfaL3t5dLYaQt6s4G2xZymhu0Ktdl7OMeVk8+46RgR8ft6FL0Tr4F31W+yPH03nJe1SSP4JFy2hSMRA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "valtio": ">=2.0.0-rc.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -7449,9 +7460,9 @@
       }
     },
     "node_modules/livekit-client": {
-      "version": "2.15.2",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.15.2.tgz",
-      "integrity": "sha512-hf0A0JFN7M0iVGZxMfTk6a3cW7TNTVdqxkykjKBweORlqhQX1ITVloh6aLvplLZOxpkUE5ZVLz1DeS3+ERglog==",
+      "version": "2.15.5",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.15.5.tgz",
+      "integrity": "sha512-zn36akmDlqZxlrTOUgYXtxtj35HQ44aJ+mgKat9BTSPiZru4RjEHOtp8RJE6jGoN2miJlWiOeEKHB2+ae3YrSw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@livekit/mutex": "1.1.1",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.29",
+  "version": "0.1.34",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -15,13 +15,15 @@
   "dependencies": {
     "@livekit/components-react": "2.9.13",
     "@livekit/components-styles": "1.1.6",
-    "@livekit/track-processors": "0.5.7",
+    "@livekit/track-processors": "0.6.0",
     "@pandacss/preset-panda": "0.54.0",
     "@react-aria/toast": "3.0.5",
+    "@react-types/overlays": "3.9.0",
     "@remixicon/react": "4.6.0",
     "@tanstack/react-query": "5.81.5",
     "@timephy/rnnoise-wasm": "1.0.0",
     "crisp-sdk-web": "1.0.25",
+    "derive-valtio": "0.2.0",
     "hoofd": "1.7.3",
     "humanize-duration": "3.33.0",
     "i18next": "25.3.1",
@@ -29,7 +31,7 @@
     "i18next-parser": "9.3.0",
     "i18next-resources-to-backend": "1.2.1",
     "libphonenumber-js": "1.12.10",
-    "livekit-client": "2.15.2",
+    "livekit-client": "2.15.5",
     "posthog-js": "1.256.2",
     "react": "18.3.1",
     "react-aria-components": "1.10.1",

src/frontend/panda.config.ts

@@ -124,6 +124,7 @@ const config: Config = {
         ...pandaPreset.theme.tokens.colors,
         primaryDark: {
           50: { value: '#161622' },
+          75: { value: '#222234' },
           100: { value: '#2D2D46' },
           200: { value: '#43436A' },
           300: { value: '#5A5A8F' },

src/frontend/public/assets/camera_mic_permission.svg

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1080 1080">
+  <defs>
+    <style>
+      .st0, .st1, .st2, .st3, .st4, .st5 {
+        fill: none;
+      }
+
+      .st6 {
+        fill: #6dd58c;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st9, .st10 {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .st6, .st1, .st2, .st7, .st8, .st10 {
+        stroke-width: 3px;
+      }
+
+      .st6, .st1, .st7, .st8, .st4, .st5, .st10 {
+        stroke: #191c1e;
+      }
+
+      .st11, .st7, .st12, .st9 {
+        fill: #fff;
+      }
+
+      .st11, .st3 {
+        stroke: #000;
+        stroke-miterlimit: 10;
+      }
+
+      .st11, .st3, .st9 {
+        stroke-width: 5px;
+      }
+
+      .st2, .st9 {
+        stroke: #898989;
+      }
+
+      .st8 {
+        fill: #ff8669;
+      }
+
+      .st13 {
+        fill: #e3e3fb;
+      }
+
+      .st14 {
+        fill: #f7f7f7;
+      }
+
+      .st4, .st5 {
+        stroke-width: 4px;
+      }
+
+      .st5 {
+        stroke-linecap: square;
+      }
+
+      .st15 {
+        fill: #ca3632;
+      }
+
+      .st10 {
+        fill: #ffb929;
+      }
+    </style>
+  </defs>
+  <rect class="st12" x=".53" y=".53" width="1078.61" height="1080.36"/>
+  <path class="st12" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st1" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st12" d="M960.08,256.93h-110c-12.94,0-23.43-10.49-23.43-23.43v-71.56c0-12.94-10.48-23.43-23.42-23.44h-266.94c-12.94,0-23.43,10.49-23.43,23.44h0v71.56c0,12.94-10.49,23.43-23.43,23.43H120.5v137.62h839.58"/>
+  <path class="st8" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st10" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st6" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st1" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st7" d="M625.31,322.08h-27.15c-4.35,0-7.88,3.53-7.88,7.88h0v17.19c0,4.35,3.53,7.88,7.88,7.88h27.15c4.35,0,7.88-3.53,7.88-7.88h0v-17.19c0-4.35-3.53-7.88-7.88-7.88h0Z"/>
+  <path class="st12" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <path class="st1" d="M595.13,322.09v-12.86c-.02-9.26,7.47-16.78,16.73-16.8h.03c9.26,0,16.76,7.5,16.76,16.76v12.86"/>
+  <g>
+    <ellipse class="st4" cx="707.63" cy="299.5" rx="18.37" ry="18.5"/>
+    <path class="st5" d="M624,299h63"/>
+    <circle class="st4" cx="643.5" cy="339.5" r="18.5"/>
+    <path class="st5" d="M728,339h-63"/>
+  </g>
+  <path class="st14" d="M192.29,138.5h767.79v118.43H120.5v-46.64c0-39.62,32.17-71.79,71.79-71.79h0Z"/>
+  <path class="st0" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M120.5,942.36V210.83c0-39.94,32.37-72.32,72.31-72.33h767.27"/>
+  <path class="st2" d="M210.81,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M274.32,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M337.84,223.85c10.42,0,18.86-8.44,18.86-18.86s-8.44-18.86-18.86-18.86-18.86,8.44-18.86,18.86,8.44,18.86,18.86,18.86h0Z"/>
+  <path class="st2" d="M236.18,329.44h-63.69M201.62,358.57l-29.13-29.13,29.13-29.12M274.32,329.44h63.69M308.88,358.57l29.13-29.13-29.13-29.12"/>
+  <path class="st15" d="M382.41,636.74l39.92,39.92,13.47-13.47-188.53-188.53-13.47,13.47,11.35,11.35h-5.58c-5.26,0-9.52,4.26-9.52,9.52v133.31c0,5.26,4.26,9.52,9.52,9.52h133.31c5.26,0,9.52-4.26,9.52-9.52v-5.58h.01ZM363.37,617.69v15.1h-114.27v-114.27h15.1l99.17,99.17h0ZM439.55,633.17c0,2.02-1.19,3.6-2.78,4.33l-16.27-16.27v-75.65l-38.09,26.66v10.9l-19.04-19.04v-45.57h-45.57l-19.04-19.04h74.14c5.26,0,9.52,4.26,9.52,9.52v39.99l49.64-34.75c3.16-2.21,7.49.05,7.49,3.9v115.02h0Z"/>
+  <path class="st15" d="M375.25,866.34l43.58,43.58,12.93-12.93-180.97-180.97-12.93,12.93,51.25,51.25v14.49c0,25.24,20.46,45.7,45.7,45.7,4.41,0,8.67-.62,12.7-1.79l14.17,14.17c-8.17,3.79-17.28,5.9-26.87,5.9-32.23,0-58.9-23.84-63.33-54.84h-18.43c4.21,38.13,34.49,68.4,72.62,72.62v37.06h18.28v-37.06c11.28-1.25,21.87-4.77,31.3-10.11h0ZM330.71,821.81c-11.87-1.78-21.25-11.16-23.03-23.03l23.03,23.03ZM402.21,841.85l-13.18-13.18c4.65-7.4,7.82-15.82,9.11-24.84h18.43c-1.55,14.04-6.64,27.02-14.35,38.03h0ZM375.62,815.27l-14.15-14.15c.5-2.06.76-4.21.76-6.43v-36.56c0-15.14-12.28-27.42-27.42-27.42-11.83,0-21.91,7.49-25.76,17.99l-13.68-13.68c7.94-13.52,22.63-22.59,39.44-22.59,25.24,0,45.7,20.46,45.7,45.7v36.56c0,7.4-1.76,14.39-4.88,20.58h-.01Z"/>
+  <path d="M597.6,312.73c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM602.4,301.55c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM619.98,315.93h25.57v-6.39h-25.57v6.39ZM632.76,344.69c0-2.65,2.15-4.79,4.79-4.79s4.79,2.15,4.79,4.79-2.15,4.79-4.79,4.79-4.79-2.15-4.79-4.79ZM637.56,333.51c-6.18,0-11.19,5.01-11.19,11.19s5.01,11.19,11.19,11.19,11.19-5.01,11.19-11.19-5.01-11.19-11.19-11.19ZM594.41,341.5v6.39h25.57v-6.39h-25.57Z"/>
+  <line class="st2" x1="960.08" y1="394.55" x2="836.91" y2="394.55"/>
+  <path class="st9" d="M527.76,394.55H120.5v-137.62h368.93c12.94,0,23.43-10.49,23.43-23.43v-71.56c0-12.95,10.49-23.44,23.43-23.44h266.94c12.94,0,23.43,10.5,23.42,23.44v71.56c0,2.09.27,4.12.79,6.05,1,3.77,2.92,7.17,5.51,9.94,4.28,4.58,10.37,7.44,17.13,7.44h110"/>
+  <path class="st13" d="M645.52,274.8h314.56v101.2h-314.56c-23.81,0-43.12-22.66-43.12-50.61h0c.01-27.94,19.31-50.59,43.12-50.59h0Z"/>
+  <g>
+    <path class="st13" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71h-181.11c-43.65,0-79.03-35.38-79.03-79.03,0-21.82,8.86-41.56,23.16-55.86,14.3-14.29,34.06-23.13,55.87-23.13h179.74c12.93,23.89,20.27,51.24,20.27,80.31Z"/>
+    <path d="M656.78,350.02v9.98h39.93v-9.98h-39.93ZM724.16,337.54c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.46,17.47,17.46,17.47-7.82,17.47-17.46-7.82-17.47-17.47-17.47ZM724.16,362.49c-4.13,0-7.49-3.35-7.49-7.48s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.36,7.48-7.49,7.48ZM696.71,300.11v9.98h39.93v-9.98h-39.93ZM669.26,287.63c-9.65,0-17.47,7.82-17.47,17.47s7.82,17.47,17.47,17.47,17.47-7.82,17.47-17.47-7.82-17.47-17.47-17.47ZM669.26,312.59c-4.13,0-7.49-3.36-7.49-7.49s3.36-7.49,7.49-7.49,7.49,3.35,7.49,7.49-3.35,7.49-7.49,7.49Z"/>
+  </g>
+  <line class="st2" x1="813.4" y1="432.85" x2="551.26" y2="432.85"/>
+  <path class="st3" d="M851.32,326.18c0,28.02-6.82,54.45-18.9,77.71-5.35,10.32-11.74,20.02-19.02,28.96-30.98,38.03-78.19,62.32-131.07,62.32s-100.09-24.29-131.07-62.32c-23.7-29.09-37.92-66.22-37.92-106.67,0-93.33,75.66-168.99,168.99-168.99,64.26,0,120.15,35.87,148.72,88.68,12.93,23.89,20.27,51.24,20.27,80.31h0Z"/>
+  <polygon class="st11" points="705.12 406.95 681.79 637.91 746.21 597.51 802.28 751.56 852.2 733.39 796.14 579.34 871.46 568.88 705.12 406.95"/>
+</svg>

src/frontend/public/assets/icon.svg

@@ -1,5 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.61135 59.6951C5 62.832 5 66.6949 5 73.1656V88.7307C5 96.7588 5 100.773 6.16756 104.366C7.20062 107.546 8.89041 110.472 11.1274 112.957C13.6555 115.765 17.1318 117.772 24.0842 121.786L37.564 129.568C43.7169 133.121 47.1472 135.101 50.4165 136.054V88.0288C50.4165 85.6281 49.1052 83.4192 46.9976 82.2696L5.61135 59.6951Z" fill="#C9191E"/>
-<path d="M118.313 66.7489V91.7898C118.313 95.2521 119.818 98.5435 122.436 100.809L140.459 116.406C141.513 117.298 142.608 118.028 143.744 118.596C144.92 119.123 146.056 119.387 147.151 119.387C149.503 119.387 151.389 118.616 152.809 117.075C154.269 115.493 154.999 113.445 154.999 110.93V47.6577C154.999 45.1431 154.269 43.1151 152.809 41.5738C151.389 39.992 149.503 39.2011 147.151 39.2011C146.056 39.2011 144.92 39.4647 143.744 39.992C142.608 40.5193 141.513 41.2494 140.459 42.1822L122.45 57.7172C119.823 59.983 118.313 63.28 118.313 66.7489Z" fill="#000091"/>
-<path d="M11.6345 50.7522C11.1333 50.4788 10.6078 50.2937 10.0757 50.1915C10.4114 49.7628 10.7622 49.3452 11.1276 48.9394C13.6558 46.1315 17.132 44.1245 24.0845 40.1105L37.5643 32.3279C44.5167 28.3139 47.993 26.3069 51.6887 25.5213C54.9587 24.8262 58.3383 24.8262 61.6083 25.5213C65.304 26.3069 68.7803 28.3139 75.7327 32.3279L89.0535 40.0187C89.1066 40.0492 89.1597 40.0798 89.2129 40.1105C96.1653 44.1245 99.6416 46.1316 102.17 48.9394C104.407 51.4238 106.096 54.3506 107.13 57.5301C108.297 61.1235 108.297 65.1375 108.297 73.1656V88.7307C108.297 96.7588 108.297 100.773 107.13 104.366C106.096 107.546 104.407 110.473 102.17 112.957C99.6416 115.765 96.1655 117.772 89.2133 121.785C89.1537 121.82 89.0936 121.855 89.0341 121.889L75.7327 129.568C68.7803 133.582 65.304 135.589 61.6083 136.375C61.4564 136.407 61.3043 136.438 61.1519 136.467L61.1519 88.0288C61.1519 81.6997 57.6948 75.8761 52.1386 72.8455L11.6345 50.7522Z" fill="#000091"/>
-</svg>

src/frontend/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/frontend/src/api/useConfig.ts

@@ -31,12 +31,21 @@ export interface ApiConfig {
     expiration_days?: number
     max_duration?: number
   }
+  subtitle: {
+    enabled: boolean
+  }
   telephony: {
     enabled: boolean
     phone_number?: string
     default_country?: string
   }
   manifest_link?: string
+  livekit: {
+    url: string
+    force_wss_protocol: boolean
+    enable_firefox_proxy_workaround: boolean
+    default_sources: string[]
+  }
 }
 
 const fetchConfig = (): Promise<ApiConfig> => {

src/frontend/src/components/Avatar.tsx

@@ -16,6 +16,12 @@ const avatar = cva({
   },
   variants: {
     context: {
+      subtitles: {
+        width: '40px',
+        height: '40px',
+        fontSize: '1.3rem',
+        lineHeight: '1rem',
+      },
       list: {
         width: '32px',
         height: '32px',

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

@@ -3,4 +3,5 @@ export enum FeatureFlags {
   ScreenRecording = 'screen-recording',
   faceLandmarks = 'face-landmarks',
   noiseReduction = 'noise-reduction',
+  subtitles = 'subtitles',
 }

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

@@ -1,100 +1,187 @@
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Button, Dialog, type DialogProps, P, Text } from '@/primitives'
+import { Bold, Button, Dialog, type DialogProps, P, Text } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { RiCheckLine, RiFileCopyLine, RiSpam2Fill } from '@remixicon/react'
 import { css } from '@/styled-system/css'
+import { ApiAccessLevel, ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'
 
 // fixme - duplication with the InviteDialog
 export const LaterMeetingDialog = ({
-  roomId,
+  room,
   ...dialogProps
-}: { roomId: string } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('home')
-  const roomUrl = getRouteUrl('room', roomId)
+}: { room: null | ApiRoom } & Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('home', { keyPrefix: 'laterMeetingDialog' })
 
-  const [isCopied, setIsCopied] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
+  const roomUrl = room && getRouteUrl('room', room?.slug)
+  const telephony = useTelephony()
 
   const [isHovered, setIsHovered] = useState(false)
 
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && room?.pin_code
+  }, [telephony?.enabled, room?.pin_code])
+
+  const {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  } = useCopyRoomToClipboard(room || undefined)
+
   return (
-    <Dialog
-      isOpen={!!roomId}
-      {...dialogProps}
-      title={t('laterMeetingDialog.heading')}
-    >
-      <P>{t('laterMeetingDialog.description')}</P>
-      <Button
-        variant={isCopied ? 'success' : 'primary'}
-        size="sm"
-        fullWidth
-        aria-label={t('laterMeetingDialog.copy')}
-        style={{
-          justifyContent: 'start',
-        }}
-        onPress={() => {
-          navigator.clipboard.writeText(roomUrl)
-          setIsCopied(true)
-        }}
-        onHoverChange={setIsHovered}
-        data-attr="later-dialog-copy"
-      >
-        {isCopied ? (
-          <>
-            <RiCheckLine size={18} style={{ marginRight: '8px' }} />
-            {t('laterMeetingDialog.copied')}
-          </>
-        ) : (
-          <>
-            <RiFileCopyLine
-              size={18}
-              style={{ marginRight: '8px', minWidth: '18px' }}
-            />
-            {isHovered ? (
-              t('laterMeetingDialog.copy')
-            ) : (
+    <Dialog isOpen={!!room} {...dialogProps} title={t('heading')}>
+      <P>{t('description')}</P>
+      {!!roomUrl && (
+        <>
+          {isTelephonyReadyForUse ? (
+            <div
+              className={css({
+                width: '100%',
+                backgroundColor: 'gray.50',
+                borderRadius: '0.75rem',
+                display: 'flex',
+                flexDirection: 'column',
+                padding: '1.75rem 1.5rem',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'hidden',
+              })}
+            >
               <div
-                style={{
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                  userSelect: 'none',
-                  textWrap: 'nowrap',
-                }}
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                })}
               >
-                {roomUrl.replace(/^https?:\/\//, '')}
+                <Text as="p" wrap="pretty">
+                  {roomUrl?.replace(/^https?:\/\//, '')}
+                </Text>
+                {isTelephonyReadyForUse && (
+                  <Button
+                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                    square
+                    size={'sm'}
+                    onPress={copyRoomUrlToClipboard}
+                    aria-label={t('copyUrl')}
+                    tooltip={t('copyUrl')}
+                  >
+                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                  </Button>
+                )}
               </div>
-            )}
-          </>
-        )}
-      </Button>
-      <HStack>
-        <div
-          className={css({
-            backgroundColor: 'primary.200',
-            borderRadius: '50%',
-            padding: '4px',
-            marginTop: '1rem',
-          })}
-        >
-          <RiSpam2Fill
-            size={22}
-            className={css({
-              fill: 'primary.500',
-            })}
-          />
-        </div>
-        <Text variant="sm" style={{ marginTop: '1rem' }}>
-          {t('laterMeetingDialog.permissions')}
-        </Text>
-      </HStack>
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                  {telephony?.internationalPhoneNumber}
+                </Text>
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.pinCode')}</Bold>{' '}
+                  {formatPinCode(room?.pin_code)}
+                </Text>
+              </div>
+              <Button
+                variant={isCopied ? 'success' : 'tertiaryText'}
+                size="sm"
+                fullWidth
+                aria-label={t('copy')}
+                style={{
+                  justifyContent: 'start',
+                }}
+                onPress={copyRoomToClipboard}
+                data-attr="later-dialog-copy"
+              >
+                {isCopied ? (
+                  <>
+                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    {t('copied')}
+                  </>
+                ) : (
+                  <>
+                    <RiFileCopyLine
+                      style={{ marginRight: '6px', minWidth: '18px' }}
+                    />
+                    {t('copy')}
+                  </>
+                )}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant={isCopied ? 'success' : 'primary'}
+              size="sm"
+              fullWidth
+              aria-label={t('copy')}
+              style={{
+                justifyContent: 'start',
+              }}
+              onPress={copyRoomToClipboard}
+              onHoverChange={setIsHovered}
+              data-attr="later-dialog-copy"
+            >
+              {isCopied ? (
+                <>
+                  <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                  {t('copied')}
+                </>
+              ) : (
+                <>
+                  <RiFileCopyLine
+                    size={18}
+                    style={{ marginRight: '8px', minWidth: '18px' }}
+                  />
+                  {isHovered ? (
+                    t('copy')
+                  ) : (
+                    <div
+                      style={{
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        userSelect: 'none',
+                        textWrap: 'nowrap',
+                      }}
+                    >
+                      {roomUrl?.replace(/^https?:\/\//, '')}
+                    </div>
+                  )}
+                </>
+              )}
+            </Button>
+          )}
+          {room?.access_level == ApiAccessLevel.PUBLIC && (
+            <HStack>
+              <div
+                className={css({
+                  backgroundColor: 'primary.200',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  marginTop: '1rem',
+                })}
+              >
+                <RiSpam2Fill
+                  size={22}
+                  className={css({
+                    fill: 'primary.500',
+                  })}
+                />
+              </div>
+              <Text variant="sm" style={{ marginTop: '1rem' }}>
+                {t('permissions')}
+              </Text>
+            </HStack>
+          )}
+        </>
+      )}
     </Dialog>
   )
 }

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

@@ -18,6 +18,7 @@ import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
+import { ApiRoom } from '@/features/rooms/api/ApiRoom'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -153,7 +154,7 @@ export const Home = () => {
   } = usePersistentUserChoices()
 
   const { mutateAsync: createRoom } = useCreateRoom()
-  const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
+  const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(null)
 
   const { data } = useConfig()
 
@@ -202,7 +203,7 @@ export const Home = () => {
                       onAction={() => {
                         const slug = generateRoomId()
                         createRoom({ slug, username }).then((data) =>
-                          setLaterRoomId(data.slug)
+                          setLaterRoom(data)
                         )
                       }}
                       data-attr="create-option-later"
@@ -251,8 +252,8 @@ export const Home = () => {
           </RightColumn>
         </Columns>
         <LaterMeetingDialog
-          roomId={laterRoomId ?? ''}
-          onOpenChange={() => setLaterRoomId(null)}
+          room={laterRoom}
+          onOpenChange={() => setLaterRoom(null)}
         />
       </Screen>
     </UserAware>

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

@@ -18,7 +18,6 @@ import {
   ANIMATION_DURATION,
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
-import { safeParseMetadata } from '@/features/rooms/utils/safeParseMetadata'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
@@ -99,11 +98,25 @@ export const MainNotificationToast = () => {
         case NotificationType.ScreenRecordingLimitReached:
           toastQueue.add(
             {
+              participant,
               type: notification.type,
             },
             { timeout: NotificationDuration.ALERT }
           )
           break
+        case NotificationType.PermissionsRemoved: {
+          const removedSources = notification?.data?.removedSources
+          if (!removedSources?.length) break
+          toastQueue.add(
+            {
+              participant,
+              type: notification.type,
+              removedSources: removedSources,
+            },
+            { timeout: NotificationDuration.ALERT }
+          )
+          break
+        }
         default:
           return
       }
@@ -155,17 +168,14 @@ export const MainNotificationToast = () => {
 
   useEffect(() => {
     const handleNotificationReceived = (
-      prevMetadataStr: string | undefined,
+      changedAttributes: Record<string, string>,
       participant: Participant
     ) => {
       if (!participant) return
       if (isMobileBrowser()) return
       if (participant.isLocal) return
 
-      const prevMetadata = safeParseMetadata(prevMetadataStr)
-      const metadata = safeParseMetadata(participant.metadata)
-
-      if (prevMetadata?.raised == metadata?.raised) return
+      if (!('handRaisedAt' in changedAttributes)) return
 
       const existingToast = toastQueue.visibleToasts.find(
         (toast) =>
@@ -173,12 +183,12 @@ export const MainNotificationToast = () => {
           toast.content.type === NotificationType.HandRaised
       )
 
-      if (existingToast && prevMetadata.raised && !metadata.raised) {
+      if (existingToast && !changedAttributes?.handRaisedAt) {
         toastQueue.close(existingToast.key)
         return
       }
 
-      if (!existingToast && !prevMetadata.raised && metadata.raised) {
+      if (!existingToast && !!changedAttributes?.handRaisedAt) {
         triggerNotificationSound(NotificationType.HandRaised)
         toastQueue.add(
           {
@@ -190,10 +200,13 @@ export const MainNotificationToast = () => {
       }
     }
 
-    room.on(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
+    room.on(RoomEvent.ParticipantAttributesChanged, handleNotificationReceived)
 
     return () => {
-      room.off(RoomEvent.ParticipantMetadataChanged, handleNotificationReceived)
+      room.off(
+        RoomEvent.ParticipantAttributesChanged,
+        handleNotificationReceived
+      )
     }
   }, [room, triggerNotificationSound])
 

src/frontend/src/features/notifications/NotificationPayload.ts

@@ -4,5 +4,6 @@ export interface NotificationPayload {
   type: NotificationType
   data?: {
     emoji?: string
+    removedSources?: string[]
   }
 }

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

@@ -13,4 +13,5 @@ export enum NotificationType {
   ScreenRecordingStopped = 'screenRecordingStopped',
   ScreenRecordingLimitReached = 'screenRecordingLimitReached',
   RecordingSaving = 'recordingSaving',
+  PermissionsRemoved = 'permissionsRemoved',
 }

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

@@ -38,7 +38,7 @@ export interface ToastProps {
   state: ToastState<ToastData>
 }
 
-export function Toast({ state, ...props }: ToastProps) {
+export function Toast({ state, ...props }: Readonly<ToastProps>) {
   const ref = useRef(null)
   const { toastProps, contentProps, closeButtonProps } = useToast(
     props,

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

@@ -6,7 +6,7 @@ import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 import { NotificationType } from '../NotificationType'
 
-export function ToastAnyRecording({ state, ...props }: ToastProps) {
+export function ToastAnyRecording({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)

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

@@ -19,7 +19,7 @@ const ClickableToast = styled(RACButton, {
   },
 })
 
-export function ToastJoined({ state, ...props }: ToastProps) {
+export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 
-export function ToastLowerHand({ state, ...props }: ToastProps) {
+export function ToastLowerHand({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', { keyPrefix: 'lowerHand' })
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)

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

@@ -9,7 +9,10 @@ import { Button as RACButton } from 'react-aria-components'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 
-export function ToastMessageReceived({ state, ...props }: ToastProps) {
+export function ToastMessageReceived({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps } = useToast(props, state, ref)

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

@@ -5,7 +5,7 @@ import { StyledToastContainer, ToastProps } from './Toast'
 import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 
-export function ToastMuted({ state, ...props }: ToastProps) {
+export function ToastMuted({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)

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

@@ -0,0 +1,52 @@
+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'
+
+export function ToastPermissionsRemoved({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
+  const { t } = useTranslation('notifications', {
+    keyPrefix: 'permissionsRemoved',
+  })
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+
+  const key = useMemo(() => {
+    const sources = props.toast.content.removedSources
+
+    if (!Array.isArray(sources) || sources.length === 0) {
+      return undefined
+    }
+
+    if (sources.length === 1) {
+      return sources[0]
+    }
+
+    if (sources.length === 2 && sources.includes('screen_share')) {
+      return 'screen_share'
+    }
+
+    return undefined
+  }, [props.toast.content.removedSources])
+
+  if (!participant || !key) return null
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t(key)}
+      </HStack>
+    </StyledToastContainer>
+  )
+}

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

@@ -9,7 +9,7 @@ import { RiCloseLine, RiHand } from '@remixicon/react'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 
-export function ToastRaised({ state, ...props }: ToastProps) {
+export function ToastRaised({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(

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

@@ -9,7 +9,10 @@ import { useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { RecordingMode } from '@/features/recording'
 
-export function ToastRecordingSaving({ state, ...props }: ToastProps) {
+export function ToastRecordingSaving({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', { keyPrefix: 'recordingSave' })
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)

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

@@ -11,6 +11,7 @@ import { ToastMessageReceived } from './ToastMessageReceived'
 import { ToastLowerHand } from './ToastLowerHand'
 import { ToastAnyRecording } from './ToastAnyRecording'
 import { ToastRecordingSaving } from './ToastRecordingSaving'
+import { ToastPermissionsRemoved } from './ToastPermissionsRemoved'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -30,6 +31,11 @@ const renderToast = (
     case NotificationType.ParticipantMuted:
       return <ToastMuted key={toast.key} toast={toast} state={state} />
 
+    case NotificationType.PermissionsRemoved:
+      return (
+        <ToastPermissionsRemoved key={toast.key} toast={toast} state={state} />
+      )
+
     case NotificationType.MessageReceived:
       return (
         <ToastMessageReceived key={toast.key} toast={toast} state={state} />

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

@@ -23,6 +23,8 @@ import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
 import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
+import humanizeDuration from 'humanize-duration'
+import i18n from 'i18next'
 
 export const ScreenRecordingSidePanel = () => {
   const { data } = useConfig()
@@ -189,7 +191,7 @@ export const ScreenRecordingSidePanel = () => {
               </H>
               <Text
                 variant="note"
-                wrap={'pretty'}
+                wrap="balance"
                 centered
                 className={css({
                   textStyle: 'sm',
@@ -198,7 +200,18 @@ export const ScreenRecordingSidePanel = () => {
                   marginTop: '0.25rem',
                 })}
               >
-                {t('start.body')} <br />{' '}
+                {t('start.body', {
+                  duration_message: data?.recording?.max_duration
+                    ? t('durationMessage', {
+                        max_duration: humanizeDuration(
+                          data?.recording?.max_duration,
+                          {
+                            language: i18n.language,
+                          }
+                        ),
+                      })
+                    : '',
+                })}{' '}
                 {data?.support?.help_article_recording && (
                   <A href={data.support.help_article_recording} target="_blank">
                     {t('start.linkMore')}

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

@@ -25,6 +25,8 @@ import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
 import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
+import humanizeDuration from 'humanize-duration'
+import i18n from 'i18next'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
@@ -263,7 +265,7 @@ export const TranscriptSidePanel = () => {
                   </H>
                   <Text
                     variant="note"
-                    wrap={'pretty'}
+                    wrap="balance"
                     centered
                     className={css({
                       textStyle: 'sm',
@@ -272,7 +274,18 @@ export const TranscriptSidePanel = () => {
                       marginTop: '0.25rem',
                     })}
                   >
-                    {t('start.body')} <br />{' '}
+                    {t('start.body', {
+                      duration_message: data?.recording?.max_duration
+                        ? t('durationMessage', {
+                            max_duration: humanizeDuration(
+                              data?.recording?.max_duration,
+                              {
+                                language: i18n.language,
+                              }
+                            ),
+                          })
+                        : '',
+                    })}{' '}
                     {data?.support?.help_article_transcript && (
                       <A
                         href={data.support.help_article_transcript}

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

@@ -19,6 +19,6 @@ export type ApiRoom = {
   access_level: ApiAccessLevel
   livekit?: ApiLiveKit
   configuration?: {
-    [key: string]: string | number | boolean
+    [key: string]: string | number | boolean | string[]
   }
 }

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

@@ -0,0 +1,27 @@
+import { Participant } from 'livekit-client'
+import { fetchApi } from '@/api/fetchApi.ts'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+
+export const useLowerHandParticipant = () => {
+  const data = useRoomData()
+
+  const lowerHandParticipant = async (participant: Participant) => {
+    if (!data?.id) {
+      throw new Error('Room id is not available')
+    }
+
+    const newAttributes = {
+      ...participant.attributes,
+      handRaisedAt: '',
+    }
+
+    return await fetchApi(`rooms/${data.id}/update-participant/`, {
+      method: 'POST',
+      body: JSON.stringify({
+        participant_identity: participant.identity,
+        attributes: newAttributes,
+      }),
+    })
+  }
+  return { lowerHandParticipant }
+}

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

@@ -1,5 +1,5 @@
 import { Participant } from 'livekit-client'
-import { useLowerHandParticipant } from '@/features/rooms/livekit/api/lowerHandParticipant'
+import { useLowerHandParticipant } from './lowerHandParticipant'
 
 export const useLowerHandParticipants = () => {
   const { lowerHandParticipant } = useLowerHandParticipant()

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

@@ -1,12 +1,11 @@
 import { Participant, Track } from 'livekit-client'
 import Source = Track.Source
-import { fetchServerApi } from './fetchServerApi'
-import { buildServerApiUrl } from './buildServerApiUrl'
-import { useRoomData } from '../hooks/useRoomData'
+import { useRoomData } from '../livekit/hooks/useRoomData'
 import {
   useNotifyParticipants,
   NotificationType,
 } from '@/features/notifications'
+import { fetchApi } from '@/api/fetchApi'
 
 export const useMuteParticipant = () => {
   const data = useRoomData()
@@ -14,34 +13,25 @@ export const useMuteParticipant = () => {
   const { notifyParticipants } = useNotifyParticipants()
 
   const muteParticipant = async (participant: Participant) => {
-    if (!data || !data?.livekit) {
-      throw new Error('Room data is not available')
+    if (!data?.id) {
+      throw new Error('Room id is not available')
     }
     const trackSid = participant.getTrackPublication(
       Source.Microphone
     )?.trackSid
 
     if (!trackSid) {
-      throw new Error('Missing audio track')
+      return
     }
 
     try {
-      const response = await fetchServerApi(
-        buildServerApiUrl(
-          data.livekit.url,
-          'twirp/livekit.RoomService/MutePublishedTrack'
-        ),
-        data.livekit.token,
-        {
-          method: 'POST',
-          body: JSON.stringify({
-            room: data.livekit.room,
-            identity: participant.identity,
-            muted: true,
-            track_sid: trackSid,
-          }),
-        }
-      )
+      const response = await fetchApi(`rooms/${data.id}/mute-participant/`, {
+        method: 'POST',
+        body: JSON.stringify({
+          participant_identity: participant.identity,
+          track_sid: trackSid,
+        }),
+      })
 
       await notifyParticipants({
         type: NotificationType.ParticipantMuted,

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

@@ -0,0 +1,19 @@
+import { Participant } from 'livekit-client'
+import { useMuteParticipant } from './muteParticipant'
+
+export const useMuteParticipants = () => {
+  const { muteParticipant } = useMuteParticipant()
+
+  const muteParticipants = (participants: Array<Participant>) => {
+    try {
+      const promises = participants.map((participant) =>
+        muteParticipant(participant)
+      )
+      return Promise.all(promises)
+    } catch (error) {
+      console.error('An error occurred while muting participants :', error)
+      throw new Error('An error occurred while muting participants.')
+    }
+  }
+  return { muteParticipants }
+}

src/frontend/src/features/rooms/api/patchRoom.tsx

@@ -5,7 +5,7 @@ import { ApiError } from '@/api/ApiError'
 
 export type PatchRoomParams = {
   roomId: string
-  room: Pick<ApiRoom, 'configuration' | 'access_level'>
+  room: Partial<Pick<ApiRoom, 'configuration' | 'access_level'>>
 }
 
 export const patchRoom = ({ roomId, room }: PatchRoomParams) => {

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

@@ -0,0 +1,21 @@
+import { Participant } from 'livekit-client'
+import { useRoomData } from '../livekit/hooks/useRoomData'
+import { fetchApi } from '@/api/fetchApi'
+
+export const useRemoveParticipant = () => {
+  const data = useRoomData()
+
+  const removeParticipant = async (participant: Participant) => {
+    if (!data?.id) {
+      throw new Error('Room id is not available')
+    }
+
+    return fetchApi(`rooms/${data.id}/remove-participant/`, {
+      method: 'POST',
+      body: JSON.stringify({
+        participant_identity: participant.identity,
+      }),
+    })
+  }
+  return { removeParticipant }
+}

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

@@ -0,0 +1,41 @@
+import { Participant, Track } from 'livekit-client'
+import { fetchApi } from '@/api/fetchApi'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import Source = Track.Source
+
+export const useParticipantPermissions = () => {
+  const data = useRoomData()
+
+  const updateParticipantPermissions = async (
+    participant: Participant,
+    sources: Array<Source>
+  ) => {
+    if (!data?.id) {
+      throw new Error('Room id is not available')
+    }
+
+    const newPermissions = {
+      can_subscribe: participant.permissions?.canSubscribe,
+      can_publish_data: participant.permissions?.canPublishData,
+      can_update_metadata: participant.permissions?.canUpdateMetadata,
+      can_subscribe_metrics: participant.permissions?.canSubscribeMetrics,
+      can_publish: sources.length > 0,
+      can_publish_sources: sources.map((source) => source.toUpperCase()),
+    }
+
+    try {
+      return fetchApi(`rooms/${data.id}/update-participant/`, {
+        method: 'POST',
+        body: JSON.stringify({
+          participant_identity: participant.identity,
+          permission: newPermissions,
+        }),
+      })
+    } catch (error) {
+      console.error(
+        `Failed to update participant's permissions ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      )
+    }
+  }
+  return { updateParticipantPermissions }
+}

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

@@ -0,0 +1,23 @@
+import { Participant, Track } from 'livekit-client'
+import { useParticipantPermissions } from './updateParticipantPermissions'
+type Source = Track.Source
+
+export const useUpdateParticipantsPermissions = () => {
+  const { updateParticipantPermissions } = useParticipantPermissions()
+
+  const updateParticipantsPermissions = (
+    participants: Array<Participant>,
+    sources: Array<Source>
+  ) => {
+    try {
+      const promises = participants.map((participant) =>
+        updateParticipantPermissions(participant, sources)
+      )
+      return Promise.all(promises)
+    } catch (error) {
+      console.error('An error occurred while updating permissions :', error)
+      throw new Error('An error occurred while updating permissions.')
+    }
+  }
+  return { updateParticipantsPermissions }
+}

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

@@ -1,12 +1,18 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom } from '@livekit/components-react'
+import {
+  LiveKitRoom,
+  usePersistentUserChoices,
+} from '@livekit/components-react'
 import {
   DisconnectReason,
   MediaDeviceFailure,
   Room,
   RoomOptions,
+  supportsAdaptiveStream,
+  supportsDynacast,
+  VideoPresets,
 } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -18,29 +24,38 @@ import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
 import { VideoConference } from '../livekit/prefabs/VideoConference'
-import posthog from 'posthog-js'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
 import { navigateTo } from '@/navigation/navigateTo'
 import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
+import { usePostHog } from 'posthog-js/react'
+import { useConfig } from '@/api/useConfig'
+import { isFireFox } from '@/utils/livekit'
 
 export const Conference = ({
   roomId,
-  userConfig,
   initialRoomData,
   mode = 'join',
 }: {
   roomId: string
-  userConfig: LocalUserChoices
   mode?: 'join' | 'create'
   initialRoomData?: ApiRoom
 }) => {
+  const posthog = usePostHog()
+  const { data: apiConfig } = useConfig()
+
+  const { userChoices: userConfig } = usePersistentUserChoices() as {
+    userChoices: LocalUserChoices
+  }
+
   useEffect(() => {
     posthog.capture('visit-room', { slug: roomId })
-  }, [roomId])
+  }, [roomId, posthog])
   const fetchKey = [keys.room, roomId]
 
+  const [isConnectionWarmedUp, setIsConnectionWarmedUp] = useState(false)
+
   const {
     mutateAsync: createRoom,
     status: createStatus,
@@ -72,25 +87,86 @@ export const Conference = ({
     retry: false,
   })
 
+  const isAdaptiveStreamSupported = supportsAdaptiveStream()
+  const isDynacastSupported = supportsDynacast()
+
   const roomOptions = useMemo((): RoomOptions => {
     return {
-      adaptiveStream: true,
-      dynacast: true,
+      adaptiveStream: isAdaptiveStreamSupported,
+      dynacast: isDynacastSupported,
       publishDefaults: {
         videoCodec: 'vp9',
       },
       videoCaptureDefaults: {
         deviceId: userConfig.videoDeviceId ?? undefined,
+        resolution: userConfig.videoPublishResolution
+          ? VideoPresets[userConfig.videoPublishResolution].resolution
+          : undefined,
       },
       audioCaptureDefaults: {
         deviceId: userConfig.audioDeviceId ?? undefined,
       },
+      audioOutput: {
+        deviceId: userConfig.audioOutputDeviceId ?? undefined,
+      },
     }
     // do not rely on the userConfig object directly as its reference may change on every render
-  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])
+  }, [
+    userConfig.videoDeviceId,
+    userConfig.videoPublishResolution,
+    userConfig.audioDeviceId,
+    userConfig.audioOutputDeviceId,
+    isAdaptiveStreamSupported,
+    isDynacastSupported,
+  ])
 
   const room = useMemo(() => new Room(roomOptions), [roomOptions])
 
+  useEffect(() => {
+    /**
+     * Warm up connection to LiveKit server before joining room
+     * This prefetch helps reduce initial connection latency by establishing
+     * an early HTTP connection to the WebRTC signaling server
+     *
+     * It should cache DNS and TLS keys.
+     */
+    const prepareConnection = async () => {
+      if (!apiConfig || isConnectionWarmedUp) return
+      await room.prepareConnection(apiConfig.livekit.url)
+
+      if (isFireFox() && apiConfig.livekit.enable_firefox_proxy_workaround) {
+        try {
+          const wssUrl =
+            apiConfig.livekit.url
+              .replace('https://', 'wss://')
+              .replace(/\/$/, '') + '/rtc'
+
+          /**
+           * FIREFOX + PROXY WORKAROUND:
+           *
+           * Issue: On Firefox behind proxy configurations, WebSocket signaling fails to establish.
+           * Symptom: Client receives HTTP 200 instead of expected 101 (Switching Protocols).
+           * Root Cause: Certificate/security issue where the initial request is considered unsecure.
+           *
+           * Solution: Pre-establish a WebSocket connection to the signaling server, which fails.
+           * This "primes" the connection, allowing subsequent WebSocket establishments to work correctly.
+           *
+           * Note: This issue is reproducible on LiveKit's demo app.
+           * Reference: livekit-examples/meet/issues/466
+           */
+          const ws = new WebSocket(wssUrl)
+          // 401 unauthorized response is expected
+          ws.onerror = () => ws.readyState <= 1 && ws.close()
+        } catch (e) {
+          console.debug('Firefox WebSocket workaround failed.', e)
+        }
+      }
+
+      setIsConnectionWarmedUp(true)
+    }
+    prepareConnection()
+  }, [room, apiConfig, isConnectionWarmedUp])
+
   const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
   const [mediaDeviceError, setMediaDeviceError] = useState<{
     error: MediaDeviceFailure | null
@@ -100,6 +176,20 @@ export const Conference = ({
     kind: null,
   })
 
+  /*
+   * Ensure stable WebSocket connection URL. This is critical for legacy browser compatibility
+   * (Firefox <124, Chrome <125, Edge <125) where HTTPS URLs in WebSocket() constructor
+   *  may fail - the force_wss_protocol flag allows explicit WSS protocol conversion
+   */
+  const serverUrl = useMemo(() => {
+    const livekit_url = apiConfig?.livekit.url
+    if (!livekit_url) return
+    if (apiConfig?.livekit.force_wss_protocol) {
+      return livekit_url.replace('https://', 'wss://')
+    }
+    return livekit_url
+  }, [apiConfig?.livekit])
+
   const { t } = useTranslation('rooms')
   if (isCreateError) {
     // this error screen should be replaced by a proper waiting room for anonymous user.
@@ -123,9 +213,9 @@ export const Conference = ({
       <Screen header={false} footer={false}>
         <LiveKitRoom
           room={room}
-          serverUrl={data?.livekit?.url}
+          serverUrl={serverUrl}
           token={data?.livekit?.token}
-          connect={true}
+          connect={isConnectionWarmedUp}
           audio={userConfig.audioEnabled}
           video={
             userConfig.videoEnabled && {
@@ -138,6 +228,9 @@ export const Conference = ({
           className={css({
             backgroundColor: 'primaryDark.50 !important',
           })}
+          onError={(e) => {
+            posthog.captureException(e)
+          }}
           onDisconnected={(e) => {
             if (e == DisconnectReason.CLIENT_INITIATED) {
               navigateTo('feedback', { duplicateIdentity: false })
@@ -156,7 +249,6 @@ export const Conference = ({
             <InviteDialog
               isOpen={showInviteDialog}
               onOpenChange={setShowInviteDialog}
-              roomId={roomId}
               onClose={() => setShowInviteDialog(false)}
             />
           )}

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

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { Div, Button, type DialogProps, P } from '@/primitives'
+import { Div, Button, type DialogProps, P, Bold } from '@/primitives'
 import { HStack, styled, VStack } from '@/styled-system/jsx'
 import { Heading, Dialog } from 'react-aria-components'
 import { Text, text } from '@/primitives/Text'
@@ -10,8 +10,13 @@ import {
   RiFileCopyLine,
   RiSpam2Fill,
 } from '@remixicon/react'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { css } from '@/styled-system/css'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
+import { useTelephony } from '@/features/rooms/livekit/hooks/useTelephony'
+import { formatPinCode } from '@/features/rooms/utils/telephony'
+import { useCopyRoomToClipboard } from '@/features/rooms/livekit/hooks/useCopyRoomToClipboard'
 
 // fixme - extract in a proper primitive this dialog without overlay
 const StyledRACDialog = styled(Dialog, {
@@ -34,24 +39,27 @@ const StyledRACDialog = styled(Dialog, {
   },
 })
 
-export const InviteDialog = ({
-  roomId,
-  ...dialogProps
-}: { roomId: string } & Omit<DialogProps, 'title'>) => {
-  const { t } = useTranslation('rooms')
-  const roomUrl = getRouteUrl('room', roomId)
+export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
-  const [isCopied, setIsCopied] = useState(false)
+  const roomData = useRoomData()
+  const roomUrl = getRouteUrl('room', roomData?.slug)
 
-  useEffect(() => {
-    if (isCopied) {
-      const timeout = setTimeout(() => setIsCopied(false), 3000)
-      return () => clearTimeout(timeout)
-    }
-  }, [isCopied])
+  const telephony = useTelephony()
+
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && roomData?.pin_code
+  }, [telephony?.enabled, roomData?.pin_code])
+
+  const {
+    isCopied,
+    copyRoomToClipboard,
+    isRoomUrlCopied,
+    copyRoomUrlToClipboard,
+  } = useCopyRoomToClipboard(roomData)
 
   return (
-    <StyledRACDialog {...dialogProps}>
+    <StyledRACDialog {...props}>
       {({ close }) => (
         <VStack
           alignItems="left"
@@ -60,7 +68,7 @@ export const InviteDialog = ({
           style={{ maxWidth: '100%', overflow: 'hidden' }}
         >
           <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
-            {t('shareDialog.heading')}
+            {t('heading')}
           </Heading>
           <Div position="absolute" top="5" right="5">
             <Button
@@ -68,7 +76,7 @@ export const InviteDialog = ({
               variant="tertiaryText"
               size="xs"
               onPress={() => {
-                dialogProps.onClose?.()
+                props.onClose?.()
                 close()
               }}
               aria-label={t('closeDialog')}
@@ -76,49 +84,125 @@ export const InviteDialog = ({
               <RiCloseLine />
             </Button>
           </Div>
-          <P>{t('shareDialog.description')}</P>
-          <Button
-            variant={isCopied ? 'success' : 'tertiary'}
-            fullWidth
-            aria-label={t('shareDialog.copy')}
-            onPress={() => {
-              navigator.clipboard.writeText(roomUrl)
-              setIsCopied(true)
-            }}
-            data-attr="share-dialog-copy"
-          >
-            {isCopied ? (
-              <>
-                <RiCheckLine size={24} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copied')}
-              </>
-            ) : (
-              <>
-                <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
-                {t('shareDialog.copyButton')}
-              </>
-            )}
-          </Button>
-          <HStack>
+          <P>{t('description')}</P>
+          {isTelephonyReadyForUse ? (
             <div
               className={css({
-                backgroundColor: 'primary.200',
-                borderRadius: '50%',
-                padding: '4px',
-                marginTop: '1rem',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                marginTop: '0.5rem',
+                gap: '1rem',
+                overflow: 'hidden',
               })}
             >
-              <RiSpam2Fill
-                size={22}
+              <div
                 className={css({
-                  fill: 'primary.500',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                 })}
-              />
+              >
+                <Text as="p" wrap="pretty">
+                  {roomUrl?.replace(/^https?:\/\//, '')}
+                </Text>
+                {isTelephonyReadyForUse && roomUrl && (
+                  <Button
+                    variant={isRoomUrlCopied ? 'success' : 'tertiaryText'}
+                    square
+                    size={'sm'}
+                    onPress={copyRoomUrlToClipboard}
+                    aria-label={t('copyUrl')}
+                    tooltip={t('copyUrl')}
+                  >
+                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                  </Button>
+                )}
+              </div>
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                })}
+              >
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.call')}</Bold> ({telephony?.country}){' '}
+                  {telephony?.internationalPhoneNumber}
+                </Text>
+                <Text as="p" wrap="pretty">
+                  <Bold>{t('phone.pinCode')}</Bold>{' '}
+                  {formatPinCode(roomData?.pin_code)}
+                </Text>
+              </div>
+              <Button
+                variant={isCopied ? 'success' : 'secondaryText'}
+                size="sm"
+                fullWidth
+                aria-label={t('copy')}
+                style={{
+                  justifyContent: 'start',
+                }}
+                onPress={copyRoomToClipboard}
+                data-attr="share-dialog-copy"
+              >
+                {isCopied ? (
+                  <>
+                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    {t('copied')}
+                  </>
+                ) : (
+                  <>
+                    <RiFileCopyLine
+                      style={{ marginRight: '6px', minWidth: '18px' }}
+                    />
+                    {t('copy')}
+                  </>
+                )}
+              </Button>
             </div>
-            <Text variant="sm" style={{ marginTop: '1rem' }}>
-              {t('shareDialog.permissions')}
-            </Text>
-          </HStack>
+          ) : (
+            <Button
+              variant={isCopied ? 'success' : 'tertiary'}
+              fullWidth
+              aria-label={t('copy')}
+              onPress={copyRoomToClipboard}
+              data-attr="share-dialog-copy"
+            >
+              {isCopied ? (
+                <>
+                  <RiCheckLine size={24} style={{ marginRight: '8px' }} />
+                  {t('copied')}
+                </>
+              ) : (
+                <>
+                  <RiFileCopyLine size={24} style={{ marginRight: '8px' }} />
+                  {t('copyUrl')}
+                </>
+              )}
+            </Button>
+          )}
+          {roomData?.access_level === ApiAccessLevel.PUBLIC && (
+            <HStack>
+              <div
+                className={css({
+                  backgroundColor: 'primary.200',
+                  borderRadius: '50%',
+                  padding: '4px',
+                  marginTop: '1rem',
+                })}
+              >
+                <RiSpam2Fill
+                  size={22}
+                  className={css({
+                    fill: 'primary.500',
+                  })}
+                />
+              </div>
+              <Text variant="sm" style={{ marginTop: '1rem' }}>
+                {t('permissions')}
+              </Text>
+            </HStack>
+          )}
         </VStack>
       )}
     </StyledRACDialog>

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

@@ -2,19 +2,26 @@ import { useTranslation } from 'react-i18next'
 import { usePreviewTracks } from '@livekit/components-react'
 import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { LocalVideoTrack, Track } from 'livekit-client'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  createLocalVideoTrack,
+  createLocalAudioTrack,
+  LocalAudioTrack,
+  LocalVideoTrack,
+  Track,
+} from 'livekit-client'
 import { H } from '@/primitives/H'
-import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
 import { Field } from '@/primitives/Field'
 import { Button, Dialog, Text, Form } from '@/primitives'
-import { HStack, VStack } from '@/styled-system/jsx'
+import { VStack } from '@/styled-system/jsx'
 import { Heading } from 'react-aria-components'
 import { RiImageCircleAiFill } from '@remixicon/react'
 import {
   EffectsConfiguration,
   EffectsConfigurationProps,
 } from '../livekit/components/effects/EffectsConfiguration'
+import { SelectDevice } from '../livekit/components/controls/Device/SelectDevice'
+import { ToggleDevice } from '../livekit/components/controls/Device/ToggleDevice'
 import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { isMobileBrowser } from '@livekit/components-core'
@@ -27,7 +34,11 @@ import { ApiLobbyStatus, ApiRequestEntry } from '../api/requestEntry'
 import { Spinner } from '@/primitives/Spinner'
 import { ApiAccessLevel } from '../api/ApiRoom'
 import { useLoginHint } from '@/hooks/useLoginHint'
-import { LocalUserChoices } from '@/stores/userChoices'
+import { openPermissionsDialog } from '@/stores/permissions'
+import { useResolveInitiallyDefaultDeviceId } from '../livekit/hooks/useResolveInitiallyDefaultDeviceId'
+import { isSafari } from '@/utils/livekit'
+import type { LocalUserChoices } from '@/stores/userChoices'
+import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
@@ -72,45 +83,23 @@ const Effects = ({
         </Text>
         <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
       </Dialog>
-      <div
-        className={css({
-          position: 'absolute',
-          right: 0,
-          bottom: '0',
-          padding: '1rem',
-          zIndex: '1',
-        })}
+      <Button
+        variant="whiteCircle"
+        onPress={openDialog}
+        tooltip={t('description')}
+        aria-label={t('description')}
       >
-        <Button
-          variant="whiteCircle"
-          onPress={openDialog}
-          tooltip={t('description')}
-          aria-label={t('description')}
-        >
-          <RiImageCircleAiFill size={24} />
-        </Button>
-      </div>
-      <div
-        className={css({
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: '20%',
-          backgroundImage:
-            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
-          borderBottomRadius: '1rem',
-        })}
-      />
+        <RiImageCircleAiFill size={24} />
+      </Button>
     </>
   )
 }
 
 export const Join = ({
-  onSubmit,
+  enterRoom,
   roomId,
 }: {
-  onSubmit: (choices: LocalUserChoices) => void
+  enterRoom: () => void
   roomId: string
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
@@ -120,11 +109,13 @@ export const Join = ({
       audioEnabled,
       videoEnabled,
       audioDeviceId,
+      audioOutputDeviceId,
       videoDeviceId,
       processorSerialized,
       username,
     },
     saveAudioInputEnabled,
+    saveAudioOutputDeviceId,
     saveVideoInputEnabled,
     saveAudioInputDeviceId,
     saveVideoInputDeviceId,
@@ -132,28 +123,43 @@ export const Join = ({
     saveProcessorSerialized,
   } = usePersistentUserChoices()
 
-  const [processor, setProcessor] = useState(
-    BackgroundProcessorFactory.deserializeProcessor(processorSerialized)
-  )
+  const initialUserChoices = useRef<LocalUserChoices | null>(null)
 
-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [
-    processor,
-    saveProcessorSerialized,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    JSON.stringify(processor?.serialize()),
-  ])
+  if (initialUserChoices.current === null) {
+    initialUserChoices.current = {
+      audioEnabled,
+      videoEnabled,
+      audioDeviceId,
+      audioOutputDeviceId,
+      videoDeviceId,
+      processorSerialized,
+      username,
+    }
+  }
 
   const tracks = usePreviewTracks(
     {
-      audio: { deviceId: audioDeviceId },
-      video: { deviceId: videoDeviceId },
+      audio: !!initialUserChoices.current &&
+        initialUserChoices.current?.audioEnabled && {
+          deviceId: initialUserChoices.current.audioDeviceId,
+        },
+      video: !!initialUserChoices.current &&
+        initialUserChoices.current?.videoEnabled && {
+          deviceId: initialUserChoices.current.videoDeviceId,
+          processor: BackgroundProcessorFactory.deserializeProcessor(
+            initialUserChoices.current.processorSerialized
+          ),
+        },
     },
     onError
   )
 
-  const videoTrack = useMemo(
+  const [dynamicVideoTrack, setDynamicVideoTrack] =
+    useState<LocalVideoTrack | null>(null)
+  const [dynamicAudioTrack, setDynamicAudioTrack] =
+    useState<LocalAudioTrack | null>(null)
+
+  const previewVideoTrack = useMemo(
     () =>
       tracks?.filter(
         (track) => track.kind === Track.Kind.Video
@@ -161,56 +167,129 @@ export const Join = ({
     [tracks]
   )
 
-  const audioTrack = useMemo(
+  const previewAudioTrack = useMemo(
     () =>
       tracks?.filter(
         (track) => track.kind === Track.Kind.Audio
-      )[0] as LocalVideoTrack,
+      )[0] as LocalAudioTrack,
     [tracks]
   )
 
+  /*
+   * Dynamic track creation strategy: Only create a dynamic track if the user initially disabled audio/video
+   * but now wants to enable it. This is a "just-in-time" acquisition pattern where we create the track
+   * on-demand. We avoid creating tracks when the user explicitly requested them to be disabled.
+   */
+  useEffect(() => {
+    const createVideoTrack = async () => {
+      try {
+        const track = await createLocalVideoTrack({
+          deviceId: { exact: videoDeviceId },
+          processor:
+            BackgroundProcessorFactory.deserializeProcessor(
+              processorSerialized
+            ),
+        })
+        setDynamicVideoTrack(track)
+      } catch (error) {
+        onError(error as Error)
+      }
+    }
+
+    if (
+      videoEnabled &&
+      !initialUserChoices.current?.videoEnabled &&
+      !previewVideoTrack &&
+      !dynamicVideoTrack
+    ) {
+      createVideoTrack()
+    }
+  }, [
+    videoEnabled,
+    videoDeviceId,
+    processorSerialized,
+    previewVideoTrack,
+    dynamicVideoTrack,
+  ])
+
+  useEffect(() => {
+    const createAudioTrack = async () => {
+      try {
+        const track = await createLocalAudioTrack({
+          deviceId: { exact: audioDeviceId },
+        })
+        setDynamicAudioTrack(track)
+      } catch (error) {
+        onError(error as Error)
+      }
+    }
+    if (
+      audioEnabled &&
+      !initialUserChoices.current?.audioEnabled &&
+      !previewAudioTrack &&
+      !dynamicAudioTrack
+    ) {
+      createAudioTrack()
+    }
+  }, [audioEnabled, audioDeviceId, previewAudioTrack, dynamicAudioTrack])
+
+  // Cleanup dynamic tracks
+  useEffect(() => {
+    return () => {
+      dynamicVideoTrack?.stop()
+    }
+  }, [dynamicVideoTrack])
+  useEffect(() => {
+    return () => {
+      dynamicAudioTrack?.stop()
+    }
+  }, [dynamicAudioTrack])
+
+  // Final tracks (dynamic takes precedence over preview)
+  const videoTrack = dynamicVideoTrack || previewVideoTrack
+  const audioTrack = dynamicAudioTrack || previewAudioTrack
+
+  // LiveKit by default populates device choices with "default" value.
+  // Instead, use the current device id used by the preview track as a default
+  useResolveInitiallyDefaultDeviceId(
+    audioDeviceId,
+    audioTrack,
+    saveAudioInputDeviceId
+  )
+  useResolveInitiallyDefaultDeviceId(
+    videoDeviceId,
+    videoTrack,
+    saveVideoInputDeviceId
+  )
+
   const videoEl = useRef(null)
+  const isVideoInitiated = useRef(false)
 
   useEffect(() => {
     const videoElement = videoEl.current as HTMLVideoElement | null
 
     const handleVideoLoaded = () => {
       if (videoElement) {
+        isVideoInitiated.current = true
         videoElement.style.opacity = '1'
       }
     }
 
     if (videoElement && videoTrack && videoEnabled) {
-      videoTrack.unmute()
       videoTrack.attach(videoElement)
       videoElement.addEventListener('loadedmetadata', handleVideoLoaded)
     }
 
     return () => {
       videoTrack?.detach()
-      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
+      if (videoElement) {
+        videoElement.removeEventListener('loadedmetadata', handleVideoLoaded)
+        videoElement.style.opacity = '0'
+      }
+      isVideoInitiated.current = false
     }
   }, [videoTrack, videoEnabled])
 
-  const enterRoom = useCallback(() => {
-    onSubmit({
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      videoDeviceId,
-      username,
-      processorSerialized: processor?.serialize(),
-    })
-  }, [
-    onSubmit,
-    audioEnabled,
-    videoEnabled,
-    audioDeviceId,
-    videoDeviceId,
-    username,
-    processor,
-  ])
-
   // Room data strategy:
   // 1. Initial fetch is performed to check access and get LiveKit configuration
   // 2. Data remains valid for 6 hours to avoid unnecessary refetches
@@ -269,15 +348,43 @@ export const Join = ({
     enterRoom()
   }
 
-  // This hook is used to setup the persisted user choice processor on initialization.
-  // So it's on purpose that processor is not included in the deps.
-  // We just want to wait for the videoTrack to be loaded to apply the default processor.
-  useEffect(() => {
-    if (processor && videoTrack && !videoTrack.getProcessor()) {
-      videoTrack.setProcessor(processor)
+  const isCameraDeniedOrPrompted = useCannotUseDevice('videoinput')
+  const isMicrophoneDeniedOrPrompted = useCannotUseDevice('audioinput')
+
+  const hintMessage = useMemo(() => {
+    if (isCameraDeniedOrPrompted) {
+      return isMicrophoneDeniedOrPrompted
+        ? 'cameraAndMicNotGranted'
+        : 'cameraNotGranted'
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTrack])
+    if (!videoEnabled) {
+      return 'cameraDisabled'
+    }
+    if (!isVideoInitiated.current) {
+      return 'cameraStarting'
+    }
+    if (videoTrack && videoEnabled) {
+      return ''
+    }
+  }, [
+    videoTrack,
+    videoEnabled,
+    isCameraDeniedOrPrompted,
+    isMicrophoneDeniedOrPrompted,
+  ])
+
+  const permissionsButtonLabel = useMemo(() => {
+    if (!isMicrophoneDeniedOrPrompted && !isCameraDeniedOrPrompted) {
+      return null
+    }
+    if (isCameraDeniedOrPrompted && isMicrophoneDeniedOrPrompted) {
+      return 'cameraAndMicNotGranted'
+    }
+    if (isCameraDeniedOrPrompted && !isMicrophoneDeniedOrPrompted) {
+      return 'cameraNotGranted'
+    }
+    return null
+  }, [isMicrophoneDeniedOrPrompted, isCameraDeniedOrPrompted])
 
   const renderWaitingState = () => {
     switch (status) {
@@ -339,6 +446,7 @@ export const Join = ({
                 type="text"
                 onChange={saveUsername}
                 label={t('usernameLabel')}
+                aria-label={t('usernameLabel')}
                 defaultValue={username}
                 validate={(value) => !value && t('errors.usernameEmpty')}
                 wrapperProps={{
@@ -361,141 +469,315 @@ export const Join = ({
       <div
         className={css({
           display: 'flex',
-          alignItems: 'flex-start',
           justifyContent: 'center',
+          alignItems: 'center',
+          width: '100%',
+          flexDirection: 'column',
           flexGrow: 1,
+          gap: { base: '1rem', sm: '2rem', lg: '2rem' },
           lg: {
-            alignItems: 'center',
+            flexDirection: 'row',
           },
         })}
       >
         <div
           className={css({
             display: 'flex',
-            height: 'auto',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: '2rem',
-            padding: '0 2rem',
-            flexDirection: 'column',
-            minWidth: 0,
             width: '100%',
+            minWidth: 0,
+            maxWidth: '764px',
             lg: {
-              flexDirection: 'row',
-              width: 'auto',
-              height: '570px',
+              height: '540px',
+              flexGrow: 1,
             },
           })}
         >
           <div
             className={css({
-              width: '100%',
-              lg: {
-                width: '740px',
-              },
+              display: 'inline-flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              minWidth: 0,
+              flexShrink: { base: 0, sm: 1 },
             })}
           >
             <div
               className={css({
                 borderRadius: '1rem',
+                flex: '0 1',
+                minWidth: '320px',
+                margin: {
+                  base: '0.5rem',
+                  sm: '1rem',
+                  lg: '1rem 0.5rem 1rem 1rem',
+                },
                 overflow: 'hidden',
                 position: 'relative',
-                width: '100%',
-                height: 'auto',
-                aspectRatio: 16 / 9,
-                '--tw-shadow':
-                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
-                '--tw-shadow-colored':
-                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
-                boxShadow:
-                  'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
-                backgroundColor: 'black',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
               })}
             >
-              {videoTrack && videoEnabled ? (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
-                <video
-                  ref={videoEl}
-                  width="1280"
-                  height="720"
-                  className={css({
-                    display: 'block',
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transform: 'rotateY(180deg)',
-                    opacity: 0,
-                    transition: 'opacity 0.3s ease-in-out',
-                    borderRadius: '1rem',
-                  })}
-                  disablePictureInPicture
-                  disableRemotePlayback
-                />
-              ) : (
+              <div
+                className={css({
+                  position: 'absolute',
+                  top: 0,
+                  height: '5rem',
+                  width: '100%',
+                  backgroundImage:
+                    'linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0) 100%)',
+                  zIndex: 1,
+                })}
+              />
+              <div
+                className={css({
+                  position: 'absolute',
+                  bottom: 0,
+                  height: '5rem',
+                  width: '100%',
+                  backgroundImage:
+                    'linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0) 100%)',
+                  zIndex: 1,
+                })}
+              />
+              <div
+                className={css({
+                  position: 'relative',
+                  width: '100%',
+                  height: 'fit-content',
+                  aspectRatio: '16 / 9',
+                })}
+              >
                 <div
                   className={css({
+                    backgroundColor: 'black',
+                    position: 'absolute',
+                    boxSizing: 'border-box',
+                    top: 0,
                     width: '100%',
                     height: '100%',
-                    color: 'white',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
+                    overflow: 'hidden',
                   })}
                 >
-                  <p
+                  <div
+                    aria-label={t(
+                      `videoPreview.${videoEnabled ? 'enabled' : 'disabled'}`
+                    )}
+                    role="status"
                     className={css({
-                      fontSize: '24px',
-                      fontWeight: '300',
+                      position: 'absolute',
+                      top: 0,
+                      width: '100%',
                     })}
                   >
-                    {!videoEnabled && t('cameraDisabled')}
-                    {videoEnabled && !videoTrack && t('cameraStarting')}
-                  </p>
+                    <div
+                      className={css({
+                        width: '100%',
+                        height: 'auto',
+                        aspectRatio: '16 / 9',
+                        overflow: 'hidden',
+                        position: 'absolute',
+                        top: '-2px',
+                        left: '-2px',
+                        pointerEvents: 'none',
+                        transform: 'scale(1.02)',
+                      })}
+                    >
+                      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+                      <video
+                        ref={videoEl}
+                        width="1280"
+                        height="720"
+                        style={{
+                          display:
+                            !videoEnabled || isCameraDeniedOrPrompted
+                              ? 'none'
+                              : undefined,
+                        }}
+                        className={css({
+                          position: 'absolute',
+                          transform: 'rotateY(180deg)',
+                          opacity: 0,
+                          height: '100%',
+                          transition: 'opacity 0.3s ease-in-out',
+                          objectFit: 'cover',
+                        })}
+                        disablePictureInPicture
+                        disableRemotePlayback
+                      />
+                    </div>
+                  </div>
+                  <div
+                    role="alert"
+                    className={css({
+                      display: 'flex',
+                      flexDirection: 'column',
+                      height: '100%',
+                      width: '100%',
+                      justifyContent: 'center',
+                      textAlign: 'center',
+                      alignItems: 'center',
+                      padding: '0.24rem',
+                      boxSizing: 'border-box',
+                      gap: '1rem',
+                    })}
+                  >
+                    <p
+                      className={css({
+                        fontWeight: '400',
+                        fontSize: { base: '1rem', sm: '1.25rem', lg: '1.5rem' },
+                        textWrap: 'balance',
+                        color: 'white',
+                      })}
+                    >
+                      {hintMessage && t(hintMessage)}
+                    </p>
+                    {isCameraDeniedOrPrompted && (
+                      <Button
+                        size="sm"
+                        variant="tertiary"
+                        onPress={openPermissionsDialog}
+                      >
+                        {t(`permissionsButton.${permissionsButtonLabel}`)}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                <div
+                  className={css({
+                    position: 'absolute',
+                    bottom: '1rem',
+                    zIndex: '1',
+                    display: 'flex',
+                    gap: '1rem',
+                    justifyContent: 'center',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                  })}
+                >
+                  <ToggleDevice
+                    kind="audioinput"
+                    context="join"
+                    enabled={audioEnabled}
+                    toggle={async () => {
+                      saveAudioInputEnabled(!audioEnabled)
+                      if (audioEnabled) {
+                        await audioTrack?.mute()
+                      } else {
+                        await audioTrack?.unmute()
+                      }
+                    }}
+                  />
+                  <ToggleDevice
+                    kind="videoinput"
+                    context="join"
+                    enabled={videoEnabled}
+                    toggle={async () => {
+                      saveVideoInputEnabled(!videoEnabled)
+                      if (videoEnabled) {
+                        await videoTrack?.mute()
+                      } else {
+                        await videoTrack?.unmute()
+                      }
+                    }}
+                  />
+                </div>
+                <div
+                  className={css({
+                    position: 'absolute',
+                    right: '1rem',
+                    bottom: '1rem',
+                    zIndex: '1',
+                  })}
+                >
+                  <Effects
+                    videoTrack={videoTrack}
+                    onSubmit={(processor) =>
+                      saveProcessorSerialized(processor?.serialize())
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              className={css({
+                display: 'flex',
+                justifyContent: 'center',
+                gap: '2%',
+                width: '80%',
+                marginX: 'auto',
+              })}
+            >
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDevice
+                  kind="audioinput"
+                  id={audioDeviceId}
+                  onSubmit={async (id) => {
+                    try {
+                      saveAudioInputDeviceId(id)
+                      if (audioTrack) {
+                        await audioTrack.setDeviceId({ exact: id })
+                      }
+                    } catch (err) {
+                      console.error('Failed to switch microphone device', err)
+                    }
+                  }}
+                />
+              </div>
+              {!isSafari() && (
+                <div
+                  className={css({
+                    width: '30%',
+                  })}
+                >
+                  <SelectDevice
+                    kind="audiooutput"
+                    id={audioOutputDeviceId}
+                    onSubmit={saveAudioOutputDeviceId}
+                  />
                 </div>
               )}
-              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
+              <div
+                className={css({
+                  width: '30%',
+                })}
+              >
+                <SelectDevice
+                  kind="videoinput"
+                  id={videoDeviceId}
+                  onSubmit={async (id) => {
+                    try {
+                      saveVideoInputDeviceId(id)
+                      if (videoTrack) {
+                        await await videoTrack.setDeviceId({ exact: id })
+                      }
+                    } catch (err) {
+                      console.error('Failed to switch camera device', err)
+                    }
+                  }}
+                />
+              </div>
             </div>
-            <HStack justify="center" padding={1.5}>
-              <SelectToggleDevice
-                source={Track.Source.Microphone}
-                initialState={audioEnabled}
-                track={audioTrack}
-                initialDeviceId={audioDeviceId}
-                onChange={(enabled) => saveAudioInputEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  saveAudioInputDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-              <SelectToggleDevice
-                source={Track.Source.Camera}
-                initialState={videoEnabled}
-                track={videoTrack}
-                initialDeviceId={videoDeviceId}
-                onChange={(enabled) => saveVideoInputEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  saveVideoInputDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-            </HStack>
-          </div>
-          <div
-            className={css({
-              width: '100%',
-              flexShrink: 0,
-              padding: '0',
-              sm: {
-                width: '448px',
-                padding: '0 3rem 9rem 3rem',
-              },
-            })}
-          >
-            {renderWaitingState()}
           </div>
         </div>
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flex: '0 0 360px',
+            position: 'relative',
+            margin: '1rem 1rem 1rem 0.5rem',
+          })}
+        >
+          {renderWaitingState()}
+        </div>
       </div>
     </Screen>
   )

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

@@ -0,0 +1,112 @@
+import { useWatchPermissions } from '@/features/rooms/hooks/useWatchPermissions'
+import { css } from '@/styled-system/css'
+import { Dialog, H } from '@/primitives'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { useEffect, useMemo } from 'react'
+import { useSnapshot } from 'valtio'
+import { closePermissionsDialog, permissionsStore } from '@/stores/permissions'
+import { useTranslation } from 'react-i18next'
+import { injectIconIntoTranslation } from '@/utils/translation'
+import { isSafari } from '@/utils/livekit'
+
+/**
+ * Singleton component - ensures permissions sync runs only once across the app.
+ * WARNING: This component should only be instantiated once in the interface.
+ * Multiple instances may cause unexpected behavior or performance issues.
+ */
+export const Permissions = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'permissionErrorDialog' })
+
+  useWatchPermissions()
+
+  const permissions = useSnapshot(permissionsStore)
+
+  const permissionLabel = useMemo(() => {
+    if (permissions.isMicrophoneDenied && permissions.isCameraDenied) {
+      return 'cameraAndMicrophone'
+    } else if (permissions.isCameraDenied) {
+      return 'camera'
+    } else if (permissions.isMicrophoneDenied) {
+      return 'microphone'
+    } else {
+      return 'default'
+    }
+  }, [permissions])
+
+  const [descriptionBeforeIcon, descriptionAfterIcon] =
+    injectIconIntoTranslation(t('body.openMenu.others'))
+
+  useEffect(() => {
+    if (
+      permissions.isPermissionDialogOpen &&
+      permissions.isCameraGranted &&
+      permissions.isMicrophoneGranted
+    ) {
+      closePermissionsDialog()
+    }
+  }, [permissions])
+
+  const appTitle = `${import.meta.env.VITE_APP_TITLE}`
+
+  return (
+    <Dialog
+      isOpen={permissions.isPermissionDialogOpen}
+      role="dialog"
+      type="flex"
+      title=""
+      aria-label={t(`heading.${permissionLabel}`, {
+        appTitle,
+      })}
+      onClose={closePermissionsDialog}
+    >
+      <div
+        className={css({
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
+      >
+        <img
+          src="/assets/camera_mic_permission.svg"
+          alt=""
+          className={css({
+            minWidth: '290px',
+            minHeight: '290px',
+            maxWidth: '290px',
+          })}
+        />
+        <div
+          className={css({
+            maxWidth: '400px',
+          })}
+        >
+          <H lvl={2}>
+            {t(`heading.${permissionLabel}`, {
+              appTitle,
+            })}
+          </H>
+          <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
+            <li>
+              {isSafari() ? (
+                t('body.openMenu.safari', {
+                  appDomain: window.origin.replace('https://', ''),
+                })
+              ) : (
+                <>
+                  {descriptionBeforeIcon}
+                  <span
+                    style={{ display: 'inline-block', verticalAlign: 'middle' }}
+                  >
+                    <RiEqualizer2Line />
+                  </span>
+                  {descriptionAfterIcon}
+                </>
+              )}
+            </li>
+            <li>{t(`body.details.${permissionLabel}`)}</li>
+          </ol>
+        </div>
+      </div>
+    </Dialog>
+  )
+}

src/frontend/src/features/rooms/hooks/useWatchPermissions.ts

@@ -0,0 +1,160 @@
+import { useEffect } from 'react'
+import { permissionsStore } from '@/stores/permissions'
+import { isSafari } from '@/utils/livekit'
+
+const POLLING_TIME = 500
+
+export const useWatchPermissions = () => {
+  useEffect(() => {
+    let cleanup: (() => void) | undefined
+    let intervalId: NodeJS.Timeout | undefined
+    let isCancelled = false
+
+    const checkPermissions = async () => {
+      try {
+        if (!navigator.permissions) {
+          if (!isCancelled) {
+            permissionsStore.cameraPermission = 'unavailable'
+            permissionsStore.microphonePermission = 'unavailable'
+          }
+          return
+        }
+
+        const [cameraPermission, microphonePermission] = await Promise.all([
+          navigator.permissions.query({ name: 'camera' }),
+          navigator.permissions.query({ name: 'microphone' }),
+        ])
+
+        if (isCancelled) return
+
+        /**
+         * Safari Permission API Limitation Workaround
+         *
+         * Safari has a known issue where permission change events are not reliably fired
+         * when users interact with permission prompts. This is documented in Apple's forums:
+         * https://developer.apple.com/forums/thread/757353
+         *
+         * The problem:
+         * - When permissions are in 'prompt' state, Safari may not trigger 'change' events
+         * - Users can grant/deny permissions through system prompts, but our listeners won't detect it
+         * - This leaves the UI in an inconsistent state showing outdated permission status
+         *
+         * The solution:
+         * - Manually poll the Permissions API every 500ms when either permission is in 'prompt' state
+         * - Continue polling until both permissions are no longer in 'prompt' state
+         * - This ensures we catch permission changes even when Safari fails to fire events
+         *
+         * This polling is Safari-specific and only activates when needed to minimize performance impact.
+         */
+        if (
+          isSafari() &&
+          (cameraPermission.state === 'prompt' ||
+            microphonePermission.state === 'prompt')
+        ) {
+          // Start polling every 1 second if either permission is in 'prompt' state
+          if (!intervalId) {
+            intervalId = setInterval(async () => {
+              try {
+                const [updatedCamera, updatedMicrophone] = await Promise.all([
+                  navigator.permissions.query({ name: 'camera' }),
+                  navigator.permissions.query({ name: 'microphone' }),
+                ])
+
+                if (isCancelled) return
+
+                const cameraChanged =
+                  permissionsStore.cameraPermission !== updatedCamera.state
+                const microphoneChanged =
+                  permissionsStore.microphonePermission !==
+                  updatedMicrophone.state
+
+                if (cameraChanged) {
+                  permissionsStore.cameraPermission = updatedCamera.state
+                }
+
+                if (microphoneChanged) {
+                  permissionsStore.microphonePermission =
+                    updatedMicrophone.state
+                }
+
+                if (
+                  updatedCamera.state !== 'prompt' &&
+                  updatedMicrophone.state !== 'prompt'
+                ) {
+                  if (intervalId) {
+                    clearInterval(intervalId)
+                    intervalId = undefined
+                  }
+                }
+              } catch (error) {
+                if (!isCancelled) {
+                  console.error('Error polling permissions:', error)
+                }
+              }
+            }, POLLING_TIME)
+          }
+        }
+
+        permissionsStore.cameraPermission = cameraPermission.state
+        permissionsStore.microphonePermission = microphonePermission.state
+
+        const handleCameraChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionsStore.cameraPermission = target.state
+
+          if (
+            intervalId &&
+            target.state !== 'prompt' &&
+            microphonePermission.state !== 'prompt'
+          ) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+
+        const handleMicrophoneChange = (e: Event) => {
+          const target = e.target as PermissionStatus
+          permissionsStore.microphonePermission = target.state
+
+          if (
+            intervalId &&
+            target.state !== 'prompt' &&
+            microphonePermission.state !== 'prompt'
+          ) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+
+        cameraPermission.addEventListener('change', handleCameraChange)
+        microphonePermission.addEventListener('change', handleMicrophoneChange)
+
+        cleanup = () => {
+          cameraPermission.removeEventListener('change', handleCameraChange)
+          microphonePermission.removeEventListener(
+            'change',
+            handleMicrophoneChange
+          )
+          if (intervalId) {
+            clearInterval(intervalId)
+            intervalId = undefined
+          }
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          console.error('Error checking permissions:', error)
+        }
+      } finally {
+        if (!isCancelled) {
+          permissionsStore.isLoading = false
+        }
+      }
+    }
+    checkPermissions()
+
+    return () => {
+      isCancelled = true
+      cleanup?.()
+    }
+  }, [])
+}

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

@@ -1,5 +0,0 @@
-export const buildServerApiUrl = (origin: string, path: string) => {
-  const sanitizedOrigin = origin.replace(/\/$/, '')
-  const sanitizedPath = path.replace(/^\//, '')
-  return `${sanitizedOrigin}/${sanitizedPath}`
-}

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

@@ -1,21 +0,0 @@
-import { ApiError } from '@/api/ApiError'
-
-export const fetchServerApi = async <T = Record<string, unknown>>(
-  url: string,
-  token: string,
-  options?: RequestInit
-): Promise<T> => {
-  const response = await fetch(url, {
-    ...options,
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
-      ...options?.headers,
-    },
-  })
-  const result = await response.json()
-  if (!response.ok) {
-    throw new ApiError(response.status, result)
-  }
-  return result
-}

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

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

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

@@ -9,6 +9,7 @@ import { queryClient } from '@/api/queryClient'
 import { keys } from '@/api/queryKeys'
 import { useQuery } from '@tanstack/react-query'
 import { useParams } from 'wouter'
+import { usePublishSourcesManager } from '@/features/rooms/livekit/hooks/usePublishSourcesManager'
 
 export const Admin = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'admin' })
@@ -28,6 +29,15 @@ export const Admin = () => {
     enabled: false,
   })
 
+  const {
+    toggleMicrophone,
+    toggleCamera,
+    toggleScreenShare,
+    isMicrophoneEnabled,
+    isCameraEnabled,
+    isScreenShareEnabled,
+  } = usePublishSourcesManager()
+
   return (
     <Div
       display="flex"
@@ -47,68 +57,155 @@ export const Admin = () => {
       >
         {t('description')}
       </Text>
-      <RACSeparator
+      <div
         className={css({
-          border: 'none',
-          height: '1px',
-          width: '100%',
-          background: 'greyscale.250',
-        })}
-      />
-      <H
-        lvl={2}
-        className={css({
-          fontWeight: 500,
+          display: 'flex',
+          flexDirection: 'column',
         })}
       >
-        {t('access.title')}
-      </H>
-      <Text
-        variant="note"
-        wrap="balance"
+        <RACSeparator
+          className={css({
+            border: 'none',
+            height: '1px',
+            width: '100%',
+            background: 'greyscale.250',
+          })}
+        />
+        <H
+          lvl={2}
+          className={css({
+            fontWeight: 500,
+          })}
+          margin="sm"
+        >
+          {t('moderation.title')}
+        </H>
+        <Text
+          variant="note"
+          wrap="balance"
+          className={css({
+            textStyle: 'sm',
+          })}
+          margin={'md'}
+        >
+          {t('moderation.description')}
+        </Text>
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75rem',
+          })}
+        >
+          <Field
+            type="switch"
+            label={t('moderation.microphone.label')}
+            description={t('moderation.microphone.description')}
+            isSelected={isMicrophoneEnabled}
+            onChange={toggleMicrophone}
+            wrapperProps={{
+              noMargin: true,
+              fullWidth: true,
+            }}
+          />
+          <Field
+            type="switch"
+            label={t('moderation.camera.label')}
+            description={t('moderation.camera.description')}
+            isSelected={isCameraEnabled}
+            onChange={toggleCamera}
+            wrapperProps={{
+              noMargin: true,
+              fullWidth: true,
+            }}
+          />
+          <Field
+            type="switch"
+            label={t('moderation.screenshare.label')}
+            description={t('moderation.screenshare.description')}
+            isSelected={isScreenShareEnabled}
+            onChange={toggleScreenShare}
+            wrapperProps={{
+              noMargin: true,
+              fullWidth: true,
+            }}
+          />
+        </div>
+      </div>
+      <div
         className={css({
-          textStyle: 'sm',
+          display: 'flex',
+          flexDirection: 'column',
+          marginTop: '1rem',
         })}
-        margin={'md'}
       >
-        {t('access.description')}
-      </Text>
-      <Field
-        type="radioGroup"
-        label={t('access.type')}
-        aria-label={t('access.type')}
-        labelProps={{
-          className: css({
-            fontSize: '1rem',
-            paddingBottom: '1rem',
-          }),
-        }}
-        value={readOnlyData?.access_level}
-        onChange={(value) =>
-          patchRoom({ roomId, room: { access_level: value as ApiAccessLevel } })
-            .then((room) => {
-              queryClient.setQueryData([keys.room, roomId], room)
+        <RACSeparator
+          className={css({
+            border: 'none',
+            height: '1px',
+            width: '100%',
+            background: 'greyscale.250',
+          })}
+        />
+        <H
+          lvl={2}
+          className={css({
+            fontWeight: 500,
+          })}
+          margin="sm"
+        >
+          {t('access.title')}
+        </H>
+        <Text
+          variant="note"
+          wrap="balance"
+          className={css({
+            textStyle: 'sm',
+          })}
+          margin={'md'}
+        >
+          {t('access.description')}
+        </Text>
+        <Field
+          type="radioGroup"
+          label={t('access.type')}
+          aria-label={t('access.type')}
+          labelProps={{
+            className: css({
+              fontSize: '1rem',
+              paddingBottom: '1rem',
+            }),
+          }}
+          value={readOnlyData?.access_level}
+          onChange={(value) =>
+            patchRoom({
+              roomId,
+              room: { access_level: value as ApiAccessLevel },
             })
-            .catch((e) => console.error(e))
-        }
-        items={[
-          {
-            value: ApiAccessLevel.PUBLIC,
-            label: t('access.levels.public.label'),
-            description: t('access.levels.public.description'),
-          },
-          {
-            value: ApiAccessLevel.TRUSTED,
-            label: t('access.levels.trusted.label'),
-            description: t('access.levels.trusted.description'),
-          },
-          {
-            value: ApiAccessLevel.RESTRICTED,
-            label: t('access.levels.restricted.label'),
-            description: t('access.levels.restricted.description'),
-          },
-        ]}
-      />
+              .then((room) => {
+                queryClient.setQueryData([keys.room, roomId], room)
+              })
+              .catch((e) => console.error(e))
+          }
+          items={[
+            {
+              value: ApiAccessLevel.PUBLIC,
+              label: t('access.levels.public.label'),
+              description: t('access.levels.public.description'),
+            },
+            {
+              value: ApiAccessLevel.TRUSTED,
+              label: t('access.levels.trusted.label'),
+              description: t('access.levels.trusted.description'),
+            },
+            {
+              value: ApiAccessLevel.RESTRICTED,
+              label: t('access.levels.restricted.label'),
+              description: t('access.levels.restricted.description'),
+            },
+          ]}
+        />
+      </div>
     </Div>
   )
 }

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

@@ -1,7 +1,7 @@
 import { css } from '@/styled-system/css'
 import { Button, Text } from '@/primitives'
 import { useMemo, useRef } from 'react'
-import { ScreenSharePreferenceStore } from '@/stores/ScreenSharePreferences'
+import { screenSharePreferenceStore } from '@/stores/screenSharePreferences'
 import { useSnapshot } from 'valtio'
 import { useLocalParticipant } from '@livekit/components-react'
 import { useSize } from '../hooks/useResizeObserver'
@@ -18,7 +18,7 @@ export const FullScreenShareWarning = ({
   const warningContainerRef = useRef<HTMLDivElement>(null)
   const { width: containerWidth } = useSize(warningContainerRef)
   const { localParticipant } = useLocalParticipant()
-  const screenSharePreferences = useSnapshot(ScreenSharePreferenceStore)
+  const screenSharePreferences = useSnapshot(screenSharePreferenceStore)
 
   const isFullScreenSharing = useMemo(() => {
     if (trackReference?.source !== 'screen_share') return false
@@ -62,7 +62,7 @@ export const FullScreenShareWarning = ({
   }
 
   const handleDismissWarning = () => {
-    ScreenSharePreferenceStore.enabled = false
+    screenSharePreferenceStore.enabled = false
   }
 
   if (!shouldShowWarning) return null

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

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
+import { useMemo } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -8,24 +8,22 @@ import { getRouteUrl } from '@/navigation/getRouteUrl'
 import { useRoomData } from '../hooks/useRoomData'
 import { formatPinCode } from '../../utils/telephony'
 import { useTelephony } from '../hooks/useTelephony'
+import { useCopyRoomToClipboard } from '../hooks/useCopyRoomToClipboard'
 
 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)
 
   const telephony = useTelephony()
 
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && data?.pin_code
+  }, [telephony?.enabled, data?.pin_code])
+
+  const { isCopied, copyRoomToClipboard } = useCopyRoomToClipboard(data)
+
   return (
     <Div
       display="flex"
@@ -53,9 +51,9 @@ export const Info = () => {
           })}
         >
           <Text as="p" variant="xsNote" wrap="pretty">
-            {roomUrl}
+            {roomUrl.replace(/^https?:\/\//, '')}
           </Text>
-          {telephony?.enabled && data?.pin_code && (
+          {isTelephonyReadyForUse && (
             <>
               <Text as="p" variant="xsNote" wrap="pretty">
                 <Bold>{t('roomInformation.phone.call')}</Bold> (
@@ -72,10 +70,7 @@ export const Info = () => {
           size="sm"
           variant={isCopied ? 'success' : 'tertiaryText'}
           aria-label={t('roomInformation.button.ariaLabel')}
-          onPress={() => {
-            navigator.clipboard.writeText(roomUrl)
-            setIsCopied(true)
-          }}
+          onPress={copyRoomToClipboard}
           data-attr="copy-info-sidepannel"
           style={{
             marginLeft: '-8px',

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

@@ -14,7 +14,7 @@ export const MutedMicIndicator = ({
     source: Source.Microphone,
   })
 
-  if (!isMuted) {
+  if (!isMuted && participant.isMicrophoneEnabled) {
     return null
   }
 

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

@@ -0,0 +1,24 @@
+import { Menu as RACMenu } from 'react-aria-components'
+import { Participant } from 'livekit-client'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { PinMenuItem } from './PinMenuItem'
+import { RemoveMenuItem } from './RemoveMenuItem'
+
+export const ParticipantMenu = ({
+  participant,
+}: {
+  participant: Participant
+}) => {
+  const isAdminOrOwner = useIsAdminOrOwner()
+  const canModerateParticipant = !participant.isLocal && isAdminOrOwner
+  return (
+    <RACMenu
+      style={{
+        minWidth: '75px',
+      }}
+    >
+      <PinMenuItem participant={participant} />
+      {canModerateParticipant && <RemoveMenuItem participant={participant} />}
+    </RACMenu>
+  )
+}