Handle media browser errors (#6813)

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>

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

@@ -68,6 +68,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @internalProperty() private _loading = false;
 
+  @internalProperty() private _error?: { message: string; code: string };
+
   @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = [];
 
   private _resizeObserver?: ResizeObserver;
@@ -92,11 +94,55 @@ export class HaMediaPlayerBrowse extends LitElement {
     this._navigate(item);
   }
 
+  private _renderError(err: { message: string; code: string }) {
+    if (err.message === "Media directory does not exist.") {
+      return html`
+        <h2>No local media found.</h2>
+        <p>
+          It looks like you have not yet created a media directory.
+          <br />Create a directory with the name <b>"media"</b> in the
+          configuration directory of Home Assistant
+          (${this.hass.config.config_dir}). <br />Place your video, audio and
+          image files in this directory to be able to browse and play them in
+          the browser or on supported media players.
+        </p>
+
+        <p>
+          Check the
+          <a
+            href="https://www.home-assistant.io/integrations/media_source/#local-media"
+            target="_blank"
+            rel="noreferrer"
+            >documentation</a
+          >
+          for more info
+        </p>
+      `;
+    }
+    return err.message;
+  }
+
   protected render(): TemplateResult {
     if (this._loading) {
       return html`<ha-circular-progress active></ha-circular-progress>`;
     }
 
+    if (this._error && !this._mediaPlayerItems.length) {
+      if (this.dialog) {
+        this._closeDialogAction();
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.components.media-browser.media_browsing_error"
+          ),
+          text: this._renderError(this._error),
+        });
+      } else {
+        return html`<div class="container error">
+          ${this._renderError(this._error)}
+        </div>`;
+      }
+    }
+
     if (!this._mediaPlayerItems.length) {
       return html``;
     }
@@ -216,7 +262,11 @@ export class HaMediaPlayerBrowse extends LitElement {
             `
           : ""}
       </div>
-      ${currentItem.children?.length
+      ${this._error
+        ? html`<div class="container error">
+            ${this._renderError(this._error)}
+          </div>`
+        : currentItem.children?.length
         ? hasExpandableChildren
           ? html`
               <div class="children">
@@ -316,7 +366,9 @@ export class HaMediaPlayerBrowse extends LitElement {
                 )}
               </mwc-list>
             `
-        : this.hass.localize("ui.components.media-browser.no_items")}
+        : html`<div class="container">
+            ${this.hass.localize("ui.components.media-browser.no_items")}
+          </div>`}
     `;
   }
 
@@ -342,15 +394,22 @@ export class HaMediaPlayerBrowse extends LitElement {
       return;
     }
 
-    this._fetchData(this.mediaContentId, this.mediaContentType).then(
-      (itemData) => {
+    if (changedProps.has("entityId")) {
+      this._error = undefined;
+      this._mediaPlayerItems = [];
+    }
+
+    this._fetchData(this.mediaContentId, this.mediaContentType)
+      .then((itemData) => {
         if (!itemData) {
           return;
         }
 
         this._mediaPlayerItems = [itemData];
-      }
-    );
+      })
+      .catch((err) => {
+        this._error = err;
+      });
   }
 
   private _actionClicked(ev: MouseEvent): void {
@@ -381,12 +440,22 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private async _navigate(item: MediaPlayerItem) {
-    const itemData = await this._fetchData(
-      item.media_content_id,
-      item.media_content_type
-    );
+    this._error = undefined;
 
-    if (!itemData) {
+    let itemData: MediaPlayerItem;
+
+    try {
+      itemData = await this._fetchData(
+        item.media_content_id,
+        item.media_content_type
+      );
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.components.media-browser.media_browsing_error"
+        ),
+        text: this._renderError(err),
+      });
       return;
     }
 
@@ -397,33 +466,23 @@ export class HaMediaPlayerBrowse extends LitElement {
   private async _fetchData(
     mediaContentId?: string,
     mediaContentType?: string
-  ): Promise<MediaPlayerItem | undefined> {
-    let itemData: MediaPlayerItem | undefined;
-    try {
-      itemData =
-        this.entityId !== BROWSER_SOURCE
-          ? await browseMediaPlayer(
-              this.hass,
-              this.entityId,
-              mediaContentId,
-              mediaContentType
-            )
-          : await browseLocalMediaPlayer(this.hass, mediaContentId);
-      itemData.children = itemData.children?.sort((first, second) =>
-        !first.can_expand && second.can_expand
-          ? 1
-          : first.can_expand && !second.can_expand
-          ? -1
-          : compare(first.title, second.title)
-      );
-    } catch (error) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          "ui.components.media-browser.media_browsing_error"
-        ),
-        text: error.message,
-      });
-    }
+  ): Promise<MediaPlayerItem> {
+    const itemData =
+      this.entityId !== BROWSER_SOURCE
+        ? await browseMediaPlayer(
+            this.hass,
+            this.entityId,
+            mediaContentId,
+            mediaContentType
+          )
+        : await browseLocalMediaPlayer(this.hass, mediaContentId);
+    itemData.children = itemData.children?.sort((first, second) =>
+      !first.can_expand && second.can_expand
+        ? 1
+        : first.can_expand && !second.can_expand
+        ? -1
+        : compare(first.title, second.title)
+    );
 
     return itemData;
   }
@@ -451,8 +510,8 @@ export class HaMediaPlayerBrowse extends LitElement {
     this._resizeObserver.observe(this);
   }
 
-  private _hasExpandableChildren = memoizeOne((children) =>
-    children.find((item: MediaPlayerItem) => item.can_expand)
+  private _hasExpandableChildren = memoizeOne((children?: MediaPlayerItem[]) =>
+    children?.find((item: MediaPlayerItem) => item.can_expand)
   );
 
   private _closeDialogAction(): void {
@@ -471,6 +530,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           flex-direction: column;
         }
 
+        .container {
+          padding: 16px;
+        }
+
         .header {
           display: flex;
           justify-content: space-between;