fixup! ✨(frontend) add ScreenShareZoomableVideo component for zoomable screen shares

use react-aria useMove for pan, zoom/pan refs for DOM updates,

CHANGELOG.md

@@ -14,7 +14,6 @@ and this project adheres to
 - ✨(frontend) add participant color gradient when camera is off #1490
 - ✨(all) allow forcing SSO display name for authenticated users
 - ➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets
-- ✨(backend) add per-recording encoding quality presets to start-recording API
 
 ### Changed
 
@@ -34,7 +33,10 @@ and this project adheres to
 - 🩹(backend) identify externally provisioned users to PostHog
 - 🐛(backend) fix info panel crash for unregistered rooms
 - ♿️(frontend) focus side panel container on open #1452
-- 💥(backend) replace recording encoding options with a profile model
+
+### Added
+
+- ✨(frontend) add screen share zoom controls #1498
 
 ## [1.23.0] - 2026-07-08
 

docs/features/recording.md

@@ -100,13 +100,13 @@ sequenceDiagram
 | **RECORDING_STORAGE_EVENT_TOKEN**       | Secret/File | `None`                                                                                                                                                             | Token used to authenticate storage webhook requests, if `RECORDING_ENABLE_STORAGE_EVENT_AUTH` is enabled.                                                                                                                                                                                          |
 | **RECORDING_EXPIRATION_DAYS**           | Integer     | `None`                                                                                                                                                             | Number of days before recordings expire. Should match bucket lifecycle policy. Set to `None` for no expiration.                                                                                                                                                                                    |
 | **RECORDING_MAX_DURATION**              | Integer     | `None`                                                                                                                                                             | Maximum duration of a recording in milliseconds. Must be synced with the LiveKit Egress configuration. Set to None for unlimited duration. When the maximum duration is reached, the recording is automatically stopped and saved, and the user is prompted in the frontend with an alert message. |
