Loader for AddToPlaylist modal

mopidy_iris/static/app.js

@@ -141247,6 +141247,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _util_arrays__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../util/arrays */ "./src/js/util/arrays.js");
 /* harmony import */ var _locale__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../locale */ "./src/js/locale/index.js");
 /* harmony import */ var _util_format__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../util/format */ "./src/js/util/format.js");
+/* harmony import */ var _util_selectors__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../util/selectors */ "./src/js/util/selectors.js");
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -141295,6 +141296,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+var processKeys = ['MOPIDY_GET_LIBRARY_PLAYLISTS', 'SPOTIFY_GET_LIBRARY_PLAYLISTS'];
+
 var AddToPlaylist = /*#__PURE__*/function (_React$Component) {
   _inherits(AddToPlaylist, _React$Component);
 
@@ -141313,17 +141316,17 @@ var AddToPlaylist = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
       var _this$props = _this.props,
-          spotify_library = _this$props.spotify_library,
-          mopidy_library = _this$props.mopidy_library,
+          spotify_library = _this$props.spotify_library.items_uris,
+          mopidy_library = _this$props.mopidy_library.items_uris,
           spotify_available = _this$props.spotify_available,
           loadLibrary = _this$props.coreActions.loadLibrary,
           setWindowTitle = _this$props.uiActions.setWindowTitle;
 
-      if (!spotify_library && spotify_available) {
+      if (!spotify_library.length && spotify_available) {
         loadLibrary('spotify:library:playlists');
       }
 
-      if (!mopidy_library) {
+      if (!mopidy_library.length) {
         loadLibrary('mopidy:library:playlists');
       }
 
@@ -141352,7 +141355,19 @@ var AddToPlaylist = /*#__PURE__*/function (_React$Component) {
           _this$props3$mopidy_l = _this$props3.mopidy_library,
           mopidy_library = _this$props3$mopidy_l === void 0 ? {
         items_uris: []
-      } : _this$props3$mopidy_l;
+      } : _this$props3$mopidy_l,
+          loading_progress = _this$props3.loading_progress;
+
+      if (loading_progress !== null) {
+        return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_3__["default"], {
+          body: true,
+          loading: true,
+          progress: loading_progress,
+          "data-qa-node": "Loader",
+          "data-qa-file": "AddToPlaylist"
+        });
+      }
+
       var playlists = [].concat(_toConsumableArray(Object(_util_format__WEBPACK_IMPORTED_MODULE_14__["collate"])(spotify_library, {
         items: items
       }).items), _toConsumableArray(Object(_util_format__WEBPACK_IMPORTED_MODULE_14__["collate"])(mopidy_library, {
@@ -141445,20 +141460,24 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
   _state$spotify$me = _state$spotify$me === void 0 ? {} : _state$spotify$me;
   var me_id = _state$spotify$me.id,
       spotify_available = _state$spotify.access_token,
-      load_queue = state.ui.load_queue,
       _state$core = state.core,
       playlists = _state$core.playlists,
       items = _state$core.items,
       libraries = _state$core.libraries,
       mopidy_uri_schemes = state.mopidy.uri_schemes;
+  var processProgressSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_15__["makeProcessProgressSelector"])(processKeys);
   return {
     uris: ownProps.match.params.uris ? decodeURIComponent(ownProps.match.params.uris).split(',') : [],
     mopidy_uri_schemes: mopidy_uri_schemes,
     items: items,
-    mopidy_library: libraries['mopidy:library:playlists'],
-    spotify_library: libraries['spotify:library:playlists'],
+    mopidy_library: libraries['mopidy:library:playlists'] || {
+      items_uris: []
+    },
+    spotify_library: libraries['spotify:library:playlists'] || {
+      items_uris: []
+    },
     spotify_available: spotify_available,
-    load_queue: load_queue,
+    loading_progress: processProgressSelector(state),
     me_id: me_id,
     playlists: playlists
   };

mopidy_iris/static/index.html

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

src/js/views/library/LibraryPlaylists.js

@@ -19,7 +19,6 @@ import { I18n, i18n } from '../../locale';
 import Loader from '../../components/Loader';
 import {
   makeLibrarySelector,
-  makeLoadingSelector,
   makeProcessProgressSelector,
 } from '../../util/selectors';
 

src/js/views/modals/AddToPlaylist.js

@@ -14,12 +14,22 @@ import { sourceIcon, decodeMopidyUri } from '../../util/helpers';
 import { sortItems } from '../../util/arrays';
 import { I18n, i18n } from '../../locale';
 import { collate } from '../../util/format';
+import { makeProcessProgressSelector } from '../../util/selectors';
+
+const processKeys = [
+  'MOPIDY_GET_LIBRARY_PLAYLISTS',
+  'SPOTIFY_GET_LIBRARY_PLAYLISTS',
+];
 
 class AddToPlaylist extends React.Component {
   componentDidMount = () => {
     const {
-      spotify_library,
-      mopidy_library,
+      spotify_library: {
+        items_uris: spotify_library,
+      },
+      mopidy_library: {
+        items_uris: mopidy_library,
+      },
       spotify_available,
       coreActions: {
         loadLibrary,
@@ -29,11 +39,11 @@ class AddToPlaylist extends React.Component {
       },
     } = this.props;
 
-    if (!spotify_library && spotify_available) {
+    if (!spotify_library.length && spotify_available) {
       loadLibrary('spotify:library:playlists');
     }
 
-    if (!mopidy_library) {
+    if (!mopidy_library.length) {
       loadLibrary('mopidy:library:playlists');
     }
 
@@ -58,8 +68,13 @@ class AddToPlaylist extends React.Component {
       items,
       spotify_library = { items_uris: [] },
       mopidy_library = { items_uris: [] },
+      loading_progress,
     } = this.props;
 
+    if (loading_progress !== null) {
+      return <Loader body loading progress={loading_progress} />;
+    }
+
     let playlists = [
       ...(collate(spotify_library, { items }).items),
       ...(collate(mopidy_library, { items }).items),
@@ -114,9 +129,6 @@ const mapStateToProps = (state, ownProps) => {
       } = {},
       access_token: spotify_available,
     },
-    ui: {
-      load_queue,
-    },
     core: {
       playlists,
       items,
@@ -124,17 +136,19 @@ const mapStateToProps = (state, ownProps) => {
     },
     mopidy: {
       uri_schemes: mopidy_uri_schemes,
-    }
+    },
   } = state;
 
+  const processProgressSelector = makeProcessProgressSelector(processKeys);
+
   return {
     uris: (ownProps.match.params.uris ? decodeURIComponent(ownProps.match.params.uris).split(',') : []),
     mopidy_uri_schemes,
     items,
-    mopidy_library: libraries['mopidy:library:playlists'],
-    spotify_library: libraries['spotify:library:playlists'],
+    mopidy_library: libraries['mopidy:library:playlists'] || { items_uris: [] },
+    spotify_library: libraries['spotify:library:playlists'] || { items_uris: [] },
     spotify_available,
-    load_queue,
+    loading_progress: processProgressSelector(state),
     me_id,
     playlists,
   };