Update dimensions and media layout options to be per camera.

src/components/live/live.ts

@@ -41,7 +41,7 @@ import {
   Message,
 } from '../../types.js';
 import { stopEventFromActivatingCardWideActions } from '../../utils/action.js';
-import { contentsChanged } from '../../utils/basic.js';
+import { aspectRatioToString, contentsChanged } from '../../utils/basic.js';
 import { CarouselSelected } from '../../utils/embla/carousel-controller.js';
 import { AutoLazyLoad } from '../../utils/embla/plugins/auto-lazy-load/auto-lazy-load.js';
 import { AutoMediaActions } from '../../utils/embla/plugins/auto-media-actions/auto-media-actions.js';
@@ -900,7 +900,6 @@ export class FrigateCardLiveProvider
       }
     }
     if (changedProps.has('liveConfig')) {
-      updateElementStyleFromMediaLayoutConfig(this, this.liveConfig?.layout);
       if (this.liveConfig?.show_image_during_load) {
         this._importPromises.push(import('./live-image.js'));
       }
@@ -908,6 +907,7 @@ export class FrigateCardLiveProvider
         this._importPromises.push(import('./../zoomer.js'));
       }
     }
+
     if (changedProps.has('cameraConfig')) {
       const provider = this._getResolvedProvider();
       if (provider === 'jsmpeg') {
@@ -921,6 +921,14 @@ export class FrigateCardLiveProvider
       } else if (provider === 'go2rtc') {
         this._importPromises.push(import('./live-go2rtc.js'));
       }
+
+      updateElementStyleFromMediaLayoutConfig(
+        this,
+        this.cameraConfig?.dimensions?.layout,
+      );
+      this.style.aspectRatio = aspectRatioToString({
+        ratio: this.cameraConfig?.dimensions?.aspect_ratio,
+      });
     }
   }
 

src/components/viewer.ts

@@ -37,6 +37,7 @@ import {
 import { stopEventFromActivatingCardWideActions } from '../utils/action.js';
 import { mayHaveAudio } from '../utils/audio.js';
 import {
+  aspectRatioToString,
   contentsChanged,
   errorToConsole,
   setOrRemoveAttribute,
@@ -396,10 +397,6 @@ export class FrigateCardViewerCarousel extends LitElement {
    * @param changedProps The changed properties
    */
   protected willUpdate(changedProps: PropertyValues): void {
-    if (changedProps.has('viewerConfig')) {
-      updateElementStyleFromMediaLayoutConfig(this, this.viewerConfig?.layout);
-    }
-
     if (changedProps.has('view')) {
       const newMedia =
         this.view?.queryResults?.getResults(this.viewFilterCameraID) ?? null;
@@ -853,6 +850,18 @@ export class FrigateCardViewerProvider
     if (changedProps.has('viewerConfig') && this.viewerConfig?.zoomable) {
       import('./zoomer.js');
     }
+
+    if (changedProps.has('media') || changedProps.has('cameraManager')) {
+      const cameraID = this.media?.getCameraID();
+      const cameraConfig = cameraID
+        ? this.cameraManager?.getStore().getCameraConfig(cameraID)
+        : null;
+      updateElementStyleFromMediaLayoutConfig(this, cameraConfig?.dimensions?.layout);
+
+      this.style.aspectRatio = aspectRatioToString({
+        ratio: cameraConfig?.dimensions?.aspect_ratio,
+      });
+    }
   }
 
   protected _useZoomIfRequired(template: TemplateResult): TemplateResult {