-| **RECORDING_CUSTOM_ENCODING_ENABLED**          | Boolean     | `False`                                                                                                                                                            | Whether the start-recording API accepts a per-recording `encoding` object (resolution/profile) that overrides the default. When `False`, the API rejects per-recording `encoding`; when `True`, clients may pick from the available resolutions/profiles. The default encoding below is applied regardless of this flag. See [Tuning recording encoding](#tuning-recording-encoding).                                                          |
-| **RECORDING_ENCODING_AVAILABLE_RESOLUTIONS** | Dict      | `{"540p": {"width": 960, "height": 540}, "720p": {"width": 1280, "height": 720}, "1080p": {"width": 1920, "height": 1080}}`                                        | Maps a resolution name to its `{"width", "height"}` in pixels. Both the default encoding and the per-recording start-recording API pick from these keys.                                                                                                                                          |
-| **RECORDING_ENCODING_AVAILABLE_PROFILES** | Dict      | `{"full": {"fps": 30, "kbps": {…}}, …}`               | Maps a profile name to `{"fps", "kbps": {resolution: video_bitrate_kbps}}`. Every profile must define a bitrate for each available resolution (validated at startup).                                                                                                                              |
-| **RECORDING_ENCODING_DEFAULT_RESOLUTION** | String    | `"720p"`                                                                                                                                                          | Resolution used by the default encoding. When set, must be a key of `RECORDING_ENCODING_AVAILABLE_RESOLUTIONS`. Leave unset (together with, or instead of, the default profile) to disable the custom default encoding and fall back to LiveKit's built-in preset (a startup warning is emitted).                                                                                                                                                                  |
-| **RECORDING_ENCODING_DEFAULT_PROFILE**  | String    | `"full"`                                                                                                                                                          | Profile used by the default encoding. When set, must be a key of `RECORDING_ENCODING_AVAILABLE_PROFILES`. Leave unset (together with, or instead of, the default resolution) to disable the custom default encoding and fall back to LiveKit's built-in preset (a startup warning is emitted).                                                                                                                                                                        |
-| **RECORDING_ENCODING_AUDIO_BITRATE_KBPS** | Integer   | `128`                                                                                                                                                              | AAC audio bitrate in kbps used in the default encoding.                                                                                                                                                                                                               |
-| **RECORDING_ENCODING_KEY_FRAME_INTERVAL_S** | Float   | `4.0`                                                                                                                                                              | Keyframe interval in seconds. Drives seek granularity in the recorded MP4 (a player can only seek to keyframe boundaries). Larger values give the encoder slightly more bits for non-keyframe content at a fixed bitrate. `4.0` is a standard VOD value. |
+| **RECORDING_ENCODING_ENABLED**          | Boolean     | `False`                                                                                                                                                            | When `False`, LiveKit Egress uses its built-in `H264_720P_30` preset. When `True`, the `RECORDING_ENCODING_*` values below are sent to LiveKit as advanced `EncodingOptions`. See [Tuning recording encoding](#tuning-recording-encoding).                                                          |
+| **RECORDING_ENCODING_WIDTH**            | Integer     | `1280`                                                                                                                                                             | Recording video width in pixels. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                         |
+| **RECORDING_ENCODING_HEIGHT**           | Integer     | `720`                                                                                                                                                              | Recording video height in pixels. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                        |
+| **RECORDING_ENCODING_FRAMERATE**        | Integer     | `30`                                                                                                                                                               | Recording video framerate (fps). Directly impacts egress worker CPU (roughly linear). Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                    |
+| **RECORDING_ENCODING_VIDEO_BITRATE_KBPS** | Integer   | `3000`                                                                                                                                                             | H.264 MAIN video bitrate in kbps. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                        |
+| **RECORDING_ENCODING_AUDIO_BITRATE_KBPS** | Integer   | `128`                                                                                                                                                              | AAC audio bitrate in kbps. Only applied when `RECORDING_ENCODING_ENABLED` is `True`.                                                                                                                                                                                                               |
+| **RECORDING_ENCODING_KEY_FRAME_INTERVAL_S** | Float   | `4.0`                                                                                                                                                              | Keyframe interval in seconds. Drives seek granularity in the recorded MP4 (a player can only seek to keyframe boundaries). Larger values give the encoder slightly more bits for non-keyframe content at a fixed bitrate. `4.0` is a standard VOD value. Only applied when `RECORDING_ENCODING_ENABLED` is `True`. |
 
 
 ### Manual Storage Webhook
@@ -150,59 +150,52 @@ This allows you to verify which recordings are in progress, troubleshoot egress
 
 ## Tuning recording encoding
 
-Every video recording is encoded from a default resolved from `RECORDING_ENCODING_DEFAULT_PROFILE` + `RECORDING_ENCODING_DEFAULT_RESOLUTION` and passed to LiveKit as advanced `EncodingOptions`. The shipped defaults (`full` profile) match LiveKit's built-in `H264_720P_30` preset. For a one-hour meeting that produces a file of roughly **1.4 GB**, which is often heavier than necessary for talking-head content and screen sharing; lowering the default profile/resolution shrinks it. If either default is left unset, no custom default encoding is built: a warning is logged at startup and LiveKit's built-in preset is used instead.
+By default, LiveKit Egress records with the built-in `H264_720P_30` preset: 1280×720 at 30 fps, 3000 kbps H.264 MAIN video and 128 kbps AAC audio. For a one-hour meeting this produces a file of roughly **1.4 GB**, which is often heavier than necessary for talking-head content and screen sharing.
 
-Encoding is chosen from two maps: `RECORDING_ENCODING_AVAILABLE_RESOLUTIONS` (`resolution → {"width", "height"}`) and `RECORDING_ENCODING_AVAILABLE_PROFILES` (`profile → {"fps", "kbps": {resolution: video_bitrate_kbps}}`):
-
-- **Default**: `RECORDING_ENCODING_DEFAULT_PROFILE` + `RECORDING_ENCODING_DEFAULT_RESOLUTION` set the encoding used by every recording that doesn't override it. Leave either unset to fall back to LiveKit's built-in preset (a startup warning is emitted).
-- **Per recording (opt-in)**: set `RECORDING_CUSTOM_ENCODING_ENABLED=True` to let clients override the default per recording. The start-recording API then accepts an `encoding` object selecting a `resolution` (required) and `profile` (optional): a resolution-only request sets the frame size but leaves LiveKit's default framerate/bitrate; adding a profile pins fps and bitrate too. When `RECORDING_CUSTOM_ENCODING_ENABLED=False`, the API rejects any per-recording `encoding` and the default is used.
-
-The resolved values are passed straight through LiveKit's `EncodingOptions.advanced` to the GStreamer pipeline (`x264enc` for video, `faac` for audio), so there are no hidden conversions — what the profile/resolution resolve to is what the encoder receives.
+The `RECORDING_ENCODING_*` settings let operators override this preset without modifying the source. Values are passed straight through LiveKit's `EncodingOptions.advanced` to the GStreamer pipeline (`x264enc` for video, `faac` for audio), so there are no hidden conversions — what you set is what the encoder receives.
 
 ### How values map to GStreamer
 
-| Resolved value                            | GStreamer element | Property                           |
-| ----------------------------------------- | ----------------- | ---------------------------------- |
-| resolution `width` / `height`             | capsfilter        | `video/x-raw,width=W,height=H`     |
-| profile `fps`                             | capsfilter        | `framerate=F/1`                    |
-| profile `kbps[resolution]`                | `x264enc`         | `bitrate=kbps` (kilobits)          |
-| `RECORDING_ENCODING_KEY_FRAME_INTERVAL_S` | `x264enc`         | `key-int-max = interval × fps`     |
-| `RECORDING_ENCODING_AUDIO_BITRATE_KBPS`   | `faac`            | `bitrate = kbps × 1000` (bits)     |
+| Setting                               | GStreamer element | Property                           |
+| ------------------------------------- | ----------------- | ---------------------------------- |
+| `RECORDING_ENCODING_WIDTH/HEIGHT`     | capsfilter        | `video/x-raw,width=W,height=H`     |
+| `RECORDING_ENCODING_FRAMERATE`        | capsfilter        | `framerate=F/1`                    |
+| `RECORDING_ENCODING_VIDEO_BITRATE_KBPS` | `x264enc`       | `bitrate=kbps` (kilobits)          |
+| `RECORDING_ENCODING_KEY_FRAME_INTERVAL_S` | `x264enc`     | `key-int-max = interval × fps`     |
+| `RECORDING_ENCODING_AUDIO_BITRATE_KBPS` | `faac`          | `bitrate = kbps × 1000` (bits)     |
 
 The H.264 profile is fixed to MAIN and the x264 `speed-preset` to `veryfast` by LiveKit (real-time constraint) — lowering the framerate is therefore the main lever to save CPU, while lowering the bitrate is the main lever to shrink the output file.
 
-### Built-in profiles
+### Reference profiles
 
-The default `RECORDING_ENCODING_AVAILABLE_PROFILES` ship four profiles. Framerate is fixed per profile; video bitrate (kbps) scales with resolution so quality stays consistent across sizes. File size scales roughly with `framerate × bitrate`, and so does egress CPU cost.
+Rough 30-minute file-size estimates assume video + audio bitrate multiplied by duration. Actual sizes vary with content (static talking heads compress better than heavy screen motion). Egress CPU figures are indicative, measured on a single Ryzen laptop core saturated by the default preset (= 100 %); scaling is roughly linear with `framerate × bitrate` but the absolute numbers depend on the host hardware.
 
-| Profile         | FPS | 540p (kbps) | 720p (kbps) | 1080p (kbps) | Suitable for                                       |
-| --------------- | --- | ----------- | ----------- | ------------ | -------------------------------------------------- |
-| `talking_heads` | 15  | 400         | 700         | 1200         | Talking-head dominant meetings + occasional slides |
-| `text`          | 15  | 600         | 1000        | 1800         | Frequent dense screen sharing (decks, IDE, docs)   |
-| `mixed`         | 20  | 900         | 1500        | 2500         | Mixed content, moderate motion                     |
-| `full`          | 30  | 2000        | 3000        | 4500         | Highest fidelity; closest to the LiveKit preset    |
+| Profile                | Resolution | FPS | Video (kbps) | Audio (kbps) | Keyframe (s) | ~ size / 30 min | Egress CPU (vs. default) | Suitable for                                        |
+| ---------------------- | ---------- | --- | ------------ | ------------ | ------------ | --------------- | ------------------------ | --------------------------------------------------- |
+| Default (preset)       | 1280×720   | 30  | 3000         | 128          | 4            | **~690 MB**     | 100 %                    | Unchanged LiveKit behaviour                         |
+| Balanced               | 1280×720   | 20  | 1000         | 96           | 4            | ~240 MB         | ~67 %                    | Mixed content, moderate motion                      |
+| **Low CPU / small file** | 1280×720 | 15  | 600          | 64           | 4            | **~150 MB**     | ~50 %                    | Talking-head dominant meetings + occasional slides ★ |
+| Slide-heavy            | 1280×720   | 15  | 900          | 64           | 4            | ~210 MB         | ~55 %                    | Frequent dense screen sharing (decks, IDE, docs)    |
+| Minimum CPU            | 960×540    | 15  | 500          | 64           | 4            | ~125 MB         | ~30 %                    | Voice-first meetings, readable text not required    |
+| Audio-heavy fallback   | 1280×720   | 10  | 400          | 96           | 4            | ~110 MB         | ~35 %                    | Long webinars, low motion                           |
 
-To pick a profile per recording (requires `RECORDING_CUSTOM_ENCODING_ENABLED=True`), the client sends it in the start-recording request:
+★ Recommended starting point for typical LaSuite Meet usage.
 
-```json
-{
-  "mode": "screen_recording",
-  "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}}
-}
-```
-
-To change the default encoding applied to every recording:
+Environment variables for the **Low CPU / small file** profile:
 
 ```bash
-RECORDING_ENCODING_DEFAULT_RESOLUTION=720p
-RECORDING_ENCODING_DEFAULT_PROFILE=talking_heads
+RECORDING_ENCODING_ENABLED=True
+RECORDING_ENCODING_WIDTH=1280
+RECORDING_ENCODING_HEIGHT=720
+RECORDING_ENCODING_FRAMERATE=15
+RECORDING_ENCODING_VIDEO_BITRATE_KBPS=600
 RECORDING_ENCODING_AUDIO_BITRATE_KBPS=64
 RECORDING_ENCODING_KEY_FRAME_INTERVAL_S=4.0
 ```
 
 ### Caveats
 
-- **Screen-share readability — think bits/frame, not bitrate**: at 720p, text legibility starts to break down below ~40 kbits/frame (= `bitrate ÷ framerate`). The `talking_heads` profile (700 kbps × 15 fps) sits just above that threshold, comfortable for talking heads with occasional slide sharing. The same bitrate at 30 fps would only deliver ~23 kbits/frame and visibly blur dense slides — which is why **lowering framerate is a more screen-share-friendly lever than lowering bitrate**. For deck-heavy or IDE-share meetings, prefer the **`text`** profile (1000 kbps × 15 fps ≈ 67 kbits/frame).
+- **Screen-share readability — think bits/frame, not bitrate**: at 720p, text legibility starts to break down below ~40 kbits/frame (= `bitrate ÷ framerate`). The recommended preset (600 kbps × 15 fps) sits at exactly that threshold, comfortable for talking heads with occasional slide sharing. The same 600 kbps at 30 fps would only deliver 20 kbits/frame and visibly blur dense slides — which is why **lowering framerate is a more screen-share-friendly lever than lowering bitrate**. For deck-heavy or IDE-share meetings, prefer the **Slide-heavy** profile (900 kbps × 15 fps ≈ 60 kbits/frame).
 - **Motion handling**: the `veryfast` x264 preset is set by LiveKit and cannot be overridden here. Low-bitrate settings will therefore show more artefacts on fast motion than an offline re-encode with a slower preset would. This is the other reason FPS reduction is the safer tuning lever for meeting recordings.
 - **Audio**: AAC at 64 kbps stereo is transparent for voice but starts to compress music noticeably. Keep 128 kbps if you expect music playback in meetings.
 - **Codec choice**: H.264 MAIN is hardcoded on purpose. Switching to HEVC or VP9 would increase egress CPU cost 2×–5×, defeating the goal of this tuning.

src/backend/core/api/serializers.py

@@ -13,12 +13,7 @@ from django.core.exceptions import SuspiciousOperation
 from django.utils.translation import gettext_lazy as _
 
 from django_pydantic_field.rest_framework import SchemaField
-from pydantic import (
-    BaseModel,
-    Field,
-    field_serializer,
-    field_validator,
-)
+from pydantic import BaseModel, Field, field_serializer
 from pydantic import ValidationError as PydanticValidationError
 from rest_framework import serializers
 from rest_framework.exceptions import PermissionDenied
@@ -232,49 +227,6 @@ class BaseValidationOnlySerializer(serializers.Serializer):
         raise NotImplementedError(f"{self.__class__.__name__} is validation-only")
 
 
-class EncodingConfig(BaseModel):
-    """Configuration options for recording encoding.
-
-    The allowed `resolution` and `profile` values are derived at validation time
-    from ``settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS`` and
-    ``settings.RECORDING_ENCODING_AVAILABLE_PROFILES``, so adding a resolution or profile
-    to those maps is enough to make it accepted here.
-
-    Attributes:
-        resolution: Target video resolution.
-        profile: Encoding profile to balance quality and CPU usage. When `None`,
-        LiveKit default framerate/bitrate are used for the resolution.
-    """
-
-    resolution: str
-    profile: str | None = None
-    model_config = {"extra": "forbid"}
-
-    @field_validator("resolution")
-    @classmethod
-    def _validate_resolution(cls, value):
-        """Reject resolutions absent from RECORDING_ENCODING_AVAILABLE_RESOLUTIONS."""
-        allowed = set(settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS)
-        if value not in allowed:
-            raise ValueError(
-                f"Invalid resolution '{value}'. Choose from {sorted(allowed)}."
-            )
-        return value
-
-    @field_validator("profile")
-    @classmethod
-    def _validate_profile(cls, value):
-        """Reject profiles absent from RECORDING_ENCODING_AVAILABLE_PROFILES."""
-        if value is None:
-            return None
-        allowed = set(settings.RECORDING_ENCODING_AVAILABLE_PROFILES)
-        if value not in allowed:
-            raise ValueError(
-                f"Invalid profile '{value}'. Choose from {sorted(allowed)}."
-            )
-        return value
-
-
 class RecordingOptions(BaseModel):
     """Configuration options for recording.
 
@@ -295,7 +247,7 @@ class RecordingOptions(BaseModel):
     transcribe: bool | None = None
     collect_metadata: bool | None = None
     original_mode: Literal["screen_recording", "transcript"] | None = None
-    encoding: EncodingConfig | None = None
+
     model_config = {"extra": "forbid"}
 
 

src/backend/core/api/viewsets.py

@@ -63,7 +63,6 @@ from core.recording.worker.exceptions import (
     RecordingStopError,
 )
 from core.recording.worker.factories import (
-    build_encoding_options,
     get_worker_service,
 )
 from core.recording.worker.mediator import (
@@ -384,34 +383,12 @@ class RoomViewSet(
         options = serializer.validated_data.get("options")
         room = self.get_object()
 
-        if (
-            options is not None
-            and options.encoding is not None
-            and not settings.RECORDING_CUSTOM_ENCODING_ENABLED
-        ):
-            # Per-recording encoding selection is gated by
-            # RECORDING_CUSTOM_ENCODING_ENABLED. When disabled, recordings use
-            # encoding defined by RECORDING_ENCODING_DEFAULT_RESOLUTION
-            # and RECORDING_ENCODING_DEFAULT_PROFILE.
-            return drf_response.Response(
-                {"detail": "Per-recording encoding selection is disabled."},
-                status=drf_status.HTTP_400_BAD_REQUEST,
-            )
-
-        options_data = options.model_dump(exclude_none=True) if options else {}
-        if options is not None and options.encoding is not None:
-            # Persist the resolved encoding (concrete width/height/framerate/
-            # bitrate) alongside the requested resolution/profile for traceability.
-            options_data["encoding"]["resolved"] = build_encoding_options(
-                options.encoding.resolution, options.encoding.profile
-            )
-
         try:
             with transaction.atomic():
                 recording = models.Recording.objects.create(
                     room=room,
                     mode=mode,
-                    options=options_data,
+                    options=options.model_dump(exclude_none=True) if options else {},
                 )
                 models.RecordingAccess.objects.create(
                     user=self.request.user,

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

@@ -22,44 +22,6 @@ _RECORDING_AUDIO_CODEC = livekit_api.AudioCodec.AAC
 _RECORDING_AUDIO_FREQUENCY_HZ = 48000
 
 
-def build_encoding_options(resolution, profile):
-    """Assemble the LiveKit ``EncodingOptions`` kwargs for a resolution/profile.
-
-    Single source of truth shared by the default encoding
-    (``WorkerServiceConfig.from_settings``) and the per-recording encoding
-    persisted by the start-recording API, so both paths always produce the
-    same shape.
-
-    The profile-independent fields (audio bitrate, keyframe interval and the
-    pinned codec / frequency constants) are always included.
-    The resolution-dependent fields are added only when they can be resolved:
-    width/height require a resolution; framerate/video_bitrate require both a
-    resolution and a profile (a resolution-only encoding leaves framerate and
-    bitrate to LiveKit's defaults).
-    """
-    options: Dict[str, Any] = {
-        "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
-        "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
-        "video_codec": _RECORDING_VIDEO_CODEC,
-        "audio_codec": _RECORDING_AUDIO_CODEC,
-        "audio_frequency": _RECORDING_AUDIO_FREQUENCY_HZ,
-    }
-
-    if resolution:
-        resolution_config = settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS[
-            resolution
-        ]
-        options["width"] = resolution_config["width"]
-        options["height"] = resolution_config["height"]
-
-    if resolution and profile:
-        profile_config = settings.RECORDING_ENCODING_AVAILABLE_PROFILES[profile]
-        options["framerate"] = profile_config["fps"]
-        options["video_bitrate"] = profile_config["kbps"][resolution]
-
-    return options
-
-
 @dataclass(frozen=True)
 class WorkerServiceConfig:
     """Declare Worker Service common configurations"""
@@ -76,16 +38,22 @@ class WorkerServiceConfig:
 
         logger.debug("Loading WorkerServiceConfig from settings.")
 
-        # The default encoding is resolved from the default profile/resolution and
-        # applied to every recording that carries no per-recording encoding.
-        # When either default is missing, we leave this as None so LiveKit falls
-        # back to its built-in preset.
-        resolution = settings.RECORDING_ENCODING_DEFAULT_RESOLUTION
-        profile = settings.RECORDING_ENCODING_DEFAULT_PROFILE
-
         encoding_options: Optional[Dict[str, Any]] = None
-        if resolution and profile:
-            encoding_options = build_encoding_options(resolution, profile)
+        if settings.RECORDING_ENCODING_ENABLED:
+            # Single source of truth for the EncodingOptions kwargs:
+            # operator-tunable values live in Django settings, codec / frequency
+            # are pinned constants. The services layer only unpacks this dict.
+            encoding_options = {
+                "width": settings.RECORDING_ENCODING_WIDTH,
+                "height": settings.RECORDING_ENCODING_HEIGHT,
+                "framerate": settings.RECORDING_ENCODING_FRAMERATE,
+                "video_bitrate": settings.RECORDING_ENCODING_VIDEO_BITRATE_KBPS,
+                "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
+                "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
+                "video_codec": _RECORDING_VIDEO_CODEC,
+                "audio_codec": _RECORDING_AUDIO_CODEC,
+                "audio_frequency": _RECORDING_AUDIO_FREQUENCY_HZ,
+            }
 
         return cls(
             output_folder=settings.RECORDING_OUTPUT_FOLDER,
@@ -110,12 +78,7 @@ class WorkerService(Protocol):
     def __init__(self, config: WorkerServiceConfig):
         """Initialize the service with the given configuration."""
 
-    def start(
-        self,
-        room_id: str,
-        recording_id: str,
-        encoding_options: Optional[Dict[str, Any]] = None,
-    ) -> str:
+    def start(self, room_id: str, recording_id: str) -> str:
         """Start a recording for a specified room."""
 
     def stop(self, worker_id: str) -> str:

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

@@ -47,11 +47,8 @@ class WorkerServiceMediator:
             raise RecordingStartError()
 
         room_name = str(recording.room.id)
-        encoding_options = (recording.options.get("encoding") or {}).get("resolved")
         try:
-            worker_id = self._worker_service.start(
-                room_name, recording.id, encoding_options=encoding_options
-            )
+            worker_id = self._worker_service.start(room_name, recording.id)
         except (WorkerRequestError, WorkerConnectionError, WorkerResponseError) as e:
             logger.exception(
                 "Failed to start recording for room %s: %s", recording.room.slug, e

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

@@ -76,7 +76,7 @@ class BaseEgressService:
 
         return "FAILED_TO_STOP"
 
-    def start(self, room_name, recording_id, encoding_options=None):
+    def start(self, room_name, recording_id):
         """Start the egress process for a recording (not implemented in the base class).
         Each derived class must implement this method, providing the necessary parameters for
         its specific egress type (e.g. audio_only, streaming output).
@@ -99,24 +99,13 @@ class BaseEgressService:
 
         return livekit_api.EncodingOptions(**opts)
 
-    def _resolve_encoding_options(self, encoding_options):
-        """Build LiveKit EncodingOptions from a resolved per-recording dict, or None.
-
-        ``encoding_options`` is the dict persisted by the API in
-        ``recording.options["encoding"]["resolved"]``.
-        """
-        if not encoding_options:
-            return None
-
-        return livekit_api.EncodingOptions(**encoding_options)
-
 
 class VideoCompositeEgressService(BaseEgressService):
     """Record multiple participant video and audio tracks into a single output '.mp4' file."""
 
     hrid = "video-recording-composite-livekit-egress"
 
-    def start(self, room_name, recording_id, encoding_options=None):
+    def start(self, room_name, recording_id):
         """Start the video composite egress process for a recording."""
 
         # Save room's recording as a mp4 video file.
@@ -137,10 +126,7 @@ class VideoCompositeEgressService(BaseEgressService):
             "layout": "speaker-light",
         }
 
-        advanced = (
-            self._resolve_encoding_options(encoding_options)
-            or self._build_encoding_options()
-        )
+        advanced = self._build_encoding_options()
         if advanced is not None:
             request_kwargs["advanced"] = advanced
 
@@ -159,13 +145,8 @@ class AudioCompositeEgressService(BaseEgressService):
 
     hrid = "audio-recording-composite-livekit-egress"
 
-    def start(self, room_name, recording_id, encoding_options=None):
-        """Start the audio composite egress process for a recording.
-
-        ``encoding_options`` is accepted for signature compatibility with the
-        WorkerService protocol but ignored: audio-only egress has no
-        encoding to configure.
-        """
+    def start(self, room_name, recording_id):
+        """Start the audio composite egress process for a recording."""
 
         # Save room's recording as an ogg audio file.
         file_type = livekit_api.EncodedFileType.OGG

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

@@ -1,126 +0,0 @@
-"""Tests for the per-recording encoding resolution in BaseEgressService."""
-
-# pylint: disable=protected-access,redefined-outer-name,unused-argument,no-member
-
-from unittest.mock import Mock
-
-from django.conf import settings
-
-import pytest
-from livekit import api as livekit_api
-from pydantic import ValidationError as PydanticValidationError
-
-from core.api.serializers import EncodingConfig
-from core.recording.worker.factories import build_encoding_options
-from core.recording.worker.services import VideoCompositeEgressService
-
-
-def make_config():
-    """Build a minimal WorkerServiceConfig-like mock for service instantiation."""
-    config = Mock()
-    config.bucket_args = {
-        "endpoint": "https://s3.test.com",
-        "access_key": "test_key",
-        "secret": "test_secret",
-        "region": "test-region",
-        "bucket": "test-bucket",
-        "force_path_style": True,
-    }
-    config.encoding_options = None
-    return config
-
-
-@pytest.fixture
-def service():
-    """Return a VideoCompositeEgressService with mocked handle_request."""
-    svc = VideoCompositeEgressService(make_config())
-    svc._handle_request = Mock()
-    return svc
-
-
-# --- build_encoding_options ---
-
-
-def test_build_options_without_profile_omits_profile_fields():
-    """A resolution-only config should resolve dimensions but no framerate/bitrate.
-
-    The profile-independent fields (audio bitrate, keyframe interval, codec /
-    frequency pins) are always present, matching the default encoding.
-    """
-    resolved = build_encoding_options("720p", None)
-
-    assert resolved == {
-        "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
-        "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
-        "video_codec": livekit_api.VideoCodec.H264_MAIN,
-        "audio_codec": livekit_api.AudioCodec.AAC,
-        "audio_frequency": 48000,
-        "width": 1280,
-        "height": 720,
-    }
-    assert "framerate" not in resolved
-    assert "video_bitrate" not in resolved
-
-
-def test_encoding_config_requires_resolution():
-    """A profile-only or empty encoding config should be rejected at validation."""
-    with pytest.raises(PydanticValidationError):
-        EncodingConfig(profile="mixed")
-    with pytest.raises(PydanticValidationError):
-        EncodingConfig()
-
-
-# --- _resolve_encoding_options ---
-
-
-@pytest.mark.parametrize("encoding_options", [None, {}])
-def test_resolve_options_returns_none_when_empty(service, encoding_options):
-    """Resolver should return None when the resolved dict is empty or missing."""
-    assert service._resolve_encoding_options(encoding_options) is None
-
-
-@pytest.mark.parametrize(
-    "resolution",
-    list(settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS),
-)
-@pytest.mark.parametrize(
-    "profile",
-    list(settings.RECORDING_ENCODING_AVAILABLE_PROFILES),
-)
-def test_resolve_profile_resolution_combinations(service, profile, resolution):
-    """Every (profile, resolution) pair should resolve to the values from settings."""
-    resolution_config = settings.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS[resolution]
-    expected_width = resolution_config["width"]
-    expected_height = resolution_config["height"]
-    profile_config = settings.RECORDING_ENCODING_AVAILABLE_PROFILES[profile]
-    expected_fps = profile_config["fps"]
-    expected_bitrate = profile_config["kbps"][resolution]
-
-    resolved = build_encoding_options(resolution, profile)
-    result = service._resolve_encoding_options(resolved)
-
-    assert result.width == expected_width
-    assert result.height == expected_height
-    assert result.framerate == expected_fps
-    assert result.video_bitrate == expected_bitrate
-    # Profile-independent fields match the default encoding, never dropped.
-    assert result.audio_bitrate == settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS
-    assert result.video_codec == livekit_api.VideoCodec.H264_MAIN
-    assert result.audio_codec == livekit_api.AudioCodec.AAC
-    assert result.audio_frequency == 48000
-
-
-def test_resolve_options_none_profile_uses_livekit_defaults(service):
-    """Missing profile should pass 0 fps/bitrate (LiveKit protobuf default).
-
-    The pinned codec / audio fields are still applied even without a profile.
-    """
-    resolved = build_encoding_options("720p", None)
-    result = service._resolve_encoding_options(resolved)
-    assert result.width == 1280
-    assert result.height == 720
-    assert result.framerate == 0
-    assert result.video_bitrate == 0
-    assert result.audio_bitrate == settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS
-    assert result.video_codec == livekit_api.VideoCodec.H264_MAIN
-    assert result.audio_codec == livekit_api.AudioCodec.AAC

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

@@ -40,16 +40,6 @@ def test_settings():
         "AWS_S3_SECRET_ACCESS_KEY": "test_secret",
         "AWS_S3_REGION_NAME": "test-region",
         "AWS_STORAGE_BUCKET_NAME": "test-bucket",
-        "RECORDING_ENCODING_AVAILABLE_RESOLUTIONS": {
-            "720p": {"width": 1280, "height": 720}
-        },
-        "RECORDING_ENCODING_AVAILABLE_PROFILES": {
-            "full": {"fps": 30, "kbps": {"720p": 3000}}
-        },
-        "RECORDING_ENCODING_DEFAULT_RESOLUTION": "720p",
-        "RECORDING_ENCODING_DEFAULT_PROFILE": "full",
-        "RECORDING_ENCODING_AUDIO_BITRATE_KBPS": 128,
-        "RECORDING_ENCODING_KEY_FRAME_INTERVAL_S": 4.0,
     }
 
     # Use override_settings to properly patch Django settings
@@ -76,18 +66,8 @@ def test_config_initialization(default_config):
         "bucket": "test-bucket",
         "force_path_style": True,
     }
