Merge pull request #1002 from dermotduffy/expand-height

Fix behavior of expanded mode in certain cases

README.md

@@ -690,7 +690,10 @@ timeline:
 These options control the aspect-ratio of the entire card to make placement in
 Home Assistant dashboards more stable. Aspect ratio configuration applies once
 to the entire card (including the menu, thumbnails, etc), not just to displayed
-media.
+media. This only applies to the card in normal render mode -- when in
+fullscreen, or when in expanded (popup/dialog mode) the aspect ratio is chosen
+dynamically to maximize the amount of content shown.
+
 
 All configuration is under:
 
@@ -700,7 +703,6 @@ dimensions:
 
 See the [fully expanded dimensions configuration example](#config-expanded-dimensions) for how these parameters are structured.
 
-
 | Option | Default | Overridable | Description |
 | - | - | - | - |
 | `aspect_ratio_mode` | `dynamic` | :white_check_mark: | The aspect ratio mode to use. Acceptable values: `dynamic`, `static`, `unconstrained`. See [aspect ratios](#aspect-ratios) below.|

src/card.ts

@@ -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,35 @@ class FrigateCard extends LitElement {
 
     this._lastValidMediaLoadedInfo = this._currentMediaLoadedInfo = mediaLoadedInfo;
 
-    // When a new media loads, set the aspect ratio for when the card is
+    this._setPropertiesForExpandedMode();
-    // expanded/popped-up.
-    this.style.setProperty(
-      '--frigate-card-expand-aspect-ratio',
-      this._getAspectRatioStyle(),
-    );
 
     // 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. This is based exclusively on last media content,
+    // as dimension configuration does not apply in fullscreen or expanded mode.
+    this.style.setProperty(
+      '--frigate-card-expand-aspect-ratio',
+      this._view?.isAnyMediaView() && this._lastValidMediaLoadedInfo
+        ? `${this._lastValidMediaLoadedInfo.width} / ${this._lastValidMediaLoadedInfo.height}`
+        : 'unset',
+    );
+    // Non-media mays have no intrinsic dimensions and so we need to explicit
+    // request the dialog to use all available space.
+    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 +1898,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 +1921,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 (
+    if (this._lastValidMediaLoadedInfo && aspectRatioMode === 'dynamic') {
-      this._lastValidMediaLoadedInfo &&
-      (aspectRatioMode === 'dynamic' ||
-        (this._expand && aspectRatioMode === 'unconstrained'))
-    ) {
       return `${this._lastValidMediaLoadedInfo.width} / ${this._lastValidMediaLoadedInfo.height}`;
     }
 

src/scss/card.scss

@@ -11,6 +11,15 @@
   // 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;
+  --frigate-card-expand-aspect-ratio: unset;
 }
 
 :host([dark]) {
@@ -162,14 +171,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)
+  --dialog-max-height: var(--frigate-card-expand-max-height);
-  // and bottom (to maintain center), before doing the calculation of
+  --dialog-max-width: var(--frigate-card-expand-max-width);
-  // 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-width: none;
+  --dialog-width: var(--frigate-card-expand-width);
-  --dialog-height: none;
+  --dialog-height: var(--frigate-card-expand-height);
 
   // Allow submenus to flow outside the edge of the dialog.
   --dialog-overflow-x: visible;
@@ -178,5 +184,4 @@ web-dialog {
 
 web-dialog::part(dialog) {
   aspect-ratio: var(--frigate-card-expand-aspect-ratio);
-  height: 100%;
 }