add transcoded live streams and stream ordering for auto mode

Cameras can now add lower quality live streams that go2rtc transcodes to H.264 on demand. `live.transcode` takes a source stream and a list of heights and bitrates, and each quality becomes a `{camera}_transcode_{height}p` stream. The config validator adds them to `live.streams` without moving any the user already placed, and drops them when transcoding is disabled or a height changes. `create_config.py` writes them into go2rtc's generated config at startup, and saving the config or deleting a camera syncs them through go2rtc's API, so no restart is needed. They use `#hardware`, so go2rtc picks a hardware encoder and falls back to the CPU when there isn't one.

The Live playback settings stream list can be reordered by drag, since its order is the auto ladder. Auto order sorts it by bitrate, measuring native streams through a new admin-only `/go2rtc/streams/{name}/bitrate` endpoint and using the configured bitrate for transcoded ones. A pure reorder wasn't saved before because RJSF, the settings form, and `update_yaml` all ignore map key order. Sections can now mark a map with `orderedMaps`, which sends the whole map with `replace_paths` so `config_set` rewrites it in order.

Transcoded streams aren't in `go2rtc.streams`, which only lists yaml streams, so the frontend treated them as not restreamed and fell back to jsmpeg. Every restream check now goes through `isRestreamedStream`.

Auto treated any stall with no bytes in the last 2 seconds as a dead camera and handed it to the error fallback, which went straight to jsmpeg. Heavy congestion can stop delivery completely, so congested viewers skipped every lower stream. Auto now declines only when stats show the camera offline, and a stall on a live camera steps down. The stream picker also has a Try highest quality button that sends auto back to the top stream.

docker/main/rootfs/usr/local/go2rtc/create_config.py

@@ -15,6 +15,7 @@ from frigate.const import (
 )
 from frigate.ffmpeg_presets import parse_preset_hardware_acceleration_encode
 from frigate.util.config import find_config_file, resolve_ffmpeg_path
+from frigate.util.live_streams import raw_transcode_streams
 from frigate.util.services import (
     is_go2rtc_arbitrary_exec_allowed,
     is_restricted_go2rtc_source,
@@ -174,6 +175,17 @@ for name in list(go2rtc_config.get("streams", {})):
             del go2rtc_config["streams"][name]
             continue
 
+# add transcoded live streams; a user stream with the same name wins here and
+# fails Frigate's config validation
+transcoded_streams = raw_transcode_streams(config)
+
+if transcoded_streams:
+    if go2rtc_config.get("streams") is None:
+        go2rtc_config["streams"] = {}
+
+    for name, source in transcoded_streams.items():
+        go2rtc_config["streams"].setdefault(name, source)
+
 # add birdseye restream stream if enabled
 if config.get("birdseye", {}).get("restream", False):
     birdseye: dict[str, Any] = config.get("birdseye")

docs/docs/configuration/advanced/reference.md

@@ -900,6 +900,21 @@ live:
   streams:
     main_stream: main_stream_name
     sub_stream: sub_stream_name
+  # Optional: Lower-quality live streams transcoded by go2rtc while someone is watching.
+  # NOTE: Set at the camera level only.
+  transcode:
+    # Optional: Enable transcoded streams (default: shown below)
+    enabled: False
+    # Optional: go2rtc stream to transcode (default: the first live stream)
+    source: main_stream_name
+    # Optional: One transcoded stream per quality (default: shown below)
+    qualities:
+      - height: 720
+        bitrate: 1200
+      - height: 480
+        bitrate: 500
+      - height: 360
+        bitrate: 250
   # Optional: Set the height of the jsmpeg stream. (default: 720)
   # This must be less than or equal to the height of the detect stream. Lower resolutions
   # reduce bandwidth required for viewing the jsmpeg stream. Width is computed to match known aspect ratio.

docs/docs/configuration/live.md

@@ -92,7 +92,7 @@ go2rtc:
 
 ### Setting Streams For Live UI
 
-You can configure Frigate to allow manual selection of the stream you want to view in the Live UI. For example, you may want to view your camera's substream on mobile devices, but the full resolution stream on desktop devices. Setting the streams list will populate a dropdown in the UI's Live view that allows you to choose between the streams. This stream setting is _per device_ and is saved in your browser's local storage.
+You can configure Frigate to allow manual selection of the stream you want to view in the Live UI. For example, you may want to view your camera's substream on mobile devices, but the full resolution stream on desktop devices. Setting the streams list will populate a dropdown in the UI's Live view that allows you to choose between the streams. This stream setting is _per device_ and is saved in your browser's local storage. When a camera has more than one stream, the dropdown also offers **Auto**, which is used until you pick a specific stream. Auto starts on the first stream, steps down the list when your connection can't keep up, and steps back up when it recovers. To retry the top stream right away, select **Try highest quality** under the stream picker. List streams from highest to lowest quality, and avoid names that are plain numbers (such as `720`), which the browser sorts ahead of the others. In the UI, drag streams to reorder them, or use **Auto order** to sort them by measured bitrate.
 
 Additionally, when creating and editing camera groups in the UI, you can choose the stream you want to use for your camera group's Live dashboard.
 
@@ -158,6 +158,26 @@ cameras:
 </TabItem>
 </ConfigTabs>
 
+### Transcoded streams
+
+When a camera has no suitable sub stream, Frigate can add lower-quality streams that go2rtc transcodes to H.264 while someone is watching. They appear in the stream list like any other stream, so Auto mode can step down to them. Enable them under <NavPath path="Settings > Camera configuration > Live playback" />, or in YAML:
+
+```yaml
+cameras:
+  test_cam:
+    live:
+      transcode:
+        enabled: true
+        source: test_cam # optional, defaults to the first live stream
+        qualities:
+          - height: 720
+            bitrate: 1200 # kbps
+          - height: 480
+            bitrate: 500
+```
+
+Each quality becomes a go2rtc stream named `<camera>_transcode_<height>p`. go2rtc picks a hardware encoder automatically and falls back to the CPU, which costs CPU for each transcode while it is being watched. Check go2rtc's `api/ffmpeg/hardware` page to see which encoder it found. Using a sub stream as the `source` lowers the cost.
+
 ### WebRTC extra configuration:
 
 WebRTC works by creating a TCP or UDP connection on port `8555`. However, it requires additional configuration:
@@ -363,6 +383,13 @@ When your browser runs into problems playing back your camera streams, it will l
     - `Safari reported InvalidStateError.`
     - `Safari reported decoding errors.`
 
+- **mse-codec**
+  - What it means: go2rtc has no codec for this stream that the browser can play.
+  - What to try: Pick a stream with a codec the browser supports (H.264 is the most compatible), or use a browser that supports the stream's codec. In Auto, Frigate skips this stream for the rest of the session.
+
+  - Possible console messages from the player code:
+    - `mse: streams: codecs not matched: ...`
+
 - **stalled**
   - What it means: Playback has stalled because the player has fallen too far behind live (extended buffering or no data arriving).
   - What to try: This is usually indicative of the browser struggling to decode too many high-resolution streams at once. Try selecting a lower-bandwidth stream (substream), reduce the number of live streams open, improve the network connection, or lower the camera resolution. Also check your camera's keyframe (I-frame) interval: shorter intervals make playback start and recover faster. You can also try increasing the timeout value in <NavPath path="Settings > UI" /> .

docs/static/frigate-api.yaml

@@ -412,6 +412,39 @@ paths:
       security:
         - frigateAdminAuth: []
       x-required-role: admin
+  /go2rtc/streams/{stream_name}/bitrate:
+    get:
+      tags:
+        - Camera
+      summary: Go2Rtc Stream Bitrate
+      description: |-
+        **Access:** Admin role required.
+
+        Measure a go2rtc stream's bitrate over a few seconds.
+      operationId: 
+        go2rtc_stream_bitrate_go2rtc_streams__stream_name__bitrate_get
+      parameters:
+        - name: stream_name
+          in: path
+          required: true
+          schema:
+            type: string
+            title: Stream Name
+      responses:
+        '200':
+          description: Successful Response
+          content:
+            application/json:
+              schema: {}
+        '422':
+          description: Validation Error
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/HTTPValidationError'
+      security:
+        - frigateAdminAuth: []
+      x-required-role: admin
   /ffprobe:
     get:
       tags:
@@ -7731,6 +7764,11 @@ components:
           type: boolean
           title: Skip Save
           default: false
+        replace_paths:
+          items:
+            type: string
+          type: array
+          title: Replace Paths
       type: object
       title: AppConfigSetBody
     AppPostLoginBody:

frigate/api/app.py

@@ -63,6 +63,7 @@ from frigate.util.builtin import (
     flatten_config_data,
     load_labels,
     process_config_query_string,
+    split_config_key_path,
     update_yaml_file_bulk,
 )
 from frigate.util.config import (
@@ -70,6 +71,10 @@ from frigate.util.config import (
     find_config_file,
     redact_credential,
 )
+from frigate.util.live_streams import (
+    generated_transcode_streams,
+    sync_transcode_streams,
+)
 from frigate.util.object_names import get_categorized_object_names
 from frigate.util.schema import get_config_schema
 from frigate.util.services import (
@@ -810,6 +815,17 @@ def _config_set_in_memory(request: Request, body: AppConfigSetBody) -> JSONRespo
         )
 
 
+def _config_path_exists(data: Any, key_path: str) -> bool:
+    """Return whether a dotted config path is present in parsed yaml."""
+    for key in split_config_key_path(key_path):
+        if not isinstance(data, dict) or key not in data:
+            return False
+
+        data = data[key]
+
+    return True
+
+
 @router.put("/config/set", dependencies=[Depends(require_role(["admin"]))])
 def config_set(request: Request, body: AppConfigSetBody):
     config_file = find_config_file()
@@ -864,6 +880,19 @@ def config_set(request: Request, body: AppConfigSetBody):
                         status_code=400,
                     )
 
+                # delete replaced paths first so their maps are rewritten in
+                # the order sent; update_yaml would otherwise keep old order
+                if body.replace_paths:
+                    old_yaml = ruamel.yaml.YAML(typ="safe").load(old_raw_config) or {}
+                    updates = {
+                        **{
+                            path: ""
+                            for path in body.replace_paths
+                            if _config_path_exists(old_yaml, path)
+                        },
+                        **updates,
+                    }
+
                 # apply all updates in a single operation
                 update_yaml_file_bulk(config_file, updates)
 
@@ -927,9 +956,15 @@ def config_set(request: Request, body: AppConfigSetBody):
             if request.app.dispatcher is not None:
                 request.app.dispatcher.clear_runtime_state_for_yaml_keys(updates.keys())
 
+            go2rtc_synced = True
+
             if body.requires_restart == 0 or body.update_topic:
                 old_config: FrigateConfig = request.app.frigate_config
                 swap_runtime_config(request.app, config)
+                go2rtc_synced = sync_transcode_streams(
+                    generated_transcode_streams(old_config),
+                    generated_transcode_streams(config),
+                )
 
                 if body.update_topic:
                     if body.update_topic.startswith("config/cameras/"):
@@ -989,6 +1024,7 @@ def config_set(request: Request, body: AppConfigSetBody):
                             if body.requires_restart == 0
                             else "Config successfully updated, restart to apply"
                         ),
+                        "go2rtc_synced": go2rtc_synced,
                     }
                 ),
                 status_code=200,

frigate/api/camera.py

@@ -39,6 +39,11 @@ from frigate.util.builtin import clean_camera_user_pass, get_record_segment_time
 from frigate.util.camera_cleanup import cleanup_camera_db, cleanup_camera_files
 from frigate.util.config import find_config_file
 from frigate.util.image import run_ffmpeg_snapshot
+from frigate.util.live_streams import (
+    generated_transcode_streams,
+    measure_stream_bitrate,
+    sync_transcode_streams,
+)
 from frigate.util.services import (
     analyze_record_keyframes,
     ffprobe_stream,
@@ -248,6 +253,34 @@ def go2rtc_delete_stream(stream_name: str):
         )
 
 
+@router.get(
+    "/go2rtc/streams/{stream_name}/bitrate",
+    dependencies=[Depends(require_role(["admin"]))],
+)
+async def go2rtc_stream_bitrate(request: Request, stream_name: str):
+    """Measure a go2rtc stream's bitrate over a few seconds."""
+    config: FrigateConfig = request.app.frigate_config
+    known = set(config.go2rtc.model_dump().get("streams") or {}) | set(
+        generated_transcode_streams(config)
+    )
+
+    if stream_name not in known:
+        return JSONResponse(
+            content={"success": False, "message": "Unknown stream"},
+            status_code=404,
+        )
+
+    kbps = await asyncio.to_thread(measure_stream_bitrate, stream_name)
+
+    if kbps is None:
+        return JSONResponse(
+            content={"success": False, "message": "Stream sent no data"},
+            status_code=502,
+        )
+
+    return JSONResponse(content={"success": True, "kbps": round(kbps)})
+
+
 @router.get("/ffprobe", dependencies=[Depends(require_role(["admin"]))])
 def ffprobe(request: Request, paths: str = "", detailed: bool = False):
     path_param = paths
