Debugging 'added_from' not loading on refresh; AddToPlaylist loader nested

src/js/components/Dragger.js

@@ -52,7 +52,7 @@ class Dragger extends React.Component {
         dropzones[i].classList.remove('hover');
       }
 
-      if (target.classList.contains('dropzone') && !target.classList.contains('hover')) {
+      if (target.classList && target.classList.contains('dropzone') && !target.classList.contains('hover')) {
         target.className += ' hover';
       }
 

src/js/components/ListItem.js

@@ -128,6 +128,9 @@ export default class ListItem extends React.Component {
     if (key === 'followers') {
       return <I18n path="specs.followers" count={value.toLocaleString()} />;
     }
+    if (key === 'listeners') {
+      return <I18n path="specs.listeners" count={value.toLocaleString()} />;
+    }
     if (key === 'added_at') {
       return <I18n path="specs.added_ago" time={dater('ago', value)} />;
     }

src/js/views/Queue.js

@@ -348,10 +348,10 @@ const mapStateToProps = (state) => {
   let current_track = {};
 
   if (queue && items) {
-    for (const queue_track of queue) {
+    queue.forEach((queueTrack) => {
       let track = {
-        ...queue_track,
-        playing: core_current_track && core_current_track.tlid == queue_track.tlid,
+        ...queueTrack,
+        playing: core_current_track && core_current_track.tlid === queueTrack.tlid,
       };
 
       // If we have the track in our index, merge it in.
@@ -379,7 +379,7 @@ const mapStateToProps = (state) => {
 
       // Now add our compiled track for our tracklist
       queue_tracks.push(track);
-    }
+    });
   }
 
   return {

src/js/views/library/LibraryArtists.js

@@ -196,7 +196,7 @@ class LibraryArtists extends React.Component {
             handleContextMenu={(e, item) => this.handleContextMenu(e, item)}
             rows={artists}
             thumbnail
-            details={['followers', 'popularity']}
+            details={['followers', 'listeners']}
             right_column={['source', 'albums']}
             className="artists"
             link_prefix="/artist/"

src/js/views/modals/AddToPlaylist.js

@@ -62,9 +62,8 @@ class AddToPlaylist extends React.Component {
     window.history.back();
   }
 
-  render = () => {
+  renderList = () => {
     const {
-      uris,
       items,
       spotify_library = { items_uris: [] },
       mopidy_library = { items_uris: [] },
@@ -82,6 +81,39 @@ class AddToPlaylist extends React.Component {
 
     playlists = sortItems(playlists, 'name');
 
+    if (playlists.length > 0 ){
+      return (
+        <div className="list small playlists">
+          {playlists.map((playlist) => (
+            <div
+              className="list__item"
+              key={playlist.uri}
+              onClick={() => this.playlistSelected(playlist.uri)}
+            >
+              <Thumbnail images={playlist.images} size="small" />
+              <h4 className="list__item__name">{ playlist.name }</h4>
+              <ul className="list__item__details details">
+                <li><Icon type="fontawesome" className="source" name={sourceIcon(playlist.uri)} /></li>
+                <li className="mid_grey-text">
+                  {`${playlist.tracks_total || 0} tracks`}
+                </li>
+              </ul>
+            </div>
+          ))}
+        </div>
+      );
+    }
+    
+    return (
+      <div className="no-results">
+        <I18n path="modal.add_to_playlist.no_playlists" />
+      </div>
+    );
+  }
+
+  render = () => {
+    const { uris } = this.props;
+
     return (
       <Modal className="modal--add-to-playlist">
         <h1><I18n path="modal.add_to_playlist.title" /></h1>
@@ -92,30 +124,7 @@ class AddToPlaylist extends React.Component {
             plural={uris.length > 1 ? 's' : ''}
           />
         </h2>
-        {playlists.length ? (
-          <div className="list small playlists">
-            {playlists.map((playlist) => (
-              <div
-                className="list__item"
-                key={playlist.uri}
-                onClick={() => this.playlistSelected(playlist.uri)}
-              >
-                <Thumbnail images={playlist.images} size="small" />
-                <h4 className="list__item__name">{ playlist.name }</h4>
-                <ul className="list__item__details details">
-                  <li><Icon type="fontawesome" className="source" name={sourceIcon(playlist.uri)} /></li>
-                  <li className="mid_grey-text">
-                    {`${playlist.tracks_total || 0} tracks`}
-                  </li>
-                </ul>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="no-results">
-            <I18n path="modal.add_to_playlist.no_playlists" />
-          </div>
-        )}
+        {this.renderList()}
       </Modal>
     );
   }

src/manifest.json

@@ -1,5 +1,5 @@
 {
-  "manifest_version": "3.54",
+  "manifest_version": "3.55",
   "short_name": "Iris",
   "name": "Iris",
   "icons": [