✨(backend) update a room's access level and configuration from the external API

Update a room's access level and/or configuration using PATCH from the
external API. Log modifications and send to analytics.

CHANGELOG.md

@@ -8,6 +8,28 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(backend) update a room's access level and configuration from the external API
+
+### 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
+
+## [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
@@ -15,12 +37,22 @@ and this project adheres to
 - ⬆️(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
 
 - 📝(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
 
@@ -28,6 +60,7 @@ and this project adheres to
 
 - 🔥(frontend) drop unused vendored ConnectionObserver
 - 🐛(frontend) vendor formatChatMessageLinks and trim surrounding newlines
+- ✨(summary) add hostname to analytics properties
 
 ### Fixed
 

docs/openapi.yaml

@@ -16,11 +16,11 @@ info:
     * `rooms:list` – List rooms accessible to the delegated user.
     * `rooms:retrieve` – Retrieve details of a specific room.
     * `rooms:create` – Create new rooms.
-    * `rooms:update` – **Coming soon** Update existing rooms, e.g., add attendees to a room.
+    * `rooms:update` – Update the access level and configuration of existing rooms.
     * `rooms:delete` – **Coming soon** Delete rooms generated by the application.
-    
+
     #### Upcoming Features
-    
+
     * **Add attendees to a room:** You will be able to update a room to include a list of attendees, allowing them to bypass the lobby system automatically.
     * **Delete application-generated rooms:** Rooms created via the application can be deleted when no longer needed.
 
@@ -310,6 +310,67 @@ paths:
         '404':
           $ref: '#/components/responses/RoomNotFoundError'
 
+    patch:
+      tags:
+        - Rooms
+      summary: Update a room
+      description: |
+        Partially updates a room. Only the delegated user's rooms where they are
+        administrator or owner can be updated; any other role gets a `403`.
+
+        **Updatable fields:** `access_level` and `configuration`. Every other field
+        (`id`, `name`, `slug`, `pin_code`) is read-only and silently ignored when sent.
+
+        `configuration` is replaced as a whole, it is not merged with the stored one.
+        Send the complete object you want the room to end up with.
+
+        Full replacement (`PUT`) is not supported. Use `PATCH` instead.
+      operationId: updateRoom
+      security:
+        - BearerAuth: [rooms:update]
+      parameters:
+        - name: id
+          in: path
+          required: true
+          description: Room UUID
+          schema:
+            type: string
+            format: uuid
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/RoomUpdate'
+            examples:
+              accessLevelOnly:
+                summary: Change the access level
+                value:
+                  access_level: "restricted"
+              configurationOnly:
+                summary: Replace the room configuration
+                value:
+                  configuration:
+                    everyone_can_mute: true
+      responses:
+        '200':
+          description: Room updated successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Room'
+        '400':
+          $ref: '#/components/responses/BadRequestError'
+        '401':
+          $ref: '#/components/responses/UnauthorizedError'
+        '403':
+          $ref: '#/components/responses/ForbiddenError'
+        '404':
+          $ref: '#/components/responses/RoomNotFoundError'
+        '405':
+          description: |
+            Method not allowed, `PUT` is not supported on this endpoint.
+
 components:
   securitySchemes:
     BearerAuth:
@@ -386,6 +447,17 @@ components:
         configuration:
           $ref: '#/components/schemas/RoomConfiguration'
 
+    RoomUpdate:
+      type: object
+      description: |
+        Fields that can be updated on an existing room. Both are optional, omitted
+        fields keep their current value.
+      properties:
+        access_level:
+          $ref: '#/components/schemas/RoomAccessLevel'
+        configuration:
+          $ref: '#/components/schemas/RoomConfiguration'
+
     RoomConfiguration:
       type: object
       description: |
@@ -427,6 +499,9 @@ components:
         - `public`: Anyone with the room link can join directly, no authentication required.
         - `trusted`: Authenticated users join directly. Unauthenticated users wait in the lobby for approval.
         - `restricted`: Only participants explicitly trusted by the owner bypass the lobby. Everyone else waits for approval regardless of authentication.
+
+        `public` is rejected with a `400` unless the deployment explicitly enables it
+        for this API. This applies both when creating a room and when updating one.
       example: "trusted"
 
     Room:

docs/resource_server.yaml

@@ -20,7 +20,7 @@ info:
     * `lasuite_visio:rooms:list` – List rooms accessible to the delegated user.
     * `lasuite_visio:rooms:retrieve` – Retrieve details of a specific room.
     * `lasuite_visio:rooms:create` – Create new rooms.
-    * `lasuite_visio:rooms:update` – **Coming soon** Update existing rooms, e.g., add attendees to a room.
+    * `lasuite_visio:rooms:update` – Update the access level and configuration of existing rooms.
     * `lasuite_visio:rooms:delete` – **Coming soon** Delete rooms generated by the application.
     
     #### Upcoming Features
@@ -206,6 +206,67 @@ paths:
         '404':
           $ref: '#/components/responses/RoomNotFoundError'
 
+    patch:
+      tags:
+        - Rooms
+      summary: Update a room
+      description: |
+        Partially updates a room. Only rooms where the user is administrator or
+        owner can be updated; any other role gets a `403`.
+
+        **Updatable fields:** `access_level` and `configuration`. Every other field
+        (`id`, `name`, `slug`, `pin_code`) is read-only and silently ignored when sent.
+
+        `configuration` is replaced as a whole, it is not merged with the stored one.
+        Send the complete object you want the room to end up with.
+
+        Full replacement (`PUT`) is not supported. Use `PATCH` instead.
+      operationId: updateRoom
+      security:
+        - BearerAuth: [rooms:update]
+      parameters:
+        - name: id
+          in: path
+          required: true
+          description: Room UUID
+          schema:
+            type: string
+            format: uuid
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/RoomUpdate'
+            examples:
+              accessLevelOnly:
+                summary: Change the access level
+                value:
+                  access_level: "restricted"
+              configurationOnly:
+                summary: Replace the room configuration
+                value:
+                  configuration:
+                    everyone_can_mute: true
+      responses:
+        '200':
+          description: Room updated successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Room'
+        '400':
+          $ref: '#/components/responses/BadRequestError'
+        '401':
+          $ref: '#/components/responses/UnauthorizedError'
+        '403':
+          $ref: '#/components/responses/ForbiddenError'
+        '404':
+          $ref: '#/components/responses/RoomNotFoundError'
+        '405':
+          description: |
+            Method not allowed, `PUT` is not supported on this endpoint.
+
 components:
   securitySchemes:
     BearerAuth:
@@ -227,6 +288,17 @@ components:
         configuration:
           $ref: '#/components/schemas/RoomConfiguration'
 
+    RoomUpdate:
+      type: object
+      description: |
+        Fields that can be updated on an existing room. Both are optional, omitted
+        fields keep their current value.
+      properties:
+        access_level:
+          $ref: '#/components/schemas/RoomAccessLevel'
+        configuration:
+          $ref: '#/components/schemas/RoomConfiguration'
+
     RoomConfiguration:
       type: object
       description: |
@@ -268,6 +340,9 @@ components:
         - `public`: Anyone with the room link can join directly, no authentication required.
         - `trusted`: Authenticated users join directly. Unauthenticated users wait in the lobby for approval.
         - `restricted`: Only participants explicitly trusted by the owner bypass the lobby. Everyone else waits for approval regardless of authentication.
+
+        `public` is rejected with a `400` unless the deployment explicitly enables it
+        for this API. This applies both when creating a room and when updating one.
       example: "trusted"
 
     Room:

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.27.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.27.0"
+version = "1.28.0"
 source = { virtual = "." }
 dependencies = [
     { name = "livekit-agents" },

src/backend/core/analytics/events.py

@@ -8,6 +8,7 @@ class AnalyticsEvent(StrEnum):
 
     # Rooms
     ROOM_CREATED = "room_created"
+    ROOM_UPDATED = "room_updated"
 
     # Roomkit (meeting-room SIP devices)
     ROOMKIT_JOINED = "roomkit_joined"

src/backend/core/api/viewsets.py

@@ -89,11 +89,7 @@ from core.services.participants_management import (
     ParticipantsManagementException,
 )
 from core.services.room_creation import RoomCreation
-from core.services.room_management import (
-    RoomManagement,
-    RoomManagementException,
-    RoomNotFoundException,
-)
+from core.services.room_management import sync_room_metadata
 from core.services.room_roles import (
     RoomRoleError,
     RoomRoleService,
@@ -370,26 +366,7 @@ class RoomViewSet(
         ):
             return
 
-        metadata = {
-            "configuration": room.configuration,
-            "access_level": room.access_level,
-        }
-
-        try:
-            RoomManagement().update_metadata(
-                room_name=str(room.id),
-                metadata=metadata,
-            )
-        except RoomNotFoundException:
-            logger.info(
-                "LiveKit room %s does not exist yet, skipping metadata sync",
-                room.id,
-            )
-        except RoomManagementException:
-            logger.warning(
-                "Failed to sync metadata to LiveKit for room %s",
-                room.id,
-            )
+        sync_room_metadata(room)
 
     @decorators.action(
         detail=True,

src/backend/core/external_api/viewsets.py

@@ -25,6 +25,7 @@ from rest_framework import (
 from core import analytics, api, models
 from core.api.feature_flag import FeatureFlag
 from core.services.jwt_token import JwtTokenService
+from core.services.room_management import sync_room_metadata
 
 from ..services.provisional_user_service import (
     ProvisionalUserCreationDisabledError,
@@ -142,6 +143,7 @@ class RoomViewSet(
     mixins.CreateModelMixin,
     mixins.RetrieveModelMixin,
     mixins.ListModelMixin,
+    mixins.UpdateModelMixin,
     viewsets.GenericViewSet,
 ):
     """Application-delegated API for room management.
@@ -154,8 +156,12 @@ class RoomViewSet(
     - list: List rooms the user has access to (requires 'rooms:list' scope)
     - retrieve: Get room details (requires 'rooms:retrieve' scope)
     - create: Create a new room owned by the user (requires 'rooms:create' scope)
+    - partial_update: Update a room's access level and configuration, for
+      administrators and owners only (requires 'rooms:update' scope)
     """
 
+    http_method_names = ["get", "post", "patch", "head", "options"]
+
     authentication_classes = [
         authentication.ApplicationJWTAuthentication,
         authentication.AddonsJWTAuthentication,
@@ -189,6 +195,38 @@ class RoomViewSet(
         serializer = self.get_serializer(queryset, many=True)
         return drf_response.Response(serializer.data)
 
+    def _track_room_event(self, room, event, **extra_properties):
+        """Log a room operation for auditing and forward it to analytics."""
+
+        auth_method = type(self.request.successful_authenticator).__name__
+        client_id = (self.request.auth or {}).get("client_id", "unknown")
+
+        # Log for auditing
+        details = "".join(f", {key}={value}" for key, value in extra_properties.items())
+        logger.info(
+            "Room %s via application: room_id=%s, user_id=%s, client_id=%s, auth_method=%s%s",
+            event.removeprefix("room_"),
+            room.id,
+            self.request.user.id,
+            client_id,
+            auth_method,
+            details,
+        )
+
+        analytics.capture(
+            self.request.user,
+            event,
+            {
+                "room_id": str(room.pk),
+                "access_level": room.access_level,
+                "client_id": client_id,
+                "external_api": True,
+                "auth_method": auth_method,
+                **extra_properties,
+                "$set": {"email": self.request.user.email},
+            },
+        )
+
     def perform_create(self, serializer):
         """Set the current user as owner of the newly created room."""
         room = serializer.save()
@@ -198,27 +236,31 @@ class RoomViewSet(
             role=models.RoleChoices.OWNER,
         )
 
-        auth_method = type(self.request.successful_authenticator).__name__
-        client_id = (self.request.auth or {}).get("client_id", "unknown")
+        self._track_room_event(room, analytics.AnalyticsEvent.ROOM_CREATED)
 
-        # Log for auditing
-        logger.info(
-            "Room created via application: room_id=%s, user_id=%s, client_id=%s, auth_method=%s",
-            room.id,
-            self.request.user.id,
-            client_id,
-            auth_method,
+    def perform_update(self, serializer):
+        """Persist the room update, sync it to LiveKit, then log and track it."""
+
+        previous_values = {
+            "access_level": serializer.instance.access_level,
+            "configuration": serializer.instance.configuration,
+        }
+
+        room = serializer.save()
+
+        # Report the fields that actually changed, not the ones that were submitted.
+        updated_fields = sorted(
+            field
+            for field, previous_value in previous_values.items()
+            if getattr(room, field) != previous_value
         )
 
-        analytics.capture(
-            self.request.user,
-            analytics.AnalyticsEvent.ROOM_CREATED,
-            {
-                "room_id": str(room.pk),
-                "access_level": room.access_level,
-                "client_id": client_id,
-                "external_api": True,
-                "auth_method": auth_method,
-                "$set": {"email": self.request.user.email},
-            },
+        if updated_fields:
+            sync_room_metadata(room)
+
+        self._track_room_event(
+            room,
+            analytics.AnalyticsEvent.ROOM_UPDATED,
+            updated_fields=updated_fields,
+            previous_access_level=previous_values["access_level"],
         )

src/backend/core/factories.py

@@ -48,7 +48,7 @@ class ResourceFactory(factory.django.DjangoModelFactory):
                 else:
                     UserResourceAccessFactory(resource=self, user=item[0], role=item[1])
 
-        self.save()
+            self.save()
 
 
 class UserResourceAccessFactory(factory.django.DjangoModelFactory):

src/backend/core/services/room_management.py

@@ -116,3 +116,32 @@ class RoomManagement:
             raise RoomManagementException("Could not delete room") from e
         finally:
             await lkapi.aclose()
+
+
+def sync_room_metadata(room):
+    """Push a room's configuration and access level to its LiveKit room metadata.
+
+    Failures are swallowed: a room that is not live yet, or a LiveKit hiccup,
+    should never fail the request that triggered the update.
+    """
+
+    metadata = {
+        "configuration": room.configuration,
+        "access_level": room.access_level,
+    }
+
+    try:
+        RoomManagement().update_metadata(
+            room_name=str(room.id),
+            metadata=metadata,
+        )
+    except RoomNotFoundException:
+        logger.info(
+            "LiveKit room %s does not exist yet, skipping metadata sync",
+            room.id,
+        )
+    except RoomManagementException:
+        logger.warning(
+            "Failed to sync metadata to LiveKit for room %s",
+            room.id,
+        )

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

@@ -381,38 +381,11 @@ def test_api_rooms_update_administrators_of_another():
     assert other_room.slug == "old-name"
 
 
-@patch.object(RoomManagement, "update_metadata", side_effect=RoomNotFoundException)
-def test_api_rooms_update_livekit_room_not_found(mock_update_metadata):
-    """Should not fail the API request when the LiveKit room does not exist yet."""
-    user = UserFactory()
-    room = RoomFactory(
-        users=[(user, random.choice(["administrator", "owner"]))],
-        configuration={},
-    )
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.patch(
-        f"/api/v1.0/rooms/{room.id!s}/",
-        {"configuration": {"can_publish_sources": ["camera"]}},
-        format="json",
-    )
-    assert response.status_code == 200
-    room.refresh_from_db()
-    assert room.configuration == {"can_publish_sources": ["camera"]}
-
-    mock_update_metadata.assert_called_once_with(
-        room_name=str(room.id),
-        metadata={
-            "access_level": room.access_level,
-            "configuration": {"can_publish_sources": ["camera"]},
-        },
-    )
-
-
-@patch.object(RoomManagement, "update_metadata", side_effect=RoomManagementException)
-def test_api_rooms_update_livekit_sync_failure(mock_update_metadata):
+@pytest.mark.parametrize("exception", [RoomNotFoundException, RoomManagementException])
+@patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_livekit_sync_failure(mock_update_metadata, exception):
     """Should not fail the API request when the LiveKit metadata sync fails."""
+    mock_update_metadata.side_effect = exception
     user = UserFactory()
     room = RoomFactory(
         users=[(user, random.choice(["administrator", "owner"]))],

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

@@ -5,10 +5,13 @@ from unittest import mock
 import pytest
 from livekit.api import TwirpError
 
+from core.factories import RoomFactory
+from core.models import RoomAccessLevel
 from core.services.room_management import (
     RoomManagement,
     RoomManagementException,
     RoomNotFoundException,
+    sync_room_metadata,
 )
 
 
@@ -58,3 +61,22 @@ def test_delete_room_raises_management_exception(mock_create_livekit_client):
         RoomManagement().delete_room("room-abc")
 
     mock_api.aclose.assert_awaited_once()
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_sync_room_metadata_pushes_configuration_and_access_level(mock_update_metadata):
+    """The room's configuration and access level are forwarded to LiveKit."""
+    room = RoomFactory.build(
+        access_level=RoomAccessLevel.RESTRICTED,
+        configuration={"everyone_can_mute": True},
+    )
+
+    sync_room_metadata(room)
+
+    mock_update_metadata.assert_called_once_with(
+        room_name=str(room.id),
+        metadata={
+            "configuration": {"everyone_can_mute": True},
+            "access_level": RoomAccessLevel.RESTRICTED,
+        },
+    )

src/backend/core/tests/test_external_api_rooms.py

@@ -16,8 +16,17 @@ import responses
 from lasuite.oidc_resource_server.authentication import ResourceServerAuthentication
 from rest_framework.test import APIClient
 
+from core.analytics import AnalyticsEvent
 from core.factories import ApplicationFactory, RoomFactory, UserFactory
-from core.models import ApplicationScope, RoleChoices, Room, RoomAccessLevel, User
+from core.models import (
+    Application,
+    ApplicationScope,
+    RoleChoices,
+    Room,
+    RoomAccessLevel,
+    User,
+)
+from core.services.room_management import RoomManagement
 
 pytestmark = pytest.mark.django_db
 
@@ -880,6 +889,509 @@ def test_api_rooms_create_public_access_level_when_default_is_public(settings):
     assert response.data["access_level"] == RoomAccessLevel.PUBLIC
 
 
+@mock.patch("core.external_api.viewsets.analytics.capture")
+def test_api_rooms_create_tracks_analytics(mock_capture):
+    """Creating a room should emit a ROOM_CREATED analytics event."""
+
+    user = UserFactory()
+    token = generate_test_token(user, [ApplicationScope.ROOMS_CREATE])
+    application = Application.objects.get()
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.post(
+        "/external-api/v1.0/rooms/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 201
+
+    mock_capture.assert_called_once()
+    captured_user, event, properties = mock_capture.call_args[0]
+
+    assert captured_user == user
+    assert event == AnalyticsEvent.ROOM_CREATED
+    assert properties == {
+        "room_id": response.data["id"],
+        "access_level": RoomAccessLevel.RESTRICTED,
+        "client_id": str(application.client_id),
+        "external_api": True,
+        "auth_method": "ApplicationJWTAuthentication",
+        "$set": {"email": user.email},
+    }
+
+
+def test_api_rooms_update_requires_authentication():
+    """Updating a room without authentication should return 401."""
+
+    room = RoomFactory(users=[(UserFactory(), RoleChoices.OWNER)])
+
+    client = APIClient()
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 401
+
+
+def test_api_rooms_update_requires_scope():
+    """Updating a room requires the ROOMS_UPDATE scope."""
+
+    user = UserFactory()
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)])
+
+    # Token without ROOMS_UPDATE scope
+    token = generate_test_token(user, [ApplicationScope.ROOMS_RETRIEVE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 403
+    assert (
+        "insufficient permissions. required scope: rooms:update"
+        in str(response.data).lower()
+    )
+
+
+def test_api_rooms_update_no_scope():
+    """Updating a room without any scope should return 403."""
+
+    user = UserFactory()
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)])
+
+    token = generate_test_token(user, [])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 403
+    assert "insufficient permissions." in str(response.data).lower()
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_owner_success(mock_update_metadata, settings):
+    """An owner should be able to update the access level and the configuration."""
+
+    settings.APPLICATION_BASE_URL = "http://your-application.com"
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+        configuration={},
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {
+            "access_level": RoomAccessLevel.RESTRICTED,
+            "configuration": {"everyone_can_mute": True},
+        },
+        format="json",
+    )
+
+    assert response.status_code == 200
+    assert response.data["id"] == str(room.id)
+    assert response.data["access_level"] == RoomAccessLevel.RESTRICTED
+    assert response.data["configuration"] == {"everyone_can_mute": True}
+    assert response.data["url"] == f"http://your-application.com/{room.slug}"
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.RESTRICTED
+    assert room.configuration == {"everyone_can_mute": True}
+
+    mock_update_metadata.assert_called_once_with(
+        room_name=str(room.id),
+        metadata={
+            "configuration": {"everyone_can_mute": True},
+            "access_level": RoomAccessLevel.RESTRICTED,
+        },
+    )
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_replaces_configuration(mock_update_metadata):
+    """The configuration is replaced as a whole, it is not merged with the stored one."""
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        configuration={"can_publish_sources": ["camera"], "everyone_can_mute": True},
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"configuration": {"everyone_can_mute": False}},
+        format="json",
+    )
+
+    assert response.status_code == 200
+
+    # The keys missing from the payload are dropped, not kept.
+    assert response.data["configuration"] == {"everyone_can_mute": False}
+
+    room.refresh_from_db()
+    assert room.configuration == {"everyone_can_mute": False}
+
+    mock_update_metadata.assert_called_once_with(
+        room_name=str(room.id),
+        metadata={
+            "configuration": {"everyone_can_mute": False},
+            "access_level": room.access_level,
+        },
+    )
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_administrator_success(mock_update_metadata):
+    """An administrator should be able to update a room."""
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.ADMIN)],
+        access_level=RoomAccessLevel.TRUSTED,
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 200
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.RESTRICTED
+    mock_update_metadata.assert_called_once()
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_put_not_allowed(mock_update_metadata):
+    """PUT is not exposed: full replacement is not supported, only PATCH is."""
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+        configuration={},
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.put(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {
+            "access_level": RoomAccessLevel.RESTRICTED,
+            "configuration": {"everyone_can_mute": True},
+        },
+        format="json",
+    )
+
+    assert response.status_code == 405
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.TRUSTED
+    assert room.configuration == {}
+    mock_update_metadata.assert_not_called()
+
+
+@pytest.mark.parametrize("role", [RoleChoices.MEMBER, None])
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_without_privileges(mock_update_metadata, role):
+    """Members and users without any role should not be able to update a room."""
+
+    user = UserFactory()
+    users = [(user, role)] if role else []
+    room = RoomFactory(users=users, access_level=RoomAccessLevel.TRUSTED)
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 403
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.TRUSTED
+    mock_update_metadata.assert_not_called()
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_readonly_enforcement(mock_update_metadata):
+    """Read-only fields provided on update should be ignored, the slug stays immutable."""
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+    )
+    expected_id, expected_name = str(room.id), room.name
+    expected_slug, expected_pin_code = room.slug, room.pin_code
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {
+            "id": str(uuid.uuid4()),
+            "name": "fake-name",
+            "slug": "fake-slug",
+            "pin_code": "000000",
+            "access_level": RoomAccessLevel.RESTRICTED,
+        },
+        format="json",
+    )
+
+    assert response.status_code == 200
+    assert response.data["id"] == expected_id
+    assert response.data["name"] == expected_name
+    assert response.data["slug"] == expected_slug
+
+    room.refresh_from_db()
+    assert str(room.id) == expected_id
+    assert room.name == expected_name
+    assert room.slug == expected_slug
+    assert room.pin_code == expected_pin_code
+
+    # The one writable field in the payload was applied
+    assert room.access_level == RoomAccessLevel.RESTRICTED
+    mock_update_metadata.assert_called_once()
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_rejects_invalid_configuration(mock_update_metadata):
+    """Updating a room with unsupported configuration keys should fail."""
+
+    user = UserFactory()
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)], configuration={})
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"configuration": {"unsupported_flag": True}},
+        format="json",
+    )
+
+    assert response.status_code == 400
+    assert "extra inputs are not permitted" in str(response.data).lower()
+
+    room.refresh_from_db()
+    assert room.configuration == {}
+    mock_update_metadata.assert_not_called()
+
+
+@pytest.mark.parametrize(
+    "invalid_configuration",
+    [
+        {"can_publish_sources": ["invalid-source"]},
+        {"everyone_can_mute": "invalid-value"},
+    ],
+)
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_rejects_invalid_configuration_values(
+    mock_update_metadata, invalid_configuration
+):
+    """Updating a room with invalid configuration values should fail."""
+
+    user = UserFactory()
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)], configuration={})
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"configuration": invalid_configuration},
+        format="json",
+    )
+
+    assert response.status_code == 400
+
+    room.refresh_from_db()
+    assert room.configuration == {}
+    mock_update_metadata.assert_not_called()
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_public_access_disabled_by_default(mock_update_metadata):
+    """Switching a room to public should be disabled for the external API by default."""
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.PUBLIC},
+        format="json",
+    )
+
+    assert response.status_code == 400
+    assert "public rooms are disabled" in str(response.data).lower()
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.TRUSTED
+    mock_update_metadata.assert_not_called()
+
+
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_public_access_enabled_with_settings(
+    mock_update_metadata, settings
+):
+    """Switching a room to public should be allowed when explicitly enabled."""
+
+    settings.EXTERNAL_API_ALLOW_PUBLIC_ACCESS = True
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.PUBLIC},
+        format="json",
+    )
+
+    assert response.status_code == 200
+    assert response.data["access_level"] == RoomAccessLevel.PUBLIC
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.PUBLIC
+    mock_update_metadata.assert_called_once()
+
+
+@mock.patch("core.external_api.viewsets.analytics.capture")
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_unchanged_skips_livekit_sync(
+    mock_update_metadata, mock_capture
+):
+    """An update that changes nothing should not sync metadata nor report changes."""
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+        configuration={"everyone_can_mute": True},
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {
+            "access_level": RoomAccessLevel.TRUSTED,
+            "configuration": {"everyone_can_mute": True},
+        },
+        format="json",
+    )
+
+    assert response.status_code == 200
+    mock_update_metadata.assert_not_called()
+
+    # The event is still emitted for auditing, but reports an empty delta.
+    _, _, properties = mock_capture.call_args[0]
+    assert properties["updated_fields"] == []
+
+
+@mock.patch("core.external_api.viewsets.analytics.capture")
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_tracks_analytics(mock_update_metadata, mock_capture):
+    """Updating a room should emit a ROOM_UPDATED analytics event."""
+
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+        configuration={},
+    )
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+    application = Application.objects.get()
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {
+            "access_level": RoomAccessLevel.RESTRICTED,
+            "configuration": {"everyone_can_mute": True},
+        },
+        format="json",
+    )
+
+    assert response.status_code == 200
+
+    mock_capture.assert_called_once()
+    captured_user, event, properties = mock_capture.call_args[0]
+
+    assert captured_user == user
+    assert event == AnalyticsEvent.ROOM_UPDATED
+    assert properties == {
+        "room_id": str(room.pk),
+        "access_level": RoomAccessLevel.RESTRICTED,
+        "updated_fields": ["access_level", "configuration"],
+        "previous_access_level": RoomAccessLevel.TRUSTED,
+        "client_id": str(application.client_id),
+        "external_api": True,
+        "auth_method": "ApplicationJWTAuthentication",
+        "$set": {"email": user.email},
+    }
+
+    mock_update_metadata.assert_called_once()
+
+
 def test_api_rooms_response_no_url(settings):
     """Response should not include url field when APPLICATION_BASE_URL is None."""
     settings.APPLICATION_BASE_URL = None