-    # The default encoding is always resolved from the default profile/resolution.
-    assert default_config.encoding_options == {
-        "width": 1280,
-        "height": 720,
-        "framerate": 30,
-        "video_bitrate": 3000,
-        "audio_bitrate": 128,
-        "key_frame_interval": 4.0,
-        "video_codec": livekit_api_codec.VideoCodec.H264_MAIN,
-        "audio_codec": livekit_api_codec.AudioCodec.AAC,
-        "audio_frequency": 48000,
-    }
+    # Encoding override is opt-in; disabled by default.
+    assert default_config.encoding_options is None
 
 
 def test_config_immutability(default_config):
@@ -96,7 +76,6 @@ def test_config_immutability(default_config):
         default_config.output_folder = "new/path"
 
 
-@pytest.mark.parametrize("custom_encoding_enabled", [True, False])
 @override_settings(
     RECORDING_OUTPUT_FOLDER="/test/output",
     LIVEKIT_CONFIGURATION={"server": "test.example.com"},
@@ -105,25 +84,23 @@ def test_config_immutability(default_config):
     AWS_S3_SECRET_ACCESS_KEY="test_secret",
     AWS_S3_REGION_NAME="test-region",
     AWS_STORAGE_BUCKET_NAME="test-bucket",
-    RECORDING_ENCODING_AVAILABLE_RESOLUTIONS={"720p": {"width": 1280, "height": 720}},
-    RECORDING_ENCODING_AVAILABLE_PROFILES={"low": {"fps": 15, "kbps": {"720p": 600}}},
-    RECORDING_ENCODING_DEFAULT_RESOLUTION="720p",
-    RECORDING_ENCODING_DEFAULT_PROFILE="low",
+    RECORDING_ENCODING_ENABLED=True,
+    RECORDING_ENCODING_WIDTH=1280,
+    RECORDING_ENCODING_HEIGHT=720,
+    RECORDING_ENCODING_FRAMERATE=15,
+    RECORDING_ENCODING_VIDEO_BITRATE_KBPS=600,
     RECORDING_ENCODING_AUDIO_BITRATE_KBPS=64,
     RECORDING_ENCODING_KEY_FRAME_INTERVAL_S=10.0,
 )
