From 64790ebd5476361393fe9b7627b7e9d323484156 Mon Sep 17 00:00:00 2001
From: Niklas Fondberg <niklasfondberg@spotify.com>
Date: Fri, 26 Apr 2019 12:56:26 +0200
Subject: [PATCH] Fixed broken images

---
 dist/spotify-card.cjs.js | 21 +++++++++++++++------
 dist/spotify-card.esm.js | 21 +++++++++++++++------
 dist/spotify-card.umd.js |  6 +++---
 src/spotify-card.js      | 20 ++++++++++++++++----
 4 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/dist/spotify-card.cjs.js b/dist/spotify-card.cjs.js
index 63efd1d..127b16a 100644
--- a/dist/spotify-card.cjs.js
+++ b/dist/spotify-card.cjs.js
@@ -50,7 +50,8 @@ class PlayerSelect extends preact.Component {
   render() {
     const {
       devices
-    } = this.props;
+    } = this.props; // console.log('PlayerSelect: devices', devices);
+
     return html`
       <div class="dropdown">
         <div class="mediaplayer_select">
@@ -147,7 +148,9 @@ class SpotifyCard extends preact.Component {
     }).then(r => r.json()).then(p => p.items);
     const devices = await fetch('https://api.spotify.com/v1/me/player/devices', {
       headers
-    }).then(r => r.json()).then(r => r.devices);
+    }).then(r => r.json()).then(r => r.devices); // console.log('Response: playlists', playlists);
+    // console.log('Response: devices', devices);
+
     const currentPlayerRes = await fetch('https://api.spotify.com/v1/me/player', {
       headers
     });
@@ -238,7 +241,7 @@ class SpotifyCard extends preact.Component {
       playlists,
       devices,
       selectedDevice
-    } = this.state;
+    } = this.state; // console.log('SpotifyCard: playlists.length:', playlists.length, ' authenticationRequired:', authenticationRequired, ' devices.length', devices.length);
 
     if (authenticationRequired) {
       return html`
@@ -255,17 +258,23 @@ class SpotifyCard extends preact.Component {
       <div class="spotify_container">
         <${Header} />
         <div class="playlists">
-          ${playlists.map((playlist, idx) => html`
+          ${playlists.map((playlist, idx) => {
+      const image = playlist.images[0] ? playlist.images[0].url : 'https://via.placeholder.com/150x150.png?text=No+image'; // if(!playlist.images[0]) {
+      //   console.log('no image, click to expand the object to the right:', playlist.images);
+      // }
+
+      return html`
               <div
                 class="${`playlist ${this.getHighlighted(playlist)}`}"
                 onClick=${event => this.onPlaylistSelect(playlist, idx, event, this)}
               >
-                <div class="playlist__cover_art"><img src="${playlist.images[0].url}" /></div>
+                <div class="playlist__cover_art"><img src="${image}" /></div>
                 <div class="playlist__number">${idx + 1}</div>
                 <div class="${`playlist__playicon ${this.getIsPlayingClass(playlist)}`}">►</div>
                 <div class="playlist__title">${playlist.name}</div>
               </div>
-            `)}
+            `;
+    })}
         </div>
         <div class="controls">
           <${PlayerSelect}
diff --git a/dist/spotify-card.esm.js b/dist/spotify-card.esm.js
index 33b7fb1..d439a3f 100644
--- a/dist/spotify-card.esm.js
+++ b/dist/spotify-card.esm.js
@@ -46,7 +46,8 @@ class PlayerSelect extends Component {
   render() {
     const {
       devices
-    } = this.props;
+    } = this.props; // console.log('PlayerSelect: devices', devices);
+
     return html`
       <div class="dropdown">
         <div class="mediaplayer_select">
@@ -143,7 +144,9 @@ class SpotifyCard extends Component {
     }).then(r => r.json()).then(p => p.items);
     const devices = await fetch('https://api.spotify.com/v1/me/player/devices', {
       headers
-    }).then(r => r.json()).then(r => r.devices);
+    }).then(r => r.json()).then(r => r.devices); // console.log('Response: playlists', playlists);
+    // console.log('Response: devices', devices);
+
     const currentPlayerRes = await fetch('https://api.spotify.com/v1/me/player', {
       headers
     });
@@ -234,7 +237,7 @@ class SpotifyCard extends Component {
       playlists,
       devices,
       selectedDevice
-    } = this.state;
+    } = this.state; // console.log('SpotifyCard: playlists.length:', playlists.length, ' authenticationRequired:', authenticationRequired, ' devices.length', devices.length);
 
     if (authenticationRequired) {
       return html`
@@ -251,17 +254,23 @@ class SpotifyCard extends Component {
       <div class="spotify_container">
         <${Header} />
         <div class="playlists">
-          ${playlists.map((playlist, idx) => html`
+          ${playlists.map((playlist, idx) => {
+      const image = playlist.images[0] ? playlist.images[0].url : 'https://via.placeholder.com/150x150.png?text=No+image'; // if(!playlist.images[0]) {
+      //   console.log('no image, click to expand the object to the right:', playlist.images);
+      // }
+
+      return html`
               <div
                 class="${`playlist ${this.getHighlighted(playlist)}`}"
                 onClick=${event => this.onPlaylistSelect(playlist, idx, event, this)}
               >
-                <div class="playlist__cover_art"><img src="${playlist.images[0].url}" /></div>
+                <div class="playlist__cover_art"><img src="${image}" /></div>
                 <div class="playlist__number">${idx + 1}</div>
                 <div class="${`playlist__playicon ${this.getIsPlayingClass(playlist)}`}">►</div>
                 <div class="playlist__title">${playlist.name}</div>
               </div>
-            `)}
+            `;
+    })}
         </div>
         <div class="controls">
           <${PlayerSelect}
diff --git a/dist/spotify-card.umd.js b/dist/spotify-card.umd.js
index 20005da..608483c 100644
--- a/dist/spotify-card.umd.js
+++ b/dist/spotify-card.umd.js
@@ -33,17 +33,17 @@
       <div class="spotify_container">
         <${ku} />
         <div class="playlists">
-          ${e.map((t,n)=>Nu`
+          ${e.map((t,n)=>{const e=t.images[0]?t.images[0].url:"https://via.placeholder.com/150x150.png?text=No+image";return Nu`
               <div
                 class="${`playlist ${this.getHighlighted(t)}`}"
                 onClick=${e=>this.onPlaylistSelect(t,n,e,this)}
               >
-                <div class="playlist__cover_art"><img src="${t.images[0].url}" /></div>
+                <div class="playlist__cover_art"><img src="${e}" /></div>
                 <div class="playlist__number">${n+1}</div>
                 <div class="${`playlist__playicon ${this.getIsPlayingClass(t)}`}">►</div>
                 <div class="playlist__title">${t.name}</div>
               </div>
-            `)}
+            `})}
         </div>
         <div class="controls">
           <${Iu}
diff --git a/src/spotify-card.js b/src/spotify-card.js
index b09bff0..bbb8be7 100644
--- a/src/spotify-card.js
+++ b/src/spotify-card.js
@@ -44,6 +44,7 @@ class PlayerSelect extends Component {
 
   render() {
     const { devices } = this.props;
+    // console.log('PlayerSelect: devices', devices);
     return html`
       <div class="dropdown">
         <div class="mediaplayer_select">
@@ -140,6 +141,9 @@ class SpotifyCard extends Component {
       .then(r => r.json())
       .then(r => r.devices);
 
+    // console.log('Response: playlists', playlists);
+    // console.log('Response: devices', devices);
+
     const currentPlayerRes = await fetch('https://api.spotify.com/v1/me/player', { headers });
 
     let selectedDevice,
@@ -200,7 +204,7 @@ class SpotifyCard extends Component {
 
   render() {
     const { authenticationRequired, user, playlists, devices, selectedDevice } = this.state;
-
+    // console.log('SpotifyCard: playlists.length:', playlists.length, ' authenticationRequired:', authenticationRequired, ' devices.length', devices.length);
     if (authenticationRequired) {
       return html`
         <div class="spotify_container">
@@ -217,17 +221,25 @@ class SpotifyCard extends Component {
         <${Header} />
         <div class="playlists">
           ${playlists.map(
-            (playlist, idx) => html`
+            (playlist, idx) => 
+            {
+              const image = playlist.images[0] 
+                  ? playlist.images[0].url 
+                  : 'https://via.placeholder.com/150x150.png?text=No+image';
+              // if(!playlist.images[0]) {
+              //   console.log('no image, click to expand the object to the right:', playlist.images);
+              // }
+              return html`
               <div
                 class="${`playlist ${this.getHighlighted(playlist)}`}"
                 onClick=${event => this.onPlaylistSelect(playlist, idx, event, this)}
               >
-                <div class="playlist__cover_art"><img src="${playlist.images[0].url}" /></div>
+                <div class="playlist__cover_art"><img src="${image}" /></div>
                 <div class="playlist__number">${idx + 1}</div>
                 <div class="${`playlist__playicon ${this.getIsPlayingClass(playlist)}`}">►</div>
                 <div class="playlist__title">${playlist.name}</div>
               </div>
-            `
+            `}
           )}
         </div>
         <div class="controls">