@@ -1497,6 +2009,106 @@ def test_resource_server_denies_access_with_insufficient_scopes(settings):
     assert response.status_code == 403
 
 
+@responses.activate
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_resource_server_updates_room_with_prefixed_scope(
+    mock_update_metadata, settings
+):
+    """A resource server token carrying the prefixed update scope should be accepted."""
+
+    user = UserFactory(sub="very-specific-sub")
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+    )
+
+    settings.OIDC_RS_CLIENT_ID = "some_client_id"
+    settings.OIDC_RS_CLIENT_SECRET = "some_client_secret"
+    settings.OIDC_RS_SCOPES_PREFIX = "lasuite_meet"
+
+    settings.OIDC_OP_URL = "https://oidc.example.com"
+    settings.OIDC_VERIFY_SSL = False
+    settings.OIDC_TIMEOUT = 5
+    settings.OIDC_PROXY = None
+    settings.OIDC_OP_JWKS_ENDPOINT = "https://oidc.example.com/jwks"
+    settings.OIDC_OP_INTROSPECTION_ENDPOINT = "https://oidc.example.com/introspect"
+
+    responses.add(
+        responses.POST,
+        "https://oidc.example.com/introspect",
+        json={
+            "iss": "https://oidc.example.com",
+            "aud": "some_client_id",  # settings.OIDC_RS_CLIENT_ID
+            "sub": "very-specific-sub",
+            "client_id": "some_service_provider",
+            "scope": "openid lasuite_meet lasuite_meet:rooms:update",
+            "active": True,
+        },
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION="Bearer some_token")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 200
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.RESTRICTED
+    mock_update_metadata.assert_called_once()
+
+
+@responses.activate
+def test_resource_server_denies_room_update_without_update_scope(settings):
+    """A resource server token without the update scope should be denied."""
+
+    user = UserFactory(sub="very-specific-sub")
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+    )
+
+    settings.OIDC_RS_CLIENT_ID = "some_client_id"
+    settings.OIDC_RS_CLIENT_SECRET = "some_client_secret"
+    settings.OIDC_RS_SCOPES_PREFIX = "lasuite_meet"
+
+    settings.OIDC_OP_URL = "https://oidc.example.com"
+    settings.OIDC_VERIFY_SSL = False
+    settings.OIDC_TIMEOUT = 5
+    settings.OIDC_PROXY = None
+    settings.OIDC_OP_JWKS_ENDPOINT = "https://oidc.example.com/jwks"
+    settings.OIDC_OP_INTROSPECTION_ENDPOINT = "https://oidc.example.com/introspect"
+
+    responses.add(
+        responses.POST,
+        "https://oidc.example.com/introspect",
+        json={
+            "iss": "https://oidc.example.com",
+            "aud": "some_client_id",  # settings.OIDC_RS_CLIENT_ID
+            "sub": "very-specific-sub",
+            "client_id": "some_service_provider",
+            "scope": "openid lasuite_meet lasuite_meet:rooms:retrieve",
+            "active": True,
+        },
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION="Bearer some_token")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 403
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.TRUSTED
+
+
 # ==============================
 # Addons
 # ==============================