-def test_config_encoding_options_default(custom_encoding_enabled):
-    """The default encoding is always resolved from the default profile/resolution.
+def test_config_encoding_options_enabled():
+    """When RECORDING_ENCODING_ENABLED is True, encoding options are populated.
 
-    The default fallback resolves the default profile/resolution and mixes those
-    operator-tunable values with pinned codec / frequency constants. This works
-    regardless of RECORDING_CUSTOM_ENCODING_ENABLED, which only gates the
-    per-recording API, so both toggle states produce the same default.
+    The dict mixes operator-tunable values from settings with pinned codec /
+    frequency constants, so the services layer can simply unpack it.
     """
 
-    with override_settings(RECORDING_CUSTOM_ENCODING_ENABLED=custom_encoding_enabled):
-        WorkerServiceConfig.from_settings.cache_clear()
-        config = WorkerServiceConfig.from_settings()
+    WorkerServiceConfig.from_settings.cache_clear()
+    config = WorkerServiceConfig.from_settings()
 
     assert config.encoding_options == {
         "width": 1280,
@@ -138,27 +115,6 @@ def test_config_encoding_options_default(custom_encoding_enabled):
     }
 
 
-@pytest.mark.parametrize(
-    ("default_resolution", "default_profile"),
-    [("", "full"), ("720p", ""), ("", "")],
-)
-def test_config_encoding_options_none_when_default_missing(
-    test_settings, default_resolution, default_profile
-):
-    """A missing default resolution/profile leaves encoding_options None.
-
-    The service then omits the `advanced` field so LiveKit uses its built-in preset.
-    """
-    with override_settings(
-        RECORDING_ENCODING_DEFAULT_RESOLUTION=default_resolution,
-        RECORDING_ENCODING_DEFAULT_PROFILE=default_profile,
-    ):
-        WorkerServiceConfig.from_settings.cache_clear()
-        config = WorkerServiceConfig.from_settings()
-
-    assert config.encoding_options is None
-
-
 @override_settings(
     RECORDING_OUTPUT_FOLDER="/test/output",
     LIVEKIT_CONFIGURATION={"server": "test.example.com"},

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

@@ -52,7 +52,7 @@ def test_start_recording_success(
     # Verify worker service call
     expected_room_name = str(mock_recording.room.id)
     mock_worker_service.start.assert_called_once_with(
-        expected_room_name, mock_recording.id, encoding_options=None
+        expected_room_name, mock_recording.id
     )
 
     # Verify recording updates
@@ -66,38 +66,6 @@ def test_start_recording_success(
     )
 
 
-@mock.patch("core.utils.update_room_metadata")
-def test_start_recording_passes_resolved_encoding(
-    mock_update_room_metadata, mediator, mock_worker_service
-):
-    """The resolved encoding persisted in recording.options reaches the worker."""
-    mock_worker_service.start.return_value = "test-worker-123"
-
-    resolved = {
-        "key_frame_interval": 4.0,
-        "width": 1280,
-        "height": 720,
-        "framerate": 15,
-        "video_bitrate": 700,
-    }
-    mock_recording = RecordingFactory(
-        status=RecordingStatusChoices.INITIATED,
-        worker_id=None,
-        options={
-            "encoding": {
-                "resolution": "720p",
-                "profile": "talking_heads",
-                "resolved": resolved,
-            }
-        },
-    )
-    mediator.start(mock_recording)
-
-    mock_worker_service.start.assert_called_once_with(
-        str(mock_recording.room.id), mock_recording.id, encoding_options=resolved
-    )
-
-
 @pytest.mark.parametrize(
     "error_class", [WorkerRequestError, WorkerConnectionError, WorkerResponseError]
 )

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

@@ -2,12 +2,11 @@
 Test rooms API endpoints in the Meet core app: start recording.
 """
 
