🔒️(backend) enforce display name setting on rename API

AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME was only enforced at LiveKit token generation and by hiding the name field in the frontend. The `rooms/{id}/rename/` endpoint never checked it, so any authenticated user with a valid room token could rename themselves via the API even when the self-hoster had disabled it. Return 403 from the rename action for authenticated users when the setting is disabled, mirroring the `can_edit` rule in `core.utils.generate_token`. Anonymous participants are unaffected, as they have no account name to fall back on. Add tests covering the disabled/enabled cases for authenticated users and the anonymous exception.
2026-09-11 13:39:03 +00:00 · 2026-09-08 01:08:50 +02:00
26 changed files with 136 additions and 1385 deletions
@@ -8,17 +8,9 @@ and this project adheres to

 ## [Unreleased]

-### Changed
-
- 📈(frontend) include LiveKit SIDs in the connection analytics event
- 🔇(backend) silence expected 401 warnings on /me
- 🔇(backend) silence noisy request summary info logs
-
 ### Fixed

- 🐛(backend) acknowledge unknown LiveKit webhook events instead of 422
 - 🔒️(backend) enforce display name setting on rename API
- 🔒️(backend) reject inactive users in resource server backend

 ## [1.31.0] - 2026-09-08

@@ -259,10 +251,6 @@ and this project adheres to
 - ♿️(frontend) focus side panel container on open #1452
 - 🐛(summary) whisper call error handling

-### Added
-
- ✨(frontend) add screen share zoom controls #1498
-
 ## [1.23.0] - 2026-07-08

 ### Added
@@ -286,10 +286,6 @@ class ResourceServerBackend(LaSuiteBackend):
        if user is None and settings.OIDC_CREATE_USER:
            user = self.create_user(sub)

-        if user is not None and not user.is_active:
-            logger.warning("Inactive user attempted authentication: %s", user.pk)
-            raise SuspiciousOperation("User account is disabled.")
-
        return user

    def create_user(self, sub):
@@ -1,25 +0,0 @@
-"""Logging filters for the core application."""
-
-import logging
-
-from django.conf import settings
-
-
-class SilenceExpected401(logging.Filter):
-    """Drop the expected 401 from anonymous hits on the /me endpoint.
-
-    The frontend probes `/users/me/` to check authentication; a 401 for
-    anonymous users is normal, not a warning worth logging.
-    """
-
-    def filter(self, record):
-        """Return False for a 401 on a silenced path, True otherwise."""
-        if getattr(record, "status_code", None) != 401:
-            return True
-
-        request = getattr(record, "request", None)
-        path = getattr(request, "path", None)
-        if not path:
-            return True
-
-        return path not in settings.LOGGING_SILENCED_401_PATHS
@@ -52,6 +52,12 @@ class InvalidPayloadError(LiveKitWebhookError):
    status_code = 400


+class UnsupportedEventTypeError(LiveKitWebhookError):
+    """Unsupported event type."""
+
+    status_code = 422
+
+
 class ActionFailedError(LiveKitWebhookError):
    """Webhook action fails to process or complete."""

@@ -68,7 +74,6 @@ class LiveKitWebhookEventType(Enum):
    # Participant events
    PARTICIPANT_JOINED = "participant_joined"
    PARTICIPANT_LEFT = "participant_left"
-    PARTICIPANT_CONNECTION_ABORTED = "participant_connection_aborted"

    # Track events
    TRACK_PUBLISHED = "track_published"
@@ -148,13 +153,10 @@ class LiveKitEventsService:

        try:
            webhook_type = LiveKitWebhookEventType(data.event)
-        except ValueError:
-            logger.warning(
-                "Ignoring unknown LiveKit webhook event type '%s' for room '%s'",
-                data.event,
-                room_name,
-            )
-            return
+        except ValueError as e:
+            raise UnsupportedEventTypeError(
+                f"Unknown webhook type: {data.event}"
+            ) from e

        # Handle according to received webhook type
        handler = self._webhook_handlers.get(webhook_type.value)
@@ -94,7 +94,7 @@ def test_invalid_payload(client, auth_token, mock_livekit_config):


 def test_unknown_event_type(client, mock_livekit_config):
-    """Should acknowledge (200) an unknown event type rather than reject it."""
+    """Should return 422 for unknown event type."""
    event_data = json.dumps({"event": "unknown_event_type"})

    # Generate auth token for this specific payload
@@ -112,8 +112,10 @@ def test_unknown_event_type(client, mock_livekit_config):
        HTTP_AUTHORIZATION=auth_token,
    )

-    assert response.status_code == 200
-    assert response.json() == {"status": "success"}
+    assert response.status_code == 422
+    assert response.json() == {
+        "status": "error",
+    }


@mock.patch.object(LiveKitEventsService, "_handle_room_finished")
@@ -16,6 +16,7 @@ from core.services.livekit_events import (
    AuthenticationError,
    InvalidPayloadError,
    LiveKitEventsService,
+    UnsupportedEventTypeError,
    api,
 )
 from core.services.lobby import LobbyService
@@ -664,27 +665,22 @@ def test_receive_missing_auth(service):


@mock.patch.object(api.WebhookReceiver, "receive")
-def test_receive_unknown_event_is_acknowledged(mock_receive, service, caplog):
-    """Unknown event types are logged and ignored, not rejected.
-
-    LiveKit adds event types over time and does not retry 4xx responses, so
-    raising here would silently drop the event.
-    """
+def test_receive_unsupported_event(mock_receive, service):
+    """Should raise LiveKitWebhookError for unsupported events."""
    mock_request = mock.MagicMock()
    mock_request.headers = {"Authorization": "test_token"}
    mock_request.body = b"{}"

+    # Mock returned data with unsupported event type
    mock_data = mock.MagicMock()
    mock_data.room.name = str(uuid.uuid4())
-    mock_data.event = "some_future_event"
+    mock_data.event = "unsupported_event"
    mock_receive.return_value = mock_data

-    with caplog.at_level("WARNING", logger="core.services.livekit_events"):
-        service.receive(mock_request)  # must not raise
-
-    assert "Ignoring unknown LiveKit webhook event type 'some_future_event'" in (
-        caplog.text
-    )
+    with pytest.raises(
+        UnsupportedEventTypeError, match="Unknown webhook type: unsupported_event"
+    ):
+        service.receive(mock_request)


@mock.patch.object(api.WebhookReceiver, "receive")
@@ -1,96 +0,0 @@
-"""Tests for the external API ResourceServerBackend."""
-
-from django.core.exceptions import SuspiciousOperation
-
-import pytest
-import responses
-from rest_framework.test import APIClient
-
-from core.external_api.authentication import ResourceServerBackend
-from core.factories import UserFactory
-from core.models import User
-
-pytestmark = pytest.mark.django_db
-
-
-def _payload(sub):
-    return {"sub": sub, "active": True, "scope": "lasuite_meet", "client_id": "app"}
-
-
-def test_resource_server_backend_get_or_create_user_active():
-    """An existing active user matching the sub should be returned."""
-
-    user = UserFactory()
-
-    result = ResourceServerBackend().get_or_create_user(
-        access_token="token", id_token=None, payload=_payload(user.sub)
-    )
-
-    assert result == user
-
-
-def test_resource_server_backend_get_or_create_user_inactive():
-    """An inactive user should be rejected even with a valid token."""
-
-    user = UserFactory(is_active=False)
-
-    with pytest.raises(SuspiciousOperation, match="User account is disabled."):
-        ResourceServerBackend().get_or_create_user(
-            access_token="token", id_token=None, payload=_payload(user.sub)
-        )
-
-
-def test_resource_server_backend_get_or_create_user_creates(settings):
-    """An unknown sub should create an active user when OIDC_CREATE_USER is set."""
-
-    settings.OIDC_CREATE_USER = True
-
-    result = ResourceServerBackend().get_or_create_user(
-        access_token="token", id_token=None, payload=_payload("new-sub")
-    )
-
-    assert result.sub == "new-sub"
-    assert result.is_active is True
-    assert User.objects.filter(sub="new-sub").exists()
-
-
-def test_resource_server_backend_get_or_create_user_no_creation(settings):
-    """An unknown sub should return None when OIDC_CREATE_USER is unset."""
-
-    settings.OIDC_CREATE_USER = False
-
-    result = ResourceServerBackend().get_or_create_user(
-        access_token="token", id_token=None, payload=_payload("new-sub")
-    )
-
-    assert result is None
-    assert not User.objects.filter(sub="new-sub").exists()
-
-
-@responses.activate
-def test_api_rooms_list_resource_server_inactive_user(settings):
-    """End to end: a valid introspected token for an inactive user should get 401."""
-
-    settings.OIDC_OP_INTROSPECTION_ENDPOINT = "https://oidc.example.com/introspect"
-    settings.OIDC_OP_URL = "https://oidc.example.com"
-
-    user = UserFactory(is_active=False)
-
-    responses.add(
-        responses.POST,
-        "https://oidc.example.com/introspect",
-        json={
-            "iss": "https://oidc.example.com",
-            "active": True,
-            "sub": user.sub,
-            "scope": "openid lasuite_meet rooms:list",
-            "client_id": "app",
-        },
-    )
-
-    client = APIClient()
-    client.credentials(HTTP_AUTHORIZATION="Bearer rs-token")
-    response = client.get("/external-api/v1.0/rooms/")
-
-    assert response.status_code == 401
-    assert "login failed" in str(response.data).lower()
@@ -469,9 +469,6 @@ class Base(Configuration):

    # Sentry
    SENTRY_DSN = values.Value(None, environ_name="SENTRY_DSN")