@@ -1548,6 +2160,32 @@ def test_api_rooms_create_with_valid_addons_token():
     assert room.get_role(user) == RoleChoices.OWNER
 
 
+@mock.patch.object(RoomManagement, "update_metadata")
+def test_api_rooms_update_with_valid_addons_token(mock_update_metadata):
+    """Updating a room with a valid addons token should succeed."""
+    user = UserFactory()
+    room = RoomFactory(
+        users=[(user, RoleChoices.OWNER)],
+        access_level=RoomAccessLevel.TRUSTED,
+    )
+
+    token = generate_addons_test_token(user, [ApplicationScope.ROOMS_UPDATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(
+        f"/external-api/v1.0/rooms/{room.id}/",
+        {"access_level": RoomAccessLevel.RESTRICTED},
+        format="json",
+    )
+
+    assert response.status_code == 200
+
+    room.refresh_from_db()
+    assert room.access_level == RoomAccessLevel.RESTRICTED
+    mock_update_metadata.assert_called_once()
+
+
 def test_api_rooms_addons_token_inactive_user():
     """Addons token for an inactive user should return 401."""
     user = UserFactory(is_active=False)

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "uv_build"
 
 [project]
 name = "meet"
-version = "1.27.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.27.0"
+version = "1.28.0"
 source = { editable = "." }
 dependencies = [
     { name = "aiohttp" },

src/frontend/package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "meet",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.27.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",
@@ -16,10 +16,10 @@
         "@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",
@@ -27,9 +27,9 @@
         "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.21.0",
-        "posthog-js": "1.404.1",
+        "posthog-js": "1.409.5",
         "react": "18.3.1",
         "react-aria": "3.50.0",
         "react-aria-components": "1.19.0",
@@ -767,9 +767,9 @@
       "license": "MIT"
     },
     "node_modules/@fontsource-variable/atkinson-hyperlegible-next": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/@fontsource-variable/atkinson-hyperlegible-next/-/atkinson-hyperlegible-next-5.2.6.tgz",
-      "integrity": "sha512-D0Z8peFkRGYACvmWp8Sl8YPGYLBEJbzqapugtsMEYSUUtpQDiZVDHjk9s7bqB4hSCRYCrKuW6V1V+mnHybVnPw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/atkinson-hyperlegible-next/-/atkinson-hyperlegible-next-5.3.0.tgz",
+      "integrity": "sha512-UnLzNUy1RWoLDfydAatP4NaRm99X/WbQEph7q/PymJnCFIOOwKOx3pBmp5ys8trO0dM+CKGuJgeZP9fAR4mQpA==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -1642,21 +1642,21 @@
       }
     },
     "node_modules/@pandacss/preset-panda": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/@pandacss/preset-panda/-/preset-panda-1.11.3.tgz",
