Thumbnail carousel initial draft

src/patches/ha-camera-stream.ts

@@ -9,7 +9,7 @@
 // available as compilation time.
 // ====================================================================
 
-import { TemplateResult, html } from 'lit';
+import { TemplateResult, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { dispatchMediaShowEvent } from '../common.js';
 
@@ -75,5 +75,16 @@ customElements.whenDefined('ha-camera-stream').then(() => {
           : ''}
       `;
     }
+
+    static get styles(): CSSResultGroup {
+      return [
+        super.styles,
+        css`
+          :host {
+            width: 100%;
+            height: 100%;
+          }`
+      ];
+    }
   }
 });

src/patches/ha-hls-player.ts

@@ -9,8 +9,9 @@
 // available as compilation time.
 // ====================================================================
 
-import { TemplateResult, html } from 'lit';
+import { TemplateResult, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+
 import {
   dispatchMediaShowEvent,
   dispatchPauseEvent,
@@ -44,5 +45,22 @@ customElements.whenDefined('ha-hls-player').then(() => {
         ></video>
       `;
     }
+
+    static get styles(): CSSResultGroup {
+      return [
+        super.styles,
+        css`
+          :host {
+            width: 100%;
+            height: 100%;
+          }
+          video {
+            object-fit: contain;
+            height: 100%;
+            width: 100%;
+          }
+        `
+      ]
+    }
   }
 });