Update dimensions and media layout options to be per camera.

tests/card-controller/style-manager.test.ts

@@ -245,7 +245,7 @@ describe('StyleManager', () => {
     it('without config or view', () => {
       const api = createCardAPI();
       const manager = new StyleManager(api);
-      expect(manager.getAspectRatioStyle()).toBe('16 / 9');
+      expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': '16 / 9' });
     });
 
     it('should be auto with unconstrained aspect ratio', () => {
@@ -260,7 +260,7 @@ describe('StyleManager', () => {
         }),
       );
       const manager = new StyleManager(api);
-      expect(manager.getAspectRatioStyle()).toBe('auto');
+      expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': 'auto' });
     });
 
     it('should be auto in fullscreen', () => {
@@ -271,7 +271,7 @@ describe('StyleManager', () => {
       vi.mocked(api.getFullscreenManager().isInFullscreen).mockReturnValue(true);
       const manager = new StyleManager(api);
 
-      expect(manager.getAspectRatioStyle()).toBe('auto');
+      expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': 'auto' });
     });
 
     it('should be auto when expanded', () => {
@@ -282,7 +282,7 @@ describe('StyleManager', () => {
       vi.mocked(api.getExpandManager().isExpanded).mockReturnValue(true);
       const manager = new StyleManager(api);
 
-      expect(manager.getAspectRatioStyle()).toBe('auto');
+      expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': 'auto' });
     });
 
     it('should be auto when there is yet to be a view', () => {
@@ -291,7 +291,7 @@ describe('StyleManager', () => {
       vi.mocked(api.getConfigManager().getConfig).mockReturnValue(createConfig());
       const manager = new StyleManager(api);
 
-      expect(manager.getAspectRatioStyle()).toBe('auto');
+      expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': 'auto' });
     });
 
     describe('should be auto when dynamic in certain views', () => {
@@ -317,7 +317,7 @@ describe('StyleManager', () => {
         );
         const manager = new StyleManager(api);
 
-        expect(manager.getAspectRatioStyle()).toBe('auto');
+        expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': 'auto' });
       });
     });
 
@@ -337,7 +337,7 @@ describe('StyleManager', () => {
           );
           const manager = new StyleManager(api);
 
-          expect(manager.getAspectRatioStyle()).toBe('16 / 9');
+          expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': '16 / 9' });
         },
       );
     });
@@ -362,7 +362,9 @@ describe('StyleManager', () => {
           });
           const manager = new StyleManager(api);
 
-          expect(manager.getAspectRatioStyle()).toBe('800 / 600');
+          expect(manager.getAspectRatioStyle()).toEqual({
+            'aspect-ratio': '800 / 600',
+          });
         },
       );
     });
@@ -381,7 +383,7 @@ describe('StyleManager', () => {
       );
       const manager = new StyleManager(api);
 
-      expect(manager.getAspectRatioStyle()).toBe('4 / 3');
+      expect(manager.getAspectRatioStyle()).toEqual({ 'aspect-ratio': '4 / 3' });
     });
   });
 });

tests/config-mgmt.test.ts

@@ -1738,5 +1738,59 @@ describe('should handle version specific upgrades', () => {
         });
       });
     });
+
+    describe('should handle media layout changes', () => {
+      it('from live.layout to camera_global.dimensions', () => {
+        const config = {
+          live: {
+            layout: {
+              fit: 'cover',
+              position: {
+                x: 42,
+                y: 43,
+              },
+            },
+          },
+        };
+        expect(upgradeConfig(config)).toBeTruthy();
+        expect(config).toEqual({
+          live: {},
+          cameras_global: {
+            dimensions: {
+              layout: {
+                fit: 'cover',
+                position: {
+                  x: 42,
+                  y: 43,
+                },
+              },
+            },
+          },
+        });
+      });
+
+      describe('from delete old media layouts', () => {
+        it.each([['media_viewer' as const], ['image' as const]])(
+          '%s',
+          (section: string) => {
+            const config = {
+              [section]: {
+                layout: {
+                  fit: 'cover',
+                  position: {
+                    x: 42,
+                    y: 43,
+                  },
+                },
+              },
+            };
+            expect(upgradeConfig(config)).toBeTruthy();
+            expect(config).toEqual({
+              [section]: {},
+            });
+          },
+        );
+      });
+    });
   });
 });

tests/utils/basic.test.ts

@@ -2,8 +2,9 @@ import { afterAll, describe, expect, it, vi } from 'vitest';
 import { FrigateCardError } from '../../src/types';
 import {
   allPromises,
-  arrayMove,
   arrayify,
+  arrayMove,
+  aspectRatioToStyle,
   contentsChanged,
   dayToDate,
   dispatchFrigateCardEvent,
@@ -12,16 +13,16 @@ import {
   formatDateAndTime,
   getChildrenFromElement,
   getDurationString,
-  isHTMLElement,
   isHoverableDevice,
+  isHTMLElement,
   isSuperset,
   isTruthy,
   isValidDate,
   prettifyTitle,
   recursivelyMergeObjectsNotArrays,
   runWhenIdleIfSupported,
-  setOrRemoveAttribute,
   setify,
+  setOrRemoveAttribute,
   sleep,
 } from '../../src/utils/basic';
 import { createSlot, createSlotHost } from '../test-utils';
@@ -338,3 +339,20 @@ describe('recursivelyMergeObjectsNotArrays', () => {
     });
   });
 });
+
+describe('aspectRatioToStyle', () => {
+  it('default', () => {
+    expect(aspectRatioToStyle()).toEqual({ 'aspect-ratio': 'auto' });
+  });
+  it('default static', () => {
+    expect(aspectRatioToStyle({ defaultStatic: true })).toEqual({
+      'aspect-ratio': '16 / 9',
+    });
+  });
+  it('valid ratio', () => {
+    expect(aspectRatioToStyle({ ratio: [4, 3] })).toEqual({ 'aspect-ratio': '4 / 3' });
+  });
+  it('invalid ratio', () => {
+    expect(aspectRatioToStyle({ ratio: [4] })).toEqual({ 'aspect-ratio': 'auto' });
+  });
+});