-    SENTRY_TRACES_SAMPLE_RATE = values.FloatValue(
-        0.0, environ_name="SENTRY_TRACES_SAMPLE_RATE", environ_prefix=None
-    )

    # Easy thumbnails
    THUMBNAIL_EXTENSION = "webp"
@@ -1113,12 +1110,6 @@ class Base(Configuration):
        environ_prefix=None,
    )

-    LOGGING_SILENCED_401_PATHS = values.ListValue(
-        default=["/api/v1.0/users/me/"],
-        environ_name="LOGGING_SILENCED_401_PATHS",
-        environ_prefix=None,
-    )
-
    # Logging
    # We want to make it easy to log to console but by default we log production
    # to Sentry and don't want to log to console.
@@ -1131,16 +1122,10 @@ class Base(Configuration):
                "style": "{",
            },
        },
-        "filters": {
-            "silence_expected_401": {
-                "()": "core.logging_filters.SilenceExpected401",
-            },
-        },
        "handlers": {
            "console": {
                "class": "logging.StreamHandler",
                "formatter": "simple",
-                "filters": ["silence_expected_401"],
            },
        },
        # Override root logger to send it to console
@@ -1151,13 +1136,6 @@ class Base(Configuration):
            ),
        },
        "loggers": {
-            "request.summary": {
-                "level": values.Value(
-                    "WARNING",
-                    environ_name="LOGGING_LEVEL_REQUEST_SUMMARY",
-                    environ_prefix="",
-                )
-            },
            "core": {
                "handlers": ["console"],
                "level": values.Value(
@@ -1233,14 +1211,7 @@ class Base(Configuration):
                dsn=cls.SENTRY_DSN,
                environment=cls.__name__.lower(),  # build, test, development, production
                release=get_release(),
-                traces_sample_rate=cls.SENTRY_TRACES_SAMPLE_RATE,
-                integrations=[
-                    DjangoIntegration(
-                        transaction_style="url",
-                        middleware_spans=True,
-                        cache_spans=True,
-                    )
-                ],
+                integrations=[DjangoIntegration()],
            )
            sentry_sdk.set_tag("application", "backend")

@@ -20,7 +20,6 @@ import { Track } from 'livekit-client'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
 import { ParticipantTileFocus } from './participantTileFocus/ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
-import { ScreenShareZoomableVideo } from '@/features/rooms/livekit/components/ScreenShareZoomableVideo'
 import { useTranslation } from 'react-i18next'
 import { getShortcutDescriptorById } from '@/features/shortcuts/catalog'
 import { formatShortcutLabel } from '@/features/shortcuts/formatLabels'
@@ -49,8 +48,6 @@ interface ParticipantTileExtendedProps extends ParticipantTileProps {
  disableTileControls?: boolean
 }

-const MOUSE_IDLE_TIME = 3000
-
 export const ParticipantTile: (
  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
@@ -92,8 +89,6 @@ export const ParticipantTile: (
  )

  const isScreenShare = trackReference.source != Track.Source.Camera
-  const isRemoteScreenShare =
-    isScreenShare && !trackReference.participant.isLocal
  const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)

  const participantColor = getParticipantColor(trackReference.participant)
@@ -103,38 +98,11 @@ export const ParticipantTile: (
  })
  const participantName = name || identity || 'Unknown'

-  // Hover + idle tracking for the focus overlay (pin, effects, mute buttons).
-  const [isTileHovered, setIsTileHovered] = React.useState(false)
-  const [isIdle, setIsIdle] = React.useState(false)
-  const idleTimerRef = React.useRef<number | null>(null)
-
-  const handleTileMouseMove = React.useCallback(() => {
-    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
-    idleTimerRef.current = window.setTimeout(
-      () => setIsIdle(true),
-      MOUSE_IDLE_TIME
-    )
-    setIsIdle(false)
-  }, [])
-
-  const isOverlayVisible = hasKeyboardFocus || (isTileHovered && !isIdle)
-
-  // tileRef: fullscreen target. setRefs merges it with the forwarded ref on the same node.
-  const tileRef = React.useRef<HTMLDivElement>(null)
-  const setRefs = React.useCallback(
-    (node: HTMLDivElement | null) => {
-      ;(tileRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-      if (typeof ref === 'function') ref(node)
-      else if (ref)
-        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
-    },
-    [ref]
-  )
-
  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })

  const interactiveProps = {
    ...elementProps,
+    // Ensure the tile is focusable to expose contextual controls to keyboard users.
    tabIndex: 0,
    'aria-label': t('containerLabel', { name: participantName }),
    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
@@ -152,60 +120,8 @@ export const ParticipantTile: (
    },
  }

