Fix behavior of expanded mode in certain cases.

src/card.ts

@@ -13,7 +13,7 @@ import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 import throttle from 'lodash-es/throttle';
 import screenfull from 'screenfull';
-import { z } from 'zod';
+import { string, z } from 'zod';
 import { actionHandler } from './action-handler-directive.js';
 import {
   CardConditionManager,
@@ -976,6 +976,10 @@ class FrigateCard extends LitElement {
     } else if (this._view?.is('timeline')) {
       import('./components/timeline.js');
     }
+
+    if (changedProps.has('_view')) {
+      this._setPropertiesForExpandedMode();
+    }
   }
 
   /**
@@ -1803,18 +1807,32 @@ class FrigateCard extends LitElement {
 
     this._lastValidMediaLoadedInfo = this._currentMediaLoadedInfo = mediaLoadedInfo;
 
-    // When a new media loads, set the aspect ratio for when the card is
-    // expanded/popped-up.
-    this.style.setProperty(
-      '--frigate-card-expand-aspect-ratio',
-      this._getAspectRatioStyle(),
-    );
+    this._setPropertiesForExpandedMode();
 
     // An update may be required to draw elements.
     this._generateConditionState();
     this.requestUpdate();
   }
 
+  protected _setPropertiesForExpandedMode(): void {
+    // When a new media loads, set the aspect ratio for when the card is
+    // expanded/popped-up.
+    if (this._view?.isAnyMediaView() && this._lastValidMediaLoadedInfo) {
+      this.style.setProperty(
+        '--frigate-card-expand-aspect-ratio',
+        `${this._lastValidMediaLoadedInfo.width} / ${this._lastValidMediaLoadedInfo.height}`,
+      );
+    }
+    this.style.setProperty(
+      '--frigate-card-expand-width',
+      this._view?.isAnyMediaView() ? 'none' : 'var(--frigate-card-expand-max-width)',
+    );
+    this.style.setProperty(
+      '--frigate-card-expand-height',
+      this._view?.isAnyMediaView() ? 'none' : 'var(--frigate-card-expand-max-height)',
+    );
+  }
+
   /**
    * Unload a media item.
    */
@@ -1877,12 +1895,14 @@ class FrigateCard extends LitElement {
 
     // Do not artifically constrain aspect ratio if:
     // - It's fullscreen.
+    // - It's in expanded mode.
     // - Aspect ratio enforcement is disabled.
     // - Aspect ratio enforcement is dynamic and it's a media view (i.e. not the
     //   gallery) or timeline.
 
     return !(
       (screenfull.isEnabled && screenfull.isFullscreen) ||
+      this._expand ||
       aspectRatioMode == 'unconstrained' ||
       (aspectRatioMode == 'dynamic' &&
         (this._view?.isAnyMediaView() || this._view?.is('timeline')))
@@ -1898,17 +1918,13 @@ class FrigateCard extends LitElement {
     // In expanded mode we must always set the aspect ratio since there are no
     // constraints on the size.
 
-    if (!this._expand && !this._isAspectRatioEnforced()) {
+    if (!this._isAspectRatioEnforced()) {
       return 'auto';
     }
 
     const aspectRatioMode = this._getConfig().dimensions.aspect_ratio_mode;
 
-    if (
-      this._lastValidMediaLoadedInfo &&
-      (aspectRatioMode === 'dynamic' ||
-        (this._expand && aspectRatioMode === 'unconstrained'))
-    ) {
+    if (this._lastValidMediaLoadedInfo && aspectRatioMode === 'dynamic') {
       return `${this._lastValidMediaLoadedInfo.width} / ${this._lastValidMediaLoadedInfo.height}`;
     }
 

src/scss/card.scss

@@ -11,6 +11,14 @@
   // The primary border-radius used is the div.main. This is only useful for
   // keeping the background-color within the radius.
   border-radius: var(--ha-card-border-radius, 4px);
+
+  // The standard HA header is 56 pixels wide, so that much off the top (header)
+  // and bottom (to maintain center), before doing the calculation of
+  // max-height. This matters on small mobile devices in landscape orientation.
+  --frigate-card-expand-max-height: calc( ( 100vh - (2 * 56px) ) * 0.85 );
+  --frigate-card-expand-max-width: 85vw;
+  --frigate-card-expand-width: none;
+  --frigate-card-expand-height: none;
 }
 
 :host([dark]) {
@@ -162,14 +170,11 @@ web-dialog {
   --dialog-padding: 0px;
   --dialog-container-padding: 0px;
 
-  // The standard HA header is 56 pixels wide, so that much off the top (header)
-  // and bottom (to maintain center), before doing the calculation of
-  // max-height. This matters on small mobile devices in landscape orientation.
-  --dialog-max-height: calc( ( 100vh - (2 * 56px) ) * 0.85 );
-  --dialog-max-width: 85vw;
+  --dialog-max-height: var(--frigate-card-expand-max-height);
+  --dialog-max-width: var(--frigate-card-expand-max-width);
 
-  --dialog-width: none;
-  --dialog-height: none;
+  --dialog-width: var(--frigate-card-expand-width);
+  --dialog-height: var(--frigate-card-expand-height);
 
   // Allow submenus to flow outside the edge of the dialog.
   --dialog-overflow-x: visible;
@@ -178,5 +183,4 @@ web-dialog {
 
 web-dialog::part(dialog) {
   aspect-ratio: var(--frigate-card-expand-aspect-ratio);
-  height: 100%;
 }