@@ -1342,6 +1375,12 @@ async def delete_camera(
     except Exception:
         logger.debug("Failed to remove go2rtc stream for %s", camera_name)
 
+    await asyncio.to_thread(
+        sync_transcode_streams,
+        generated_transcode_streams(frigate_config),
+        generated_transcode_streams(request.app.frigate_config),
+    )
+
     return JSONResponse(
         content={
             "success": True,

frigate/api/defs/request/app_body.py

@@ -10,6 +10,8 @@ class AppConfigSetBody(BaseModel):
     update_topic: str | None = None
     config_data: dict[str, Any] | None = None
     skip_save: bool = False
+    # paths rewritten whole, so a map saves in the order sent
+    replace_paths: list[str] = Field(default_factory=list)
 
 
 class GenAIProbeBody(BaseModel):

frigate/config/camera/live.py

@@ -1,8 +1,57 @@
-from pydantic import Field
+from pydantic import Field, field_validator
+
+from frigate.util.live_streams import DEFAULT_TRANSCODE_QUALITIES
 
 from ..base import FrigateBaseModel
 
-__all__ = ["CameraLiveConfig"]
+__all__ = ["CameraLiveConfig", "LiveTranscodeConfig", "LiveTranscodeQualityConfig"]
+
+
+class LiveTranscodeQualityConfig(FrigateBaseModel):
+    height: int = Field(
+        ge=144,
+        le=2160,
+        title="Height",
+        description="Output height in pixels; width follows the source aspect ratio.",
+    )
+    bitrate: int = Field(
+        ge=64,
+        title="Bitrate",
+        description="Target and maximum video bitrate in kbps.",
+    )
+
+
+class LiveTranscodeConfig(FrigateBaseModel):
+    enabled: bool = Field(
+        default=False,
+        title="Enable transcoded streams",
+        description="Add lower-quality live streams that go2rtc transcodes in real time while someone is watching.",
+    )
+    source: str | None = Field(
+        default=None,
+        title="Source stream",
+        description="go2rtc stream to transcode. Defaults to the first live stream.",
+    )
+    qualities: list[LiveTranscodeQualityConfig] = Field(
+        default_factory=lambda: [
+            LiveTranscodeQualityConfig(**quality)
+            for quality in DEFAULT_TRANSCODE_QUALITIES
+        ],
+        title="Qualities",
+        description="One transcoded stream is added per quality.",
+    )
+
+    @field_validator("qualities")
+    @classmethod
+    def validate_unique_heights(
+        cls, qualities: list[LiveTranscodeQualityConfig]
+    ) -> list[LiveTranscodeQualityConfig]:
+        heights = [quality.height for quality in qualities]
+
+        if len(heights) != len(set(heights)):
+            raise ValueError("Transcoded stream heights must be unique.")
+
+        return qualities
 
 
 class CameraLiveConfig(FrigateBaseModel):
@@ -11,6 +60,11 @@ class CameraLiveConfig(FrigateBaseModel):
         title="Live stream names",
         description="Mapping of configured stream names to restream/go2rtc names used for live playback.",
     )
+    transcode: LiveTranscodeConfig = Field(
+        default_factory=LiveTranscodeConfig,
+        title="Transcoded streams",
+        description="Lower-quality live streams transcoded on demand by go2rtc.",
+    )
     height: int = Field(
         default=720,
         title="Live height",

frigate/config/config.py

@@ -35,6 +35,12 @@ from frigate.util.config import (
     migrate_frigate_config,
 )
 from frigate.util.image import create_mask
+from frigate.util.live_streams import (
+    default_transcode_source,
+    is_transcode_stream_name,
+    transcode_stream_name,
+    transcode_streams,
+)
 from frigate.util.services import auto_detect_hwaccel
 
 from .auth import AuthConfig
@@ -282,11 +288,78 @@ def verify_config_roles(camera_config: CameraConfig) -> None:
         )
 
 
+def apply_live_transcode_streams(
+    frigate_config: FrigateConfig, camera_config: CameraConfig
+) -> None:
+    """Fold a camera's transcoded streams into its live stream list.
+
+    Enabled qualities missing from live.streams are appended, and entries the
+    user placed keep their position. Transcoded names that are no longer
+    generated are dropped unless they name a real go2rtc stream.
+    """
+    live = camera_config.live
+    transcode = live.transcode
+    go2rtc_streams = frigate_config.go2rtc.model_dump().get("streams") or {}
+    generated: dict[str, str] = {}
+
+    if transcode.enabled:
+        if transcode.source is None:
+            transcode.source = default_transcode_source(
+                camera_config.name, live.streams
+            )
+
+        if transcode.source not in go2rtc_streams:
+            raise ValueError(
+                f"Camera {camera_config.name} has transcoded streams enabled, but its source {transcode.source} is not a go2rtc stream."
+            )
+
+        generated = transcode_streams(
+            camera_config.name,
+            transcode.source,
+            [quality.model_dump() for quality in transcode.qualities],
+        )
+
+        for name in generated:
+            if name in go2rtc_streams:
+                raise ValueError(
+                    f"Camera {camera_config.name} generates transcoded stream {name}, which collides with a go2rtc stream of the same name."
+                )
+
+    streams = {
+        label: name
+        for label, name in live.streams.items()
+        if name in generated
+        or name in go2rtc_streams
+        or not is_transcode_stream_name(camera_config.name, name)
+    }
+    placed = set(streams.values())
+
+    for quality in transcode.qualities if transcode.enabled else []:
+        name = transcode_stream_name(camera_config.name, quality.height)
+
+        if name in placed:
+            continue
+
+        label = f"{quality.height}p"
+
+        if label in streams:
+            raise ValueError(
+                f"Camera {camera_config.name} already has a live stream named {label}; rename it or place the transcoded stream under another name."
+            )
+
+        streams[label] = name
+
+    live.streams = streams
+
+
 def verify_valid_live_stream_names(
     frigate_config: FrigateConfig, camera_config: CameraConfig
 ) -> ValueError | None:
     """Verify that a restream exists to use for live view."""
     for _, stream_name in camera_config.live.streams.items():
+        if is_transcode_stream_name(camera_config.name, stream_name):
+            continue
+
         if (
             stream_name
             not in frigate_config.go2rtc.model_dump().get("streams", {}).keys()
@@ -978,6 +1051,8 @@ class FrigateConfig(FrigateBaseModel):
                 "face_recognition": ["enabled", "min_area"],
                 "lpr": ["enabled", "expire_time", "min_area", "enhancement"],
                 "audio_transcription": ["enabled", "live_enabled"],
+                # transcode is camera-level only
+                "live": ["streams", "height", "quality"],
             }
 
             for section in allowed_fields_map:
@@ -1206,6 +1281,8 @@ class FrigateConfig(FrigateBaseModel):
             if not camera_config.live.streams:
                 camera_config.live.streams = {name: name}
 
+            apply_live_transcode_streams(self, camera_config)
+
             # generate the ffmpeg commands
             camera_config.create_ffmpeg_cmds()
             self.cameras[name] = camera_config

frigate/test/http_api/test_http_config_set_live.py

@@ -0,0 +1,173 @@
+"""Tests for config_set live stream ordering and go2rtc transcode sync."""
+
+import os
+import tempfile
+from unittest.mock import MagicMock, Mock, patch
+
+import ruamel.yaml
+from fastapi import Request
+
+from frigate.api.auth import get_allowed_cameras_for_filter, get_current_user
+from frigate.api.fastapi_app import create_fastapi_app
+from frigate.config import FrigateConfig
+from frigate.config.camera.updater import CameraConfigUpdatePublisher
+from frigate.models import Event, Recordings, ReviewSegment
+from frigate.test.http_api.base_http_test import AuthTestClient, BaseTestHttp
+from frigate.util.live_streams import transcode_stream_source
+
+STREAMS_PATH = "cameras.front_door.live.streams"
+
+
+class TestConfigSetLiveStreams(BaseTestHttp):
+    def setUp(self):
+        super().setUp(models=[Event, Recordings, ReviewSegment])
+        self.minimal_config["go2rtc"] = {
+            "streams": {
+                "front_main": ["rtsp://10.0.0.1:554/main"],
+                "front_sub": ["rtsp://10.0.0.1:554/sub"],
+            }
+        }
+        self.minimal_config["cameras"]["front_door"]["live"] = {
+            "streams": {"Main": "front_main", "Sub": "front_sub"}
+        }
+
+    def _write_config_file(self) -> str:
+        yaml = ruamel.yaml.YAML()
+        f = tempfile.NamedTemporaryFile(mode="w", suffix=".yml", delete=False)
+        yaml.dump(self.minimal_config, f)
+        f.close()
+        self.addCleanup(os.unlink, f.name)
+        return f.name
+
+    def _read_config_file(self, path: str) -> dict:
+        with open(path) as f:
+            return ruamel.yaml.YAML(typ="safe").load(f)
+
+    def _app(self):
+        publisher = Mock(spec=CameraConfigUpdatePublisher)
+        publisher.publisher = MagicMock()
+        app = create_fastapi_app(
+            FrigateConfig(**self.minimal_config),
+            self.db,
+            None,
+            None,
+            None,
+            None,
+            None,
+            None,
+            publisher,
+            None,
+            enforce_default_admin=False,
+        )
+
+        async def mock_get_current_user(request: Request):
+            return {
+                "username": request.headers.get("remote-user"),
+                "role": request.headers.get("remote-role"),
+            }
+
+        async def mock_get_allowed_cameras_for_filter(request: Request):
+            return ["front_door"]
+
+        app.dependency_overrides[get_current_user] = mock_get_current_user
+        app.dependency_overrides[get_allowed_cameras_for_filter] = (
+            mock_get_allowed_cameras_for_filter
+        )
+        return app
+
+    def _save(self, app, live: dict, replace_paths: list[str] | None = None):
+        body = {
+            "config_data": {"cameras": {"front_door": {"live": live}}},
+            "requires_restart": 0,
+            "update_topic": "config/cameras/front_door/live",
+        }
+
+        if replace_paths is not None:
+            body["replace_paths"] = replace_paths
+
+        with AuthTestClient(app) as client:
+            return client.put("/config/set", json=body)
+
+    @patch("frigate.api.app.find_config_file")
+    def test_replace_paths_saves_map_in_sent_order(self, mock_find_config):
+        path = self._write_config_file()
+        mock_find_config.return_value = path
+
+        resp = self._save(
+            self._app(),
+            {"streams": {"Sub": "front_sub", "Main": "front_main"}},
+            [STREAMS_PATH],
+        )
+
+        self.assertEqual(resp.status_code, 200)
+        streams = self._read_config_file(path)["cameras"]["front_door"]["live"][
+            "streams"
+        ]
+        self.assertEqual(list(streams), ["Sub", "Main"])
+
+    @patch("frigate.api.app.find_config_file")
+    def test_without_replace_paths_order_is_kept(self, mock_find_config):
+        path = self._write_config_file()
+        mock_find_config.return_value = path
+
+        self._save(self._app(), {"streams": {"Sub": "front_sub", "Main": "front_main"}})
+
+        streams = self._read_config_file(path)["cameras"]["front_door"]["live"][
+            "streams"
+        ]
+        self.assertEqual(list(streams), ["Main", "Sub"])
+
+    @patch("frigate.api.app.find_config_file")
+    def test_replace_path_missing_from_yaml_is_skipped(self, mock_find_config):
+        del self.minimal_config["cameras"]["front_door"]["live"]
+        path = self._write_config_file()
+        mock_find_config.return_value = path
+
+        resp = self._save(
+            self._app(), {"streams": {"Main": "front_main"}}, [STREAMS_PATH]
+        )
+
+        self.assertEqual(resp.status_code, 200)
+        self.assertEqual(
+            self._read_config_file(path)["cameras"]["front_door"]["live"]["streams"],
+            {"Main": "front_main"},
+        )
+
+    @patch("frigate.api.app.sync_transcode_streams", return_value=True)
+    @patch("frigate.api.app.find_config_file")
+    def test_enabling_transcode_syncs_go2rtc(self, mock_find_config, mock_sync):
+        path = self._write_config_file()
+        mock_find_config.return_value = path
+
+        resp = self._save(
+            self._app(),
+            {
+                "transcode": {
+                    "enabled": True,
+                    "qualities": [{"height": 480, "bitrate": 500}],
+                }
+            },
+        )
+
+        self.assertEqual(resp.status_code, 200)
+        self.assertTrue(resp.json()["go2rtc_synced"])
+        mock_sync.assert_called_once_with(
+            {},
+            {
+                "front_door_transcode_480p": transcode_stream_source(
+                    "front_main", 480, 500
+                )
+            },
+        )
+
+    @patch("frigate.api.app.sync_transcode_streams", return_value=False)
+    @patch("frigate.api.app.find_config_file")
+    def test_sync_failure_is_reported(self, mock_find_config, mock_sync):
+        path = self._write_config_file()
+        mock_find_config.return_value = path
+
+        resp = self._save(self._app(), {"transcode": {"enabled": True}})
+
+        self.assertEqual(resp.status_code, 200)
+        self.assertTrue(resp.json()["success"])
+        self.assertFalse(resp.json()["go2rtc_synced"])

frigate/test/http_api/test_http_go2rtc_bitrate.py

@@ -0,0 +1,61 @@
+"""Tests for the go2rtc stream bitrate endpoint."""
+
+from unittest.mock import patch
+
+from frigate.test.http_api.base_http_test import AuthTestClient, BaseTestHttp
+
+
+class TestHttpGo2rtcBitrate(BaseTestHttp):
+    def setUp(self):
+        super().setUp([])
+        self.minimal_config["go2rtc"] = {
+            "streams": {"front_main": ["rtsp://10.0.0.1:554/main"]}
+        }
+        self.minimal_config["cameras"]["front_door"]["live"] = {
+            "streams": {"Main": "front_main"},
+            "transcode": {
+                "enabled": True,
+                "qualities": [{"height": 480, "bitrate": 500}],
+            },
+        }
+        self.app = self.create_app()
+
+    @patch("frigate.api.camera.measure_stream_bitrate", return_value=812.4)
+    def test_returns_rounded_kbps(self, mock_measure):
+        with AuthTestClient(self.app) as client:
+            resp = client.get("/go2rtc/streams/front_main/bitrate")
+
+        self.assertEqual(resp.status_code, 200)
+        self.assertEqual(resp.json()["kbps"], 812)
+        mock_measure.assert_called_once_with("front_main")
+
+    @patch("frigate.api.camera.measure_stream_bitrate", return_value=480.0)
+    def test_generated_streams_are_known(self, _):
+        with AuthTestClient(self.app) as client:
+            resp = client.get("/go2rtc/streams/front_door_transcode_480p/bitrate")
+
+        self.assertEqual(resp.status_code, 200)
+
+    @patch("frigate.api.camera.measure_stream_bitrate")
+    def test_unknown_stream_is_404(self, mock_measure):
+        with AuthTestClient(self.app) as client:
+            resp = client.get("/go2rtc/streams/rtsp_somewhere/bitrate")
+
+        self.assertEqual(resp.status_code, 404)
+        mock_measure.assert_not_called()
+
+    @patch("frigate.api.camera.measure_stream_bitrate", return_value=None)
+    def test_no_data_is_502(self, _):
+        with AuthTestClient(self.app) as client:
+            resp = client.get("/go2rtc/streams/front_main/bitrate")
+
+        self.assertEqual(resp.status_code, 502)
+
+    def test_viewer_is_forbidden(self):
+        with AuthTestClient(self.app) as client:
+            resp = client.get(
+                "/go2rtc/streams/front_main/bitrate",
+                headers={"remote-user": "viewer", "remote-role": "viewer"},
+            )
+
+        self.assertEqual(resp.status_code, 403)

frigate/test/test_live_streams.py

@@ -0,0 +1,397 @@
+"""Tests for Frigate-managed go2rtc live streams."""
+
+import unittest
+from unittest.mock import MagicMock, call, patch
+
+import requests
+from pydantic import ValidationError
+
+from frigate.config import FrigateConfig
+from frigate.util.live_streams import (
+    DEFAULT_TRANSCODE_QUALITIES,
+    default_transcode_source,
+    generated_transcode_streams,
+    is_transcode_stream_name,
+    measure_stream_bitrate,
+    raw_transcode_streams,
+    sync_transcode_streams,
+    transcode_stream_name,
+    transcode_stream_source,
+)
+
+
+class TestTranscodeNaming(unittest.TestCase):
+    def test_stream_name(self):
+        self.assertEqual(transcode_stream_name("front", 720), "front_transcode_720p")
+
+    def test_is_transcode_stream_name(self):
+        self.assertTrue(is_transcode_stream_name("front", "front_transcode_480p"))
+        self.assertFalse(is_transcode_stream_name("front", "front_sub"))
+        self.assertFalse(is_transcode_stream_name("front", "back_transcode_480p"))
+        self.assertFalse(is_transcode_stream_name("front", "front_transcode_480"))
+
+    def test_source_gives_each_ffmpeg_token_its_own_raw_param(self):
+        self.assertEqual(
+            transcode_stream_source("front", 480, 500),
+            "ffmpeg:front#video=h264#height=480#hardware#audio=copy"
+            "#raw=-b:v#raw=500k#raw=-maxrate#raw=500k#raw=-bufsize#raw=1000k",
+        )
+
+    def test_default_source_skips_transcoded_streams(self):
+        streams = {"Low": "front_transcode_360p", "Main": "front_main"}
+        self.assertEqual(default_transcode_source("front", streams), "front_main")
+        self.assertIsNone(default_transcode_source("front", {}))
+
+
+class TestRawTranscodeStreams(unittest.TestCase):
+    def test_defaults_to_camera_stream_and_default_qualities(self):
+        config = {"cameras": {"front": {"live": {"transcode": {"enabled": True}}}}}
+        streams = raw_transcode_streams(config)
+
+        self.assertEqual(
+            list(streams),
+            [
+                transcode_stream_name("front", q["height"])
+                for q in DEFAULT_TRANSCODE_QUALITIES
+            ],
+        )
+        self.assertTrue(streams["front_transcode_720p"].startswith("ffmpeg:front#"))
+
+    def test_uses_first_live_stream_and_explicit_qualities(self):
+        config = {
+            "cameras": {
+                "front": {
+                    "live": {
+                        "streams": {"Main": "front_main", "Sub": "front_sub"},
+                        "transcode": {
+                            "enabled": True,
+                            "qualities": [{"height": 540, "bitrate": 800}],
+                        },
+                    }
+                }
+            }
+        }
+
+        self.assertEqual(
+            raw_transcode_streams(config),
+            {"front_transcode_540p": transcode_stream_source("front_main", 540, 800)},
+        )
+
+    def test_explicit_source_wins(self):
+        config = {
+            "cameras": {
+                "front": {
+                    "live": {
+                        "streams": {"Main": "front_main"},
+                        "transcode": {
+                            "enabled": True,
+                            "source": "front_sub",
+                            "qualities": [{"height": 360, "bitrate": 250}],
+                        },
+                    }
+                }
+            }
+        }
+
+        self.assertEqual(
+            raw_transcode_streams(config)["front_transcode_360p"],
+            transcode_stream_source("front_sub", 360, 250),
+        )
+
+    def test_malformed_qualities_are_skipped(self):
+        config = {
+            "cameras": {
+                "front": {
+                    "live": {
+                        "transcode": {
+                            "enabled": True,
+                            "qualities": [
+                                {"height": 720},
+                                "480",
+                                {"height": 360, "bitrate": 250},
+                            ],
+                        }
+                    }
+                },
+                "back": {
+                    "live": {"transcode": {"enabled": True, "qualities": {"a": 1}}}
+                },
+            }
+        }
+
+        self.assertEqual(list(raw_transcode_streams(config)), ["front_transcode_360p"])
+
+    def test_disabled_or_missing_generates_nothing(self):
+        self.assertEqual(raw_transcode_streams({}), {})
+        self.assertEqual(
+            raw_transcode_streams({"cameras": {"front": {"live": {}}}}), {}
+        )
+        self.assertEqual(
+            raw_transcode_streams(
+                {"cameras": {"front": {"live": {"transcode": {"enabled": False}}}}}
+            ),
+            {},
+        )
+
+
+def camera_config(live: dict | None = None, go2rtc: dict | None = None) -> dict:
+    config = {
+        "mqtt": {"host": "mqtt"},
+        "go2rtc": {
+            "streams": go2rtc
+            or {
+                "front": ["rtsp://10.0.0.1:554/main"],
+                "front_sub": ["rtsp://10.0.0.1:554/sub"],
+            }
+        },
+        "cameras": {
+            "front": {
+                "ffmpeg": {
+                    "inputs": [
+                        {"path": "rtsp://10.0.0.1:554/main", "roles": ["detect"]}
+                    ]
+                },
+                "detect": {"height": 1080, "width": 1920, "fps": 5},
+            }
+        },
+    }
+
+    if live is not None:
+        config["cameras"]["front"]["live"] = live
+
+    return config
+
+
+class TestLiveTranscodeConfig(unittest.TestCase):
+    def streams(self, live: dict, go2rtc: dict | None = None) -> dict[str, str]:
+        config = FrigateConfig(**camera_config(live, go2rtc))
+        return config.cameras["front"].live.streams
+
+    def test_global_transcode_is_ignored(self):
+        config = camera_config()
+        config["live"] = {"transcode": {"enabled": True}}
+
+        streams = FrigateConfig(**config).cameras["front"].live.streams
+        self.assertEqual(streams, {"front": "front"})
+
+    def test_disabled_leaves_streams_alone(self):
+        self.assertEqual(self.streams({}), {"front": "front"})
+
+    def test_enabled_appends_default_qualities(self):
+        streams = self.streams({"transcode": {"enabled": True}})
+
+        self.assertEqual(
+            list(streams.items()),
+            [
+                ("front", "front"),
+                ("720p", "front_transcode_720p"),
+                ("480p", "front_transcode_480p"),
+                ("360p", "front_transcode_360p"),
+            ],
+        )
+
+    def test_source_resolves_to_first_live_stream(self):
+        config = FrigateConfig(
+            **camera_config(
+                {
+                    "streams": {"Sub": "front_sub", "Main": "front"},
+                    "transcode": {"enabled": True},
+                }
+            )
+        )
+
+        self.assertEqual(config.cameras["front"].live.transcode.source, "front_sub")
+
+    def test_placed_entries_keep_position_and_label(self):
+        streams = self.streams(
+            {
+                "streams": {
+                    "Main": "front",
+                    "Low": "front_transcode_480p",
+                    "Sub": "front_sub",
+                },
+                "transcode": {"enabled": True},
+            }
+        )
+
+        self.assertEqual(
+            list(streams.items()),
+            [
+                ("Main", "front"),
+                ("Low", "front_transcode_480p"),
+                ("Sub", "front_sub"),
+                ("720p", "front_transcode_720p"),
+                ("360p", "front_transcode_360p"),
+            ],
+        )
+
+    def test_disabling_drops_transcoded_entries(self):
+        streams = self.streams(
+            {
+                "streams": {"Main": "front", "720p": "front_transcode_720p"},
+                "transcode": {"enabled": False},
+            }
+        )
+
+        self.assertEqual(streams, {"Main": "front"})
+
+    def test_changed_height_drops_the_old_entry(self):
+        streams = self.streams(
+            {
+                "streams": {"Main": "front", "720p": "front_transcode_720p"},
+                "transcode": {
+                    "enabled": True,
+                    "qualities": [{"height": 540, "bitrate": 800}],
+                },
+            }
+        )
+
+        self.assertEqual(streams, {"Main": "front", "540p": "front_transcode_540p"})
+
+    def test_real_go2rtc_stream_with_transcode_name_is_kept(self):
+        streams = self.streams(
+            {"streams": {"Main": "front", "Odd": "front_transcode_720p"}},
+            go2rtc={
+                "front": ["rtsp://10.0.0.1:554/main"],
+                "front_transcode_720p": ["rtsp://10.0.0.1:554/odd"],
+            },
+        )
+
+        self.assertEqual(streams, {"Main": "front", "Odd": "front_transcode_720p"})
+
+    def test_generated_name_colliding_with_go2rtc_stream_fails(self):
+        with self.assertRaises(ValidationError):
+            self.streams(
+                {"transcode": {"enabled": True}},
+                go2rtc={
+                    "front": ["rtsp://10.0.0.1:554/main"],
+                    "front_transcode_720p": ["rtsp://10.0.0.1:554/odd"],
+                },
+            )
+
+    def test_source_must_be_a_go2rtc_stream(self):
+        with self.assertRaises(ValidationError):
+            self.streams({"transcode": {"enabled": True, "source": "missing"}})
+
+    def test_duplicate_heights_fail(self):
+        with self.assertRaises(ValidationError):
+            self.streams(
+                {
+                    "transcode": {
+                        "enabled": True,
+                        "qualities": [
+                            {"height": 480, "bitrate": 500},
+                            {"height": 480, "bitrate": 600},
+                        ],
+                    }
+                }
+            )
+
+    def test_label_collision_fails(self):
+        with self.assertRaises(ValidationError):
+            self.streams(
+                {
+                    "streams": {"Main": "front", "720p": "front_sub"},
+                    "transcode": {"enabled": True},
+                }
+            )
+
+
+class TestGeneratedTranscodeStreams(unittest.TestCase):
+    def test_collects_enabled_cameras(self):
+        config = FrigateConfig(
+            **camera_config(
+                {
+                    "transcode": {
+                        "enabled": True,
+                        "qualities": [{"height": 480, "bitrate": 500}],
+                    }
+                }
+            )
+        )
+
+        self.assertEqual(
+            generated_transcode_streams(config),
+            {"front_transcode_480p": transcode_stream_source("front", 480, 500)},
+        )
+
+    def test_disabled_is_empty(self):
+        self.assertEqual(
+            generated_transcode_streams(FrigateConfig(**camera_config())), {}
+        )
+
+
+class TestSyncTranscodeStreams(unittest.TestCase):
+    @patch("frigate.util.live_streams.requests.request")
+    def test_puts_added_and_changed_and_deletes_removed(self, mock_request):
+        mock_request.return_value = MagicMock(ok=True)
+
+        ok = sync_transcode_streams(
+            {"a": "src-a", "b": "src-b", "c": "src-c"},
+            {"a": "src-a", "b": "src-b2", "d": "src-d"},
+        )
+
+        self.assertTrue(ok)
+        url = "http://127.0.0.1:1984/api/streams"
+        self.assertCountEqual(
+            mock_request.call_args_list,
+            [
+                call("put", url, params={"name": "b", "src": "src-b2"}, timeout=5),
+                call("put", url, params={"name": "d", "src": "src-d"}, timeout=5),
+                call("delete", url, params={"src": "c"}, timeout=5),
+            ],
+        )
+
+    @patch("frigate.util.live_streams.requests.request")
+    def test_unchanged_makes_no_calls(self, mock_request):
+        self.assertTrue(sync_transcode_streams({"a": "x"}, {"a": "x"}))
+        mock_request.assert_not_called()
+
+    @patch("frigate.util.live_streams.requests.request")
+    def test_failure_returns_false_and_keeps_going(self, mock_request):
+        mock_request.side_effect = [
+            requests.ConnectionError("down"),
+            MagicMock(ok=True),
+        ]
+
+        self.assertFalse(sync_transcode_streams({}, {"a": "x", "b": "y"}))
+        self.assertEqual(mock_request.call_count, 2)
+
+
+class TestMeasureStreamBitrate(unittest.TestCase):
+    @patch("frigate.util.live_streams.time.monotonic")
+    @patch("frigate.util.live_streams.requests.get")
+    def test_skips_warmup_and_averages(self, mock_get, mock_monotonic):
+        response = MagicMock(ok=True)
+        response.iter_content.return_value = [b"x" * 1000] * 6
+        mock_get.return_value.__enter__.return_value = response
+        # first byte, warmup, window start, then counted chunks up to 6 s
+        mock_monotonic.side_effect = [0.0, 0.5, 1.0, 2.0, 4.0, 7.0]
+
+        kbps = measure_stream_bitrate("front", duration=6.0, warmup=1.0)
+
+        self.assertAlmostEqual(kbps, 3000 * 8 / 1000 / 6.0)
+        mock_get.assert_called_once_with(
+            "http://127.0.0.1:1984/api/stream.mp4",
+            params={"src": "front"},
+            stream=True,
+            timeout=5,
+        )
+
+    @patch("frigate.util.live_streams.requests.get")
+    def test_no_data_returns_none(self, mock_get):
+        response = MagicMock(ok=True)
+        response.iter_content.return_value = []
+        mock_get.return_value.__enter__.return_value = response
+
+        self.assertIsNone(measure_stream_bitrate("front"))
+
+    @patch("frigate.util.live_streams.requests.get")
+    def test_request_error_returns_none(self, mock_get):
+        mock_get.side_effect = requests.ReadTimeout("slow")
+
+        self.assertIsNone(measure_stream_bitrate("front"))
+
+
+if __name__ == "__main__":
+    unittest.main()

frigate/util/live_streams.py

@@ -0,0 +1,216 @@
+"""Frigate-managed go2rtc live streams: transcoded rungs and bitrate probes."""
+
+import logging
+import re
+import time
+from typing import TYPE_CHECKING, Any
+
+import requests
+
+if TYPE_CHECKING:
+    from frigate.config import FrigateConfig
+
+logger = logging.getLogger(__name__)
+
+GO2RTC_API = "http://127.0.0.1:1984/api"
+
+DEFAULT_TRANSCODE_QUALITIES: list[dict[str, int]] = [
+    {"height": 720, "bitrate": 1200},
+    {"height": 480, "bitrate": 500},
+    {"height": 360, "bitrate": 250},
+]
+
+
+def transcode_stream_name(camera: str, height: int) -> str:
+    """Return the go2rtc name of a camera's transcoded stream at one height."""
+    return f"{camera}_transcode_{height}p"
+
+
+def is_transcode_stream_name(camera: str, name: str) -> bool:
+    """Return whether a stream name follows this camera's transcoded naming."""
+    return re.fullmatch(rf"{re.escape(camera)}_transcode_\d+p", name) is not None
+
+
+def transcode_stream_source(source: str, height: int, bitrate: int) -> str:
+    """Build the go2rtc ffmpeg source that transcodes a stream to H.264.
+
+    go2rtc rejects API-registered sources containing spaces, so each ffmpeg
+    token gets its own #raw= parameter. #audio=copy keeps audio, which any
+    #video= option would otherwise drop.
+    """
+    tokens = (
+        "-b:v",
+        f"{bitrate}k",
+        "-maxrate",
+        f"{bitrate}k",
+        "-bufsize",
+        f"{2 * bitrate}k",
+    )
+    raw = "".join(f"#raw={token}" for token in tokens)
+    return f"ffmpeg:{source}#video=h264#height={height}#hardware#audio=copy{raw}"
+
+
+def transcode_streams(
+    camera: str, source: str, qualities: list[dict[str, int]]
+) -> dict[str, str]:
+    """Map each quality's go2rtc stream name to its source."""
+    return {
+        transcode_stream_name(camera, quality["height"]): transcode_stream_source(
+            source, quality["height"], quality["bitrate"]
+        )
+        for quality in qualities
+    }
+
+
+def default_transcode_source(camera: str, streams: dict[str, str]) -> str | None:
+    """Return the first live stream that is not itself transcoded."""
+    return next(
+        (
+            name
+            for name in streams.values()
+            if not is_transcode_stream_name(camera, name)
+        ),
+        None,
+    )
+
+
+def raw_transcode_streams(config: dict[str, Any]) -> dict[str, str]:
+    """Build transcoded go2rtc streams for every enabled camera in a raw config.
+
+    go2rtc's config is written before FrigateConfig validation runs, so this
+    resolves defaults the same way the validator does.
+    """
+    streams: dict[str, str] = {}
+
+    for camera, camera_config in (config.get("cameras") or {}).items():
+        live = (camera_config or {}).get("live") or {}
+        transcode = live.get("transcode") or {}
+
+        if not transcode.get("enabled"):
+            continue
+
+        source = transcode.get("source") or default_transcode_source(
+            camera, live.get("streams") or {camera: camera}
+        )
+
+        if source is None:
+            continue
+
+        qualities = transcode.get("qualities")
+
+        if qualities is None:
+            qualities = DEFAULT_TRANSCODE_QUALITIES
+
+        # malformed entries fail Frigate's validation; skipping them here keeps
+        # go2rtc from crash-looping alongside it
+        valid = [
+            quality
+            for quality in (qualities if isinstance(qualities, list) else [])
+            if isinstance(quality, dict)
+            and "height" in quality
+            and "bitrate" in quality
+        ]
+        streams.update(transcode_streams(camera, source, valid))
+
+    return streams
+
+
+def generated_transcode_streams(config: "FrigateConfig") -> dict[str, str]:
+    """Build transcoded go2rtc streams for every enabled camera."""
+    streams: dict[str, str] = {}
+
+    for camera in config.cameras.values():
+        transcode = camera.live.transcode
+
+        if transcode.enabled and transcode.source:
+            streams.update(
+                transcode_streams(
+                    camera.name,
+                    transcode.source,
+                    [quality.model_dump() for quality in transcode.qualities],
+                )
+            )
+
+    return streams
+
+
+def _go2rtc_streams_call(method: str, name: str, params: dict[str, str]) -> bool:
+    try:
+        response = requests.request(
+            method, f"{GO2RTC_API}/streams", params=params, timeout=5
+        )
+    except requests.RequestException as e:
+        logger.error("Failed to sync go2rtc stream %s: %s", name, e)
+        return False
+
+    if not response.ok:
+        logger.error("Failed to sync go2rtc stream %s: %s", name, response.text)
+        return False
+
+    return True
+
+
+def sync_transcode_streams(old: dict[str, str], new: dict[str, str]) -> bool:
+    """Register added or changed streams with go2rtc and remove dropped ones.
+
+    Returns False when any go2rtc call failed.
+    """
+    ok = True
+
+    for name, source in new.items():
+        if old.get(name) != source:
+            ok = _go2rtc_streams_call("put", name, {"name": name, "src": source}) and ok
+
+    for name in old.keys() - new.keys():
+        ok = _go2rtc_streams_call("delete", name, {"src": name}) and ok
+
+    return ok
+
+
+def measure_stream_bitrate(
+    name: str, duration: float = 6.0, warmup: float = 1.0
+) -> float | None:
+    """Measure a go2rtc stream's average kbps from its local MP4 output.
+
+    The first warmup seconds after the first byte are skipped so the startup
+    keyframe burst does not inflate the result. Returns None when the stream
+    sends nothing.
+    """
+    first = start = now = None
+    counted = 0
+
+    try:
+        with requests.get(
+            f"{GO2RTC_API}/stream.mp4",
+            params={"src": name},
+            stream=True,
+            timeout=5,
+        ) as response:
+            if not response.ok:
+                return None
+
+            for chunk in response.iter_content(chunk_size=16384):
+                now = time.monotonic()
+
+                if first is None:
+                    first = now
+
+                if now - first < warmup:
+                    continue
+
+                if start is None:
+                    start = now
+                    continue
+
+                counted += len(chunk)
+
+                if now - start >= duration:
+                    break
+    except requests.RequestException as e:
+        logger.warning("Failed to measure go2rtc stream %s: %s", name, e)
+        return None
+
+    if start is None or now is None or now <= start or counted == 0:
+        return None
+
+    return counted * 8 / 1000 / (now - start)

web/e2e/helpers/grid-layout.ts

@@ -1,204 +0,0 @@
-/**
- * Helpers for the live dashboard's draggable grid layout: reading and seeding
- * the persisted layout, and measuring rendered tiles.
- *
- * DraggableGridLayout persists through useUserPersistence, which namespaces
- * keys by username, and every write is an async idb put. A test that seeds the
- * bare key, or seeds before the app's own first write has landed, silently
- * asserts against a key the app never reads. persistedLayoutKey() closes both
- * holes, so prefer it over building the key by hand.
- *
- * Geometry has its own trap: the grid first lays out against window.innerWidth,
- * then reflows narrower once useResizeObserver reports the real container.
- * Tiles measured in separate round-trips can straddle that reflow and disagree
- * on scale, so cameraBoxes() takes every measurement in one evaluate.
- *
- * Used by live-grid-aspect-modes.spec.ts and masonry-live-grid.spec.ts.
- */
-
-import { expect, type Page } from "@playwright/test";
-
-export type LayoutItem = {
-  i: string;
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-};
-
-export type PersistedLayout = {
-  version: number;
-  naturalAspect: boolean;
-  layout: LayoutItem[];
-};
-
-function layoutKeySuffix(group: string): string {
-  return `${group}-draggable-layout`;
-}
-
-/**
- * The key the app has actually written an envelope to, or undefined while its
- * first write is still in flight.
- */
-function findWrittenKey(
-  page: Page,
-  group: string,
-): Promise<string | undefined> {
-  return page.evaluate(
-    (suffix) =>
-      new Promise<string | undefined>((resolve) => {
-        const open = indexedDB.open("keyval-store");
-        open.onsuccess = () => {
-          const store = open.result
-            .transaction("keyval", "readonly")
-            .objectStore("keyval");
-          // getAllKeys and getAll both return in key order, so the indexes align
-          const keys = store.getAllKeys();
-          const values = store.getAll();
-          keys.transaction.oncomplete = () => {
-            open.result.close();
-            const names = keys.result as string[];
-            const stored = values.result as { version?: number }[];
-            const match = names.findIndex(
-              (name, index) =>
-                (name === suffix || name.startsWith(`${suffix}:`)) &&
-                typeof stored[index]?.version === "number",
-            );
-            resolve(match === -1 ? undefined : names[match]);
-          };
-        };
-        open.onerror = () => resolve(undefined);
-      }),
-    layoutKeySuffix(group),
-  );
-}
-
-/**
- * Wait for the grid to persist its own layout, then return the key it used.
- * Waiting for that write is what makes a later seed meaningful: it proves the
- * key is live, and it rules out the app overwriting the seed a moment later.
- */
-export async function persistedLayoutKey(
-  page: Page,
-  group: string,
-): Promise<string> {
-  let key: string | undefined;
-
-  await expect
-    .poll(async () => (key = await findWrittenKey(page, group)), {
-      timeout: 10_000,
-      message: `grid never persisted a layout for group "${group}"`,
-    })
-    .not.toBeUndefined();
-
-  return key!;
-}
-
-/** Overwrite the stored layout, resolving only once the put has committed. */
-export function seedLayout(
-  page: Page,
-  key: string,
-  value: unknown,
-): Promise<void> {
-  return page.evaluate(
-    ([key, value]) =>
-      new Promise<void>((resolve, reject) => {
-        const open = indexedDB.open("keyval-store");
-        open.onupgradeneeded = () => open.result.createObjectStore("keyval");
-        open.onsuccess = () => {
-          const tx = open.result.transaction("keyval", "readwrite");
-          tx.objectStore("keyval").put(value, key as string);
-          tx.oncomplete = () => {
-            open.result.close();
-            resolve();
-          };
-          tx.onerror = () => reject(tx.error);
-        };
-        open.onerror = () => reject(open.error);
-      }),
-    [key, value] as const,
-  );
-}
-
-/** Read the stored layout back. Undefined until the app writes it. */
-export function readLayout(
-  page: Page,
-  key: string,
-): Promise<PersistedLayout | undefined> {
-  return page.evaluate(
-    (target) =>
-      new Promise((resolve) => {
-        const open = indexedDB.open("keyval-store");
-        open.onsuccess = () => {
-          const tx = open.result.transaction("keyval", "readonly");
-          const request = tx.objectStore("keyval").get(target);
-          tx.oncomplete = () => {
-            open.result.close();
-            resolve(request.result);
-          };
-        };
-        open.onerror = () => resolve(undefined);
-      }),
-    key,
-  ) as Promise<PersistedLayout | undefined>;
-}
-
-export type Box = { w: number; h: number; x: number; y: number };
-
-/** The card is the player root; the cell is the grid slot it sits in. */
-export type BoxTarget = "card" | "cell";
-
-/** One atomic snapshot, or null while any tile is missing or unlaid out. */
-function snapshotBoxes(
-  page: Page,
-  cameras: readonly string[],
-  target: BoxTarget,
-): Promise<Record<string, Box> | null> {
-  return page.evaluate(
-    ({ cams, target }) => {
-      const boxes: Record<string, Box> = {};
-
-      for (const cam of cams) {
-        const card = document.querySelector(`[data-camera='${cam}']`);
-        const el = target === "cell" ? card?.closest(".p-1") : card;
-
-        if (!el) {
-          return null;
-        }
-
-        const r = el.getBoundingClientRect();
-
-        // a re-rendering tile can briefly report no box at all
-        if (!r.width || !r.height) {
-          return null;
-        }
-
-        boxes[cam] = { w: r.width, h: r.height, x: r.x, y: r.y };
-      }
-
-      return boxes;
-    },
-    { cams: cameras as readonly string[], target },
-  );
-}
-
-/**
- * Measure the given cameras' tiles together, once they have all rendered.
- * Measuring in one evaluate is what keeps the numbers mutually comparable.
- */
-export async function cameraBoxes<T extends string>(
-  page: Page,
-  cameras: readonly T[],
-  target: BoxTarget = "cell",
-): Promise<Record<T, Box>> {
-  let boxes: Record<string, Box> | null = null;
-
-  await expect
-    .poll(async () => (boxes = await snapshotBoxes(page, cameras, target)), {
-      timeout: 10_000,
-      message: `${target}s never rendered for ${cameras.join(", ")}`,
-    })
-    .not.toBeNull();
-
-  return boxes as unknown as Record<T, Box>;
-}

web/e2e/pages/live.page.ts

@@ -45,11 +45,6 @@ export class LivePage extends BasePage {
     );
   }
 
-  /** Edit-layout toggle on the draggable grid (desktop, custom groups). */
-  get editLayoutButton(): Locator {
-    return this.page.getByTestId("toggle-edit-layout");
-  }
-
   /** Open the right-click context menu on a camera card (desktop only). */
   async openContextMenuOn(cameraName: string): Promise<Locator> {
     await this.cameraCard(cameraName).first().click({ button: "right" });

web/e2e/specs/live-auto-stream.spec.ts

@@ -0,0 +1,320 @@
+/**
+ * Auto live stream selection in the single-camera view.
+ *
+ * go2rtc is mocked per stream. A failing stream answers MSE codec
+ * negotiation with go2rtc's "codecs not matched" error, the one ladder
+ * trigger Chromium reproduces without real media. A healthy stream
+ * answers negotiation and then sends nothing, so it waits quietly.
+ */
+import type { Locator, Page } from "@playwright/test";
+import { test, expect } from "../fixtures/frigate-test";
+import { LivePage } from "../pages/live.page";
+
+// the mocked profile is admin, so useUserPersistence keys are namespaced
+const STREAM_KEY = "front_door-stream:admin";
+const CODEC_ERROR = "mse: streams: codecs not matched: H265 => H264";
+
+const CONFIG = {
+  go2rtc: {
+    streams: {
+      front_door: ["rtsp://127.0.0.1:8554/front_door"],
+      front_door_sub: ["rtsp://127.0.0.1:8554/front_door_sub"],
+      backyard: ["rtsp://127.0.0.1:8554/backyard"],
+    },
+    webrtc: { candidates: [], ice_servers: [] },
+  },
+  cameras: {
+    front_door: {
+      live: { streams: { Sub: "front_door_sub" } },
+    },
+  },
+};
+
+test.use({ expectedErrors: [/MSE error 'mse-codec'/] });
+
+async function writeIdb(page: Page, entries: Record<string, unknown>) {
+  await page.evaluate(async (data) => {
+    await new Promise<void>((resolve, reject) => {
+      const request = indexedDB.open("keyval-store", 1);
+      request.onupgradeneeded = () =>
+        request.result.createObjectStore("keyval");
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        const tx = request.result.transaction("keyval", "readwrite");
+        const store = tx.objectStore("keyval");
+        Object.entries(data).forEach(([key, value]) => store.put(value, key));
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+      };
+    });
+  }, entries);
+}
+
+async function readIdb(page: Page, key: string) {
+  return page.evaluate(async (target) => {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open("keyval-store", 1);
+      request.onupgradeneeded = () =>
+        request.result.createObjectStore("keyval");
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        const tx = request.result.transaction("keyval", "readonly");
+        const get = tx.objectStore("keyval").get(target);
+        get.onsuccess = () => resolve(get.result ?? null);
+        get.onerror = () => reject(get.error);
+      };
+    });
+  }, key);
+}
+
+// records the src of every MSE socket in open order
+async function mockGo2rtc(page: Page, failing: string[] = []) {
+  const opened: string[] = [];
+
+  await page.routeWebSocket("**/live/mse/api/ws**", (ws) => {
+    const src = new URL(ws.url()).searchParams.get("src") ?? "";
+    opened.push(src);
+
+    ws.onMessage((message) => {
+      const msg = JSON.parse(message.toString());
+      if (msg.type !== "mse") {
+        return;
+      }
+
+      ws.send(
+        JSON.stringify(
+          failing.includes(src)
+            ? { type: "error", value: CODEC_ERROR }
+            : { type: "mse", value: 'video/mp4; codecs="avc1.640029"' },
+        ),
+      );
+    });
+  });
+
+  await page.route("**/api/go2rtc/streams/**", (route) =>
+    route.fulfill({
+      json: {
+        producers: [{ medias: ["video, recvonly, H264"] }],
+        consumers: [],
+      },
+    }),
+  );
+
+  return opened;
+}
+
+async function openDesktopSettings(page: Page) {
+  const live = new LivePage(page, true);
+  await expect(live.backButton).toBeVisible({ timeout: 10_000 });
+  await page.locator("button:has(svg)").last().click();
+  const menu = page.locator('[role="menu"], [data-radix-menu-content]').first();
+  await expect(menu).toBeVisible({ timeout: 3_000 });
+  return menu;
+}
+
+function streamTrigger(menu: Locator) {
+  return menu
+    .locator('div:has(> label[for="streaming-method"]) [role="combobox"]')
+    .first();
+}
+
+test.describe("Auto live stream @mobile", () => {
+  test("a codec error on the main stream moves Auto to the sub stream", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, ["front_door"]);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_sub");
+    expect(opened[0]).toBe("front_door");
+  });
+});
+
+test.describe("Transcoded live stream @mobile", () => {
+  test("a pinned transcoded stream plays over MSE", async ({ frigateApp }) => {
+    // go2rtc.streams lists only yaml streams; transcoded ones are generated
+    await frigateApp.installDefaults({
+      config: {
+        ...CONFIG,
+        cameras: {
+          front_door: {
+            live: {
+              streams: {
+                Sub: "front_door_sub",
+                "720p": "front_door_transcode_720p",
+              },
+              transcode: {
+                enabled: true,
+                source: "front_door",
+                qualities: [{ height: 720, bitrate: 1200 }],
+              },
+            },
+          },
+        },
+      },
+    });
+    const opened = await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, {
+      [STREAM_KEY]: "front_door_transcode_720p",
+    });
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_transcode_720p");
+  });
+});
+
+test.describe("Auto live stream selector", () => {
+  test.beforeEach(({ frigateApp }) => {
+    test.skip(frigateApp.isMobile, "Desktop dropdown only");
+  });
+
+  test("no saved stream opens Auto on the first stream", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect.poll(() => opened[0], { timeout: 10_000 }).toBe("front_door");
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Auto · front_door");
+  });
+
+  test("a codec error shows the codec reason", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, ["front_door"]);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_sub");
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Auto · Sub");
+    await expect(
+      menu.getByText(/because this browser can't play a higher-quality stream/),
+    ).toBeVisible();
+  });
+
+  test("trying the highest quality retries the top stream", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, ["front_door"]);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_sub");
+    const menu = await openDesktopSettings(frigateApp.page);
+    const beforeRetry = opened.length;
+    await menu.getByRole("button", { name: "Try highest quality" }).click();
+
+    await expect
+      .poll(() => opened.slice(beforeRetry), { timeout: 10_000 })
+      .toContain("front_door");
+  });
+
+  test("a pinned main takes the legacy fallback instead of stepping down", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, ["front_door"]);
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, { [STREAM_KEY]: "front_door" });
+    await frigateApp.goto("/#front_door");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(
+      menu.getByText(/Live view is in low-bandwidth mode/),
+    ).toBeVisible({ timeout: 10_000 });
+    expect(opened).not.toContain("front_door_sub");
+  });
+
+  test("selecting Auto clears the saved stream", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, { [STREAM_KEY]: "front_door_sub" });
+    await frigateApp.goto("/#front_door");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Sub");
+    await streamTrigger(menu).click();
+    await frigateApp.page.getByRole("option", { name: /^Auto/ }).click();
+
+    await expect.poll(() => readIdb(frigateApp.page, STREAM_KEY)).toBeNull();
+  });
+
+  test("a stale pin falls back to Auto", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, { [STREAM_KEY]: "removed_stream" });
+    await frigateApp.goto("/#front_door");
+
+    await expect.poll(() => readIdb(frigateApp.page, STREAM_KEY)).toBeNull();
+    await expect.poll(() => opened[0], { timeout: 10_000 }).toBe("front_door");
+  });
+
+  test("a single-stream camera offers no Auto", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/#backyard");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await streamTrigger(menu).click();
+    await expect(
+      frigateApp.page.getByRole("option", { name: "backyard" }),
+    ).toBeVisible();
+    await expect(
+      frigateApp.page.getByRole("option", { name: /^Auto/ }),
+    ).toHaveCount(0);
+  });
+
+  test("Reset stream at the floor returns to the top stream", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, [
+      "front_door",
+      "front_door_sub",
+    ]);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_sub");
+    expect(opened[0]).toBe("front_door");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Auto · Low bandwidth");
+    await expect(
+      menu.getByText(/Playing the low-bandwidth feed/),
+    ).toBeVisible();
+
+    const beforeReset = opened.length;
+    await menu.getByRole("button", { name: "Reset stream" }).click();
+
+    // leaving the floor changes the stream and the mode in one render,
+    // which must still open each stream exactly once
+    await expect
+      .poll(() => opened.slice(beforeReset), { timeout: 10_000 })
+      .toEqual(["front_door", "front_door_sub"]);
+  });
+});

web/e2e/specs/live-grid-aspect-modes.spec.ts

