Better fullscreen logic and HA frontend fix.

src/card.ts

@@ -31,7 +31,7 @@ import type {
 } from './types';
 
 import { CARD_VERSION } from './const';
-import { FrigateCardMenu } from './components/menu';
+import { FrigateCardMenu, MENU_HEIGHT } from './components/menu';
 import { View } from './view';
 import { getParseErrorKeys, homeAssistantWSRequest } from './common';
 import { localize } from './localize/localize';
@@ -420,7 +420,6 @@ export class FrigateCard extends LitElement {
 
   protected _mediaLoadHandler(e: CustomEvent<MediaLoadInfo>): void {
     const mediaInfo = e.detail;
-
     // In Safari, with WebRTC, 0x0 is occasionally returned during loading,
     // so treat anything less than a safety cutoff as bogus.
     if (mediaInfo.height < MEDIA_HEIGHT_CUTOFF || mediaInfo.width < MEDIA_WIDTH_CUTOFF) {
@@ -498,34 +497,37 @@ export class FrigateCard extends LitElement {
     }
 
     const padding = this._getAspectRatioPadding();
-    const outerStyle = {}, innerStyle = {};
+    const outerStyle = {},
+      innerStyle = {};
 
     // Padding to force a particular aspect ratio.
     if (padding != null) {
       outerStyle['padding-top'] = `${padding}%`;
     }
 
-    // Special treatment required when:
+    // Special hacky treatment required when:
     //
     // - It's in fullscreen mode
-    // - It's viewing a media clip
+    // - It's viewing a media item
-    // - And the media clip is taller than wider (portrait)
+    // - And the aspect ratio of the media item < aspect ratio of the window
     //
-    // We cannot seem to scale the video by height in CSS without actually
+    // Cannot seem to scale the video by height in CSS without actually styling
-    // styling the underlying video element (which we do not have access to as
+    // the underlying video element (which there is no access to as it's buried
-    // it's buried past multiple shadow roots), so instead scale the width in
+    // past multiple shadow roots), so instead scale the width in terms of'vh'
-    // terms of'vh' (viewport height) in proportion to the aspect-ratio of the
+    // (viewport height) in proportion to the aspect-ratio of the media.
-    // media.
     if (
       screenfull.isEnabled &&
       screenfull.isFullscreen &&
       this._view.isMediaView() &&
       this._mediaInfo &&
-      this._mediaInfo.width < this._mediaInfo.height
+      this._mediaInfo.width / this._mediaInfo.height <
+        window.innerWidth / window.innerHeight
     ) {
-      innerStyle['max-width'] = `${
+      // If the menu is outside the media (i.e. above/below) allow space for it.
+      const allowance = ["above", "below"].includes(this.config.menu_mode) ? MENU_HEIGHT : 0;
+      innerStyle['max-width'] = `calc(${
         (100 * this._mediaInfo.width) / this._mediaInfo.height
-      }vh`;
+      }vh - ${allowance}px )`;
     }
 
     const contentClasses = {

src/components/menu.ts

@@ -9,6 +9,8 @@ import menuStyle from '../scss/menu.scss';
 
 type FrigateCardMenuCallback = (name: string) => void;
 
+export const MENU_HEIGHT = 46;
+
 // A menu for the Frigate card.
 @customElement('frigate-card-menu')
 export class FrigateCardMenu extends LitElement {

src/patches/ha-camera-stream.ts

@@ -43,15 +43,20 @@ customElements.whenDefined('ha-camera-stream').then(() => {
         return html``;
       }
 
+      // Below .src binding tweaked to work pre/post:
+      // - https://github.com/home-assistant/frontend/commit/e963735dbabdc2fea8a95aea325952560c727625
       return html`
         ${this._shouldRenderMJPEG
           ? html`
               <img
                 @load=${(e) => {
-                  this._elementResized();
                   dispatchMediaLoadEvent(this, e);
                 }}
-                .src=${computeMJPEGStreamUrl(this.stateObj)}
+                .src=${
+                  (typeof this._connected == 'undefined' ||
+                   this._connected)
+                  ? computeMJPEGStreamUrl(this.stateObj)
+                  : ''}
                 .alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`}
               />
             `