Update Error handling

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

@@ -22,15 +22,15 @@ import { styleMap } from "lit-html/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
+import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseLocalMediaPlayer,
   browseMediaPlayer,
-  BROWSER_SOURCE,
+  BROWSER_PLAYER,
   MediaClassBrowserSettings,
   MediaPickedEvent,
   MediaPlayerBrowseAction,
 } from "../../data/media-player";
-import type { MediaPlayerItem } from "../../data/media-player";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
@@ -108,9 +108,11 @@ export class HaMediaPlayerBrowse extends LitElement {
           text: this._renderError(this._error),
         });
       } else {
-        return html`<div class="container">
-          ${this._renderError(this._error)}
-        </div>`;
+        return html`
+          <div class="container">
+            ${this._renderError(this._error)}
+          </div>
+        `;
       }
     }
 
@@ -235,7 +237,7 @@ export class HaMediaPlayerBrowse extends LitElement {
       </div>
       ${this._error
         ? html`
-            <div class="container error">
+            <div class="container">
               ${this._renderError(this._error)}
             </div>
           `
@@ -456,7 +458,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     mediaContentType?: string
   ): Promise<MediaPlayerItem> {
     const itemData =
-      this.entityId !== BROWSER_SOURCE
+      this.entityId !== BROWSER_PLAYER
         ? await browseMediaPlayer(
             this.hass,
             this.entityId,
@@ -520,7 +522,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         </p>
       `;
     }
-    return html`<span class="error">err.message</span>`;
+    return html`<span class="error">${err.message}</span>`;
   }
 
   static get styles(): CSSResultArray {

src/data/media-player.ts

@@ -1,23 +1,23 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../types";
 import {
-  mdiFolder,
-  mdiPlaylistMusic,
-  mdiFileMusic,
+  mdiAccountMusic,
+  mdiAccountMusicOutline,
   mdiAlbum,
+  mdiApplication,
+  mdiDramaMasks,
+  mdiFileMusic,
+  mdiFolder,
+  mdiGamepadVariant,
+  mdiImage,
+  mdiMovie,
   mdiMusic,
+  mdiPlaylistMusic,
+  mdiPodcast,
   mdiTelevisionClassic,
-  mdiMovie,
   mdiVideo,
-  mdiImage,
   mdiWeb,
-  mdiGamepadVariant,
-  mdiAccountMusic,
-  mdiPodcast,
-  mdiApplication,
-  mdiAccountMusicOutline,
-  mdiDramaMasks,
 } from "@mdi/js";
+import type { HassEntity } from "home-assistant-js-websocket";
+import type { HomeAssistant } from "../types";
 
 export const SUPPORT_PAUSE = 1;
 export const SUPPORT_SEEK = 2;
@@ -38,7 +38,7 @@ export const CONTRAST_RATIO = 4.5;
 
 export type MediaPlayerBrowseAction = "pick" | "play";
 
-export const BROWSER_SOURCE = "browser";
+export const BROWSER_PLAYER = "browser";
 
 export type MediaClassBrowserSetting = {
   icon: string;

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

@@ -17,7 +17,7 @@ import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-menu-button";
 import "../../components/media-player/ha-media-player-browse";
 import {
-  BROWSER_SOURCE,
+  BROWSER_PLAYER,
   MediaPickedEvent,
   SUPPORT_BROWSE_MEDIA,
 } from "../../data/media-player";
@@ -36,15 +36,15 @@ class PanelMediaBrowser extends LitElement {
 
   // @ts-ignore
   @LocalStorage("mediaBrowseEntityId", true)
-  private _entityId = BROWSER_SOURCE;
+  private _entityId = BROWSER_PLAYER;
 
   protected render(): TemplateResult {
     const stateObj = this._entityId
       ? this.hass.states[this._entityId]
       : undefined;
 
     const title =
-      this._entityId === BROWSER_SOURCE
+      this._entityId === BROWSER_PLAYER
         ? `${this.hass.localize("ui.components.media-browser.web-browser")}`
         : stateObj?.attributes.friendly_name
         ? `${stateObj?.attributes.friendly_name}`
@@ -95,7 +95,7 @@ class PanelMediaBrowser extends LitElement {
     ev: HASSDomEvent<MediaPickedEvent>
   ): Promise<void> {
     const item = ev.detail.item;
-    if (this._entityId === BROWSER_SOURCE) {
+    if (this._entityId === BROWSER_PLAYER) {
       const resolvedUrl: any = await this.hass.callWS({
         type: "media_source/resolve_media",
         media_content_id: item.media_content_id,

src/panels/media-browser/hui-dialog-select-media-player.ts

@@ -1,3 +1,5 @@
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -13,7 +15,8 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { compare } from "../../common/string/compare";
 import { createCloseHeading } from "../../components/ha-dialog";
-import { BROWSER_SOURCE } from "../../data/media-player";
+import { UNAVAILABLE_STATES } from "../../data/entity";
+import { BROWSER_PLAYER } from "../../data/media-player";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import type { SelectMediaPlayerDialogParams } from "./show-select-media-source-dialog";
@@ -49,30 +52,31 @@ export class HuiDialogSelectMediaPlayer extends LitElement {
         )}
         @closed=${this.closeDialog}
       >
-        <paper-listbox
-          attr-for-selected="itemName"
-          @iron-select=${this._selectSource}
-          ><paper-item .itemName=${BROWSER_SOURCE}
+        <mwc-list>
+          <mwc-list-item .player=${BROWSER_PLAYER} @click=${this._selectPlayer}
             >${this.hass.localize(
               "ui.components.media-browser.web-browser"
-            )}</paper-item
+            )}</mwc-list-item
           >
           ${this._params.mediaSources
             .sort((a, b) => compare(computeStateName(a), computeStateName(b)))
             .map(
               (source) => html`
-                <paper-item .itemName=${source.entity_id}
-                  >${computeStateName(source)}</paper-item
+                <mwc-list-item
+                  .disabled=${UNAVAILABLE_STATES.includes(source.state)}
+                  .player=${source.entity_id}
+                  @click=${this._selectPlayer}
+                  >${computeStateName(source)}</mwc-list-item
                 >
               `
             )}
-        </paper-listbox>
+        </mwc-list>
       </ha-dialog>
     `;
   }
 
-  private _selectSource(ev: CustomEvent): void {
-    const entityId = ev.detail.item.itemName;
+  private _selectPlayer(ev: CustomEvent): void {
+    const entityId = (ev.currentTarget as any).player;
     this._params!.sourceSelectedCallback(entityId);
     this.closeDialog();
   }
@@ -84,8 +88,8 @@ export class HuiDialogSelectMediaPlayer extends LitElement {
         ha-dialog {
           --dialog-content-padding: 0 24px 20px;
         }
-        paper-item {
-          cursor: pointer;
+        mwc-list-item[disabled] {
+          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
       `,
     ];