From 94c1415e58984d4cdb8a5744c52db97fde2e2ede Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sun, 12 Mar 2023 13:26:29 -0700 Subject: [PATCH] Fix behavior of expanded mode in certain cases. --- README.md | 6 ++++-- src/card.ts | 42 +++++++++++++++++++++++++++++------------- src/scss/card.scss | 20 ++++++++++++-------- 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 1d2aba59..c4d9aa17 100644 --- a/README.md +++ b/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.| diff --git a/src/card.ts b/src/card.ts index 807a1fdc..e910cc03 100644 --- a/src/card.ts +++ b/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}`; } diff --git a/src/scss/card.scss b/src/scss/card.scss index 8c67e287..2f25c88d 100644 --- a/src/scss/card.scss +++ b/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%; } \ No newline at end of file