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..74b2a72c 100644 --- a/src/card.ts +++ b/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 - // 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. 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 ( - 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..81e97b8b 100644 --- a/src/scss/card.scss +++ b/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) - // 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 +184,4 @@ web-dialog { web-dialog::part(dialog) { aspect-ratio: var(--frigate-card-expand-aspect-ratio); - height: 100%; } \ No newline at end of file