📝(changelog) fix a minor changelog issue

Wrongly added to an old section during a rebase.

CHANGELOG.md

@@ -8,9 +8,73 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(any) let any authenticated user manage the lobby on trusted rooms
+
+### Changed
+
+- 📱(frontend) collapse mobile control bar items on narrow viewports
+- 📱(frontend) stack idle modal buttons in a column on mobile
+- 📱(frontend) improve feedback screen responsiveness on mobile
+- ⬆️(frontend) upgrade @fontsource-variable/atkinson-hyperlegible-next
+- ⬆️(frontend) upgrade i18next-resources-to-backend from 1.2.1 to 1.2.3
+- ⬆️(frontend) upgrade @tanstack/react-query from 5.101.1 to 5.101.4
+- ⬆️(frontend) upgrade @pandacss/preset-panda from 1.11.3 to 1.12.0
+- ⬆️(frontend) upgrade posthog-js from 1.404.1 to 1.409.5
+- ⚡️(frontend) apply frugal constraint to the active meeting audio track
+- ⚡️(backend) replace blocking Redis KEYS with cursor-based SCAN
+- ✨(summary) add hostname to analytics properties
+
+## [1.28.0] - 2026-08-24
+
+### Added
+
+- 📈(frontend) track errors when starting or stopping a recording
+- 🚸(frontend) explain camera-in-use failures on the join screen
+
+### Changed
+
+- ✨(backend) accept form-urlencoded on the user token endpoint
+- ✨(summary) configurable s3 region
+- ⬆️(frontend) upgrade i18next and react-i18next patch versions
+- ⬆️(frontend) upgrade posthog-js from 1.395.0 to 1.404.1
+- ⬆️(frontend) upgrade livekit-client and @livekit/components-react
+- 💄(frontend) increase the blur intensity
+
 ### Fixed
 
-- ✨(frontend) recover from stale lazy-loaded chunks after a deploy
+- 📝(docs) fix minor typos in comments and docstrings
+- ⬆️(backend) bump sqlparse from 0.5.5 to 0.6.0
+- ⬆️(mail) bump @html-to/text-cli from 0.6.0 to 0.6.1
+- 🐛(frontend) treat client-initiated connect aborts as events
+- 🐛(frontend) use state instead of a ref for MoreControls container
+- 🐛(frontend) stop init_virtual_background from firing on blur updates
+- 🐛(frontend) hoist mute confirmation dialog to VideoConference level
+- 🐛(frontend) fix joined notification tile no longer rendering properly
+- 🐛(frontend) handle device-in-use errors on Chrome / Windows 10
+- 🐛(frontend) handle Firefox/Windows AbortError on device start
+- 🐛(frontend) treat "Timeout starting source" AbortError as device-in-use
+- 🔇(frontend) suppress leaked WebSocket error events from livekit-client
+
+## [1.27.0] - 2026-08-14
+
+### Changed
+
+- 🔥(frontend) drop unused vendored ConnectionObserver
+- 🐛(frontend) vendor formatChatMessageLinks and trim surrounding newlines
+
+### Fixed
+
+- 📈(frontend) downgrade unreachable external home URL from error to event
+- 🐛(frontend) handle 401 responses when syncing user preferences
+- 🐛(frontend) harden speaker test against missing sinks and play errors
+- 🐛(frontend) implement hysteresis band for the control bar layout
+- 🐛(frontend) fix toolbar ResizeObserver loop and alignment drift
+- 🐛(analytics) filter benign ResizeObserver loop error in Sentry/PostHog
+- 🐛(frontend) stop reporting screen-share denials as errors
+- 🐛(frontend) generalize screen-share error modal beyond macOS
+- 📈(frontend) stop double-reporting media device failures
 
 ## [1.26.0] - 2026-08-12
 

SECURITY.md

@@ -4,7 +4,7 @@
 
 Security is very important to us.
 
