From 3c10b329a25e8647f6e8b577936c7863728da334 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Thu, 30 Sep 2021 22:46:10 -0700
Subject: [PATCH 1/2] Better fullscreen logic and HA frontend fix.

---
 src/card.ts                     | 32 +++++++++++++++++---------------
 src/components/menu.ts          |  2 ++
 src/patches/ha-camera-stream.ts |  9 +++++++--
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/card.ts b/src/card.ts
index 9900d6e2..00bb4397 100644
--- a/src/card.ts
+++ b/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
-    // - And the media clip is taller than wider (portrait)
-    // 
-    // We cannot seem to scale the video by height in CSS without actually
-    // styling the underlying video element (which we do not have access to as
-    // it's buried past multiple shadow roots), so instead scale the width in
-    // terms of'vh' (viewport height) in proportion to the aspect-ratio of the
-    // media.
+    // - It's viewing a media item
+    // - And the aspect ratio of the media item < aspect ratio of the window
+    //
+    // Cannot seem to scale the video by height in CSS without actually styling
+    // the underlying video element (which there is no access to as it's buried
+    // past multiple shadow roots), so instead scale the width in terms of'vh'
+    // (viewport height) in proportion to the aspect-ratio of the 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 = {
diff --git a/src/components/menu.ts b/src/components/menu.ts
index deb15256..37d9b45a 100644
--- a/src/components/menu.ts
+++ b/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 {
diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts
index 92be67fb..bd69df4b 100644
--- a/src/patches/ha-camera-stream.ts
+++ b/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.`}
               />
             `

From e5565f964b65deb2944b31f3ce9a444bf4785069 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Fri, 1 Oct 2021 20:17:50 -0700
Subject: [PATCH 2/2] Actually call _elementResized if available.

---
 src/patches/ha-camera-stream.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/patches/ha-camera-stream.ts b/src/patches/ha-camera-stream.ts
index bd69df4b..1bbf315a 100644
--- a/src/patches/ha-camera-stream.ts
+++ b/src/patches/ha-camera-stream.ts
@@ -43,13 +43,16 @@ customElements.whenDefined('ha-camera-stream').then(() => {
         return html``;
       }
 
-      // Below .src binding tweaked to work pre/post:
+      // Below .src/@load bindings tweaked to work pre/post:
       // - https://github.com/home-assistant/frontend/commit/e963735dbabdc2fea8a95aea325952560c727625
       return html`
         ${this._shouldRenderMJPEG
           ? html`
               <img
                 @load=${(e) => {
+                  if (typeof this._elementResized != 'undefined') {
+                    this._elementResized();
+                  }
                   dispatchMediaLoadEvent(this, e);
                 }}
                 .src=${