-      "integrity": "sha512-IHeRQyIYeGKpQl78A/oI9fGg8MHQiOX/HttH+iQNaRU/MbGN6JsPe/N0ekQC6QY8iiKtLhqR+SRc455SN6JVWw==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@pandacss/preset-panda/-/preset-panda-1.12.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@pandacss/types/-/types-1.11.3.tgz",
-      "integrity": "sha512-tUbxa3WzoCuulP6kcMn7f0uNgLBvu81JAg4sfoUpz6PZE36VHA3k9n6ROEwziTbr7vqgeCj5DYQCUldrVNbEGQ==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@pandacss/types/-/types-1.12.0.tgz",
+      "integrity": "sha512-PtlEIOBEV3RzWffeu1zH+/YFmP+fn24M63STGEbgTwjEBMhyo/FfT2sfZGB8oWAbWUBKBp69OMg25E+/rY3klQ==",
       "license": "MIT",
       "engines": {
         "node": ">=20"
@@ -1719,6 +1719,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@posthog/browser-common": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@posthog/browser-common/-/browser-common-0.3.1.tgz",
+      "integrity": "sha512-1nhMVY1wnHADTg8tR9yvm+lPAz5ROxznfQlBtLzB2FFo4lp/LU8lk9KyFPsARDkBxCfYachsJfvRjocL1G/AJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@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",
@@ -2414,9 +2424,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.101.1",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.1.tgz",
-      "integrity": "sha512-Y6Y92dkXtNqx67m2pMSxUsA3zOCwv862JexZRP8/EPwvKXMPu9m8rv43spiXWzOUIggQ3SQApttALStzhA8B4g==",
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.4.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.1.tgz",
-      "integrity": "sha512-ZnONUuQKJe1bJMStXUL1s5uKN9FcfC28j5cK+iDZcdSHtUv1wtin1cGc/Oewhf2Oc4eKY7lggtpvT/AbMmhHew==",
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.4.tgz",
+      "integrity": "sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.101.1"
+        "@tanstack/query-core": "5.101.4"
       },
       "funding": {
         "type": "github",
@@ -6975,9 +6985,10 @@
       }
     },
     "node_modules/i18next-resources-to-backend": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.1.tgz",