-# pylint: disable=redefined-outer-name,unused-argument,no-member
+# pylint: disable=redefined-outer-name,unused-argument
 
 from unittest import mock
 
 import pytest
-from livekit import api as livekit_api
 from rest_framework.test import APIClient
 
 from ...factories import RoomFactory, UserFactory
@@ -471,194 +470,6 @@ def test_start_recording_options_unknown_field_rejected(settings):
     assert response.status_code == 400
 
 
-def test_start_recording_options_encoding_valid(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """Should accept a valid encoding configuration."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 201
-
-
-def test_start_recording_options_encoding_rejected_when_custom_encoding_disabled(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """Per-recording encoding is rejected when RECORDING_CUSTOM_ENCODING_ENABLED is off."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = False
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 400
-    assert not Recording.objects.filter(room=room).exists()
-
-
-def test_start_recording_persists_resolved_encoding(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """The resolved encoding should be persisted in recording.options alongside
-    the requested resolution/profile for traceability."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"resolution": "720p", "profile": "talking_heads"}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 201
-    recording = Recording.objects.get(room=room)
-    assert recording.options["encoding"] == {
-        "resolution": "720p",
-        "profile": "talking_heads",
-        "resolved": {
-            "audio_bitrate": settings.RECORDING_ENCODING_AUDIO_BITRATE_KBPS,
-            "key_frame_interval": settings.RECORDING_ENCODING_KEY_FRAME_INTERVAL_S,
-            "video_codec": livekit_api.VideoCodec.H264_MAIN,
-            "audio_codec": livekit_api.AudioCodec.AAC,
-            "audio_frequency": 48000,
-            "width": 1280,
-            "height": 720,
-            "framerate": 15,
-            "video_bitrate": 700,
-        },
-    }
-
-
-def test_start_recording_forwards_resolved_encoding_to_worker(
-    settings, mock_worker_service, mock_worker_service_factory
-):
-    """The resolved encoding should passed on to the worker."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    mock_worker_service.start.return_value = "egress-123"
-
-    with mock.patch("core.utils.update_room_metadata"):
-        response = client.post(
-            f"/api/v1.0/rooms/{room.id}/start-recording/",
-            {
-                "mode": "screen_recording",
-                "options": {
-                    "encoding": {"resolution": "720p", "profile": "talking_heads"}
-                },
-            },
-            format="json",
-        )
-
-    assert response.status_code == 201
-    recording = Recording.objects.get(room=room)
-    mock_worker_service.start.assert_called_once_with(
-        str(room.id),
-        recording.id,
-        encoding_options=recording.options["encoding"]["resolved"],
-    )
-
-
-def test_start_recording_options_encoding_invalid_resolution(settings):
-    """Should reject invalid encoding resolution values."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {"mode": "screen_recording", "options": {"encoding": {"resolution": "4K"}}},
-        format="json",
-    )
-
-    assert response.status_code == 400
-
-
-def test_start_recording_options_encoding_unknown_key_rejected(settings):
-    """Should reject unknown keys in encoding configuration."""
-    settings.RECORDING_ENABLE = True
-    settings.RECORDING_CUSTOM_ENCODING_ENABLED = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {
-            "mode": "screen_recording",
-            "options": {"encoding": {"bitrate": 9000}},
-        },
-        format="json",
-    )
-
-    assert response.status_code == 400
-
-
-def test_start_recording_options_without_encoding_unchanged(
-    settings, mock_worker_service_factory, mock_worker_manager
-):
-    """Requests without encoding should keep existing options behavior."""
-    settings.RECORDING_ENABLE = True
-    room = RoomFactory()
-    user = UserFactory()
-    room.accesses.create(user=user, role="owner")
-    client = APIClient()
-    client.force_login(user)
-
-    response = client.post(
-        f"/api/v1.0/rooms/{room.id}/start-recording/",
-        {"mode": "screen_recording", "options": {"language": "fr"}},
-        format="json",
-    )
-
-    assert response.status_code == 201
-    recording = Recording.objects.get(room=room)
-    assert recording.options == {"language": "fr"}
-
-
 @pytest.mark.parametrize("value", ["foo", 12])
 def test_start_recording_options_invalid_transcribe_type(settings, value):
     """Should reject non-boolean transcribe values."""

src/backend/meet/settings.py

@@ -721,74 +721,28 @@ class Base(Configuration):
     # These settings affect screen recordings handled by VideoCompositeEgressService;
     # they are silently ignored by AudioCompositeEgressService (audio-only transcript
     # recordings), whose request never carries advanced EncodingOptions.
-    #
-    # A default encoding is applied to every recording: it is resolved from the default
-    # profile and resolution below and passed to LiveKit as EncodingOptions (advanced),
-    # replacing LiveKit's built-in H264_720P_30 preset. Lowering framerate and bitrate
-    # reduces output file size and CPU load on the egress worker. If either
-    # RECORDING_ENCODING_DEFAULT_RESOLUTION or RECORDING_ENCODING_DEFAULT_PROFILE is
-    # unset, no default encoding is built (a startup warning is emitted) and LiveKit's
-    # built-in preset is used instead.
-    #
-    # RECORDING_CUSTOM_ENCODING_ENABLED gates whether the start-recording API lets a
-    # client override that default per recording (via an `encoding` object selecting a
-    # resolution/profile). When False, the API rejects per-recording `encoding` and
-    # every recording uses the default; when True, clients may pick from the
-    # available resolutions/profiles below.
-    RECORDING_CUSTOM_ENCODING_ENABLED = values.BooleanValue(
-        False, environ_name="RECORDING_CUSTOM_ENCODING_ENABLED", environ_prefix=None
+    # When disabled, LiveKit falls back to its built-in H264_720P_30 preset
+    # (1280x720, 30 fps, 3000 kbps H.264 MAIN video, 128 kbps AAC audio).
+    # When enabled, the values below are passed to LiveKit as EncodingOptions
+    # (advanced) and replace the preset. Lowering framerate and bitrate reduces
+    # output file size and CPU load on the egress worker.
+    RECORDING_ENCODING_ENABLED = values.BooleanValue(
+        False, environ_name="RECORDING_ENCODING_ENABLED", environ_prefix=None
     )
-
-    # Map resolution string -> {"width", "height"} in pixels.
-    RECORDING_ENCODING_AVAILABLE_RESOLUTIONS = values.DictValue(
-        {
-            "540p": {"width": 960, "height": 540},
-            "720p": {"width": 1280, "height": 720},
-            "1080p": {"width": 1920, "height": 1080},
-        },
-        environ_name="RECORDING_ENCODING_AVAILABLE_RESOLUTIONS",
+    RECORDING_ENCODING_WIDTH = values.PositiveIntegerValue(
+        1280, environ_name="RECORDING_ENCODING_WIDTH", environ_prefix=None
+    )
+    RECORDING_ENCODING_HEIGHT = values.PositiveIntegerValue(
+        720, environ_name="RECORDING_ENCODING_HEIGHT", environ_prefix=None
+    )
+    RECORDING_ENCODING_FRAMERATE = values.PositiveIntegerValue(
+        30, environ_name="RECORDING_ENCODING_FRAMERATE", environ_prefix=None
+    )
+    RECORDING_ENCODING_VIDEO_BITRATE_KBPS = values.PositiveIntegerValue(
+        3000,
+        environ_name="RECORDING_ENCODING_VIDEO_BITRATE_KBPS",
         environ_prefix=None,
     )
-
-    # Map profile string -> {"fps", "kbps": {resolution: video_bitrate_kbps}}.
-    # Bitrate scales with resolution so quality stays consistent across sizes.
-    RECORDING_ENCODING_AVAILABLE_PROFILES = values.DictValue(
-        {
-            "talking_heads": {
-                "fps": 15,
-                "kbps": {"540p": 400, "720p": 700, "1080p": 1200},
-            },
-            "text": {
-                "fps": 15,
-                "kbps": {"540p": 600, "720p": 1000, "1080p": 1800},
-            },
-            "mixed": {
-                "fps": 20,
-                "kbps": {"540p": 900, "720p": 1500, "1080p": 2500},
-            },
-            "full": {
-                "fps": 30,
-                "kbps": {"540p": 2000, "720p": 3000, "1080p": 4500},
-            },
-        },
-        environ_name="RECORDING_ENCODING_AVAILABLE_PROFILES",
-        environ_prefix=None,
-    )
-
-    # Defaults used when no profile/resolution is specified per recording.
-    # Must be keys of the two dicts above (validated at startup).
-    RECORDING_ENCODING_DEFAULT_PROFILE = values.Value(
-        "full",
-        environ_name="RECORDING_ENCODING_DEFAULT_PROFILE",
-        environ_prefix=None,
-    )
-    RECORDING_ENCODING_DEFAULT_RESOLUTION = values.Value(
-        "720p",
-        environ_name="RECORDING_ENCODING_DEFAULT_RESOLUTION",
-        environ_prefix=None,
-    )
-
-    # Settings independent of profile/resolution.
     RECORDING_ENCODING_AUDIO_BITRATE_KBPS = values.PositiveIntegerValue(
         128,
         environ_name="RECORDING_ENCODING_AUDIO_BITRATE_KBPS",
@@ -803,7 +757,6 @@ class Base(Configuration):
     SUMMARY_SERVICE_VERSION = values.PositiveIntegerValue(
         1, environ_name="SUMMARY_SERVICE_VERSION", environ_prefix=None
     )
-
     SUMMARY_SERVICE_ENDPOINT = values.Value(
         None, environ_name="SUMMARY_SERVICE_ENDPOINT", environ_prefix=None
     )
@@ -1168,70 +1121,6 @@ class Base(Configuration):
             },
         }
 
-    @classmethod
-    def _check_recording_encoding_maps(cls):
-        """Ensure the per-recording encoding maps are mutually consistent.
-
-        Every profile in RECORDING_ENCODING_AVAILABLE_PROFILES must define a bitrate for
-        each resolution declared in RECORDING_ENCODING_AVAILABLE_RESOLUTIONS.
-
-        The default profile / resolution feed the default encoding. When either is
-        missing, no custom default encoding can be built: a warning is emitted and
-        recordings fall back to LiveKit's built-in preset. When both are set, they
-        must reference keys that actually exist in the maps above.
-        """
-        resolutions = set(cls.RECORDING_ENCODING_AVAILABLE_RESOLUTIONS)
-        profiles = set(cls.RECORDING_ENCODING_AVAILABLE_PROFILES)
-        # DictValue resolves to a dict at runtime; pylint sees the descriptor.
-        for (
-            profile,
-            profile_config,
-        ) in cls.RECORDING_ENCODING_AVAILABLE_PROFILES.items():  # pylint: disable=no-member
-            profile_resolutions = set(profile_config["kbps"])
-            if profile_resolutions != resolutions:
-                raise ValueError(
-                    f"Profile '{profile}' in RECORDING_ENCODING_AVAILABLE_PROFILES must "
-                    "define a bitrate for exactly the resolutions in "
-                    "RECORDING_ENCODING_AVAILABLE_RESOLUTIONS, mismatch on: "
-                    f"{resolutions ^ profile_resolutions}"
-                )
-
-        missing = [
-            name
-            for name, value in (
-                (
-                    "RECORDING_ENCODING_DEFAULT_RESOLUTION",
-                    cls.RECORDING_ENCODING_DEFAULT_RESOLUTION,
-                ),
-                (
-                    "RECORDING_ENCODING_DEFAULT_PROFILE",
-                    cls.RECORDING_ENCODING_DEFAULT_PROFILE,
-                ),
-            )
-            if not value
-        ]
-        if missing:
-            warnings.warn(
-                f"{' and '.join(missing)} not set; recordings will use LiveKit's "
-                "built-in encoding preset instead of a custom default encoding.",
-                UserWarning,
-                stacklevel=2,
-            )
-            return
-
-        if cls.RECORDING_ENCODING_DEFAULT_RESOLUTION not in resolutions:
-            raise ValueError(
-                "RECORDING_ENCODING_DEFAULT_RESOLUTION "
-                f"'{cls.RECORDING_ENCODING_DEFAULT_RESOLUTION}' is not a key of "
-                f"RECORDING_ENCODING_AVAILABLE_RESOLUTIONS ({sorted(resolutions)})."
-            )
-        if cls.RECORDING_ENCODING_DEFAULT_PROFILE not in profiles:
-            raise ValueError(
-                "RECORDING_ENCODING_DEFAULT_PROFILE "
-                f"'{cls.RECORDING_ENCODING_DEFAULT_PROFILE}' is not a key of "
-                f"RECORDING_ENCODING_AVAILABLE_PROFILES ({sorted(profiles)})."
-            )
-
     @classmethod
     def post_setup(cls):
         """Post setup configuration.
@@ -1245,8 +1134,6 @@ class Base(Configuration):
                 "FILE_UPLOAD_TMP_PATH cannot be the same as FILE_UPLOAD_PATH"
             )
 
-        cls._check_recording_encoding_maps()
-
         if (
             cls.SUMMARY_SERVICE_VERSION == 1
             and cls.SUMMARY_SERVICE_ENDPOINT is not None

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

@@ -28,6 +28,7 @@ import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
 import { ParticipantTileFocus } from './ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
+import { ScreenShareZoomableVideo } from './ScreenShareZoomableVideo'
 import { ParticipantName } from './ParticipantName'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
@@ -55,6 +56,8 @@ interface ParticipantTileExtendedProps extends ParticipantTileProps {
   disableTileControls?: boolean
 }
 
+const MOUSE_IDLE_TIME = 3000
+
 export const ParticipantTile: (
   props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
@@ -109,14 +112,43 @@ export const ParticipantTile: (
   })
 
   const isScreenShare = trackReference.source != Track.Source.Camera
+  const isRemoteScreenShare =
+    isScreenShare && !trackReference.participant.isLocal
   const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)
 
+  // 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 participantName = getParticipantName(trackReference.participant)
   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>) => {
@@ -134,30 +166,63 @@ 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) {
+    if (isRemoteScreenShare) {
+      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={ref} style={{ position: 'relative' }} {...interactiveProps}>
+    <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}
+    >
       <TrackRefContextIfNeeded trackRef={trackReference}>
         <ParticipantContextIfNeeded participant={trackReference.participant}>
           <FullScreenShareWarning trackReference={trackReference} />
           {children ?? (
             <>
-              {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}
-                  />
-                )
-              )}
+              {trackMedia}
               <div className="lk-participant-placeholder">
                 <ParticipantPlaceholder
                   participant={trackReference.participant}
