Loading playlist library with new URI; Starting #600

mopidy_iris/static/index.html

@@ -106,7 +106,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1598691847";
+	var build = "1599105011";
 	var version = "3.52.4";
 
 	// Construct the script tag

src/js/components/ContextMenu.js

@@ -610,6 +610,39 @@ class ContextMenu extends React.Component {
     hideContextMenu();
   }
 
+  reload = () => {
+    const {
+      uiActions: {
+        hideContextMenu,
+      },
+      coreActions: {
+        loadArtist,
+        loadAlbum,
+        loadPlaylist,
+      },
+      menu: {
+        uris,
+      } = {},
+    } = this.props;
+
+    const uri = uris[0];
+
+    switch (uriType(uri)) {
+      case 'artist':
+        loadArtist(uri, true);
+        break;
+      case 'album':
+        loadAlbum(uri, true);
+        break;
+      case 'playlist':
+        loadPlaylist(uri, true);
+        break;
+      default:
+        break;
+    }
+    hideContextMenu();
+  }
+
   renderTitle = () => {
     const {
       uiActions: {
@@ -1092,6 +1125,16 @@ class ContextMenu extends React.Component {
       </div>
     );
 
+    const reload = (
+      <div className="context-menu__item">
+        <a className="context-menu__item__link" onClick={this.reload}>
+          <span className="context-menu__item__label">
+            <I18n path="context_menu.reload" />
+          </span>
+        </a>
+      </div>
+    );
+
     switch (context.name) {
       case 'album':
         return (
@@ -1104,6 +1147,7 @@ class ContextMenu extends React.Component {
             <div className="context-menu__divider" />
             {go_to_artist}
             {copy_uris}
+            {reload}
           </div>
         );
       case 'artist':
@@ -1116,6 +1160,7 @@ class ContextMenu extends React.Component {
             <div className="context-menu__divider" />
             {context.source === 'spotify' && go_to_recommendations}
             {copy_uris}
+            {reload}
           </div>
         );
       case 'playlist':
@@ -1138,6 +1183,7 @@ class ContextMenu extends React.Component {
                 {delete_playlist}
               </div>
             )}
+            {reload}
           </div>
         );
       case 'current-track':

src/js/locale/en.yaml

@@ -173,6 +173,7 @@ context_menu:
   discover_similar: Discover similar
   start_radio: Start radio
   copy_uri: Copy URI(s)
+  reload: Reload
 dropzones:
   dragging_things: 'Dragging %{count} things'
 playback_controls:

src/js/services/core/actions.js

@@ -160,6 +160,14 @@ export function loadUserPlaylists(uri, force_reload = false) {
   };
 }
 
+export function loadLibrary(uri, force_reload = false) {
+  return {
+    type: 'LOAD_LIBRARY',
+    uri,
+    force_reload,
+  };
+}
+
 
 /**
  * Record loaders

src/js/services/core/middleware.js

@@ -4,7 +4,7 @@ import ReactGA from 'react-ga';
 import localForage from 'localforage';
 import { arrayOf } from '../../util/arrays';
 import URILink from '../../components/URILink';
-import { uriSource, upgradeSpotifyPlaylistUris, uriType } from '../../util/helpers';
+import { uriSource, upgradeSpotifyPlaylistUris, uriType, titleCase } from '../../util/helpers';
 import {
   formatTracks,
   formatTrack,
@@ -348,20 +348,14 @@ const CoreMiddleware = (function () {
         break;
 
       case 'LOAD_ALBUM':
-
-        // Load from Redux store
-        if (
-          !action.force_reload
-          && store.getState().core.albums[action.uri]
-          && store.getState().core.albums[action.uri].tracks_uris) {
+        if (!action.force_reload && store.getState().core.items[action.uri]) {
           console.info(`Loading "${action.uri}" from index`);
           break;
         }
 
         // Try our cold storage
         localForage.getItem(action.uri).then((result) => {
-
-          if (result) {
+          if (result && !action.force_reload) {
             console.info(`Loading "${action.uri}" from database`);
             store.dispatch(coreActions.restoreFromColdStore(result));
           } else {
@@ -416,7 +410,7 @@ const CoreMiddleware = (function () {
 
         // Try our cold storage
         localForage.getItem(action.uri).then((result) => {
-          if (result) {
+          if (result && !action.force_reload) {
             console.info(`Loading "${action.uri}" from database`);
             store.dispatch(coreActions.restoreFromColdStore(result));
           } else {
@@ -440,29 +434,40 @@ const CoreMiddleware = (function () {
         break;
 
       case 'LOAD_PLAYLIST':
-        if (
-          !action.force_reload
-          && store.getState().core.playlists[action.uri]
-          && store.getState().core.playlists[action.uri].tracks_uris !== undefined
-        ) {
-          console.info(`Loading "${action.uri}" from index`);
-          break;
-        }
+        const fetchPlaylist = () => {
+          switch (uriSource(action.uri)) {
+            case 'spotify':
+              store.dispatch(spotifyActions.getPlaylist(action.uri));
 
-        switch (uriSource(action.uri)) {
-          case 'spotify':
-            store.dispatch(spotifyActions.getPlaylist(action.uri));
+              if (spotify.me) {
+                store.dispatch(spotifyActions.following(action.uri));
+              }
+              break;
 
-            if (spotify.me) {
-              store.dispatch(spotifyActions.following(action.uri));
-            }
-            break;
+            default:
+              store.dispatch(mopidyActions.getPlaylist(action.uri));
+              break;
+          }
+        };
 
-          default:
-            store.dispatch(mopidyActions.getPlaylist(action.uri));
-            break;
+        if (action.force_reload) {
+          fetchPlaylist();
+          break;
+        }
+        if (store.getState().core.items[action.uri]) {
+          console.info(`Using "${action.uri}" from index`);
+          break;
         }
 
+        localForage.getItem(action.uri).then((result) => {
+          if (result) {
+            console.info(`Restoring "${action.uri}" from database`);
+            store.dispatch(coreActions.restoreFromColdStore(result));
+          } else {
+            fetchPlaylist();
+          }
+        });
+
         next(action);
         break;
 
@@ -514,6 +519,44 @@ const CoreMiddleware = (function () {
         next(action);
         break;
 
+      case 'LOAD_LIBRARY':
+        const fetchLibrary = () => {
+          switch (uriSource(action.uri)) {
+            case 'spotify':
+              store.dispatch(
+                spotifyActions[`getLibrary${titleCase(uriType(action.uri))}`](action.uri),
+              );
+              break;
+
+            default:
+              store.dispatch(
+                mopidyActions[`getLibrary${titleCase(uriType(action.uri))}`](action.uri),
+              );
+              break;
+          }
+        };
+
+        if (action.force_reload) {
+          fetchLibrary();
+          break;
+        }
+        if (store.getState().core.items[action.uri]) {
+          console.info(`Using "${action.uri}" from index`);
+          break;
+        }
+
+        localForage.getItem(action.uri).then((result) => {
+          if (result) {
+            console.info(`Restoring "${action.uri}" from database`);
+            store.dispatch(coreActions.restoreFromColdStore(result));
+          } else {
+            fetchLibrary();
+          }
+        });
+
+        next(action);
+        break;
+
 
       /**
        * Index actions

src/js/services/mopidy/middleware.js

@@ -1600,39 +1600,35 @@ const MopidyMiddleware = (function () {
       case 'MOPIDY_GET_LIBRARY_PLAYLISTS':
         request(store, 'playlists.asList')
           .then((response) => {
-            // drop in our URI list
-            const playlist_uris = arrayOf('uri', response);
-            const playlist_uris_filtered = [];
 
             // Remove any Spotify playlists. These will be handled by our Spotify API
-            for (var i = 0; i < playlist_uris.length; i++) {
-              if (uriSource(playlist_uris[i]) != 'spotify') {
-                playlist_uris_filtered.push(playlist_uris[i]);
-              }
-            }
-
-            store.dispatch({ type: 'MOPIDY_LIBRARY_PLAYLISTS_LOADED', uris: playlist_uris_filtered });
-            store.dispatch({ type: 'MOPIDY_LIBRARY_PLAYLISTS_LOADED_ALL' });
+            const playlist_uris = arrayOf('uri', response).filter(
+              (uri) => uriSource(uri) !== 'spotify',
+            );
+            const libraryPlaylists = [];
 
             // get the full playlist objects
-            for (var i = 0; i < playlist_uris_filtered.length; i++) {
-              request(store, 'playlists.lookup', { uri: playlist_uris_filtered[i] })
+            playlist_uris.forEach((uri, index) => {
+              request(store, 'playlists.lookup', { uri })
                 .then((response) => {
-                  const source = uriSource(response.uri);
-                  const playlist = {
-
+                  libraryPlaylists.push({
                     type: 'playlist',
                     name: response.name,
                     uri: response.uri,
-                    source,
+                    source: uriSource(response.uri),
                     provider: 'mopidy',
                     last_modified: response.last_modified,
-                    tracks_total: (response.tracks ? response.tracks.length : 0),
-                  };
+                    tracks: response.tracks,
+                  });
 
-                  store.dispatch(coreActions.playlistLoaded(playlist));
+                  if (index === playlist_uris.length - 1) {
+                    store.dispatch(coreActions.itemLoaded({
+                      uri: 'mopidy:library:playlists',
+                      items: libraryPlaylists,
+                    }));
+                  }
                 });
-            }
+            });
           });
         break;