Show when media is being loaded (#11750)

src/data/media-player.ts

@@ -33,7 +33,8 @@ import type { HomeAssistant } from "../types";
 import { UNAVAILABLE_STATES } from "./entity";
 
 interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
-  media_content_type?: any;
+  media_content_id?: string;
+  media_content_type?: string;
   media_artist?: string;
   media_playlist?: string;
   media_series_title?: string;

src/panels/media-browser/browser-media-player.ts

@@ -5,61 +5,60 @@ import {
   SUPPORT_PAUSE,
   SUPPORT_PLAY,
 } from "../../data/media-player";
-import { resolveMediaSource } from "../../data/media_source";
+import { ResolvedMediaSource } from "../../data/media_source";
 import { HomeAssistant } from "../../types";
 
 export class BrowserMediaPlayer {
-  private player?: HTMLAudioElement;
+  private player: HTMLAudioElement;
 
-  private stopped = false;
+  // We pretend we're playing while still buffering.
+  public buffering = true;
+
+  private _removed = false;
 
   constructor(
     public hass: HomeAssistant,
     public item: MediaPlayerItem,
+    public resolved: ResolvedMediaSource,
     private onChange: () => void
-  ) {}
+  ) {
-
+    const player = new Audio(this.resolved.url);
-  public async initialize() {
-    const resolvedUrl: any = await resolveMediaSource(
-      this.hass,
-      this.item.media_content_id
-    );
-
-    const player = new Audio(resolvedUrl.url);
     player.addEventListener("play", this._handleChange);
-    player.addEventListener("playing", this._handleChange);
+    player.addEventListener("playing", () => {
+      this.buffering = false;
+      this._handleChange();
+    });
     player.addEventListener("pause", this._handleChange);
     player.addEventListener("ended", this._handleChange);
     player.addEventListener("canplaythrough", () => {
-      if (this.stopped) {
+      if (this._removed) {
         return;
       }
-      this.player = player;
+      if (this.buffering) {
         player.play();
+      }
       this.onChange();
     });
+    this.player = player;
   }
 
   private _handleChange = () => {
-    if (!this.stopped) {
+    if (!this._removed) {
       this.onChange();
     }
   };
 
   public pause() {
-    if (this.player) {
+    this.buffering = false;
     this.player.pause();
   }
-  }
 
   public play() {
-    if (this.player) {
     this.player.play();
   }
-  }
 
-  public stop() {
+  public remove() {
-    this.stopped = true;
+    this._removed = true;
     // @ts-ignore
     this.onChange = undefined;
     if (this.player) {
@@ -68,9 +67,7 @@ export class BrowserMediaPlayer {
   }
 
   public get isPlaying(): boolean {
-    return (
+    return this.buffering || (!this.player.paused && !this.player.ended);
-      this.player !== undefined && !this.player.paused && !this.player.ended
-    );
   }
 
   static idleStateObj(): MediaPlayerEntity {
@@ -88,19 +85,19 @@ export class BrowserMediaPlayer {
   toStateObj(): MediaPlayerEntity {
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
     const base = BrowserMediaPlayer.idleStateObj();
-    if (!this.player) {
-      return base;
-    }
     base.state = this.isPlaying ? "playing" : "paused";
     base.attributes = {
       media_title: this.item.title,
-      media_duration: this.player.duration,
-      media_position: this.player.currentTime,
-      media_position_updated_at: base.last_updated,
       entity_picture: this.item.thumbnail,
       // eslint-disable-next-line no-bitwise
       supported_features: SUPPORT_PLAY | SUPPORT_PAUSE,
     };
+
+    if (this.player.duration) {
+      base.attributes.media_duration = this.player.duration;
+      base.attributes.media_position = this.player.currentTime;
+      base.attributes.media_position_updated_at = base.last_updated;
+    }
     return base;
   }
 }

src/panels/media-browser/ha-bar-media-player.ts

@@ -20,6 +20,7 @@ import {
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
@@ -27,6 +28,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-button-menu";
+import "../../components/ha-circular-progress";
 import "../../components/ha-icon-button";
 import { UNAVAILABLE_STATES } from "../../data/entity";
 import {
@@ -43,6 +45,7 @@ import {
   SUPPORT_PLAY,
   SUPPORT_STOP,
 } from "../../data/media-player";
+import { ResolvedMediaSource } from "../../data/media_source";
 import type { HomeAssistant } from "../../types";
 import "../lovelace/components/hui-marquee";
 import { BrowserMediaPlayer } from "./browser-media-player";
@@ -54,7 +57,7 @@ declare global {
 }
 
 @customElement("ha-bar-media-player")
-class BarMediaPlayer extends LitElement {
+export class BarMediaPlayer extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public entityId!: string;
@@ -68,6 +71,8 @@ class BarMediaPlayer extends LitElement {
 
   @state() private _marqueeActive = false;
 
+  @state() private _newMediaExpected = false;
+
   @state() private _browserPlayer?: BrowserMediaPlayer;
 
   private _progressInterval?: number;
@@ -98,32 +103,54 @@ class BarMediaPlayer extends LitElement {
       clearInterval(this._progressInterval);
       this._progressInterval = undefined;
     }
-
+    this._tearDownBrowserPlayer();
-    if (this._browserPlayer) {
-      this._browserPlayer.stop();
-      this._browserPlayer = undefined;
-    }
   }
 
-  public async playItem(item: MediaPlayerItem) {
+  public showResolvingNewMediaPicked() {
+    this._tearDownBrowserPlayer();
+    this._newMediaExpected = true;
+  }
+
+  public hideResolvingNewMediaPicked() {
+    this._newMediaExpected = false;
+  }
+
+  public playItem(item: MediaPlayerItem, resolved: ResolvedMediaSource) {
     if (this.entityId !== BROWSER_PLAYER) {
       throw Error("Only browser supported");
     }
-    if (this._browserPlayer) {
+    this._tearDownBrowserPlayer();
-      this._browserPlayer.stop();
+    this._browserPlayer = new BrowserMediaPlayer(
-    }
+      this.hass,
-    this._browserPlayer = new BrowserMediaPlayer(this.hass, item, () =>
+      item,
-      this.requestUpdate("_browserPlayer")
+      resolved,
+      () => this.requestUpdate("_browserPlayer")
     );
-    await this._browserPlayer.initialize();
+    this._newMediaExpected = false;
   }
 
   protected render(): TemplateResult {
+    if (this._newMediaExpected) {
+      return html`
+        <div class="controls-progress">
+          ${until(
+            // Only show spinner after 500ms
+            new Promise((resolve) => setTimeout(resolve, 500)).then(
+              () => html`<ha-circular-progress active></ha-circular-progress>`
+            )
+          )}
+        </div>
+      `;
+    }
+
     const isBrowser = this.entityId === BROWSER_PLAYER;
     const stateObj = this._stateObj;
-    const controls = !stateObj
+
-      ? undefined
+    if (!stateObj) {
-      : !this.narrow
+      return this._renderChoosePlayer(stateObj);
+    }
+
+    const controls = !this.narrow
       ? computeMediaControls(stateObj)
       : (stateObj.state === "playing" &&
           (supportsFeature(stateObj, SUPPORT_PAUSE) ||
@@ -152,16 +179,14 @@ class BarMediaPlayer extends LitElement {
           },
         ]
       : [{}];
-    const mediaDescription = stateObj ? computeMediaDescription(stateObj) : "";
+    const mediaDescription = computeMediaDescription(stateObj);
-    const mediaDuration = formatMediaTime(stateObj?.attributes.media_duration);
+    const mediaDuration = formatMediaTime(stateObj.attributes.media_duration);
     const mediaTitleClean = cleanupMediaTitle(
-      stateObj?.attributes.media_title || ""
+      stateObj.attributes.media_title || ""
     );
-
+    const mediaArt =
-    const mediaArt = stateObj
+      stateObj.attributes.entity_picture_local ||
-      ? stateObj.attributes.entity_picture_local ||
+      stateObj.attributes.entity_picture;
-        stateObj.attributes.entity_picture
-      : undefined;
 
     return html`
       <div
@@ -177,7 +202,10 @@ class BarMediaPlayer extends LitElement {
           <hui-marquee
             .text=${mediaTitleClean ||
             mediaDescription ||
-            this.hass.localize(`ui.card.media_player.nothing_playing`)}
+            cleanupMediaTitle(stateObj.attributes.media_content_id) ||
+            (stateObj.state !== "playing" && stateObj.state !== "on"
+              ? this.hass.localize(`ui.card.media_player.nothing_playing`)
+              : "")}
             .active=${this._marqueeActive}
             @mouseover=${this._marqueeMouseOver}
             @mouseleave=${this._marqueeMouseLeave}
@@ -188,6 +216,9 @@ class BarMediaPlayer extends LitElement {
         </div>
       </div>
       <div class="controls-progress">
+        ${this._browserPlayer?.buffering
+          ? html` <ha-circular-progress active></ha-circular-progress> `
+          : html`
               <div class="controls">
                 ${controls === undefined
                   ? ""
@@ -205,7 +236,7 @@ class BarMediaPlayer extends LitElement {
                       `
                     )}
               </div>
-        ${stateObj?.attributes.media_duration === Infinity
+              ${stateObj.attributes.media_duration === Infinity
                 ? html``
                 : this.narrow
                 ? html`<mwc-linear-progress></mwc-linear-progress>`
@@ -216,10 +247,19 @@ class BarMediaPlayer extends LitElement {
                       <div>${mediaDuration}</div>
                     </div>
                   `}
+            `}
       </div>
+      ${this._renderChoosePlayer(stateObj)}
+    `;
+  }
+
+  private _renderChoosePlayer(stateObj: MediaPlayerEntity | undefined) {
+    const isBrowser = this.entityId === BROWSER_PLAYER;
+    return html`
     <div class="choose-player ${isBrowser ? "browser" : ""}">
           <ha-button-menu corner="BOTTOM_START">
-          ${this.narrow
+            ${
+              this.narrow
                 ? html`
                     <ha-icon-button
                       slot="trigger"
@@ -233,7 +273,11 @@ class BarMediaPlayer extends LitElement {
                       slot="trigger"
                       .label=${this.narrow
                         ? ""
-                    : `${stateObj ? computeStateName(stateObj) : this.entityId}
+                        : `${
+                            stateObj
+                              ? computeStateName(stateObj)
+                              : this.entityId
+                          }
                 `}
                     >
                       <ha-svg-icon
@@ -247,7 +291,8 @@ class BarMediaPlayer extends LitElement {
                         .path=${mdiChevronDown}
                       ></ha-svg-icon>
                     </mwc-button>
-              `}
+                  `
+            }
             <mwc-list-item
               .player=${BROWSER_PLAYER}
               ?selected=${isBrowser}
@@ -269,18 +314,26 @@ class BarMediaPlayer extends LitElement {
             )}
           </ha-button-menu>
         </div>
+      </div>
+
     `;
   }
 
   public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
+    if (changedProps.has("entityId")) {
+      this._tearDownBrowserPlayer();
+    }
+    if (!changedProps.has("hass") || this.entityId === BROWSER_PLAYER) {
+      return;
+    }
+    // Reset new media expected if media player state changes
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (
-      changedProps.has("entityId") &&
+      !oldHass ||
-      this.entityId !== BROWSER_PLAYER &&
+      oldHass.states[this.entityId] !== this.hass.states[this.entityId]
-      this._browserPlayer
     ) {
-      this._browserPlayer?.stop();
+      this._newMediaExpected = false;
-      this._browserPlayer = undefined;
     }
   }
 
@@ -329,6 +382,13 @@ class BarMediaPlayer extends LitElement {
     return this.hass!.states[this.entityId] as MediaPlayerEntity | undefined;
   }
 
+  private _tearDownBrowserPlayer() {
+    if (this._browserPlayer) {
+      this._browserPlayer.remove();
+      this._browserPlayer = undefined;
+    }
+  }
+
   private _openMoreInfo() {
     if (this._browserPlayer) {
       return;

src/panels/media-browser/ha-panel-media-browser.ts

@@ -37,6 +37,7 @@ import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, Route } from "../../types";
 import "./ha-bar-media-player";
+import type { BarMediaPlayer } from "./ha-bar-media-player";
 import { showWebBrowserPlayMediaDialog } from "./show-media-player-dialog";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import {
@@ -79,6 +80,8 @@ class PanelMediaBrowser extends LitElement {
 
   @query("ha-media-player-browse") private _browser!: HaMediaPlayerBrowse;
 
+  @query("ha-bar-media-player") private _player!: BarMediaPlayer;
+
   protected render(): TemplateResult {
     return html`
       <ha-app-layout>
@@ -235,15 +238,23 @@ class PanelMediaBrowser extends LitElement {
     ev: HASSDomEvent<MediaPickedEvent>
   ): Promise<void> {
     const item = ev.detail.item;
+
     if (this._entityId !== BROWSER_PLAYER) {
-      this.hass!.callService("media_player", "play_media", {
+      this._player.showResolvingNewMediaPicked();
+      try {
+        await this.hass!.callService("media_player", "play_media", {
           entity_id: this._entityId,
           media_content_id: item.media_content_id,
           media_content_type: item.media_content_type,
         });
+      } catch (err) {
+        this._player.hideResolvingNewMediaPicked();
+      }
       return;
     }
 
+    // We won't cancel current media being played if we're going to
+    // open a camera.
     if (isCameraMediaSource(item.media_content_id)) {
       fireEvent(this, "hass-more-info", {
         entityId: getEntityIdFromCameraMediaSource(item.media_content_id),
@@ -251,15 +262,15 @@ class PanelMediaBrowser extends LitElement {
       return;
     }
 
+    this._player.showResolvingNewMediaPicked();
+
     const resolvedUrl = await resolveMediaSource(
       this.hass,
       item.media_content_id
     );
 
     if (resolvedUrl.mime_type.startsWith("audio/")) {
-      await this.shadowRoot!.querySelector("ha-bar-media-player")!.playItem(
+      this._player.playItem(item, resolvedUrl);
-        item
-      );
       return;
     }