@@ -1,185 +0,0 @@
-/**
- * Live grid aspect modes.
- *
- * Bucketed mode (the default) snaps every camera to a wide, landscape or tall
- * tile, and converts layouts saved by pre-masonry versions instead of
- * discarding them. Natural mode sizes each tile to its own camera.
- */
-
-import { test, expect } from "../fixtures/frigate-test";
-import { LivePage } from "../pages/live.page";
-import {
-  cameraBoxes,
-  persistedLayoutKey,
-  readLayout,
-  seedLayout,
-  type LayoutItem,
-} from "../helpers/grid-layout";
-
-const GROUP = "outdoor";
-const GRID_COLS = 96;
-
-test.describe("Live grid aspect modes @critical", () => {
-  test.skip(
-    ({ frigateApp }) => frigateApp.isMobile,
-    "Draggable grid is desktop-only",
-  );
-
-  test("an ultra-wide camera gets a 32:9 tile in bucketed mode @mobile", async ({
-    frigateApp,
-  }) => {
-    await frigateApp.installDefaults({
-      config: {
-        cameras: { backyard: { detect: { width: 2560, height: 720 } } },
-      },
-    });
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("backyard").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    const { backyard: wide, front_door: normal } = await cameraBoxes(
-      frigateApp.page,
-      ["backyard", "front_door"] as const,
-    );
-
-    expect(wide.w / wide.h).toBeCloseTo(32 / 9, 1);
-    expect(wide.w / normal.w).toBeCloseTo(2, 1);
-    expect(wide.h).toBeCloseTo(normal.h, 0);
-  });
-
-  test("a letterboxed still image rounds its own corners", async ({
-    frigateApp,
-  }) => {
-    // A portrait camera pillarboxes inside its 8:9 bucket, so the card's
-    // overflow-hidden clip never reaches the picture's corners. The image has
-    // to carry the radius itself or it renders with square edges on the tile.
-    await frigateApp.installDefaults({
-      config: {
-        cameras: { backyard: { detect: { width: 720, height: 1280 } } },
-      },
-    });
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("backyard").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    const radii = await frigateApp.page.evaluate(() => {
-      const card = document.querySelector("[data-camera='backyard']");
-      const img = card?.querySelector("img");
-      return {
-        card: card ? getComputedStyle(card).borderTopLeftRadius : null,
-        img: img ? getComputedStyle(img).borderTopLeftRadius : null,
-      };
-    });
-
-    expect(radii.card).not.toBe("0px");
-    expect(radii.img).toBe(radii.card);
-  });
-
-  test("a pre-masonry layout is converted, keeping resized tiles", async ({
-    frigateApp,
-  }) => {
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    // 0.17/0.18 shape: bare array on a 12-column grid, 4x4 standard tiles.
-    // backyard was manually resized to 8x8 and sits beside front_door's column,
-    // front_door is a standard tile on the row below.
-    const key = await persistedLayoutKey(frigateApp.page, GROUP);
-    await seedLayout(frigateApp.page, key, [
-      { i: "backyard", x: 4, y: 0, w: 8, h: 8, moved: false, static: false },
-      { i: "front_door", x: 0, y: 8, w: 4, h: 4, moved: false, static: false },
-    ]);
-    await frigateApp.page.reload();
-    await frigateApp.page.waitForSelector("#pageRoot", { timeout: 10_000 });
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    // The conversion is written back on first load, replacing the legacy array
-    // with an envelope. Poll for it: that write is an async idb put.
-    await expect
-      .poll(async () => (await readLayout(frigateApp.page, key))?.version, {
-        timeout: 10_000,
-      })
-      .toBe(2);
-
-    const stored = (await readLayout(frigateApp.page, key))!;
-    expect(stored).toMatchObject({ version: 2, naturalAspect: false });
-
-    // x and w scale 8x (12 -> 96 columns), y and h scale 18x (4 -> 72 rows per
-    // standard tile), so the manual resize survives instead of snapping back.
-    expect(
-      stored.layout.find((i: LayoutItem) => i.i === "backyard"),
-    ).toMatchObject({
-      x: 32,
-      y: 0,
-      w: 64,
-      h: 144,
-    });
-    expect(
-      stored.layout.find((i: LayoutItem) => i.i === "front_door"),
-    ).toMatchObject({
-      x: 0,
-      y: 144,
-      w: 32,
-      h: 72,
-    });
-
-    // arrangement on screen: backyard indented, front_door below it
-    const { backyard, front_door: frontDoor } = await cameraBoxes(
-      frigateApp.page,
-      ["backyard", "front_door"] as const,
-    );
-    expect(backyard.x).toBeGreaterThan(frontDoor.x + frontDoor.w / 2);
-    expect(frontDoor.y).toBeGreaterThan(backyard.y + backyard.h / 2);
-  });
-
-  test("conversion is a pure scale, so odd sizes and positions survive", async ({
-    frigateApp,
-  }) => {
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    // The old grid exposed all four resize corners with no aspect constraint,
-    // so a stored tile can be any size. These two are adjacent and non-standard.
-    const key = await persistedLayoutKey(frigateApp.page, GROUP);
-    await seedLayout(frigateApp.page, key, [
-      { i: "front_door", x: 0, y: 3, w: 5, h: 5 },
-      { i: "backyard", x: 5, y: 3, w: 7, h: 5 },
-    ]);
-    await frigateApp.page.reload();
-    await frigateApp.page.waitForSelector("#pageRoot", { timeout: 10_000 });
-    await expect(live.cameraCard("backyard").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    await expect
-      .poll(async () => (await readLayout(frigateApp.page, key))?.version, {
-        timeout: 10_000,
-      })
-      .toBe(2);
-
-    const stored = (await readLayout(frigateApp.page, key))!;
-    const frontDoor = stored.layout.find(
-      (i: LayoutItem) => i.i === "front_door",
-    )!;
-    const backyard = stored.layout.find((i: LayoutItem) => i.i === "backyard")!;
-
-    expect(frontDoor).toMatchObject({ x: 0, y: 54, w: 40, h: 90 });
-    expect(backyard).toMatchObject({ x: 40, y: 54, w: 56, h: 90 });
-
-    // still adjacent, still inside the grid, still not overlapping
-    expect(frontDoor.x + frontDoor.w).toBe(backyard.x);
-    expect(backyard.x + backyard.w).toBe(GRID_COLS);
-  });
-});

web/e2e/specs/masonry-live-grid.spec.ts

@@ -1,298 +0,0 @@
-/**
- * Masonry live grid -- custom-group draggable layout.
- *
- * Verifies natural-aspect tile sizing and that a saved layout the current
- * version cannot read is regenerated cleanly. The grid renders only for a
- * custom camera group (here: "outdoor") on desktop; mobile keeps the static
- * grid, which the @mobile block below guards.
- */
-
-import { test, expect } from "../fixtures/frigate-test";
-import { LivePage } from "../pages/live.page";
-import {
-  cameraBoxes,
-  persistedLayoutKey,
-  readLayout,
-  seedLayout,
-} from "../helpers/grid-layout";
-
-const GROUP = "outdoor"; // custom group: front_door + backyard
-
-test.describe("Masonry live grid @critical", () => {
-  test.skip(
-    ({ frigateApp }) => frigateApp.isMobile,
-    "Draggable masonry grid is desktop-only",
-  );
-
-  test("custom group renders its cameras in the draggable grid", async ({
-    frigateApp,
-  }) => {
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-    await expect(live.cameraCard("backyard").first()).toBeVisible();
-  });
-
-  test("tiles render at their camera's natural aspect ratio", async ({
-    frigateApp,
-  }) => {
-    // backyard is 9:16, which bucketed mode would snap to an 8:9 tile
-    await frigateApp.installDefaults({
-      config: {
-        cameras: { backyard: { detect: { width: 720, height: 1280 } } },
-      },
-    });
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    await seedLayout(frigateApp.page, "naturalAspectLayout:admin", true);
-    await frigateApp.page.reload();
-    await expect(live.cameraCard("backyard").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    const { front_door: landscape, backyard: portrait } = await cameraBoxes(
-      frigateApp.page,
-      ["front_door", "backyard"] as const,
-      "card",
-    );
-
-    expect(landscape.w / landscape.h).toBeCloseTo(16 / 9, 1);
-    expect(portrait.w / portrait.h).toBeCloseTo(9 / 16, 1);
-  });
-
-  test("dragging a tile does not shove other tiles far away", async ({
-    frigateApp,
-  }) => {
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    await live.editLayoutButton.click();
-
-    const cameras = ["front_door", "backyard"] as const;
-    const { front_door: fixedBefore, backyard: draggedBox } = await cameraBoxes(
-      frigateApp.page,
-      cameras,
-      "card",
-    );
-
-    // Drag backyard onto front_door's position (a deliberate collision). With
-    // free-placement + prevent-collision, front_door must NOT be shoved down.
-    const from = {
-      x: draggedBox.x + draggedBox.w / 2,
-      y: draggedBox.y + draggedBox.h / 2,
-    };
-    const to = {
-      x: fixedBefore.x + fixedBefore.w / 2,
-      y: fixedBefore.y + fixedBefore.h / 2,
-    };
-    await frigateApp.page.mouse.move(from.x, from.y);
-    await frigateApp.page.mouse.down();
-    await frigateApp.page.mouse.move(to.x, to.y, { steps: 15 });
-    await frigateApp.page.mouse.up();
-
-    const { front_door: fixedAfter } = await cameraBoxes(
-      frigateApp.page,
-      cameras,
-      "card",
-    );
-    // Allow a few px of snap; a collision-push would move it a whole tile down.
-    expect(Math.abs(fixedAfter.y - fixedBefore.y)).toBeLessThan(40);
-  });
-
-  test("resizing a top-row tile preserves its aspect ratio (no pillarboxing)", async ({
-    frigateApp,
-  }) => {
-    // A lone top tile has room to grow sideways, which is what exposed the bug:
-    // a top-edge handle let width grow while height stayed clamped at y=0.
-    await frigateApp.installDefaults({
-      config: { camera_groups: { outdoor: { cameras: ["front_door"] } } },
-    });
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-    await live.editLayoutButton.click();
-
-    const tile = frigateApp.page.locator(".react-grid-item", {
-      has: frigateApp.page.locator("[data-camera='front_door']"),
-    });
-    const only = ["front_door"] as const;
-    const { front_door: before } = await cameraBoxes(
-      frigateApp.page,
-      only,
-      "card",
-    );
-    const aspect = before.w / before.h;
-
-    // Regression: if a top-edge handle is exposed, dragging it up/out must NOT
-    // distort the aspect (the old bug grew width while height stayed clamped).
-    const ne = tile.locator(".react-resizable-handle-ne");
-    if (await ne.count()) {
-      await ne.dragTo(tile, {
-        force: true,
-        targetPosition: { x: 1000, y: -160 },
-      });
-      const { front_door: afterNe } = await cameraBoxes(
-        frigateApp.page,
-        only,
-        "card",
-      );
-      // It must actually resize (not a silent no-op) AND keep its aspect.
-      expect(afterNe.w).toBeGreaterThan(before.w);
-      expect(Math.abs(afterNe.w / afterNe.h - aspect)).toBeLessThan(0.2);
-    }
-
-    // Positive: growing from the bottom-right corner resizes and keeps aspect.
-    const se = tile.locator(".react-resizable-handle-se");
-    await se.dragTo(tile, { force: true, targetPosition: { x: 1000, y: 520 } });
-    const { front_door: grown } = await cameraBoxes(
-      frigateApp.page,
-      only,
-      "card",
-    );
-    expect(grown.w).toBeGreaterThan(before.w);
-    expect(Math.abs(grown.w / grown.h - aspect)).toBeLessThan(0.2);
-  });
-
-  test("the grid keeps its measured width after a back navigation", async ({
-    frigateApp,
-  }) => {
-    // The grid sizes itself from window.innerWidth until its container is
-    // measured. On a warm back navigation nothing re-renders after that
-    // container mounts, so an observer that never attaches leaves every tile
-    // sized against the full window: the layout widens by the sidebar's width
-    // and the rightmost column clips on a full row.
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    // total width the tiles span; tracks the width the grid laid out against
-    const span = () =>
-      frigateApp.page.evaluate(() => {
-        const tiles = [...document.querySelectorAll(".react-grid-item")];
-
-        if (!tiles.length) {
-          return null;
-        }
-
-        const rects = tiles.map((tile) => tile.getBoundingClientRect());
-        return +(
-          Math.max(...rects.map((r) => r.right)) -
-          Math.min(...rects.map((r) => r.left))
-        ).toFixed(1);
-      });
-
-    let fresh: number | null = null;
-    await expect
-      .poll(async () => (fresh = await span()), { timeout: 10_000 })
-      .not.toBeNull();
-
-    await live.cameraCard("front_door").first().click();
-    await expect(frigateApp.page).toHaveURL(/#front_door/);
-
-    await frigateApp.page.goBack();
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    // the layout must settle back to the measured width, not window.innerWidth
-    await expect
-      .poll(span, { timeout: 10_000 })
-      .toBeLessThanOrEqual(fresh! + 2);
-  });
-
-  test("a camera added to a saved layout fills an open column", async ({
-    frigateApp,
-  }) => {
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    // one tall tile in the first column; backyard is missing from the layout
-    const key = await persistedLayoutKey(frigateApp.page, GROUP);
-    await seedLayout(frigateApp.page, key, {
-      version: 2,
-      naturalAspect: false,
-      layout: [{ i: "front_door", x: 0, y: 0, w: 32, h: 400 }],
-    });
-    await frigateApp.page.reload();
-
-    await expect
-      .poll(async () => {
-        const stored = await readLayout(frigateApp.page, key);
-        return stored?.layout.find((item) => item.i === "backyard");
-      })
-      .toMatchObject({ x: 32, y: 0 });
-  });
-
-  test("saved layout from an unreadable version regenerates without error", async ({
-    frigateApp,
-  }) => {
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, true);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-
-    // A bare array is converted rather than discarded (covered in
-    // live-grid-aspect-modes), so use a version the current grid cannot read.
-    const key = await persistedLayoutKey(frigateApp.page, GROUP);
-    await seedLayout(frigateApp.page, key, {
-      version: 1,
-      naturalAspect: false,
-      layout: [{ i: "front_door", x: 0, y: 0, w: 4, h: 3 }],
-    });
-
-    await frigateApp.page.reload();
-    await frigateApp.page.waitForSelector("#pageRoot", { timeout: 10_000 });
-
-    // Grid regenerated; both cameras still render and the error collector
-    // (frigate-test fixture) catches any crash.
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-    await expect(live.cameraCard("backyard").first()).toBeVisible();
-
-    // The app must have replaced the value it could not read. Without this the
-    // test would still pass against a key the app never touches.
-    await expect
-      .poll(async () => (await readLayout(frigateApp.page, key))?.version, {
-        timeout: 10_000,
-      })
-      .toBeGreaterThan(1);
-  });
-});
-
-test.describe("Masonry live grid on mobile @critical @mobile", () => {
-  test("custom group keeps the static grid, with no draggable layout", async ({
-    frigateApp,
-  }) => {
-    test.skip(!frigateApp.isMobile, "Mobile-only");
-
-    await frigateApp.goto(`/?group=${GROUP}`);
-    const live = new LivePage(frigateApp.page, false);
-    await expect(live.cameraCard("front_door").first()).toBeVisible({
-      timeout: 10_000,
-    });
-    await expect(live.cameraCard("backyard").first()).toBeVisible();
-
-    // isMobileOnly routes around DraggableGridLayout entirely, so neither the
-    // grid items nor the edit-layout toggle may appear.
-    await expect(frigateApp.page.locator(".react-grid-item")).toHaveCount(0);
-    await expect(live.editLayoutButton).toHaveCount(0);
-  });
-});

web/e2e/specs/settings/camera-live-transcode.spec.ts

@@ -0,0 +1,254 @@
+/**
+ * Live playback stream order and transcoded streams -- MEDIUM tier.
+ *
+ * The stream list order is the Auto ladder, so the form saves it with
+ * replace_paths. Transcoded streams are generated from live.transcode and
+ * appear in the list as soon as the switch flips.
+ */
+
+import { readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { test, expect } from "../../fixtures/frigate-test";
+import type { Page } from "@playwright/test";
+import { configFactory } from "../../fixtures/mock-data/config";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CONFIG_SCHEMA = JSON.parse(
+  readFileSync(
+    resolve(__dirname, "../../fixtures/mock-data/config-schema.json"),
+    "utf-8",
+  ),
+);
+
+const GO2RTC_STREAMS = {
+  front_door_main: ["rtsp://user:pass@192.168.0.20:554/main"],
+  front_door_sub: ["rtsp://user:pass@192.168.0.20:554/sub"],
+};
+
+const TRANSCODE = {
+  enabled: false,
+  qualities: [
+    { height: 720, bitrate: 1200 },
+    { height: 480, bitrate: 500 },
+  ],
+};
+
+const SETTINGS_URL = "/settings?page=cameraLivePlayback&camera=front_door";
+
+type RouteOptions = {
+  go2rtcStreams?: Record<string, string[]>;
+  streams?: Record<string, string>;
+  bitrates?: Record<string, number>;
+};
+
+async function installRoutes(page: Page, options: RouteOptions = {}) {
+  const go2rtcStreams = options.go2rtcStreams ?? GO2RTC_STREAMS;
+  const streams = options.streams ?? {
+    Sub: "front_door_sub",
+    Main: "front_door_main",
+  };
+  const live = { streams, transcode: TRANSCODE };
+  const config = configFactory({
+    go2rtc: { streams: go2rtcStreams },
+    cameras: { front_door: { live } },
+  });
+  // configFactory's deepMerge adds override keys onto the base fixture's
+  // streams map instead of replacing it (they share no key names here), so
+  // pin the streams map to exactly what this test wants.
+  config.cameras.front_door.live.streams = streams;
+
+  let lastSaved: Record<string, unknown> | null = null;
+
+  await page.route("**/api/config/schema.json", (route) =>
+    route.fulfill({ json: CONFIG_SCHEMA }),
+  );
+  await page.route("**/api/config", (route) => {
+    if (route.request().method() === "GET") {
+      return route.fulfill({ json: config });
+    }
+    return route.fulfill({ json: { success: true } });
+  });
+  await page.route("**/api/config/raw_paths", (route) =>
+    route.fulfill({
+      json: {
+        go2rtc: { streams: go2rtcStreams },
+        cameras: { front_door: { live } },
+      },
+    }),
+  );
+  await page.route("**/api/config/set", async (route) => {
+    lastSaved = route.request().postDataJSON();
+    await route.fulfill({ json: { success: true, go2rtc_synced: true } });
+  });
+  await page.route("**/api/go2rtc/streams/*/bitrate", (route) => {
+    const name = decodeURIComponent(
+      new URL(route.request().url()).pathname.split("/").slice(-2)[0],
+    );
+    const kbps = options.bitrates?.[name];
+    return kbps === undefined
+      ? route.fulfill({ status: 502, json: { success: false } })
+      : route.fulfill({ json: { success: true, kbps } });
+  });
+
+  return { saved: () => lastSaved };
+}
+
+function streamNames(page: Page) {
+  return page
+    .getByRole("textbox", { name: "Stream name" })
+    .evaluateAll((inputs) =>
+      inputs.map((input) => (input as HTMLInputElement).value),
+    );
+}
+
+async function dragRow(page: Page, from: number, to: number) {
+  const handles = page.getByRole("button", { name: "Drag to reorder" });
+  const start = await handles.nth(from).boundingBox();
+  const end = await handles.nth(to).boundingBox();
+
+  if (!start || !end) throw new Error("drag handle not visible");
+
+  await page.mouse.move(start.x + start.width / 2, start.y + start.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(
+    end.x + end.width / 2,
+    end.y + end.height / 2 + (to > from ? 12 : -12),
+    { steps: 15 },
+  );
+  await page.mouse.up();
+}
+
+test.describe("live stream order and transcoded streams @medium", () => {
+  test.skip(({ frigateApp }) => frigateApp.isMobile, "desktop drag");
+
+  test("dragging a stream saves the new order", async ({ frigateApp }) => {
+    const capture = await installRoutes(frigateApp.page);
+    await frigateApp.goto(SETTINGS_URL);
+
+    await expect
+      .poll(() => streamNames(frigateApp.page))
+      .toEqual(["Sub", "Main"]);
+
+    await dragRow(frigateApp.page, 1, 0);
+    await expect
+      .poll(() => streamNames(frigateApp.page))
+      .toEqual(["Main", "Sub"]);
+
+    await frigateApp.page.getByRole("button", { name: "Save" }).click();
+
+    await expect.poll(() => capture.saved()).not.toBeNull();
+    const saved = capture.saved() as {
+      replace_paths: string[];
+      config_data: {
+        cameras: { front_door: { live: { streams: Record<string, string> } } };
+      };
+    };
+    expect(saved.replace_paths).toEqual(["cameras.front_door.live.streams"]);
+    expect(
+      Object.keys(saved.config_data.cameras.front_door.live.streams),
+    ).toEqual(["Main", "Sub"]);
+  });
+
+  test("enabling transcoding saves the shown source", async ({
+    frigateApp,
+  }) => {
+    const capture = await installRoutes(frigateApp.page);
+    await frigateApp.goto(SETTINGS_URL);
+
+    await frigateApp.page
+      .getByRole("switch", { name: "Enable transcoded streams" })
+      .click();
+    await frigateApp.page.getByRole("button", { name: "Save" }).click();
+
+    await expect.poll(() => capture.saved()).not.toBeNull();
+    const saved = capture.saved() as {
+      config_data: {
+        cameras: {
+          front_door: { live: { transcode: Record<string, unknown> } };
+        };
+      };
+    };
+    // pinned, so dragging another stream to the top can't change it
+    expect(saved.config_data.cameras.front_door.live.transcode).toMatchObject({
+      enabled: true,
+      source: "front_door_sub",
+    });
+  });
+
+  test("the transcode switch adds and removes transcoded rows", async ({
+    frigateApp,
+  }) => {
+    await installRoutes(frigateApp.page);
+    await frigateApp.goto(SETTINGS_URL);
+
+    const toggle = frigateApp.page.getByRole("switch", {
+      name: "Enable transcoded streams",
+    });
+    const save = frigateApp.page.getByRole("button", { name: "Save" });
+
+    await toggle.click();
+    await expect
+      .poll(() => streamNames(frigateApp.page))
+      .toEqual(["Sub", "Main", "720p", "480p"]);
+    await expect(
+      frigateApp.page.getByText("Transcoded", { exact: true }),
+    ).toHaveCount(2);
+    await expect(save).toBeEnabled();
+
+    await toggle.click();
+    await expect
+      .poll(() => streamNames(frigateApp.page))
+      .toEqual(["Sub", "Main"]);
+    await expect(save).toBeDisabled();
+  });
+
+  test("auto order sorts measured and set bitrates", async ({ frigateApp }) => {
+    await installRoutes(frigateApp.page, {
+      bitrates: { front_door_main: 4000, front_door_sub: 800 },
+    });
+    await frigateApp.goto(SETTINGS_URL);
+
+    await frigateApp.page
+      .getByRole("switch", { name: "Enable transcoded streams" })
+      .click();
+    await frigateApp.page.getByRole("button", { name: "Auto order" }).click();
+
+    await expect
+      .poll(() => streamNames(frigateApp.page))
+      .toEqual(["Main", "720p", "Sub", "480p"]);
+    await expect(frigateApp.page.getByText("4000 kbps")).toBeVisible();
+    await expect(frigateApp.page.getByText("1200 kbps (set)")).toBeVisible();
+  });
+
+  test("an unmeasurable stream sorts last", async ({ frigateApp }) => {
+    await installRoutes(frigateApp.page, {
+      bitrates: { front_door_main: 4000 },
+    });
+    await frigateApp.goto(SETTINGS_URL);
+
+    await frigateApp.page.getByRole("button", { name: "Auto order" }).click();
+
+    await expect
+      .poll(() => streamNames(frigateApp.page))
+      .toEqual(["Main", "Sub"]);
+    await expect(frigateApp.page.getByText("Couldn't measure")).toBeVisible();
+  });
+
+  test("transcoding needs a go2rtc stream", async ({ frigateApp }) => {
+    await installRoutes(frigateApp.page, {
+      go2rtcStreams: {},
+      streams: { front_door: "front_door" },
+    });
+    await frigateApp.goto(SETTINGS_URL);
+
+    await expect(
+      frigateApp.page.getByRole("switch", {
+        name: "Enable transcoded streams",
+      }),
+    ).toBeDisabled();
+    await expect(
+      frigateApp.page.getByText(/need a go2rtc stream to read from/),
+    ).toBeVisible();
+  });
+});

web/e2e/specs/settings/ui-settings-transfer.spec.ts

@@ -13,26 +13,7 @@ import type { Page } from "@playwright/test";
 const OUTDOOR_LAYOUT_KEY = "outdoor-draggable-layout:admin";
 const STREAMING_KEY = "streaming-settings:admin";
 
-// the shape DraggableGridLayout writes
-const OUTDOOR_LAYOUT = {
-  version: 2,
-  naturalAspect: false,
-  layout: [
-    { i: "front_door", x: 0, y: 0, w: 32, h: 72 },
-    { i: "backyard", x: 32, y: 0, w: 32, h: 72 },
-  ],
-};
-
-const NATURAL_OUTDOOR_LAYOUT = {
-  version: 2,
-  naturalAspect: true,
-  layout: [
-    { i: "front_door", x: 0, y: 0, w: 32, h: 72 },
-    { i: "backyard", x: 32, y: 0, w: 24, h: 96 },
-  ],
-};
-
-const LEGACY_OUTDOOR_LAYOUT = [
+const OUTDOOR_LAYOUT = [
   { i: "front_door", x: 0, y: 0, w: 6, h: 4 },
   { i: "backyard", x: 6, y: 0, w: 6, h: 4 },
 ];
@@ -178,160 +159,6 @@ test.describe("UI settings import/export @medium", () => {
     expect(payload.sections.preferences.playbackRate).toBe(2);
   });
 
-  test("exports only layouts built for the current tile sizing mode", async ({
-    frigateApp,
-  }) => {
-    // a group not opened since the mode changed still holds a layout from
-    // the other mode, which would import into a mode that cannot show it
-    await frigateApp.goto("/settings?page=uiSettings");
-
-    await writeIdb(frigateApp.page, {
-      [OUTDOOR_LAYOUT_KEY]: OUTDOOR_LAYOUT,
-      "default-draggable-layout:admin": NATURAL_OUTDOOR_LAYOUT,
-      "naturalAspectLayout:admin": true,
-    });
-
-    const downloadPromise = frigateApp.page.waitForEvent("download");
-    await frigateApp.page
-      .getByRole("button", { name: "Export Settings" })
-      .click();
-    const download = await downloadPromise;
-    const payload = JSON.parse(readFileSync((await download.path())!, "utf-8"));
-
-    expect(payload.sections.layouts).toEqual({
-      default: NATURAL_OUTDOOR_LAYOUT,
-    });
-  });
-
-  test("toggling tile sizing mode clears stored layouts", async ({
-    frigateApp,
-  }) => {
-    test.skip(frigateApp.isMobile, "The setting is hidden on phones");
-    await frigateApp.goto("/settings?page=uiSettings");
-    await writeIdb(frigateApp.page, { [OUTDOOR_LAYOUT_KEY]: OUTDOOR_LAYOUT });
-
-    await frigateApp.page.locator("#natural-aspect-desktop").click();
-    await frigateApp.page
-      .getByRole("alertdialog")
-      .getByRole("button", { name: "Enable" })
-      .click();
-
-    await expect
-      .poll(() => readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY))
-      .toBeNull();
-    expect(await readIdb(frigateApp.page, "naturalAspectLayout:admin")).toBe(
-      true,
-    );
-  });
-
-  test("round-trips a layout left unconverted by an upgrade", async ({
-    frigateApp,
-  }) => {
-    test.skip(frigateApp.isMobile, "Layout import is desktop and tablet only");
-    // DraggableGridLayout rewrites a pre-0.19 layout only when that group's
-    // dashboard is opened, so exporting first carries the bare array into the
-    // file. Import must accept it back rather than rejecting the whole file.
-    await frigateApp.goto("/settings?page=uiSettings");
-
-    await writeIdb(frigateApp.page, {
-      [OUTDOOR_LAYOUT_KEY]: LEGACY_OUTDOOR_LAYOUT,
-      "playbackRate:admin": 2,
-    });
-
-    const downloadPromise = frigateApp.page.waitForEvent("download");
-    await frigateApp.page
-      .getByRole("button", { name: "Export Settings" })
-      .click();
-    const download = await downloadPromise;
-    const contents = readFileSync((await download.path())!, "utf-8");
-
-    expect(JSON.parse(contents).sections.layouts.outdoor).toEqual(
-      LEGACY_OUTDOOR_LAYOUT,
-    );
-
-    await clearIdb(frigateApp.page);
-    await chooseImportText(frigateApp.page, contents);
-    await confirmImport(frigateApp.page);
-
-    expect(await readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY)).toEqual(
-      LEGACY_OUTDOOR_LAYOUT,
-    );
-    // the rest of the file must survive alongside it
-    expect(await readIdb(frigateApp.page, "playbackRate:admin")).toBe(2);
-  });
-
-  test("legacy layouts import turns natural aspect off so they display", async ({
-    frigateApp,
-  }) => {
-    test.skip(frigateApp.isMobile, "Layout import is desktop and tablet only");
-    // Bare-array layouts only render in bucketed mode; with natural aspect on
-    // they would be discarded and regenerated on the next dashboard visit. The
-    // import applies the mode the layouts were built for, and the file's own
-    // naturalAspectLayout preference must not override that.
-    await frigateApp.goto("/settings?page=uiSettings");
-    await writeIdb(frigateApp.page, { "naturalAspectLayout:admin": true });
-
-    await chooseImportFile(
-      frigateApp.page,
-      importPayload({
-        sections: {
-          layouts: { outdoor: LEGACY_OUTDOOR_LAYOUT },
-          streaming: {},
-          preferences: { naturalAspectLayout: true },
-        },
-      }),
-    );
-
-    const note = frigateApp.page.getByText(/standard tile sizing/);
-    await expect(note).toBeVisible();
-
-    // the note is about the layouts section, so it follows its switch
-    await frigateApp.page.getByText("Camera group layouts (1 group)").click();
-    await expect(note).toBeHidden();
-    await frigateApp.page.getByText("Camera group layouts (1 group)").click();
-    await expect(note).toBeVisible();
-
-    await confirmImport(frigateApp.page);
-
-    expect(await readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY)).toEqual(
-      LEGACY_OUTDOOR_LAYOUT,
-    );
-    expect(await readIdb(frigateApp.page, "naturalAspectLayout:admin")).toBe(
-      false,
-    );
-  });
-
-  test("natural aspect layouts import turns the setting on", async ({
-    frigateApp,
-  }) => {
-    test.skip(frigateApp.isMobile, "Layout import is desktop and tablet only");
-    await frigateApp.goto("/settings?page=uiSettings");
-
-    await chooseImportFile(
-      frigateApp.page,
-      importPayload({
-        sections: {
-          layouts: { outdoor: NATURAL_OUTDOOR_LAYOUT },
-          streaming: {},
-          preferences: {},
-        },
-      }),
-    );
-
-    await expect(
-      frigateApp.page.getByText(/camera aspect ratio tile sizing/),
-    ).toBeVisible();
-
-    await confirmImport(frigateApp.page);
-
-    expect(await readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY)).toEqual(
-      NATURAL_OUTDOOR_LAYOUT,
-    );
-    expect(await readIdb(frigateApp.page, "naturalAspectLayout:admin")).toBe(
-      true,
-    );
-  });
-
   test("omits settings that were never stored", async ({ frigateApp }) => {
     await frigateApp.goto("/settings?page=uiSettings");
 
@@ -363,15 +190,12 @@ test.describe("UI settings import/export @medium", () => {
     await expect(
       frigateApp.page.getByText("UI preferences (2 settings)"),
     ).toBeVisible();
-    // patio is layout-only, so its warning follows the layouts section
-    await expect(frigateApp.page.getByText(/patio/)).toBeVisible({
-      visible: !frigateApp.isMobile,
-    });
+    await expect(frigateApp.page.getByText(/patio/)).toBeVisible();
 
     await confirmImport(frigateApp.page);
 
     expect(await readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY)).toEqual(
-      frigateApp.isMobile ? null : OUTDOOR_LAYOUT,
+      OUTDOOR_LAYOUT,
     );
     expect(await readIdb(frigateApp.page, STREAMING_KEY)).toEqual(
       STREAMING_SETTINGS,
@@ -382,7 +206,6 @@ test.describe("UI settings import/export @medium", () => {
   test("hides the unknown-group warning when layouts are switched off", async ({
     frigateApp,
   }) => {
-    test.skip(frigateApp.isMobile, "Layout import is desktop and tablet only");
     await frigateApp.goto("/settings?page=uiSettings");
 
     // patio is a layout-only group absent from this server, so the warning
@@ -412,39 +235,7 @@ test.describe("UI settings import/export @medium", () => {
 
     expect(await readIdb(frigateApp.page, STREAMING_KEY)).toEqual({});
     expect(await readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY)).toEqual(
-      frigateApp.isMobile ? null : OUTDOOR_LAYOUT,
-    );
-  });
-
-  test("phones refuse layouts and say why @mobile", async ({ frigateApp }) => {
-    test.skip(!frigateApp.isMobile, "Phone-only");
-
-    await frigateApp.goto("/settings?page=uiSettings");
-    await writeIdb(frigateApp.page, { "naturalAspectLayout:admin": false });
-
-    await chooseImportFile(frigateApp.page, importPayload());
-
-    await expect(
-      frigateApp.page.getByText(/aren't imported on phones/),
-    ).toBeVisible();
-
-    // the section is still listed, but cannot be switched on
-    await expect(
-      frigateApp.page.getByText("Camera group layouts (2 groups)"),
-    ).toBeVisible();
-    await expect(
-      frigateApp.page.locator('[id="Camera group layouts (2 groups)"]'),
-    ).toBeDisabled();
-
-    await confirmImport(frigateApp.page);
-
-    expect(await readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY)).toBeNull();
-    expect(await readIdb(frigateApp.page, STREAMING_KEY)).toEqual(
-      STREAMING_SETTINGS,
-    );
-    // a layouts import is what flips this, so it must stay put
-    expect(await readIdb(frigateApp.page, "naturalAspectLayout:admin")).toBe(
-      false,
+      OUTDOOR_LAYOUT,
     );
   });
 
@@ -534,7 +325,7 @@ test.describe("UI settings import/export @medium", () => {
     await confirmImport(frigateApp.page);
 
     expect(await readIdb(frigateApp.page, OUTDOOR_LAYOUT_KEY)).toEqual(
-      frigateApp.isMobile ? null : OUTDOOR_LAYOUT,
+      OUTDOOR_LAYOUT,
     );
     expect(await readIdb(frigateApp.page, STREAMING_KEY)).toEqual(
       STREAMING_SETTINGS,

web/public/locales/en/common.json

@@ -131,7 +131,6 @@
     "close": "Close",
     "expand": "Expand",
     "collapse": "Collapse",
-    "clear": "Clear",
     "copy": "Copy",
     "copiedToClipboard": "Copied to clipboard",
     "back": "Back",

web/public/locales/en/components/player.json

@@ -45,7 +45,9 @@
       }
     },
     "decodedFrames": "Decoded Frames:",
-    "droppedFrameRate": "Dropped Frame Rate:"
+    "droppedFrameRate": "Dropped Frame Rate:",
+    "stream": "Stream:",
+    "streamAuto": "{{stream}} (auto)"
   },
   "toast": {
     "success": {

web/public/locales/en/config/cameras.json

@@ -238,6 +238,30 @@
       "label": "Live stream names",
       "description": "Mapping of configured stream names to restream/go2rtc names used for live playback."
     },
+    "transcode": {
+      "label": "Transcoded streams",
+      "description": "Lower-quality live streams transcoded on demand by go2rtc.",
+      "enabled": {
+        "label": "Enable transcoded streams",
+        "description": "Add lower-quality live streams that go2rtc transcodes in real time while someone is watching."
+      },
+      "source": {
+        "label": "Source stream",
+        "description": "go2rtc stream to transcode. Defaults to the first live stream."
+      },
+      "qualities": {
+        "label": "Qualities",
+        "description": "One transcoded stream is added per quality.",
+        "height": {
+          "label": "Height",
+          "description": "Output height in pixels; width follows the source aspect ratio."
+        },
+        "bitrate": {
+          "label": "Bitrate",
+          "description": "Target and maximum video bitrate in kbps."
+        }
+      }
+    },
     "height": {
       "label": "Live height",
       "description": "Height (pixels) to render the jsmpeg live stream in the Web UI; must be <= detect stream height."

web/public/locales/en/config/global.json

@@ -594,6 +594,30 @@
       "label": "Live stream names",
       "description": "Mapping of configured stream names to restream/go2rtc names used for live playback."
     },
+    "transcode": {
+      "label": "Transcoded streams",
+      "description": "Lower-quality live streams transcoded on demand by go2rtc.",
+      "enabled": {
+        "label": "Enable transcoded streams",
+        "description": "Add lower-quality live streams that go2rtc transcodes in real time while someone is watching."
+      },
+      "source": {
+        "label": "Source stream",
+        "description": "go2rtc stream to transcode. Defaults to the first live stream."
+      },
+      "qualities": {
+        "label": "Qualities",
+        "description": "One transcoded stream is added per quality.",
+        "height": {
+          "label": "Height",
+          "description": "Output height in pixels; width follows the source aspect ratio."
+        },
+        "bitrate": {
+          "label": "Bitrate",
+          "description": "Target and maximum video bitrate in kbps."
+        }
+      }
+    },
     "height": {
       "label": "Live height",
       "description": "Height (pixels) to render the jsmpeg live stream in the Web UI; must be <= detect stream height."

web/public/locales/en/views/live.json

@@ -132,6 +132,19 @@
   },
   "stream": {
     "title": "Stream",
+    "auto": {
+      "label": "Auto",
+      "tips": "Switches streams to match your connection",
+      "selected": "Auto · {{stream}}",
+      "floorLabel": "Low bandwidth",
+      "retry": "Try highest quality",
+      "reason": {
+        "bandwidth": "Playing {{stream}} because the connection couldn't keep up with a higher-quality stream",
+        "codec": "Playing {{stream}} because this browser can't play a higher-quality stream",
+        "saveData": "Playing {{stream}} because Data Saver is on",
+        "floor": "Playing the low-bandwidth feed because no stream could keep up"
+      }
+    },
     "audio": {
       "tips": {
         "title": "Audio must be output from your camera and configured in go2rtc for this stream."

web/public/locales/en/views/settings.json

@@ -167,11 +167,6 @@
         "label": "Always Show Camera Names",
         "desc": "Always show the camera names in a chip in the multi-camera live view dashboard."
       },
-      "naturalAspectLayout": {
-        "label": "Use Natural Aspect Ratios",
-        "desc": "On camera group live view dashboards, size each tile to its camera's own natural aspect ratio. When disabled, cameras are snapped to a standard wide, landscape, or tall tile shape.",
-        "descNote": "Toggling this setting on or off will clear the stored layout for all camera group live dashboards. Manual reconfiguration will be required."
-      },
       "liveFallbackTimeout": {
         "label": "Live Player Fallback Timeout",
         "desc": "When a camera's high quality live stream is unavailable, fall back to low bandwidth mode after this many seconds. Default: 3."
@@ -180,14 +175,12 @@
     "storedLayouts": {
       "title": "Stored Layouts",
       "desc": "The layout of cameras in a camera group can be dragged/resized. The positions are stored in your browser's local storage.",
-      "clearAll": "Clear All Layouts",
-      "clearConfirm": "This will clear the stored layout for every camera group in this browser. This cannot be undone."
+      "clearAll": "Clear All Layouts"
     },
     "cameraGroupStreaming": {
       "title": "Camera Group Streaming Settings",
       "desc": "Streaming settings for each camera group are stored in your browser's local storage.",
-      "clearAll": "Clear All Streaming Settings",
-      "clearConfirm": "This will clear the streaming settings for every camera group in this browser. This cannot be undone."
+      "clearAll": "Clear All Streaming Settings"
     },
     "backupRestore": {
       "title": "Backup & Restore",
@@ -202,9 +195,6 @@
         "desc": "Choose what to apply from this file. Frigate will reload when the import finishes.",
         "exportedFrom": "Exported {{date}} from Frigate config version {{version}}",
         "layouts_one": "Camera group layouts ({{count}} group)",
-        "layoutsPhone": "Camera group layouts aren't imported on phones, which always use the standard grid.",
-        "layoutsModeOn": "These layouts use camera aspect ratio tile sizing, so importing them will also turn on \"Use Natural Aspect Ratios\".",
-        "layoutsModeOff": "These layouts use standard tile sizing, so importing them will also turn off \"Use Natural Aspect Ratios\".",
         "layouts_other": "Camera group layouts ({{count}} groups)",
         "streaming_one": "Streaming settings ({{count}} camera)",
         "streaming_other": "Streaming settings ({{count}} cameras)",
@@ -1553,7 +1543,27 @@
       "noGo2rtcStreams": "No go2rtc streams configured",
       "availableStreams": "Available streams",
       "useCustom": "Use \"{{value}}\"",
-      "addStream": "Add stream"
+      "addStream": "Add stream",
+      "reorderHandle": "Drag to reorder",
+      "transcodedBadge": "Transcoded",
+      "autoOrder": "Auto order",
+      "autoOrderTips": "Measure each stream's bitrate and sort highest first",
+      "measuring": "Measuring…",
+      "rate": "{{kbps}} kbps",
+      "rateSet": "{{kbps}} kbps (set)",
+      "rateFailed": "Couldn't measure"
+    },
+    "liveTranscode": {
+      "title": "Transcoded streams",
+      "description": "Adds lower-quality streams that go2rtc transcodes in real time while someone is watching.",
+      "unavailable": "Transcoded streams need a go2rtc stream to read from. Add one under go2rtc streams first.",
+      "enable": "Enable transcoded streams",
+      "source": "Source stream",
+      "height": "Height",
+      "heightOption": "{{height}}p",
+      "bitrate": "Bitrate (kbps)",
+      "addQuality": "Add quality",
+      "removeQuality": "Remove quality"
     },
     "timezone": {
       "defaultOption": "Use browser timezone"
@@ -1788,6 +1798,7 @@
   "toast": {
     "success": "Settings saved successfully",
     "applied": "Settings applied successfully",
+    "go2rtcSyncFailed": "Saved, but go2rtc couldn't be updated. Restart Frigate to apply.",
     "successRestartRequired": "Settings saved successfully. Restart Frigate to apply your changes.",
     "error": "Failed to save settings",
     "validationError": "Validation failed: {{message}}",

web/src/components/camera/CameraImage.tsx

@@ -103,7 +103,7 @@ export default function CameraImage({
       )}
       {!imageLoaded && enabled ? (
         <div className="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center">
-          <ActivityIndicator className={"w-full [.bg-black_&]:text-white"} />
+          <ActivityIndicator />
         </div>
       ) : null}
     </div>

web/src/components/config-form/section-configs/live.ts

@@ -4,17 +4,18 @@ const live: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/live",
     restartRequired: [],
-    fieldOrder: ["streams", "height", "quality"],
+    fieldOrder: ["streams", "transcode", "height", "quality"],
     fieldGroups: {},
     hiddenFields: ["enabled_in_config"],
     advancedFields: ["height", "quality"],
   },
   global: {
     restartRequired: ["streams", "height", "quality"],
-    hiddenFields: ["streams"],
+    hiddenFields: ["streams", "transcode"],
   },
   camera: {
     restartRequired: ["height", "quality"],
+    orderedMaps: ["streams"],
     uiSchema: {
       streams: {
         "ui:field": "LiveStreamsField",
@@ -23,6 +24,13 @@ const live: SectionConfigOverrides = {
           suppressDescription: true,
         },
       },
+      transcode: {
+        "ui:field": "LiveTranscodeField",
+        "ui:options": {
+          label: false,
+          suppressDescription: true,
+        },
+      },
     },
   },
 };

web/src/components/config-form/sections/BaseSection.tsx

@@ -66,6 +66,8 @@ import {
   cameraUpdateTopicMap,
   globalCameraDefaultSections,
   buildOverrides,
+  applyOrderedMaps,
+  changedOrderedMapPaths,
   buildConfigDataForPath,
   flattenOverrides,
   getBaseCameraSectionValue,
@@ -121,6 +123,8 @@ export interface SectionConfig {
   messages?: ConditionalMessage[];
   /** Conditional messages displayed inline with specific fields */
   fieldMessages?: FieldConditionalMessage[];
+  /** Maps whose key order is saved (e.g. live stream ladder order) */
+  orderedMaps?: string[];
 }
 
 export interface BaseSectionProps {
@@ -488,6 +492,18 @@ export function ConfigSection({
     [rawFormData, sanitizeSectionData],
   );
 
+  const orderedMaps = sectionConfig.orderedMaps;
+  const buildSectionOverrides = useCallback(
+    (current: unknown, base: unknown, defaults: unknown) =>
+      applyOrderedMaps(
+        buildOverrides(current, base, defaults),
+        current,
+        base,
+        orderedMaps ?? [],
+      ),
+    [orderedMaps],
+  );
+
   // Clear pendingData whenever the section/camera key changes (e.g., switching
   // cameras) or when there is no pending data yet (initialization).
   // This prevents RJSF's initial onChange call from being treated as a user edit.
@@ -528,10 +544,12 @@ export function ConfigSection({
   // Track if there are unsaved changes
   const hasChanges = useMemo(() => {
     const pendingChanged = pendingData
-      ? !isEqual(formData, pendingData)
+      ? !isEqual(formData, pendingData) ||
+        changedOrderedMapPaths(pendingData, formData, orderedMaps ?? [])
+          .length > 0
       : false;
     return pendingChanged || extraHasChanges;
-  }, [formData, pendingData, extraHasChanges]);
+  }, [formData, pendingData, extraHasChanges, orderedMaps]);
 
   useEffect(() => {
     onStatusChange?.({
@@ -564,7 +582,7 @@ export function ConfigSection({
       }
       const sanitizedData = sanitizeSectionData(data as ConfigSectionData);
       const nextBaselineFormData = baselineSnapshot;
-      const overrides = buildOverrides(
+      const overrides = buildSectionOverrides(
         sanitizedData,
         compareBaseData,
         effectiveSchemaDefaults,
@@ -579,7 +597,7 @@ export function ConfigSection({
           return;
         }
       }
-      const dirty = buildOverrides(
+      const dirty = buildSectionOverrides(
         sanitizedData,
         nextBaselineFormData,
         undefined,
@@ -602,12 +620,24 @@ export function ConfigSection({
       setPendingOverrides,
       setDirtyOverrides,
       baselineSnapshot,
+      buildSectionOverrides,
     ],
   );
 
   const currentFormData = pendingData || formData;
   const effectiveBaselineFormData = baselineSnapshot;
 
+  // RJSF memoizes fields with an order-blind deep compare, so a pure reorder
+  // of an ordered map would not re-render; the key order breaks the tie
+  const orderedMapsKeyOrder = useMemo(
+    () =>
+      (orderedMaps ?? []).map((path) => {
+        const value = get(currentFormData, path);
+        return value && typeof value === "object" ? Object.keys(value) : [];
+      }),
+    [currentFormData, orderedMaps],
+  );
+
   // Build context for conditional messages
   const messageContext = useMemo<MessageConditionContext | undefined>(() => {
     if (!config || !currentFormData) return undefined;
@@ -636,7 +666,7 @@ export function ConfigSection({
     const sanitizedData = sanitizeSectionData(
       currentFormData as ConfigSectionData,
     );
-    return buildOverrides(
+    return buildSectionOverrides(
       sanitizedData,
       compareBaseData,
       effectiveSchemaDefaults,
@@ -646,6 +676,7 @@ export function ConfigSection({
     sanitizeSectionData,
     compareBaseData,
     effectiveSchemaDefaults,
+    buildSectionOverrides,
   ]);
 
   const effectiveOverrides = pendingData
@@ -684,7 +715,12 @@ export function ConfigSection({
           ? `cameras.${cameraName}.${effectiveSectionPath}`
           : effectiveSectionPath;
       const rawData = sanitizeSectionData(rawFormData);
-      const overrides = buildOverrides(
+      const replacePaths = changedOrderedMapPaths(
+        pendingData,
+        rawData,
+        orderedMaps ?? [],
+      ).map((path) => `${basePath}.${path}`);
+      const overrides = buildSectionOverrides(
         pendingData,
         rawData,
         effectiveSchemaDefaults,
@@ -711,10 +747,11 @@ export function ConfigSection({
           : requiresRestartForOverrides(sanitizedOverrides);
 
       const configData = buildConfigDataForPath(basePath, sanitizedOverrides);
-      await axios.put("config/set", {
+      const response = await axios.put("config/set", {
         requires_restart: needsRestart ? 1 : 0,
         update_topic: updateTopic,
         config_data: configData,
+        ...(replacePaths.length > 0 ? { replace_paths: replacePaths } : {}),
         ...(skipSave ? { skip_save: true } : {}),
       });
 
@@ -752,6 +789,8 @@ export function ConfigSection({
             ),
           },
         );
+      } else if (response.data?.go2rtc_synced === false) {
+        toast.warning(t("toast.go2rtcSyncFailed", { ns: "views/settings" }));
       } else {
         toast.success(
           t("toast.success", {
@@ -823,6 +862,8 @@ export function ConfigSection({
     requiresRestartForOverrides,
     skipSave,
     onSavingChange,
+    orderedMaps,
+    buildSectionOverrides,
   ]);
 
   // Handle reset to global/defaults - removes camera-level override or resets global to defaults
@@ -1030,6 +1071,7 @@ export function ConfigSection({
               setExtraHasChanges,
               overrides: uiOverrides as JsonValue | undefined,
               formData: currentFormData as ConfigSectionData,
+              orderedMapsKeyOrder,
               baselineFormData: effectiveBaselineFormData as ConfigSectionData,
               pendingDataBySection,
               onPendingDataChange,

web/src/components/config-form/theme/fields/LiveStreamsField.tsx

@@ -1,8 +1,12 @@
 import type { FieldPathList, FieldProps, RJSFSchema } from "@rjsf/utils";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import axios from "axios";
+import { Reorder, useDragControls } from "framer-motion";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
   Command,
@@ -16,16 +20,35 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { cn } from "@/lib/utils";
 import { Check, ChevronsUpDown, Plus } from "lucide-react";
-import { LuPlus, LuTrash2 } from "react-icons/lu";
+import {
+  LuArrowDownWideNarrow,
+  LuGripVertical,
+  LuPlus,
+  LuTrash2,
+} from "react-icons/lu";
 import { MapKeyInput } from "../components";
 import type { ConfigFormContext } from "@/types/configForm";
+import type { LiveTranscodeConfig } from "@/types/frigateConfig";
 import get from "lodash/get";
+import isEqual from "lodash/isEqual";
 import { isSubtreeModified } from "../utils";
+import {
+  isTranscodeStreamName,
+  transcodeBitrateFor,
+} from "@/utils/liveTranscode";
 
 type LiveStreamsData = Record<string, string>;
 
+// kbps measured by the server, or configured for a transcoded stream
+type StreamRate = { kbps: number; set: boolean } | { failed: true };
+
+function rateValue(rate: StreamRate | undefined): number {
+  return rate && "kbps" in rate ? rate.kbps : -1;
+}
+
 type StreamValueComboboxProps = {
   id: string;
   value: string;
@@ -156,6 +179,154 @@ function StreamValueCombobox({
   );
 }
 
+type StreamRowProps = {
+  entryKey: string;
+  value: string;
+  entryId: string;
+  data: LiveStreamsData;
+  generated: boolean;
+  rate?: StreamRate;
+  options: string[];
+  disabled?: boolean;
+  readonly?: boolean;
+  onRename: (oldKey: string, newKey: string) => void;
+  onUpdateValue: (key: string, value: string) => void;
+  onRemove: (key: string) => void;
+  onDragEnd: () => void;
+};
+
+function StreamRow({
+  entryKey,
+  value,
+  entryId,
+  data,
+  generated,
+  rate,
+  options,
+  disabled,
+  readonly,
+  onRename,
+  onUpdateValue,
+  onRemove,
+  onDragEnd,
+}: StreamRowProps) {
+  const { t } = useTranslation(["views/settings", "common"]);
+  const controls = useDragControls();
+  const locked = disabled || readonly;
+
+  const deleteLabel = t("button.delete", {
+    ns: "common",
+    defaultValue: "Delete",
+  });
+
+  let rateLabel: string | undefined;
+  if (rate && "failed" in rate) {
+    rateLabel = t("configForm.liveStreams.rateFailed", {
+      ns: "views/settings",
+    });
+  } else if (rate?.set) {
+    rateLabel = t("configForm.liveStreams.rateSet", {
+      ns: "views/settings",
+      kbps: rate.kbps,
+    });
+  } else if (rate) {
+    rateLabel = t("configForm.liveStreams.rate", {
+      ns: "views/settings",
+      kbps: rate.kbps,
+    });
+  }
+
+  return (
+    <Reorder.Item
+      as="div"
+      value={entryKey}
+      dragListener={false}
+      dragControls={controls}
+      onDragEnd={onDragEnd}
+      className="grid grid-cols-12 items-end gap-2 rounded-md border bg-background p-3"
+    >
+      <div className="col-span-12 flex items-end gap-1 md:col-span-5">
+        <button
+          type="button"
+          disabled={locked}
+          onPointerDown={(e) => controls.start(e)}
+          className="mb-2 cursor-grab touch-none rounded p-1 text-muted-foreground hover:text-primary active:cursor-grabbing disabled:cursor-not-allowed"
+          aria-label={t("configForm.liveStreams.reorderHandle", {
+            ns: "views/settings",
+          })}
+        >
+          <LuGripVertical className="size-4" />
+        </button>
+        <div className="flex-1 space-y-2">
+          <Label htmlFor={`${entryId}-key`}>
+            {t("configForm.liveStreams.streamNameLabel", {
+              ns: "views/settings",
+            })}
+          </Label>
+          <MapKeyInput
+            id={`${entryId}-key`}
+            value={entryKey}
+            placeholder={t("configForm.liveStreams.streamNamePlaceholder", {
+              ns: "views/settings",
+            })}
+            disabled={locked}
+            onCommit={(next) => onRename(entryKey, next)}
+            isKeyTaken={(next) =>
+              next !== entryKey &&
+              Object.prototype.hasOwnProperty.call(data, next)
+            }
+          />
+        </div>
+      </div>
+      <div className="col-span-10 space-y-2 md:col-span-6">
+        <Label htmlFor={`${entryId}-value`} className="flex items-center gap-2">
+          {t("configForm.liveStreams.go2rtcStreamLabel", {
+            ns: "views/settings",
+          })}
+          {generated && (
+            <Badge variant="secondary">
+              {t("configForm.liveStreams.transcodedBadge", {
+                ns: "views/settings",
+              })}
+            </Badge>
+          )}
+        </Label>
+        {generated ? (
+          <Input id={`${entryId}-value`} value={value} disabled readOnly />
+        ) : (
+          <StreamValueCombobox
+            id={`${entryId}-value`}
+            value={value}
+            options={options}
+            disabled={disabled}
+            readonly={readonly}
+            onChange={(next) => onUpdateValue(entryKey, next)}
+          />
+        )}
+        {rateLabel && (
+          <p className="text-xs text-muted-foreground">{rateLabel}</p>
+        )}
+      </div>
+      <div className="col-span-2 flex justify-end md:col-span-1">
+        {!generated && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => onRemove(entryKey)}
+            disabled={locked}
+            aria-label={deleteLabel}
+            title={deleteLabel}
+            className="shrink-0"
+          >
+            <LuTrash2 className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </Reorder.Item>
+  );
+}
+
 export function LiveStreamsField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
@@ -166,6 +337,7 @@ export function LiveStreamsField(props: FieldProps) {
     (formContext?.level === "camera" ? "config/cameras" : "config/global");
   const { t: fallbackT } = useTranslation(["common", configNamespace]);
   const t = formContext?.t ?? fallbackT;
+  const { t: tSettings } = useTranslation(["views/settings"]);
 
   const data: LiveStreamsData = useMemo(() => {
     if (!formData || typeof formData !== "object" || Array.isArray(formData)) {
@@ -175,6 +347,7 @@ export function LiveStreamsField(props: FieldProps) {
   }, [formData]);
 
   const entries = useMemo(() => Object.entries(data), [data]);
+  const keys = useMemo(() => entries.map(([key]) => key), [entries]);
 
   const id = idSchema?.$id ?? props.name;
   const sectionPrefix = formContext?.sectionI18nPrefix;
@@ -185,12 +358,22 @@ export function LiveStreamsField(props: FieldProps) {
     t(`${sectionPrefix}.${id}.description`) ??
     (schema as RJSFSchema).description;
 
+  const camera = formContext?.cameraName ?? "";
+  const transcode = formContext?.formData?.transcode as
+    LiveTranscodeConfig | undefined;
+
   const go2rtcStreamNames = useMemo<string[]>(() => {
     const streams = formContext?.fullConfig?.go2rtc?.streams;
     if (!streams || typeof streams !== "object") return [];
     return Object.keys(streams).sort();
   }, [formContext?.fullConfig?.go2rtc?.streams]);
 
+  const isGenerated = useCallback(
+    (name: string) =>
+      isTranscodeStreamName(camera, name) && !go2rtcStreamNames.includes(name),
+    [camera, go2rtcStreamNames],
+  );
+
   const emptyPath = useMemo(() => [] as FieldPathList, []);
   const fieldPath =
     (props as { fieldPathId?: { path?: FieldPathList } }).fieldPathId?.path ??
@@ -210,6 +393,51 @@ export function LiveStreamsField(props: FieldProps) {
     );
   }, [fieldPath, formContext, data]);
 
+  const commitOrder = useCallback(
+    (order: string[]) => {
+      const next: LiveStreamsData = {};
+      order.forEach((key) => {
+        next[key] = data[key];
+      });
+      onChange(next, fieldPath);
+    },
+    [data, fieldPath, onChange],
+  );
+
+  // rows keep one React key through renames, so the name input stays mounted
+  const rowIdsRef = useRef(new Map<string, number>());
+  const nextRowIdRef = useRef(0);
+
+  const rowIdFor = (key: string) => {
+    let id = rowIdsRef.current.get(key);
+
+    if (id === undefined) {
+      id = nextRowIdRef.current++;
+      rowIdsRef.current.set(key, id);
+    }
+
+    return id;
+  };
+
+  // local order while dragging; committed to the form on drop
+  const [dragOrder, setDragOrder] = useState<string[] | null>(null);
+  const dragOrderRef = useRef<string[] | null>(null);
+
+  const handleReorder = useCallback((next: string[]) => {
+    dragOrderRef.current = next;
+    setDragOrder(next);
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    const next = dragOrderRef.current;
+    dragOrderRef.current = null;
+    setDragOrder(null);
+
+    if (next && !isEqual(next, keys)) {
+      commitOrder(next);
+    }
+  }, [commitOrder, keys]);
+
   const handleAddEntry = useCallback(() => {
     const next = { ...data, "": "" };
     onChange(next, fieldPath);
@@ -227,6 +455,13 @@ export function LiveStreamsField(props: FieldProps) {
   const handleRenameKey = useCallback(
     (oldKey: string, newKey: string) => {
       if (oldKey === newKey) return;
+
+      const id = rowIdsRef.current.get(oldKey);
+      if (id !== undefined) {
+        rowIdsRef.current.delete(oldKey);
+        rowIdsRef.current.set(newKey, id);
+      }
+
       const next: LiveStreamsData = {};
       for (const [k, v] of Object.entries(data)) {
         if (k === oldKey) {
@@ -248,24 +483,76 @@ export function LiveStreamsField(props: FieldProps) {
     [data, fieldPath, onChange],
   );
 
+  // Auto order commits after measuring, so edits made meanwhile must survive
+  const dataRef = useRef(data);
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
+  const [measurement, setMeasurement] = useState<{
+    data: LiveStreamsData;
+    transcode: LiveTranscodeConfig | undefined;
+    rates: Record<string, StreamRate>;
+  } | null>(null);
+  const [measuring, setMeasuring] = useState(false);
+
+  // rates describe the streams as measured; a later edit hides them, while a
+  // reorder alone keeps them since isEqual ignores key order
+  const rates =
+    measurement &&
+    isEqual(measurement.data, data) &&
+    isEqual(measurement.transcode, transcode)
+      ? measurement.rates
+      : {};
+
+  const handleAutoOrder = useCallback(async () => {
+    setMeasuring(true);
+
+    const measured = await Promise.all(
+      entries.map(async ([, name]): Promise<[string, StreamRate]> => {
+        const setRate = transcodeBitrateFor(camera, name, transcode);
+
+        if (setRate !== undefined) {
+          return [name, { kbps: setRate, set: true }];
+        }
+
+        try {
+          const response = await axios.get(
+            `go2rtc/streams/${encodeURIComponent(name)}/bitrate`,
+          );
+          return [name, { kbps: response.data.kbps, set: false }];
+        } catch {
+          return [name, { failed: true }];
+        }
+      }),
+    );
+
+    const next = Object.fromEntries(measured);
+    const latest = dataRef.current;
+    setMeasurement({ data: latest, transcode, rates: next });
+    setMeasuring(false);
+
+    // stable sort, so ties and unmeasured rows keep their order; rows added
+    // or renamed while measuring go last
+    const sorted = [...entries]
+      .sort(([, a], [, b]) => rateValue(next[b]) - rateValue(next[a]))
+      .map(([key]) => key)
+      .filter((key) => key in latest);
+    const order = [
+      ...sorted,
+      ...Object.keys(latest).filter((key) => !sorted.includes(key)),
+    ];
+
+    if (!isEqual(order, Object.keys(latest))) {
+      onChange(
+        Object.fromEntries(order.map((key) => [key, latest[key]])),
+        fieldPath,
+      );
+    }
+  }, [camera, entries, fieldPath, onChange, transcode]);
+
   const baseId = idSchema?.$id || "live_streams";
-  const deleteLabel = t("button.delete", {
-    ns: "common",
-    defaultValue: "Delete",
-  });
-  const streamNameLabel = t("configForm.liveStreams.streamNameLabel", {
-    ns: "views/settings",
-  });
-  const streamNamePlaceholder = t(
-    "configForm.liveStreams.streamNamePlaceholder",
-    { ns: "views/settings" },
-  );
-  const go2rtcStreamLabel = t("configForm.liveStreams.go2rtcStreamLabel", {
-    ns: "views/settings",
-  });
-  const addStreamLabel = t("configForm.liveStreams.addStream", {
-    ns: "views/settings",
-  });
+  const order = dragOrder ?? keys;
 
   return (
     <Card className="w-full">
@@ -278,57 +565,34 @@ export function LiveStreamsField(props: FieldProps) {
         )}
       </CardHeader>
       <CardContent className="space-y-3 p-4 pt-0">
-        {entries.map(([key, value], entryIndex) => {
-          const entryId = `${baseId}-${entryIndex}`;
-          return (
-            <div
-              key={entryIndex}
-              className="grid grid-cols-12 items-end gap-2 rounded-md border p-3"
-            >
-              <div className="col-span-12 space-y-2 md:col-span-5">
-                <Label htmlFor={`${entryId}-key`}>{streamNameLabel}</Label>
-                <MapKeyInput
-                  id={`${entryId}-key`}
-                  value={key}
-                  placeholder={streamNamePlaceholder}
-                  disabled={disabled || readonly}
-                  onCommit={(next) => handleRenameKey(key, next)}
-                  isKeyTaken={(next) =>
-                    next !== key &&
-                    Object.prototype.hasOwnProperty.call(data, next)
-                  }
-                />
-              </div>
-              <div className="col-span-10 space-y-2 md:col-span-6">
-                <Label htmlFor={`${entryId}-value`}>{go2rtcStreamLabel}</Label>
-                <StreamValueCombobox
-                  id={`${entryId}-value`}
-                  value={value}
-                  options={go2rtcStreamNames}
-                  disabled={disabled}
-                  readonly={readonly}
-                  onChange={(next) => handleUpdateValue(key, next)}
-                />
-              </div>
-              <div className="col-span-2 flex justify-end md:col-span-1">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => handleRemoveEntry(key)}
-                  disabled={disabled || readonly}
-                  aria-label={deleteLabel}
-                  title={deleteLabel}
-                  className="shrink-0"
-                >
-                  <LuTrash2 className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          );
-        })}
+        <Reorder.Group
+          as="div"
+          axis="y"
+          values={order}
+          onReorder={handleReorder}
+          className="space-y-3"
+        >
+          {order.map((key, entryIndex) => (
+            <StreamRow
+              key={rowIdFor(key)}
+              entryKey={key}
+              value={data[key] ?? ""}
+              entryId={`${baseId}-${entryIndex}`}
+              data={data}
+              generated={isGenerated(data[key] ?? "")}
+              rate={rates[data[key] ?? ""]}
+              options={go2rtcStreamNames}
+              disabled={disabled}
+              readonly={readonly}
+              onRename={handleRenameKey}
+              onUpdateValue={handleUpdateValue}
+              onRemove={handleRemoveEntry}
+              onDragEnd={handleDragEnd}
+            />
+          ))}
+        </Reorder.Group>
 
-        <div>
+        <div className="flex flex-wrap gap-2">
           <Button
             type="button"
             variant="outline"
@@ -338,7 +602,25 @@ export function LiveStreamsField(props: FieldProps) {
             className="gap-2"
           >
             <LuPlus className="h-4 w-4" />
-            {addStreamLabel}
+            {tSettings("configForm.liveStreams.addStream")}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleAutoOrder}
+            disabled={disabled || readonly || measuring || entries.length < 2}
+            title={tSettings("configForm.liveStreams.autoOrderTips")}
+            className="gap-2"
+          >
+            {measuring ? (
+              <ActivityIndicator className="size-4" />
+            ) : (
+              <LuArrowDownWideNarrow className="h-4 w-4" />
+            )}
+            {measuring
+              ? tSettings("configForm.liveStreams.measuring")
+              : tSettings("configForm.liveStreams.autoOrder")}
           </Button>
         </div>
       </CardContent>

web/src/components/config-form/theme/fields/LiveTranscodeField.tsx

@@ -0,0 +1,280 @@
+import type { FieldPathList, FieldProps } from "@rjsf/utils";
+import { useCallback, useMemo } from "react";
+import get from "lodash/get";
+import { useTranslation } from "react-i18next";
+import { LuPlus, LuTrash2 } from "react-icons/lu";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ConfigFormContext } from "@/types/configForm";
+import type {
+  LiveTranscodeConfig,
+  LiveTranscodeQuality,
+} from "@/types/frigateConfig";
+import {
+  TRANSCODE_HEIGHTS,
+  defaultTranscodeBitrate,
+  reconcileTranscodeStreams,
+} from "@/utils/liveTranscode";
+
+const EMPTY_TRANSCODE: LiveTranscodeConfig = {
+  enabled: false,
+  source: null,
+  qualities: [],
+};
+
+// presets plus a height set in yaml, minus heights other rows use
+function heightOptions(current: number, used: number[]): number[] {
+  return [...new Set([...TRANSCODE_HEIGHTS, current])]
+    .filter((height) => height === current || !used.includes(height))
+    .sort((a, b) => b - a);
+}
+
+export function LiveTranscodeField(props: FieldProps) {
+  const { formData, onChange, idSchema, disabled, readonly } = props;
+  const formContext = props.registry?.formContext as
+    ConfigFormContext | undefined;
+  const { t } = useTranslation(["views/settings"]);
+
+  const transcode =
+    (formData as LiveTranscodeConfig | undefined) ?? EMPTY_TRANSCODE;
+
+  const emptyPath = useMemo(() => [] as FieldPathList, []);
+  const fieldPath =
+    (props as { fieldPathId?: { path?: FieldPathList } }).fieldPathId?.path ??
+    emptyPath;
+
+  const camera = formContext?.cameraName ?? "";
+  const streams = useMemo(
+    () => (formContext?.formData?.streams ?? {}) as Record<string, string>,
+    [formContext?.formData?.streams],
+  );
+  const go2rtcStreams = useMemo(
+    () => Object.keys(formContext?.fullConfig?.go2rtc?.streams ?? {}),
+    [formContext?.fullConfig?.go2rtc?.streams],
+  );
+  const sources = useMemo(
+    () =>
+      [...new Set(Object.values(streams))].filter((name) =>
+        go2rtcStreams.includes(name),
+      ),
+    [streams, go2rtcStreams],
+  );
+
+  const savedSource = get(formContext?.baselineFormData, [
+    ...fieldPath,
+    "source",
+  ]) as string | null | undefined;
+
+  const available = sources.length > 0;
+  const locked = disabled || readonly || !available;
+  const baseId = idSchema?.$id || "live_transcode";
+
+  // the stream list follows the transcode config in the same form change
+  const update = useCallback(
+    (next: LiveTranscodeConfig) => {
+      onChange(next, fieldPath);
+      onChange(
+        reconcileTranscodeStreams(camera, streams, next, go2rtcStreams),
+        [...fieldPath.slice(0, -1), "streams"],
+      );
+    },
+    [camera, fieldPath, go2rtcStreams, onChange, streams],
+  );
+
+  const updateQuality = useCallback(
+    (index: number, quality: LiveTranscodeQuality) => {
+      const qualities = [...transcode.qualities];
+      qualities[index] = quality;
+      update({ ...transcode, qualities });
+    },
+    [transcode, update],
+  );
+
+  const addQuality = useCallback(() => {
+    const used = new Set(transcode.qualities.map((q) => q.height));
+    const height = TRANSCODE_HEIGHTS.find((h) => !used.has(h));
+
+    if (height === undefined) return;
+
+    update({
+      ...transcode,
+      qualities: [
+        ...transcode.qualities,
+        { height, bitrate: defaultTranscodeBitrate(height) },
+      ],
+    });
+  }, [transcode, update]);
+
+  const removeQuality = useCallback(
+    (index: number) =>
+      update({
+        ...transcode,
+        qualities: transcode.qualities.filter((_, i) => i !== index),
+      }),
+    [transcode, update],
+  );
+
+  const usedHeights = transcode.qualities.map((q) => q.height);
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="p-4">
+        <CardTitle className="text-sm">
+          {t("configForm.liveTranscode.title")}
+        </CardTitle>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {available
+            ? t("configForm.liveTranscode.description")
+            : t("configForm.liveTranscode.unavailable")}
+        </p>
+      </CardHeader>
+      <CardContent className="space-y-4 p-4 pt-0">
+        <div className="flex items-center gap-3">
+          <Switch
+            id={`${baseId}-enabled`}
+            checked={transcode.enabled}
+            disabled={locked}
+            onCheckedChange={(enabled) =>
+              update({
+                ...transcode,
+                enabled,
+                // pin the shown source so reordering streams can't change it;
+                // turning off drops the pin
+                source: enabled
+                  ? (transcode.source ?? sources[0])
+                  : savedSource,
+              })
+            }
+          />
+          <Label htmlFor={`${baseId}-enabled`}>
+            {t("configForm.liveTranscode.enable")}
+          </Label>
+        </div>
+
+        {transcode.enabled && available && (
+          <>
+            <div className="space-y-2">
+              <Label htmlFor={`${baseId}-source`}>
+                {t("configForm.liveTranscode.source")}
+              </Label>
+              <Select
+                value={transcode.source ?? sources[0]}
+                disabled={locked}
+                onValueChange={(source) => update({ ...transcode, source })}
+              >
+                <SelectTrigger id={`${baseId}-source`} className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {sources.map((source) => (
+                    <SelectItem key={source} value={source}>
+                      {source}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {transcode.qualities.map((quality, index) => (
+              <div
+                key={quality.height}
+                className="grid grid-cols-12 items-end gap-2 rounded-md border p-3"
+              >
+                <div className="col-span-5 space-y-2">
+                  <Label htmlFor={`${baseId}-${index}-height`}>
+                    {t("configForm.liveTranscode.height")}
+                  </Label>
+                  <Select
+                    value={String(quality.height)}
+                    disabled={locked}
+                    onValueChange={(value) =>
+                      updateQuality(index, {
+                        height: Number(value),
+                        bitrate: defaultTranscodeBitrate(Number(value)),
+                      })
+                    }
+                  >
+                    <SelectTrigger id={`${baseId}-${index}-height`}>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {heightOptions(quality.height, usedHeights).map(
+                        (height) => (
+                          <SelectItem key={height} value={String(height)}>
+                            {t("configForm.liveTranscode.heightOption", {
+                              height,
+                            })}
+                          </SelectItem>
+                        ),
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="col-span-5 space-y-2">
+                  <Label htmlFor={`${baseId}-${index}-bitrate`}>
+                    {t("configForm.liveTranscode.bitrate")}
+                  </Label>
+                  <Input
+                    id={`${baseId}-${index}-bitrate`}
+                    type="number"
+                    min={64}
+                    value={quality.bitrate}
+                    disabled={locked}
+                    onChange={(e) => {
+                      // an empty input would save 0, which the backend rejects
+                      if (e.target.value === "") return;
+
+                      updateQuality(index, {
+                        ...quality,
+                        bitrate: Number(e.target.value),
+                      });
+                    }}
+                  />
+                </div>
+                <div className="col-span-2 flex justify-end">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    disabled={locked}
+                    onClick={() => removeQuality(index)}
+                    aria-label={t("configForm.liveTranscode.removeQuality")}
+                    title={t("configForm.liveTranscode.removeQuality")}
+                  >
+                    <LuTrash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="gap-2"
+              disabled={
+                locked || usedHeights.length >= TRANSCODE_HEIGHTS.length
+              }
+              onClick={addQuality}
+            >
+              <LuPlus className="h-4 w-4" />
+              {t("configForm.liveTranscode.addQuality")}
+            </Button>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default LiveTranscodeField;

web/src/components/config-form/theme/fields/index.ts

@@ -3,3 +3,4 @@ export { LayoutGridField } from "./LayoutGridField";
 export { ModelsField } from "./ModelsField";
 export { ReplaceRulesField } from "./ReplaceRulesField";
 export { LiveStreamsField } from "./LiveStreamsField";
+export { LiveTranscodeField } from "./LiveTranscodeField";

web/src/components/config-form/theme/frigateTheme.ts

@@ -57,6 +57,7 @@ import { CameraInputsField } from "./fields/CameraInputsField";
 import { DictAsYamlField } from "./fields/DictAsYamlField";
 import { KnownPlatesField } from "./fields/KnownPlatesField";
 import { LiveStreamsField } from "./fields/LiveStreamsField";
+import { LiveTranscodeField } from "./fields/LiveTranscodeField";
 
 export interface FrigateTheme {
   widgets: RegistryWidgetsType;
@@ -121,5 +122,6 @@ export const frigateTheme: FrigateTheme = {
     DictAsYamlField: DictAsYamlField,
     KnownPlatesField: KnownPlatesField,
     LiveStreamsField: LiveStreamsField,
+    LiveTranscodeField: LiveTranscodeField,
   },
 };

web/src/components/overlay/ImageShadowOverlay.tsx

@@ -12,13 +12,13 @@ export function ImageShadowOverlay({
     <>
       <div
         className={cn(
-          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/20 to-transparent",
+          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent",
           upperClassName,
         )}
       />
       <div
         className={cn(
-          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full bg-gradient-to-t from-black/20 to-transparent",
+          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent",
           lowerClassName,
         )}
       />

web/src/components/overlay/dialog/ImportUiSettingsDialog.tsx

@@ -10,12 +10,10 @@ import {
 } from "@/components/ui/dialog";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { LuFileJson, LuInfo, LuTriangleAlert } from "react-icons/lu";
-import { isMobileOnly } from "react-device-detect";
+import { LuTriangleAlert } from "react-icons/lu";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import {
-  importedLayoutsNaturalAspect,
   ImportSummary,
   TransferSection,
   UiSettingsFile,
@@ -27,7 +25,6 @@ type ImportUiSettingsDialogProps = {
   fileName: string;
   file: UiSettingsFile;
   summary: ImportSummary;
-  currentNaturalAspect: boolean;
   onConfirm: (sections: Record<TransferSection, boolean>) => Promise<void>;
 };
 
@@ -37,7 +34,6 @@ export default function ImportUiSettingsDialog({
   fileName,
   file,
   summary,
-  currentNaturalAspect,
   onConfirm,
 }: ImportUiSettingsDialogProps) {
   const { t } = useTranslation(["views/settings", "common"]);
@@ -45,9 +41,7 @@ export default function ImportUiSettingsDialog({
 
   const available = useMemo(
     () => ({
-      // phones use the static grid, so a saved grid layout has nothing to
-      // apply to and would only flip the tile sizing mode behind the scenes
-      layouts: !isMobileOnly && summary.layoutGroupCount > 0,
+      layouts: summary.layoutGroupCount > 0,
       streaming: summary.streamingCameraCount > 0,
       preferences: summary.preferenceCount > 0,
     }),
@@ -96,16 +90,6 @@ export default function ImportUiSettingsDialog({
     [sections.streaming, summary.unknownCameras],
   );
 
-  // importing layouts also applies the tile-sizing mode they were built for
-  const layoutsModeChange = useMemo(() => {
-    if (!sections.layouts) {
-      return null;
-    }
-
-    const mode = importedLayoutsNaturalAspect(file);
-    return mode === null || mode === currentNaturalAspect ? null : mode;
-  }, [sections.layouts, file, currentNaturalAspect]);
-
   const handleConfirm = useCallback(async () => {
     setIsImporting(true);
     await onConfirm(sections);
@@ -129,103 +113,74 @@ export default function ImportUiSettingsDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          <div className="flex items-start gap-3 rounded-lg bg-secondary p-3">
-            <LuFileJson className="mt-0.5 size-5 shrink-0 text-secondary-foreground" />
-            <div className="min-w-0">
-              <p className="break-all text-base font-medium text-primary-variant">
-                {fileName}
-              </p>
-              <p className="text-xs text-muted-foreground">
-                {t("general.backupRestore.importDialog.exportedFrom", {
-                  date: exportedDate,
-                  version: file.frigate_version,
-                })}
-              </p>
-            </div>
-          </div>
-
-          <div className="space-y-2.5">
-            <FilterSwitch
-              label={t("general.backupRestore.importDialog.layouts", {
-                count: summary.layoutGroupCount,
-              })}
-              isChecked={sections.layouts}
-              disabled={!available.layouts || isImporting}
-              onCheckedChange={(checked) =>
-                setSections((prev) => ({ ...prev, layouts: checked }))
-              }
-            />
-            <FilterSwitch
-              label={t("general.backupRestore.importDialog.streaming", {
-                count: summary.streamingCameraCount,
-              })}
-              isChecked={sections.streaming}
-              disabled={!available.streaming || isImporting}
-              onCheckedChange={(checked) =>
-                setSections((prev) => ({ ...prev, streaming: checked }))
-              }
-            />
-            <FilterSwitch
-              label={t("general.backupRestore.importDialog.preferences", {
-                count: summary.preferenceCount,
-              })}
-              isChecked={sections.preferences}
-              disabled={!available.preferences || isImporting}
-              onCheckedChange={(checked) =>
-                setSections((prev) => ({ ...prev, preferences: checked }))
-              }
-            />
-          </div>
-
-          {isMobileOnly && summary.layoutGroupCount > 0 && (
-            <Alert variant="info">
-              <LuInfo className="size-5" />
-              <AlertDescription>
-                {t("general.backupRestore.importDialog.layoutsPhone")}
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {layoutsModeChange !== null && (
-            <Alert variant="info">
-              <LuInfo className="size-5" />
-              <AlertDescription>
-                {t(
-                  layoutsModeChange
-                    ? "general.backupRestore.importDialog.layoutsModeOn"
-                    : "general.backupRestore.importDialog.layoutsModeOff",
-                )}
-              </AlertDescription>
-            </Alert>
-          )}
-
-          {(visibleUnknownGroups.length > 0 ||
-            visibleUnknownCameras.length > 0) && (
-            <Alert variant="warning">
-              <LuTriangleAlert className="size-5" />
-              <AlertDescription className="space-y-2">
-                {visibleUnknownGroups.length > 0 && (
-                  <p>
-                    {t("general.backupRestore.importDialog.unknownGroups", {
-                      count: visibleUnknownGroups.length,
-                      groups: visibleUnknownGroups.join(", "),
-                    })}
-                  </p>
-                )}
-                {visibleUnknownCameras.length > 0 && (
-                  <p>
-                    {t("general.backupRestore.importDialog.unknownCameras", {
-                      count: visibleUnknownCameras.length,
-                      cameras: visibleUnknownCameras.join(", "),
-                    })}
-                  </p>
-                )}
-              </AlertDescription>
-            </Alert>
-          )}
+        <div className="space-y-0.5">
+          <p className="break-all text-base text-primary-variant">{fileName}</p>
+          <p className="text-sm text-muted-foreground">
+            {t("general.backupRestore.importDialog.exportedFrom", {
+              date: exportedDate,
+              version: file.frigate_version,
+            })}
+          </p>
         </div>
 
+        <div className="space-y-3">
+          <FilterSwitch
+            label={t("general.backupRestore.importDialog.layouts", {
+              count: summary.layoutGroupCount,
+            })}
+            isChecked={sections.layouts}
+            disabled={!available.layouts || isImporting}
+            onCheckedChange={(checked) =>
+              setSections((prev) => ({ ...prev, layouts: checked }))
+            }
+          />
+          <FilterSwitch
+            label={t("general.backupRestore.importDialog.streaming", {
+              count: summary.streamingCameraCount,
+            })}
+            isChecked={sections.streaming}
+            disabled={!available.streaming || isImporting}
+            onCheckedChange={(checked) =>
+              setSections((prev) => ({ ...prev, streaming: checked }))
+            }
+          />
+          <FilterSwitch
+            label={t("general.backupRestore.importDialog.preferences", {
+              count: summary.preferenceCount,
+            })}
+            isChecked={sections.preferences}
+            disabled={!available.preferences || isImporting}
+            onCheckedChange={(checked) =>
+              setSections((prev) => ({ ...prev, preferences: checked }))
+            }
+          />
+        </div>
+
+        {(visibleUnknownGroups.length > 0 ||
+          visibleUnknownCameras.length > 0) && (
+          <Alert variant="warning">
+            <LuTriangleAlert className="size-5" />
+            <AlertDescription className="space-y-2">
+              {visibleUnknownGroups.length > 0 && (
+                <p>
+                  {t("general.backupRestore.importDialog.unknownGroups", {
+                    count: visibleUnknownGroups.length,
+                    groups: visibleUnknownGroups.join(", "),
+                  })}
+                </p>
+              )}
+              {visibleUnknownCameras.length > 0 && (
+                <p>
+                  {t("general.backupRestore.importDialog.unknownCameras", {
+                    count: visibleUnknownCameras.length,
+                    cameras: visibleUnknownCameras.join(", "),
+                  })}
+                </p>
+              )}
+            </AlertDescription>
+          </Alert>
+        )}
+
         <DialogFooter>
           <Button
             aria-label={t("button.cancel", { ns: "common" })}
@@ -243,7 +198,7 @@ export default function ImportUiSettingsDialog({
           >
             {isImporting ? (
               <div className="flex flex-row items-center gap-2">
-                <ActivityIndicator className="size-4" />
+                <ActivityIndicator />
                 <span>{t("general.backupRestore.importDialog.confirm")}</span>
               </div>
             ) : (

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -29,10 +29,22 @@ export default function BirdseyeLivePlayer({
 }: LivePlayerProps) {
   let player;
   if (liveMode == "webrtc") {
-    player = <WebRtcPlayer className="size-full" camera="birdseye" pip={pip} />;
+    player = (
+      <WebRtcPlayer
+        className={`size-full rounded-lg md:rounded-2xl`}
+        camera="birdseye"
+        pip={pip}
+      />
+    );
   } else if (liveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
-      player = <MSEPlayer className="size-full" camera="birdseye" pip={pip} />;
+      player = (
+        <MSEPlayer
+          className={`size-full rounded-lg md:rounded-2xl`}
+          camera="birdseye"
+          pip={pip}
+        />
+      );
     } else {
       player = (
         <div className="w-5xl text-center text-sm">
@@ -43,7 +55,7 @@ export default function BirdseyeLivePlayer({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="flex size-full justify-center overflow-hidden"
+        className="flex size-full justify-center overflow-hidden rounded-lg md:rounded-2xl"
         camera="birdseye"
         width={birdseyeConfig.width}
         height={birdseyeConfig.height}
@@ -53,31 +65,22 @@ export default function BirdseyeLivePlayer({
       />
     );
   } else {
-    player = <ActivityIndicator className="w-full [.bg-black_&]:text-white" />;
+    player = <ActivityIndicator />;
   }
 
   return (
     <div
       ref={containerRef}
       className={cn(
-        "relative flex w-full cursor-pointer justify-center overflow-hidden rounded-lg md:rounded-2xl",
+        "relative flex w-full cursor-pointer justify-center",
         className,
       )}
       onClick={onClick}
     >
-      <div
-        className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center [container-type:size]"
-        style={
-          {
-            "--pic-ar":
-              (birdseyeConfig.width || 1) / (birdseyeConfig.height || 1),
-          } as React.CSSProperties
-        }
-      >
-        <div className="relative aspect-[var(--pic-ar)] h-auto w-[min(100%,calc(100cqh*var(--pic-ar)))]">
-          <ImageShadowOverlay />
-        </div>
-      </div>
+      <ImageShadowOverlay
+        upperClassName="md:rounded-2xl"
+        lowerClassName="md:rounded-2xl"
+      />
       <div className="size-full" ref={playerRef}>
         {player}
       </div>

web/src/components/player/LivePlayer.tsx

@@ -10,6 +10,7 @@ import { MdCircle } from "react-icons/md";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { useCameraActivity } from "@/hooks/use-camera-activity";
 import {
+  LiveHealthSample,
   LivePlayerError,
   TwoWayTalkError,
   LivePlayerMode,
@@ -52,9 +53,10 @@ type LivePlayerProps = {
   onClick?: () => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
+  onHealthSample?: (sample: LiveHealthSample) => void;
+  streamAuto?: boolean;
   onMicrophoneError?: (error: TwoWayTalkError) => void;
   onResetLiveMode?: () => void;
-  onLiveAspectChange?: (aspectRatio: number | undefined) => void;
 };
 
 export default function LivePlayer({
@@ -79,9 +81,10 @@ export default function LivePlayer({
   onClick,
   setFullResolution,
   onError,
+  onHealthSample,
+  streamAuto = false,
   onMicrophoneError,
   onResetLiveMode,
-  onLiveAspectChange,
 }: LivePlayerProps) {
   const { t } = useTranslation(["components/player"]);
 
@@ -109,6 +112,14 @@ export default function LivePlayer({
     droppedFrameRate: 0, // percentage
   });
 
+  const streamLabel = useMemo(
+    () =>
+      Object.keys(cameraConfig.live.streams).find(
+        (label) => cameraConfig.live.streams[label] === streamName,
+      ),
+    [cameraConfig.live.streams, streamName],
+  );
+
   // camera activity
 
   const {
@@ -129,37 +140,6 @@ export default function LivePlayer({
   // camera live state
 
   const [liveReady, setLiveReady] = useState(false);
-  const [liveAspect, setLiveAspect] = useState<number | undefined>();
-
-  const handleFullResolution = useCallback(
-    (value: React.SetStateAction<VideoResolutionType>) => {
-      setFullResolution?.(value);
-
-      if (typeof value === "function") {
-        return;
-      }
-
-      setLiveAspect(
-        value.width && value.height ? value.width / value.height : undefined,
-      );
-    },
-    [setFullResolution],
-  );
-
-  useEffect(() => {
-    onLiveAspectChange?.(liveReady ? liveAspect : undefined);
-  }, [liveReady, liveAspect, onLiveAspectChange]);
-
-  // The card can be a different shape than the picture (a bucketed tile, or a
-  // still whose detect aspect differs from the stream), so overlays that are
-  // meant to sit on the image have to be fitted to it rather than to the card.
-  const pictureAspect = useMemo(() => {
-    if (liveReady && liveAspect) {
-      return liveAspect;
-    }
-    const { width, height } = cameraConfig.detect;
-    return width && height ? width / height : 16 / 9;
-  }, [liveReady, liveAspect, cameraConfig.detect]);
 
   const liveReadyRef = useRef(liveReady);
   const cameraActiveRef = useRef(cameraActive);
@@ -230,21 +210,17 @@ export default function LivePlayer({
   }, [preferredLiveMode]);
 
   const [key, setKey] = useState(0);
-  const prevStreamNameRef = useRef(streamName);
 
-  const resetPlayer = () => {
-    setLiveReady(false);
-    setKey((prevKey) => prevKey + 1);
-  };
-
-  useEffect(() => {
-    if (prevStreamNameRef.current !== streamName) {
-      prevStreamNameRef.current = streamName;
-      if (streamName) {
-        resetPlayer();
-      }
+  // the stream is part of the MSE and WebRTC keys, so a stream change
+  // remounts them in the same render and the new player is hidden until it
+  // plays. jsmpeg plays the camera, not the stream, and keeps playing
+  const [renderedStream, setRenderedStream] = useState(streamName);
+  if (renderedStream !== streamName) {
+    setRenderedStream(streamName);
+    if (preferredLiveMode !== "jsmpeg") {
+      setLiveReady(false);
     }
-  }, [streamName]);
+  }
 
   useEffect(() => {
     if (showStillWithoutActivity && !autoLive) {
@@ -294,13 +270,12 @@ export default function LivePlayer({
   } else if (preferredLiveMode == "webrtc") {
     player = (
       <WebRtcPlayer
-        key={"webrtc_" + key}
-        className={`size-full ${liveReady ? "" : "hidden"}`}
+        key={`webrtc_${streamName}_${key}`}
+        className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
         camera={streamName}
         playbackEnabled={cameraActive || liveReady}
         getStats={showStats}
         setStats={setStats}
-        setFullResolution={handleFullResolution}
         audioEnabled={playAudio}
         volume={volume}
         microphoneEnabled={micEnabled}
@@ -308,6 +283,7 @@ export default function LivePlayer({
         onPlaying={playerIsPlaying}
         pip={pip}
         onError={onError}
+        onHealthSample={onHealthSample}
         onMicrophoneError={onMicrophoneError}
       />
     );
@@ -315,8 +291,8 @@ export default function LivePlayer({
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
         <MSEPlayer
-          key={"mse_" + key}
-          className={`size-full ${liveReady ? "" : "hidden"}`}
+          key={`mse_${streamName}_${key}`}
+          className={`size-full rounded-lg md:rounded-2xl ${liveReady ? "" : "hidden"}`}
           camera={streamName}
           playbackEnabled={cameraActive || liveReady}
           audioEnabled={playAudio}
@@ -326,8 +302,9 @@ export default function LivePlayer({
           setStats={setStats}
           onPlaying={playerIsPlaying}
           pip={pip}
-          setFullResolution={handleFullResolution}
+          setFullResolution={setFullResolution}
           onError={onError}
+          onHealthSample={onHealthSample}
         />
       );
     } else {
@@ -342,7 +319,7 @@ export default function LivePlayer({
       player = (
         <JSMpegPlayer
           key={"jsmpeg_" + key}
-          className="flex justify-center overflow-hidden"
+          className="flex justify-center overflow-hidden rounded-lg md:rounded-2xl"
           camera={cameraConfig.name}
           width={cameraConfig.detect.width}
           height={cameraConfig.detect.height}
@@ -359,9 +336,7 @@ export default function LivePlayer({
       player = null;
     }
   } else {
-    player = (
-      <ActivityIndicator className={"w-full [.bg-black_&]:text-white"} />
-    );
+    player = <ActivityIndicator />;
   }
 
   return (
@@ -376,12 +351,10 @@ export default function LivePlayer({
       }}
       data-camera={cameraConfig.name}
       className={cn(
-        // the card owns the corner: overflow-hidden clips the stream, the still
-        // image, and every overlay to this one radius so they stay concentric
-        "relative flex w-full cursor-pointer justify-center overflow-hidden rounded-lg outline md:rounded-2xl",
+        "relative flex w-full cursor-pointer justify-center outline",
         activeTracking &&
           ((showStillWithoutActivity && !liveReady) || liveReady)
-          ? "shadow-severity_alert outline-[3px] outline-severity_alert"
+          ? "outline-3 rounded-lg shadow-severity_alert outline-severity_alert md:rounded-2xl"
           : "outline-0 outline-background",
         "transition-all duration-500",
         className,
@@ -395,14 +368,10 @@ export default function LivePlayer({
     >
       {cameraEnabled &&
         ((showStillWithoutActivity && !liveReady) || liveReady) && (
-          <div
-            className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center [container-type:size]"
-            style={{ "--pic-ar": pictureAspect } as React.CSSProperties}
-          >
-            <div className="relative aspect-[var(--pic-ar)] h-auto w-[min(100%,calc(100cqh*var(--pic-ar)))]">
-              <ImageShadowOverlay />
-            </div>
-          </div>
+          <ImageShadowOverlay
+            upperClassName="md:rounded-2xl"
+            lowerClassName="md:rounded-2xl"
+          />
         )}
       {player}
       {cameraEnabled &&
@@ -410,7 +379,7 @@ export default function LivePlayer({
         (!showStillWithoutActivity || isReEnabling) &&
         !liveReady && (
           <div className="absolute inset-0 flex items-center justify-center">
-            <ActivityIndicator className={"w-full [.bg-black_&]:text-white"} />
+            <ActivityIndicator />
           </div>
         )}
 
@@ -489,7 +458,7 @@ export default function LivePlayer({
 
       {offline && inDashboard && (
         <>
-          <div className="absolute inset-0 bg-black/50" />
+          <div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />
           <div className="absolute inset-0 left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
             <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
               <div>{t("streamOffline.title")}</div>
@@ -533,7 +502,7 @@ export default function LivePlayer({
       )}
 
       {!cameraEnabled && (
-        <div className="relative flex h-full w-full items-center justify-center border border-secondary-foreground bg-background_alt">
+        <div className="relative flex h-full w-full items-center justify-center rounded-2xl border border-secondary-foreground bg-background_alt">
           <div className="flex h-32 flex-col items-center justify-center rounded-lg p-4 md:h-48 md:w-48">
             <LuVideoOff className="mb-2 size-8 md:size-10" />
             <p className="max-w-32 text-center text-sm md:max-w-40 md:text-base">
@@ -561,7 +530,12 @@ export default function LivePlayer({
           )}
       </div>
       {showStats && (
-        <PlayerStats stats={stats} minimal={cameraRef !== undefined} />
+        <PlayerStats
+          stats={stats}
+          minimal={cameraRef !== undefined}
+          streamLabel={preferredLiveMode === "jsmpeg" ? undefined : streamLabel}
+          streamAuto={streamAuto}
+        />
       )}
     </div>
   );

web/src/components/player/LiveStreamGovernor.ts

@@ -0,0 +1,286 @@
+/**
+ * Policy engine for auto live stream selection.
+ *
+ * Rungs index the camera's live streams in config order, followed by
+ * the jsmpeg floor. Evidence is media delivery falling behind wall
+ * time while bytes still arrive, which separates congestion from a
+ * dead camera or a go2rtc restart. No browser API reports spare
+ * bandwidth, so upswitching is try-and-see with backoff.
+ *
+ * Time comes from an injected clock and the owner calls tick() once a
+ * second, so the class holds no timers.
+ */
+
+import type {
+  LiveAutoReason,
+  LiveHealthSample,
+  LivePlayerError,
+} from "@/types/live";
+
+// go2rtc bursts its GOP cache when a consumer attaches
+const WARMUP_MS = 3000;
+// media per wall second below this is a low sample. Low samples reset
+// the upswitch clock and feed the chronic window
+const LOW_RATE = 0.85;
+// net shortfall within the window that downswitches on sustained
+// under-delivery. Keyframes make per-second delivery bursty, so the
+// window lets a fast second offset a slow one
+const SUSTAINED_DEFICIT_S = 2;
+const SUSTAINED_WINDOW_MS = 10000;
+// low-sample deficit within the window that downswitches on repeated
+// short stalls
+const CHRONIC_DEFICIT_S = 6;
+const CHRONIC_WINDOW_MS = 60000;
+// clean time before trying one rung up, doubled after each failed try
+const UPSWITCH_WAIT_MS = 60000;
+const UPSWITCH_WAIT_MAX_MS = 600000;
+// a downswitch this soon after an upswitch counts as a failed try
+const PROBATION_MS = 30000;
+
+export type LiveGovernorSnapshot = {
+  rung: number;
+  reason: LiveAutoReason | undefined;
+};
+
+type Shortfall = {
+  ts: number;
+  seconds: number;
+};
+
+const total = (entries: Shortfall[]) =>
+  entries.reduce((sum, entry) => sum + entry.seconds, 0);
+
+export class LiveStreamGovernor {
+  private readonly floor: number;
+  private readonly now: () => number;
+  private readonly listeners = new Set<() => void>();
+  private readonly unplayable = new Set<number>();
+
+  private snapshot: LiveGovernorSnapshot = { rung: 0, reason: undefined };
+  private holdLow = false;
+
+  private rungStartTs: number;
+  private cleanSinceTs: number;
+  // every sample, signed, for the sustained window
+  private shortfalls: Shortfall[] = [];
+  // low samples only, for the chronic window
+  private deficits: Shortfall[] = [];
+  private upswitchWaitMs = UPSWITCH_WAIT_MS;
+  private probationUntil = 0;
+
+  /** rungCount includes the jsmpeg floor. */
+  constructor(rungCount: number, now: () => number = Date.now) {
+    this.floor = rungCount - 1;
+    this.now = now;
+    this.rungStartTs = now();
+    this.cleanSinceTs = this.rungStartTs;
+  }
+
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  getSnapshot = (): LiveGovernorSnapshot => this.snapshot;
+
+  /**
+   * One health sample from the playing transport. Zero-byte samples
+   * belong to the stall watchdog, and warmup samples only prove that
+   * bytes are arriving.
+   */
+  sample({ bytes, mediaSeconds, wallSeconds }: LiveHealthSample) {
+    if (bytes <= 0 || wallSeconds <= 0) {
+      return;
+    }
+
+    const now = this.now();
+
+    if (now - this.rungStartTs < WARMUP_MS) {
+      return;
+    }
+
+    // WebRTC reports a finished freeze in one sample, so media can be
+    // negative and one sample can carry more shortfall than its wall time
+    const shortfall = { ts: now, seconds: wallSeconds - mediaSeconds };
+    this.shortfalls.push(shortfall);
+    if (mediaSeconds / wallSeconds < LOW_RATE) {
+      this.cleanSinceTs = now;
+      this.deficits.push(shortfall);
+    }
+
+    this.shortfalls = this.shortfalls.filter(
+      (entry) => entry.ts > now - SUSTAINED_WINDOW_MS,
+    );
+    this.deficits = this.deficits.filter(
+      (entry) => entry.ts > now - CHRONIC_WINDOW_MS,
+    );
+
+    if (
+      total(this.shortfalls) >= SUSTAINED_DEFICIT_S ||
+      total(this.deficits) >= CHRONIC_DEFICIT_S
+    ) {
+      this.stepDown();
+    }
+  }
+
+  /**
+   * A player error. Returns true when auto handled it by stepping down,
+   * false to hand it to the error fallback.
+   */
+  playerError(error: LivePlayerError, sourceOnline: boolean): boolean {
+    const { rung } = this.snapshot;
+    if (rung === this.floor) {
+      return false;
+    }
+
+    // go2rtc's codec reply is proof, so the rung is not retried this session
+    if (error === "mse-codec") {
+      this.unplayable.add(rung);
+      return this.stepDown();
+    }
+
+    // the rung below played a moment ago, so a failed upswitch returns to it
+    if (this.now() < this.probationUntil) {
+      return this.stepDown();
+    }
+
+    // an offline camera fails every stream alike; a stall on a live camera
+    // is the viewer's link, even when congestion stops delivery outright
+    if (!sourceOnline) {
+      return false;
+    }
+
+    return this.stepDown();
+  }
+
+  /** Called once a second while auto is active and the page is visible. */
+  tick() {
+    const now = this.now();
+
+    // the higher rung survived probation, so backoff starts over
+    if (this.probationUntil > 0 && now >= this.probationUntil) {
+      this.probationUntil = 0;
+      this.upswitchWaitMs = UPSWITCH_WAIT_MS;
+    }
+
+    if (now - this.cleanSinceTs < this.upswitchWaitMs) {
+      return;
+    }
+
+    // data saver may climb out of the floor, but never past its stream
+    const target = this.nextPlayableAbove(this.snapshot.rung);
+    if (
+      target === undefined ||
+      (this.holdLow && target < this.lowestPlayable())
+    ) {
+      return;
+    }
+
+    this.probationUntil = now + PROBATION_MS;
+    this.moveTo(target);
+  }
+
+  /**
+   * Data saver holds the lowest playable stream and never upswitches past
+   * it, whatever the connection could carry.
+   */
+  setHoldLow(hold: boolean) {
+    this.holdLow = hold;
+    this.moveTo(
+      hold
+        ? Math.max(this.snapshot.rung, this.lowestPlayable())
+        : this.snapshot.rung,
+    );
+  }
+
+  /** A remount or unpause on the same rung starts with clean evidence. */
+  resetHistory() {
+    const now = this.now();
+    this.rungStartTs = now;
+    this.cleanSinceTs = now;
+    this.shortfalls = [];
+    this.deficits = [];
+  }
+
+  /** Returns to the top rung and clears every session fact. */
+  reset() {
+    this.unplayable.clear();
+    this.upswitchWaitMs = UPSWITCH_WAIT_MS;
+    this.probationUntil = 0;
+    this.moveTo(this.holdLow ? this.lowestPlayable() : 0);
+  }
+
+  private stepDown(): boolean {
+    const target = this.nextPlayableBelow(this.snapshot.rung);
+    if (target === undefined) {
+      return false;
+    }
+
+    if (this.now() < this.probationUntil) {
+      this.upswitchWaitMs = Math.min(
+        this.upswitchWaitMs * 2,
+        UPSWITCH_WAIT_MAX_MS,
+      );
+    }
+    this.probationUntil = 0;
+
+    this.moveTo(target);
+    return true;
+  }
+
+  private moveTo(rung: number) {
+    this.resetHistory();
+
+    const reason = this.reasonAt(rung);
+    if (rung === this.snapshot.rung && reason === this.snapshot.reason) {
+      return;
+    }
+
+    this.snapshot = { rung, reason };
+    this.listeners.forEach((listener) => listener());
+  }
+
+  private reasonAt(rung: number): LiveAutoReason | undefined {
+    if (rung === this.floor) {
+      return "floor";
+    }
+
+    if (this.nextPlayableAbove(rung) === undefined) {
+      return [...this.unplayable].some((unplayable) => unplayable < rung)
+        ? "codec"
+        : undefined;
+    }
+
+    return this.holdLow ? "saveData" : "bandwidth";
+  }
+
+  private nextPlayableAbove(rung: number): number | undefined {
+    for (let candidate = rung - 1; candidate >= 0; candidate--) {
+      if (!this.unplayable.has(candidate)) {
+        return candidate;
+      }
+    }
+    return undefined;
+  }
+
+  // the floor is always playable
+  private nextPlayableBelow(rung: number): number | undefined {
+    for (let candidate = rung + 1; candidate <= this.floor; candidate++) {
+      if (candidate === this.floor || !this.unplayable.has(candidate)) {
+        return candidate;
+      }
+    }
+    return undefined;
+  }
+
+  private lowestPlayable(): number {
+    for (let candidate = this.floor - 1; candidate >= 0; candidate--) {
+      if (!this.unplayable.has(candidate)) {
+        return candidate;
+      }
+    }
+    return this.floor;
+  }
+}

web/src/components/player/LiveStreamSelect.tsx

@@ -0,0 +1,128 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { LiveAutoReason } from "@/types/live";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { LuInfo } from "react-icons/lu";
+import { MdOutlineRestartAlt } from "react-icons/md";
+import { Button } from "@/components/ui/button";
+
+// Radix Select needs a non-empty value. Auto itself is stored as the
+// absence of a pinned stream
+const AUTO_VALUE = "__frigate_auto__";
+
+type LiveStreamSelectProps = {
+  // friendly name to go2rtc stream name, in ladder order
+  streams: Record<string, string>;
+  pinnedStream: string | undefined;
+  playingStream: string;
+  autoAvailable: boolean;
+  autoReason?: LiveAutoReason;
+  // undefined selects auto
+  onSelect: (stream: string | undefined) => void;
+  // sends auto back to the top of the ladder
+  onRetry: () => void;
+  disabled: boolean;
+};
+
+export default function LiveStreamSelect({
+  streams,
+  pinnedStream,
+  playingStream,
+  autoAvailable,
+  autoReason,
+  onSelect,
+  onRetry,
+  disabled,
+}: LiveStreamSelectProps) {
+  const { t } = useTranslation(["views/live"]);
+
+  const labelFor = useCallback(
+    (name: string) =>
+      Object.keys(streams).find((label) => streams[label] === name) ?? name,
+    [streams],
+  );
+
+  const auto = autoAvailable && pinnedStream == undefined;
+  const value = auto ? AUTO_VALUE : (pinnedStream ?? playingStream);
+
+  return (
+    <>
+      <Select
+        value={value}
+        disabled={disabled}
+        onValueChange={(next) =>
+          onSelect(next === AUTO_VALUE ? undefined : next)
+        }
+      >
+        <SelectTrigger className="w-full">
+          <SelectValue>
+            {auto
+              ? t("stream.auto.selected", {
+                  stream:
+                    autoReason === "floor"
+                      ? t("stream.auto.floorLabel")
+                      : labelFor(playingStream),
+                })
+              : labelFor(value)}
+          </SelectValue>
+        </SelectTrigger>
+
+        <SelectContent>
+          <SelectGroup>
+            {autoAvailable && (
+              <SelectItem className="cursor-pointer" value={AUTO_VALUE}>
+                <span className="flex flex-col gap-0.5 whitespace-normal">
+                  <span>{t("stream.auto.label")}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {t("stream.auto.tips")}
+                  </span>
+                </span>
+              </SelectItem>
+            )}
+            {Object.entries(streams).map(([label, name]) => (
+              <SelectItem key={label} className="cursor-pointer" value={name}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      {auto && autoReason && !disabled && (
+        <div className="flex flex-col items-center gap-3">
+          <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
+            <LuInfo className="size-4 shrink-0" />
+            <div>
+              {t(`stream.auto.reason.${autoReason}`, {
+                stream: labelFor(playingStream),
+              })}
+            </div>
+          </div>
+
+          {/* data saver pins the lowest stream, so there is no higher one to try */}
+          {autoReason !== "saveData" && (
+            <Button
+              className="flex items-center gap-2.5 rounded-lg"
+              aria-label={t("stream.auto.retry")}
+              variant="outline"
+              size="sm"
+              onClick={onRetry}
+            >
+              <MdOutlineRestartAlt className="size-5 text-primary-variant" />
+              <div className="text-primary-variant">
+                {t("stream.auto.retry")}
+              </div>
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

web/src/components/player/MsePlayer.tsx

@@ -1,6 +1,7 @@
 import { baseUrl } from "@/api/baseUrl";
 import { useUserPersistence } from "@/hooks/use-user-persistence";
 import {
+  LiveHealthSample,
   LivePlayerError,
   PlayerStatsType,
   VideoResolutionType,
@@ -28,6 +29,7 @@ type MSEPlayerProps = {
   onPlaying?: () => void;
   setFullResolution?: React.Dispatch<SetStateAction<VideoResolutionType>>;
   onError?: (error: LivePlayerError) => void;
+  onHealthSample?: (sample: LiveHealthSample) => void;
 };
 
 function MSEPlayer({
@@ -43,6 +45,7 @@ function MSEPlayer({
   onPlaying,
   setFullResolution,
   onError,
+  onHealthSample,
 }: MSEPlayerProps) {
   const RECONNECT_TIMEOUT: number = 10000;
   const BUFFERING_COOLDOWN_TIMEOUT: number = 5000;
@@ -71,6 +74,7 @@ function MSEPlayer({
   const [bufferTimeout, setBufferTimeout] = useState<NodeJS.Timeout>();
   const [errorCount, setErrorCount] = useState<number>(0);
   const totalBytesLoaded = useRef(0);
+  const appendingRef = useRef(false);
 
   const [fallbackTimeout] = useUserPersistence<number>(
     "liveFallbackTimeout",
@@ -95,6 +99,13 @@ function MSEPlayer({
     return `${baseUrl.replace(/^http/, "ws")}live/mse/api/ws?src=${camera}`;
   }, [camera]);
 
+  // socket handlers are bound once per connection, so they reach the
+  // current onError through a ref
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+
   const handleError = useCallback(
     (error: LivePlayerError, description: string = "Unknown error") => {
       // eslint-disable-next-line no-console
@@ -110,11 +121,11 @@ function MSEPlayer({
         // eslint-disable-next-line no-console
         console.error(`${camera} - Supported codecs: ${CODECS.join(", ")}`);
       }
-      onError?.(error);
+      onErrorRef.current?.(error);
     },
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [camera, onError],
+    [camera],
   );
 
   const handleLoadedMetadata = useCallback(() => {
@@ -470,7 +481,12 @@ function MSEPlayer({
             const data = buf.slice(0, bufLen);
             bufLen = 0;
             sb.appendBuffer(data);
-          } else if (sb.buffered && sb.buffered.length) {
+            return;
+          }
+
+          appendingRef.current = false;
+
+          if (sb.buffered && sb.buffered.length) {
             const end = sb.buffered.end(sb.buffered.length - 1) - 15;
             const start = sb.buffered.start(0);
             if (end > start) {
@@ -488,6 +504,7 @@ function MSEPlayer({
 
       ondataRef.current = (data) => {
         totalBytesLoaded.current += data.byteLength;
+        appendingRef.current = true;
 
         if (sb?.updating || bufLen > 0) {
           const b = new Uint8Array(data);
@@ -503,6 +520,19 @@ function MSEPlayer({
         }
       };
     };
+
+    // go2rtc answers a codec it cannot provide with an error message
+    // instead of a negotiation reply
+    onmessageRef.current["error"] = (msg) => {
+      if (msg.type !== "error" || !msg.value?.includes("codecs not matched")) {
+        return;
+      }
+
+      if (wsRef.current) {
+        onDisconnect();
+      }
+      handleError("mse-codec", msg.value);
+    };
   };
 
   const getBufferedTime = (video: HTMLVideoElement | null) => {
@@ -740,19 +770,38 @@ function MSEPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playbackEnabled]);
 
-  // stats
+  // stats and health samples
+
+  const onHealthSampleRef = useRef(onHealthSample);
+  useEffect(() => {
+    onHealthSampleRef.current = onHealthSample;
+  }, [onHealthSample]);
+  const sampleHealth = onHealthSample !== undefined;
 
   useEffect(() => {
     const video = videoRef.current;
     let lastLoadedBytes = totalBytesLoaded.current;
     let lastTimestamp = Date.now();
+    let healthBytes = lastLoadedBytes;
+    let healthTimestamp = lastTimestamp;
+    // a restart mid-stream must not count the existing buffer as new media
+    let lastBufferedEnd =
+      video && video.buffered.length > 0
+        ? video.buffered.end(video.buffered.length - 1)
+        : 0;
+    let deferred = false;
 
-    if (!getStats) return;
+    if (!getStats && !sampleHealth) return;
 
-    const updateStats = () => {
-      if (video) {
-        const now = Date.now();
-        const bytesLoaded = totalBytesLoaded.current;
+    const update = () => {
+      if (!video) {
+        return;
+      }
+
+      const now = Date.now();
+      const bytesLoaded = totalBytesLoaded.current;
+
+      if (getStats) {
         const timeElapsed = (now - lastTimestamp) / 1000; // seconds
         const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1000; // kBps
 
@@ -774,22 +823,64 @@ function MSEPlayer({
           droppedFrameRate,
         });
       }
+
+      if (!sampleHealth) {
+        return;
+      }
+
+      // a sample taken mid-append would count the bytes without their
+      // media, so it waits one tick for the append to land
+      if (appendingRef.current && !deferred) {
+        deferred = true;
+        return;
+      }
+      deferred = false;
+
+      // the buffered end tracks delivered media, so playback-rate
+      // catch-up does not skew it
+      const bufferedEnd =
+        video.buffered.length > 0
+          ? video.buffered.end(video.buffered.length - 1)
+          : 0;
+      const mediaSeconds = bufferedEnd - lastBufferedEnd;
+      const bytes = bytesLoaded - healthBytes;
+      const wallSeconds = (now - healthTimestamp) / 1000;
+
+      lastBufferedEnd = bufferedEnd;
+      healthBytes = bytesLoaded;
+      healthTimestamp = now;
+
+      // a reconnect starts a new MediaSource timeline
+      if (mediaSeconds < 0) {
+        return;
+      }
+
+      if (
+        document.visibilityState !== "visible" ||
+        (video.paused && bufferedEnd > 0)
+      ) {
+        return;
+      }
+
+      onHealthSampleRef.current?.({ bytes, mediaSeconds, wallSeconds });
     };
 
-    const interval = setInterval(updateStats, 1000); // Update every second
+    const interval = setInterval(update, 1000);
 
     return () => {
       clearInterval(interval);
-      setStats?.({
-        streamType: "-",
-        bandwidth: 0,
-        totalFrames: 0,
-        droppedFrames: undefined,
-        decodedFrames: 0,
-        droppedFrameRate: 0,
-      });
+      if (getStats) {
+        setStats?.({
+          streamType: "-",
+          bandwidth: 0,
+          totalFrames: 0,
+          droppedFrames: undefined,
+          decodedFrames: 0,
+          droppedFrameRate: 0,
+        });
+      }
     };
-  }, [setStats, getStats]);
+  }, [setStats, getStats, sampleHealth]);
 
   return (
     <video

web/src/components/player/PlayerStats.tsx

@@ -5,9 +5,16 @@ import { useTranslation } from "react-i18next";
 type PlayerStatsProps = {
   stats: PlayerStatsType;
   minimal: boolean;
+  streamLabel?: string;
+  streamAuto?: boolean;
 };
 
-export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
+export function PlayerStats({
+  stats,
+  minimal,
+  streamLabel,
+  streamAuto = false,
+}: PlayerStatsProps) {
   const { t } = useTranslation(["components/player", "views/live"]);
   const streamTypeLabel = t(
     `stream.technology.name.${stats.streamType.toLowerCase()}`,
@@ -15,6 +22,16 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
   );
   const fullStatsContent = (
     <>
+      {streamLabel != undefined && (
+        <p>
+          <span className="text-white/70">{t("stats.stream")}</span>{" "}
+          <span className="text-white">
+            {streamAuto
+              ? t("stats.streamAuto", { stream: streamLabel })
+              : streamLabel}
+          </span>
+        </p>
+      )}
       <p>
         <span className="text-white/70">{t("stats.streamType.title")}</span>{" "}
         <span className="text-white">{streamTypeLabel}</span>

web/src/components/player/WebRTCPlayer.tsx

@@ -1,9 +1,9 @@
 import { baseUrl } from "@/api/baseUrl";
 import {
+  LiveHealthSample,
   LivePlayerError,
   PlayerStatsType,
   TwoWayTalkError,
-  VideoResolutionType,
 } from "@/types/live";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { webRTCIceServers } from "@/utils/webrtcUtil";
@@ -21,9 +21,9 @@ type WebRtcPlayerProps = {
   pip?: boolean;
   getStats?: boolean;
   setStats?: (stats: PlayerStatsType) => void;
-  setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onPlaying?: () => void;
   onError?: (error: LivePlayerError) => void;
+  onHealthSample?: (sample: LiveHealthSample) => void;
   onMicrophoneError?: (error: TwoWayTalkError) => void;
 };
 
@@ -38,9 +38,9 @@ export default function WebRtcPlayer({
   pip = false,
   getStats = false,
   setStats,
-  setFullResolution,
   onPlaying,
   onError,
+  onHealthSample,
   onMicrophoneError,
 }: WebRtcPlayerProps) {
   // metadata
@@ -345,22 +345,23 @@ export default function WebRtcPlayer({
     if (videoLoadTimeoutRef.current) {
       clearTimeout(videoLoadTimeoutRef.current);
     }
-    if (videoRef.current) {
-      setFullResolution?.({
-        width: videoRef.current.videoWidth,
-        height: videoRef.current.videoHeight,
-      });
-    }
     onPlaying?.();
   };
 
-  // stats
+  // stats and health samples
+
+  const onHealthSampleRef = useRef(onHealthSample);
+  useEffect(() => {
+    onHealthSampleRef.current = onHealthSample;
+  }, [onHealthSample]);
+  const sampleHealth = onHealthSample !== undefined;
 
   useEffect(() => {
-    if (!pcRef.current || !getStats) return;
+    if (!pcRef.current || (!getStats && !sampleHealth)) return;
 
     let lastBytesReceived = 0;
     let lastTimestamp = 0;
+    let lastFreezeSeconds: number | undefined;
 
     const interval = setInterval(async () => {
       if (pcRef.current && videoRef.current && !videoRef.current.paused) {
@@ -369,6 +370,7 @@ export default function WebRtcPlayer({
         let timestamp = 0;
         let framesReceived = 0;
         let framesDecoded = 0;
+        let freezeSeconds: number | undefined;
 
         report.forEach((stat) => {
           if (stat.type === "inbound-rtp" && stat.kind === "video") {
@@ -376,43 +378,72 @@ export default function WebRtcPlayer({
             timestamp = stat.timestamp;
             framesReceived = stat.framesReceived;
             framesDecoded = stat.framesDecoded;
+            freezeSeconds = stat.totalFreezesDuration;
           }
         });
 
         const timeDiff = (timestamp - lastTimestamp) / 1000; // in seconds
-        const bitrate =
-          timeDiff > 0
-            ? (bytesReceived - lastBytesReceived) / timeDiff / 1000
-            : 0; // in kBps
 
-        setStats?.({
-          streamType: "WebRTC",
-          bandwidth: Math.round(bitrate),
-          totalFrames: framesReceived,
-          droppedFrames: undefined,
-          decodedFrames: framesDecoded,
-          droppedFrameRate: undefined,
-        });
+        if (getStats) {
+          const bitrate =
+            timeDiff > 0
+              ? (bytesReceived - lastBytesReceived) / timeDiff / 1000
+              : 0; // in kBps
+
+          setStats?.({
+            streamType: "WebRTC",
+            bandwidth: Math.round(bitrate),
+            totalFrames: framesReceived,
+            droppedFrames: undefined,
+            decodedFrames: framesDecoded,
+            droppedFrameRate: undefined,
+          });
+        }
+
+        if (
+          sampleHealth &&
+          lastTimestamp > 0 &&
+          timeDiff > 0 &&
+          document.visibilityState === "visible"
+        ) {
+          // freeze time does not depend on the camera's frame rate. A
+          // freeze is credited only when it ends, so media goes negative
+          // to carry its full length. Browsers without the field report
+          // full delivery and rely on the stall watchdog
+          const frozen =
+            freezeSeconds !== undefined && lastFreezeSeconds !== undefined
+              ? Math.max(0, freezeSeconds - lastFreezeSeconds)
+              : 0;
+
+          onHealthSampleRef.current?.({
+            bytes: bytesReceived - lastBytesReceived,
+            mediaSeconds: timeDiff - frozen,
+            wallSeconds: timeDiff,
+          });
+        }
 
         lastBytesReceived = bytesReceived;
         lastTimestamp = timestamp;
+        lastFreezeSeconds = freezeSeconds;
       }
     }, 1000);
 
     return () => {
       clearInterval(interval);
-      setStats?.({
-        streamType: "-",
-        bandwidth: 0,
-        totalFrames: 0,
-        droppedFrames: undefined,
-        decodedFrames: 0,
-        droppedFrameRate: 0,
-      });
+      if (getStats) {
+        setStats?.({
+          streamType: "-",
+          bandwidth: 0,
+          totalFrames: 0,
+          droppedFrames: undefined,
+          decodedFrames: 0,
+          droppedFrameRate: 0,
+        });
+      }
     };
     // we need to listen on the value of the ref
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pcRef, pcRef.current, getStats]);
+  }, [pcRef, pcRef.current, getStats, sampleHealth]);
 
   return (
     <video

web/src/components/settings/CameraStreamingDialog.tsx

@@ -35,6 +35,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 import { detectCameraAudioFeatures } from "@/utils/cameraUtil";
+import { isRestreamedStream } from "@/utils/liveTranscode";
 import { Switch } from "@/components/ui/switch";
 import { useWebRTCAvailableForStream } from "@/hooks/use-webrtc-availability";
 import StreamTechnologySelect from "@/components/player/StreamTechnologySelect";
@@ -82,9 +83,7 @@ export function CameraStreamingDialog({
   // metadata
 
   const isRestreamed = useMemo(
-    () =>
-      config &&
-      Object.keys(config.go2rtc.streams || {}).includes(streamName ?? ""),
+    () => isRestreamedStream(config, streamName),
     [config, streamName],
   );
 

web/src/hooks/use-auto-live-stream.ts

@@ -0,0 +1,126 @@
+import { LiveStreamGovernor } from "@/components/player/LiveStreamGovernor";
+import { isCameraOffline } from "@/hooks/use-camera-activity";
+import { useAutoFrigateStats } from "@/hooks/use-stats";
+import {
+  LiveAutoReason,
+  LiveHealthSample,
+  LivePlayerError,
+} from "@/types/live";
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
+
+// one governor per camera ladder for the tab session, so reopening a
+// camera resumes where auto settled
+const governors = new Map<string, LiveStreamGovernor>();
+
+function governorFor(cameraName: string, streams: string[]) {
+  const key = `${cameraName}|${streams.join(",")}`;
+  let governor = governors.get(key);
+  if (!governor) {
+    // the extra rung is the jsmpeg floor
+    governor = new LiveStreamGovernor(streams.length + 1);
+    governors.set(key, governor);
+  }
+  return governor;
+}
+
+type UseAutoLiveStreamProps = {
+  cameraName: string;
+  // go2rtc stream names in config order
+  streams: string[];
+  // auto is the stream setting
+  selected: boolean;
+  // mic, debug, force low-bandwidth, the error fallback latch, or unloaded
+  // preferences own the player
+  paused: boolean;
+};
+
+export type AutoLiveStream = {
+  streamName: string | undefined;
+  atFloor: boolean;
+  reason: LiveAutoReason | undefined;
+  onHealthSample: (sample: LiveHealthSample) => void;
+  handleError: (error: LivePlayerError) => boolean;
+  reset: () => void;
+};
+
+export function useAutoLiveStream({
+  cameraName,
+  streams,
+  selected,
+  paused,
+}: UseAutoLiveStreamProps): AutoLiveStream {
+  const governor = useMemo(
+    () => governorFor(cameraName, streams),
+    [cameraName, streams],
+  );
+  const { rung, reason } = useSyncExternalStore(
+    governor.subscribe,
+    governor.getSnapshot,
+  );
+  const active = selected && !paused;
+
+  const stats = useAutoFrigateStats();
+  const offline = isCameraOffline(stats, cameraName);
+
+  // evidence from before a pin, a pause, or a remount does not count
+  useEffect(() => {
+    if (active) {
+      governor.resetHistory();
+    }
+  }, [active, governor]);
+
+  useEffect(() => {
+    if (!selected) {
+      return;
+    }
+
+    const saveData =
+      (navigator as Navigator & { connection?: { saveData?: boolean } })
+        .connection?.saveData === true;
+    governor.setHoldLow(saveData);
+  }, [selected, governor]);
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+
+    // a hidden tab delivers no samples, so its time is not clean time
+    const interval = setInterval(() => {
+      if (document.visibilityState === "visible") {
+        governor.tick();
+      } else {
+        governor.resetHistory();
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [active, governor]);
+
+  const onHealthSample = useCallback(
+    (sample: LiveHealthSample) => {
+      if (active) {
+        governor.sample(sample);
+      }
+    },
+    [active, governor],
+  );
+
+  const handleError = useCallback(
+    (error: LivePlayerError) => active && governor.playerError(error, !offline),
+    [active, governor, offline],
+  );
+
+  const reset = useCallback(() => governor.reset(), [governor]);
+
+  const floor = streams.length;
+
+  return {
+    streamName: selected ? streams[Math.min(rung, floor - 1)] : undefined,
+    atFloor: selected && rung === floor,
+    reason: selected ? reason : undefined,
+    onHealthSample,
+    handleError,
+    reset,
+  };
+}

web/src/hooks/use-camera-activity.ts

@@ -13,6 +13,7 @@ import { useTimelineUtils } from "./use-timeline-utils";
 import useDeepMemo from "./use-deep-memo";
 import { isEqual } from "lodash";
 import { useAutoFrigateStats } from "./use-stats";
+import { FrigateStats } from "@/types/stats";
 import useSWR from "swr";
 import { getAttributeLabels } from "@/utils/iconUtil";
 
@@ -30,6 +31,19 @@ type useCameraActivityReturn = {
   offline: boolean;
 };
 
+export function isCameraOffline(
+  stats: FrigateStats | undefined,
+  cameraName: string | undefined,
+): boolean {
+  if (!stats?.cameras || !cameraName) {
+    return false;
+  }
+
+  return (
+    stats.cameras[cameraName]?.camera_fps == 0 && stats.service.uptime > 60
+  );
+}
+
 export function useCameraActivity(
   camera: CameraConfig | undefined,
   revalidateOnFocus: boolean = true,
@@ -167,25 +181,10 @@ export function useCameraActivity(
 
   const stats = useAutoFrigateStats();
 
-  const offline = useMemo(() => {
-    if (!stats) {
-      return false;
-    }
-
-    const cameras = stats["cameras"];
-
-    if (!cameras) {
-      return false;
-    }
-
-    if (!camera?.name) {
-      return false;
-    }
-
-    return (
-      cameras[camera.name]?.camera_fps == 0 && stats["service"].uptime > 60
-    );
-  }, [camera, stats]);
+  const offline = useMemo(
+    () => isCameraOffline(stats, camera?.name),
+    [camera, stats],
+  );
 
   const isCameraEnabled = cameraEnabled ? cameraEnabled === "ON" : true;
 

web/src/hooks/use-camera-live-mode.ts

@@ -4,6 +4,7 @@ import useSWR from "swr";
 import { LivePlayerMode } from "@/types/live";
 import useDeferredStreamMetadata from "./use-deferred-stream-metadata";
 import { detectCameraAudioFeatures } from "@/utils/cameraUtil";
+import { isRestreamedStream } from "@/utils/liveTranscode";
 import {
   evaluateStreamWebRTCAvailability,
   useWebRTCGloballyAvailable,
@@ -51,18 +52,14 @@ export default function useCameraLiveMode(
     cameras.forEach((camera) => {
       if (activeStreams && activeStreams[camera.name]) {
         const selectedStreamName = activeStreams[camera.name];
-        const isRestreamed = Object.keys(config.go2rtc.streams || {}).includes(
-          selectedStreamName,
-        );
+        const isRestreamed = isRestreamedStream(config, selectedStreamName);
 
         if (isRestreamed) {
           streamNames.add(selectedStreamName);
         }
       } else {
         Object.values(camera.live.streams).forEach((streamName) => {
-          const isRestreamed = Object.keys(
-            config.go2rtc.streams || {},
-          ).includes(streamName);
+          const isRestreamed = isRestreamedStream(config, streamName);
 
           if (isRestreamed) {
             streamNames.add(streamName);
@@ -125,9 +122,7 @@ export default function useCameraLiveMode(
     cameras.forEach((camera) => {
       const selectedStreamName =
         activeStreams?.[camera.name] ?? Object.values(camera.live.streams)[0];
-      const isRestreamed =
-        config &&
-        Object.keys(config.go2rtc.streams || {}).includes(selectedStreamName);
+      const isRestreamed = isRestreamedStream(config, selectedStreamName);
 
       newIsRestreamedStates[camera.name] = isRestreamed ?? false;
 
@@ -181,9 +176,7 @@ export default function useCameraLiveMode(
         (cameraConfig
           ? Object.values(cameraConfig.live.streams)[0]
           : cameraName);
-      const isRestreamed =
-        config &&
-        Object.keys(config.go2rtc.streams || {}).includes(selectedStreamName);
+      const isRestreamed = isRestreamedStream(config, selectedStreamName);
 
       setPreferredLiveModes((prevModes) => ({
         ...prevModes,

web/src/index.css

@@ -175,21 +175,6 @@ html {
   background-image: none !important;
 }
 
-/* Live masonry grid: only the bottom-right corner resizes, drawn as a corner
-   bracket on the real se handle (drop-shadow keeps it legible over footage). */
-.grid-layout .react-resizable-handle-se::after {
-  content: "";
-  position: absolute;
-  right: 5px;
-  bottom: 5px;
-  width: 12px;
-  height: 12px;
-  border-right: 2.5px solid rgba(233, 238, 246, 0.92);
-  border-bottom: 2.5px solid rgba(233, 238, 246, 0.92);
-  border-bottom-right-radius: 3px;
-  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9));
-}
-
 .react-grid-item.react-grid-placeholder {
   border: 3px solid #a00000 !important;
   opacity: 0.5 !important;

web/src/pages/Events.tsx

@@ -132,7 +132,8 @@ export default function Events() {
     setMotionSearchDay(normalizedDay);
   }, []);
 
-  const [notificationTab, setNotificationTab] = useState<TimelineType>();
+  const [notificationTab, setNotificationTab] =
+    useState<TimelineType>("timeline");
 
   const getReviewDayBounds = useCallback((date: Date) => {
     const now = Date.now() / 1000;

web/src/types/configForm.ts

@@ -39,6 +39,8 @@ export type ConfigFormContext = {
   extraHasChanges?: boolean;
   setExtraHasChanges?: (hasChanges: boolean) => void;
   formData?: JsonObject;
+  /** Key order of each ordered map, so reorders re-render fields */
+  orderedMapsKeyOrder?: string[][];
   pendingDataBySection?: Record<string, ConfigSectionData>;
   onPendingDataChange?: (
     sectionKey: string,

web/src/types/frigateConfig.ts

@@ -36,6 +36,17 @@ export interface FaceRecognitionConfig {
 export type SearchModel = "jinav1" | "jinav2" | (string & NonNullable<unknown>);
 export type SearchModelSize = "small" | "large";
 
+export type LiveTranscodeQuality = {
+  height: number;
+  bitrate: number;
+};
+
+export type LiveTranscodeConfig = {
+  enabled: boolean;
+  source?: string | null;
+  qualities: LiveTranscodeQuality[];
+};
+
 export interface CameraConfig {
   friendly_name: string;
   audio: {
@@ -109,6 +120,7 @@ export interface CameraConfig {
     height: number;
     quality: number;
     streams: { [key: string]: string };
+    transcode: LiveTranscodeConfig;
   };
   lpr: {
     enabled: boolean;

web/src/types/live.ts

@@ -31,7 +31,20 @@ export type LiveStreamMetadata = {
   consumers: LiveConsumerMetadata[];
 };
 
-export type LivePlayerError = "stalled" | "startup" | "mse-decode";
+// mse-codec is go2rtc's proof that it has no codec this browser plays;
+// mse-decode also covers transient Safari failures
+export type LivePlayerError =
+  "stalled" | "startup" | "mse-decode" | "mse-codec";
+
+// one second of delivery from the playing transport
+export type LiveHealthSample = {
+  bytes: number;
+  mediaSeconds: number;
+  wallSeconds: number;
+};
+
+// why auto is playing below the top stream
+export type LiveAutoReason = "bandwidth" | "codec" | "saveData" | "floor";
 
 export type TwoWayTalkError = "microphone" | "refused";
 

web/src/utils/configUtil.ts

@@ -306,6 +306,49 @@ export function buildOverrides(
   return current;
 }
 
+// ---------------------------------------------------------------------------
+// Ordered maps: config maps whose key order is meaningful
+// ---------------------------------------------------------------------------
+
+// lodash isEqual ignores key order, so ordered maps compare entry lists.
+export function changedOrderedMapPaths(
+  current: unknown,
+  base: unknown,
+  paths: string[],
+): string[] {
+  return paths.filter((path) => {
+    const value = get(current, path);
+
+    if (!isJsonObject(value)) {
+      return false;
+    }
+
+    const baseValue = get(base, path);
+    return !isEqual(
+      Object.entries(value),
+      isJsonObject(baseValue) ? Object.entries(baseValue) : undefined,
+    );
+  });
+}
+
+// Send a changed ordered map whole; per-key overrides cannot carry order.
+export function applyOrderedMaps(
+  overrides: unknown,
+  current: unknown,
+  base: unknown,
+  paths: string[],
+): unknown {
+  const changed = changedOrderedMapPaths(current, base, paths);
+
+  if (changed.length === 0) {
+    return overrides;
+  }
+
+  const result = isJsonObject(overrides) ? cloneDeep(overrides) : {};
+  changed.forEach((path) => set(result, path, cloneDeep(get(current, path))));
+  return result;
+}
+
 // ---------------------------------------------------------------------------
 // flattenOverrides — turn an overrides object into a list of leaf paths
 // ---------------------------------------------------------------------------

web/src/utils/liveTranscode.ts

@@ -0,0 +1,101 @@
+import type { FrigateConfig, LiveTranscodeConfig } from "@/types/frigateConfig";
+
+// Mirrors frigate/util/live_streams.py and apply_live_transcode_streams.
+
+export const TRANSCODE_HEIGHTS = [1080, 720, 480, 360, 240];
+
+const DEFAULT_BITRATES: Record<number, number> = {
+  1080: 2500,
+  720: 1200,
+  480: 500,
+  360: 250,
+  240: 150,
+};
+
+export function defaultTranscodeBitrate(height: number): number {
+  return DEFAULT_BITRATES[height] ?? 500;
+}
+
+export function transcodeStreamName(camera: string, height: number): string {
+  return `${camera}_transcode_${height}p`;
+}
+
+export function isTranscodeStreamName(camera: string, name: string): boolean {
+  const prefix = `${camera}_transcode_`;
+  return name.startsWith(prefix) && /^\d+p$/.test(name.slice(prefix.length));
+}
+
+/** A generated stream's configured bitrate, or undefined for other streams. */
+export function transcodeBitrateFor(
+  camera: string,
+  name: string,
+  transcode: LiveTranscodeConfig | undefined,
+): number | undefined {
+  if (!transcode?.enabled) {
+    return undefined;
+  }
+
+  return transcode.qualities.find(
+    (quality) => transcodeStreamName(camera, quality.height) === name,
+  )?.bitrate;
+}
+
+/**
+ * Drop transcoded entries that are no longer generated and append generated
+ * streams that are missing. Placed entries keep their position and label.
+ */
+export function reconcileTranscodeStreams(
+  camera: string,
+  streams: Record<string, string>,
+  transcode: LiveTranscodeConfig,
+  go2rtcStreams: string[],
+): Record<string, string> {
+  const generated = transcode.enabled
+    ? transcode.qualities.map((quality) => ({
+        label: `${quality.height}p`,
+        name: transcodeStreamName(camera, quality.height),
+      }))
+    : [];
+  const generatedNames = new Set(generated.map(({ name }) => name));
+
+  const kept = Object.entries(streams).filter(
+    ([, name]) =>
+      generatedNames.has(name) ||
+      go2rtcStreams.includes(name) ||
+      !isTranscodeStreamName(camera, name),
+  );
+  const placed = new Set(kept.map(([, name]) => name));
+  const labels = new Set(kept.map(([label]) => label));
+
+  generated.forEach(({ label, name }) => {
+    // a taken label is left for the backend to reject on save
+    if (!placed.has(name) && !labels.has(label)) {
+      kept.push([label, name]);
+    }
+  });
+
+  return Object.fromEntries(kept);
+}
+
+/**
+ * Whether go2rtc serves a live stream. config.go2rtc.streams lists only the
+ * yaml streams, so transcoded streams of enabled cameras count too.
+ */
+export function isRestreamedStream(
+  config: FrigateConfig | undefined,
+  name: string | undefined,
+): boolean {
+  if (!config || !name) {
+    return false;
+  }
+
+  if (Object.keys(config.go2rtc.streams || {}).includes(name)) {
+    return true;
+  }
+
+  return Object.values(config.cameras).some(
+    (camera) =>
+      camera.live.transcode?.enabled &&
+      isTranscodeStreamName(camera.name, name),
+  );
+}

web/src/utils/uiSettingsTransfer.ts

@@ -54,12 +54,6 @@ export const TRANSFER_KEYS: TransferKey[] = [
     namespaced: true,
     schema: z.boolean(),
   },
-  {
-    key: "naturalAspectLayout",
-    section: "preferences",
-    namespaced: true,
-    schema: z.boolean(),
-  },
   {
     key: "alertVideos",
     section: "preferences",
@@ -188,22 +182,13 @@ const layoutItemSchema = z
   })
   .passthrough();
 
-// a group whose dashboard has not been opened since upgrading still holds
-// the pre-0.19 bare array, so both shapes reach the file
-const storedLayoutSchema = z.union([
-  z.array(layoutItemSchema),
-  z
-    .object({ version: z.number(), layout: z.array(layoutItemSchema) })
-    .passthrough(),
-]);
-
 export const uiSettingsFileSchema = z.object({
   type: z.literal(UI_SETTINGS_FILE_TYPE),
   version: z.number().int().positive(),
   exported_at: z.string(),
   frigate_version: z.string(),
   sections: z.object({
-    layouts: z.record(z.string(), storedLayoutSchema),
+    layouts: z.record(z.string(), z.array(layoutItemSchema)),
     streaming: allGroupsStreamingSettingsSchema,
     preferences: z.record(z.string(), z.unknown()),
   }),
@@ -219,8 +204,6 @@ export async function buildExportPayload(
   const layouts: UiSettingsFile["sections"]["layouts"] = {};
   let streaming: UiSettingsFile["sections"]["streaming"] = {};
   const preferences: UiSettingsFile["sections"]["preferences"] = {};
-  const naturalAspect =
-    (await readTransferable("naturalAspectLayout", true, username)) === true;
 
   await Promise.all(
     groupNames.map(async (group) => {
@@ -230,9 +213,7 @@ export async function buildExportPayload(
         username,
       );
 
-      // a group not opened since the mode changed still holds a layout from
-      // the other mode, which the grid discards, so leave it out of the file
-      if (value !== undefined && layoutIsNatural(value) === naturalAspect) {
+      if (value !== undefined) {
         layouts[group] = value;
       }
     }),
@@ -403,30 +384,6 @@ export function summarizeImport(
   };
 }
 
-// Bare arrays are pre-masonry bucketed layouts
-function layoutIsNatural(layout: unknown): boolean {
-  return (
-    typeof layout === "object" &&
-    layout !== null &&
-    !Array.isArray(layout) &&
-    (layout as { naturalAspect?: unknown }).naturalAspect === true
-  );
-}
-
-// A layout only renders under the mode that built it, so importing layouts
-// applies this mode too. Exports hold a single mode.
-export function importedLayoutsNaturalAspect(
-  file: UiSettingsFile,
-): boolean | null {
-  const layouts = Object.values(file.sections.layouts);
-
-  if (!layouts.length) {
-    return null;
-  }
-
-  return layouts.some(layoutIsNatural);
-}
-
 export function hasImportableContent(summary: ImportSummary): boolean {
   return (
     summary.layoutGroupCount > 0 ||
@@ -441,9 +398,6 @@ export async function applyImportPayload(
   username: string | undefined,
 ): Promise<void> {
   const writes: Promise<void>[] = [];
-  const layoutsMode = sections.layouts
-    ? importedLayoutsNaturalAspect(file)
-    : null;
 
   if (sections.layouts) {
     Object.entries(file.sections.layouts).forEach(([group, layout]) => {
@@ -454,15 +408,6 @@ export async function applyImportPayload(
         ),
       );
     });
-
-    if (layoutsMode !== null) {
-      writes.push(
-        setData(
-          getUserNamespacedKey("naturalAspectLayout", username),
-          layoutsMode,
-        ),
-      );
-    }
   }
 
   const streamingEntry = TRANSFER_KEYS.find(
@@ -502,12 +447,6 @@ export async function applyImportPayload(
   if (sections.preferences) {
     validPreferenceEntries(file.sections.preferences).forEach(
       ({ entry, value }) => {
-        // the layouts must win this key or they import into a mode that
-        // cannot display them
-        if (entry.key === "naturalAspectLayout" && layoutsMode !== null) {
-          return;
-        }
-
         writes.push(setData(storageKey(entry, username), value));
       },
     );

web/src/views/live/DraggableGridLayout.tsx

@@ -8,17 +8,16 @@ import {
 import React, {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { useResizeObserver } from "@/hooks/resize-observer";
 import {
   Layout,
   LayoutItem,
   ResponsiveGridLayout as Responsive,
 } from "react-grid-layout";
-import { aspectRatio, getCompactor } from "react-grid-layout/core";
 import "react-grid-layout/css/styles.css";
 import "react-resizable/css/styles.css";
 import {
@@ -29,11 +28,12 @@ import {
   StatsState,
   VolumeState,
 } from "@/types/live";
-import { ASPECT_WIDE_LAYOUT } from "@/types/record";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useResizeObserver } from "@/hooks/resize-observer";
 import { isEqual } from "lodash";
 import useSWR from "swr";
-import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 import LivePlayer from "@/components/player/LivePlayer";
 import { IoClose } from "react-icons/io5";
@@ -52,43 +52,6 @@ import LiveContextMenu from "@/components/menu/LiveContextMenu";
 import { useStreamingSettings } from "@/context/streaming-settings-provider";
 import { useTranslation } from "react-i18next";
 
-// rowHeight is 1/VERTICAL_RESOLUTION of a column, so h = round(w *
-// VERTICAL_RESOLUTION / aspect) lands a tile on its camera's aspect. GRID_COLS
-// also sets resize granularity: the aspect constraint derives height from
-// width, making one column the smallest step in both axes.
-const GRID_COLS = 96;
-const TILE_BASE_W = 32;
-const TILE_WIDE_W = 64;
-const VERTICAL_RESOLUTION = 4;
-const DEFAULT_ASPECT = 16 / 9;
-// Bucketed tile shapes, matching the aspect-wide / aspect-tall Tailwind utilities.
-const TILE_ASPECT_WIDE = 32 / 9;
-const TILE_ASPECT_TALL = 8 / 9;
-
-// Cells quantize to whole rows/columns, so the card takes the camera's exact
-// ratio and fits itself inside its cell. --ar and container-type live on the
-// cell; min() picks whichever axis binds first.
-const CARD_FIT =
-  "h-auto w-[min(100%,calc(100cqh*var(--ar)))] aspect-[var(--ar)]";
-
-// Stored coordinates are grid units, so bump this whenever GRID_COLS or
-// VERTICAL_RESOLUTION changes in a released version.
-const LAYOUT_VERSION = 2;
-type PersistedLayout = {
-  version: number;
-  naturalAspect: boolean;
-  layout: Layout;
-};
-
-// Without preventCollision, RGL shoves collided tiles down the page and never
-// compacts them back.
-const FREE_PLACEMENT_COMPACTOR = getCompactor(null, false, true);
-
-// 0.17/0.18 stored a bare array on a 12-column grid whose standard tile was
-// 4x4. Bucketed mode reproduces that geometry, so those layouts convert exactly.
-const LEGACY_GRID_COLS = 12;
-const LEGACY_TILE_ROWS = 4;
-
 type DraggableGridLayoutProps = {
   cameras: CameraConfig[];
   cameraGroup: string;
@@ -135,66 +98,6 @@ export default function DraggableGridLayout({
   const { data: config } = useSWR<FrigateConfig>("config");
   const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
 
-  const aspectRatios = useMemo(() => {
-    const map: { [key: string]: number } = {};
-    if (birdseyeConfig) {
-      map["birdseye"] =
-        (birdseyeConfig.width || 1) / (birdseyeConfig.height || 1);
-    }
-    cameras.forEach((camera) => {
-      map[camera.name] =
-        camera.detect.width / camera.detect.height || DEFAULT_ASPECT;
-    });
-    return map;
-  }, [cameras, birdseyeConfig]);
-
-  const [naturalAspectSetting, , isNaturalAspectLoaded] = useUserPersistence(
-    "naturalAspectLayout",
-    false,
-  );
-  // phones never reach this grid, and the setting is hidden there, so an
-  // imported or stale value must not take effect
-  const naturalAspectLayout = !isMobileOnly && (naturalAspectSetting ?? false);
-
-  // Bucketed mode snaps every camera to one of three tile shapes, matching the
-  // pre-masonry layout; the picture letterboxes inside its bucket.
-  const layoutAspects = useMemo(() => {
-    if (naturalAspectLayout) {
-      return aspectRatios;
-    }
-    const map: { [key: string]: number } = {};
-    Object.entries(aspectRatios).forEach(([name, ratio]) => {
-      map[name] =
-        ratio > ASPECT_WIDE_LAYOUT
-          ? TILE_ASPECT_WIDE
-          : ratio < 1
-            ? TILE_ASPECT_TALL
-            : DEFAULT_ASPECT;
-    });
-    return map;
-  }, [aspectRatios, naturalAspectLayout]);
-
-  // A live stream can be shaped differently than detect, so the card follows
-  // whatever is on screen and falls back to detect. Cells stay detect-sized, so
-  // only the card resizes.
-  const [liveAspects, setLiveAspects] = useState<{
-    [key: string]: number | undefined;
-  }>({});
-
-  const liveAspectHandlers = useMemo(() => {
-    const map: { [key: string]: (aspectRatio: number | undefined) => void } =
-      {};
-    cameras.forEach((camera) => {
-      map[camera.name] = (aspectRatio) =>
-        setLiveAspects((prev) =>
-          prev[camera.name] === aspectRatio
-            ? prev
-            : { ...prev, [camera.name]: aspectRatio },
-        );
-    });
-    return map;
-  }, [cameras]);
-
   // preferred live modes per camera
 
   const [globalAutoLive] = useUserPersistence("autoLiveView", true);
@@ -212,31 +115,7 @@ export default function DraggableGridLayout({
   // grid layout
 
   const [gridLayout, setGridLayout, isGridLayoutLoaded] =
-    useUserPersistence<PersistedLayout>(`${cameraGroup}-draggable-layout`);
-
-  const readPersistedLayout = useCallback(
-    (stored: PersistedLayout | undefined): Layout | undefined => {
-      if (
-        !stored ||
-        stored.version !== LAYOUT_VERSION ||
-        !Array.isArray(stored.layout)
-      ) {
-        return undefined;
-      }
-      return stored.layout;
-    },
-    [],
-  );
-
-  // Strips per-item `constraints`, which are functions.
-  const toPersisted = useCallback(
-    (layout: Layout): PersistedLayout => ({
-      version: LAYOUT_VERSION,
-      naturalAspect: naturalAspectLayout,
-      layout: layout.map(({ i, x, y, w, h }) => ({ i, x, y, w, h })),
-    }),
-    [naturalAspectLayout],
-  );
+    useUserPersistence<Layout>(`${cameraGroup}-draggable-layout`);
 
   const [group] = useUserPersistedOverlayState(
     "cameraGroup",
@@ -261,11 +140,11 @@ export default function DraggableGridLayout({
   useEffect(() => {
     setIsEditMode(false);
     setEditGroup(false);
-    // Keeps the camera-change effect from overwriting the layout we load next.
+    // Reset camera tracking state when group changes to prevent the camera-change
+    // effect from incorrectly overwriting the loaded layout
     setCurrentCameras(undefined);
     setCurrentIncludeBirdseye(undefined);
     setCurrentGridLayout(undefined);
-    setCurrentNaturalAspect(undefined);
   }, [cameraGroup, setIsEditMode]);
 
   // camera state
@@ -276,84 +155,21 @@ export default function DraggableGridLayout({
   const [currentGridLayout, setCurrentGridLayout] = useState<
     Layout | undefined
   >();
-  const [currentNaturalAspect, setCurrentNaturalAspect] = useState<boolean>();
 
   const handleLayoutChange = useCallback(
     (currentLayout: Layout) => {
-      if (
-        !isGridLayoutLoaded ||
-        !isEqual(readPersistedLayout(gridLayout), currentGridLayout)
-      ) {
+      if (!isGridLayoutLoaded || !isEqual(gridLayout, currentGridLayout)) {
         return;
       }
-      setGridLayout(toPersisted(currentLayout));
+      // save layout to idb
+      setGridLayout(currentLayout);
       setShowCircles(true);
     },
-    [
-      setGridLayout,
-      isGridLayoutLoaded,
-      gridLayout,
-      currentGridLayout,
-      readPersistedLayout,
-      toPersisted,
-    ],
-  );
-
-  const dimsFor = useCallback(
-    (name: string) => {
-      const ratio = layoutAspects[name] ?? DEFAULT_ASPECT;
-      const w = ratio >= ASPECT_WIDE_LAYOUT ? TILE_WIDE_W : TILE_BASE_W;
-      const h = Math.max(1, Math.round((w * VERTICAL_RESOLUTION) / ratio));
-      return { w, h };
-    },
-    [layoutAspects],
-  );
-
-  // Rescale a pre-masonry layout onto the current grid. Both axes scale by a
-  // constant, so tiles the user resized keep their size and their arrangement
-  // stays intact. Only meaningful in bucketed mode, where a tile still has the
-  // shape those coordinates assumed.
-  const convertLegacyLayout = useCallback(
-    (stored: unknown): Layout | undefined => {
-      if (naturalAspectLayout || !Array.isArray(stored) || !stored.length) {
-        return undefined;
-      }
-
-      const xScale = GRID_COLS / LEGACY_GRID_COLS;
-      const yScale =
-        Math.round((TILE_BASE_W * VERTICAL_RESOLUTION) / DEFAULT_ASPECT) /
-        LEGACY_TILE_ROWS;
-      const converted: LayoutItem[] = [];
-
-      for (const item of stored) {
-        if (
-          !item ||
-          typeof item.i !== "string" ||
-          typeof item.x !== "number" ||
-          typeof item.y !== "number" ||
-          typeof item.w !== "number" ||
-          typeof item.h !== "number"
-        ) {
-          return undefined;
-        }
-
-        const w = Math.min(Math.max(1, Math.round(item.w * xScale)), GRID_COLS);
-        converted.push({
-          i: item.i,
-          x: Math.min(Math.max(0, Math.round(item.x * xScale)), GRID_COLS - w),
-          y: Math.max(0, Math.round(item.y * yScale)),
-          w,
-          h: Math.max(1, Math.round(item.h * yScale)),
-        });
-      }
-
-      return converted;
-    },
-    [naturalAspectLayout],
+    [setGridLayout, isGridLayoutLoaded, gridLayout, currentGridLayout],
   );
 
   const generateLayout = useCallback(
-    (baseLayout: Layout | undefined): Layout | undefined => {
+    (baseLayout: Layout | undefined) => {
       if (!isGridLayoutLoaded) {
         return;
       }
@@ -363,98 +179,91 @@ export default function DraggableGridLayout({
           ? ["birdseye", ...cameras.map((camera) => camera?.name || "")]
           : cameras.map((camera) => camera?.name || "");
 
-      const existing: LayoutItem[] = baseLayout
-        ? baseLayout.filter((layout) => cameraNames.includes(layout.i))
+      const optionsMap: LayoutItem[] = baseLayout
+        ? baseLayout.filter((layout) => cameraNames?.includes(layout.i))
         : [];
-      const placed = new Set(existing.map((layout) => layout.i));
 
-      const tileColumns = GRID_COLS / TILE_BASE_W; // 3 standard columns
-      // Each column starts below every existing tile that overlaps it, so new
-      // cameras fill open columns without overlapping the user's tiles.
-      const colBottoms = Array.from({ length: tileColumns }, (_, c) =>
-        existing.reduce(
-          (max, layout) =>
-            layout.x < (c + 1) * TILE_BASE_W &&
-            layout.x + layout.w > c * TILE_BASE_W
-              ? Math.max(max, layout.y + layout.h)
-              : max,
-          0,
-        ),
-      );
+      cameraNames.forEach((cameraName, index) => {
+        const existingLayout = optionsMap.find(
+          (layout) => layout.i === cameraName,
+        );
 
-      const result: LayoutItem[] = [...existing];
-
-      cameraNames.forEach((name) => {
-        if (placed.has(name)) {
+        // Skip if the camera already exists in the layout
+        if (existingLayout) {
           return;
         }
-        const { w, h } = dimsFor(name);
 
-        if (w === TILE_BASE_W) {
-          let col = 0;
-          for (let c = 1; c < tileColumns; c++) {
-            if (colBottoms[c] < colBottoms[col]) {
-              col = c;
-            }
-          }
-          result.push({
-            i: name,
-            x: col * TILE_BASE_W,
-            y: colBottoms[col],
-            w,
-            h,
-          });
-          colBottoms[col] += h;
+        let aspectRatio;
+        let col;
+
+        // Handle "birdseye" camera as a special case
+        if (cameraName === "birdseye") {
+          aspectRatio =
+            (birdseyeConfig?.width || 1) / (birdseyeConfig?.height || 1);
+          col = 0; // Set birdseye camera in the first column
         } else {
-          let pair = 0;
-          for (let c = 1; c + 1 < tileColumns; c++) {
-            if (
-              Math.max(colBottoms[c], colBottoms[c + 1]) <
-              Math.max(colBottoms[pair], colBottoms[pair + 1])
-            ) {
-              pair = c;
-            }
-          }
-          const y = Math.max(colBottoms[pair], colBottoms[pair + 1]);
-          result.push({ i: name, x: pair * TILE_BASE_W, y, w, h });
-          colBottoms[pair] = y + h;
-          colBottoms[pair + 1] = y + h;
+          const camera = cameras.find((cam) => cam.name === cameraName);
+          aspectRatio =
+            (camera && camera?.detect.width / camera?.detect.height) || 16 / 9;
+          col = index % 3; // Regular cameras distributed across columns
         }
+
+        // Calculate layout options based on aspect ratio
+        const columnsPerPlayer = 4;
+        let height;
+        let width;
+
+        if (aspectRatio < 1) {
+          // Portrait
+          height = 2 * columnsPerPlayer;
+          width = columnsPerPlayer;
+        } else if (aspectRatio > 2) {
+          // Wide
+          height = 1 * columnsPerPlayer;
+          width = 2 * columnsPerPlayer;
+        } else {
+          // Landscape
+          height = 1 * columnsPerPlayer;
+          width = columnsPerPlayer;
+        }
+
+        const options = {
+          i: cameraName,
+          x: col * width,
+          y: 0, // don't set y, grid does automatically
+          w: width,
+          h: height,
+        };
+
+        optionsMap.push(options);
       });
 
-      return result;
+      return optionsMap;
     },
-    [cameras, isGridLayoutLoaded, includeBirdseye, birdseyeConfig, dimsFor],
+    [cameras, isGridLayoutLoaded, includeBirdseye, birdseyeConfig],
   );
 
   useEffect(() => {
-    if (!isGridLayoutLoaded) {
-      return;
-    }
-
-    const saved = readPersistedLayout(gridLayout);
-    const converted = saved ? undefined : convertLegacyLayout(gridLayout);
-    const base = saved ?? converted;
-
-    if (base) {
-      const updatedLayout = generateLayout(base) ?? base;
-      setCurrentGridLayout(updatedLayout);
-      if (converted || !isEqual(updatedLayout, base)) {
-        setGridLayout(toPersisted(updatedLayout));
+    if (isGridLayoutLoaded) {
+      if (gridLayout) {
+        // set current grid layout from loaded, possibly adding new cameras
+        const updatedLayout = generateLayout(gridLayout);
+        setCurrentGridLayout(updatedLayout);
+        // Only save if cameras were added (layout changed)
+        if (!isEqual(updatedLayout, gridLayout)) {
+          setGridLayout(updatedLayout);
+        }
+        // Set camera tracking state so the camera-change effect has a baseline
+        setCurrentCameras(cameras);
+        setCurrentIncludeBirdseye(includeBirdseye);
+      } else {
+        // idb is empty, set it with an initial layout
+        const newLayout = generateLayout(undefined);
+        setCurrentGridLayout(newLayout);
+        setGridLayout(newLayout);
+        setCurrentCameras(cameras);
+        setCurrentIncludeBirdseye(includeBirdseye);
       }
-      setCurrentCameras(cameras);
-      setCurrentIncludeBirdseye(includeBirdseye);
-      setCurrentNaturalAspect(
-        converted ? naturalAspectLayout : gridLayout?.naturalAspect,
-      );
-    } else {
-      // empty or incompatible (pre-masonry) data
-      const newLayout = generateLayout(undefined) ?? [];
-      setCurrentGridLayout(newLayout);
-      setGridLayout(toPersisted(newLayout));
-      setCurrentCameras(cameras);
-      setCurrentIncludeBirdseye(includeBirdseye);
-      setCurrentNaturalAspect(naturalAspectLayout);
     }
   }, [
     gridLayout,
@@ -463,15 +272,12 @@ export default function DraggableGridLayout({
     generateLayout,
     cameras,
     includeBirdseye,
-    naturalAspectLayout,
-    readPersistedLayout,
-    convertLegacyLayout,
-    toPersisted,
   ]);
 
   useEffect(() => {
-    // Only for camera changes within a loaded group; undefined currentCameras
-    // means the load effect above has not run yet.
+    // Only regenerate layout when cameras change WITHIN an already-loaded group
+    // Skip if currentCameras is undefined (means we just switched groups and
+    // the first useEffect hasn't run yet to set things up)
     if (!isGridLayoutLoaded || currentCameras === undefined) {
       return;
     }
@@ -483,10 +289,10 @@ export default function DraggableGridLayout({
       setCurrentCameras(cameras);
       setCurrentIncludeBirdseye(includeBirdseye);
 
-      const updatedLayout =
-        generateLayout(currentGridLayout) ?? currentGridLayout ?? [];
+      // Regenerate layout based on current layout, adding any new cameras
+      const updatedLayout = generateLayout(currentGridLayout);
       setCurrentGridLayout(updatedLayout);
-      setGridLayout(toPersisted(updatedLayout));
+      setGridLayout(updatedLayout);
     }
   }, [
     cameras,
@@ -497,47 +303,39 @@ export default function DraggableGridLayout({
     generateLayout,
     setGridLayout,
     isGridLayoutLoaded,
-    toPersisted,
   ]);
 
-  useEffect(() => {
-    if (
-      !isNaturalAspectLoaded ||
-      currentNaturalAspect === undefined ||
-      currentNaturalAspect === naturalAspectLayout
-    ) {
-      return;
-    }
+  const [marginValue, setMarginValue] = useState(16);
 
-    setCurrentNaturalAspect(naturalAspectLayout);
-    const regenerated = generateLayout(undefined) ?? [];
-    setCurrentGridLayout(regenerated);
-    setGridLayout(toPersisted(regenerated));
-  }, [
-    naturalAspectLayout,
-    isNaturalAspectLoaded,
-    currentNaturalAspect,
-    generateLayout,
-    setGridLayout,
-    toPersisted,
-  ]);
+  // calculate margin value for browsers that don't have default font size of 16px
+  useLayoutEffect(() => {
+    const calculateRemValue = () => {
+      const htmlElement = document.documentElement;
+      const fontSize = window.getComputedStyle(htmlElement).fontSize;
+      setMarginValue(parseFloat(fontSize));
+    };
 
-  const gridContainerRef = useRef<HTMLDivElement | null>(null);
-
-  // Commit-time measure: paints the first frame at the real width (no
-  // innerWidth flash), and the setState re-render is what lets
-  // useResizeObserver see a node mounted after the skeleton swap.
-  const [mountWidth, setMountWidth] = useState<number | null>(null);
-
-  const attachGridContainer = useCallback((node: HTMLDivElement | null) => {
-    gridContainerRef.current = node;
-    setMountWidth(node ? node.getBoundingClientRect().width : null);
+    calculateRemValue();
   }, []);
 
+  const gridContainerRef = useRef<HTMLDivElement>(null);
+
   const [{ width: containerWidth, height: containerHeight }] =
     useResizeObserver(gridContainerRef);
 
-  const availableWidth = containerWidth || mountWidth || 0;
+  const scrollBarWidth = useMemo(() => {
+    if (containerWidth && containerHeight && containerRef.current) {
+      return (
+        containerRef.current.offsetWidth - containerRef.current.clientWidth
+      );
+    }
+    return 0;
+  }, [containerRef, containerHeight, containerWidth]);
+
+  const availableWidth = useMemo(
+    () => (scrollBarWidth ? containerWidth + scrollBarWidth : containerWidth),
+    [containerWidth, scrollBarWidth],
+  );
 
   const hasScrollbar = useMemo(() => {
     if (containerHeight && containerRef.current) {
@@ -548,10 +346,61 @@ export default function DraggableGridLayout({
   }, [containerRef, containerHeight]);
 
   const cellHeight = useMemo(() => {
-    const width = availableWidth || window.innerWidth;
-    const columnWidth = width / GRID_COLS;
-    return columnWidth / VERTICAL_RESOLUTION;
-  }, [availableWidth]);
+    const aspectRatio = 16 / 9;
+    // subtract container margin, 1 camera takes up at least 4 rows
+    // account for additional margin on bottom of each row
+    return (
+      ((availableWidth ?? window.innerWidth) - 2 * marginValue) /
+        12 /
+        aspectRatio -
+      marginValue +
+      marginValue / 4
+    );
+  }, [availableWidth, marginValue]);
+
+  const handleResize = (
+    _layout: Layout,
+    oldLayoutItem: LayoutItem | null,
+    layoutItem: LayoutItem | null,
+    placeholder: LayoutItem | null,
+  ) => {
+    if (!oldLayoutItem || !layoutItem || !placeholder) return;
+
+    const heightDiff = layoutItem.h - oldLayoutItem.h;
+    const widthDiff = layoutItem.w - oldLayoutItem.w;
+    const changeCoef = oldLayoutItem.w / oldLayoutItem.h;
+
+    let newWidth, newHeight;
+
+    if (Math.abs(heightDiff) < Math.abs(widthDiff)) {
+      newHeight = Math.round(layoutItem.w / changeCoef);
+      newWidth = Math.round(newHeight * changeCoef);
+    } else {
+      newWidth = Math.round(layoutItem.h * changeCoef);
+      newHeight = Math.round(newWidth / changeCoef);
+    }
+
+    // Ensure dimensions maintain aspect ratio and fit within the grid
+    if (layoutItem.x + newWidth > 12) {
+      newWidth = 12 - layoutItem.x;
+      newHeight = Math.round(newWidth / changeCoef);
+    }
+
+    if (changeCoef == 0.5) {
+      // portrait
+      newHeight = Math.ceil(newHeight / 2) * 2;
+    } else if (changeCoef == 2) {
+      // pano/wide
+      newHeight = Math.ceil(newHeight * 2) / 2;
+    }
+
+    newWidth = Math.round(newHeight * changeCoef);
+
+    layoutItem.w = newWidth;
+    layoutItem.h = newHeight;
+    placeholder.w = layoutItem.w;
+    placeholder.h = layoutItem.h;
+  };
 
   // audio and stats states
 
@@ -654,19 +503,6 @@ export default function DraggableGridLayout({
     onSaveMuting(true);
   };
 
-  // RGL's per-item constraint derives height from width, holding each tile at
-  // its camera's aspect while resizing. Constraints are functions, so they live
-  // only on this render copy; toPersisted strips them.
-  const layoutWithConstraints = useMemo(() => {
-    if (!currentGridLayout) {
-      return [] as Layout;
-    }
-    return currentGridLayout.map((item) => ({
-      ...item,
-      constraints: [aspectRatio(layoutAspects[item.i] ?? DEFAULT_ASPECT)],
-    }));
-  }, [currentGridLayout, layoutAspects]);
-
   return (
     <>
       <Toaster position="top-center" closeButton={true} />
@@ -689,8 +525,8 @@ export default function DraggableGridLayout({
         </div>
       ) : (
         <div
-          className="no-scrollbar my-2 select-none overflow-x-hidden pb-8"
-          ref={attachGridContainer}
+          className="no-scrollbar my-2 select-none overflow-x-hidden px-2 pb-8"
+          ref={gridContainerRef}
         >
           <EditGroupDialog
             open={editGroup}
@@ -700,36 +536,28 @@ export default function DraggableGridLayout({
           />
           <Responsive
             className="grid-layout"
-            width={availableWidth || window.innerWidth}
+            width={availableWidth ?? window.innerWidth}
             layouts={{
-              lg: layoutWithConstraints,
-              md: layoutWithConstraints,
-              sm: layoutWithConstraints,
-              xs: layoutWithConstraints,
-              xxs: layoutWithConstraints,
+              lg: currentGridLayout,
+              md: currentGridLayout,
+              sm: currentGridLayout,
+              xs: currentGridLayout,
+              xxs: currentGridLayout,
             }}
             rowHeight={cellHeight}
             breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-            cols={{
-              lg: GRID_COLS,
-              md: GRID_COLS,
-              sm: GRID_COLS,
-              xs: GRID_COLS,
-              xxs: GRID_COLS,
-            }}
-            margin={[0, 0]}
-            compactor={FREE_PLACEMENT_COMPACTOR}
+            cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }}
+            margin={[marginValue, marginValue]}
             containerPadding={[0, isEditMode ? 6 : 3]}
             resizeConfig={{
               enabled: isEditMode,
-              // se only: top/left handles fight the aspect constraint at a grid
-              // boundary (RGL re-clamps the opposite edge) and distort the tile.
-              handles: isEditMode ? ["se"] : [],
+              handles: isEditMode ? ["sw", "nw", "se", "ne"] : [],
             }}
             dragConfig={{
               enabled: isEditMode,
             }}
             onDragStop={handleLayoutChange}
+            onResize={handleResize}
             onResizeStart={() => setShowCircles(false)}
             onResizeStop={handleLayoutChange}
           >
@@ -742,12 +570,22 @@ export default function DraggableGridLayout({
                     "outline outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
                 )}
                 birdseyeConfig={birdseyeConfig}
-                aspectRatio={layoutAspects["birdseye"] ?? DEFAULT_ASPECT}
                 liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
                 onClick={() => onSelectCamera("birdseye")}
-              ></BirdseyeLivePlayerGridItem>
+              >
+                {isEditMode && showCircles && <CornerCircles />}
+              </BirdseyeLivePlayerGridItem>
             )}
             {cameras.map((camera) => {
+              let grow;
+              const aspectRatio = camera.detect.width / camera.detect.height;
+              if (aspectRatio > ASPECT_WIDE_LAYOUT) {
+                grow = `aspect-wide w-full`;
+              } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+                grow = `aspect-tall h-full`;
+              } else {
+                grow = "aspect-video";
+              }
               const availableStreams = camera.live.streams || {};
               const firstStreamEntry = Object.values(availableStreams)[0] || "";
 
@@ -776,14 +614,7 @@ export default function DraggableGridLayout({
                   ?.compatibilityMode || false;
               return (
                 <GridLiveContextMenu
-                  className={CARD_FIT}
-                  aspectRatio={
-                    (naturalAspectLayout
-                      ? liveAspects[camera.name]
-                      : undefined) ??
-                    layoutAspects[camera.name] ??
-                    DEFAULT_ASPECT
-                  }
+                  className={grow}
                   key={camera.name}
                   camera={camera.name}
                   streamName={streamName}
@@ -822,8 +653,8 @@ export default function DraggableGridLayout({
                     useWebGL={useWebGL}
                     cameraRef={cameraRef}
                     className={cn(
-                      "size-full",
-                      naturalAspectLayout ? "bg-background" : "bg-black",
+                      "rounded-lg bg-black md:rounded-2xl",
+                      grow,
                       isEditMode &&
                         showCircles &&
                         "outline-2 outline-muted-foreground hover:cursor-grab hover:outline-4 active:cursor-grabbing",
@@ -844,8 +675,8 @@ export default function DraggableGridLayout({
                     onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
                     playAudio={audioStates[camera.name]}
                     volume={volumeStates[camera.name]}
-                    onLiveAspectChange={liveAspectHandlers[camera.name]}
                   />
+                  {isEditMode && showCircles && <CornerCircles />}
                 </GridLiveContextMenu>
               );
             })}
@@ -863,7 +694,6 @@ export default function DraggableGridLayout({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <div
-                    data-testid="toggle-edit-layout"
                     className="cursor-pointer rounded-lg bg-secondary text-secondary-foreground opacity-60 transition-all duration-300 hover:bg-muted hover:opacity-100"
                     onClick={() =>
                       setIsEditMode((prevIsEditMode) => !prevIsEditMode)
@@ -932,6 +762,17 @@ export default function DraggableGridLayout({
   );
 }
 
+function CornerCircles() {
+  return (
+    <>
+      <div className="pointer-events-none absolute left-[-4px] top-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
+      <div className="pointer-events-none absolute right-[-4px] top-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
+      <div className="pointer-events-none absolute bottom-[-4px] right-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
+      <div className="pointer-events-none absolute bottom-[-4px] left-[-4px] z-50 size-3 rounded-full bg-primary-variant p-2 text-background outline-2 outline-muted" />
+    </>
+  );
+}
+
 type BirdseyeLivePlayerGridItemProps = {
   style?: React.CSSProperties;
   className?: string;
@@ -940,7 +781,6 @@ type BirdseyeLivePlayerGridItemProps = {
   onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
   children?: React.ReactNode;
   birdseyeConfig: BirdseyeConfig;
-  aspectRatio: number;
   liveMode: LivePlayerMode;
   onClick: () => void;
 };
@@ -958,7 +798,6 @@ const BirdseyeLivePlayerGridItem = React.forwardRef<
       onTouchEnd,
       children,
       birdseyeConfig,
-      aspectRatio: cellAspect,
       liveMode,
       onClick,
       ...props
@@ -967,8 +806,7 @@ const BirdseyeLivePlayerGridItem = React.forwardRef<
   ) => {
     return (
       <div
-        className="flex items-center justify-center p-1 [container-type:size]"
-        style={{ ...style, "--ar": cellAspect } as React.CSSProperties}
+        style={{ ...style }}
         ref={ref}
         onMouseDown={onMouseDown}
         onMouseUp={onMouseUp}
@@ -976,7 +814,7 @@ const BirdseyeLivePlayerGridItem = React.forwardRef<
         {...props}
       >
         <BirdseyeLivePlayer
-          className={cn(CARD_FIT, className)}
+          className={className}
           birdseyeConfig={birdseyeConfig}
           liveMode={liveMode}
           onClick={onClick}
@@ -991,7 +829,6 @@ const BirdseyeLivePlayerGridItem = React.forwardRef<
 type GridLiveContextMenuProps = {
   className?: string;
   style?: React.CSSProperties;
-  aspectRatio?: number;
   onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
   onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
   onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
@@ -1023,7 +860,6 @@ const GridLiveContextMenu = React.forwardRef<
     {
       className,
       style,
-      aspectRatio: cameraAspect,
       onMouseDown,
       onMouseUp,
       onTouchEnd,
@@ -1051,8 +887,7 @@ const GridLiveContextMenu = React.forwardRef<
   ) => {
     return (
       <div
-        className="flex items-center justify-center p-1 [container-type:size]"
-        style={{ ...style, "--ar": cameraAspect } as React.CSSProperties}
+        style={{ ...style }}
         ref={ref}
         onMouseDown={onMouseDown}
         onMouseUp={onMouseUp}

web/src/views/live/LiveBirdseyeView.tsx

@@ -295,7 +295,7 @@ export default function LiveBirdseyeView({
               onClick={handleOverlayClick}
             >
               <BirdseyeLivePlayer
-                className={fullscreen ? "rounded-none" : ""}
+                className={`${fullscreen ? "*:rounded-none" : ""}`}
                 birdseyeConfig={config.birdseye}
                 liveMode={preferredLiveMode}
                 containerRef={containerRef}

web/src/views/live/LiveCameraView.tsx

@@ -13,6 +13,8 @@ import CameraFeatureToggle from "@/components/dynamic/CameraFeatureToggle";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import LivePlayer from "@/components/player/LivePlayer";
 import StreamTechnologySelect from "@/components/player/StreamTechnologySelect";
+import LiveStreamSelect from "@/components/player/LiveStreamSelect";
+import { useAutoLiveStream } from "@/hooks/use-auto-live-stream";
 import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import {
@@ -33,6 +35,7 @@ import {
 } from "@/hooks/use-webrtc-availability";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import {
+  LiveAutoReason,
   LivePlayerError,
   TwoWayTalkError,
   LivePlayerMode,
@@ -41,13 +44,7 @@ import {
   WebRTCUnavailableReason,
 } from "@/types/live";
 import { RecordingStartingPoint } from "@/types/record";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   isDesktop,
   isFirefox,
@@ -101,14 +98,6 @@ import useSWR from "swr";
 import { cn } from "@/lib/utils";
 import { useSessionPersistence } from "@/hooks/use-session-persistence";
 
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
@@ -119,6 +108,7 @@ import { useIsAdmin } from "@/hooks/use-is-admin";
 import { useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { detectCameraAudioFeatures } from "@/utils/cameraUtil";
+import { isRestreamedStream } from "@/utils/liveTranscode";
 import PtzControlPanel from "@/components/overlay/PtzControlPanel";
 import ObjectSettingsView from "../settings/ObjectSettingsView";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
@@ -160,11 +150,9 @@ export default function LiveCameraView({
 
   // supported features
 
-  const [streamName, setStreamName, streamNameLoaded] =
-    useUserPersistence<string>(
-      `${camera.name}-stream`,
-      Object.values(camera.live.streams)[0],
-    );
+  // an absent saved stream means auto
+  const [pinnedStream, setPinnedStream, streamNameLoaded, clearPinnedStream] =
+    useUserPersistence<string>(`${camera.name}-stream`);
 
   const [
     userPreferredLiveMode,
@@ -183,25 +171,67 @@ export default function LiveCameraView({
   const preferencesLoaded =
     streamNameLoaded && userPreferredLiveModeLoaded && forceLowBandwidthLoaded;
 
+  const [mic, setMic] = useState(false);
+  const [debug, setDebug] = useState(false);
+  // error fallback latches, layered on top in preferredLiveMode
+  const [webRTC, setWebRTC] = useState(false);
+  const [lowBandwidth, setLowBandwidth] = useState(false);
+
+  const liveStreams = useMemo(
+    () => Object.values(camera.live.streams || {}),
+    [camera.live.streams],
+  );
+  const autoAvailable = liveStreams.length > 1;
+  const autoSelected = autoAvailable && pinnedStream == undefined;
+
+  const autoStream = useAutoLiveStream({
+    cameraName: camera.name,
+    streams: liveStreams,
+    selected: autoSelected,
+    paused:
+      !preferencesLoaded ||
+      mic ||
+      debug ||
+      webRTC ||
+      lowBandwidth ||
+      (forceLowBandwidth ?? false),
+  });
+  const {
+    handleError: autoHandleError,
+    reset: resetAutoStream,
+    onHealthSample,
+  } = autoStream;
+
+  // the stream actually playing; everything downstream keys off it
+  const streamName = autoSelected
+    ? autoStream.streamName
+    : (pinnedStream ?? liveStreams[0]);
+
+  const selectStream = useCallback(
+    (stream: string | undefined) => {
+      if (stream == undefined) {
+        clearPinnedStream();
+      } else {
+        setPinnedStream(stream);
+      }
+    },
+    [clearPinnedStream, setPinnedStream],
+  );
+
   const isRestreamed = useMemo(
-    () =>
-      config &&
-      Object.keys(config.go2rtc.streams || {}).includes(streamName ?? ""),
+    () => isRestreamedStream(config, streamName),
     [config, streamName],
   );
 
-  // validate stored stream name and reset if now invalid
+  // a pin to a stream no longer in config falls back to auto
 
   useEffect(() => {
-    if (!streamNameLoaded) return;
+    if (!streamNameLoaded || pinnedStream == undefined) return;
 
-    const available = Object.values(camera.live.streams || {});
-    if (available.length === 0) return;
-
-    if (streamName != null && !available.includes(streamName)) {
-      setStreamName(available[0]);
+    if (liveStreams.length > 0 && !liveStreams.includes(pinnedStream)) {
+      clearPinnedStream();
     }
-  }, [streamNameLoaded, camera.live.streams, streamName, setStreamName]);
+  }, [streamNameLoaded, liveStreams, pinnedStream, clearPinnedStream]);
 
   const { data: cameraMetadata } = useSWR<LiveStreamMetadata>(
     isRestreamed ? `go2rtc/streams/${streamName}` : null,
@@ -397,10 +427,7 @@ export default function LiveCameraView({
   // playback state
 
   const [audio, setAudio] = useSessionPersistence("liveAudio", false);
-  const [mic, setMic] = useState(false);
-  const [webRTC, setWebRTC] = useState(false);
   const [pip, setPip] = useState(false);
-  const [lowBandwidth, setLowBandwidth] = useState(false);
 
   const [playInBackground, setPlayInBackground] = useUserPersistence<boolean>(
     `${camera.name}-background-play`,
@@ -408,7 +435,6 @@ export default function LiveCameraView({
   );
 
   const [showStats, setShowStats] = useState(false);
-  const [debug, setDebug] = useState(false);
 
   useSearchEffect("debug", (value: string) => {
     if (value === "true") {
@@ -428,7 +454,7 @@ export default function LiveCameraView({
       return "webrtc";
     }
 
-    if (forceLowBandwidth) {
+    if (forceLowBandwidth || autoStream.atFloor) {
       return "jsmpeg";
     }
 
@@ -460,6 +486,7 @@ export default function LiveCameraView({
     isRestreamed,
     resolvedUserMode,
     isWebRTCAvailable,
+    autoStream.atFloor,
   ]);
 
   // A latched error fallback would keep overriding the user's new choice.
@@ -586,6 +613,11 @@ export default function LiveCameraView({
   const handleError = useCallback(
     (e: LivePlayerError) => {
       if (e) {
+        // auto answers congestion and codec failures with a lower stream
+        if (autoHandleError(e)) {
+          return;
+        }
+
         // WebRTC can now be the user's own choice, so the fallback flag no
         // longer implies untried: hopping to the mode that just failed sticks.
         if (preferredLiveMode !== "webrtc" && webRTCUsable) {
@@ -596,9 +628,14 @@ export default function LiveCameraView({
         }
       }
     },
-    [preferredLiveMode, webRTCUsable],
+    [autoHandleError, preferredLiveMode, webRTCUsable],
   );
 
+  const resetStream = useCallback(() => {
+    setLowBandwidth(false);
+    resetAutoStream();
+  }, [resetAutoStream]);
+
   const handleMicrophoneError = useCallback(
     (error: TwoWayTalkError) => {
       setMic(false);
@@ -776,8 +813,11 @@ export default function LiveCameraView({
                 camera.audio_transcription.enabled_in_config
               }
               fullscreen={fullscreen}
-              streamName={streamName ?? ""}
-              setStreamName={setStreamName}
+              pinnedStream={pinnedStream}
+              playingStream={streamName ?? ""}
+              autoAvailable={autoAvailable}
+              autoReason={autoStream.reason}
+              onSelectStream={selectStream}
               userPreferredLiveMode={resolvedUserMode}
               setUserPreferredLiveMode={setUserPreferredLiveMode}
               forceLowBandwidth={forceLowBandwidth ?? false}
@@ -790,7 +830,7 @@ export default function LiveCameraView({
               isRestreamed={isRestreamed ?? false}
               isWebRTCAvailable={isWebRTCAvailable}
               webRTCUnavailableReason={webRTCAvailability.reason}
-              setLowBandwidth={setLowBandwidth}
+              onResetStream={resetStream}
               supportsAudioOutput={supportsAudioOutput}
               supports2WayTalk={supports2WayTalk}
               cameraEnabled={cameraEnabled}
@@ -860,7 +900,7 @@ export default function LiveCameraView({
                 )}
                 <LivePlayer
                   key={camera.name}
-                  className={fullscreen ? "rounded-none" : ""}
+                  className={`${fullscreen ? "*:rounded-none" : ""}`}
                   windowVisible
                   showStillWithoutActivity={false}
                   alwaysShowCameraName={false}
@@ -878,6 +918,8 @@ export default function LiveCameraView({
                   containerRef={containerRef}
                   setFullResolution={setFullResolution}
                   onError={handleError}
+                  onHealthSample={autoSelected ? onHealthSample : undefined}
+                  streamAuto={autoSelected}
                   onMicrophoneError={handleMicrophoneError}
                 />
               </div>
@@ -931,8 +973,11 @@ type FrigateCameraFeaturesProps = {
   autotrackingEnabled: boolean;
   transcriptionEnabled: boolean;
   fullscreen: boolean;
-  streamName: string;
-  setStreamName?: (value: string | undefined) => void;
+  pinnedStream: string | undefined;
+  playingStream: string;
+  autoAvailable: boolean;
+  autoReason?: LiveAutoReason;
+  onSelectStream: (stream: string | undefined) => void;
   userPreferredLiveMode: LivePlayerMode;
   setUserPreferredLiveMode: (value: LivePlayerMode | undefined) => void;
   forceLowBandwidth: boolean;
@@ -945,7 +990,7 @@ type FrigateCameraFeaturesProps = {
   isRestreamed: boolean;
   isWebRTCAvailable: boolean;
   webRTCUnavailableReason?: WebRTCUnavailableReason;
-  setLowBandwidth: React.Dispatch<React.SetStateAction<boolean>>;
+  onResetStream: () => void;
   supportsAudioOutput: boolean;
   supports2WayTalk: boolean;
   cameraEnabled: boolean;
@@ -959,8 +1004,11 @@ function FrigateCameraFeatures({
   autotrackingEnabled,
   transcriptionEnabled,
   fullscreen,
-  streamName,
-  setStreamName,
+  pinnedStream,
+  playingStream,
+  autoAvailable,
+  autoReason,
+  onSelectStream,
   userPreferredLiveMode,
   setUserPreferredLiveMode,
   forceLowBandwidth,
@@ -973,7 +1021,7 @@ function FrigateCameraFeatures({
   isRestreamed,
   isWebRTCAvailable,
   webRTCUnavailableReason,
-  setLowBandwidth,
+  onResetStream,
   supportsAudioOutput,
   supports2WayTalk,
   cameraEnabled,
@@ -1005,10 +1053,6 @@ function FrigateCameraFeatures({
 
   const isAdmin = useIsAdmin();
 
-  const streamSelectLabel = Object.keys(camera.live.streams).find(
-    (key) => camera.live.streams[key] === streamName,
-  );
-
   // manual event
 
   const recordingEventIdRef = useRef<string | null>(null);
@@ -1352,33 +1396,16 @@ function FrigateCameraFeatures({
                       <Label htmlFor="streaming-method">
                         {t("stream.title")}
                       </Label>
-                      <Select
-                        value={streamName}
+                      <LiveStreamSelect
+                        streams={camera.live.streams}
+                        pinnedStream={pinnedStream}
+                        playingStream={playingStream}
+                        autoAvailable={autoAvailable}
+                        autoReason={autoReason}
+                        onSelect={onSelectStream}
+                        onRetry={onResetStream}
                         disabled={debug || forceLowBandwidth}
-                        onValueChange={(value) => {
-                          setStreamName?.(value);
-                        }}
-                      >
-                        <SelectTrigger className="w-full">
-                          <SelectValue>{streamSelectLabel}</SelectValue>
-                        </SelectTrigger>
-
-                        <SelectContent>
-                          <SelectGroup>
-                            {Object.entries(camera.live.streams).map(
-                              ([stream, name]) => (
-                                <SelectItem
-                                  key={stream}
-                                  className="cursor-pointer"
-                                  value={name}
-                                >
-                                  {stream}
-                                </SelectItem>
-                              ),
-                            )}
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
+                      />
 
                       {debug && (
                         <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
@@ -1499,7 +1526,7 @@ function FrigateCameraFeatures({
                               aria-label={t("stream.lowBandwidth.resetStream")}
                               variant="outline"
                               size="sm"
-                              onClick={() => setLowBandwidth(false)}
+                              onClick={onResetStream}
                             >
                               <MdOutlineRestartAlt className="size-5 text-primary-variant" />
                               <div className="text-primary-variant">
@@ -1761,33 +1788,16 @@ function FrigateCameraFeatures({
                 Object.values(camera.live.streams).length > 0 && (
                   <div className="mt-1 p-2">
                     <div className="mb-1 text-sm">{t("stream.title")}</div>
-                    <Select
-                      value={streamName}
-                      onValueChange={(value) => {
-                        setStreamName?.(value);
-                      }}
+                    <LiveStreamSelect
+                      streams={camera.live.streams}
+                      pinnedStream={pinnedStream}
+                      playingStream={playingStream}
+                      autoAvailable={autoAvailable}
+                      autoReason={autoReason}
+                      onSelect={onSelectStream}
+                      onRetry={onResetStream}
                       disabled={debug || forceLowBandwidth}
-                    >
-                      <SelectTrigger className="w-full">
-                        <SelectValue>{streamSelectLabel}</SelectValue>
-                      </SelectTrigger>
-
-                      <SelectContent>
-                        <SelectGroup>
-                          {Object.entries(camera.live.streams).map(
-                            ([stream, name]) => (
-                              <SelectItem
-                                key={stream}
-                                className="cursor-pointer"
-                                value={name}
-                              >
-                                {stream}
-                              </SelectItem>
-                            ),
-                          )}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
+                    />
 
                     {debug && (
                       <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
@@ -1904,7 +1914,7 @@ function FrigateCameraFeatures({
                             variant="outline"
                             size="sm"
                             disabled={debug}
-                            onClick={() => setLowBandwidth(false)}
+                            onClick={onResetStream}
                           >
                             <MdOutlineRestartAlt className="size-5 text-primary-variant" />
                             <div className="text-primary-variant">

web/src/views/live/LiveDashboardView.tsx

@@ -298,7 +298,10 @@ export default function LiveDashboardView({
     (cameraName: string, error: LivePlayerError) => {
       setPreferredLiveModes((prevModes) => {
         const newModes = { ...prevModes };
-        if (error === "mse-decode" && webRTCUsableStates[cameraName]) {
+        if (
+          (error === "mse-decode" || error === "mse-codec") &&
+          webRTCUsableStates[cameraName]
+        ) {
           newModes[cameraName] = "webrtc";
         } else {
           newModes[cameraName] = "jsmpeg";
@@ -410,7 +413,7 @@ export default function LiveDashboardView({
 
   return (
     <div
-      className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 [scrollbar-gutter:stable] md:p-2"
+      className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
       ref={containerRef}
     >
       {isMobile && (
@@ -609,7 +612,7 @@ export default function LiveDashboardView({
                       <LivePlayer
                         cameraRef={cameraRef}
                         key={camera.name}
-                        className={`${grow} bg-black`}
+                        className={`${grow} rounded-lg bg-black md:rounded-2xl`}
                         windowVisible={
                           windowVisible && visibleCameras.includes(camera.name)
                         }

web/src/views/recording/RecordingView.tsx

@@ -14,7 +14,6 @@ import { Button } from "@/components/ui/button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useOverlayState } from "@/hooks/use-overlay-state";
 import { usePersistence } from "@/hooks/use-persistence";
-import { useUserPersistence } from "@/hooks/use-user-persistence";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { DEFAULT_DRAWER_FEATURES, ExportMode } from "@/types/filter";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -183,19 +182,9 @@ export function RecordingView({
     false,
   );
 
-  const [savedTimelineType, setSavedTimelineType] =
-    useUserPersistence<TimelineType>("recordingTimelineType");
-  const [timelineType, setOverlayTimelineType] = useOverlayState<TimelineType>(
+  const [timelineType, setTimelineType] = useOverlayState<TimelineType>(
     "timelineType",
-    recording?.timelineType ?? savedTimelineType ?? "timeline",
-  );
-
-  const setTimelineType = useCallback(
-    (value: TimelineType, replace?: boolean) => {
-      setOverlayTimelineType(value, replace);
-      setSavedTimelineType(value);
-    },
-    [setOverlayTimelineType, setSavedTimelineType],
+    recording?.timelineType ?? "timeline",
   );
 
   const chunkedTimeRange = useMemo(

web/src/views/settings/UiSettingsView.tsx

@@ -10,14 +10,13 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { Button, buttonVariants } from "../../components/ui/button";
+import { Button } from "../../components/ui/button";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import {
   useUserPersistence,
   deleteUserNamespacedKey,
 } from "@/hooks/use-user-persistence";
-import { isMobileOnly } from "react-device-detect";
 import {
   Select,
   SelectContent,
@@ -34,17 +33,6 @@ import {
   CONTROL_COLUMN_CLASS_NAME,
 } from "@/components/card/SettingsGroupCard";
 import Heading from "@/components/ui/heading";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { cn } from "@/lib/utils";
 import ImportUiSettingsDialog from "@/components/overlay/dialog/ImportUiSettingsDialog";
 import {
   applyImportPayload,
@@ -63,8 +51,6 @@ import {
 const WEEK_STARTS_ON = ["Sunday", "Monday"];
 const IMPORT_FAILED_FLAG = "frigate-ui-settings-import-failed";
 
-type ConfirmTarget = "layouts" | "streaming" | "naturalAspect";
-
 type SwitchSettingRowProps = {
   id: string;
   label: string;
@@ -335,10 +321,6 @@ export default function UiSettingsView() {
     "displayCameraNames",
     false,
   );
-  const [naturalAspect, setNaturalAspect] = useUserPersistence(
-    "naturalAspectLayout",
-    false,
-  );
   const [playbackRate, setPlaybackRate] = useUserPersistence("playbackRate", 1);
   const [weekStartsOn, setWeekStartsOn] = useUserPersistence("weekStartsOn", 0);
   const [alertVideos, setAlertVideos] = useUserPersistence("alertVideos", true);
@@ -347,66 +329,6 @@ export default function UiSettingsView() {
     3,
   );
 
-  const [pendingConfirm, setPendingConfirm] = useState<ConfirmTarget | null>(
-    null,
-  );
-
-  const confirmCopy = useCallback(
-    (target: ConfirmTarget) => {
-      // literal keys per branch: a template key would be invisible to
-      // npm run i18n:extract, which CI verifies
-      switch (target) {
-        case "layouts":
-          return {
-            title: t("general.storedLayouts.clearAll"),
-            description: t("general.storedLayouts.clearConfirm"),
-            action: t("button.clear", { ns: "common" }),
-          };
-        case "streaming":
-          return {
-            title: t("general.cameraGroupStreaming.clearAll"),
-            description: t("general.cameraGroupStreaming.clearConfirm"),
-            action: t("button.clear", { ns: "common" }),
-          };
-        case "naturalAspect":
-          return {
-            title: t("general.liveDashboard.naturalAspectLayout.label"),
-            description: t(
-              "general.liveDashboard.naturalAspectLayout.descNote",
-            ),
-            action: naturalAspect
-              ? t("button.disable", { ns: "common" })
-              : t("button.enable", { ns: "common" }),
-          };
-      }
-    },
-    [naturalAspect, t],
-  );
-
-  const handleConfirm = useCallback(() => {
-    switch (pendingConfirm) {
-      case "layouts":
-        clearStoredLayouts();
-        break;
-      case "streaming":
-        clearStreamingSettings();
-        break;
-      case "naturalAspect":
-        // a layout only renders in the mode that built it
-        setNaturalAspect(!naturalAspect);
-        clearStoredLayouts();
-        break;
-    }
-
-    setPendingConfirm(null);
-  }, [
-    pendingConfirm,
-    clearStoredLayouts,
-    clearStreamingSettings,
-    naturalAspect,
-    setNaturalAspect,
-  ]);
-
   const liveDashboardSwitchRows = [
     {
       id: "auto-live",
@@ -429,18 +351,6 @@ export default function UiSettingsView() {
       checked: cameraNames,
       onCheckedChange: setCameraName,
     },
-    // phones use the static grid, so tile sizing has nothing to affect there
-    ...(isMobileOnly
-      ? []
-      : [
-          {
-            id: "natural-aspect",
-            label: t("general.liveDashboard.naturalAspectLayout.label"),
-            description: t("general.liveDashboard.naturalAspectLayout.desc"),
-            checked: naturalAspect,
-            onCheckedChange: () => setPendingConfirm("naturalAspect"),
-          },
-        ]),
   ];
 
   return (
@@ -509,7 +419,7 @@ export default function UiSettingsView() {
                     id="stored-layouts-clear"
                     aria-label={t("general.storedLayouts.clearAll")}
                     className="w-full md:w-auto"
-                    onClick={() => setPendingConfirm("layouts")}
+                    onClick={clearStoredLayouts}
                   >
                     {t("general.storedLayouts.clearAll")}
                   </Button>
@@ -525,7 +435,7 @@ export default function UiSettingsView() {
                     id="camera-group-streaming-clear"
                     aria-label={t("general.cameraGroupStreaming.clearAll")}
                     className="w-full md:w-auto"
-                    onClick={() => setPendingConfirm("streaming")}
+                    onClick={clearStreamingSettings}
                   >
                     {t("general.cameraGroupStreaming.clearAll")}
                   </Button>
@@ -659,41 +569,9 @@ export default function UiSettingsView() {
           fileName={pendingImport.name}
           file={pendingImport.file}
           summary={pendingImport.summary}
-          currentNaturalAspect={naturalAspect ?? false}
           onConfirm={handleImportConfirm}
         />
       )}
-
-      <AlertDialog
-        open={pendingConfirm != null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setPendingConfirm(null);
-          }
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              {pendingConfirm && confirmCopy(pendingConfirm).title}
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              {pendingConfirm && confirmCopy(pendingConfirm).description}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>
-              {t("button.cancel", { ns: "common" })}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              className={cn(buttonVariants({ variant: "destructive" }))}
-              onClick={handleConfirm}
-            >
-              {pendingConfirm && confirmCopy(pendingConfirm).action}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </div>
   );
 }