-If you have any issue regarding security, please disclose the information responsibly submiting [this form](https://vdp.numerique.gouv.fr/p/Send-a-report?lang=en) and not by creating an issue on the repository. You can also email us at visio@numerique.gouv.fr
+If you have any issue regarding security, please disclose the information responsibly by submitting [this form](https://vdp.numerique.gouv.fr/p/Send-a-report?lang=en) and not by creating an issue on the repository. You can also email us at visio@numerique.gouv.fr
 
 We appreciate your effort to make Visio more secure.
 

compose.yml

@@ -180,7 +180,7 @@ services:
     working_dir: /app
 
   node:
-    image: node:18
+    image: node:22
     user: "${DOCKER_USER:-1000}"
     environment:
       HOME: /tmp

docker/dinum-frontend/nginx/default.conf

@@ -74,13 +74,6 @@ server {
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
       expires 30d;
       add_header Cache-Control "public, max-age=2592000";
-      try_files $uri =404;
-      error_page 404 = @asset_missing;
-  }
-
-  location @asset_missing {
-      add_header Cache-Control "no-store" always;
-      return 404;
   }
 
   # Serve static files

docs/openapi.yaml

@@ -50,10 +50,24 @@ paths:
         
         The application must be authorized for the user's email domain.
         The returned token expires after a configured duration and must be refreshed by calling this endpoint again.
+
+        Request parameters may be sent either as "application/x-www-form-urlencoded"
+        (as specified by RFC 6749 for OAuth 2.0 token endpoints) or as "application/json".
       operationId: generateToken
       requestBody:
         required: true
         content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/TokenRequest'
+            examples:
+              tokenRequest:
+                summary: Request token for user delegation
+                value:
+                  client_id: "550e8400-e29b-41d4-a716-446655440000"
+                  client_secret: "1234567890abcdefghijklmnopqrstuvwxyz"
+                  grant_type: "client_credentials"
+                  scope: "user@example.com"
           application/json:
             schema:
               $ref: '#/components/schemas/TokenRequest'
@@ -117,6 +131,19 @@ paths:
                   summary: Domain not authorized
                   value:
                     error: "This application is not authorized for this email domain."
+        '415':
+          description: |
+            Unsupported media type. The request body must be sent as
+            "application/x-www-form-urlencoded" or "application/json".
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+              examples:
+                unsupportedMediaType:
+                  summary: Unsupported request content type
+                  value:
+                    detail: 'Unsupported media type "text/plain" in request.'
 
   /rooms:
     get:

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.26.0"
+version = "1.28.0"
 requires-python = ">=3.12"
 dependencies = [
     "livekit-agents==1.6.7",

src/agents/uv.lock

@@ -9,7 +9,7 @@ resolution-markers = [
 
 [[package]]
 name = "agents"
-version = "1.26.0"
+version = "1.28.0"
 source = { virtual = "." }
 dependencies = [
     { name = "livekit-agents" },

src/backend/core/api/permissions.py

@@ -5,7 +5,7 @@ from django.http import Http404
 
 from rest_framework import permissions
 
-from ..models import RoleChoices
+from ..models import RoleChoices, RoomAccessLevel
 from ..services.participants_management import (
     ParticipantNotFoundException,
     ParticipantsManagement,
@@ -198,3 +198,48 @@ class IsPresentInMeeting(permissions.BasePermission):
             return False
         except ParticipantsManagementException:
             return False
+
+
+class CanManageLobby(permissions.BasePermission):
+    """Grant lobby management (list/accept/deny waiting participants).
+
+    - Room admins/owners can always manage the lobby.
+    - When the room access level is TRUSTED, any authenticated user who is
+      currently connected to the meeting can manage the lobby. Presence is
+      verified cache-first (Redis), falling back to the LiveKit API.
+
+    Access level is always read fresh from the DB; only presence is cached,
+    so changing the room to RESTRICTED takes effect immediately.
+    """
+
+    message = "You are not allowed to manage this room's lobby."
+
+    # pylint: disable=too-many-return-statements
+    def has_object_permission(self, request, view, obj):  # noqa: PLR0911
+        """Check privileges first, then the trusted-room presence path."""
+        user = request.user
+
+        if not user or not user.is_authenticated:
+            return False
+
+        # Product choice: lobby management is reserved for session-authenticated
+        # users with a real account, not holders of a LiveKit room token.
+        if request.auth and hasattr(request.auth, "video"):
+            return False
+
+        if obj.is_administrator_or_owner(user):
+            return True
+
+        if obj.access_level != RoomAccessLevel.TRUSTED:
+            return False
+
+        self.message = "You must be connected to the meeting to manage its lobby."
+
+        try:
+            return ParticipantsManagement().check_if_in_meeting_cached(
+                room_name=str(obj.pk), identity=str(user.sub)
+            )
+        except ParticipantNotFoundException:
+            return False
+        except ParticipantsManagementException:
+            return False

src/backend/core/api/viewsets.py

@@ -536,7 +536,7 @@ class RoomViewSet(
         methods=["post"],
         url_path="enter",
         permission_classes=[
-            permissions.HasPrivilegesOnRoom,
+            permissions.CanManageLobby,
         ],
     )
     def allow_participant_to_enter(self, request, pk=None):  # pylint: disable=unused-argument
@@ -574,7 +574,7 @@ class RoomViewSet(
         methods=["GET"],
         url_path="waiting-participants",
         permission_classes=[
-            permissions.HasPrivilegesOnRoom,
+            permissions.CanManageLobby,
         ],
     )
     def list_waiting_participants(self, request, pk=None):  # pylint: disable=unused-argument

src/backend/core/external_api/viewsets.py

@@ -12,6 +12,9 @@ from rest_framework import decorators, mixins, viewsets
 from rest_framework import (
     exceptions as drf_exceptions,
 )
+from rest_framework import (
+    parsers as drf_parsers,
+)
 from rest_framework import (
     response as drf_response,
 )
@@ -41,6 +44,7 @@ class ApplicationViewSet(viewsets.ViewSet):
         methods=["post"],
         url_path="token",
         url_name="token",
+        parser_classes=[drf_parsers.FormParser, drf_parsers.JSONParser],
     )
     @FeatureFlag.require("application")
     def generate_jwt_access_token(self, request, *args, **kwargs):

src/backend/core/services/livekit_events.py

@@ -23,6 +23,7 @@ from core.recording.services.recording_events import (
 )
 
 from .lobby import LobbyService
+from .presence import PresenceCache
 from .room_management import (
     RoomManagement,
     RoomManagementException,
@@ -99,6 +100,7 @@ class LiveKitEventsService:
             "egress_ended": self._handle_egress_ended,
             "room_started": self._handle_room_started,
             "room_finished": self._handle_room_finished,
+            "participant_left": self._handle_participant_left,
         }
 
         token_verifier = api.TokenVerifier(
@@ -107,6 +109,7 @@ class LiveKitEventsService:
         )
         self.webhook_receiver = api.WebhookReceiver(token_verifier)
         self.lobby_service = LobbyService()
+        self.presence_cache = PresenceCache()
         self.sip_management = SIPManagement()
         self.recording_events = RecordingEventsService()
 
@@ -285,9 +288,31 @@ class LiveKitEventsService:
                     f"Failed to delete sip dispatch rule for room {room_id}"
                 ) from e
 
+        self.presence_cache.clear_room(room_id)
+
         try:
             self.lobby_service.clear_room_cache(room_id)
         except Exception as e:
             raise ActionFailedError(
                 f"Failed to clear room cache for room {room_id}"
             ) from e
+
+    def _handle_participant_left(self, data):
+        """Handle 'participant_left': invalidate the presence cache.
+
+        Presence entries are created lazily (only for users who administrate
+        the lobby of a trusted room), so for most participants this delete is
+        a no-op DEL on a key that never existed. Eager invalidation shrinks
+        the window during which a departed participant could still act on a
+        trusted room's lobby (cache hit until TTL expiry). It is gated behind
+        `PRESENCE_CLEAR_ON_PARTICIPANT_LEFT` so its production impact can be
+        measured and the behaviour reverted independently of the feature.
+        When disabled, invalidation relies on `room_finished` and the TTL.
+        """
+        if not settings.PRESENCE_CLEAR_ON_PARTICIPANT_LEFT:
+            return
+
+        identity = data.participant.identity
+        if not identity:
+            return
+        self.presence_cache.clear(data.room.name, identity)

src/backend/core/services/lobby.py

@@ -270,7 +270,7 @@ class LobbyService:
         """List all waiting participants for a room."""
 
         pattern = self._get_cache_key(room_id, "*")
-        keys = cache.keys(pattern)
+        keys = list(cache.iter_keys(pattern, itersize=utils.CACHE_SCAN_ITERSIZE))
 
         if not keys:
             return []
@@ -345,13 +345,9 @@ class LobbyService:
     def clear_room_cache(self, room_id: UUID) -> None:
         """Clear all participant entries from the cache for a specific room."""
 
-        pattern = self._get_cache_key(room_id, "*")
+        cache.delete_pattern(
-        keys = cache.keys(pattern)
+            self._get_cache_key(room_id, "*"), itersize=utils.CACHE_SCAN_ITERSIZE
-
+        )
-        if not keys:
-            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."""

src/backend/core/services/participants_management.py

@@ -20,6 +20,7 @@ from livekit.protocol.models import ParticipantInfo
 from core import utils
 
 from .lobby import LobbyService
+from .presence import PresenceCache
 
 logger = getLogger(__name__)
 
@@ -72,7 +73,9 @@ class ParticipantsManagement:
 
     @async_to_sync
     async def remove(self, room_name: str, identity: str):
-        """Remove a participant from a room and clear their lobby cache."""
+        """Remove a participant from a room and clear their lobby/presence cache."""
+
+        PresenceCache().clear(room_name, identity)
 
         try:
             LobbyService().clear_participant_cache(
@@ -156,6 +159,30 @@ class ParticipantsManagement:
         finally:
             await lkapi.aclose()
 
+    def check_if_in_meeting_cached(self, room_name: str, identity: str) -> bool:
+        """Cache-first variant of `check_if_in_meeting`.
+
+        Cache hit  -> True without touching LiveKit.
+        Cache miss -> ask LiveKit; memoize only positive answers.
+
+        Raises the same exceptions as `check_if_in_meeting` so callers keep
+        failing closed the same way.
+        """
+        if not room_name or not identity:
+            return False
+
+        presence_cache = PresenceCache()
+
+        if presence_cache.is_marked_present(room_name, identity):
+            return True
+
+        present = self.check_if_in_meeting(room_name=room_name, identity=identity)
+
+        if present:
+            presence_cache.mark_present(room_name, identity)
+
+        return present
+
     @async_to_sync
     async def check_if_in_meeting(self, room_name: str, identity: str) -> bool:
         """Check whether `identity` is currently a participant in `room_name`.

src/backend/core/services/presence.py

@@ -0,0 +1,52 @@
+"""Presence cache.
+
+Redis-backed memo of "this identity is currently connected to this room".
+
+This module is intentionally a *pure cache store* with no dependency on other
+services, so that `participants_management` (which talks to LiveKit) can
+import it without creating an import cycle. The composition of "check cache,
+fall back to LiveKit" lives in
+`ParticipantsManagement.check_if_in_meeting_cached`.
+
+Only positive answers are stored: a sticky negative would lock out someone
+who joins right after a miss for the whole TTL. The TTL is a safety net in
+case an invalidation webhook is lost.
+"""
+
+from uuid import UUID
+
+from django.conf import settings
+from django.core.cache import cache
+
+from core.utils import CACHE_SCAN_ITERSIZE
+
+
+class PresenceCache:
+    """Store and invalidate (room, identity) presence entries."""
+
+    @staticmethod
+    def _get_cache_key(room_id: UUID | str, identity: str) -> str:
+        """Cache key for a (room, identity) presence entry."""
+        return f"{settings.PRESENCE_KEY_PREFIX}_{room_id!s}_{identity}"
+
+    def is_marked_present(self, room_id: UUID | str, identity: str) -> bool:
+        """Return True if a positive presence entry exists in cache."""
+        return bool(cache.get(self._get_cache_key(room_id, identity)))
+
+    def mark_present(self, room_id: UUID | str, identity: str) -> None:
+        """Record that `identity` is in `room_id`."""
+        cache.set(
+            self._get_cache_key(room_id, identity),
+            True,
+            timeout=settings.PRESENCE_CACHE_TIMEOUT,
+        )
+
+    def clear(self, room_id: UUID | str, identity: str) -> None:
+        """Forget presence for one participant (e.g. on participant_left)."""
+        cache.delete(self._get_cache_key(room_id, identity))
+
+    def clear_room(self, room_id: UUID | str) -> None:
+        """Forget presence for every participant of a room (on room_finished)."""
+        cache.delete_pattern(
+            self._get_cache_key(room_id, "*"), itersize=CACHE_SCAN_ITERSIZE
+        )

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

@@ -389,7 +389,7 @@ def test_allow_participant_to_enter_anonymous():
 
 def test_allow_participant_to_enter_non_owner():
     """Non-privileged users should not be allowed to manage entry requests."""
-    room = RoomFactory()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
     user = UserFactory()
     client = APIClient()
     client.force_login(user)
@@ -522,7 +522,7 @@ def test_list_waiting_participants_anonymous():
 
 def test_list_waiting_participants_non_owner():
     """Non-privileged users should not be allowed to list waiting participants."""
-    room = RoomFactory()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
     user = UserFactory()
     client = APIClient()
     client.force_login(user)

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

@@ -0,0 +1,106 @@
+"""Trusted rooms: any authenticated participant present in the meeting can manage the lobby."""
+
+from unittest import mock
+
+import pytest
+from rest_framework.test import APIClient
+
+from core.factories import RoomFactory, UserFactory
+from core.models import RoomAccessLevel
+from core.services.presence import PresenceCache
+
+pytestmark = pytest.mark.django_db
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_trusted_room_present_user_can_list_waiting(mock_check):
+    """Authenticated + present in a trusted room -> 200, LiveKit asked once then cached."""
+    mock_check.return_value = True
+    user = UserFactory()
+    room = RoomFactory(access_level=RoomAccessLevel.TRUSTED)
+    client = APIClient()
+    client.force_login(user)
+
+    url = f"/api/v1.0/rooms/{room.id}/waiting-participants/"
+    assert client.get(url).status_code == 200
+    assert client.get(url).status_code == 200
+    assert mock_check.call_count == 1
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_trusted_room_absent_user_forbidden(mock_check):
+    """Authenticated but not connected to the meeting -> 403."""
+    mock_check.return_value = False
+    user = UserFactory()
+    room = RoomFactory(access_level=RoomAccessLevel.TRUSTED)
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.get(f"/api/v1.0/rooms/{room.id}/waiting-participants/")
+    assert response.status_code == 403
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_restricted_room_present_user_forbidden(mock_check):
+    """Presence is not enough on a restricted room; LiveKit must not even be asked."""
+    user = UserFactory()
+    room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.get(f"/api/v1.0/rooms/{room.id}/waiting-participants/")
+    assert response.status_code == 403
+    mock_check.assert_not_called()
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_trusted_room_presence_cleared_after_leave(mock_check):
+    """Once the presence cache is cleared (participant_left), LiveKit is re-checked."""
+    mock_check.return_value = True
+    user = UserFactory()
+    room = RoomFactory(access_level=RoomAccessLevel.TRUSTED)
+    client = APIClient()
+    client.force_login(user)
+    url = f"/api/v1.0/rooms/{room.id}/waiting-participants/"
+
+    assert client.get(url).status_code == 200
+    PresenceCache().clear(room.id, str(user.sub))
+
+    mock_check.return_value = False
+    assert client.get(url).status_code == 403
+    assert mock_check.call_count == 2
+
+
+def test_trusted_room_anonymous_forbidden():
+    """Anonymous users never manage the lobby."""
+    room = RoomFactory(access_level=RoomAccessLevel.TRUSTED)
+    response = APIClient().get(f"/api/v1.0/rooms/{room.id}/waiting-participants/")
+    assert response.status_code == 401
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_trusted_room_present_user_can_accept_entry(mock_check):
+    """Authenticated + present in a trusted room can accept a waiting participant."""
+    mock_check.return_value = True
+    user = UserFactory()
+    room = RoomFactory(access_level=RoomAccessLevel.TRUSTED)
+    client = APIClient()
+    client.force_login(user)
+
+    response = client.post(
+        f"/api/v1.0/rooms/{room.id}/enter/",
+        {"participant_id": "2f7f162f-e7d1-421b-90e7-02bfbfbf8def", "allow_entry": True},
+    )
+    # Permission passed; 404 because that participant isn't actually waiting.
+    assert response.status_code == 404
+    assert response.json() == {"message": "Participant not found."}

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

@@ -854,3 +854,31 @@ def test_receive_ignores_connection_test_room(
 
     mock_handle_room_started.assert_not_called()
     mock_handle_room_finished.assert_not_called()
+
+
+@mock.patch("core.services.presence.cache.delete")
+def test_participant_left_clearing_gated_by_setting(mock_delete, service, settings):
+    """PRESENCE_CLEAR_ON_PARTICIPANT_LEFT toggles eager presence invalidation."""
+    data = mock.Mock()
+    data.room.name = "room-name"
+    data.participant.identity = "user-sub"
+
+    settings.PRESENCE_CLEAR_ON_PARTICIPANT_LEFT = False
+    service._handle_participant_left(data)  # pylint: disable=protected-access
+    mock_delete.assert_not_called()
+
+    settings.PRESENCE_CLEAR_ON_PARTICIPANT_LEFT = True
+    service._handle_participant_left(data)  # pylint: disable=protected-access
+    mock_delete.assert_called_once()
+
+
+@mock.patch("core.services.presence.cache.delete")
+def test_participant_left_without_identity_is_ignored(mock_delete, service, settings):
+    """No cache operation when the webhook carries no identity."""
+    settings.PRESENCE_CLEAR_ON_PARTICIPANT_LEFT = True
+    data = mock.Mock()
+    data.room.name = "room-name"
+    data.participant.identity = ""
+
+    service._handle_participant_left(data)  # pylint: disable=protected-access
+    mock_delete.assert_not_called()

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

@@ -24,6 +24,7 @@ from core.services.lobby import (
     LobbyParticipantStatus,
     LobbyService,
 )
+from core.services.presence import CACHE_SCAN_ITERSIZE
 from core.utils import NotificationError
 
 pytestmark = pytest.mark.django_db
@@ -578,14 +579,14 @@ def test_get_participant_parsing_error(
 @mock.patch("core.services.lobby.cache")
 def test_list_waiting_participants_empty(mock_cache, lobby_service):
     """Test listing waiting participants when none exist."""
-    mock_cache.keys.return_value = []
+    mock_cache.iter_keys.return_value = []
 
     room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
     result = lobby_service.list_waiting_participants(room.id)
 
     assert result == []
     pattern = f"{settings.LOBBY_KEY_PREFIX}_{room.id!s}_*"
-    mock_cache.keys.assert_called_once_with(pattern)
+    mock_cache.iter_keys.assert_called_once_with(pattern, itersize=CACHE_SCAN_ITERSIZE)
     mock_cache.get_many.assert_not_called()
 
 
@@ -594,7 +595,7 @@ def test_list_waiting_participants(mock_cache, lobby_service, participant_dict):
     """Test listing waiting participants with valid data."""
     room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
     cache_key = f"{settings.LOBBY_KEY_PREFIX}_{room.id!s}_participant1"
-    mock_cache.keys.return_value = [cache_key]
+    mock_cache.iter_keys.return_value = [cache_key]
     mock_cache.get_many.return_value = {cache_key: participant_dict}
 
     result = lobby_service.list_waiting_participants(room.id)
@@ -603,7 +604,7 @@ def test_list_waiting_participants(mock_cache, lobby_service, participant_dict):
     assert result[0]["status"] == "waiting"
     assert result[0]["username"] == "test-username"
     pattern = f"{settings.LOBBY_KEY_PREFIX}_{room.id!s}_*"
-    mock_cache.keys.assert_called_once_with(pattern)
+    mock_cache.iter_keys.assert_called_once_with(pattern, itersize=CACHE_SCAN_ITERSIZE)
     mock_cache.get_many.assert_called_once_with([cache_key])
 
 
@@ -628,7 +629,7 @@ def test_list_waiting_participants_multiple(mock_cache, lobby_service):
         "color": "#654321",
     }
 
-    mock_cache.keys.return_value = [cache_key1, cache_key2]
+    mock_cache.iter_keys.return_value = [cache_key1, cache_key2]
     mock_cache.get_many.return_value = {
         cache_key1: participant1,
         cache_key2: participant2,
@@ -646,7 +647,7 @@ def test_list_waiting_participants_multiple(mock_cache, lobby_service):
     assert all(p["status"] == "waiting" for p in result)
 
     pattern = f"{settings.LOBBY_KEY_PREFIX}_{room.id!s}_*"
-    mock_cache.keys.assert_called_once_with(pattern)
+    mock_cache.iter_keys.assert_called_once_with(pattern, itersize=CACHE_SCAN_ITERSIZE)
     mock_cache.get_many.assert_called_once_with([cache_key1, cache_key2])
 
 
@@ -655,7 +656,7 @@ def test_list_waiting_participants_corrupted_data(mock_cache, lobby_service):
     """Test listing waiting participants with corrupted data."""
     room = RoomFactory(access_level=RoomAccessLevel.RESTRICTED)
     cache_key = f"{settings.LOBBY_KEY_PREFIX}_{room.id!s}_participant1"
-    mock_cache.keys.return_value = [cache_key]
+    mock_cache.iter_keys.return_value = [cache_key]
     mock_cache.get_many.return_value = {cache_key: {"invalid": "data"}}
 
     result = lobby_service.list_waiting_participants(room.id)
@@ -680,7 +681,7 @@ def test_list_waiting_participants_partially_corrupted(mock_cache, lobby_service
 
     corrupted_participant = {"invalid": "data"}
 
-    mock_cache.keys.return_value = [cache_key1, cache_key2]
+    mock_cache.iter_keys.return_value = [cache_key1, cache_key2]
     mock_cache.get_many.return_value = {
         cache_key1: corrupted_participant,
         cache_key2: valid_participant,
@@ -699,7 +700,7 @@ def test_list_waiting_participants_partially_corrupted(mock_cache, lobby_service
 
     # Verify both cache keys were queried
     pattern = f"{settings.LOBBY_KEY_PREFIX}_{room.id!s}_*"
-    mock_cache.keys.assert_called_once_with(pattern)
+    mock_cache.iter_keys.assert_called_once_with(pattern, itersize=CACHE_SCAN_ITERSIZE)
     mock_cache.get_many.assert_called_once_with([cache_key1, cache_key2])
 
 
@@ -723,7 +724,7 @@ def test_list_waiting_participants_non_waiting(mock_cache, lobby_service):
         "color": "#654321",
     }
 
-    mock_cache.keys.return_value = [cache_key1, cache_key2]
+    mock_cache.iter_keys.return_value = [cache_key1, cache_key2]
     mock_cache.get_many.return_value = {
         cache_key1: participant1,
         cache_key2: participant2,

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

@@ -0,0 +1,108 @@
+"""Tests for the presence cache and the cached presence check."""
+
+# pylint: disable=W0212
+
+from unittest import mock
+from uuid import uuid4
+
+from django.core.cache import cache
+
+import pytest
+
+from core.services.participants_management import (
+    ParticipantNotFoundException,
+    ParticipantsManagement,
+    ParticipantsManagementException,
+)
+from core.services.presence import PresenceCache
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_presence_cache_hit_skips_livekit(mock_check):
+    """A cached positive answer must not call LiveKit."""
+    room_id, identity = str(uuid4()), "user-sub"
+    PresenceCache().mark_present(room_id, identity)
+
+    assert (
+        ParticipantsManagement().check_if_in_meeting_cached(room_id, identity) is True
+    )
+    mock_check.assert_not_called()
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_presence_cache_miss_calls_livekit_and_caches_positive(mock_check):
+    """On a miss, LiveKit is asked once and a positive answer is memoized."""
+    mock_check.return_value = True
+    room_id, identity = str(uuid4()), "user-sub"
+    service = ParticipantsManagement()
+
+    assert service.check_if_in_meeting_cached(room_id, identity) is True
+    assert service.check_if_in_meeting_cached(room_id, identity) is True
+    assert mock_check.call_count == 1
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_presence_negative_not_cached(mock_check):
+    """Negative answers are never memoized."""
+    mock_check.return_value = False
+    room_id, identity = str(uuid4()), "user-sub"
+    service = ParticipantsManagement()
+
+    assert service.check_if_in_meeting_cached(room_id, identity) is False
+    assert service.check_if_in_meeting_cached(room_id, identity) is False
+    assert mock_check.call_count == 2
+
+
+@mock.patch(
+    "core.services.participants_management.ParticipantsManagement.check_if_in_meeting"
+)
+def test_presence_errors_propagate_and_cache_nothing(mock_check):
+    """LiveKit errors propagate to the caller (which fails closed); nothing cached."""
+    room_id, identity = str(uuid4()), "user-sub"
+
+    for exc in (ParticipantNotFoundException(), ParticipantsManagementException()):
+        mock_check.side_effect = exc
+        with pytest.raises(type(exc)):
+            ParticipantsManagement().check_if_in_meeting_cached(room_id, identity)
+        assert cache.get(PresenceCache._get_cache_key(room_id, identity)) is None
+
+
+def test_presence_clear_and_clear_room():
+    """clear() removes one entry, clear_room() removes all entries of a room."""
+    room_id, other_room = str(uuid4()), str(uuid4())
+    presence = PresenceCache()
+    presence.mark_present(room_id, "a")
+    presence.mark_present(room_id, "b")
+    presence.mark_present(other_room, "a")
+
+    presence.clear(room_id, "a")
+    assert presence.is_marked_present(room_id, "a") is False
+    assert presence.is_marked_present(room_id, "b") is True
+
+    presence.clear_room(room_id)
+    assert presence.is_marked_present(room_id, "b") is False
+    assert presence.is_marked_present(other_room, "a") is True
+
+
+def test_presence_clear_room_scans_in_pages():
+    """clear_room removes every match, even across several SCAN pages,
+    and only within the room."""
+    room_id, other_room = str(uuid4()), str(uuid4())
+    presence = PresenceCache()
+    for i in range(7):
+        presence.mark_present(room_id, f"user-{i}")
+    presence.mark_present(other_room, "user-0")
+
+    # An itersize smaller than the match count forces delete_pattern to
+    # page through several SCAN cursors rather than finish in one pass.
+    with mock.patch("core.utils.CACHE_SCAN_ITERSIZE", 3):
+        presence.clear_room(room_id)
+
+    assert all(not presence.is_marked_present(room_id, f"user-{i}") for i in range(7))
+    assert presence.is_marked_present(other_room, "user-0") is True

src/backend/core/tests/test_external_api_token.py

@@ -5,6 +5,7 @@ Tests for external API /token endpoint
 # pylint: disable=W0621
 
 from unittest import mock
+from urllib.parse import urlencode
 
 import jwt
 import pytest
@@ -88,6 +89,155 @@ def test_api_applications_generate_token_success(settings):
     }
 
 
+def test_api_applications_generate_token_form_urlencoded(settings):
+    """The token endpoint should accept "application/x-www-form-urlencoded"
+    requests, as mandated by RFC 6749 (sections 3.2 and 4.4.2) for OAuth 2.0
+    token endpoints, so that standard OAuth 2.0 client libraries work
+    out of the box."""
+    UserFactory(email="user@example.com")
+    application = ApplicationFactory(
+        is_active=True,
+        scopes=[ApplicationScope.ROOMS_LIST, ApplicationScope.ROOMS_CREATE],
+    )
+
+    plain_secret = "test-secret-123"
+    application.client_secret = plain_secret
+    application.save()
+
+    client = APIClient()
+    response = client.post(
+        "/external-api/v1.0/application/token/",
+        (
+            f"client_id={application.client_id}"
+            f"&client_secret={plain_secret}"
+            "&grant_type=client_credentials"
+            "&scope=user%40example.com"
+        ),
+        content_type="application/x-www-form-urlencoded",
+    )
+
+    assert response.status_code == 200
+    assert "access_token" in response.data
+
+    response.data.pop("access_token")
+
+    assert response.data == {
+        "token_type": "Bearer",
+        "expires_in": settings.APPLICATION_JWT_EXPIRATION_SECONDS,
+        "scope": "rooms:list rooms:create",
+    }
+
+
+def test_api_applications_generate_token_form_urlencoded_invalid_credentials():
+    """Invalid credentials sent as form-urlencoded should be parsed and
+    rejected with 401, proving the request body is properly decoded."""
+    user = UserFactory(email="user@example.com")
+    application = ApplicationFactory(is_active=True)
+
+    client = APIClient()
+    response = client.post(
+        "/external-api/v1.0/application/token/",
+        urlencode(
+            {
+                "client_id": application.client_id,
+                "client_secret": "wrong-secret",
+                "grant_type": "client_credentials",
+                "scope": user.email,
+            }
+        ),
+        content_type="application/x-www-form-urlencoded",
+    )
+
+    assert response.status_code == 401
+    assert "Invalid credentials" in str(response.data)
+
+
+def test_api_applications_generate_token_form_urlencoded_missing_fields():
+    """Missing required fields in a form-urlencoded request should return
+    a 400 validation error, like for JSON requests."""
+    client = APIClient()
+    response = client.post(
+        "/external-api/v1.0/application/token/",
+        urlencode({"grant_type": "client_credentials"}),
+        content_type="application/x-www-form-urlencoded",
+    )
+
+    assert response.status_code == 400
+    for field in ("client_id", "client_secret", "scope"):
+        assert field in response.data
+
+
+def test_api_applications_generate_token_form_urlencoded_invalid_grant_type():
+    """An unsupported grant_type sent as form-urlencoded should return 400."""
+    user = UserFactory(email="user@example.com")
+    application = ApplicationFactory(is_active=True)
+
+    plain_secret = "test-secret-123"
+    application.client_secret = plain_secret
+    application.save()
+
+    client = APIClient()
+    response = client.post(
+        "/external-api/v1.0/application/token/",
+        urlencode(
+            {
+                "client_id": application.client_id,
+                "client_secret": plain_secret,
+                "grant_type": "authorization_code",
+                "scope": user.email,
+            }
+        ),
+        content_type="application/x-www-form-urlencoded",
+    )
+
+    assert response.status_code == 400
+    assert "grant_type" in response.data
+
+
+def test_api_applications_generate_token_form_urlencoded_special_characters():
+    """Percent-encoded reserved characters ("&", "=", "+", "%") in the
+    client_secret should survive form-urlencoded decoding."""
+    UserFactory(email="user@example.com")
+    application = ApplicationFactory(
+        is_active=True,
+        scopes=[ApplicationScope.ROOMS_LIST],
+    )
+
+    plain_secret = "s3cr3t&with=special+chars%42"
+    application.client_secret = plain_secret
+    application.save()
+
+    client = APIClient()
+    response = client.post(
+        "/external-api/v1.0/application/token/",
+        urlencode(
+            {
+                "client_id": application.client_id,
+                "client_secret": plain_secret,
+                "grant_type": "client_credentials",
+                "scope": "user@example.com",
+            }
+        ),
+        content_type="application/x-www-form-urlencoded",
+    )
+
+    assert response.status_code == 200
+    assert "access_token" in response.data
+
+
+def test_api_applications_generate_token_unsupported_media_type():
+    """Content types other than JSON and form-urlencoded should still be
+    rejected with 415 Unsupported Media Type."""
+    client = APIClient()
+    response = client.post(
+        "/external-api/v1.0/application/token/",
+        "client_id=x&client_secret=y&grant_type=client_credentials&scope=a@b.co",
+        content_type="text/plain",
+    )
+
+    assert response.status_code == 415
+
+
 def test_api_applications_generate_token_invalid_client_id():
     """Invalid client_id should return 401."""
     user = UserFactory(email="user@example.com")

src/backend/core/utils.py

@@ -512,3 +512,6 @@ def build_telephony_config():
         "default_country": country,
         "international_phone_number": international,
     }
+
+
+CACHE_SCAN_ITERSIZE = 500

src/backend/meet/settings.py

@@ -856,6 +856,15 @@ class Base(Configuration):
     )
 
     # Lobby configurations
+    PRESENCE_KEY_PREFIX = values.Value(
+        "room_presence", environ_name="PRESENCE_KEY_PREFIX", environ_prefix=None
+    )
+    PRESENCE_CACHE_TIMEOUT = values.PositiveIntegerValue(
+        3600, environ_name="PRESENCE_CACHE_TIMEOUT", environ_prefix=None
+    )
+    PRESENCE_CLEAR_ON_PARTICIPANT_LEFT = values.BooleanValue(
+        True, environ_name="PRESENCE_CLEAR_ON_PARTICIPANT_LEFT", environ_prefix=None
+    )
     LOBBY_KEY_PREFIX = values.Value(
         "room_lobby", environ_name="LOBBY_KEY_PREFIX", environ_prefix=None
     )

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "uv_build"
 
 [project]
 name = "meet"
-version = "1.26.0"
+version = "1.28.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/backend/uv.lock

@@ -1187,7 +1187,7 @@ wheels = [
 
 [[package]]
 name = "meet"
-version = "1.26.0"
+version = "1.28.0"
 source = { editable = "." }
 dependencies = [
     { name = "aiohttp" },
@@ -2252,11 +2252,11 @@ wheels = [
 
 [[package]]
 name = "sqlparse"
-version = "0.5.5"
+version = "0.6.0"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/90/76/437d71068094df0726366574cf3432a4ed754217b436eb7429415cf2d480/sqlparse-0.5.5.tar.gz", hash = "sha256:e20d4a9b0b8585fdf63b10d30066c7c94c5d7a7ec47c889a2d83a3caa93ff28e", size = 120815, upload-time = "2025-12-19T07:17:45.073Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/5f/d3/3f06a1006f2261d1342aefb3c71eed02f5d4ca5bdbecd86ebc12ad38306e/sqlparse-0.6.0.tar.gz", hash = "sha256:113c35c75365ab9cc9c7231d68c6428fb11c085fc8e9eb1ad659b7ddbf6cd2b9", size = 178477, upload-time = "2026-08-13T19:16:06.396Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/49/4b/359f28a903c13438ef59ebeee215fb25da53066db67b305c125f1c6d2a25/sqlparse-0.5.5-py3-none-any.whl", hash = "sha256:12a08b3bf3eec877c519589833aed092e2444e68240a3577e8e26148acc7b1ba", size = 46138, upload-time = "2025-12-19T07:17:46.573Z" },
+    { url = "https://files.pythonhosted.org/packages/d9/50/f00935da0ec7cbf325f8dc4f772ae46fbc7b672dd62876e73f0a94adda57/sqlparse-0.6.0-py3-none-any.whl", hash = "sha256:b861c0288ce2fa56209a9a6412d2e066ac664b3873b89c26c9d8415e8e32996f", size = 50070, upload-time = "2026-08-13T19:16:04.062Z" },
 ]
 
 [[package]]

src/frontend/default.conf

@@ -14,13 +14,6 @@ server {
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
       expires 30d;
       add_header Cache-Control "public, max-age=2592000";
-      try_files $uri =404;
-      error_page 404 = @asset_missing;
-  }
-
-  location @asset_missing {
-      add_header Cache-Control "no-store" always;
-      return 404;
   }
 
   # Serve static files

src/frontend/package-lock.json

@@ -1,40 +1,40 @@
 {
   "name": "meet",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.26.0",
+      "version": "1.28.0",
       "dependencies": {
-        "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
+        "@fontsource-variable/atkinson-hyperlegible-next": "5.3.0",
         "@fontsource-variable/lexend": "5.2.11",
         "@fontsource/opendyslexic": "5.2.5",
         "@libreaudio/la-call": "0.1.4",
-        "@livekit/components-react": "2.9.21",
+        "@livekit/components-react": "2.9.23",
         "@livekit/components-styles": "1.2.0",
         "@livekit/track-processors": "0.7.2",
         "@mediapipe/tasks-vision": "0.10.14",
-        "@pandacss/preset-panda": "1.11.3",
+        "@pandacss/preset-panda": "1.12.0",
         "@react-types/overlays": "3.10.0",
         "@remixicon/react": "4.9.0",
-        "@tanstack/react-query": "5.101.1",
+        "@tanstack/react-query": "5.101.4",
         "@timephy/rnnoise-wasm": "1.0.0",
         "crisp-sdk-web": "1.1.2",
         "hoofd": "1.7.3",
         "humanize-duration": "3.33.2",
-        "i18next": "26.3.1",
+        "i18next": "26.3.6",
         "i18next-browser-languagedetector": "8.2.1",
         "i18next-parser": "9.4.0",
-        "i18next-resources-to-backend": "1.2.1",
+        "i18next-resources-to-backend": "1.2.3",
-        "livekit-client": "2.20.0",
+        "livekit-client": "2.21.0",
-        "posthog-js": "1.395.0",
+        "posthog-js": "1.409.5",
         "react": "18.3.1",
         "react-aria": "3.50.0",
         "react-aria-components": "1.19.0",
         "react-dom": "18.3.1",
-        "react-i18next": "17.0.8",
+        "react-i18next": "17.0.10",
         "react-stately": "3.48.0",
         "use-sound": "5.0.0",
         "valtio": "2.3.2",
@@ -742,34 +742,34 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.7.5",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
-      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.11"
+        "@floating-ui/utils": "^0.2.12"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.7.4",
+      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
-      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/core": "^1.7.5",
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.11",
+      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
-      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
     "node_modules/@fontsource-variable/atkinson-hyperlegible-next": {
-      "version": "5.2.6",
+      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/atkinson-hyperlegible-next/-/atkinson-hyperlegible-next-5.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/atkinson-hyperlegible-next/-/atkinson-hyperlegible-next-5.3.0.tgz",
-      "integrity": "sha512-D0Z8peFkRGYACvmWp8Sl8YPGYLBEJbzqapugtsMEYSUUtpQDiZVDHjk9s7bqB4hSCRYCrKuW6V1V+mnHybVnPw==",
+      "integrity": "sha512-UnLzNUy1RWoLDfydAatP4NaRm99X/WbQEph7q/PymJnCFIOOwKOx3pBmp5ys8trO0dM+CKGuJgeZP9fAR4mQpA==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -966,12 +966,12 @@
       "license": "GPL-3.0+"
     },
     "node_modules/@livekit/components-core": {
-      "version": "0.12.13",
+      "version": "0.12.14",
-      "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.12.13.tgz",
+      "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.12.14.tgz",
-      "integrity": "sha512-DQmi84afHoHjZ62wm8y+XPNIDHTwFHAltjd3lmyXj8UZHOY7wcza4vFt1xnghJOD5wLRY58L1dkAgAw59MgWvw==",
+      "integrity": "sha512-6OKP/1Ok2fCZewDLKd3SzaTb7KvfZl/6hjggI+TgUdhp0Y7HBg3+tHA7YmhZRc0BO8wIyVy4VgTPn7qkLHt2nQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@floating-ui/dom": "1.7.4",
+        "@floating-ui/dom": "1.7.6",
         "loglevel": "1.9.1",
         "rxjs": "7.8.2"
       },
@@ -979,17 +979,17 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "livekit-client": "^2.17.2",
+        "livekit-client": "^2.20.1",
         "tslib": "^2.6.2"
       }
     },
     "node_modules/@livekit/components-react": {
-      "version": "2.9.21",
+      "version": "2.9.23",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.9.21.tgz",
+      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.9.23.tgz",
-      "integrity": "sha512-6hU9VucJJL+gAhilNGe4MBCDCZVk64qyjP9Ck86krvOIdVU76WeWksddg1MYUP10AlUwwrfD7davz41pJTcMJw==",
+      "integrity": "sha512-clO+0g/u3YBpuOvnAjUSAJBH/o7w+RpUAseswjiSML9rHrXlTUhwBNm8LPk+qN5GOU3A6lzsNnFYVpUHUBVOkg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@livekit/components-core": "0.12.13",
+        "@livekit/components-core": "0.12.14",
         "clsx": "2.1.1",
         "events": "^3.3.0",
         "jose": "^6.0.12",
@@ -999,8 +999,8 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "@livekit/krisp-noise-filter": "^0.2.12 || ^0.3.0",
+        "@livekit/krisp-noise-filter": "^0.2.12 || ^0.3.0 || ^0.4.0",
-        "livekit-client": "^2.18.2",
+        "livekit-client": "^2.20.1",
         "react": ">=18",
         "react-dom": ">=18",
         "tslib": "^2.6.2"
@@ -1027,9 +1027,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@livekit/protocol": {
-      "version": "1.46.6",
+      "version": "1.50.4",
-      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.46.6.tgz",
+      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.50.4.tgz",
-      "integrity": "sha512-upzlHP1vi/kZ/QqALZTFskQ0ifqc2f15RKucHYOsIHJsaXvEYanG75mAb7o+Yomfs4XhQ4BaRsdY+TFHXpaqrg==",
+      "integrity": "sha512-L1uggNQAqyY21smQY8AllyOYbcv9Me9TaxwuLytL1R8ck9nbYPmQLNwEDi3pOFGAMa5F8I2nUi2Jc59W5awxlA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@bufbuild/protobuf": "^1.10.0"
@@ -1642,21 +1642,21 @@
       }
     },
     "node_modules/@pandacss/preset-panda": {
-      "version": "1.11.3",
+      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@pandacss/preset-panda/-/preset-panda-1.11.3.tgz",
+      "resolved": "https://registry.npmjs.org/@pandacss/preset-panda/-/preset-panda-1.12.0.tgz",
-      "integrity": "sha512-IHeRQyIYeGKpQl78A/oI9fGg8MHQiOX/HttH+iQNaRU/MbGN6JsPe/N0ekQC6QY8iiKtLhqR+SRc455SN6JVWw==",
+      "integrity": "sha512-jhzhAmtGY34b1FlMJGEAh/IkfU4WyTNT2mpJfcBUPBi1rZLHSTcs0aqedRmMdwM4tTT43XFOXMiazbztKME60A==",
       "license": "MIT",
       "dependencies": {
-        "@pandacss/types": "1.11.3"
+        "@pandacss/types": "1.12.0"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@pandacss/preset-panda/node_modules/@pandacss/types": {
-      "version": "1.11.3",
+      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@pandacss/types/-/types-1.11.3.tgz",
+      "resolved": "https://registry.npmjs.org/@pandacss/types/-/types-1.12.0.tgz",
-      "integrity": "sha512-tUbxa3WzoCuulP6kcMn7f0uNgLBvu81JAg4sfoUpz6PZE36VHA3k9n6ROEwziTbr7vqgeCj5DYQCUldrVNbEGQ==",
+      "integrity": "sha512-PtlEIOBEV3RzWffeu1zH+/YFmP+fn24M63STGEbgTwjEBMhyo/FfT2sfZGB8oWAbWUBKBp69OMg25E+/rY3klQ==",
       "license": "MIT",
       "engines": {
         "node": ">=20"
@@ -1719,19 +1719,29 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@posthog/core": {
+    "node_modules/@posthog/browser-common": {
-      "version": "1.39.5",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.39.5.tgz",
+      "resolved": "https://registry.npmjs.org/@posthog/browser-common/-/browser-common-0.3.1.tgz",
-      "integrity": "sha512-M8Imv7ZmmrT6derMOFXhX3c5VKKO2oG6OX70ozLnNpKJV73sNIhYmRX/raa90saF7OA0YmWWJlpKje3irGAyQQ==",
+      "integrity": "sha512-1nhMVY1wnHADTg8tR9yvm+lPAz5ROxznfQlBtLzB2FFo4lp/LU8lk9KyFPsARDkBxCfYachsJfvRjocL1G/AJQ==",
       "license": "MIT",
       "dependencies": {
-        "@posthog/types": "^1.392.0"
+        "@posthog/core": "^1.46.0",
+        "@posthog/types": "^1.399.0"
+      }
+    },
+    "node_modules/@posthog/core": {
+      "version": "1.48.3",
+      "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.48.3.tgz",
+      "integrity": "sha512-kwVDVvwtCTXctApA2tpnwDjDDan8LrkwCW1Wv6PABaVs/s5ahbQ9W3pvdXcqr71HCuqukSA1jp7MySczebubGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@posthog/types": "^1.405.0"
       }
     },
     "node_modules/@posthog/types": {
-      "version": "1.392.0",
+      "version": "1.405.0",
-      "resolved": "https://registry.npmjs.org/@posthog/types/-/types-1.392.0.tgz",
+      "resolved": "https://registry.npmjs.org/@posthog/types/-/types-1.405.0.tgz",
-      "integrity": "sha512-nctNujXL3FC1v99FktaTMSugSD9ZOZekEpahUSafkU2TSvW+XGKNkQZbokuJtiWvPBK208dwMJva8UfBkChqpw==",
+      "integrity": "sha512-4rZ/taVXKQxs9Jrf7ZjlCRgrOSL69oKAgIWJQa5kRNJ6wll1UANbrJTSY+Su1e88LIG4zZVjKKKjyQHCkHdHcw==",
       "license": "MIT"
     },
     "node_modules/@react-aria/overlays": {
@@ -2414,9 +2424,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.101.1",
+      "version": "5.101.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.1.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.4.tgz",
-      "integrity": "sha512-Y6Y92dkXtNqx67m2pMSxUsA3zOCwv862JexZRP8/EPwvKXMPu9m8rv43spiXWzOUIggQ3SQApttALStzhA8B4g==",
+      "integrity": "sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -2435,12 +2445,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.101.1",
+      "version": "5.101.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.1.tgz",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.4.tgz",
-      "integrity": "sha512-ZnONUuQKJe1bJMStXUL1s5uKN9FcfC28j5cK+iDZcdSHtUv1wtin1cGc/Oewhf2Oc4eKY7lggtpvT/AbMmhHew==",
+      "integrity": "sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.101.1"
+        "@tanstack/query-core": "5.101.4"
       },
       "funding": {
         "type": "github",
@@ -4393,11 +4403,14 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.39.0",
+      "version": "3.50.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
-      "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
+      "integrity": "sha512-BRWgOLKkFeCgRudR6zrs8p9XJZcE14grzKMMssoYrk6krtuEZ7MTKPIY5RzOnqsEKIR9kst7wNzphttraT+Yqw==",
       "hasInstallScript": true,
       "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/core-js"
@@ -6400,9 +6413,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "26.3.1",
+      "version": "26.3.6",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.6.tgz",
-      "integrity": "sha512-txQqd5EULsqEh9OJqRH15aCaOuy/nLJyhw5EHCSKLKJE1aBbb3Zve2+uQIxgWhPm1QqUQoWyQBm2kfmmIrzkcQ==",
+      "integrity": "sha512-Bu5Z2nAXgfVyM8xvW3jk9EKRIuX37PudsrBViThNFx7CR7aaYTpP01cxNB/E4c4UUzTDiAZRstEhsRfPOL/8xA==",
       "funding": [
         {
           "type": "individual",
@@ -6419,7 +6432,7 @@
       ],
       "license": "MIT",
       "peerDependencies": {
-        "typescript": "^5 || ^6"
+        "typescript": "^5 || ^6 || ^7"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -6972,9 +6985,10 @@
       }
     },
     "node_modules/i18next-resources-to-backend": {
-      "version": "1.2.1",
+      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.3.tgz",
-      "integrity": "sha512-okHbVA+HZ7n1/76MsfhPqDou0fptl2dAlhRDu2ideXloRRduzHsqDOznJBef+R3DFZnbvWoBW+KxJ7fnFjd6Yw==",
+      "integrity": "sha512-8Y/LLAm5fqZc2ckQxtTWbu75ndjNLzF7mcYl6rhc4g+WBopIsG3YhdYqF5qhJy64tlYhlU2KSSnEgW3gGHLqwg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -8109,20 +8123,20 @@
       "license": "MIT"
     },
     "node_modules/livekit-client": {
-      "version": "2.20.0",
+      "version": "2.21.0",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.20.0.tgz",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.21.0.tgz",
-      "integrity": "sha512-RIJcpvBmOmwz3jTj3rmdY6Dzr55HrhcaJjMgY+HSmoEM+yIRyA40m7r8UKv0hnZWM3z/AYhP1q8C8ciz5UWFKQ==",
+      "integrity": "sha512-RBUhPkV/sl1nzl8lokVlK5uATPwn0AlsudCBZXissw/kDl9yz8ac4pNJ43iPpMVoHOeBYH/BZ3vUC1adqa/zFQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@livekit/mutex": "1.1.1",
-        "@livekit/protocol": "1.46.6",
+        "@livekit/protocol": "1.50.4",
         "events": "^3.3.0",
         "jose": "^6.1.0",
         "loglevel": "^1.9.2",
         "sdp-transform": "^2.15.0",
         "tslib": "2.8.1",
         "typed-emitter": "^2.1.0",
-        "webrtc-adapter": "9.0.5"
+        "webrtc-adapter": "9.0.6"
       },
       "peerDependencies": {
         "@types/dom-mediacapture-record": "^1"
@@ -9120,17 +9134,18 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.395.0",
+      "version": "1.409.5",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.395.0.tgz",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.409.5.tgz",
-      "integrity": "sha512-5iTb00CGt2eQUUiBQysQiX89RAbCN6wK2sDNzvs9zv0alaY8mJ0ZySrUD3LQ+XyLhgM5pCpacBuUwChqiYDLDw==",
+      "integrity": "sha512-s1iJz+vq0YAluUD4OwLjUFIJt/9pqiiB6MITvHWIS16a7pqTJqbSLXsd5/8kJcIgfrOSZHe+mdYAXLYcJCS4LQ==",
-      "license": "SEE LICENSE IN LICENSE",
+      "license": "(Apache-2.0 AND MIT)",
       "dependencies": {
-        "@posthog/core": "^1.38.0",
+        "@posthog/browser-common": "^0.3.1",
-        "@posthog/types": "^1.391.1",
+        "@posthog/core": "^1.46.1",
-        "core-js": "^3.38.1",
+        "@posthog/types": "^1.399.0",
+        "core-js": "^3.49.0",
         "dompurify": "^3.3.2",
         "fflate": "^0.4.8",
-        "preact": "^10.29.2",
+        "preact": "^10.29.3",
         "query-selector-shadow-dom": "^1.0.1",
         "web-vitals": "^5.3.0"
       }
@@ -9422,9 +9437,9 @@
       }
     },
     "node_modules/react-i18next": {
-      "version": "17.0.8",
+      "version": "17.0.10",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.10.tgz",
-      "integrity": "sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw==",
+      "integrity": "sha512-XneHftyYA774MJkkccSkZ5oKrUpCnXIPmxio3wemqrVzCRLWiGXOMbIzObrer03fNDEnm8g8R5yYls4HcE+esg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.29.2",
@@ -9434,7 +9449,7 @@
       "peerDependencies": {
         "i18next": ">= 26.2.0",
         "react": ">= 16.8.0",
-        "typescript": "^5 || ^6"
+        "typescript": "^5 || ^6 || ^7"
       },
       "peerDependenciesMeta": {
         "react-dom": {
@@ -11645,9 +11660,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/webrtc-adapter": {
-      "version": "9.0.5",
+      "version": "9.0.6",
-      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.6.tgz",
-      "integrity": "sha512-U9vjByy/sK2OMXu5mmfuZFKTMIUQe34c0JXRO+oDrxJTsntdYT2iIFwYMOV7HhMTuktcZLGf2W1N/OcSf9ssWg==",
+      "integrity": "sha512-CHbl2ZQbxx164IgWRgzJno4hWtM4tFbRam1QfI3Yxhs3w/DvqluVxVWeXs3oL5/fbGkSNLKo0Ty5MgUWceNhog==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "sdp": "^3.2.0"

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "1.26.0",
+  "version": "1.28.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -15,33 +15,33 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
+    "@fontsource-variable/atkinson-hyperlegible-next": "5.3.0",
     "@fontsource-variable/lexend": "5.2.11",
     "@fontsource/opendyslexic": "5.2.5",
     "@libreaudio/la-call": "0.1.4",
-    "@livekit/components-react": "2.9.21",
+    "@livekit/components-react": "2.9.23",
     "@livekit/components-styles": "1.2.0",
     "@livekit/track-processors": "0.7.2",
     "@mediapipe/tasks-vision": "0.10.14",
-    "@pandacss/preset-panda": "1.11.3",
+    "@pandacss/preset-panda": "1.12.0",
     "@react-types/overlays": "3.10.0",
     "@remixicon/react": "4.9.0",
-    "@tanstack/react-query": "5.101.1",
+    "@tanstack/react-query": "5.101.4",
     "@timephy/rnnoise-wasm": "1.0.0",
     "crisp-sdk-web": "1.1.2",
     "hoofd": "1.7.3",
     "humanize-duration": "3.33.2",
-    "i18next": "26.3.1",
+    "i18next": "26.3.6",
     "i18next-browser-languagedetector": "8.2.1",
     "i18next-parser": "9.4.0",
-    "i18next-resources-to-backend": "1.2.1",
+    "i18next-resources-to-backend": "1.2.3",
-    "livekit-client": "2.20.0",
+    "livekit-client": "2.21.0",
-    "posthog-js": "1.395.0",
+    "posthog-js": "1.409.5",
     "react": "18.3.1",
     "react-aria": "3.50.0",
     "react-aria-components": "1.19.0",
     "react-dom": "18.3.1",
-    "react-i18next": "17.0.8",
+    "react-i18next": "17.0.10",
     "react-stately": "3.48.0",
     "use-sound": "5.0.0",
     "valtio": "2.3.2",

src/frontend/src/components/SoundTester.tsx

@@ -3,27 +3,30 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useMediaDeviceSelect } from '@livekit/components-react'
 import { reportError } from '@/features/analytics/telemetry'
+import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
 
 export const SoundTester = () => {
   const { t } = useTranslation('settings')
   const [isPlaying, setIsPlaying] = useState(false)
   const audioRef = useRef<HTMLAudioElement>(null)
 
-  const { activeDeviceId } = useMediaDeviceSelect({ kind: 'audiooutput' })
+  const { devices, activeDeviceId } = useMediaDeviceSelect({
+    kind: 'audiooutput',
+  })
 
   useEffect(() => {
-    const updateActiveId = async (deviceId: string) => {
+    if (!canTestAudioOutput() || !activeDeviceId) return
-      try {
+    if (!devices.some((device) => device.deviceId === activeDeviceId)) return
-        await audioRef?.current?.setSinkId(deviceId)
+    audioRef.current?.setSinkId(activeDeviceId).catch((error) => {
-      } catch (error) {
+      if (error instanceof DOMException && error.name === 'NotFoundError') {
+        return
+      }
       reportError(
         'device_switch_failure',
         new Error(`Error setting sinkId: ${error}`)
       )
-      }
+    })
-    }
+  }, [devices, activeDeviceId])
-    updateActiveId(activeDeviceId)
-  }, [activeDeviceId])
 
   // prevent pausing the sound
   navigator.mediaSession.setActionHandler('pause', function () {})
@@ -32,9 +35,13 @@ export const SoundTester = () => {
     <>
       <Button
         variant="secondaryText"
-        onPress={() => {
+        onPress={async () => {
-          audioRef?.current?.play()
+          try {
+            await audioRef?.current?.play()
             setIsPlaying(true)
+          } catch {
+            setIsPlaying(false)
+          }
         }}
         size="sm"
         isDisabled={isPlaying}
@@ -48,7 +55,7 @@ export const SoundTester = () => {
       {/* eslint-disable jsx-a11y/media-has-caption */}
       <audio
         ref={audioRef}
-        src="sounds/uprise.mp3"
+        src="/sounds/uprise.mp3"
         onEnded={() => setIsPlaying(false)}
       />
     </>

src/frontend/src/features/analytics/exceptionFilters.ts

@@ -0,0 +1,30 @@
+import type { CaptureResult } from 'posthog-js'
+
+const IGNORED_EXCEPTION_PATTERNS = [
+  /ResizeObserver loop (completed with undelivered notifications|limit exceeded)/,
+  // livekit-client leaks the raw WebSocket error Event as an unhandled
+  // rejection when the signal ws errors after connect (Firefox-heavy,
+  // coincides with signal reconnects). Carries zero diagnostic content —
+  // the close reason is already logged by the SDK.
+  // See: https://github.com/livekit/client-sdk-js/issues/2062
+  /^Event captured as exception with keys: isTrusted$/,
+]
+
+const shouldIgnoreException = (value: unknown): boolean =>
+  typeof value === 'string' &&
+  IGNORED_EXCEPTION_PATTERNS.some((pattern) => pattern.test(value))
+
+export const filterExceptions = (
+  event: CaptureResult | null
+): CaptureResult | null => {
+  if (event?.event !== '$exception') return event
+
+  const exceptionList = event.properties?.['$exception_list']
+  const values: unknown[] = Array.isArray(exceptionList)
+    ? exceptionList.map((exception) => exception?.value)
+    : []
+
+  values.push(event.properties?.['$exception_message'])
+
+  return values.some(shouldIgnoreException) ? null : event
+}

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

@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import { type ApiUser } from '@/features/auth/api/ApiUser'
 import { useUser } from '@/features/auth/api/useUser'
 import { getPosthog } from '../utils'
+import { filterExceptions } from '../exceptionFilters'
 
 export const startAnalyticsSession = (data: ApiUser) => {
   getPosthog().then((ph) => {
@@ -47,6 +48,7 @@ export const useAnalytics = ({
           capture_unhandled_rejections: true,
           capture_console_errors: true,
         },
+        before_send: filterExceptions,
       })
     })
   }, [id, host, flags_api_host, isDisabled])

src/frontend/src/features/analytics/telemetry.ts

@@ -23,6 +23,7 @@ export type LogCode =
   | 'livekit_room_error'
   | 'device_switch_failure'
   | 'permission_poll_failure'
+  | 'media_devices_error_event'
   // non-media families
   | 'participant_mute_api_failure'
   | 'permissions_api_failure'
@@ -136,7 +137,9 @@ export const captureMediaEvent = async (
     | 'media-device-topology'
     | 'media-device-success'
     | 'device-not-found'
+    | 'device-in-use'
     | 'permissions-denied'
+    | 'screen-share-permission-denied'
     | 'silent-mic-detected'
     | 'silent-mic-analyser-unavailable'
     | 'silent-mic-recovered'

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

@@ -6,6 +6,8 @@ import { queryClient } from '@/api/queryClient'
 import { updateUserPreferences } from './updateUserPreferences'
 import { convertToBackendLanguage } from '@/utils/languages'
 import { useUser } from './useUser'
+import { ApiError } from '@/api/ApiError.ts'
+import { reportError } from '@/features/analytics/telemetry'
 
 /**
  * Hook that synchronizes user browser preferences (language, timezone) with backend user settings.
@@ -42,6 +44,11 @@ export const useSyncUserPreferencesWithBackend = () => {
       }
     }
 
-    syncBrowserPreferencesToBackend()
+    syncBrowserPreferencesToBackend().catch((error) => {
+      if (error instanceof ApiError && error.statusCode === 401) return
+      reportError('generic_failure', error, {
+        context: '[useSyncUserPreferencesWithBackend] Failed to sync:',
+      })
+    })
   }, [i18n.language, isLoggedIn, user, mutateAsync])
 }

src/frontend/src/features/chat/components/ChatMessageBody.tsx

@@ -1,6 +1,6 @@
 import { ChatRow } from '@/stores/chat'
 import React, { useMemo } from 'react'
-import { formatChatMessageLinks } from '@livekit/components-react'
+import { formatChatMessageLinks } from '../utils'
 import { css } from '@/styled-system/css'
 import { Text } from '@/primitives'
 

src/frontend/src/features/chat/components/ChatProvider.tsx

@@ -23,7 +23,7 @@ export const ChatProvider = () => {
     resetChatStore()
   }, [])
 
-  // Tigger the message notification (temporary)
+  // Trigger the message notification (temporary)
   useEffect(() => {
     // TEMPORARY: This is a brittle workaround that relies on message count tracking
     // due to recent LiveKit useChat changes breaking the previous implementation

src/frontend/src/features/chat/utils.tsx

@@ -0,0 +1,32 @@
+import { tokenize, createDefaultGrammar } from '@livekit/components-core'
+import { ReactNode } from 'react'
+
+const defaultGrammar = Object.freeze(createDefaultGrammar())
+
+export function formatChatMessageLinks(message: string): ReactNode {
+  const trimmedMessage = message.replace(/^[\r\n]+|[\r\n]+$/g, '')
+  return tokenize(trimmedMessage, defaultGrammar).map((tok, i) => {
+    if (typeof tok === `string`) {
+      return tok
+    } else {
+      const content = tok.content.toString()
+      const href =
+        tok.type === `url`
+          ? /^http(s?):\/\//.test(content)
+            ? content
+            : `https://${content}`
+          : `mailto:${content}`
+      return (
+        <a
+          className="lk-chat-link"
+          key={i}
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {content}
+        </a>
+      )
+    }
+  })
+}

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

@@ -15,7 +15,7 @@ import { css } from '@/styled-system/css'
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
 import { LoadingScreen } from '@/components/LoadingScreen'
-import { reportError } from '@/features/analytics/telemetry'
+import { captureEvent } from '@/features/analytics/telemetry'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -161,8 +161,10 @@ const Home = () => {
           window.location.replace(data.external_home_url)
         } catch (error) {
           setRedirectFailed(true)
-          reportError('generic_failure', error, {
+          captureEvent('external-home-unreachable', {
-            context: 'Site is not reachable:',
+            error_name: error instanceof Error ? error.name : 'Unknown',
+            error_message:
+              error instanceof Error ? error.message : String(error),
           })
         }
       }

src/frontend/src/features/layout/components/ControlBarRegion.tsx

@@ -13,7 +13,7 @@ const controlBarRegion = cva({
     mobile: {
       true: {
         justifyContent: 'center',
-        width: '330px',
+        width: '100%',
       },
     },
   },

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

@@ -1,5 +1,5 @@
 import { useToast } from 'react-aria'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import { Button as RACButton } from 'react-aria-components'
 import { Track } from 'livekit-client'
 import Source = Track.Source
@@ -11,6 +11,7 @@ import { Div } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { StyledToastContainer } from './StyledToastContainer'
 import { setPinnedTrack } from '@/stores/layout'
+import { useParticipantTracks } from '@livekit/components-react'
 
 const ClickableToast = styled(RACButton, {
   base: {
@@ -30,13 +31,17 @@ export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
   )
   const participant = props.toast.content.participant
 
-  if (!participant) return
+  const [cameraTrack] = useParticipantTracks(
+    [Source.Camera],
+    participant?.identity
+  )
 
-  const trackReference = {
+  const trackReference = useMemo(
-    participant,
+    () => cameraTrack ?? { participant, source: Source.Camera },
-    publication: participant.getTrackPublication(Source.Camera),
+    [cameraTrack, participant]
-    source: Source.Camera,
+  )
-  }
+
+  if (!participant) return
 
   return (
     <StyledToastContainer {...toastProps} ref={ref}>

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

@@ -6,7 +6,7 @@ import type { NotificationType } from '@/features/notifications/NotificationType
 // fixme - handle dynamic audio output changes
 export const useNotificationSound = () => {
   const notificationsSnap = useSnapshot(notificationsStore)
-  const [play] = useSound('./sounds/notifications.mp3', {
+  const [play] = useSound('/sounds/notifications.mp3', {
     sprite: {
       participantJoined: [0, 1150],
       handRaised: [1400, 180],

src/frontend/src/features/participantTile/components/participantTileFocus/MuteButton.tsx

@@ -1,11 +1,9 @@
 import { Participant, Track } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { useTrackMutedIndicator } from '@livekit/components-react'
-import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
-import { useState } from 'react'
 import { Button } from '@/primitives'
 import { RiMicLine, RiMicOffLine } from '@remixicon/react'
-import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
+import { openMuteDialog } from '@/stores/muteDialog'
 
 export const MuteButton = ({ participant }: { participant: Participant }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
@@ -15,31 +13,18 @@ export const MuteButton = ({ participant }: { participant: Participant }) => {
     source: Track.Source.Microphone,
   })
 
-  const { muteParticipant } = useMuteParticipant()
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
-
   const name = participant.name || participant.identity
 
   return (
-    <>
     <Button
       isDisabled={isMuted}
       size={'sm'}
       variant={'primaryTextDark'}
       square
-        onPress={() => setIsAlertOpen(true)}
+      onPress={() => openMuteDialog(participant)}
       tooltip={t('muteParticipant', { name })}
     >
       {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
     </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
   )
 }

src/frontend/src/features/participants/components/ParticipantRow.tsx

@@ -19,13 +19,11 @@ import {
 import Source = Track.Source
 import { RiMicFill, RiMicOffFill } from '@remixicon/react'
 import { Button } from '@/primitives'
-import { useState } from 'react'
-import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 import { ParticipantMenuButton } from './menu/ParticipantMenuButton'
 import { PinBadge } from './PinBadge'
 import { UnauthenticatedBadge } from './UnauthenticatedBadge'
-import { MuteAlertDialog } from '@/features/rooms/livekit/components/MuteAlertDialog'
+import { openMuteDialog } from '@/stores/muteDialog'
 import { ParticipantName } from './ParticipantName'
 
 type MicIndicatorProps = {
@@ -34,7 +32,6 @@ type MicIndicatorProps = {
 
 const MicIndicator = ({ participant }: MicIndicatorProps) => {
   const { t } = useTranslation('rooms')
-  const { muteParticipant } = useMuteParticipant()
   const { isMuted } = useTrackMutedIndicator({
     participant: participant,
     source: Source.Microphone,
@@ -42,7 +39,6 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
 
   const canMute = useCanMute(participant)
   const isSpeaking = useIsSpeaking(participant)
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
   const name = participant.name || participant.identity
 
   const label = isLocal(participant)
@@ -52,7 +48,6 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
       })
 
   return (
-    <>
     <Button
       square
       variant="greyscale"
@@ -62,10 +57,8 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
       isDisabled={isMuted || !canMute}
       onPress={async () =>
         !isMuted && isLocal(participant)
-            ? await (participant as LocalParticipant)?.setMicrophoneEnabled(
+          ? await (participant as LocalParticipant)?.setMicrophoneEnabled(false)
-                false
+          : openMuteDialog(participant)
-              )
-            : setIsAlertOpen(true)
       }
       data-attr="participants-mute"
     >
@@ -83,15 +76,6 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
         />
       )}
     </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
   )
 }
 

src/frontend/src/features/participants/hooks/useWaitingParticipants.ts

@@ -1,61 +1,31 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
-import { useRoomContext } from '@livekit/components-react'
+
-import { RoomEvent } from 'livekit-client'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
-import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { useCanManageLobby } from '@/features/rooms/livekit/hooks/useCanManageLobby'
 import { useEnterRoom } from '../api/enterRoom'
 import {
   useListWaitingParticipants,
   type WaitingParticipant,
 } from '../../participants/api/listWaitingParticipants'
-import { decodeNotificationDataReceived } from '@/features/notifications/utils'
-import { NotificationType } from '@/features/notifications/NotificationType'
 import { reportError } from '@/features/analytics/telemetry'
 
-export const POLL_INTERVAL_MS = 1000
-
 export const useWaitingParticipants = () => {
-  const [listEnabled, setListEnabled] = useState(true)
-
   const roomData = useRoomData()
   const roomId = roomData?.id || '' // FIXME - bad practice
 
-  const room = useRoomContext()
+  const canManageLobby = useCanManageLobby()
-  const isAdminOrOwner = useIsAdminOrOwner()
-
-  const handleDataReceived = useCallback((payload: Uint8Array) => {
-    const notification = decodeNotificationDataReceived(payload)
-    if (notification?.type === NotificationType.ParticipantWaiting) {
-      setListEnabled(true)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (isAdminOrOwner) {
-      room.on(RoomEvent.DataReceived, handleDataReceived)
-    }
-    return () => {
-      room.off(RoomEvent.DataReceived, handleDataReceived)
-    }
-  }, [isAdminOrOwner, room, handleDataReceived])
 
   const { data: waitingData, refetch: refetchWaiting } =
     useListWaitingParticipants(roomId, {
       retry: false,
-      enabled: listEnabled && isAdminOrOwner,
+      enabled: false,
-      refetchInterval: POLL_INTERVAL_MS,
-      refetchIntervalInBackground: true,
     })
 
   const waitingParticipants = useMemo(
-    () => waitingData?.participants || [],
+    () => (canManageLobby ? waitingData?.participants || [] : []),
-    [waitingData]
+    [waitingData, canManageLobby]
   )
 
-  useEffect(() => {
-    if (!waitingParticipants.length) setListEnabled(false)
-  }, [waitingParticipants])
-
   const { mutateAsync: enterRoom } = useEnterRoom()
 
   const handleParticipantEntry = async (
@@ -74,8 +44,6 @@ export const useWaitingParticipants = () => {
     allowEntry: boolean
   ): Promise<void> => {
     try {
-      setListEnabled(false)
-
       await Promise.all(
         waitingParticipants.map((participant) =>
           enterRoom({
@@ -89,7 +57,6 @@ export const useWaitingParticipants = () => {
       await refetchWaiting()
     } catch (e) {
       reportError('generic_failure', e)
-      setListEnabled(true)
     }
   }
 

src/frontend/src/features/reactions/components/ReactionsToggle.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiEmotionLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
@@ -7,6 +6,8 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
 import { REACTIONS_TOOLBAR_ID } from '../constants'
 import { useReactionsToolbar } from '../hooks/useReactionsToolbar'
 import { layoutStore } from '@/stores/layout'
+import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 const focusReactionsToolbar = () => {
   document
@@ -17,35 +18,44 @@ const focusReactionsToolbar = () => {
 
 export const REACTIONS_TOGGLE_ID = 'reactions-toggle'
 
-export const ReactionsToggle = () => {
+/* eslint-disable react-refresh/only-export-components */
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+export const reactionShortcutHandler = () => {
-
-  const { isOpen, toggle } = useReactionsToolbar()
-
-  const handleShortcut = useCallback(() => {
   if (layoutStore.showReactionsToolbar) {
     focusReactionsToolbar()
   } else {
     layoutStore.showReactionsToolbar = true
   }
-  }, [])
+}
+
+type Props = Pick<NonNullable<ButtonRecipeProps>, 'variant'> & ToggleButtonProps
+
+export const ReactionsToggle = ({
+  variant = 'primaryDark',
+  onPress,
+  ...props
+}: Props) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+
+  const { isOpen, toggle } = useReactionsToolbar()
 
   useRegisterKeyboardShortcut({
     id: 'reaction',
-    handler: handleShortcut,
+    handler: reactionShortcutHandler,
   })
 
   return (
     <ToggleButton
+      {...props}
       id={REACTIONS_TOGGLE_ID}
       data-attr="reactions-toggle"
       square
-      variant="primaryDark"
+      variant={variant}
       aria-label={t('button')}
       aria-expanded={isOpen}
       tooltip={t('button')}
       isSelected={isOpen}
       onChange={toggle}
+      onPress={onPress}
     >
       <RiEmotionLine />
     </ToggleButton>

src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx

@@ -26,8 +26,8 @@ const StyledContainer = styled('div', {
     backgroundColor: 'primaryDark.100',
     maxWidth: '100%',
     opacity: 0,
-    transform: 'translateY(3.25rem)',
+    translate: '0 3.25rem',
-    transition: 'opacity, transform',
+    transition: 'opacity, translate',
     transitionDuration: '0.5s',
     transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
     pointerEvents: 'none',
@@ -36,7 +36,7 @@ const StyledContainer = styled('div', {
     isVisible: {
       true: {
         opacity: 1,
-        transform: 'translateY(0)',
+        translate: '0 0',
         pointerEvents: 'auto',
       },
     },
@@ -84,7 +84,7 @@ export const ReactionButtonsContainer = ({
     shouldBeCenteredWithToggleButton,
     setShouldBeCenteredWithToggleButton,
   ] = useState(false)
-  const [rightOffset, setRightOffset] = useState(0)
+  const [offsetX, setOffsetX] = useState(0)
 
   const updateArrows = useCallback(() => {
     const el = scrollRef.current
@@ -115,7 +115,7 @@ export const ReactionButtonsContainer = ({
 
   useLayoutEffect(() => {
     if (!shouldBeCenteredWithToggleButton || isMobile) {
-      setRightOffset(0)
+      setOffsetX(0)
       return
     }
 
@@ -133,7 +133,7 @@ export const ReactionButtonsContainer = ({
       const containerCenterX = containerRect.left + containerRect.width / 2
       const shift = toggleCenterX - containerCenterX
       if (Math.abs(shift) < 0.5) return
-      setRightOffset((prev) => prev - shift * 2)
+      setOffsetX((prev) => prev + shift)
     }
 
     const schedule = () => {
@@ -182,7 +182,7 @@ export const ReactionButtonsContainer = ({
       isVisible={isVisible}
       style={
         shouldBeCenteredWithToggleButton && !isMobile && adjustedCentering
-          ? { marginRight: `${rightOffset}px` }
+          ? { transform: `translateX(${offsetX}px)` }
           : { margin: '0 15px' }
       }
     >

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

@@ -1,17 +1,20 @@
 import { useStartRecording, useStopRecording } from '@/features/recording'
 import { recordingStore } from '@/stores/recording'
+import { captureEvent } from '@/features/analytics/telemetry'
 
 export const useMutateRecording = () => {
   const { mutateAsync: startRecording, isPending: isPendingToStart } =
     useStartRecording({
       onError: () => {
         recordingStore.isErrorDialogOpen = 'start'
+        captureEvent('error-starting-recording')
       },
     })
   const { mutateAsync: stopRecording, isPending: isPendingToStop } =
     useStopRecording({
       onError: () => {
         recordingStore.isErrorDialogOpen = 'stop'
+        captureEvent('error-stopping-recording')
       },
     })
 

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

@@ -6,12 +6,15 @@ import {
   usePersistentUserChoices,
 } from '@livekit/components-react'
 import {
+  ConnectionError,
+  ConnectionErrorReason,
   DisconnectReason,
   MediaDeviceFailure,
   Room,
   type RoomOptions,
   VideoPresets,
 } from 'livekit-client'
+import { getMediaDeviceFailure } from '@/features/rooms/livekit/utils/mediaPermissions'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
 import { Screen } from '@/layout/Screen'
@@ -25,18 +28,22 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import {
+  captureEvent,
+  captureMediaEvent,
+  reportError,
+} from '@/features/analytics/telemetry'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
 import { navigateTo } from '@/navigation/navigateTo'
-import { connectionObserverStore } from '@/stores/connectionObserver'
 import { PictureInPictureConference } from '@/features/pip/components/PictureInPictureConference'
 import { notifyAutoMutedOnJoin } from '@/features/notifications/utils'
 import { useSnapshot } from 'valtio'
 import { userPreferencesStore } from '@/stores/userPreferences'
 import { userStore } from '@/stores/user'
 import { WatchMediaDeviceErrors } from './WatchMediaDeviceErrors'
+import { VOICE_AUDIO_CONSTRAINTS } from '@/features/rooms/livekit/utils/constants'
 
 export const Conference = ({
   roomId,
@@ -109,6 +116,7 @@ export const Conference = ({
       },
       audioCaptureDefaults: {
         deviceId: userConfig.audioDeviceId ?? undefined,
+        ...VOICE_AUDIO_CONSTRAINTS,
       },
       audioOutput: {
         deviceId: userConfig.audioOutputDeviceId ?? undefined,
@@ -226,9 +234,20 @@ export const Conference = ({
             backgroundColor: 'primaryDark.50 !important',
           })}
           onError={(e) => {
+            const failure = getMediaDeviceFailure(e)
+            if (failure && failure !== MediaDeviceFailure.Other) return
+
+            // connect() was aborted by a disconnect() before the join completed
+            if (
+              e instanceof ConnectionError &&
+              e.reason === ConnectionErrorReason.Cancelled
+            ) {
+              void captureEvent('connection-cancelled')
+              return
+            }
+
             reportError('livekit_room_error', e, {
               path: 'connect_publish',
-              failure: MediaDeviceFailure.getFailure(e) ?? 'not-a-device-error',
             })
           }}
           onConnected={async () => {
@@ -247,23 +266,8 @@ export const Conference = ({
           onDisconnected={(e) => {
             const metadata = {
               room_id: roomId,
-              pc_publisher: connectionObserverStore.publisher && {
-                ...connectionObserverStore.publisher,
-              },
-              pc_subscriber: connectionObserverStore.subscriber && {
-                ...connectionObserverStore.subscriber,
-              },
-              pc_publisher_changes_count:
-                connectionObserverStore.publisherChangesCount,
-              pc_subscriber_changes_count:
-                connectionObserverStore.subscriberChangesCount,
             }
 
-            connectionObserverStore.publisher = null
-            connectionObserverStore.publisherChangesCount = 0
-            connectionObserverStore.subscriber = null
-            connectionObserverStore.subscriberChangesCount = 0
-
             switch (e) {
               case DisconnectReason.CLIENT_INITIATED:
                 navigateTo(

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

@@ -28,6 +28,7 @@ import {
   userChoicesStore,
 } from '@/stores/userChoices'
 import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'
+import { useDeviceInUse } from '../livekit/hooks/useDeviceInUse'
 import { useDeviceMissing } from '../livekit/hooks/useDeviceMissing'
 import { useJoinTracks } from '../livekit/hooks/useJoinTracks'
 import { SilentMicDetector } from './SilentMicDetector'
@@ -218,12 +219,14 @@ const switchTrackDevice =
 function getPreviewMessages({
   cameraFound,
   cameraDenied,
+  cameraInUse,
   micDenied,
   videoEnabled,
   videoStarted,
 }: {
   cameraFound: boolean
   cameraDenied: boolean
+  cameraInUse: boolean
   micDenied: boolean
   videoEnabled: boolean
   videoStarted: boolean
@@ -235,6 +238,9 @@ function getPreviewMessages({
     const key = micDenied ? 'cameraAndMicNotGranted' : 'cameraNotGranted'
     return { hint: key, permissionsButtonLabel: key }
   }
+  if (cameraInUse) {
+    return { hint: 'cameraInUse', permissionsButtonLabel: null }
+  }
   if (!videoEnabled) {
     return { hint: 'cameraDisabled', permissionsButtonLabel: null }
   }
@@ -328,18 +334,20 @@ const VideoPreview = ({
   const cameraDenied = useCannotUseDevice('videoinput')
   const micDenied = useCannotUseDevice('audioinput')
   const cameraMissing = useDeviceMissing('videoinput')
+  const cameraInUse = useDeviceInUse('videoinput')
 
   const { videoEl, videoStarted } = useAttachedVideo(videoTrack, videoEnabled)
 
   const { hint, permissionsButtonLabel } = getPreviewMessages({
     cameraFound: !cameraMissing,
     cameraDenied,
+    cameraInUse,
     micDenied,
     videoEnabled,
     videoStarted,
   })
 
-  const isError = cameraMissing || cameraDenied
+  const isError = cameraMissing || cameraDenied || cameraInUse
 
   return (
     <div className={styles.previewFrame}>

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

@@ -0,0 +1,114 @@
+import { useCallback, useEffect } from 'react'
+import { useConnectionState, useRoomContext } from '@livekit/components-react'
+import { ConnectionState, RoomEvent } from 'livekit-client'
+import { useCanManageLobby } from '@/features/rooms/livekit/hooks/useCanManageLobby'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { useListWaitingParticipants } from '@/features/participants/api/listWaitingParticipants'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { decodeNotificationDataReceived } from '@/features/notifications/utils'
+import { NotificationType } from '@/features/notifications'
+import { usePrevious } from '@/hooks/usePrevious'
+import { keys } from '@/api/queryKeys'
+import { queryClient } from '@/api/queryClient'
+import { ApiError } from '@/api/ApiError'
+
+export const POLL_INTERVAL_MS = 1000
+export const LAZY_POLL_INTERVAL_MS = 10_000
+
+export const LobbyProvider = () => {
+  const room = useRoomContext()
+
+  const canManageLobby = useCanManageLobby()
+  const roomData = useRoomData()
+  const { isParticipantsOpen } = useSidePanel()
+  const isConnected = useConnectionState(room) === ConnectionState.Connected
+
+  const roomId = roomData?.id || '' // FIXME - bad practice
+
+  const { error: waitingError, refetch: refetchWaiting } =
+    useListWaitingParticipants(roomId, {
+      retry: false,
+      enabled: canManageLobby && isConnected && !!roomId,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchInterval: (query) => {
+        if (!query.state.data?.participants?.length) return false
+        if (isParticipantsOpen) return POLL_INTERVAL_MS
+        return LAZY_POLL_INTERVAL_MS
+      },
+      refetchIntervalInBackground: true,
+    })
+
+  // Triggers: each one-shot, idempotent, deduped by React Query if
+  // concurrent. The interval takes over whenever a fetch finds waiters.
+  const fetchIfManager = useCallback(() => {
+    if (canManageLobby) refetchWaiting()
+  }, [canManageLobby, refetchWaiting])
+
+  // 1. Connection established (join or reconnect)
+  useEffect(() => {
+    room.on(RoomEvent.Connected, fetchIfManager)
+    room.on(RoomEvent.Reconnected, fetchIfManager)
+    return () => {
+      room.off(RoomEvent.Connected, fetchIfManager)
+      room.off(RoomEvent.Reconnected, fetchIfManager)
+    }
+  }, [room, fetchIfManager])
+
+  // 2. Someone started waiting (LiveKit broadcast).
+  const handleDataReceived = useCallback(
+    (payload: Uint8Array) => {
+      const notification = decodeNotificationDataReceived(payload)
+      if (notification?.type === NotificationType.ParticipantWaiting) {
+        fetchIfManager()
+      }
+    },
+    [fetchIfManager]
+  )
+
+  useEffect(() => {
+    if (canManageLobby) {
+      room.on(RoomEvent.DataReceived, handleDataReceived)
+    }
+    return () => {
+      room.off(RoomEvent.DataReceived, handleDataReceived)
+    }
+  }, [canManageLobby, room, handleDataReceived])
+
+  // 3. Rights regained.
+  const prevCanManageLobby = usePrevious(canManageLobby)
+  useEffect(() => {
+    if (!prevCanManageLobby && canManageLobby && isConnected) {
+      fetchIfManager()
+    }
+  }, [
+    prevCanManageLobby,
+    canManageLobby,
+    isParticipantsOpen,
+    fetchIfManager,
+    isConnected,
+  ])
+
+  const clearWaitingList = useCallback(() => {
+    const queryKey = [keys.waitingParticipants, roomId]
+    queryClient.cancelQueries({ queryKey })
+    queryClient.setQueryData(queryKey, { participants: [] })
+  }, [roomId])
+
+  // Rights lost mid-meeting (covers trusted -> restricted/public).
+  useEffect(() => {
+    if (prevCanManageLobby && !canManageLobby) clearWaitingList()
+  }, [prevCanManageLobby, canManageLobby, clearWaitingList])
+
+  useEffect(() => {
+    if (
+      waitingError instanceof ApiError &&
+      [401, 403].includes(waitingError.statusCode)
+    ) {
+      clearWaitingList()
+    }
+  }, [waitingError, clearWaitingList])
+
+  return null
+}

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

@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'
 import { styled, VStack } from '@/styled-system/jsx'
 import { Button as RACButton } from 'react-aria-components'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
-import type { CandidateInfo } from '@/stores/connectionObserver'
 import { captureEvent } from '@/features/analytics/telemetry'
 
 const Card = styled('div', {
@@ -16,7 +15,8 @@ const Card = styled('div', {
     marginTop: '1.5rem',
     borderRadius: '0.25rem',
     boxShadow: '',
-    minWidth: '380px',
+    width: '100%',
+    maxWidth: '380px',
     minHeight: '196px',
   },
 })
@@ -38,8 +38,11 @@ const ratingButtonRecipe = cva({
     color: 'initial',
     border: 'none',
     borderRadius: 0,
-    padding: '0.5rem 0.85rem',
+    padding: { base: '0.5rem 0.25rem', xsm: '0.5rem 0.85rem' },
     flexGrow: '1',
+    flexBasis: 0,
+    minWidth: 0,
+    textAlign: 'center',
     cursor: 'pointer',
   },
   variants: {
@@ -100,7 +103,9 @@ const OpenFeedback = ({
 
   return (
     <Card>
-      <H lvl={3}>{t('question')}</H>
+      <H lvl={3} centered>
+        {t('question')}
+      </H>
       <TextArea
         id="feedbackInput"
         name="feedback"
@@ -169,7 +174,9 @@ const RateQuality = ({
 
   return (
     <Card>
-      <H lvl={3}>{t('question')}</H>
+      <H lvl={3} centered>
+        {t('question')}
+      </H>
       <Bar>
         {[...Array(maxRating)].map((_, index) => (
           <RACButton
@@ -229,7 +236,9 @@ const ConfirmationMessage = ({ onNext }: { onNext: () => void }) => {
       }}
     >
       <VStack gap={0}>
-        <H lvl={3}>{t('heading')}</H>
+        <H lvl={3} centered>
+          {t('heading')}
+        </H>
         <Text as="p" variant="paragraph" centered>
           {t('body')}
         </Text>
@@ -240,10 +249,6 @@ const ConfirmationMessage = ({ onNext }: { onNext: () => void }) => {
 
 type RatingMetadata = {
   room_id?: string
-  pc_publisher?: CandidateInfo
-  pc_subscriber?: CandidateInfo
-  pc_publisher_changes_count?: number
-  pc_subscriber_changes_count?: number
 }
 
 export const Rating = ({

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

@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+import { useSnapshot } from 'valtio'
+import {
+  clearDeviceInUseForOtherDevice,
+  deviceAvailabilityStore,
+} from '@/stores/deviceAvailability'
+import { userChoicesStore } from '@/stores/userChoices'
+import { probeDeviceReleased } from '../livekit/utils/mediaPermissions'
+import type { PermissionKind } from '@/stores/permissions'
+
+const RETRY_INTERVAL_MS = 30_000
+
+/**
+ * There is no browser event for "another app released the device", so
+ * while a device is flagged in use, re-probe it periodically. The probe
+ * targets the currently selected device (the flag is about what the app
+ * would acquire, not about any device of the kind). Only clears the flag
+ * (the toggle becomes usable again); it never re-enables the device on
+ * the user's behalf.
+ */
+export function useWatchDeviceReleased() {
+  const { cameraInUse, microphoneInUse } = useSnapshot(deviceAvailabilityStore)
+  const { audioDeviceId, videoDeviceId } = useSnapshot(userChoicesStore)
+  useWatchKind('camera', cameraInUse, videoDeviceId)
+  useWatchKind('microphone', microphoneInUse, audioDeviceId)
+}
+
+function useWatchKind(
+  kind: PermissionKind,
+  inUse: boolean,
+  selectedDeviceId?: string
+) {
+  useEffect(() => {
+    if (inUse) clearDeviceInUseForOtherDevice(kind, selectedDeviceId)
+  }, [kind, inUse, selectedDeviceId])
+
+  useEffect(() => {
+    if (!inUse) return
+    let stopped = false
+    let timer: number | undefined
+    const tick = async () => {
+      await probeDeviceReleased(kind, selectedDeviceId || undefined)
+      if (!stopped) {
+        timer = window.setTimeout(tick, RETRY_INTERVAL_MS)
+      }
+    }
+    timer = window.setTimeout(tick, RETRY_INTERVAL_MS)
+    return () => {
+      stopped = true
+      window.clearTimeout(timer)
+    }
+  }, [kind, inUse, selectedDeviceId])
+}

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

@@ -9,14 +9,9 @@ import { useSnapshot } from 'valtio'
 import { DisconnectReason, RoomEvent } from 'livekit-client'
 
 import { userPreferencesStore } from '@/stores/userPreferences'
-import { connectionObserverStore } from '@/stores/connectionObserver'
 
-import { useFeatureFlagEnabled } from 'posthog-js/react'
-import { isMobileBrowser } from '@livekit/components-core'
-import { FeatureFlags } from '@/features/analytics/enums'
 import { captureEvent, captureMediaEvent } from '@/features/analytics/telemetry'
-
+import { connectionObserverStore } from '@/stores/connectionObserver'
-const CANDIDATE_POLL_INTERVAL_MS = 5000
 
 export const ConnectionObserver = () => {
   const room = useRoomContext()
@@ -24,13 +19,6 @@ export const ConnectionObserver = () => {
 
   const { data } = useConfig()
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
-
-  const featureEnabled = useFeatureFlagEnabled(FeatureFlags.candidatePolling)
-  const isMobile = isMobileBrowser()
-
-  const isAdvancedConnectionObserverEnabled =
-    !isMobile && isAnalyticsEnabled && featureEnabled
-
   const userPreferencesSnap = useSnapshot(userPreferencesStore)
 
   const idleDisconnectModalTimeoutRef = useRef<ReturnType<
@@ -80,100 +68,6 @@ export const ConnectionObserver = () => {
     userPreferencesSnap.is_idle_disconnect_modal_enabled,
   ])
 
-  useEffect(() => {
-    if (!isAdvancedConnectionObserverEnabled) return
-    if (!room) return
-
-    let interval: ReturnType<typeof setInterval> | null = null
-
-    const pollCandidate = async (
-      label: 'publisher' | 'subscriber',
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      pc?: any
-    ) => {
-      if (!pc) return
-
-      let stats: RTCStatsReport
-      try {
-        stats = await pc.getStats()
-      } catch {
-        return
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      stats.forEach((report: any) => {
-        if (
-          report.type === 'candidate-pair' &&
-          report.state === 'succeeded' &&
-          report.nominated
-        ) {
-          const remoteCandidate = stats.get(report.remoteCandidateId)
-          if (!remoteCandidate) return
-
-          const next = {
-            type: remoteCandidate.candidateType,
-            address: remoteCandidate.address,
-            protocol: remoteCandidate.protocol,
-          }
-
-          const current = connectionObserverStore[label]
-
-          const hasChanged =
-            current?.type !== next.type ||
-            current?.address !== next.address ||
-            current?.protocol !== next.protocol
-
-          if (hasChanged) {
-            connectionObserverStore[label] = next
-            const key = `${label}ChangesCount` as const
-            connectionObserverStore[key] =
-              (connectionObserverStore[key] || 0) + 1
-          }
-        }
-      })
-    }
-
-    const poll = async () => {
-      const publisher = room.engine?.pcManager?.publisher
-      const subscriber = room.engine?.pcManager?.subscriber
-
-      await Promise.all([
-        pollCandidate('publisher', publisher),
-        pollCandidate('subscriber', subscriber),
-      ])
-    }
-
-    const startPolling = async () => {
-      if (interval) return // prevent duplicates
-
-      // Initial snapshot
-      await poll()
-
-      interval = setInterval(poll, CANDIDATE_POLL_INTERVAL_MS)
-    }
-
-    const stopPolling = () => {
-      if (!interval) return
-      clearInterval(interval)
-      interval = null
-    }
-
-    room.on(RoomEvent.Connected, startPolling)
-    room.on(RoomEvent.Reconnected, startPolling)
-
-    room.on(RoomEvent.Reconnecting, stopPolling)
-    room.on(RoomEvent.Disconnected, stopPolling)
-
-    return () => {
-      stopPolling()
-
-      room.off(RoomEvent.Connected, startPolling)
-      room.off(RoomEvent.Reconnected, startPolling)
-      room.off(RoomEvent.Reconnecting, stopPolling)
-      room.off(RoomEvent.Disconnected, stopPolling)
-    }
-  }, [room, isAdvancedConnectionObserverEnabled])
-
   useEffect(() => {
     if (!isAnalyticsEnabled) return
 

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

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
 import { useSnapshot } from 'valtio'
 import { connectionObserverStore } from '@/stores/connectionObserver'
-import { HStack } from '@/styled-system/jsx'
+import { Stack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
@@ -134,7 +134,11 @@ export const IsIdleDisconnectModal = () => {
             </H>
             <Description />
             <Settings />
-            <HStack marginTop="2rem">
+            <Stack
+              direction={{ base: 'column', xsm: 'row' }}
+              align={{ base: 'stretch', xsm: 'center' }}
+              marginTop="2rem"
+            >
               <Button
                 onPress={() => {
                   connectionObserverStore.isIdleDisconnectModalOpen = false
@@ -148,7 +152,7 @@ export const IsIdleDisconnectModal = () => {
               <Button onPress={close} size="sm" variant="primary">
                 {t('stayButton')}
               </Button>
-            </HStack>
+            </Stack>
           </div>
         )
       }}

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

@@ -0,0 +1,28 @@
+import { useRef } from 'react'
+import { useSnapshot } from 'valtio'
+import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
+import { closeMuteDialog, muteDialogStore } from '@/stores/muteDialog'
+import { MuteAlertDialog } from './MuteAlertDialog'
+
+export const MuteAlertDialogProvider = () => {
+  const { participant } = useSnapshot(muteDialogStore)
+  const { muteParticipant } = useMuteParticipant()
+
+  const lastNameRef = useRef('')
+  if (participant) {
+    lastNameRef.current = participant.name || participant.identity
+  }
+
+  return (
+    <MuteAlertDialog
+      isOpen={!!participant}
+      name={lastNameRef.current}
+      onClose={closeMuteDialog}
+      onSubmit={() => {
+        const target = muteDialogStore.participant
+        if (!target) return
+        muteParticipant(target).then(closeMuteDialog)
+      }}
+    />
+  )
+}

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

@@ -1,6 +1,13 @@
 import { A, Button, Dialog, P } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
+import { getOS, type OS } from '@/utils/os'
+
+const SCREEN_CAPTURE_SETTINGS_LINKS: Partial<Record<OS, string>> = {
+  macos:
+    'x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture',
+  windows: 'ms-settings:privacy-graphicscaptureprogrammatic',
+}
 
 // todo - refactor it into a generic system
 export const ScreenShareErrorModal = ({
@@ -11,7 +18,8 @@ export const ScreenShareErrorModal = ({
   onClose: () => void
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'error.screenShare' })
-  const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1
+  const os = getOS()
+  const settingsHref = SCREEN_CAPTURE_SETTINGS_LINKS[os]
 
   return (
     <Dialog
@@ -26,15 +34,16 @@ export const ScreenShareErrorModal = ({
           <>
             <P>
               {t('message')}{' '}
-              {isMac && (
+              {settingsHref && (
                 <>
-                  {t('macInstructions')}{' '}
+                  {t('settingsInstructions')}{' '}
                   <A
-                    href="x-apple.systempreferences:com.apple.preference.security?Privacy_ScreenCapture"
+                    href={settingsHref}
+                    target="_blank"
                     color="primary"
-                    aria-label={t('macSystemPreferences') + '-' + t('newTab')}
+                    aria-label={t(`settingsLabel.${os}`) + '-' + t('newTab')}
                   >
-                    {t('macSystemPreferences')}
+                    {t(`settingsLabel.${os}`)}
                   </A>
                   .{' '}
                 </>

src/frontend/src/features/rooms/livekit/components/blur/BackgroundCustomProcessor.ts

@@ -44,7 +44,7 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
   videoElement?: HTMLVideoElement
   videoElementLoaded?: boolean
 
-  // Canvas containg the video processing result, of which we extract as stream.
+  // Canvas containing the video processing result, of which we extract as stream.
   outputCanvas?: HTMLCanvasElement
   outputCanvasCtx?: CanvasRenderingContext2D
 
@@ -55,7 +55,7 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
   segmentationMaskCanvas?: HTMLCanvasElement
   segmentationMaskCanvasCtx?: CanvasRenderingContext2D
 
-  // Mask containg the inference result.
+  // Mask containing the inference result.
   segmentationMask?: ImageData
 
   // The resized image of the video source.
@@ -105,9 +105,7 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
 
   _initVirtualBackgroundImage() {
     if (this.options.type !== 'virtual') {
-      throw new Error(
+      return
-        'Virtual background is only supported for virtual background'
-      )
     }
 
     const needsUpdate =

src/frontend/src/features/rooms/livekit/components/controls/Device/OutputSoundTester.tsx

@@ -126,7 +126,7 @@ export const OutputSoundTester = ({
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio
         ref={audioRef}
-        src="sounds/uprise.mp3"
+        src="/sounds/uprise.mp3"
         onEnded={() => setIsPlaying(false)}
       />
     </StyledContainer>

src/frontend/src/features/rooms/livekit/components/controls/Device/PermissionNeededButton.tsx

@@ -5,16 +5,18 @@ import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 
 type PermissionNeededButtonProps = {
-  tooltip?: string
+  tooltip?: string | null
-  onPress?: () => void
+  onPress?: (() => void) | null
+  ariaLabel?: string
 }
 
 export const PermissionNeededButton = ({
   tooltip,
   onPress,
+  ariaLabel,
 }: PermissionNeededButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'permissionsButton' })
-  const label = tooltip ?? t('tooltip')
+  const label = tooltip === undefined ? t('tooltip') : tooltip
   return (
     <div
       className={css({
@@ -26,9 +28,13 @@ export const PermissionNeededButton = ({
       })}
     >
       <Button
-        aria-label={tooltip ? label : t('ariaLabel')}
+        aria-label={ariaLabel ?? label ?? t('ariaLabel')}
-        tooltip={label}
+        tooltip={label ?? undefined}
-        onPress={onPress ?? (() => openPermissionsDialog())}
+        onPress={
+          onPress === undefined
+            ? () => openPermissionsDialog()
+            : (onPress ?? undefined)
+        }
         variant="permission"
       >
         <div

src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx

@@ -20,8 +20,10 @@ import { openPermissionsDialog } from '@/stores/permissions'
 import { openSilentMicDialog, silentMicStore } from '@/stores/silentMic'
 import { useSnapshot } from 'valtio'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
+import { useDeviceInUse } from '../../../hooks/useDeviceInUse'
 import { useDeviceMissing } from '../../../hooks/useDeviceMissing'
-import { requestDevicePermission } from '../../../hooks/useJoinTracks'
+import { requestDevicePermission } from '../../../utils/mediaPermissions'
+import { userChoicesStore } from '@/stores/userChoices'
 import { useDeviceIcons } from '../../../hooks/useDeviceIcons'
 import { useDeviceShortcut } from '../../../hooks/useDeviceShortcut'
 import type {
@@ -97,38 +99,51 @@ export const ToggleDevice = <T extends ToggleSource>({
   const deviceIcons = useDeviceIcons(kind)
   const cannotUseDevice = useCannotUseDevice(kind)
   const deviceMissing = useDeviceMissing(kind)
+  const deviceInUse = useDeviceInUse(kind)
+  const explainDeviceInUse = deviceInUse && context === 'room'
   const { status: silentMicStatus } = useSnapshot(silentMicStore)
   const silentMicWarning =
     kind === 'audioinput' &&
     silentMicStatus === 'silent' &&
     !cannotUseDevice &&
-    !deviceMissing
+    !deviceMissing &&
+    !deviceInUse
   const deviceShortcut = useDeviceShortcut(kind)
   const announce = useScreenReaderAnnounce()
 
   const isRequestingPermission = useRef(false)
-  const [showDeviceNotFound, setShowDeviceNotFound] = useState(false)
+  const [alertError, setAlertError] = useState<MediaDeviceFailure | null>(null)
+
+  const mediaPath = context === 'join' ? 'join_preview' : 'room'
 
   const onPress = async () => {
     if (!enabled && deviceMissing) {
-      setShowDeviceNotFound(true)
+      setAlertError(MediaDeviceFailure.NotFound)
       return
     }
-    if (!cannotUseDevice) {
+    if (!cannotUseDevice && !deviceInUse) {
       toggle()
       return
     }
     if (isRequestingPermission.current) return
     isRequestingPermission.current = true
     try {
-      const granted = await requestDevicePermission(
+      const selectedDeviceId = cannotUseDevice
+        ? undefined
+        : kind === 'videoinput'
+          ? userChoicesStore.videoDeviceId
+          : userChoicesStore.audioDeviceId
+      const acquired = await requestDevicePermission(
         kind,
-        context === 'join' ? 'join_preview' : 'room'
+        mediaPath,
+        selectedDeviceId || undefined
       )
-      if (granted) {
+      if (acquired) {
         toggle()
-      } else {
+      } else if (cannotUseDevice) {
         openPermissionsDialog(kind)
+      } else if (explainDeviceInUse) {
+        setAlertError(MediaDeviceFailure.DeviceInUse)
       }
     } finally {
       isRequestingPermission.current = false
@@ -179,13 +194,34 @@ export const ToggleDevice = <T extends ToggleSource>({
     return <ActiveSpeakerWrapper />
   }
 
+  const getToggleTooltip = () => {
+    if (deviceMissing) return t(`deviceNotFound.${kind}`)
+    if (explainDeviceInUse) return t(`deviceInUse.${kind}`)
+    if (cannotUseDevice) return t('tooltip', { keyPrefix: 'permissionsButton' })
+    return toggleLabel
+  }
+  const toggleTooltip = getToggleTooltip()
+
   return (
     <div style={{ position: 'relative' }}>
       {(cannotUseDevice || deviceMissing) && (
         <PermissionNeededButton
           tooltip={deviceMissing ? t(`deviceNotFound.${kind}`) : undefined}
           onPress={
-            deviceMissing ? () => setShowDeviceNotFound(true) : undefined
+            deviceMissing
+              ? () => setAlertError(MediaDeviceFailure.NotFound)
+              : undefined
+          }
+        />
+      )}
+      {deviceInUse && (
+        <PermissionNeededButton
+          tooltip={explainDeviceInUse ? t(`deviceInUse.${kind}`) : null}
+          ariaLabel={t(`deviceInUse.${kind}`)}
+          onPress={
+            explainDeviceInUse
+              ? () => setAlertError(MediaDeviceFailure.DeviceInUse)
+              : null
           }
         />
       )}
@@ -204,22 +240,16 @@ export const ToggleDevice = <T extends ToggleSource>({
         shySelected
         onPress={onPress}
         aria-label={toggleLabel}
-        tooltip={
+        tooltip={toggleTooltip}
-          deviceMissing
-            ? t(`deviceNotFound.${kind}`)
-            : cannotUseDevice
-              ? t('tooltip', { keyPrefix: 'permissionsButton' })
-              : toggleLabel
-        }
         {...computedToggleButtonProps}
         {...overrideToggleButtonProps}
       >
         <Icon />
       </ToggleButton>
       <MediaDeviceErrorAlert
-        error={showDeviceNotFound ? MediaDeviceFailure.NotFound : null}
+        error={alertError}
         kind={kind}
-        onClose={() => setShowDeviceNotFound(false)}
+        onClose={() => setAlertError(null)}
       />
     </div>
   )

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

@@ -10,10 +10,18 @@ import {
   showLowerHandToast,
 } from '@/features/notifications/utils'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 const SPEAKING_DETECTION_DELAY = 3000
 
-export const HandToggle = () => {
+type Props = Pick<NonNullable<ButtonRecipeProps>, 'variant'> & ToggleButtonProps
+
+export const HandToggle = ({
+  variant = 'primaryDark',
+  onPress,
+  ...props
+}: Props) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
 
   const room = useRoomContext()
@@ -74,12 +82,16 @@ export const HandToggle = () => {
       })}
     >
       <ToggleButton
+        {...props}
         square
-        variant="primaryDark"
+        variant={variant}
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isHandRaised}
-        onPress={handleToggle}
+        onPress={(e) => {
+          handleToggle()
+          onPress?.(e)
+        }}
         data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -37,8 +37,8 @@ import { reportError } from '@/features/analytics/telemetry'
 
 enum BlurRadius {
   NONE = 0,
-  LIGHT = 5,
+  LIGHT = 10,
-  NORMAL = 10,
+  NORMAL = 20,
 }
 
 const isSupported = BackgroundProcessorFactory.isSupported()

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

@@ -0,0 +1,17 @@
+import { useUser } from '@/features/auth/api/useUser'
+import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
+import { useIsAdminOrOwner } from './useIsAdminOrOwner'
+import { useRoomData } from './useRoomData'
+
+export const useCanManageLobby = () => {
+  const isAdminOrOwner = useIsAdminOrOwner()
+  const { isLoggedIn } = useUser()
+  const roomData = useRoomData()
+
+  return (
+    (isAdminOrOwner ||
+      (isLoggedIn === true &&
+        roomData?.access_level === ApiAccessLevel.TRUSTED)) &&
+    roomData?.access_level !== ApiAccessLevel.PUBLIC
+  )
+}

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

@@ -0,0 +1,21 @@
+import { useSnapshot } from 'valtio'
+import { deviceAvailabilityStore } from '@/stores/deviceAvailability'
+import { useCannotUseDevice } from './useCannotUseDevice'
+import { useDeviceMissing } from './useDeviceMissing'
+
+export const useDeviceInUse = (kind: MediaDeviceKind): boolean => {
+  const { cameraInUse, microphoneInUse } = useSnapshot(deviceAvailabilityStore)
+  const cannotUseDevice = useCannotUseDevice(kind)
+  const deviceMissing = useDeviceMissing(kind)
+
+  if (cannotUseDevice || deviceMissing) return false
+
+  switch (kind) {
+    case 'videoinput':
+      return cameraInUse
+    case 'audioinput':
+      return microphoneInUse
+    default:
+      return false
+  }
+}

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

@@ -10,16 +10,15 @@ import {
 } from 'livekit-client'
 import { BackgroundProcessorFactory } from '../components/blur'
 import {
-  classifyPermissionError,
-  isLikelySystemNotFound,
   isSystemPermissionError,
-  noteGumSuccess,
-  notePermissionDeniedFromGum,
-  noteSystemPermissionDenied,
   type PermissionKind,
 } from '@/stores/permissions'
-import { getOS } from '@/utils/os'
+import {
-import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+  getMediaDeviceFailure,
+  noteDeviceReady,
+  onMediaPermissionError,
+} from '../utils/mediaPermissions'
+import { VOICE_AUDIO_CONSTRAINTS } from '../utils/constants'
 import {
   saveAudioInputDeviceId,
   saveAudioInputEnabled,
@@ -29,74 +28,6 @@ import {
 } from '@/stores/userChoices'
 import { useSyncTrackDeviceId } from './useSyncTrackDeviceId'
 
-const VOICE_AUDIO_CONSTRAINTS = {
-  noiseSuppression: true,
-  echoCancellation: true,
-  autoGainControl: true,
-  voiceIsolation: false,
-  sampleRate: 48000,
-  channelCount: 1,
-  sampleSize: 16,
-} as const
-
-const PERMISSION_KIND: Record<'audioinput' | 'videoinput', PermissionKind> = {
-  audioinput: 'microphone',
-  videoinput: 'camera',
-}
-
-type MediaPath = 'join_preview' | 'room'
-
-const onMediaPermissionError = (
-  e: Error,
-  kind?: PermissionKind,
-  path: MediaPath = 'join_preview'
-) => {
-  if (
-    MediaDeviceFailure.getFailure(e) === MediaDeviceFailure.PermissionDenied
-  ) {
-    void classifyPermissionError(e, kind).then((scope) => {
-      if (scope === 'system') {
-        noteSystemPermissionDenied(kind)
-      } else {
-        notePermissionDeniedFromGum(kind)
-      }
-      captureMediaEvent('permissions-denied', {
-        path,
-        kind,
-        denied_scope: scope,
-        os: getOS(),
-      })
-    })
-    return
-  }
-
-  if (MediaDeviceFailure.getFailure(e) === MediaDeviceFailure.NotFound) {
-    // Firefox reports OS-level blocks as NotFoundError (macOS privacy
-    // settings, missing Android app permissions).
-    void isLikelySystemNotFound(e, kind).then((system) => {
-      if (system) {
-        noteSystemPermissionDenied(kind)
-        captureMediaEvent('permissions-denied', {
-          path,
-          kind,
-          denied_scope: 'system',
-          os: getOS(),
-        })
-        return
-      }
-      captureMediaEvent('device-not-found', { path, kind })
-    })
-    return
-  }
-
-  // "Other" and "Device in use" are still reported as errors, as they are not handled on the join screen.
-  reportError(
-    path === 'room' ? 'room_media_failure' : 'join_preview_failure',
-    e,
-    { path, kind }
-  )
-}
-
 // Module-level: effect dependencies, must be referentially stable.
 const disableAudio = () => saveAudioInputEnabled(false)
 const disableVideo = () => saveVideoInputEnabled(false)
@@ -104,24 +35,6 @@ const disableVideo = () => saveVideoInputEnabled(false)
 const stopAll = (stream: MediaStream) =>
   stream.getTracks().forEach((track) => track.stop())
 
-export const requestDevicePermission = async (
-  kind: 'audioinput' | 'videoinput',
-  path: MediaPath = 'join_preview'
-): Promise<boolean> => {
-  try {
-    const track =
-      kind === 'audioinput'
-        ? await createLocalAudioTrack()
-        : await createLocalVideoTrack()
-    track.stop()
-    noteGumSuccess(PERMISSION_KIND[kind])
-    return true
-  } catch (error) {
-    onMediaPermissionError(error as Error, PERMISSION_KIND[kind], path)
-    return false
-  }
-}
-
 type WarmupState = {
   audioReady: boolean
   videoReady: boolean
@@ -158,11 +71,11 @@ function useWarmupPermissions(): WarmupState {
             video: true,
           })
         )
-        noteGumSuccess()
+        noteDeviceReady()
         bothReady()
       } catch (error) {
         if (
-          MediaDeviceFailure.getFailure(error as Error) ===
+          getMediaDeviceFailure(error as Error) ===
             MediaDeviceFailure.PermissionDenied &&
           !isSystemPermissionError(error)
         ) {
@@ -180,7 +93,7 @@ function useWarmupPermissions(): WarmupState {
           .getUserMedia({ audio: true })
           .then((stream) => {
             stopAll(stream)
-            noteGumSuccess('microphone')
+            noteDeviceReady('microphone')
           })
           .catch((e) => onMediaPermissionError(e as Error, 'microphone'))
           .finally(() =>
@@ -190,7 +103,7 @@ function useWarmupPermissions(): WarmupState {
           .getUserMedia({ video: true })
           .then((stream) => {
             stopAll(stream)
-            noteGumSuccess('camera')
+            noteDeviceReady('camera')
           })
           .catch((e) => onMediaPermissionError(e as Error, 'camera'))
           .finally(() =>
@@ -209,12 +122,14 @@ function useLocalTrack<T extends LocalAudioTrack | LocalVideoTrack>({
   enabled,
   create,
   permissionKind,
+  deviceId,
   onFailure,
 }: {
   ready: boolean
   enabled: boolean
   create: () => Promise<T>
   permissionKind: PermissionKind
+  deviceId?: string
   onFailure: () => void
 }): T | null {
   const [track, setTrack] = useState<T | null>(null)
@@ -227,21 +142,27 @@ function useLocalTrack<T extends LocalAudioTrack | LocalVideoTrack>({
     let cancelled = false
     create()
       .then((newTrack) => {
-        noteGumSuccess(permissionKind)
         if (cancelled) {
           newTrack.stop()
           return
         }
+        noteDeviceReady(permissionKind)
         setTrack(newTrack)
       })
       .catch((error) => {
-        onMediaPermissionError(error as Error, permissionKind)
+        if (cancelled) return
+        onMediaPermissionError(
+          error as Error,
+          permissionKind,
+          'join_preview',
+          deviceId
+        )
         onFailure()
       })
     return () => {
       cancelled = true
     }
-  }, [ready, enabled, track, create, permissionKind, onFailure])
+  }, [ready, enabled, track, create, permissionKind, deviceId, onFailure])
 
   // Release on toggle-off so the LED turns off.
   useEffect(() => {
@@ -315,6 +236,7 @@ export function useJoinTracks(): {
     enabled: audioEnabled,
     create: createAudio,
     permissionKind: 'microphone',
+    deviceId: audioDeviceId,
     onFailure: disableAudio,
   })
 
@@ -323,6 +245,7 @@ export function useJoinTracks(): {
     enabled: videoEnabled,
     create: createVideo,
     permissionKind: 'camera',
+    deviceId: videoDeviceId,
     onFailure: disableVideo,
   })
 

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

@@ -1,6 +1,11 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { MediaDeviceFailure, RoomEvent } from 'livekit-client'
+import {
+  type LocalTrackPublication,
+  MediaDeviceFailure,
+  RoomEvent,
+  Track,
+} from 'livekit-client'
 import {
   PERMISSION_BY_DEVICE_KIND,
   type PermissionDeniedScope,
@@ -10,8 +15,13 @@ import {
   notePermissionDeniedFromGum,
   noteSystemPermissionDenied,
 } from '@/stores/permissions'
-import { syncDeviceAvailability } from '@/stores/deviceAvailability'
+import {
+  clearDeviceInUse,
+  noteDeviceInUse,
+  syncDeviceAvailability,
+} from '@/stores/deviceAvailability'
 import { captureMediaEvent } from '@/features/analytics/telemetry'
+import { getMediaDeviceFailure } from '../utils/mediaPermissions'
 import { getOS } from '@/utils/os'
 
 type MediaDeviceAlert = {
@@ -21,6 +31,11 @@ type MediaDeviceAlert = {
 
 const NO_ALERT: MediaDeviceAlert = { error: null, kind: null }
 
+const PERMISSION_BY_SOURCE: Partial<Record<Track.Source, PermissionKind>> = {
+  [Track.Source.Camera]: 'camera',
+  [Track.Source.Microphone]: 'microphone',
+}
+
 const capturePermissionsDenied = (
   scope: PermissionDeniedScope,
   kind?: PermissionKind
@@ -49,19 +64,21 @@ export const useWatchMediaDeviceErrors = (): MediaDeviceAlert & {
 
   useEffect(() => {
     const onDeviceError = (error: Error, kind?: MediaDeviceKind) => {
-      const failure = MediaDeviceFailure.getFailure(error)
+      const failure = getMediaDeviceFailure(error)
-      if (!failure || !kind) return
+      if (!failure) return
-
+      if (failure != MediaDeviceFailure.Other) {
         void captureMediaEvent('media-device-error', {
           log_code: 'media_devices_error_event',
           path: 'connect_publish',
           failure,
-        kind,
+          kind: kind ?? 'unknown',
         })
-
+      }
+      if (!kind) return
       const permissionKind = PERMISSION_BY_DEVICE_KIND[kind]
       switch (failure) {
         case MediaDeviceFailure.DeviceInUse:
+          if (permissionKind) noteDeviceInUse(permissionKind)
           setAlert({ error: failure, kind })
           break
         case MediaDeviceFailure.NotFound:
@@ -91,9 +108,16 @@ export const useWatchMediaDeviceErrors = (): MediaDeviceAlert & {
           break
       }
     }
+    const onTrackPublished = (publication: LocalTrackPublication) => {
+      const permissionKind = PERMISSION_BY_SOURCE[publication.source]
+      if (permissionKind) clearDeviceInUse(permissionKind)
+    }
     room.on(RoomEvent.MediaDevicesError, onDeviceError)
+    room.on(RoomEvent.LocalTrackPublished, onTrackPublished)
     return () => {
       room.off(RoomEvent.MediaDevicesError, onDeviceError)
+      room.off(RoomEvent.LocalTrackPublished, onTrackPublished)
+      clearDeviceInUse()
     }
   }, [room])
 

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

@@ -9,7 +9,7 @@ import { SubtitlesToggle } from '../../components/controls/SubtitlesToggle'
 import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
-import { useRef } from 'react'
+import { RefObject, useMemo, useState } from 'react'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { useFullScreen } from '../../hooks/useFullScreen'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
@@ -21,7 +21,14 @@ export function DesktopControlBar({
   onDeviceError,
 }: Readonly<ControlBarAuxProps>) {
   const browserSupportsScreenSharing = supportsScreenSharing()
-  const desktopControlBarEl = useRef<HTMLDivElement>(null)
+
+  const [controlBarElement, setControlBarElement] =
+    useState<HTMLDivElement | null>(null)
+
+  const desktopControlBarEl = useMemo<RefObject<HTMLDivElement>>(
+    () => ({ current: controlBarElement }),
+    [controlBarElement]
+  )
 
   const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({})
 
@@ -45,7 +52,7 @@ export function DesktopControlBar({
 
   return (
     <div
-      ref={desktopControlBarEl}
+      ref={setControlBarElement}
       className={css({
         width: '100vw',
         display: 'flex',

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

@@ -1,7 +1,7 @@
 import { supportsScreenSharing } from '@livekit/components-core'
 import { useTranslation } from 'react-i18next'
 import type { ControlBarAuxProps } from './ControlBar'
-import React from 'react'
+import React, { useLayoutEffect, useRef, useState } from 'react'
 import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
 import { Track } from 'livekit-client'
@@ -26,7 +26,26 @@ import { AudioDevicesControl } from '../../components/controls/Device/AudioDevic
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { openSettingsDialog } from '@/stores/settings'
 import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
-import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
+import {
+  ReactionsToggle,
+  reactionShortcutHandler,
+} from '@/features/reactions/components/ReactionsToggle'
+import { useSize } from '../../hooks/useResizeObserver'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { useRoomContext } from '@livekit/components-react'
+
+// Hand collapses first, then reactions; hidden toggles move into the menu.
+const COLLAPSIBLE_COUNT = 2
+
+// Layout-neutral measuring wrapper: inherits the region's gap and refuses to
+// flex-shrink so measured widths are natural content widths.
+const measuredRow = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'inherit',
+  flexShrink: 0,
+})
 
 export function MobileControlBar({
   onDeviceError,
@@ -36,19 +55,72 @@ export function MobileControlBar({
   const browserSupportsScreenSharing = supportsScreenSharing()
   const { toggleEffects } = useSidePanel()
 
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { width } = useSize(containerRef)
+  const barRef = useRef<HTMLDivElement>(null)
+  const { width: barWidth } = useSize(barRef)
+  const collapsibleRef = useRef<HTMLDivElement>(null)
+  const { width: collapsibleWidth } = useSize(collapsibleRef)
+
+  const [hiddenCount, setHiddenCount] = useState(0)
+  const calibration = useRef<{ essential: number; slot: number }>()
+
+  useLayoutEffect(() => {
+    if (hiddenCount === 0 && collapsibleWidth > 0 && barRef.current) {
+      const gap = parseFloat(getComputedStyle(barRef.current).columnGap) || 0
+      calibration.current = {
+        essential: barWidth - collapsibleWidth - gap,
+        slot: (collapsibleWidth + gap) / COLLAPSIBLE_COUNT,
+      }
+    }
+    if (!calibration.current || width <= 0) return
+    const { essential, slot } = calibration.current
+    const fits = Math.floor((width - essential) / slot)
+    const next = Math.min(
+      COLLAPSIBLE_COUNT,
+      Math.max(0, COLLAPSIBLE_COUNT - fits)
+    )
+    if (next !== hiddenCount) setHiddenCount(next)
+  }, [barWidth, collapsibleWidth, hiddenCount, width, setHiddenCount])
+
+  const hideHand = hiddenCount >= 1
+  const hideReactions = hiddenCount >= 2
+
+  const room = useRoomContext()
+  const { toggleRaisedHand } = useRaisedHand({
+    participant: room.localParticipant,
+  })
+  useRegisterKeyboardShortcut({
+    id: 'raise-hand',
+    handler: toggleRaisedHand,
+  })
+  useRegisterKeyboardShortcut({
+    id: 'reaction',
+    handler: reactionShortcutHandler,
+  })
+
   const { data } = useConfig()
 
+  const closeMenu = () => setIsMenuOpened(false)
+
   return (
     <>
       <div
         className={css({
           width: '100vw',
-          display: 'flex',
           padding: '1.125rem',
+        })}
+      >
+        <div
+          ref={containerRef}
+          className={css({
+            width: '100%',
+            display: 'flex',
             justifyContent: 'center',
           })}
         >
           <ControlBarRegion mobile>
+            <div ref={barRef} className={measuredRow}>
               <LeaveButton />
               <AudioDevicesControl
                 onDeviceError={(error) =>
@@ -62,8 +134,13 @@ export function MobileControlBar({
                 }
                 hideMenu={true}
               />
+              {/* Unmounted when empty so it doesn't leave a stray gap. */}
+              {!hideReactions && (
+                <div ref={collapsibleRef} className={measuredRow}>
                   <ReactionsToggle />
-          <HandToggle />
+                  {!hideHand && <HandToggle />}
+                </div>
+              )}
               <Button
                 id="room-options-trigger"
                 square
@@ -74,12 +151,11 @@ export function MobileControlBar({
               >
                 <RiMore2Line />
               </Button>
+            </div>
           </ControlBarRegion>
         </div>
-      <ResponsiveMenu
+      </div>
-        isOpened={isMenuOpened}
+      <ResponsiveMenu isOpened={isMenuOpened} onClosed={closeMenu}>
-        onClosed={() => setIsMenuOpened(false)}
-      >
         <div
           className={css({
             display: 'flex',
@@ -98,6 +174,20 @@ export function MobileControlBar({
               },
             })}
           >
+            {hideReactions && (
+              <ReactionsToggle
+                variant="primaryTextDark"
+                description={true}
+                onPress={closeMenu}
+              />
+            )}
+            {hideHand && (
+              <HandToggle
+                variant="primaryTextDark"
+                description={true}
+                onPress={closeMenu}
+              />
+            )}
             {browserSupportsScreenSharing && (
               <ScreenShareToggle
                 onDeviceError={(error) =>
@@ -105,25 +195,16 @@ export function MobileControlBar({
                 }
                 variant="primaryTextDark"
                 description={true}
-                onPress={() => setIsMenuOpened(false)}
+                onPress={closeMenu}
               />
             )}
-            <ChatToggle
+            <ChatToggle description={true} onPress={closeMenu} />
-              description={true}
+            <ParticipantsToggle description={true} onPress={closeMenu} />
-              onPress={() => setIsMenuOpened(false)}
+            <ToolsToggle description={true} onPress={closeMenu} />
-            />
-            <ParticipantsToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
-            <ToolsToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
             <Button
               onPress={() => {
                 toggleEffects()
-                setIsMenuOpened(false)
+                closeMenu()
               }}
               variant="primaryTextDark"
               aria-label={t('options.items.effects')}
@@ -140,7 +221,7 @@ export function MobileControlBar({
                 aria-label={t('options.items.feedback')}
                 description={true}
                 target="_blank"
-                onPress={() => setIsMenuOpened(false)}
+                onPress={closeMenu}
               >
                 <RiMegaphoneLine size={20} />
               </LinkButton>
@@ -148,7 +229,7 @@ export function MobileControlBar({
             <Button
               onPress={() => {
                 openSettingsDialog()
-                setIsMenuOpened(false)
+                closeMenu()
               }}
               variant="primaryTextDark"
               aria-label={t('options.items.settings')}
@@ -157,7 +238,7 @@ export function MobileControlBar({
             >
               <RiSettings3Line size={20} />
             </Button>
-            <CameraSwitchButton onPress={() => setIsMenuOpened(false)} />
+            <CameraSwitchButton onPress={closeMenu} />
           </div>
         </div>
       </ResponsiveMenu>

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

@@ -12,7 +12,8 @@ import type { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 
-const CONTROL_BAR_BREAKPOINT = 1100
+const CONTROL_BAR_BREAKPOINT_WIDE = 1100
+const CONTROL_BAR_BREAKPOINT_NARROW = 1050
 
 const NavigationControls = ({
   onPress,
@@ -65,10 +66,9 @@ export const LateralMenu = () => {
     </DialogTrigger>
   )
 }
-
 interface BreakpointObserverProps {
   containerRef: RefObject<HTMLDivElement>
-  onWideChange: (isWide: boolean) => void
+  onWideChange: (isWide: boolean | null) => void
 }
 
 const BreakpointObserver = ({
@@ -76,7 +76,20 @@ const BreakpointObserver = ({
   onWideChange,
 }: BreakpointObserverProps) => {
   const { width } = useSize(containerRef)
-  const isWide = width > CONTROL_BAR_BREAKPOINT
+  const [isWide, setIsWide] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    if (!width) {
+      return
+    }
+    if (width > CONTROL_BAR_BREAKPOINT_WIDE) {
+      setIsWide(true)
+    } else if (width <= CONTROL_BAR_BREAKPOINT_NARROW) {
+      setIsWide(false)
+    } else {
+      setIsWide((prev) => (prev === null ? false : prev))
+    }
+  }, [width])
 
   useEffect(() => {
     onWideChange(isWide)
@@ -90,7 +103,7 @@ export const MoreOptions = ({
 }: {
   parentElement: RefObject<HTMLDivElement>
 }) => {
-  const [isWide, setIsWide] = useState(false)
+  const [isWide, setIsWide] = useState<boolean | null>(null)
 
   return (
     <nav
@@ -107,7 +120,7 @@ export const MoreOptions = ({
         containerRef={parentElement}
         onWideChange={setIsWide}
       />
-      {isWide ? <NavigationControls /> : <LateralMenu />}
+      {isWide !== null && (isWide ? <NavigationControls /> : <LateralMenu />)}
     </nav>
   )
 }

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

@@ -1,5 +1,6 @@
 import { isWeb } from '@livekit/components-core'
-import { Track } from 'livekit-client'
+import { MediaDeviceFailure, Track } from 'livekit-client'
+import { getMediaDeviceFailure } from '../utils/mediaPermissions'
 import React, { useState } from 'react'
 import {
   ConnectionStateToast,
@@ -11,12 +12,15 @@ import { SidePanel } from '../components/SidePanel'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { ConnectionObserver } from '../components/ConnectionObserver'
-import { reportError } from '@/features/analytics/telemetry'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import { getOS } from '@/utils/os'
+import { isFireFox } from '@/utils/livekit'
 import { MediaStateObserver } from '../components/MediaStateObserver'
 import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
 import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
+import { MuteAlertDialogProvider } from '@/features/rooms/livekit/components/MuteAlertDialogProvider'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
 import { RoomContentArea } from '@/features/layout/components/RoomContentArea'
@@ -27,6 +31,7 @@ import { PinAnnouncer } from '@/features/layout/components/PinAnnouncer'
 import { ChatProvider } from '@/features/chat/components/ChatProvider'
 import { SyncDevicePreferences } from '@/features/rooms/livekit/components/SyncDevicePreferences'
 import { RoomSilentMicDetector } from '@/features/rooms/components/SilentMicDetector'
+import { LobbyProvider } from '@/features/rooms/components/LobbyProvider'
 
 /**
  * @public
@@ -36,6 +41,20 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
   SettingsComponent?: React.ComponentType
 }
 
+const getScreenSharePermissionDeniedScope = (
+  error: Error
+): 'system' | 'user' | 'browser' | null => {
+  if (error.name === 'NotAllowedError') {
+    if (/by system/i.test(error.message)) return 'system'
+    if (/by user/i.test(error.message)) return 'user'
+    return 'browser'
+  }
+  if (error.name === 'NotFoundError' && isFireFox() && getOS() === 'macos') {
+    return 'system'
+  }
+  return null
+}
+
 /**
  * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
  * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
@@ -61,6 +80,39 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
 
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
 
+  const handleDeviceError = ({
+    source,
+    error,
+  }: {
+    source: Track.Source
+    error: Error
+  }) => {
+    if (source === Track.Source.ScreenShare) {
+      const scope = getScreenSharePermissionDeniedScope(error)
+      if (scope) {
+        if (scope === 'system') setIsShareErrorVisible(true)
+        void captureMediaEvent('screen-share-permission-denied', {
+          at: 'ControlBar.onDeviceError',
+          source,
+          error_name: error.name,
+          error_message: error.message,
+          denied_scope: scope,
+          os: getOS(),
+        })
+        return
+      }
+    }
+
+    if (getMediaDeviceFailure(error) !== MediaDeviceFailure.Other) {
+      return
+    }
+
+    reportError('device_switch_failure', error, {
+      at: 'ControlBar.onDeviceError',
+      source,
+    })
+  }
+
   return (
     <>
       <RoomMetadataSynchronizer />
@@ -69,6 +121,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
       <RoomSilentMicDetector />
       <MediaStateObserver />
       <ChatProvider />
+      <LobbyProvider />
       <VideoResolutionSubscription />
       <div
         className="lk-video-conference"
@@ -92,21 +145,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
                 <StageLayout />
               )}
             </RoomContentArea>
-            <ControlBar
+            <ControlBar onDeviceError={handleDeviceError} />
-              onDeviceError={(e) => {
-                reportError('device_switch_failure', e.error, {
-                  at: 'ControlBar.onDeviceError',
-                  source: e.source,
-                })
-                if (
-                  e.source == Track.Source.ScreenShare &&
-                  e.error.toString() ==
-                    'NotAllowedError: Permission denied by system'
-                ) {
-                  setIsShareErrorVisible(true)
-                }
-              }}
-            />
             <SidePanel />
           </>
         )}
@@ -114,6 +153,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
         <ConnectionStateToast />
         <RecordingProvider />
         <SettingsDialogProvider />
+        <MuteAlertDialogProvider />
         <ReactionPortals />
       </div>
     </>

src/frontend/src/features/rooms/livekit/utils/constants.ts

@@ -0,0 +1,9 @@
+export const VOICE_AUDIO_CONSTRAINTS = {
+  noiseSuppression: true,
+  echoCancellation: true,
+  autoGainControl: true,
+  voiceIsolation: false,
+  sampleRate: 48000,
+  channelCount: 1,
+  sampleSize: 16,
+} as const

src/frontend/src/features/rooms/livekit/utils/mediaPermissions.ts

@@ -0,0 +1,168 @@
+import {
+  createLocalAudioTrack,
+  createLocalVideoTrack,
+  MediaDeviceFailure,
+} from 'livekit-client'
+import {
+  classifyPermissionError,
+  isLikelySystemNotFound,
+  noteGumSuccess,
+  notePermissionDeniedFromGum,
+  noteSystemPermissionDenied,
+  type PermissionKind,
+} from '@/stores/permissions'
+import { clearDeviceInUse, noteDeviceInUse } from '@/stores/deviceAvailability'
+import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import { getOS } from '@/utils/os'
+
+/**
+ * Shared handling of getUserMedia() outcomes, used by both:
+ * - the join preview (`useJoinTracks`: warmup + local track acquisition)
+ * - the in-room device toggle (`ToggleDevice`, when permission is missing)
+ */
+export type MediaPath = 'join_preview' | 'room'
+
+const DEVICE_START_FAILURE =
+  /^(Starting (video|audio)input failed|Timeout starting (video|audio) source)/i
+
+/**
+ * LiveKit only maps NotReadableError/TrackStartError to DeviceInUse.
+ * Firefox reports a device held by another app as
+ * `AbortError: Starting videoinput failed` (or audioinput), which LiveKit
+ * classifies as Other. Normalise it here; every classification in the app
+ * should go through this instead of MediaDeviceFailure.getFailure.
+ */
+export const getMediaDeviceFailure = (
+  error: Error
+): MediaDeviceFailure | undefined => {
+  const failure = MediaDeviceFailure.getFailure(error)
+  if (
+    failure === MediaDeviceFailure.Other &&
+    error.name === 'AbortError' &&
+    DEVICE_START_FAILURE.test(error.message)
+  ) {
+    return MediaDeviceFailure.DeviceInUse
+  }
+  return failure
+}
+
+export const PERMISSION_KIND: Record<
+  'audioinput' | 'videoinput',
+  PermissionKind
+> = {
+  audioinput: 'microphone',
+  videoinput: 'camera',
+}
+
+export const noteDeviceReady = (kind?: PermissionKind) => {
+  noteGumSuccess(kind)
+  clearDeviceInUse(kind)
+}
+
+export const onMediaPermissionError = (
+  e: Error,
+  kind?: PermissionKind,
+  path: MediaPath = 'join_preview',
+  deviceId?: string
+) => {
+  const failure = getMediaDeviceFailure(e)
+
+  if (failure === MediaDeviceFailure.PermissionDenied) {
+    void classifyPermissionError(e, kind).then((scope) => {
+      if (scope === 'system') {
+        noteSystemPermissionDenied(kind)
+      } else {
+        notePermissionDeniedFromGum(kind)
+      }
+      captureMediaEvent('permissions-denied', {
+        path,
+        kind,
+        denied_scope: scope,
+        os: getOS(),
+      })
+    })
+    return
+  }
+
+  if (failure === MediaDeviceFailure.NotFound) {
+    // Firefox reports OS-level blocks as NotFoundError (macOS privacy
+    // settings, missing Android app permissions).
+    void isLikelySystemNotFound(e, kind).then((system) => {
+      if (system) {
+        noteSystemPermissionDenied(kind)
+        captureMediaEvent('permissions-denied', {
+          path,
+          kind,
+          denied_scope: 'system',
+          os: getOS(),
+        })
+        return
+      }
+      captureMediaEvent('device-not-found', { path, kind })
+    })
+    return
+  }
+
+  if (failure === MediaDeviceFailure.DeviceInUse) {
+    noteDeviceInUse(kind, deviceId)
+    void captureMediaEvent('device-in-use', { path, kind, os: getOS() })
+    return
+  }
+
+  // "Other" is still reported as an error.
+  reportError(
+    path === 'room' ? 'room_media_failure' : 'join_preview_failure',
+    e,
+    { path, kind }
+  )
+}
+
+/**
+ * Silent availability check for a device that was reported "in use":
+ * acquires and releases it without any error reporting, so it can be
+ * polled. Clears the in-use flag on success.
+ */
+export const probeDeviceReleased = async (
+  kind: PermissionKind,
+  deviceId?: string
+): Promise<boolean> => {
+  try {
+    const constraint = deviceId ? { deviceId: { exact: deviceId } } : true
+    const stream = await navigator.mediaDevices.getUserMedia(
+      kind === 'camera' ? { video: constraint } : { audio: constraint }
+    )
+    stream.getTracks().forEach((track) => track.stop())
+    noteDeviceReady(kind)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Triggers the browser permission prompt for one device kind by acquiring
+ * and immediately releasing a track. Resolves to whether access was granted.
+ */
+export const requestDevicePermission = async (
+  kind: 'audioinput' | 'videoinput',
+  path: MediaPath = 'join_preview',
+  deviceId?: string
+): Promise<boolean> => {
+  try {
+    const track =
+      kind === 'audioinput'
+        ? await createLocalAudioTrack({ deviceId })
+        : await createLocalVideoTrack({ deviceId })
+    track.stop()
+    noteDeviceReady(PERMISSION_KIND[kind])
+    return true
+  } catch (error) {
+    onMediaPermissionError(
+      error as Error,
+      PERMISSION_KIND[kind],
+      path,
+      deviceId
+    )
+    return false
+  }
+}

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

@@ -1,12 +1,12 @@
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/primitives'
 import { Screen } from '@/layout/Screen'
-import { Center, HStack, styled, VStack } from '@/styled-system/jsx'
+import { Center, Stack, styled, VStack } from '@/styled-system/jsx'
+import { css } from '@/styled-system/css'
 import { Rating } from '@/features/rooms/components/Rating.tsx'
 import { useLocation } from 'wouter'
 import { useMemo } from 'react'
 import { DisconnectReason } from 'livekit-client'
-import type { CandidateInfo } from '@/stores/connectionObserver'
 
 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -15,14 +15,18 @@ const Heading = styled('h1', {
     fontStyle: 'normal',
     fontStretch: 'normal',
     fontOpticalSizing: 'auto',
-    fontSize: '2.3rem',
+    fontSize: { base: '1.75rem', xsm: '2.3rem' },
-    lineHeight: '2.5rem',
+    lineHeight: { base: '2.125rem', xsm: '2.5rem' },
     letterSpacing: '0',
-    paddingBottom: '2rem',
+    paddingBottom: { base: '1.5rem', xsm: '2rem' },
     textAlign: 'center',
   },
 })
 
+const buttonClass = css({
+  width: { base: '100%', xsm: 'auto' },
+})
+
 enum DisconnectReasonKey {
   DuplicateIdentity = 'duplicateIdentity',
   ParticipantRemoved = 'participantRemoved',
@@ -48,10 +52,6 @@ const FeedbackRoute = () => {
     const state = window.history.state
     return {
       room_id: state?.room_id as string,
-      pc_publisher: state?.pc_publisher as CandidateInfo,
-      pc_publisher_changes_count: state?.pc_publisher_changes_count as number,
-      pc_subscriber: state?.pc_subscriber as CandidateInfo,
-      pc_subscriber_changes_count: state?.pc_subscriber_changes_count as number,
     }
   }, [])
 
@@ -59,19 +59,31 @@ const FeedbackRoute = () => {
 
   return (
     <Screen layout="centered" footer={false}>
-      <Center>
+      <Center width="100%">
-        <VStack>
+        <VStack width="100%" paddingX="1rem">
           <Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
-          <HStack>
+          <Stack
+            direction={{ base: 'column', xsm: 'row' }}
+            width={{ base: '100%', xsm: 'auto' }}
+            maxWidth="380px"
+          >
             {showBackButton && (
-              <Button variant="secondary" onPress={() => window.history.back()}>
+              <Button
+                variant="secondary"
+                className={buttonClass}
+                onPress={() => window.history.back()}
+              >
                 {t('feedback.back')}
               </Button>
             )}
-            <Button variant="primary" onPress={() => setLocation('/')}>
+            <Button
+              variant="primary"
+              className={buttonClass}
+              onPress={() => setLocation('/')}
+            >
               {t('feedback.home')}
             </Button>
-          </HStack>
+          </Stack>
           <Rating metadata={metadata} />
         </VStack>
       </Center>

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

@@ -16,6 +16,7 @@ import {
 import { useConfig } from '@/api/useConfig.ts'
 import { LogLevel, setLogLevel } from 'livekit-client'
 import { useWatchDeviceAvailability } from '@/features/rooms/hooks/useWatchDeviceAvailability'
+import { useWatchDeviceReleased } from '@/features/rooms/hooks/useWatchDeviceReleased'
 import { useRoomPageTitle } from '@/features/rooms/livekit/hooks/useRoomPageTitle'
 
 const BaseRoom = ({ children }: { children: ReactNode }) => {
@@ -49,6 +50,7 @@ const Room = () => {
 
   useKeyboardShortcuts()
   useWatchDeviceAvailability()
+  useWatchDeviceReleased()
 
   const clearRouterState = () => {
     if (window?.history?.state) {

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

@@ -16,6 +16,10 @@
       "videoinput": "Keine Kamera erkannt. Prüfe, ob sie richtig angeschlossen ist.",
       "audioinput": "Kein Mikrofon erkannt. Prüfe, ob es richtig angeschlossen ist."
     },
+    "deviceInUse": {
+      "videoinput": "Kamera nicht verfügbar: Sie wird wahrscheinlich von einer anderen App oder einem anderen Tab verwendet.",
+      "audioinput": "Mikrofon nicht verfügbar: Es wird wahrscheinlich von einer anderen App oder einem anderen Tab verwendet."
+    },
     "settings": {
       "audio": "Audioeinstellungen",
       "video": "Videoeinstellungen"
@@ -67,6 +71,7 @@
     },
     "cameraDisabled": "Kamera ist deaktiviert.",
     "cameraNotFound": "Keine Kamera erkannt. Prüfe, ob sie richtig angeschlossen ist.",
+    "cameraInUse": "Deine Kamera ist nicht verfügbar. Sie wird wahrscheinlich von einer anderen App oder einem anderen Tab verwendet.",
     "cameraStarting": "Kamera wird gestartet…",
     "cameraNotGranted": "Möchtest du, dass andere dich während des Meetings sehen können?",
     "cameraAndMicNotGranted": "Möchtest du, dass andere dich während des Meetings sehen und hören können?",
@@ -214,8 +219,11 @@
       "title": "Bildschirmfreigabe nicht möglich",
       "ariaLabel": "Bildschirmfreigabe nicht möglich",
       "message": "Deinem Browser fehlt möglicherweise die Berechtigung, den Bildschirm deines Geräts abzugreifen.",
-      "macInstructions": "Gehe zu den",
+      "settingsInstructions": "Gehe zu den",
-      "macSystemPreferences": "Systemeinstellungen",
+      "settingsLabel": {
+        "macos": "Systemeinstellungen",
+        "windows": "Windows-Datenschutzeinstellungen"
+      },
       "helpLinkText": "Weitere Informationen findest du unter",
       "helpLinkLabel": "Bildschirmfreigabeproblem",
       "closeButton": "Schließen",

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

@@ -16,6 +16,10 @@
       "videoinput": "No camera detected. Check that it is properly wired.",
       "audioinput": "No microphone detected. Check that it is properly wired."
     },
+    "deviceInUse": {
+      "videoinput": "Camera unavailable: it is probably in use by another application or browser tab.",
+      "audioinput": "Microphone unavailable: it is probably in use by another application or browser tab."
+    },
     "settings": {
       "audio": "Audio settings",
       "video": "Video settings"
@@ -67,6 +71,7 @@
     },
     "cameraDisabled": "Camera is disabled.",
     "cameraNotFound": "No camera detected. Check that it is properly plugged in.",
+    "cameraInUse": "Your camera is unavailable. It is probably being used by another application or browser tab.",
     "cameraStarting": "Camera is starting…",
     "cameraNotGranted": "Would you like others to be able to see you during the meeting?",
     "cameraAndMicNotGranted": "Would you like others to be able to see and hear you during the meeting?",
@@ -214,8 +219,11 @@
       "title": "Unable to share your screen",
       "ariaLabel": "Unable to share your screen",
       "message": "Your browser may not be allowed to record the screen on your computer.",
-      "macInstructions": "Go to your",
+      "settingsInstructions": "Go to your",
-      "macSystemPreferences": "System Preferences",
+      "settingsLabel": {
+        "macos": "System Preferences",
+        "windows": "Windows privacy settings"
+      },
       "helpLinkText": "To learn more, see",
       "helpLinkLabel": "Presentation issue",
       "closeButton": "Dismiss",

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

@@ -16,6 +16,10 @@
       "videoinput": "Aucune caméra détectée. Vérifiez qu'elle est bien branchée.",
       "audioinput": "Aucun microphone détecté. Vérifiez qu'il est bien branché."
     },
+    "deviceInUse": {
+      "videoinput": "Caméra indisponible : elle est probablement utilisée par une autre application ou un autre onglet.",
+      "audioinput": "Microphone indisponible : il est probablement utilisé par une autre application ou un autre onglet."
+    },
     "settings": {
       "audio": "Paramètres audio",
       "video": "Paramètres video"
@@ -67,6 +71,7 @@
     },
     "cameraDisabled": "La caméra est désactivée.",
     "cameraNotFound": "Aucune caméra détectée. Vérifiez qu'elle est bien branchée.",
+    "cameraInUse": "Votre caméra n'est pas disponible. Elle est probablement utilisée par une autre application ou un autre onglet.",
     "cameraStarting": "La caméra va démarrer…",
     "cameraNotGranted": "Souhaitez-vous que les autres puissent vous voir pendant la réunion ?",
     "cameraAndMicNotGranted": "Souhaitez-vous que les autres puissent vous voir et vous entendre pendant la réunion ?",
@@ -214,8 +219,11 @@
       "title": "Impossible de partager votre écran",
       "ariaLabel": "Impossible de partager votre écran",
       "message": "Il se peut que votre navigateur ne soit pas autorisé à enregistrer l'écran sur votre ordinateur.",
-      "macInstructions": "Accèdez à vos",
+      "settingsInstructions": "Accédez à vos",
-      "macSystemPreferences": "Préférences système",
+      "settingsLabel": {
+        "macos": "Préférences système",
+        "windows": "paramètres de confidentialité Windows"
+      },
       "helpLinkText": "Pour en savoir plus, consulter",
       "helpLinkLabel": "Problème de présentation",
       "closeButton": "Ignorer",

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

@@ -16,6 +16,10 @@
       "videoinput": "Geen camera gedetecteerd. Controleer of deze goed is aangesloten.",
       "audioinput": "Geen microfoon gedetecteerd. Controleer of deze goed is aangesloten."
     },
+    "deviceInUse": {
+      "videoinput": "Camera niet beschikbaar: deze wordt waarschijnlijk gebruikt door een andere toepassing of een ander tabblad.",
+      "audioinput": "Microfoon niet beschikbaar: deze wordt waarschijnlijk gebruikt door een andere toepassing of een ander tabblad."
+    },
     "settings": {
       "audio": "Audio-instellingen",
       "video": "Video-instellingen"
@@ -67,6 +71,7 @@
     },
     "cameraDisabled": "Camera is uitgeschakeld.",
     "cameraNotFound": "Geen camera gedetecteerd. Controleer of deze goed is aangesloten.",
+    "cameraInUse": "Je camera is niet beschikbaar. Deze wordt waarschijnlijk gebruikt door een andere toepassing of een ander tabblad.",
     "cameraStarting": "Camera wordt ingeschakeld…",
     "cameraNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien?",
     "cameraAndMicNotGranted": "Wilt u dat anderen u tijdens de vergadering kunnen zien en horen?",
@@ -214,8 +219,11 @@
       "title": "Kan uw scherm niet delen",
       "ariaLabel": "Kan uw scherm niet delen",
       "message": "Het is mogelijk dat uw browser geen toestemming heeft om het scherm op uw computer op te nemen.",
-      "macInstructions": "Ga naar uw",
+      "settingsInstructions": "Ga naar uw",
-      "macSystemPreferences": "Systeemvoorkeuren",
+      "settingsLabel": {
+        "macos": "Systeemvoorkeuren",
+        "windows": "Windows-privacyinstellingen"
+      },
       "helpLinkText": "Meer informatie, zie",
       "helpLinkLabel": "Presentatieprobleem",
       "closeButton": "Negeren",

src/frontend/src/main.tsx

@@ -2,26 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 
-const CHUNK_RELOAD_KEY = 'vite-preload-error-reload-at'
-const RELOAD_COOLDOWN_MS = 30_000
-
-window.addEventListener('vite:preloadError', (event) => {
-  try {
-    const lastReloadAt = Number(sessionStorage.getItem(CHUNK_RELOAD_KEY)) || 0
-    if (Date.now() - lastReloadAt <= RELOAD_COOLDOWN_MS) {
-      // Recent reload didn't help: not a stale deploy, surface the error.
-      return
-    }
-    sessionStorage.setItem(CHUNK_RELOAD_KEY, String(Date.now()))
-  } catch {
-    // Without sessionStorage we cannot guard against a reload loop:
-    // don't auto-reload, let the error propagate.
-    return
-  }
-  event.preventDefault()
-  window.location.reload()
-})
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />

src/frontend/src/stores/connectionObserver.ts

@@ -1,23 +1,9 @@
 import { proxy } from 'valtio'
 
-export type CandidateInfo = {
-  type: string
-  address: string
-  protocol: string
-}
-
 type State = {
   isIdleDisconnectModalOpen: boolean
-  publisher: CandidateInfo | null
-  publisherChangesCount: number
-  subscriber: CandidateInfo | null
-  subscriberChangesCount: number
 }
 
 export const connectionObserverStore = proxy<State>({
   isIdleDisconnectModalOpen: false,
-  publisher: null,
-  publisherChangesCount: 0,
-  subscriber: null,
-  subscriberChangesCount: 0,
 })

src/frontend/src/stores/deviceAvailability.ts

@@ -1,14 +1,68 @@
 import { proxy } from 'valtio'
 import { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import type { PermissionKind } from './permissions'
 
-// Device presence (not permission): enumerateDevices() exposes kinds
+// Device availability (not permission):
-// before any grant. Optimistic defaults until the first sync.
+// - presence: enumerateDevices() exposes kinds before any grant.
-export const deviceAvailabilityStore = proxy({
+//   Optimistic defaults until the first sync.
+// - in use: the device exists and is allowed, but getUserMedia() failed
+//   because another application or tab is holding it. The id of the
+//   affected device is kept (when known) so that a selection change can
+//   invalidate a flag that no longer concerns the selected device.
+export const deviceAvailabilityStore = proxy<{
+  hasCamera: boolean
+  hasMicrophone: boolean
+  cameraInUse: boolean
+  microphoneInUse: boolean
+  cameraInUseDeviceId?: string
+  microphoneInUseDeviceId?: string
+  synced: boolean
+}>({
   hasCamera: true,
   hasMicrophone: true,
+  cameraInUse: false,
+  microphoneInUse: false,
   synced: false,
 })
 
+const IN_USE_KEY: Record<PermissionKind, 'cameraInUse' | 'microphoneInUse'> = {
+  camera: 'cameraInUse',
+  microphone: 'microphoneInUse',
+}
+
+const IN_USE_DEVICE_KEY: Record<
+  PermissionKind,
+  'cameraInUseDeviceId' | 'microphoneInUseDeviceId'
+> = {
+  camera: 'cameraInUseDeviceId',
+  microphone: 'microphoneInUseDeviceId',
+}
+
+const ALL_KINDS: PermissionKind[] = ['camera', 'microphone']
+
+export const noteDeviceInUse = (kind?: PermissionKind, deviceId?: string) => {
+  for (const k of kind ? [kind] : ALL_KINDS) {
+    deviceAvailabilityStore[IN_USE_KEY[k]] = true
+    deviceAvailabilityStore[IN_USE_DEVICE_KEY[k]] = deviceId
+  }
+}
+
+export const clearDeviceInUse = (kind?: PermissionKind) => {
+  for (const k of kind ? [kind] : ALL_KINDS) {
+    deviceAvailabilityStore[IN_USE_KEY[k]] = false
+    deviceAvailabilityStore[IN_USE_DEVICE_KEY[k]] = undefined
+  }
+}
+
+export const clearDeviceInUseForOtherDevice = (
+  kind: PermissionKind,
+  selectedDeviceId?: string
+) => {
+  const affected = deviceAvailabilityStore[IN_USE_DEVICE_KEY[kind]]
+  if (!affected || !selectedDeviceId || affected === selectedDeviceId) return
+  clearDeviceInUse(kind)
+}
+
 export const syncDeviceAvailability = async (): Promise<void> => {
   try {
     const devices = await navigator.mediaDevices.enumerateDevices()

src/frontend/src/stores/muteDialog.ts

@@ -0,0 +1,18 @@
+import { proxy, ref } from 'valtio'
+import type { Participant } from 'livekit-client'
+
+type State = {
+  participant: Participant | null
+}
+
+export const muteDialogStore = proxy<State>({
+  participant: null,
+})
+
+export const openMuteDialog = (participant: Participant) => {
+  muteDialogStore.participant = ref(participant)
+}
+
+export const closeMuteDialog = () => {
+  muteDialogStore.participant = null
+}

src/frontend/vite.config.ts

@@ -5,16 +5,26 @@ import { visualizer } from 'rollup-plugin-visualizer'
 import svgr from 'vite-plugin-svgr'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
 
-const mediapipeVersion: string = JSON.parse(
+const readPackageJson = (path: string) =>
-  readFileSync(
+  JSON.parse(readFileSync(new URL(path, import.meta.url), 'utf-8'))
-    new URL(
+
-      './node_modules/@mediapipe/tasks-vision/package.json',
+const mediapipeVersion: string = readPackageJson(
-      import.meta.url
+  './node_modules/@mediapipe/tasks-vision/package.json'
-    ),
-    'utf-8'
-  )
 ).version
 
+const livekitMediapipeVersion: string = readPackageJson(
+  './node_modules/@livekit/track-processors/package.json'
+).dependencies['@mediapipe/tasks-vision']
+
+if (mediapipeVersion !== livekitMediapipeVersion) {
+  throw new Error(
+    `@mediapipe/tasks-vision@${mediapipeVersion} is installed, but ` +
+      `@livekit/track-processors declares "${livekitMediapipeVersion}". ` +
+      `The two must stay in sync: pin "@mediapipe/tasks-vision" to ` +
+      `"${livekitMediapipeVersion}" in package.json.`
+  )
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd())

src/mail/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "mail_mjml",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "1.26.0",
+      "version": "1.28.0",
       "license": "MIT",
       "dependencies": {
-        "@html-to/text-cli": "0.6.0",
+        "@html-to/text-cli": "0.6.1",
         "mjml": "5.4.0"
       }
     },
@@ -52,14 +52,14 @@
       "license": "MIT"
     },
     "node_modules/@html-to/text-cli": {
-      "version": "0.6.0",
+      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@html-to/text-cli/-/text-cli-0.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@html-to/text-cli/-/text-cli-0.6.1.tgz",
-      "integrity": "sha512-JwlrCBccUM/QkUpc37P+qG+hpkXRbWOVcHd9vM+5D+O82Ak2p8anGRxisr33//aJzlkYNKNg2I8LDh3Bx2tBPg==",
+      "integrity": "sha512-fnbLS8bra4BkGinXWzUKfalqLPYmz8E2ABT+TgHUZ4inhAUYF2rBEEctOKqZ6FgaJF1iZ//KBBLKVz6nm3RbhA==",
       "license": "MIT",
       "dependencies": {
         "@selderee/plugin-htmlparser2": "~0.12.0",
         "aspargvs": "~0.7.0",
-        "deepmerge-ts": "^7.1.5",
+        "deepmerge-ts": "^8.0.1",
         "htmlparser2": "^10.1.0",
         "selderee": "~0.12.0"
       },
@@ -656,9 +656,19 @@
       "license": "CC0-1.0"
     },
     "node_modules/deepmerge-ts": {
-      "version": "7.1.5",
+      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-8.0.1.tgz",
-      "integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==",
+      "integrity": "sha512-szCXE7YLCvLKR9bFPJcvsezOShdalctSvrgN/LM/QGUEPZQajwjmsMObZ6/DuANT5lxzM/wtO8Feubwdkz8myA==",
+      "funding": [
+        {
+          "type": "ko-fi",
+          "url": "https://ko-fi.com/rebeccastevens"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/deepmerge-ts"
+        }
+      ],
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=16.0.0"

src/mail/package.json

@@ -1,10 +1,10 @@
 {
   "name": "mail_mjml",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {
-    "@html-to/text-cli": "0.6.0",
+    "@html-to/text-cli": "0.6.1",
     "mjml": "5.4.0"
   },
   "private": true,

src/sdk/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sdk",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk",
-      "version": "1.26.0",
+      "version": "1.28.0",
       "license": "ISC",
       "workspaces": [
         "./library",

src/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdk",
-  "version": "1.26.0",
+  "version": "1.28.0",
   "author": "",
   "license": "ISC",
   "description": "",

src/summary/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "summary"
-version = "1.26.0"
+version = "1.28.0"
 dependencies = [
     "fastapi[standard]>=0.105.0",
     "uvicorn>=0.24.0",

src/summary/summary/core/analytics.py

@@ -1,9 +1,10 @@
 """Analytics classes."""
 
 import json
+import socket
 import time
 from collections import Counter
-from functools import lru_cache
+from functools import cached_property, lru_cache
 from urllib.parse import urlsplit, urlunsplit
 
 import redis
@@ -33,6 +34,10 @@ class Analytics:
             logger.info("Initialize analytics client")
             self._client = Posthog(settings.posthog_api_key, settings.posthog_api_host)
 
+    @cached_property
+    def _hostname(self):
+        return socket.gethostname()
+
     @property
     def is_disabled(self):
         """Check if analytics client is disabled or not configured."""
@@ -43,6 +48,8 @@ class Analytics:
         if self.is_disabled:
             return
 
+        properties = {**(properties or {}), "_hostname": self._hostname}
+
         try:
             self._client.capture(
                 event_name, distinct_id=distinct_id, properties=properties

src/summary/summary/core/config.py

@@ -83,6 +83,7 @@ class Settings(BaseSettings):
     aws_s3_access_key_id: str
     aws_s3_secret_access_key: SecretStr
     aws_s3_secure_access: bool = True
+    aws_s3_region_name: str | None = None
     aws_transcript_path: str = "transcripts"
     aws_summary_path: str = "summaries"
 

src/summary/summary/core/file_service.py

@@ -282,6 +282,7 @@ class FileService:
             access_key=settings.aws_s3_access_key_id,
             secret_key=settings.aws_s3_secret_access_key.get_secret_value(),
             secure=settings.aws_s3_secure_access,
+            region=settings.aws_s3_region_name,
         )
 
         self._bucket_name = settings.aws_storage_bucket_name

src/summary/summary/core/models.py

@@ -26,7 +26,7 @@ class RecordingMetadata(BaseModel):
 
     cloud_storage_url: Url = Field(
         title="Cloud Storage URL",
-        description="The URL of the metadata file for speaker assignement.",
+        description="The URL of the metadata file for speaker assignment.",
     )
     started_at: AwareDatetime = Field(title="Start time of the recording to transcribe")
     ended_at: AwareDatetime = Field(title="End time of the recording to transcribe")