@@ -236,7 +301,7 @@ export const ParticipantTile: (
           {!disableMetadata && !disableTileControls && (
             <ParticipantTileFocus
               trackRef={trackReference}
-              hasKeyboardFocus={hasKeyboardFocus}
+              isVisible={isOverlayVisible}
             />
           )}
         </ParticipantContextIfNeeded>

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

@@ -2,7 +2,6 @@ import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import {
-  RiFullscreenLine,
   RiImageCircleAiFill,
   RiMicLine,
   RiMicOffLine,
@@ -15,41 +14,13 @@ import {
 } from '@livekit/components-react'
 import { useTranslation } from 'react-i18next'
 import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { useFullScreen } from '../hooks/useFullScreen'
 import { type Participant, Track } from 'livekit-client'
 import { MuteAlertDialog } from './MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'
 
-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>
-  )
-}
-
 const FocusButton = ({
   trackRef,
 }: {
@@ -127,26 +98,17 @@ const MuteButton = ({ participant }: { participant: Participant }) => {
   )
 }
 
-const MOUSE_IDLE_TIME = 3000
-
 export const ParticipantTileFocus = ({
   trackRef,
-  hasKeyboardFocus,
+  isVisible,
 }: {
   trackRef: TrackReferenceOrPlaceholder
-  hasKeyboardFocus: boolean
+  isVisible: boolean
 }) => {
-  const [hovered, setHovered] = useState(false)
   const [opacity, setOpacity] = useState(0)
 
-  const idleTimerRef = useRef<number | null>(null)
-  const [isIdleRef, setIsIdleRef] = useState(false)
-
-  const isVisible = hasKeyboardFocus || (hovered && !isIdleRef)
-
   useEffect(() => {
     if (isVisible) {
-      // Wait for next frame to ensure element is mounted
       requestAnimationFrame(() => {
         setOpacity(0.6)
       })
@@ -155,24 +117,14 @@ export const ParticipantTileFocus = ({
     }
   }, [isVisible])
 
-  const handleMouseMove = () => {
-    if (idleTimerRef.current) {
-      window.clearTimeout(idleTimerRef.current)
-    }
-    idleTimerRef.current = window.setTimeout(() => {
-      setIsIdleRef(true)
-    }, MOUSE_IDLE_TIME)
-    setIsIdleRef(false)
-  }
-
   const participant = trackRef.participant
 
   const isScreenShare = trackRef.source == Track.Source.ScreenShare
-  const isLocal = trackRef.participant.isLocal
 
   const canMute = useCanMute(participant)
 
   return (
+    // Pointer-events: none so this overlay doesn't block the zoom surface below.
     <div
       className={css({
         position: 'absolute',
@@ -183,11 +135,9 @@ export const ParticipantTileFocus = ({
         alignItems: 'center',
         width: '100%',
         height: '100%',
+        pointerEvents: 'none',
       })}
       aria-hidden={!isVisible}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      onMouseMove={handleMouseMove}
     >
       {isVisible && (
         <div
@@ -197,6 +147,7 @@ export const ParticipantTileFocus = ({
             zIndex: 1,
             borderRadius: '0.25rem',
             display: 'flex',
+            pointerEvents: 'auto',
             _hover: {
               opacity: '0.95 !important',
             },
@@ -213,7 +164,7 @@ export const ParticipantTileFocus = ({
             })}
           >
             <FocusButton trackRef={trackRef} />
-            {!isScreenShare ? (
+            {!isScreenShare && (
               <>
                 {participant.isLocal ? (
                   <EffectsButton />
@@ -221,8 +172,6 @@ export const ParticipantTileFocus = ({
                   canMute && <MuteButton participant={participant} />
                 )}
               </>
-            ) : (
-              !isLocal && <ZoomButton trackRef={trackRef} />
             )}
           </HStack>
         </div>

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

@@ -0,0 +1,26 @@
+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'

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

@@ -0,0 +1,203 @@
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { Button } from '@/primitives'
+import {
+  RiCollapseDiagonalLine,
+  RiExpandDiagonalLine,
+  RiFullscreenExitLine,
+  RiZoomInLine,
+  RiZoomOutLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+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 [isFullscreen, setIsFullscreen] = useState(false)
+  // Tracks whether this tile's container triggered fullscreen (vs another share's).
+  const wasThisTileFullscreen = useRef(false)
+  const [isFullscreenAvailable] = useState(
+    () => typeof document !== 'undefined' && 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])
+
+  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 wheelShortcutVisual = isMacintosh() ? '⌘+scroll' : 'Ctrl+scroll'
+
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        bottom: '12px',
+        right: '12px',
+        zIndex: 2,
+        pointerEvents: 'auto',
+      })}
+    >
+      <HStack
+        gap={0}
+        role="toolbar"
+        aria-label={t('toolbarLabel')}
+        className={css({
+          backgroundColor: 'primaryDark.50',
+          borderRadius: '2rem',
+          padding: '0.5rem',
+          alignItems: 'center',
+          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}
+        >
+          <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: wheelShortcutVisual,
+            })}
+            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
+          size="sm"
+          variant="primaryTextDark"
+          square
+          tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcutVisual })}
+          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>
+        )}
+      </HStack>
+    </div>
+  )
+}

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

@@ -0,0 +1,104 @@
+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',
+          touchAction: 'none',
+        })}
+        {...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}
+      />
+    </>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
+import { RiCollapseDiagonalLine, RiExpandDiagonalLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
@@ -20,12 +20,12 @@ export const FullScreenMenuItem = () => {
     >
       {isCurrentlyFullscreen ? (
         <>
-          <RiFullscreenExitLine size={20} />
+          <RiCollapseDiagonalLine size={20} />
           {t('fullscreen.exit')}
         </>
       ) : (
         <>
-          <RiFullscreenLine size={20} />
+          <RiExpandDiagonalLine size={20} />
           {t('fullscreen.enter')}
         </>
       )}

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

@@ -0,0 +1,260 @@
+import { useCallback, useRef, useSyncExternalStore } from 'react'
+import { useMove } from 'react-aria'
+import type { MoveMoveEvent } from '@react-types/shared'
+import {
+  MIN_ZOOM,
+  PAN_STEP,
+  WHEEL_ZOOM_SPEED,
+  ZOOM_STEP,
+  type PanOffset,
+  type ZoomSnapshot,
+  buildZoomSnapshot,
+  clampPan,
+  clampZoom,
+  getCursorFromZoomState,
+  getCursorPercentsFromWheelEvent,
+  getPanDeltaPercentsFromMove,
+  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).
+ * Ctrl/Cmd + wheel zoom is a native listener (must be non-passive to
+ * preventDefault and block browser page zoom).
+ * 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((transition: boolean) => {
+    const el = transformElRef.current
+    if (!el) return
+    el.style.transform = getZoomTransform(zoomRef.current, panRef.current)
+    el.style.transition = transition ? 'transform 150ms ease-out' : 'none'
+  }, [])
+
+  const applyCursor = useCallback(() => {
+    const el = surfaceElRef.current
+    if (!el) return
+    el.style.cursor = getCursorFromZoomState(
+      zoomRef.current,
+      draggingRef.current
+    )
+  }, [])
+
+  const zoomIn = useCallback(() => {
+    const next = clampZoom(zoomRef.current + ZOOM_STEP)
+    zoomRef.current = next
+    panRef.current = clampPan(panRef.current, next)
+    applyTransform(true)
+    applyCursor()
+    flush()
+  }, [applyTransform, applyCursor, flush])
+
+  const zoomOut = useCallback(() => {
+    const next = clampZoom(zoomRef.current - ZOOM_STEP)
+    zoomRef.current = next
+    panRef.current =
+      next <= MIN_ZOOM ? { x: 0, y: 0 } : clampPan(panRef.current, next)
+    applyTransform(true)
+    applyCursor()
+    flush()
+  }, [applyTransform, applyCursor, flush])
+
+  const resetZoom = useCallback(() => {
+    zoomRef.current = MIN_ZOOM
+    panRef.current = { x: 0, y: 0 }
+    applyTransform(true)
+    applyCursor()
+    flush()
+  }, [applyTransform, applyCursor, flush])
+
+  // Must be attached with { passive: false } so preventDefault() blocks
+  // the browser's native Ctrl+scroll page zoom.
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (!e.ctrlKey && !e.metaKey) return
+
+      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,
+        })
+      }
+
+      applyTransform(false)
+      applyCursor()
+      flush()
+    },
+    [applyTransform, applyCursor, flush]
+  )
+
+  // 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
+      )
+
+      applyTransform(false)
+      // 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(true)
+      applyCursor()
+      flush()
+    },
+  })
+
+  const panBy = useCallback(
+    (dx: number, dy: number) => {
+      panRef.current = clampPan(
+        { x: panRef.current.x + dx, y: panRef.current.y + dy },
+        zoomRef.current
+      )
+      applyTransform(true)
+      flush()
+    },
+    [applyTransform, flush]
+  )
+
+  // 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
+
+      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,
+    handleWheel,
+    handleKeyDown,
+  }
+}

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