-  const isVideoTrack =
-    isTrackReference(trackReference) &&
-    (trackReference.publication?.kind === 'video' ||
-      trackReference.source === Track.Source.Camera ||
-      trackReference.source === Track.Source.ScreenShare)
-
-  let trackMedia: React.ReactNode = null
-  if (isVideoTrack) {
-    // Zoom toolbar stays out of picture-in-picture: that window has its own
-    // document and the fullscreen API is off. Follow-up PR can restore zoom
-    // there without the dead fullscreen button.
-    if (isRemoteScreenShare && !disableTileControls) {
-      trackMedia = (
-        <ScreenShareZoomableVideo
-          trackRef={trackReference}
-          tileRef={tileRef}
-          onSubscriptionStatusChanged={handleSubscribe}
-          manageSubscription={autoManageSubscription}
-        />
-      )
-    } else {
-      trackMedia = (
-        <VideoTrack
-          trackRef={trackReference}
-          onSubscriptionStatusChanged={handleSubscribe}
-          manageSubscription={autoManageSubscription}
-        />
-      )
-    }
-  } else if (isTrackReference(trackReference)) {
-    trackMedia = (
-      <AudioTrack
-        trackRef={trackReference}
-        onSubscriptionStatusChanged={handleSubscribe}
-      />
-    )
-  }
-
  return (
-    <div
-      ref={setRefs}
-      style={{ position: 'relative' }}
-      {...interactiveProps}
-      onMouseEnter={() => setIsTileHovered(true)}
-      onMouseLeave={() => {
-        setIsTileHovered(false)
-        setIsIdle(false)
-        if (idleTimerRef.current) {
-          window.clearTimeout(idleTimerRef.current)
-          idleTimerRef.current = null
-        }
-      }}
-      onMouseMove={handleTileMouseMove}
-    >
+    <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
      <TrackRefContextIfNeeded trackRef={trackReference}>
        <ParticipantContextIfNeeded participant={trackReference.participant}>
          {trackReference.participant.isLocal && (
@@ -213,7 +129,23 @@ export const ParticipantTile: (
          )}
          {children ?? (
            <>
-              {trackMedia}
+              {isTrackReference(trackReference) &&
+              (trackReference.publication?.kind === 'video' ||
+                trackReference.source === Track.Source.Camera ||
+                trackReference.source === Track.Source.ScreenShare) ? (
+                <VideoTrack
+                  trackRef={trackReference}
+                  onSubscriptionStatusChanged={handleSubscribe}
+                  manageSubscription={autoManageSubscription}
+                />
+              ) : (
+                isTrackReference(trackReference) && (
+                  <AudioTrack
+                    trackRef={trackReference}
+                    onSubscriptionStatusChanged={handleSubscribe}
+                  />
+                )
+              )}
              <div className="lk-participant-placeholder">
                <ParticipantPlaceholder
                  color={participantColor}
@@ -232,7 +164,7 @@ export const ParticipantTile: (
          {!disableMetadata && !disableTileControls && (
            <ParticipantTileFocus
              trackRef={trackReference}
-              isVisible={isOverlayVisible}
+              hasKeyboardFocus={hasKeyboardFocus}
            />
          )}
        </ParticipantContextIfNeeded>
@@ -1,22 +1,44 @@
 import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useRef, useState } from 'react'
 import { Track } from 'livekit-client'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 import { FocusButton } from './FocusButton'
 import { EffectsButton } from './EffectsButton'
 import { MuteButton } from './MuteButton'
+import { ZoomButton } from './ZoomButton'
+
+const MOUSE_IDLE_TIME = 3000

 type FadeOverlayProps = {
  children: ReactNode
-  isVisible: boolean
+  hasKeyboardFocus: boolean
 }

-// Pointer-events none so this overlay doesn't block the zoom surface below.
-// Hover and idle tracking therefore lives on the tile, which still receives
-// the pointer events, and comes back in as isVisible.
-const FadeOverlay = ({ children, isVisible }: FadeOverlayProps) => {
+const FadeOverlay = ({ children, hasKeyboardFocus }: FadeOverlayProps) => {
+  const [active, setActive] = useState(false)
+  const idleTimerRef = useRef<number | null>(null)
+
+  const clearIdleTimer = () => {
+    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
+  }
+
+  const armIdleTimer = () => {
+    clearIdleTimer()
+    idleTimerRef.current = window.setTimeout(() => {
+      setActive(false)
+    }, MOUSE_IDLE_TIME)
+  }
+
+  const handleActivity = () => {
+    setActive(true)
+    armIdleTimer()
+  }
+
+  useEffect(() => clearIdleTimer, [])
+
+  const isVisible = hasKeyboardFocus || active
  return (
    <div
      className={css({
@@ -28,10 +50,15 @@ const FadeOverlay = ({ children, isVisible }: FadeOverlayProps) => {
        alignItems: 'center',
        width: '100%',
        height: '100%',
-        pointerEvents: 'none',
      })}
      data-visible={isVisible || undefined}
      aria-hidden={!isVisible}
+      onMouseEnter={handleActivity}
+      onMouseMove={handleActivity}
+      onMouseLeave={() => {
+        clearIdleTimer()
+        setActive(false)
+      }}
    >
      {isVisible && children}
    </div>
@@ -40,10 +67,10 @@ const FadeOverlay = ({ children, isVisible }: FadeOverlayProps) => {

 export const ParticipantTileFocus = ({
  trackRef,
-  isVisible,
+  hasKeyboardFocus,
 }: {
  trackRef: TrackReferenceOrPlaceholder
-  isVisible: boolean
+  hasKeyboardFocus: boolean
 }) => {
  const participant = trackRef.participant
  const isScreenShare = trackRef.source == Track.Source.ScreenShare
@@ -51,7 +78,7 @@ export const ParticipantTileFocus = ({
  const canMute = useCanMute(participant)

  return (
-    <FadeOverlay isVisible={isVisible}>
+    <FadeOverlay hasKeyboardFocus={hasKeyboardFocus}>
      <div
        className={css({
          backgroundColor: 'primaryDark.50',
@@ -60,7 +87,6 @@ export const ParticipantTileFocus = ({
          display: 'flex',
          opacity: 0.6,
          animation: 'overlayIn 200ms linear 300ms backwards',
-          pointerEvents: 'auto',
          _hover: {
            opacity: 0.95,
          },
@@ -68,7 +94,7 @@ export const ParticipantTileFocus = ({
      >
        <HStack gap={0.5} padding={0.5}>
          <FocusButton trackRef={trackRef} />
-          {!isScreenShare && (
+          {!isScreenShare ? (
            <>
              {isLocal ? (
                <EffectsButton />
@@ -76,6 +102,8 @@ export const ParticipantTileFocus = ({
                canMute && <MuteButton participant={participant} />
              )}
            </>
+          ) : (
+            !isLocal && <ZoomButton trackRef={trackRef} />
          )}
        </HStack>
      </div>
@@ -0,0 +1,32 @@
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+import { useFullScreen } from '@/features/rooms/livekit/hooks/useFullScreen'
+import { Button } from '@/primitives'
+import { RiFullscreenLine } from '@remixicon/react'
+
+export const ZoomButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
+    trackRef,
+  })
+
+  if (!isFullscreenAvailable) {
+    return
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={t('fullScreen')}
+      onPress={() => toggleFullScreen()}
+    >
+      <RiFullscreenLine />
+    </Button>
+  )
+}
@@ -71,30 +71,20 @@ export const ConnectionObserver = () => {
  useEffect(() => {
    if (!isAnalyticsEnabled) return

-    const handleConnection = async () => {
+    const handleConnection = () => {
      // Preserve original connection timestamp across reconnections to measure
      // total session duration from first connect to final disconnect.
      if (connectionStartTimeRef.current != null) return
      connectionStartTimeRef.current = Date.now()
-      const participantSid = room.localParticipant.sid
-      const roomSid = await room.getSid().catch(() => undefined)
-      void captureMediaEvent('connection-event', {
-        livekit_room_sid: roomSid,
-        livekit_participant_sid: participantSid,
-      })
+      void captureMediaEvent('connection-event', {})
    }

    const handleReconnect = () => {
      captureEvent('reconnect-event')
    }

-    const handleReconnected = async () => {
-      const participantSid = room.localParticipant.sid
-      const roomSid = await room.getSid().catch(() => undefined)
-      captureEvent('reconnected-event', {
-        livekit_room_sid: roomSid,
-        livekit_participant_sid: participantSid,
-      })
+    const handleReconnected = () => {
+      captureEvent('reconnected-event')
    }

    const handleSignalingConnect = () => {
@@ -1,26 +0,0 @@
-import { VideoTrack } from '@livekit/components-react'
-import { type TrackReference } from '@livekit/components-core'
-import { memo } from 'react'
-
-interface ScreenShareVideoTrackProps {
-  trackRef: TrackReference
-  onSubscriptionStatusChanged: (subscribed: boolean) => void
-  manageSubscription?: boolean
-}
-
-// Zoom/pan updates the wrapper transform only; skip VideoTrack re-renders.
-export const ScreenShareVideoTrack = memo(
-  ({
-    trackRef,
-    onSubscriptionStatusChanged,
-    manageSubscription,
-  }: ScreenShareVideoTrackProps) => (
-    <VideoTrack
-      trackRef={trackRef}
-      onSubscriptionStatusChanged={onSubscriptionStatusChanged}
-      manageSubscription={manageSubscription}
-    />
-  )
-)
-
-ScreenShareVideoTrack.displayName = 'ScreenShareVideoTrack'
@@ -1,223 +0,0 @@
-import { css } from '@/styled-system/css'
-import { Button } from '@/primitives'
-import {
-  RiCollapseDiagonalLine,
-  RiExpandDiagonalLine,
-  RiFullscreenExitLine,
-  RiZoomInLine,
-  RiZoomOutLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { Toolbar } from 'react-aria-components'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { isMacintosh } from '@/utils/livekit'
-import { srOnly } from '@/styles/a11y'
-
-interface ScreenShareZoomControlsProps {
-  containerRef: React.RefObject<HTMLDivElement | null>
-  isZoomed: boolean
-  zoomPercentage: number
-  canZoomIn: boolean
-  canZoomOut: boolean
-  onZoomIn: () => void
-  onZoomOut: () => void
-  onResetZoom: () => void
-}
-
-export const ScreenShareZoomControls = ({
-  containerRef,
-  isZoomed,
-  zoomPercentage,
-  canZoomIn,
-  canZoomOut,
-  onZoomIn,
-  onZoomOut,
-  onResetZoom,
-}: ScreenShareZoomControlsProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
-  const announce = useScreenReaderAnnounce()
-
-  const zoomInButtonRef = useRef<HTMLButtonElement>(null)
-  const hadFocusInCollapsibleRef = useRef(false)
-
-  const [isFullscreen, setIsFullscreen] = useState(false)
-  // Tracks whether this tile's container triggered fullscreen (vs another share's).
-  const wasThisTileFullscreen = useRef(false)
-  const isFullscreenAvailable = document.fullscreenEnabled
-
-  // Covers Esc and browser UI exits, not just the toolbar button.
-  // Only this tile's instance announces to avoid duplicates with multiple shares.
-  useEffect(() => {
-    const onChange = () => {
-      const isThisTileFullscreen =
-        document.fullscreenElement === containerRef.current
-      setIsFullscreen(isThisTileFullscreen)
-
-      if (isThisTileFullscreen) {
-        wasThisTileFullscreen.current = true
-        announce(t('fullScreenEntered'), 'assertive')
-      } else if (wasThisTileFullscreen.current) {
-        wasThisTileFullscreen.current = false
-        announce(t('fullScreenExited'), 'assertive')
-      }
-    }
-    document.addEventListener('fullscreenchange', onChange)
-    return () => document.removeEventListener('fullscreenchange', onChange)
-  }, [announce, t, containerRef])
-
-  // Back at 100 % the collapsible controls are disabled and hidden, which drops
-  // keyboard focus on the body. Hand it to the zoom in button instead, the only
-  // control of that group still reachable.
-  useEffect(() => {
-    if (isZoomed || !hadFocusInCollapsibleRef.current) return
-    hadFocusInCollapsibleRef.current = false
-    zoomInButtonRef.current?.focus()
-  }, [isZoomed])
-
-  const toggleFullScreen = useCallback(async () => {
-    try {
-      if (document.fullscreenElement === containerRef.current) {
-        await document.exitFullscreen()
-      } else {
-        // Tile container so zoom controls stay visible in fullscreen.
-        await containerRef.current?.requestFullscreen()
-      }
-    } catch (error) {
-      console.error('Error toggling fullscreen:', error)
-    }
-  }, [containerRef])
-
-  const wheelShortcut = t(isMacintosh() ? 'wheelShortcutMac' : 'wheelShortcut')
-
-  return (
-    <div
-      className={css({
-        position: 'absolute',
-        bottom: '12px',
-        right: '12px',
-        zIndex: 2,
-        pointerEvents: 'auto',
-      })}
-    >
-      {/* react-aria Toolbar: left/right arrows move between the controls and
-          Tab leaves the group as a whole, as the toolbar role implies. */}
-      <Toolbar
-        aria-label={t('toolbarLabel')}
-        className={css({
-          display: 'flex',
-          alignItems: 'center',
-          backgroundColor: 'primaryDark.50',
-          borderRadius: '2rem',
-          padding: '0.5rem',
-          opacity: 0.7,
-          transition: 'opacity 200ms linear',
-          _hover: {
-            opacity: 0.95,
-          },
-        })}
-      >
-        <span className={srOnly}>
-          {t(isMacintosh() ? 'wheelShortcutHintMac' : 'wheelShortcutHint')}
-        </span>
-        {/* Animated wrapper: collapses to 0 when not zoomed. padding/margin
-            trick keeps overflow:hidden from clipping focus rings. */}
-        <div
-          className={css({
-            display: 'flex',
-            alignItems: 'center',
-            overflow: 'hidden',
-            transition: 'max-width 200ms ease-out, opacity 200ms ease-out',
-            padding: '3px',
-            margin: '-3px',
-          })}
-          style={{
-            maxWidth: isZoomed ? '12rem' : '0',
-            opacity: isZoomed ? 1 : 0,
-          }}
-          aria-hidden={!isZoomed}
-          onFocus={() => {
-            hadFocusInCollapsibleRef.current = true
-          }}
-          onBlur={(e) => {
-            // Disabling a focused button blurs it with no relatedTarget, so the
-            // flag must survive that case for the effect above to rescue focus.
-            if (e.relatedTarget) hadFocusInCollapsibleRef.current = false
-          }}
-        >
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={t('fitToWindow')}
-            aria-label={t('fitToWindow')}
-            isDisabled={!isZoomed}
-            onPress={onResetZoom}
-          >
-            <RiFullscreenExitLine size={20} />
-          </Button>
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={t('zoomOutWithShortcut', {
-              shortcut: wheelShortcut,
-            })}
-            aria-label={t('zoomOut')}
-            isDisabled={!isZoomed || !canZoomOut}
-            onPress={onZoomOut}
-          >
-            <RiZoomOutLine size={20} />
-          </Button>
-          {/* Visual only - zoom level is announced via useScreenReaderAnnounce. */}
-          <span
-            aria-hidden="true"
-            className={css({
-              color: 'white',
-              fontSize: '0.8125rem',
-              fontWeight: 500,
-              minWidth: '3.25rem',
-              textAlign: 'center',
-              userSelect: 'none',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '0 0.25rem',
-              whiteSpace: 'nowrap',
-            })}
-          >
-            {zoomPercentage} %
-          </span>
-        </div>
-        <Button
-          ref={zoomInButtonRef}
-          size="sm"
-          variant="primaryTextDark"
-          square
-          tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcut })}
-          aria-label={t('zoomIn')}
-          isDisabled={!canZoomIn}
-          onPress={onZoomIn}
-        >
-          <RiZoomInLine size={20} />
-        </Button>
-        {isFullscreenAvailable && (
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
-            aria-label={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
-            onPress={toggleFullScreen}
-          >
-            {isFullscreen ? (
-              <RiCollapseDiagonalLine size={20} />
-            ) : (
-              <RiExpandDiagonalLine size={20} />
-            )}
-          </Button>
-        )}
-      </Toolbar>
-    </div>
-  )
-}
@@ -1,106 +0,0 @@
-import { css } from '@/styled-system/css'
-import { type TrackReference } from '@livekit/components-core'
-import { useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useScreenShareZoom } from '../hooks/useScreenShareZoom'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { ScreenShareZoomControls } from './ScreenShareZoomControls'
-import { ScreenShareVideoTrack } from './ScreenShareVideoTrack'
-
-interface ScreenShareZoomableVideoProps {
-  trackRef: TrackReference
-  tileRef: React.RefObject<HTMLDivElement | null>
-  onSubscriptionStatusChanged: (subscribed: boolean) => void
-  manageSubscription?: boolean
-}
-
-export const ScreenShareZoomableVideo = ({
-  trackRef,
-  tileRef,
-  onSubscriptionStatusChanged,
-  manageSubscription,
-}: ScreenShareZoomableVideoProps) => {
-  const zoom = useScreenShareZoom()
-  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
-  const announce = useScreenReaderAnnounce()
-
-  // SR announcement: announce zoom level on change, with a one-time pan hint
-  // on the first zoom above 100 % per session.
-  const prevZoomRef = useRef(zoom.zoomPercentage)
-  const hasAnnouncedPanHint = useRef(false)
-  useEffect(() => {
-    if (prevZoomRef.current === zoom.zoomPercentage) return
-    const wasAtDefault = prevZoomRef.current <= 100
-    prevZoomRef.current = zoom.zoomPercentage
-
-    if (wasAtDefault && zoom.isZoomed && !hasAnnouncedPanHint.current) {
-      hasAnnouncedPanHint.current = true
-      announce(t('panHint', { level: zoom.zoomPercentage }), 'polite')
-    } else {
-      announce(t('currentZoomLevel', { level: zoom.zoomPercentage }), 'polite')
-    }
-
-    if (!zoom.isZoomed) hasAnnouncedPanHint.current = false
-  }, [zoom.zoomPercentage, zoom.isZoomed, announce, t])
-
-  // Attach keyboard listener on the tile container (has tabIndex=0).
-  useEffect(() => {
-    const el = tileRef.current
-    if (!el) return
-    el.addEventListener('keydown', zoom.handleKeyDown)
-    return () => el.removeEventListener('keydown', zoom.handleKeyDown)
-  }, [tileRef, zoom.handleKeyDown])
-
-  // Native wheel listener with { passive: false } so preventDefault works.
-  useEffect(() => {
-    const el = zoom.surfaceElRef.current
-    if (!el) return
-    el.addEventListener('wheel', zoom.handleWheel, { passive: false })
-    return () => el.removeEventListener('wheel', zoom.handleWheel)
-  }, [zoom.handleWheel, zoom.surfaceElRef])
-
-  return (
-    <>
-      <div
-        ref={zoom.surfaceElRef}
-        className={css({
-          width: '100%',
-          height: '100%',
-          overflow: 'hidden',
-          position: 'relative',
-          userSelect: 'none',
-          // Leaves the browser's native pinch-zoom available on touch devices
-          // while still routing single-pointer drags to useMove for panning.
-          touchAction: 'pinch-zoom',
-        })}
-        {...zoom.moveProps}
-      >
-        <div
-          ref={zoom.transformElRef}
-          style={{
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'none',
-            transformOrigin: 'center center',
-          }}
-        >
-          <ScreenShareVideoTrack
-            trackRef={trackRef}
-            onSubscriptionStatusChanged={onSubscriptionStatusChanged}
-            manageSubscription={manageSubscription}
-          />
-        </div>
-      </div>
-      <ScreenShareZoomControls
-        containerRef={tileRef}
-        isZoomed={zoom.isZoomed}
-        zoomPercentage={zoom.zoomPercentage}
-        canZoomIn={zoom.canZoomIn}
-        canZoomOut={zoom.canZoomOut}
-        onZoomIn={zoom.zoomIn}
-        onZoomOut={zoom.zoomOut}
-        onResetZoom={zoom.resetZoom}
-      />
-    </>
-  )
-}
@@ -1,322 +0,0 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react'
-import { useMove } from 'react-aria'
-import type { MoveMoveEvent } from '@react-types/shared'
-import {
-  FULL_PICTURE_RATIO,
-  MIN_ZOOM,
-  PAN_STEP,
-  WHEEL_ZOOM_SPEED,
-  ZOOM_STEP,
-  type PanOffset,
-  type ZoomSnapshot,
-  buildZoomSnapshot,
-  clampPan,
-  clampZoom,
-  getCursorFromZoomState,
-  getCursorPercentsFromWheelEvent,
-  getPanDeltaPercentsFromMove,
-  getPictureRatio,
-  getWheelPanOffset,
-  getZoomTransform,
-} from '../utils/screenShareZoom'
-
-/**
- * Manages zoom and pan state for a remote screen share.
- *
- * Performance: zoom/pan live in refs and are applied imperatively to the DOM
- * (via transformElRef / surfaceElRef) so the hot path (drag, wheel) never
- * triggers a React re-render. A useSyncExternalStore snapshot is flushed only
- * when the toolbar UI needs to update (zoom level change, drag end).
- *
- * Drag/touch panning is handled by react-aria's useMove (moveProps).
- * The wheel listener (non-passive) zooms on Ctrl/Cmd+scroll and pans on a
- * two-finger trackpad scroll once zoomed.
- * Arrow key panning and +/-/0 zoom are on a keydown listener attached to the
- * tile container (which has tabIndex=0 and focus).
- */
-export const useScreenShareZoom = () => {
-  const zoomRef = useRef(MIN_ZOOM)
-  const panRef = useRef<PanOffset>({ x: 0, y: 0 })
-  const draggingRef = useRef(false)
-
-  // The consumer binds these to the inner transform div and the outer drag surface.
-  const transformElRef = useRef<HTMLDivElement | null>(null)
-  const surfaceElRef = useRef<HTMLDivElement | null>(null)
-
-  // Snapshot store: subscribers are notified only on explicit flush() calls.
-  const snapshotRef = useRef<ZoomSnapshot>(
-    buildZoomSnapshot(MIN_ZOOM, { x: 0, y: 0 }, false)
-  )
-  const listenersRef = useRef(new Set<() => void>())
-
-  const subscribe = useCallback((cb: () => void) => {
-    listenersRef.current.add(cb)
-    return () => {
-      listenersRef.current.delete(cb)
-    }
-  }, [])
-
-  const getSnapshot = useCallback(() => snapshotRef.current, [])
-
-  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-
-  const flush = useCallback(() => {
-    snapshotRef.current = buildZoomSnapshot(
-      zoomRef.current,
-      panRef.current,
-      draggingRef.current
-    )
-    listenersRef.current.forEach((cb) => cb())
-  }, [])
-
-  const applyTransform = useCallback(() => {
-    const el = transformElRef.current
-    if (!el) return
-    el.style.transform = getZoomTransform(zoomRef.current, panRef.current)
-  }, [])
-
-  // The video is letterboxed inside the surface by object-fit: contain, so the
-  // pan bounds depend on how much of the surface the picture actually covers.
-  // Read live rather than cached: both the tile and the shared resolution can
-  // change at any time.
-  const readPictureRatio = useCallback(() => {
-    const surface = surfaceElRef.current
-    const video = transformElRef.current?.querySelector('video')
-    if (!surface || !video) return FULL_PICTURE_RATIO
-    return getPictureRatio(
-      surface.clientWidth,
-      surface.clientHeight,
-      video.videoWidth,
-      video.videoHeight
-    )
-  }, [])
-
-  const applyCursor = useCallback(() => {
-    const el = surfaceElRef.current
-    if (!el) return
-    el.style.cursor = getCursorFromZoomState(
-      zoomRef.current,
-      draggingRef.current
-    )
-  }, [])
-
-  // After the video moves to the other window, write the current zoom back
-  // on the new nodes (otherwise it looks like 100 % until the next scroll).
-  const resync = useCallback(() => {
-    panRef.current = clampPan(
-      panRef.current,
-      zoomRef.current,
-      readPictureRatio()
-    )
-    applyTransform()
-    applyCursor()
-    flush()
-  }, [applyCursor, applyTransform, flush, readPictureRatio])
-
-  const setZoom = useCallback(
-    (next: number) => {
-      zoomRef.current = next
-      panRef.current =
-        next <= MIN_ZOOM
-          ? { x: 0, y: 0 }
-          : clampPan(panRef.current, next, readPictureRatio())
-      applyTransform()
-      applyCursor()
-      flush()
-    },
-    [applyTransform, applyCursor, flush, readPictureRatio]
-  )
-
-  const zoomIn = useCallback(
-    () => setZoom(clampZoom(zoomRef.current + ZOOM_STEP)),
-    [setZoom]
-  )
-
-  const zoomOut = useCallback(
-    () => setZoom(clampZoom(zoomRef.current - ZOOM_STEP)),
-    [setZoom]
-  )
-
-  const resetZoom = useCallback(() => setZoom(MIN_ZOOM), [setZoom])
-
-  // Must be attached with { passive: false } so preventDefault() blocks
-  // the browser's native Ctrl+scroll page zoom. Trackpad pinch arrives
-  // here as a wheel event with ctrl/cmd already set.
-  const handleWheel = useCallback(
-    (e: WheelEvent) => {
-      if (e.ctrlKey || e.metaKey) {
-        e.preventDefault()
-        e.stopPropagation()
-
-        const target = e.currentTarget as HTMLElement
-        const prev = zoomRef.current
-        const delta = -e.deltaY * WHEEL_ZOOM_SPEED
-        const next = clampZoom(prev + delta)
-
-        if (next <= MIN_ZOOM) {
-          zoomRef.current = MIN_ZOOM
-          panRef.current = { x: 0, y: 0 }
-        } else {
-          const { cursorXPercent, cursorYPercent } =
-            getCursorPercentsFromWheelEvent(e, target)
-          zoomRef.current = next
-          panRef.current = getWheelPanOffset({
-            pan: panRef.current,
-            prevZoom: prev,
-            nextZoom: next,
-            cursorXPercent,
-            cursorYPercent,
-            ratio: readPictureRatio(),
-          })
-        }
-
-        applyTransform()
-        applyCursor()
-        flush()
-        return
-      }
-
-      // Two-finger trackpad scroll: pan only once zoomed, otherwise leave
-      // the event alone so the page can still scroll.
-      if (zoomRef.current <= MIN_ZOOM) return
-
-      const el = surfaceElRef.current
-      if (!el) return
-
-      e.preventDefault()
-      e.stopPropagation()
-
-      const { deltaXPercent, deltaYPercent } = getPanDeltaPercentsFromMove(
-        -e.deltaX,
-        -e.deltaY,
-        el
-      )
-      panRef.current = clampPan(
-        {
-          x: panRef.current.x + deltaXPercent,
-          y: panRef.current.y + deltaYPercent,
-        },
-        zoomRef.current,
-        readPictureRatio()
-      )
-      applyTransform()
-    },
-    [applyTransform, applyCursor, flush, readPictureRatio]
-  )
-
-  // useMove handles mouse drag + touch pan. Keyboard arrows are not handled
-  // here because moveProps is on the zoom surface, while focus is on the tile
-  // container, see handleKeyDown below.
-  const { moveProps } = useMove({
-    onMoveStart() {
-      if (zoomRef.current <= MIN_ZOOM) return
-      draggingRef.current = true
-      applyCursor()
-      flush()
-    },
-    onMove(e: MoveMoveEvent) {
-      if (zoomRef.current <= MIN_ZOOM) return
-
-      const el = surfaceElRef.current
-      if (!el) return
-
-      const { deltaXPercent, deltaYPercent } = getPanDeltaPercentsFromMove(
-        e.deltaX,
-        e.deltaY,
-        el
-      )
-
-      panRef.current = clampPan(
-        {
-          x: panRef.current.x + deltaXPercent,
-          y: panRef.current.y + deltaYPercent,
-        },
-        zoomRef.current,
-        readPictureRatio()
-      )
-
-      applyTransform()
-      // Mouse drag: skip flush (imperative-only) to avoid re-renders per frame.
-      // Keyboard: flush so the toolbar reflects the updated position.
-      if (e.pointerType === 'keyboard') {
-        flush()
-      }
-    },
-    onMoveEnd() {
-      draggingRef.current = false
-      applyTransform()
-      applyCursor()
-      flush()
-    },
-  })
-
-  const panBy = useCallback(
-    (dx: number, dy: number) => {
-      panRef.current = clampPan(
-        { x: panRef.current.x + dx, y: panRef.current.y + dy },
-        zoomRef.current,
-        readPictureRatio()
-      )
-      applyTransform()
-      flush()
-    },
-    [applyTransform, flush, readPictureRatio]
-  )
-
-  // Attached to the tile container (not the zoom surface) where keyboard
-  // focus lives. Arrows pan, +/-/0 zoom.
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      const isZoomed = zoomRef.current > MIN_ZOOM
-      if (!isZoomed && e.key !== '+' && e.key !== '=') return
-
-      if (e.key.startsWith('Arrow') && e.target !== e.currentTarget) return
-
-      switch (e.key) {
-        case 'ArrowLeft':
-          e.preventDefault()
-          panBy(PAN_STEP, 0)
-          break
-        case 'ArrowRight':
-          e.preventDefault()
-          panBy(-PAN_STEP, 0)
-          break
-        case 'ArrowUp':
-          e.preventDefault()
-          panBy(0, PAN_STEP)
-          break
-        case 'ArrowDown':
-          e.preventDefault()
-          panBy(0, -PAN_STEP)
-          break
-        case '+':
-        case '=':
-          e.preventDefault()
-          zoomIn()
-          break
-        case '-':
-          e.preventDefault()
-          zoomOut()
-          break
-        case '0':
-          e.preventDefault()
-          resetZoom()
-          break
-      }
-    },
-    [panBy, zoomIn, zoomOut, resetZoom]
-  )
-
-  return {
-    ...snapshot,
-    transformElRef,
-    surfaceElRef,
-    moveProps,
-    zoomIn,
-    zoomOut,
-    resetZoom,
-    resync,
-    handleWheel,
-    handleKeyDown,
-  }
-}
@@ -1,154 +0,0 @@
-export const MIN_ZOOM = 1
-export const MAX_ZOOM = 4
-export const ZOOM_STEP = 0.1
-export const WHEEL_ZOOM_SPEED = 0.002
-export const PAN_STEP = 5
-
-// Half of a 100 % axis. Geometry, not a tunable: it is both the centre the
-// cursor offset is measured from and the half extent the pan is clamped
-// against, so the two stay consistent by construction.
-export const HALF_EXTENT_PERCENT = 50
-
-export interface PanOffset {
-  x: number
-  y: number
-}
-
-// Fraction of the surface each axis of the picture covers, in [0, 1].
-export interface PictureRatio {
-  x: number
-  y: number
-}
-
-export const FULL_PICTURE_RATIO: PictureRatio = { x: 1, y: 1 }
-
-export interface ZoomSnapshot {
-  zoomLevel: number
-  zoomPercentage: number
-  panOffset: PanOffset
-  isZoomed: boolean
-  isDragging: boolean
-  canZoomIn: boolean
-  canZoomOut: boolean
-}
-
-export const clampZoom = (value: number) => {
-  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value))
-}
-
-// Restrict pan so the picture always covers the view. Pan is a % of the
-// surface, in which object-fit: contain letterboxes the picture: its half
-// extent is `ratio * 50` against a view half extent of 50, and scaling by
-// `zoom` must keep `zoom * (ratio * 50 - |pan|) >= 50`. An axis whose picture
-// is still smaller than the view is pinned to 0, keeping the bars symmetric.
-export const clampPan = (
-  pan: PanOffset,
-  zoom: number,
-  ratio: PictureRatio
-): PanOffset => {
-  const maxPanX = Math.max(0, (ratio.x - 1 / zoom) * HALF_EXTENT_PERCENT)
-  const maxPanY = Math.max(0, (ratio.y - 1 / zoom) * HALF_EXTENT_PERCENT)
-  return {
-    x: Math.max(-maxPanX, Math.min(maxPanX, pan.x)),
-    y: Math.max(-maxPanY, Math.min(maxPanY, pan.y)),
-  }
-}
-
-// Per-axis fraction of the surface covered by an object-fit: contain picture.
-export const getPictureRatio = (
-  surfaceWidth: number,
-  surfaceHeight: number,
-  videoWidth: number,
-  videoHeight: number
-): PictureRatio => {
-  if (!surfaceWidth || !surfaceHeight || !videoWidth || !videoHeight) {
-    return FULL_PICTURE_RATIO
-  }
-  const surfaceRatio = surfaceWidth / surfaceHeight
-  const videoRatio = videoWidth / videoHeight
-  return surfaceRatio > videoRatio
-    ? { x: videoRatio / surfaceRatio, y: 1 }
-    : { x: 1, y: surfaceRatio / videoRatio }
-}
-
-export const buildZoomSnapshot = (
-  zoom: number,
-  pan: PanOffset,
-  dragging: boolean
-): ZoomSnapshot => {
-  return {
-    zoomLevel: zoom,
-    zoomPercentage: Math.round(zoom * 100),
-    panOffset: pan,
-    isZoomed: zoom > MIN_ZOOM,
-    isDragging: dragging,
-    canZoomIn: zoom < MAX_ZOOM,
-    canZoomOut: zoom > MIN_ZOOM,
-  }
-}
-
-export const getZoomTransform = (zoom: number, pan: PanOffset) => {
-  return `scale(${zoom}) translate(${pan.x}%, ${pan.y}%)`
-}
-
-export const getCursorFromZoomState = (zoom: number, dragging: boolean) => {
-  if (zoom <= MIN_ZOOM) return 'default'
-  return dragging ? 'grabbing' : 'grab'
-}
-
-// Keep the content point under the cursor anchored while zooming. With
-// `scale(z) translate(pan%)`, a point at `offset` from the center renders at
-// `z * (offset + pan)`, so holding it still gives:
-// pan' = pan + cursor * (1 / zoom' - 1 / zoom).
-export const getWheelPanOffset = ({
-  pan,
-  prevZoom,
-  nextZoom,
-  cursorXPercent,
-  cursorYPercent,
-  ratio,
-}: {
-  pan: PanOffset
-  prevZoom: number
-  nextZoom: number
-  cursorXPercent: number
-  cursorYPercent: number
-  ratio: PictureRatio
-}): PanOffset => {
-  const panShift = 1 / nextZoom - 1 / prevZoom
-  return clampPan(
-    {
-      x: pan.x + cursorXPercent * panShift,
-      y: pan.y + cursorYPercent * panShift,
-    },
-    nextZoom,
-    ratio
-  )
-}
-
-// Convert cursor pixel position to a % offset from the surface center.
-export const getCursorPercentsFromWheelEvent = (
-  e: WheelEvent,
-  target: HTMLElement
-) => {
-  const rect = target.getBoundingClientRect()
-  return {
-    cursorXPercent:
-      ((e.clientX - rect.left) / rect.width) * 100 - HALF_EXTENT_PERCENT,
-    cursorYPercent:
-      ((e.clientY - rect.top) / rect.height) * 100 - HALF_EXTENT_PERCENT,
-  }
-}
-
-// Convert useMove pixel deltas to % of the surface dimensions.
-export const getPanDeltaPercentsFromMove = (
-  deltaX: number,
-  deltaY: number,
-  surface: HTMLElement
-) => {
-  const rect = surface.getBoundingClientRect()
-  return {
-    deltaXPercent: (deltaX / rect.width) * 100,
-    deltaYPercent: (deltaY / rect.height) * 100,
-  }
-}
@@ -16,10 +16,6 @@ export type ShortcutId =
  | 'recording'
  | 'reaction'
  | 'fullscreen'
-  | 'zoom-in'
-  | 'zoom-out'
-  | 'zoom-reset'
-  | 'zoom-pan'

 export const getShortcutDescriptorById = (id: ShortcutId) =>
  shortcutCatalog.find((item) => item.id === id)
@@ -28,7 +24,7 @@ export type ShortcutDescriptor = {
  id: ShortcutId
  category: ShortcutCategory
  shortcut?: Shortcut
-  kind?: 'press' | 'longPress' | 'arrows'
+  kind?: 'press' | 'longPress'
  code?: string // used when kind === 'longPress' (KeyboardEvent.code)
  description?: string
 }
@@ -90,27 +86,4 @@ export const shortcutCatalog: ShortcutDescriptor[] = [
    category: 'interaction',
    shortcut: { key: 'P', ctrlKey: true, shiftKey: true },
  },
-  // Screen share zoom keys are unmodified, so they are bound on the focused
-  // tile instead of being registered globally. They are listed here so the
-  // shortcuts panel stays exhaustive.
-  {
-    id: 'zoom-in',
-    category: 'interaction',
-    shortcut: { key: '+' },
-  },
-  {
-    id: 'zoom-out',
-    category: 'interaction',
-    shortcut: { key: '-' },
-  },
-  {
-    id: 'zoom-reset',
-    category: 'interaction',
-    shortcut: { key: '0' },
-  },
-  {
-    id: 'zoom-pan',
-    category: 'interaction',
-    kind: 'arrows',
-  },
 ]
@@ -25,7 +25,6 @@ export const formatShortcutLabelForSR = (
    shiftLabel,
    plusLabel,
    noShortcutLabel,
-    keyLabels,
  }: {
    controlLabel: string
    commandLabel: string
@@ -34,12 +33,10 @@ export const formatShortcutLabelForSR = (
    shiftLabel: string
    plusLabel: string
    noShortcutLabel: string
-    // Spelled-out names for keys screen readers may skip or mispronounce.
-    keyLabels?: Record<string, string>
  }
 ) => {
  if (!shortcut) return noShortcutLabel
-  const key = keyLabels?.[shortcut.key] ?? shortcut.key?.toUpperCase()
+  const key = shortcut.key?.toUpperCase()
  if (!key) return noShortcutLabel
  const ctrlWord = isMacintosh() ? commandLabel : controlLabel
  const altWord = isMacintosh() ? optionLabel : altLabel
@@ -12,9 +12,6 @@ export const useShortcutFormatting = () => {

  const formatVisual = useCallback(
    (shortcut?: Shortcut, code?: string, kind?: string) => {
-      if (kind === 'arrows') {
-        return t('shortcutsPanel.visual.arrows')
-      }
      if (code && kind === 'longPress') {
        const label = getKeyLabelFromCode(code)
        return t('shortcutsPanel.visual.hold', { key: label || '?' })
@@ -26,9 +23,6 @@ export const useShortcutFormatting = () => {

  const formatForSR = useCallback(
    (shortcut?: Shortcut, code?: string, kind?: string) => {
-      if (kind === 'arrows') {
-        return t('shortcutsPanel.sr.arrows')
-      }
      if (code && kind === 'longPress') {
        const label = getKeyLabelFromCode(code)
        return t('shortcutsPanel.sr.hold', { key: label || '?' })
@@ -41,10 +35,6 @@ export const useShortcutFormatting = () => {
        shiftLabel: t('shortcutsPanel.sr.shift'),
        plusLabel: t('shortcutsPanel.sr.plus'),
        noShortcutLabel: t('shortcutsPanel.sr.noShortcut'),
-        keyLabels: {
-          '+': t('shortcutsPanel.sr.plusKey'),
-          '-': t('shortcutsPanel.sr.minusKey'),
-        },
      })
    },
    [t]
@@ -480,7 +480,7 @@
      "destination": "Ein neues Dokument wird erstellt auf",
      "destinationUnknown": "Ein neues Dokument wird erstellt",
      "language": "Meeting-Sprache:",
-      "recording": "Auch eine Videoaufzeichnung starten"
+      "recording": "Auch eine Aufzeichnung starten"
    },
    "button": {
      "start": "Meeting-Transkription starten",
@@ -756,24 +756,6 @@
    "muteParticipant": "{{name}} stummschalten",
    "fullScreen": "Vollbild"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Zoom-Steuerung für Bildschirmfreigabe",
-    "zoomIn": "Vergrößern",
-    "zoomInWithShortcut": "Vergrößern ({{shortcut}})",
-    "zoomOut": "Verkleinern",
-    "zoomOutWithShortcut": "Verkleinern ({{shortcut}})",
-    "wheelShortcut": "Steuerung plus Mausrad",
-    "wheelShortcutMac": "Befehl plus Mausrad",
-    "wheelShortcutHint": "Tastenkürzel: Steuerung plus Mausrad zum Vergrößern oder Verkleinern.",
-    "wheelShortcutHintMac": "Tastenkürzel: Befehl plus Mausrad zum Vergrößern oder Verkleinern.",
-    "fitToWindow": "An Fenster anpassen",
-    "fullScreen": "Vollbild",
-    "exitFullScreen": "Vollbild beenden",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Mit der Maus ziehen oder den Fokus zurück auf die Bildschirmfreigabe setzen und mit den Pfeiltasten im Bild navigieren.",
-    "fullScreenEntered": "Vollbild aktiviert",
-    "fullScreenExited": "Vollbild deaktiviert"
-  },
  "shortcutsPanel": {
    "title": "Tastenkürzel",
    "categories": {
@@ -793,11 +775,7 @@
      "raise-hand": "Hand heben oder senken",
      "toggle-chat": "Chat anzeigen/ausblenden",
      "toggle-participants": "Teilnehmende anzeigen/ausblenden",
-      "open-shortcuts-settings": "Tastenkürzel-Einstellungen öffnen",
-      "zoom-in": "In einen geteilten Bildschirm hineinzoomen",
-      "zoom-out": "Aus einem geteilten Bildschirm herauszoomen",
-      "zoom-reset": "Zoom des geteilten Bildschirms zurücksetzen",
-      "zoom-pan": "Im gezoomten geteilten Bildschirm navigieren"
+      "open-shortcuts-settings": "Tastenkürzel-Einstellungen öffnen"
    },
    "sr": {
      "control": "Steuerung",
@@ -807,14 +785,10 @@
      "shift": "Umschalt",
      "plus": "plus",
      "hold": "Halte {{key}} gedrückt",
-      "arrows": "Pfeiltasten",
-      "plusKey": "Plus-Taste",
-      "minusKey": "Minus-Taste",
      "noShortcut": "Kein Tastenkürzel"
    },
    "visual": {
-      "hold": "Halte {{key}} gedrückt",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Halte {{key}} gedrückt"
    }
  },
  "fullScreenWarning": {
@@ -480,7 +480,7 @@
      "destination": "A new document will be created on",
      "destinationUnknown": "A new document will be created",
      "language": "Meeting language:",
-      "recording": "Also start a video recording"
+      "recording": "Also start a recording"
    },
    "button": {
      "start": "Start transcribing the meeting",
@@ -756,24 +756,6 @@
    "muteParticipant": "Mute {{name}}",
    "fullScreen": "Full screen"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Screen share zoom controls",
-    "zoomIn": "Zoom in",
-    "zoomInWithShortcut": "Zoom in ({{shortcut}})",
-    "zoomOut": "Zoom out",
-    "zoomOutWithShortcut": "Zoom out ({{shortcut}})",
-    "wheelShortcut": "Control plus scroll wheel",
-    "wheelShortcutMac": "Command plus scroll wheel",
-    "wheelShortcutHint": "Shortcut: Control plus scroll wheel to zoom in or out.",
-    "wheelShortcutHintMac": "Shortcut: Command plus scroll wheel to zoom in or out.",
-    "fitToWindow": "Fit to window",
-    "fullScreen": "Full screen",
-    "exitFullScreen": "Exit full screen",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Drag with mouse, or move focus back to the screen share and use arrow keys to navigate the picture.",
-    "fullScreenEntered": "Full screen enabled",
-    "fullScreenExited": "Full screen disabled"
-  },
  "shortcutsPanel": {
    "title": "Keyboard shortcuts",
    "categories": {
@@ -793,11 +775,7 @@
      "raise-hand": "Raise or lower hand",
      "toggle-chat": "Toggle chat",
      "toggle-participants": "Toggle participants",
-      "open-shortcuts-settings": "Open shortcuts settings",
-      "zoom-in": "Zoom in on a shared screen",
-      "zoom-out": "Zoom out on a shared screen",
-      "zoom-reset": "Reset the shared screen zoom",
-      "zoom-pan": "Move around a zoomed shared screen"
+      "open-shortcuts-settings": "Open shortcuts settings"
    },
    "sr": {
      "control": "Control",
@@ -807,14 +785,10 @@
      "shift": "Shift",
      "plus": "plus",
      "hold": "Hold {{key}}",
-      "arrows": "Arrow keys",
-      "plusKey": "Plus key",
-      "minusKey": "Minus key",
      "noShortcut": "No shortcut"
    },
    "visual": {
-      "hold": "Hold {{key}}",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Hold {{key}}"
    }
  },
  "fullScreenWarning": {
@@ -479,7 +479,7 @@
      "destination": "Se creará un nuevo documento en",
      "destinationUnknown": "Se creará un nuevo documento",
      "language": "Idioma de la reunión:",
-      "recording": "Iniciar también una grabación de vídeo"
+      "recording": "Iniciar también una grabación"
    },
    "button": {
      "start": "Empezar a transcribir la reunión",
@@ -480,7 +480,7 @@
      "destination": "Un nouveau document sera créé sur",
      "destinationUnknown": "Un nouveau document sera créé",
      "language": "Langue de la réunion :",
-      "recording": "Démarrer aussi un enregistrement vidéo"
+      "recording": "Démarrer aussi un enregistrement"
    },
    "button": {
      "start": "Commencer à transcrire la réunion",
@@ -756,24 +756,6 @@
    "muteParticipant": "Couper le micro de {{name}}",
    "fullScreen": "Plein écran"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Contrôles de zoom du partage d'écran",
-    "zoomIn": "Zoomer",
-    "zoomInWithShortcut": "Zoomer ({{shortcut}})",
-    "zoomOut": "Dézoomer",
-    "zoomOutWithShortcut": "Dézoomer ({{shortcut}})",
-    "wheelShortcut": "Contrôle plus molette",
-    "wheelShortcutMac": "Commande plus molette",
-    "wheelShortcutHint": "Raccourci : Contrôle plus molette pour zoomer ou dézoomer.",
-    "wheelShortcutHintMac": "Raccourci : Commande plus molette pour zoomer ou dézoomer.",
-    "fitToWindow": "Ajuster à la fenêtre",
-    "fullScreen": "Plein écran",
-    "exitFullScreen": "Quitter le plein écran",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Glissez avec la souris, ou revenez sur le partage d'écran et utilisez les touches fléchées pour naviguer dans l'image.",
-    "fullScreenEntered": "Plein écran activé",
-    "fullScreenExited": "Plein écran désactivé"
-  },
  "shortcutsPanel": {
    "title": "Raccourcis clavier",
    "categories": {
@@ -793,11 +775,7 @@
      "raise-hand": "Lever ou baisser la main",
      "toggle-chat": "Afficher/Masquer le chat",
      "toggle-participants": "Afficher/Masquer les participants",
-      "open-shortcuts-settings": "Ouvrir les réglages des raccourcis",
-      "zoom-in": "Zoomer sur un écran partagé",
-      "zoom-out": "Dézoomer sur un écran partagé",
-      "zoom-reset": "Réinitialiser le zoom de l’écran partagé",
-      "zoom-pan": "Se déplacer dans un écran partagé zoomé"
+      "open-shortcuts-settings": "Ouvrir les réglages des raccourcis"
    },
    "sr": {
      "control": "Contrôle",
@@ -807,14 +785,10 @@
      "shift": "Majuscule",
      "plus": "plus",
      "hold": "Maintenir {{key}}",
-      "arrows": "Touches fléchées",
-      "plusKey": "Touche plus",
-      "minusKey": "Touche moins",
      "noShortcut": "Aucun raccourci"
    },
    "visual": {
-      "hold": "Maintenir {{key}}",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Maintenir {{key}}"
    }
  },
  "fullScreenWarning": {
@@ -480,7 +480,7 @@
      "destination": "Er wordt een nieuw document aangemaakt op",
      "destinationUnknown": "Een nieuw document wordt aangemaakt",
      "language": "Vergadertalen:",
-      "recording": "Start ook een video-opname"
+      "recording": "Start ook een opname"
    },
    "button": {
      "start": "Begin met het transcriberen van de vergadering",
@@ -756,24 +756,6 @@
    "muteParticipant": "Demp {{name}}",
    "fullScreen": "Volledig scherm"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Zoombediening voor schermdeling",
-    "zoomIn": "Inzoomen",
-    "zoomInWithShortcut": "Inzoomen ({{shortcut}})",
-    "zoomOut": "Uitzoomen",
-    "zoomOutWithShortcut": "Uitzoomen ({{shortcut}})",
-    "wheelShortcut": "Control plus scrollwiel",
-    "wheelShortcutMac": "Command plus scrollwiel",
-    "wheelShortcutHint": "Sneltoets: Control plus scrollwiel om in of uit te zoomen.",
-    "wheelShortcutHintMac": "Sneltoets: Command plus scrollwiel om in of uit te zoomen.",
-    "fitToWindow": "Aanpassen aan venster",
-    "fullScreen": "Volledig scherm",
-    "exitFullScreen": "Volledig scherm verlaten",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Sleep met de muis, of zet de focus terug op de schermdeling en gebruik de pijltjestoetsen om door het beeld te navigeren.",
-    "fullScreenEntered": "Volledig scherm ingeschakeld",
-    "fullScreenExited": "Volledig scherm uitgeschakeld"
-  },
  "shortcutsPanel": {
    "title": "Sneltoetsen",
    "categories": {
@@ -793,11 +775,7 @@
      "raise-hand": "Hand opsteken of laten zakken",
      "toggle-chat": "Chat tonen/verbergen",
      "toggle-participants": "Deelnemers tonen/verbergen",
-      "open-shortcuts-settings": "Sneltoets-instellingen openen",
-      "zoom-in": "Inzoomen op een gedeeld scherm",
-      "zoom-out": "Uitzoomen op een gedeeld scherm",
-      "zoom-reset": "Zoom van het gedeelde scherm herstellen",
-      "zoom-pan": "Navigeren in een ingezoomd gedeeld scherm"
+      "open-shortcuts-settings": "Sneltoets-instellingen openen"
    },
    "sr": {
      "control": "Control",
@@ -807,14 +785,10 @@
      "shift": "Shift",
      "plus": "plus",
      "hold": "Houd {{key}} ingedrukt",
-      "arrows": "Pijltoetsen",
-      "plusKey": "Plus-toets",
-      "minusKey": "Min-toets",
      "noShortcut": "Geen sneltoets"
    },
    "visual": {
-      "hold": "Houd {{key}} ingedrukt",
-      "arrows": "↑ ↓ ← →"
+      "hold": "Houd {{key}} ingedrukt"
    }
  },
  "fullScreenWarning": {
@@ -1,90 +0,0 @@
-// Helpers for a separate window. Not the meeting PiP: that API allows only
-// one window, and it is already used. A blank popup has no CSS, so we copy
-// styles from the meeting.
-
-const AUXILIARY_ROOT_ID = 'root'
-
-export const copyDocumentChrome = (target: Window) => {
-  const { document: targetDoc } = target
-  document.head
-    .querySelectorAll('link[rel="stylesheet"], style')
-    .forEach((node) => {
-      targetDoc.head.appendChild(node.cloneNode(true))
-    })
-
-  targetDoc.documentElement.className = document.documentElement.className
-  targetDoc.documentElement.style.cssText =
-    document.documentElement.style.cssText
-  targetDoc.documentElement.setAttribute(
-    'lang',
-    document.documentElement.lang || 'en'
-  )
-
-  const theme = document.documentElement.dataset.lkTheme
-  if (theme) {
-    targetDoc.documentElement.dataset.lkTheme = theme
-  }
-}
-
-export const ensureAuxiliaryRoot = (
-  target: Window,
-  id = AUXILIARY_ROOT_ID
-) => {
-  const existing = target.document.getElementById(id)
-  if (existing) return existing
-
-  const root = target.document.createElement('div')
-  root.id = id
-  root.style.width = '100%'
-  root.style.height = '100%'
-  target.document.body.appendChild(root)
-  return root
-}
-
-export const initializeAuxiliaryWindow = (
-  target: Window,
-  { title, rootId = AUXILIARY_ROOT_ID }: { title: string; rootId?: string }
-) => {
-  copyDocumentChrome(target)
-  target.document.title = title
-  return ensureAuxiliaryRoot(target, rootId)
-}
-
-// Fill the window and reuse the meeting colors so it does not flash white.
-export const applyAuxiliaryWindowLayout = (target: Window) => {
-  const { document: targetDoc } = target
-  const sourceBody = getComputedStyle(document.body)
-
-  targetDoc.documentElement.style.height = '100%'
-  targetDoc.body.style.margin = '0'
-  targetDoc.body.style.height = '100%'
-  targetDoc.body.style.overflow = 'hidden'
-  targetDoc.body.style.backgroundColor = sourceBody.backgroundColor
-  targetDoc.body.style.color = sourceBody.color
-}
-
-// Match the shared screen size, but keep the window on one display.
-export const getAuxiliaryWindowSize = (
-  video?: Pick<HTMLVideoElement, 'videoWidth' | 'videoHeight'> | null
-) => {
-  const maxWidth = Math.max(320, Math.round(window.screen.availWidth * 0.9))
-  const maxHeight = Math.max(240, Math.round(window.screen.availHeight * 0.9))
-  const videoWidth = video?.videoWidth ?? 0
-  const videoHeight = video?.videoHeight ?? 0
-
-  if (videoWidth > 0 && videoHeight > 0) {
-    const scale = Math.min(maxWidth / videoWidth, maxHeight / videoHeight, 1)
-    return {
-      width: Math.max(320, Math.round(videoWidth * scale)),
-      height: Math.max(240, Math.round(videoHeight * scale)),
-    }
-  }
-
-  return {
-    width: Math.min(1280, maxWidth),
-    height: Math.min(720, maxHeight),
-  }
-}
-
-export const getAuxiliaryWindowFeatures = (width: number, height: number) =>
-  `popup=yes,width=${width},height=${height},resizable=yes,scrollbars=no,status=no,location=no,toolbar=no,menubar=no`