-      "integrity": "sha512-okHbVA+HZ7n1/76MsfhPqDou0fptl2dAlhRDu2ideXloRRduzHsqDOznJBef+R3DFZnbvWoBW+KxJ7fnFjd6Yw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.3.tgz",
+      "integrity": "sha512-8Y/LLAm5fqZc2ckQxtTWbu75ndjNLzF7mcYl6rhc4g+WBopIsG3YhdYqF5qhJy64tlYhlU2KSSnEgW3gGHLqwg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       }
@@ -9123,13 +9134,14 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.404.1",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.404.1.tgz",
-      "integrity": "sha512-ck/HOMKuZ6yefUk5OX+h2s9mUWBsnu0mGDUAWjIwAmQQrloZPShzOhOWuEuZQuMnCKORBFRVGsBAuzsl66cBJA==",
+      "version": "1.409.5",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.409.5.tgz",
+      "integrity": "sha512-s1iJz+vq0YAluUD4OwLjUFIJt/9pqiiB6MITvHWIS16a7pqTJqbSLXsd5/8kJcIgfrOSZHe+mdYAXLYcJCS4LQ==",
       "license": "(Apache-2.0 AND MIT)",
       "dependencies": {
-        "@posthog/core": "^1.43.1",
-        "@posthog/types": "^1.397.0",
+        "@posthog/browser-common": "^0.3.1",
+        "@posthog/core": "^1.46.1",
+        "@posthog/types": "^1.399.0",
         "core-js": "^3.49.0",
         "dompurify": "^3.3.2",
         "fflate": "^0.4.8",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "1.27.0",
+  "version": "1.28.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -15,7 +15,7 @@
     "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",
@@ -23,10 +23,10 @@
     "@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",
@@ -34,9 +34,9 @@
     "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.21.0",
-    "posthog-js": "1.404.1",
+    "posthog-js": "1.409.5",
     "react": "18.3.1",
     "react-aria": "3.50.0",
     "react-aria-components": "1.19.0",

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

@@ -2,6 +2,12 @@ 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 =>

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

@@ -137,6 +137,7 @@ 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'

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 = {
-    participant,
-    publication: participant.getTrackPublication(Source.Camera),
-    source: Source.Camera,
-  }
+  const trackReference = useMemo(
+    () => cameraTrack ?? { participant, source: Source.Camera },
+    [cameraTrack, participant]
+  )
+
+  if (!participant) return
 
   return (
     <StyledToastContainer {...toastProps} ref={ref}>

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)}
-        tooltip={t('muteParticipant', { name })}
-      >
-        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
-      </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
+    <Button
+      isDisabled={isMuted}
+      size={'sm'}
+      variant={'primaryTextDark'}
+      square
+      onPress={() => openMuteDialog(participant)}
+      tooltip={t('muteParticipant', { name })}
+    >
+      {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
+    </Button>
   )
 }

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,46 +48,34 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
       })
 
   return (
-    <>
-      <Button
-        square
-        variant="greyscale"
-        size="sm"
-        tooltip={label}
-        aria-label={label}
-        isDisabled={isMuted || !canMute}
-        onPress={async () =>
-          !isMuted && isLocal(participant)
-            ? await (participant as LocalParticipant)?.setMicrophoneEnabled(
-                false
-              )
-            : setIsAlertOpen(true)
-        }
-        data-attr="participants-mute"
-      >
-        {isMuted ? (
-          <RiMicOffFill color={'gray'} aria-hidden={true} />
-        ) : (
-          <RiMicFill
-            className={css({
-              color: isSpeaking ? 'primaryDark.300' : 'primaryDark.50',
-              animation: isSpeaking
-                ? 'pulse_background 800ms infinite'
-                : undefined,
-            })}
-            aria-hidden={true}
-          />
-        )}
-      </Button>
-      <MuteAlertDialog
-        isOpen={isAlertOpen}
-        onSubmit={() =>
-          muteParticipant(participant).then(() => setIsAlertOpen(false))
-        }
-        onClose={() => setIsAlertOpen(false)}
-        name={name}
-      />
-    </>
+    <Button
+      square
+      variant="greyscale"
+      size="sm"
+      tooltip={label}
+      aria-label={label}
+      isDisabled={isMuted || !canMute}
+      onPress={async () =>
+        !isMuted && isLocal(participant)
+          ? await (participant as LocalParticipant)?.setMicrophoneEnabled(false)
+          : openMuteDialog(participant)
+      }
+      data-attr="participants-mute"
+    >
+      {isMuted ? (
+        <RiMicOffFill color={'gray'} aria-hidden={true} />
+      ) : (
+        <RiMicFill
+          className={css({
+            color: isSpeaking ? 'primaryDark.300' : 'primaryDark.50',
+            animation: isSpeaking
+              ? 'pulse_background 800ms infinite'
+              : undefined,
+          })}
+          aria-hidden={true}
+        />
+      )}
+    </Button>
   )
 }
 

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 */
+export const reactionShortcutHandler = () => {
+  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()
 
-  const handleShortcut = useCallback(() => {
-    if (layoutStore.showReactionsToolbar) {
-      focusReactionsToolbar()
-    } else {
-      layoutStore.showReactionsToolbar = true
-    }
-  }, [])
-
   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/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,7 +28,11 @@ 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'
@@ -225,8 +232,18 @@ export const Conference = ({
             backgroundColor: 'primaryDark.50 !important',
           })}
           onError={(e) => {
-            const failure = MediaDeviceFailure.getFailure(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',
             })

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

@@ -15,7 +15,8 @@ const Card = styled('div', {
     marginTop: '1.5rem',
     borderRadius: '0.25rem',
     boxShadow: '',
-    minWidth: '380px',
+    width: '100%',
+    maxWidth: '380px',
     minHeight: '196px',
   },
 })