@@ -0,0 +1,115 @@
+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 WHEEL_ZOOM_FOCUS_BLEND = 0.3
+export const PAN_STEP = 5
+export const PAN_CLAMP_HALF = 50
+
+export interface PanOffset {
+  x: number
+  y: number
+}
+
+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 content edge never passes the viewport center.
+export const clampPan = (pan: PanOffset, zoom: number): PanOffset => {
+  const maxPan = ((zoom - 1) / zoom) * PAN_CLAMP_HALF
+  return {
+    x: Math.max(-maxPan, Math.min(maxPan, pan.x)),
+    y: Math.max(-maxPan, Math.min(maxPan, pan.y)),
+  }
+}
+
+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'
+}
+
+// Blend the current pan toward the cursor position so the zoom "tracks" the pointer.
+export const getWheelPanOffset = ({
+  pan,
+  prevZoom,
+  nextZoom,
+  cursorXPercent,
+  cursorYPercent,
+}: {
+  pan: PanOffset
+  prevZoom: number
+  nextZoom: number
+  cursorXPercent: number
+  cursorYPercent: number
+}): PanOffset => {
+  const zoomRatio = nextZoom / prevZoom
+  return clampPan(
+    {
+      x:
+        pan.x +
+        (cursorXPercent - pan.x) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
+      y:
+        pan.y +
+        (cursorYPercent - pan.y) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
+    },
+    nextZoom
+  )
+}
+
+// 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 - PAN_CLAMP_HALF,
+    cursorYPercent:
+      ((e.clientY - rect.top) / rect.height) * 100 - PAN_CLAMP_HALF,
+  }
+}
+
+// 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,
+  }
+}

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

