fixes

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

@@ -38,8 +38,7 @@ test.describe("Masonry live grid @critical", () => {
   test("tiles render at their camera's natural aspect ratio", async ({
     frigateApp,
   }) => {
-    // front_door stays 16:9; backyard is overridden to portrait so the two
-    // tiles must render with opposite orientations.
+    // 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 } } },
@@ -47,20 +46,24 @@ test.describe("Masonry live grid @critical", () => {
     });
     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",
     );
 
-    // 16:9 tile is clearly wider than tall; portrait tile is taller than wide.
-    expect(landscape.w / landscape.h).toBeGreaterThan(1.4);
-    expect(portrait.w / portrait.h).toBeLessThan(1);
+    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 ({
@@ -210,6 +213,32 @@ test.describe("Masonry live grid @critical", () => {
       .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,
   }) => {

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

@@ -178,6 +178,52 @@ 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,
   }) => {