@@ -37,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: {
@@ -99,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"
@@ -168,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
@@ -228,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>

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/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/blur/BackgroundCustomProcessor.ts

@@ -105,9 +105,7 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
 
   _initVirtualBackgroundImage() {
     if (this.options.type !== 'virtual') {
-      throw new Error(
-        'Virtual background is only supported for virtual background'
-      )
+      return
     }
 
     const needsUpdate =

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
-  onPress?: () => void
+  tooltip?: string | null
+  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')}
-        tooltip={label}
-        onPress={onPress ?? (() => openPermissionsDialog())}
+        aria-label={ariaLabel ?? label ?? t('ariaLabel')}
+        tooltip={label ?? undefined}
+        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={
-          deviceMissing
-            ? t(`deviceNotFound.${kind}`)
-            : cannotUseDevice
-              ? t('tooltip', { keyPrefix: 'permissionsButton' })
-              : toggleLabel
-        }
+        tooltip={toggleTooltip}
         {...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,
-  NORMAL = 10,
+  LIGHT = 10,
+  NORMAL = 20,
 }
 
 const isSupported = BackgroundProcessorFactory.isSupported()

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,14 @@ 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 { captureMediaEvent, reportError } from '@/features/analytics/telemetry'
+import {
+  getMediaDeviceFailure,
+  noteDeviceReady,
+  onMediaPermissionError,
+} from '../utils/mediaPermissions'
 import {
   saveAudioInputDeviceId,
   saveAudioInputEnabled,
@@ -39,64 +37,6 @@ const VOICE_AUDIO_CONSTRAINTS = {
   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 +44,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 +80,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 +102,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 +112,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 +131,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 +151,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 +245,7 @@ export function useJoinTracks(): {
     enabled: audioEnabled,
     create: createAudio,
     permissionKind: 'microphone',
+    deviceId: audioDeviceId,
     onFailure: disableAudio,
   })
 
@@ -323,6 +254,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,7 +64,7 @@ export const useWatchMediaDeviceErrors = (): MediaDeviceAlert & {
 
   useEffect(() => {
     const onDeviceError = (error: Error, kind?: MediaDeviceKind) => {
-      const failure = MediaDeviceFailure.getFailure(error)
+      const failure = getMediaDeviceFailure(error)
       if (!failure) return
       if (failure != MediaDeviceFailure.Other) {
         void captureMediaEvent('media-device-error', {
@@ -63,6 +78,7 @@ export const useWatchMediaDeviceErrors = (): MediaDeviceAlert & {
       const permissionKind = PERMISSION_BY_DEVICE_KIND[kind]
       switch (failure) {
         case MediaDeviceFailure.DeviceInUse:
+          if (permissionKind) noteDeviceInUse(permissionKind)
           setAlert({ error: failure, kind })
           break
         case MediaDeviceFailure.NotFound:
@@ -92,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,50 +55,107 @@ 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',
-          justifyContent: 'center',
         })}
       >
-        <ControlBarRegion mobile>
-          <LeaveButton />
-          <AudioDevicesControl
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Microphone, error })
-            }
-            hideMenu={true}
-          />
-          <VideoDeviceControl
-            onDeviceError={(error) =>
-              onDeviceError?.({ source: Track.Source.Camera, error })
-            }
-            hideMenu={true}
-          />
-          <ReactionsToggle />
-          <HandToggle />
-          <Button
-            id="room-options-trigger"
-            square
-            variant="primaryDark"
-            aria-label={t('options.buttonLabel')}
-            tooltip={t('options.buttonLabel')}
-            onPress={() => setIsMenuOpened(true)}
-          >
-            <RiMore2Line />
-          </Button>
-        </ControlBarRegion>
+        <div
+          ref={containerRef}
+          className={css({
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+          })}
+        >
+          <ControlBarRegion mobile>
+            <div ref={barRef} className={measuredRow}>
+              <LeaveButton />
+              <AudioDevicesControl
+                onDeviceError={(error) =>
+                  onDeviceError?.({ source: Track.Source.Microphone, error })
+                }
+                hideMenu={true}
+              />
+              <VideoDeviceControl
+                onDeviceError={(error) =>
+                  onDeviceError?.({ source: Track.Source.Camera, error })
+                }
+                hideMenu={true}
+              />
+              {/* Unmounted when empty so it doesn't leave a stray gap. */}
+              {!hideReactions && (
+                <div ref={collapsibleRef} className={measuredRow}>
+                  <ReactionsToggle />
+                  {!hideHand && <HandToggle />}
+                </div>
+              )}
+              <Button
+                id="room-options-trigger"
+                square
+                variant="primaryDark"
+                aria-label={t('options.buttonLabel')}
+                tooltip={t('options.buttonLabel')}
+                onPress={() => setIsMenuOpened(true)}
+              >
+                <RiMore2Line />
+              </Button>
+            </div>
+          </ControlBarRegion>
+        </div>
       </div>
-      <ResponsiveMenu
-        isOpened={isMenuOpened}
-        onClosed={() => setIsMenuOpened(false)}
-      >
+      <ResponsiveMenu isOpened={isMenuOpened} onClosed={closeMenu}>
         <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
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
-            <ParticipantsToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
-            <ToolsToggle
-              description={true}
-              onPress={() => setIsMenuOpened(false)}
-            />
+            <ChatToggle description={true} onPress={closeMenu} />
+            <ParticipantsToggle description={true} onPress={closeMenu} />
+            <ToolsToggle description={true} onPress={closeMenu} />
             <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/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,
@@ -19,6 +20,7 @@ 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'
@@ -99,6 +101,11 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
         return
       }
     }
+
+    if (getMediaDeviceFailure(error) !== MediaDeviceFailure.Other) {
+      return
+    }
+
     reportError('device_switch_failure', error, {
       at: 'ControlBar.onDeviceError',
       source,
@@ -144,6 +151,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
         <ConnectionStateToast />
         <RecordingProvider />
         <SettingsDialogProvider />
+        <MuteAlertDialogProvider />
         <ReactionPortals />
       </div>
     </>

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,7 +1,8 @@
 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'
@@ -14,14 +15,18 @@ const Heading = styled('h1', {
     fontStyle: 'normal',
     fontStretch: 'normal',
     fontOpticalSizing: 'auto',
-    fontSize: '2.3rem',
-    lineHeight: '2.5rem',
+    fontSize: { base: '1.75rem', xsm: '2.3rem' },
+    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',
@@ -54,19 +59,31 @@ const FeedbackRoute = () => {
 
   return (
     <Screen layout="centered" footer={false}>
-      <Center>
-        <VStack>
+      <Center width="100%">
+        <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?",

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?",

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 ?",

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?",

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
-// before any grant. Optimistic defaults until the first sync.
-export const deviceAvailabilityStore = proxy({
+// Device availability (not permission):
+// - presence: enumerateDevices() exposes kinds before any grant.
+//   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/mail/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mail_mjml",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "1.27.0",
+      "version": "1.28.0",
       "license": "MIT",
       "dependencies": {
         "@html-to/text-cli": "0.6.1",

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {

src/sdk/package-lock.json

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

src/sdk/package.json

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

src/summary/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "summary"
-version = "1.27.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