@@ -668,6 +668,24 @@
     "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 Pfeiltasten zum Navigieren verwenden.",
+    "fullScreenEntered": "Vollbild aktiviert",
+    "fullScreenExited": "Vollbild deaktiviert"
+  },
   "shortcutsPanel": {
     "title": "Tastenkürzel",
     "categories": {

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

@@ -667,6 +667,24 @@
     "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 use arrow keys to navigate.",
+    "fullScreenEntered": "Full screen enabled",
+    "fullScreenExited": "Full screen disabled"
+  },
   "shortcutsPanel": {
     "title": "Keyboard shortcuts",
     "categories": {

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

@@ -667,6 +667,24 @@
     "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 utilisez les touches fléchées pour naviguer.",
+    "fullScreenEntered": "Plein écran activé",
+    "fullScreenExited": "Plein écran désactivé"
+  },
   "shortcutsPanel": {
     "title": "Raccourcis clavier",
     "categories": {

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

@@ -667,6 +667,24 @@
     "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 gebruik de pijltjestoetsen om te navigeren.",
+    "fullScreenEntered": "Volledig scherm ingeschakeld",
+    "fullScreenExited": "Volledig scherm uitgeschakeld"
+  },
   "shortcutsPanel": {
     "title": "Sneltoetsen",
     "categories": {