Media Browser Panel

src/components/ha-dialog.ts

@@ -10,7 +10,7 @@ import "./ha-icon-button";
 const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
 
 export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
-  ${title}
+  <div class="header_title">${title}</div>
   <mwc-icon-button
     aria-label=${hass.localize("ui.dialogs.generic.close")}
     dialogAction="close"
@@ -77,10 +77,17 @@ export class HaDialog extends MwcDialog {
           text-decoration: none;
           color: inherit;
         }
+        .header_title {
+          margin-right: 40px;
+        }
         [dir="rtl"].header_button {
           right: auto;
           left: 16px;
         }
+        [dir="rtl"].header_title {
+          margin-left: 40px;
+          margin-right: 0px;
+        }
       `,
     ];
   }

src/components/ha-hls-player.ts

@@ -0,0 +1,193 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../common/dom/fire_event";
+import { nextRender } from "../common/util/render-status";
+import { getExternalConfig } from "../external_app/external_config";
+import type { HomeAssistant } from "../types";
+
+type HLSModule = typeof import("hls.js");
+
+@customElement("ha-hls-player")
+class HaHLSPlayer extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public url!: string;
+
+  @property({ type: Boolean, attribute: "controls" })
+  public controls = false;
+
+  @property({ type: Boolean, attribute: "muted" })
+  public muted = false;
+
+  @property({ type: Boolean, attribute: "autoplay" })
+  public autoPlay = false;
+
+  @property({ type: Boolean, attribute: "playsinline" })
+  public playsInline = false;
+
+  @query("video") private _videoEl!: HTMLVideoElement;
+
+  private _hlsPolyfillInstance?: Hls;
+
+  private _useExoPlayer = false;
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._destroyPolyfill();
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <video
+        ?autoplay=${this.autoPlay}
+        ?muted=${this.muted}
+        ?playsinline=${this.playsInline}
+        ?controls=${this.controls}
+        @loadeddata=${this._elementResized}
+      ></video>
+    `;
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+
+    if (changedProps.has("url")) {
+      // Tear down existing polyfill, if available
+      this._destroyPolyfill();
+      this._startHls();
+    }
+  }
+
+  private async _getUseExoPlayer(): Promise<boolean> {
+    if (!this.hass!.auth.external) {
+      return false;
+    }
+    const externalConfig = await getExternalConfig(this.hass!.auth.external);
+    return externalConfig && externalConfig.hasExoPlayer;
+  }
+
+  private async _startHls(): Promise<void> {
+    let hls: any;
+    const videoEl = this._videoEl;
+    this._useExoPlayer = await this._getUseExoPlayer();
+    if (!this._useExoPlayer) {
+      hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any)
+        .default as HLSModule;
+      let hlsSupported = hls.isSupported();
+
+      if (!hlsSupported) {
+        hlsSupported =
+          videoEl.canPlayType("application/vnd.apple.mpegurl") !== "";
+      }
+
+      if (!hlsSupported) {
+        this._videoEl.innerHTML = this.hass.localize(
+          "ui.components.media-browser.video_not_supported"
+        );
+        return;
+      }
+    }
+
+    const url = this.url;
+
+    if (this._useExoPlayer) {
+      this._renderHLSExoPlayer(url);
+    } else if (hls.isSupported()) {
+      this._renderHLSPolyfill(videoEl, hls, url);
+    } else {
+      this._renderHLSNative(videoEl, url);
+    }
+  }
+
+  private async _renderHLSExoPlayer(url: string) {
+    window.addEventListener("resize", this._resizeExoPlayer);
+    this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
+    this._videoEl.style.visibility = "hidden";
+    await this.hass!.auth.external!.sendMessage({
+      type: "exoplayer/play_hls",
+      payload: new URL(url, window.location.href).toString(),
+    });
+  }
+
+  private _resizeExoPlayer = () => {
+    const rect = this._videoEl.getBoundingClientRect();
+    this.hass!.auth.external!.fireMessage({
+      type: "exoplayer/resize",
+      payload: {
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+      },
+    });
+  };
+
+  private async _renderHLSPolyfill(
+    videoEl: HTMLVideoElement,
+    Hls: HLSModule,
+    url: string
+  ) {
+    const hls = new Hls({
+      liveBackBufferLength: 60,
+      fragLoadingTimeOut: 30000,
+      manifestLoadingTimeOut: 30000,
+      levelLoadingTimeOut: 30000,
+    });
+    this._hlsPolyfillInstance = hls;
+    hls.attachMedia(videoEl);
+    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      hls.loadSource(url);
+    });
+  }
+
+  private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
+    videoEl.src = url;
+    await new Promise((resolve) =>
+      videoEl.addEventListener("loadedmetadata", resolve)
+    );
+    videoEl.play();
+  }
+
+  private _elementResized() {
+    fireEvent(this, "iron-resize");
+  }
+
+  private _destroyPolyfill() {
+    if (this._hlsPolyfillInstance) {
+      this._hlsPolyfillInstance.destroy();
+      this._hlsPolyfillInstance = undefined;
+    }
+    if (this._useExoPlayer) {
+      window.removeEventListener("resize", this._resizeExoPlayer);
+      this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" });
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host,
+      video {
+        display: block;
+      }
+
+      video {
+        width: 100%;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-hls-player": HaHLSPlayer;
+  }
+}

src/components/media-player/dialog-media-player-browse.ts

@@ -8,7 +8,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { HASSDomEvent } from "../../common/dom/fire_event";
+import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import type {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
@@ -33,16 +33,17 @@ class DialogMediaPlayerBrowse extends LitElement {
 
   @internalProperty() private _params?: MediaPlayerBrowseDialogParams;
 
-  public async showDialog(
-    params: MediaPlayerBrowseDialogParams
-  ): Promise<void> {
+  public showDialog(params: MediaPlayerBrowseDialogParams): void {
     this._params = params;
     this._entityId = this._params.entityId;
     this._mediaContentId = this._params.mediaContentId;
     this._mediaContentType = this._params.mediaContentType;
     this._action = this._params.action || "play";
+  }
 
-    await this.updateComplete;
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", {dialog: this.localName});
   }
 
   protected render(): TemplateResult {
@@ -57,7 +58,7 @@ class DialogMediaPlayerBrowse extends LitElement {
         escapeKeyAction
         hideActions
         flexContent
-        @closed=${this._closeDialog}
+        @closed=${this.closeDialog}
       >
         <ha-media-player-browse
           dialog
@@ -66,21 +67,17 @@ class DialogMediaPlayerBrowse extends LitElement {
           .action=${this._action!}
           .mediaContentId=${this._mediaContentId}
           .mediaContentType=${this._mediaContentType}
-          @close-dialog=${this._closeDialog}
+          @close-dialog=${this.closeDialog}
           @media-picked=${this._mediaPicked}
         ></ha-media-player-browse>
       </ha-dialog>
     `;
   }
 
-  private _closeDialog() {
-    this._params = undefined;
-  }
-
   private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
     this._params!.mediaPickedCallback(ev.detail);
     if (this._action !== "play") {
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 
@@ -93,14 +90,6 @@ class DialogMediaPlayerBrowse extends LitElement {
           --dialog-content-padding: 0;
         }
 
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        }
-
         @media (min-width: 800px) {
           ha-dialog {
             --mdc-dialog-max-width: 800px;