Fixed broken images

custom-cards · Apr 26, 2019 · 64790eb · 64790eb
1 parent 8a5095c
commit 64790eb
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git 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
@@ -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
diff --git 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">