Fix for #91: Skip playlists with no images as they are either empty o…

…r not available (#93)
custom-cards · Jul 30, 2020 · 95c7b51 · 95c7b51
1 parent be9e87c
commit 95c7b51
Showing 1 changed file with 36 additions and 32 deletions.
diff --git a/src/spotify-card.ts b/src/spotify-card.ts
@@ -349,22 +349,24 @@ export class SpotifyCard extends LitElement {
       const result: TemplateResult[] = [];
       for (let i = 0; i < this.spotcast_connector.playlists.length; i++) {
         const item = this.spotcast_connector.playlists[i];
-        const playing = this.spotify_state?.attributes.media_playlist === item.name;
+	if (item.images.length>0) { // Skip playlists with no images as they are either empty or not available
+          const playing = this.spotify_state?.attributes.media_playlist === item.name;
 
-        result.push(html`<div class="list-item" @click=${() => this.spotcast_connector.playUri(item.uri)}>
-          <img src="${item.images[item.images.length - 1].url}" />
+          result.push(html`<div class="list-item" @click=${() => this.spotcast_connector.playUri(item.uri)}>
+            <img src="${item.images[item.images.length - 1].url}" />
 
-          ${playing
-            ? this.generateButtonForCurrent()
-            : html`<div class="icon">
-                <svg width="24" height="24">
-                  <path d="M0 0h24v24H0z" fill="none" />
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-              </div>`}
+            ${playing
+              ? this.generateButtonForCurrent()
+              : html`<div class="icon">
+                  <svg width="24" height="24">
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                </div>`}
 
-          <p>${item.name}</p>
-        </div>`);
+            <p>${item.name}</p>
+          </div>`);
+	}
       }
       return html`<div>${result}</div>`;
     }
@@ -393,25 +395,27 @@ export class SpotifyCard extends LitElement {
     const result: TemplateResult[] = [];
     for (let i = 0; i < this.spotcast_connector.playlists.length; i++) {
       const item = this.spotcast_connector.playlists[i];
-      const playing = this.spotify_state?.attributes.media_playlist === item.name;
-      this.spotify_state?.attributes.media_playlist === item.name;
-
-      result.push(html`<div class="grid-item" @click=${() => this.spotcast_connector.playUri(item.uri)}>
-        <img
-          class="grid-item-album-image ${playing ? 'playing' : ''}"
-          src="${item.images[item.images.length - 1].url}"
-        />
-        <div class="grid-item-overlay-icon">
-          ${playing
-            ? this.generateGridIconForCurrent()
-            : html`
-                <svg width="24" height="24" @click=${() => this.spotcast_connector.playUri(item.uri)}>
-                  <path d="M0 0h24v24H0z" fill="none" />
-                  <path d="M8 5v14l11-7z" />
-                </svg>
-              `}
-        </div>
-      </div>`);
+      if (item.images.length>0) { // Skip playlists with no images as they are either empty or not available
+        const playing = this.spotify_state?.attributes.media_playlist === item.name;
+        this.spotify_state?.attributes.media_playlist === item.name;
+
+        result.push(html`<div class="grid-item" @click=${() => this.spotcast_connector.playUri(item.uri)}>
+          <img
+            class="grid-item-album-image ${playing ? 'playing' : ''}"
+            src="${item.images[item.images.length - 1].url}"
+          />
+          <div class="grid-item-overlay-icon">
+            ${playing
+              ? this.generateGridIconForCurrent()
+              : html`
+                  <svg width="24" height="24" @click=${() => this.spotcast_connector.playUri(item.uri)}>
+                    <path d="M0 0h24v24H0z" fill="none" />
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                `}
+          </div>
+        </div>`);
+      }
     }
 
     const configured_grid_width = this.config.grid_covers_per_row ? this.config.grid_covers_per_row : 3;