Add stream preview element to generic camera

src/components/ha-hls-player.ts

@@ -180,7 +180,15 @@ class HaHLSPlayer extends LitElement {
     let playlist_url: string;
     if (match !== null && matchTwice === null) {
       // Only send the regular playlist url if we match exactly once
-      playlist_url = new URL(match[3], this._url).href;
+      // In case we arrive here with a relative URL, we need to provide a valid
+      // base/absolute URL to avoid the URL() constructor throwing an error.
+      let base_url: string;
+      try {
+        base_url = new URL(this._url).href;
+      } catch (error) {
+        base_url = new URL(this._url, window.location.href).href;
+      }
+      playlist_url = new URL(match[3], base_url).href;
     } else {
       playlist_url = this._url;
     }

src/data/preview.ts

@@ -1,7 +1,7 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
 
-const HAS_CUSTOM_PREVIEW = ["template"];
+const HAS_CUSTOM_PREVIEW = ["generic_camera", "template"];
 
 export interface GenericPreview {
   state: string;

src/dialogs/config-flow/previews/flow-preview-generic.ts

@@ -11,7 +11,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 
 @customElement("flow-preview-generic")
-class FlowPreviewGeneric extends LitElement {
+export class FlowPreviewGeneric extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public flowType!: FlowType;
@@ -26,9 +26,9 @@ class FlowPreviewGeneric extends LitElement {
 
   @property() public stepData!: Record<string, any>;
 
-  @state() private _preview?: HassEntity;
+  @state() protected _preview?: HassEntity;
 
-  @state() private _error?: string;
+  @state() protected _error?: string;
 
   private _unsub?: Promise<UnsubscribeFunc>;
 

src/dialogs/config-flow/previews/flow-preview-generic_camera.ts

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { customElement } from "lit/decorators";
+import { FlowPreviewGeneric } from "./flow-preview-generic";
+import "../../../components/ha-hls-player";
+
+@customElement("flow-preview-generic_camera")
+class FlowPreviewGenericCamera extends FlowPreviewGeneric {
+  protected override render() {
+    if (!this._preview) {
+      return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
+    }
+
+    const stillUrl = this._preview.attributes.still_url;
+    const streamUrl = this._preview.attributes.stream_url;
+
+    return html` ${stillUrl
+      ? html`<p>Still image:</p>
+          <p>
+            <img src=${stillUrl} alt="Still preview" />
+          </p>`
+      : ""}
+    ${streamUrl
+      ? html`<p>Stream:</p>
+          <ha-hls-player
+            autoplay
+            playsinline
+            .hass=${this.hass}
+            .url=${streamUrl}
+            posterUrl="/static/icons/spinner-48x48.svg"
+          ></ha-hls-player>`
+      : ""}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "flow-preview-generic_camera": FlowPreviewGenericCamera;
+  }
+}