fix: show error when failing to fetch favorites

Author: punxaphil

src/sections/media-browser.ts

@@ -31,30 +31,32 @@ export class MediaBrowser extends LitElement {
 
       ${this.activePlayer &&
       until(
-        this.getFavorites(this.activePlayer).then((items) => {
-          if (items?.length) {
-            const itemsPerRow = this.config.favoritesItemsPerRow || 4;
-            if (itemsPerRow > 1) {
-              return html`
-                <sonos-media-browser-icons
-                  .items=${items}
-                  .store=${this.store}
-                  @item-selected=${this.onMediaItemSelected}
-                ></sonos-media-browser-icons>
-              `;
+        this.getFavorites(this.activePlayer)
+          .then((items) => {
+            if (items?.length) {
+              const itemsPerRow = this.config.favoritesItemsPerRow || 4;
+              if (itemsPerRow > 1) {
+                return html`
+                  <sonos-media-browser-icons
+                    .items=${items}
+                    .store=${this.store}
+                    @item-selected=${this.onMediaItemSelected}
+                  ></sonos-media-browser-icons>
+                `;
+              } else {
+                return html`
+                  <sonos-media-browser-list
+                    .items=${items}
+                    .store=${this.store}
+                    @item-selected=${this.onMediaItemSelected}
+                  ></sonos-media-browser-list>
+                `;
+              }
             } else {
-              return html`
-                <sonos-media-browser-list
-                  .items=${items}
-                  .store=${this.store}
-                  @item-selected=${this.onMediaItemSelected}
-                ></sonos-media-browser-list>
-              `;
+              return html`<div class="no-items">No favorites found</div>`;
             }
-          } else {
-            return html`<div class="no-items">No favorites found</div>`;
-          }
-        }),
+          })
+          .catch((e) => html`<div class="no-items">Failed to fetch list of favorites. ${e}</div>`),
       )}
     `;
   }

src/services/media-browse-service.ts

@@ -35,25 +35,20 @@ export default class MediaBrowseService {
   }
 
   private async getFavoritesForPlayer(player: MediaPlayer) {
-    try {
-      const mediaRoot = await this.hassService.browseMedia(player);
-      const favoritesStr = 'favorites';
-      const favoritesDir = mediaRoot.children?.find(
-        (child) =>
-          child.media_content_type?.toLowerCase() === favoritesStr ||
-          child.media_content_id?.toLowerCase() === favoritesStr ||
-          child.title.toLowerCase() === favoritesStr,
-      );
-      if (!favoritesDir) {
-        return [];
-      }
-      const favorites: MediaPlayerItem[] = [];
-      await this.browseDir(player, favoritesDir, favorites);
-      return favorites;
-    } catch (e) {
-      console.error(`Sonos Card: error getting favorites for player ${player.id}: ${JSON.stringify(e)}`);
+    const mediaRoot = await this.hassService.browseMedia(player);
+    const favoritesStr = 'favorites';
+    const favoritesDir = mediaRoot.children?.find(
+      (child) =>
+        child.media_content_type?.toLowerCase() === favoritesStr ||
+        child.media_content_id?.toLowerCase() === favoritesStr ||
+        child.title.toLowerCase() === favoritesStr,
+    );
+    if (!favoritesDir) {
       return [];
     }
+    const favorites: MediaPlayerItem[] = [];
+    await this.browseDir(player, favoritesDir, favorites);
+    return favorites;
   }
 
   private async browseDir(player: MediaPlayer, favoritesDir: MediaPlayerItem, favorites: MediaPlayerItem[]) {

src/types.ts

@@ -128,8 +128,8 @@ export interface CustomFavoriteThumbnails {
 }
 
 export interface MediaPlayerItem {
-  can_play: boolean;
-  can_expand: boolean;
+  can_play?: boolean;
+  can_expand?: boolean;
   title: string;
   thumbnail?: string;
   children?: MediaPlayerItem[];