secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Still trying to sniff out cause of re-render when using array-wrapped values

Browse Source
This commit is contained in:
James Barnsley
2020-09-26 22:00:12 +12:00
parent a409ca0f85
commit 3a6d243430
10 changed files with 94 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
mopidy_iris/static/app.js
View File

@ -120411,9 +120411,8 @@ function reducer() {
});
case 'MOPIDY_TIME_POSITION':
return _objectSpread(_objectSpread({}, mopidy), {}, {
time_position: action.time_position
});
return mopidy;
//{ ...mopidy, time_position: action.time_position };
case 'MOPIDY_QUEUE_HISTORY':
var history = [];
@ -128789,9 +128788,11 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeLoadingSelector", function() { return makeLoadingSelector; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeSearchResultsSelector", function() { return makeSearchResultsSelector; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "queueHistorySelector", function() { return queueHistorySelector; });
/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! reselect */ "./node_modules/reselect/es/index.js");
/* harmony import */ var _arrays__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./arrays */ "./src/js/util/arrays.js");
/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./helpers */ "./src/js/util/helpers.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! reselect */ "./node_modules/reselect/es/index.js");
/* harmony import */ var _arrays__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./arrays */ "./src/js/util/arrays.js");
/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers */ "./src/js/util/helpers.js");
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@ -128814,27 +128815,32 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var getItems = function getItems(state) {
return state.core.items;
};
var makeItemSelector = function makeItemSelector(uriOrUris) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getItems], function (items) {
if (Array.isArray(uriOrUris)) {
return Object(_arrays__WEBPACK_IMPORTED_MODULE_1__["indexToArray"])(items, uriOrUris);
}
return items[uriOrUris];
});
};
var getLoadQueue = function getLoadQueue(state) {
return state.ui.load_queue;
};
var getLibraries = function getLibraries(state) {
return state.core.libraries;
};
var makeItemSelector = function makeItemSelector(uri) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_1__["createSelector"])([getItems], function (items) {
if (Array.isArray(uri)) {
return Object(_arrays__WEBPACK_IMPORTED_MODULE_2__["indexToArray"])(items, uri);
}
return items[uri];
});
};
var makeLoadingSelector = function makeLoadingSelector(keys) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getLoadQueue], function (items) {
return Object(_helpers__WEBPACK_IMPORTED_MODULE_2__["isLoading"])(items, keys);
return Object(reselect__WEBPACK_IMPORTED_MODULE_1__["createSelector"])([getLoadQueue], function (loadQueue) {
return Object(_helpers__WEBPACK_IMPORTED_MODULE_3__["isLoading"])(loadQueue, keys);
});
};
@ -128842,21 +128848,18 @@ var getQueueHistory = function getQueueHistory(state) {
return state.mopidy.queue_history;
};
var queueHistorySelector = Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getItems, getQueueHistory], function (items, queueHistory) {
var queueHistorySelector = Object(reselect__WEBPACK_IMPORTED_MODULE_1__["createSelector"])([getItems, getQueueHistory], function (items, queueHistory) {
return queueHistory.map(function (item) {
return _objectSpread(_objectSpread({}, item), items[item.uri] || {});
});
});
var getLibraries = function getLibraries(state) {
return state.core.libraries;
};
var makeLibrarySelector = function makeLibrarySelector(uri) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getLibraries, getItems], function (libraries, items) {
var library = libraries[uri];
if (!library || !library.items_uris.length) return [];
return Object(_arrays__WEBPACK_IMPORTED_MODULE_1__["indexToArray"])(items, library.items_uris);
var makeLibrarySelector = function makeLibrarySelector(uris) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_1__["createSelector"])([getLibraries, getItems], function (libraries, items) {
var itemUris = Object(_arrays__WEBPACK_IMPORTED_MODULE_2__["indexToArray"])(libraries, uris).reduce(function (acc, library) {
return [].concat(_toConsumableArray(acc), _toConsumableArray(library.items_uris));
}, []);
return Object(_arrays__WEBPACK_IMPORTED_MODULE_2__["indexToArray"])(items, itemUris);
});
};
@ -128869,9 +128872,9 @@ var getSpotifySearchResults = function getSpotifySearchResults(state, props) {
};
var makeSearchResultsSelector = function makeSearchResultsSelector() {
return Object(reselect__WEBPACK_IMPORTED_MODULE_0__["createSelector"])([getMopidySearchResults, getSpotifySearchResults, getItems], function (mopidySearchResults, spotifySearchResults, items) {
return Object(reselect__WEBPACK_IMPORTED_MODULE_1__["createSelector"])([getMopidySearchResults, getSpotifySearchResults, itemsSelector], function (mopidySearchResults, spotifySearchResults, items) {
var uris = [].concat(_toConsumableArray(mopidySearchResults || []), _toConsumableArray(spotifySearchResults || []));
return Object(_arrays__WEBPACK_IMPORTED_MODULE_1__["indexToArray"])(items, uris);
return Object(_arrays__WEBPACK_IMPORTED_MODULE_2__["indexToArray"])(items, uris);
});
};
@ -129252,6 +129255,7 @@ var Album = /*#__PURE__*/function (_React$Component) {
album = _this$props8.album,
loading = _this$props8.loading,
slim_mode = _this$props8.slim_mode;
console.log('Album.render');
if (loading) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_7__["default"], {
@ -130029,6 +130033,7 @@ var Artist = /*#__PURE__*/function (_React$Component) {
loading = _this$props7.loading,
artist = _this$props7.artist,
history = _this$props7.history;
console.log('render!');
if (loading) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Loader__WEBPACK_IMPORTED_MODULE_17__["default"], {
@ -136603,18 +136608,6 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _locale__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../locale */ "./src/js/locale/index.js");
/* harmony import */ var _components_Loader__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../components/Loader */ "./src/js/components/Loader.js");
/* harmony import */ var _util_selectors__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../util/selectors */ "./src/js/util/selectors.js");
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@ -137044,19 +137037,6 @@ var LibraryAlbums = /*#__PURE__*/function (_React$Component) {
this.getGoogleLibrary();
this.getSpotifyLibrary();
}
/*
componentDidUpdate(prevProps, prevState) {
Object.entries(this.props).forEach(([key, val]) =>
prevProps[key] !== val && console.log(`Prop '${key}' changed`)
);
if (this.state) {
Object.entries(this.state).forEach(([key, val]) =>
prevState[key] !== val && console.log(`State '${key}' changed`)
);
}
}
*/
}]);
return LibraryAlbums;
@ -137065,14 +137045,15 @@ var LibraryAlbums = /*#__PURE__*/function (_React$Component) {
var mapStateToProps = function mapStateToProps(state) {
var source = state.ui.library_albums_source ? state.ui.library_albums_source : 'all';
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_19__["makeLoadingSelector"])(['(.*):library:albums']);
var spotifyLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_19__["makeLibrarySelector"])('spotify:library:albums');
var googleLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_19__["makeLibrarySelector"])('google:library:albums');
var mopidyLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_19__["makeLibrarySelector"])('mopidy:library:albums');
var albums = [].concat(_toConsumableArray(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []), _toConsumableArray(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []), _toConsumableArray(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []));
var libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:albums');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:albums');
if (source === 'all' || source === 'google') libraryUris.push('google:library:albums');
var librarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_19__["makeLibrarySelector"])(libraryUris);
return {
loading: loadingSelector(state),
mopidy_uri_schemes: state.mopidy.uri_schemes,
albums: albums,
albums: librarySelector(state),
google_available: state.mopidy.uri_schemes && state.mopidy.uri_schemes.includes('gmusic:'),
spotify_available: state.spotify.access_token,
view: state.ui.library_albums_view,
@ -137125,18 +137106,6 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _components_Button__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../components/Button */ "./src/js/components/Button.js");
/* harmony import */ var _components_Loader__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../../components/Loader */ "./src/js/components/Loader.js");
/* harmony import */ var _util_selectors__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../util/selectors */ "./src/js/util/selectors.js");
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -137554,21 +137523,16 @@ var LibraryArtists = /*#__PURE__*/function (_React$Component) {
var mapStateToProps = function mapStateToProps(state) {
var source = state.ui.library_artists_source || 'all';
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_18__["makeLoadingSelector"])(['(.*):library:artists']);
var spotifyLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_18__["makeLibrarySelector"])('spotify:library:artists');
var googleLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_18__["makeLibrarySelector"])('google:library:artists');
var mopidyLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_18__["makeLibrarySelector"])('mopidy:library:artists');
var artists = [].concat(_toConsumableArray(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []), _toConsumableArray(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []), _toConsumableArray(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []));
/**
TODO
Apply sort, filter and source rules to the selector.
This will mean we have a universal selector for all libraries. WIN!
**/
var libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:artists');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:artists');
if (source === 'all' || source === 'google') libraryUris.push('google:library:artists');
var librarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_18__["makeLibrarySelector"])(libraryUris);
return {
mopidy_uri_schemes: state.mopidy.uri_schemes,
google_available: state.mopidy.uri_schemes && state.mopidy.uri_schemes.includes('gmusic:'),
spotify_available: state.spotify.access_token,
artists: artists,
artists: librarySelector(state),
loading: loadingSelector(state),
source: source,
sort: state.ui.library_artists_sort ? state.ui.library_artists_sort : null,
@ -138285,18 +138249,6 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _util_helpers__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../util/helpers */ "./src/js/util/helpers.js");
/* harmony import */ var _components_Loader__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../components/Loader */ "./src/js/components/Loader.js");
/* harmony import */ var _util_selectors__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../util/selectors */ "./src/js/util/selectors.js");
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -138724,15 +138676,16 @@ var LibraryPlaylists = /*#__PURE__*/function (_React$Component) {
var mapStateToProps = function mapStateToProps(state) {
var source = state.ui.library_playlists_source || 'all';
var loadingSelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_20__["makeLoadingSelector"])(['(.*):library:playlists']);
var spotifyLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_20__["makeLibrarySelector"])('spotify:library:playlists');
var googleLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_20__["makeLibrarySelector"])('google:library:playlists');
var mopidyLibrarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_20__["makeLibrarySelector"])('mopidy:library:playlists');
var playlists = [].concat(_toConsumableArray(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []), _toConsumableArray(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []), _toConsumableArray(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []));
var libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:playlists');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:playlists');
if (source === 'all' || source === 'google') libraryUris.push('google:library:playlists');
var librarySelector = Object(_util_selectors__WEBPACK_IMPORTED_MODULE_20__["makeLibrarySelector"])(libraryUris);
return {
slim_mode: state.ui.slim_mode,
mopidy_uri_schemes: state.mopidy.uri_schemes,
spotify_available: state.spotify.access_token,
playlists: playlists,
playlists: librarySelector(state),
loading: loadingSelector(state),
source: source,
me_id: state.spotify.me ? state.spotify.me.id : false,

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

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

2
src/js/services/mopidy/reducer.js
View File

@ -80,7 +80,7 @@ export default function reducer(mopidy = {}, action) {
return { ...mopidy, mute: action.mute };
case 'MOPIDY_TIME_POSITION':
return { ...mopidy, time_position: action.time_position };
return mopidy;//{ ...mopidy, time_position: action.time_position };
case 'MOPIDY_QUEUE_HISTORY':
var history = [];

29
src/js/util/selectors.js
View File

@ -1,23 +1,24 @@
import { memoize } from 'lodash';
import { createSelector } from 'reselect';
import { indexToArray } from './arrays';
import { isLoading } from './helpers';
const getItems = (state) => state.core.items;
const getLoadQueue = (state) => state.ui.load_queue;
const getLibraries = (state) => state.core.libraries;
const makeItemSelector = (uriOrUris) => createSelector(
const makeItemSelector = (uri) => createSelector(
[getItems],
(items) => {
if (Array.isArray(uriOrUris)) {
return indexToArray(items, uriOrUris);
if (Array.isArray(uri)) {
return indexToArray(items, uri);
}
return items[uriOrUris];
return items[uri];
},
);
const getLoadQueue = (state) => state.ui.load_queue;
const makeLoadingSelector = (keys) => createSelector(
[getLoadQueue],
(items) => isLoading(items, keys),
(loadQueue) => isLoading(loadQueue, keys),
);
const getQueueHistory = (state) => state.mopidy.queue_history;
@ -29,14 +30,14 @@ const queueHistorySelector = createSelector(
})),
);
const getLibraries = (state) => state.core.libraries;
const makeLibrarySelector = (uri) => createSelector(
const makeLibrarySelector = (uris) => createSelector(
[getLibraries, getItems],
(libraries, items) => {
const library = libraries[uri];
if (!library || !library.items_uris.length) return [];
return indexToArray(items, library.items_uris);
const itemUris = indexToArray(libraries, uris).reduce(
(acc, library) => [...acc, ...library.items_uris],
[],
);
return indexToArray(items, itemUris);
},
);
@ -47,7 +48,7 @@ const getSpotifySearchResults = (state, props) => (
state.spotify.search_results && state.spotify.search_results[props.type]
);
const makeSearchResultsSelector = () => createSelector(
[getMopidySearchResults, getSpotifySearchResults, getItems],
[getMopidySearchResults, getSpotifySearchResults, itemsSelector],
(mopidySearchResults, spotifySearchResults, items) => {
const uris = [
...mopidySearchResults || [],

4
src/js/views/Album.js
View File

@ -26,7 +26,7 @@ import {
sourceIcon,
} from '../util/helpers';
import Button from '../components/Button';
import { makeLoadingSelector, makeItemSelector } from '../util/selectors';
import { makeLoadingSelector, makeItemSelector, makeLibrarySelector } from '../util/selectors';
export class Album extends React.Component {
componentDidMount = () => {
@ -170,6 +170,8 @@ export class Album extends React.Component {
slim_mode,
} = this.props;
console.log('Album.render')
if (loading) {
return <Loader body loading />;
} else if (!album) {

2
src/js/views/Artist.js
View File

@ -402,6 +402,8 @@ class Artist extends React.Component {
history,
} = this.props;
console.log('render!')
if (loading) {
return <Loader body loading />;
} else if (!artist) {

27
src/js/views/library/LibraryAlbums.js
View File

@ -56,18 +56,6 @@ class LibraryAlbums extends React.Component {
this.getGoogleLibrary();
this.getSpotifyLibrary();
}
/*
componentDidUpdate(prevProps, prevState) {
Object.entries(this.props).forEach(([key, val]) =>
prevProps[key] !== val && console.log(`Prop '${key}' changed`)
);
if (this.state) {
Object.entries(this.state).forEach(([key, val]) =>
prevState[key] !== val && console.log(`State '${key}' changed`)
);
}
}
*/
componentDidUpdate = ({ source: prevSource }) => {
const { source } = this.props;
@ -383,20 +371,17 @@ class LibraryAlbums extends React.Component {
const mapStateToProps = (state) => {
const source = state.ui.library_albums_source ? state.ui.library_albums_source : 'all';
const loadingSelector = makeLoadingSelector(['(.*):library:albums']);
const spotifyLibrarySelector = makeLibrarySelector('spotify:library:albums');
const googleLibrarySelector = makeLibrarySelector('google:library:albums');
const mopidyLibrarySelector = makeLibrarySelector('mopidy:library:albums');
const albums = [
...(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []),
...(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []),
...(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []),
];
const libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:albums');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:albums');
if (source === 'all' || source === 'google') libraryUris.push('google:library:albums');
const librarySelector = makeLibrarySelector(libraryUris);
return {
loading: loadingSelector(state),
mopidy_uri_schemes: state.mopidy.uri_schemes,
albums,
albums: librarySelector(state),
google_available: (state.mopidy.uri_schemes && state.mopidy.uri_schemes.includes('gmusic:')),
spotify_available: state.spotify.access_token,
view: state.ui.library_albums_view,

21
src/js/views/library/LibraryArtists.js
View File

@ -333,27 +333,18 @@ class LibraryArtists extends React.Component {
const mapStateToProps = (state) => {
const source = state.ui.library_artists_source || 'all';
const loadingSelector = makeLoadingSelector(['(.*):library:artists']);
const spotifyLibrarySelector = makeLibrarySelector('spotify:library:artists');
const googleLibrarySelector = makeLibrarySelector('google:library:artists');
const mopidyLibrarySelector = makeLibrarySelector('mopidy:library:artists');
const artists = [
...(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []),
...(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []),
...(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []),
];
/**
TODO
Apply sort, filter and source rules to the selector.
This will mean we have a universal selector for all libraries. WIN!
**/
const libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:artists');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:artists');
if (source === 'all' || source === 'google') libraryUris.push('google:library:artists');
const librarySelector = makeLibrarySelector(libraryUris);
return {
mopidy_uri_schemes: state.mopidy.uri_schemes,
google_available: (state.mopidy.uri_schemes && state.mopidy.uri_schemes.includes('gmusic:')),
spotify_available: (state.spotify.access_token),
artists,
artists: librarySelector(state),
loading: loadingSelector(state),
source,
sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : null),

15
src/js/views/library/LibraryPlaylists.js
View File

@ -338,21 +338,18 @@ class LibraryPlaylists extends React.Component {
const mapStateToProps = (state) => {
const source = state.ui.library_playlists_source || 'all';
const loadingSelector = makeLoadingSelector(['(.*):library:playlists']);
const spotifyLibrarySelector = makeLibrarySelector('spotify:library:playlists');
const googleLibrarySelector = makeLibrarySelector('google:library:playlists');
const mopidyLibrarySelector = makeLibrarySelector('mopidy:library:playlists');
const playlists = [
...(source === 'all' || source === 'spotify' ? spotifyLibrarySelector(state) : []),
...(source === 'all' || source === 'google' ? googleLibrarySelector(state) : []),
...(source === 'all' || source === 'local' ? mopidyLibrarySelector(state) : []),
];
const libraryUris = [];
if (source === 'all' || source === 'local') libraryUris.push('mopidy:library:playlists');
if (source === 'all' || source === 'spotify') libraryUris.push('spotify:library:playlists');
if (source === 'all' || source === 'google') libraryUris.push('google:library:playlists');
const librarySelector = makeLibrarySelector(libraryUris);
return {
slim_mode: state.ui.slim_mode,
mopidy_uri_schemes: state.mopidy.uri_schemes,
spotify_available: state.spotify.access_token,
playlists,
playlists: librarySelector(state),
loading: loadingSelector(state),
source,
me_id: (state.spotify.me ? state.spotify.me.id : false),