From 719d9386c53e2f9c75de31e7ce58459b6ea68488 Mon Sep 17 00:00:00 2001
From: Allen Porter <allen@thebends.org>
Date: Thu, 28 Oct 2021 11:02:06 -0700
Subject: [PATCH] Render Nest battery cam vertical video on screen correctly
 (#10431)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/components/ha-camera-stream.ts  | 4 ++--
 src/components/ha-hls-player.ts     | 1 +
 src/components/ha-web-rtc-player.ts | 6 ++++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts
index 5a10ec764e..8c50c15934 100644
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -86,7 +86,7 @@ class HaCameraStream extends LitElement {
     }
     if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
       return this._url
-        ? html` <ha-hls-player
+        ? html`<ha-hls-player
             autoplay
             playsinline
             .allowExoPlayer=${this.allowExoPlayer}
@@ -98,7 +98,7 @@ class HaCameraStream extends LitElement {
         : html``;
     }
     if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC) {
-      return html` <ha-web-rtc-player
+      return html`<ha-web-rtc-player
         autoplay
         playsinline
         .muted=${this.muted}
diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index 1db14c07ee..ac05a64317 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -229,6 +229,7 @@ class HaHLSPlayer extends LitElement {
 
       video {
         width: 100%;
+        max-height: var(--video-max-height, calc(100vh - 97px));
       }
     `;
   }
diff --git a/src/components/ha-web-rtc-player.ts b/src/components/ha-web-rtc-player.ts
index b31b2c0a7d..665e5ab456 100644
--- a/src/components/ha-web-rtc-player.ts
+++ b/src/components/ha-web-rtc-player.ts
@@ -145,9 +145,15 @@ class HaWebRtcPlayer extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host,
       video {
         display: block;
       }
+
+      video {
+        width: 100%;
+        max-height: var(--video-max-height, calc(100vh - 97px));
+      }
     `;
   }
 }