Lazy-loading album tracks, fixes #484

This commit is contained in:
James Barnsley
2020-02-14 10:55:10 +13:00
parent 75ebcace4c
commit 69b1c7361a
8 changed files with 58 additions and 25 deletions

View File

@ -47629,7 +47629,7 @@ module.exports = hoistNonReactStatics;
/*!***************************************************************!*\
!*** ./node_modules/react-router-dom/esm/react-router-dom.js ***!
\***************************************************************/
/*! exports provided: BrowserRouter, HashRouter, Link, NavLink, MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, __RouterContext, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter */
/*! exports provided: MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, __RouterContext, generatePath, matchPath, useHistory, useLocation, useParams, useRouteMatch, withRouter, BrowserRouter, HashRouter, Link, NavLink */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -72706,7 +72706,7 @@ var isCached = exports.isCached = function isCached(url) {
/**
* Digest a react-router's location.search string into an array of values
*
*
* @param key String = the key you want from the URL
* @param string String = the locaion.search string
*/
@ -73134,7 +73134,7 @@ var formatUsers = exports.formatUsers = function formatUsers() {
* */
var formatAlbum = exports.formatAlbum = function formatAlbum(data) {
var album = {};
var fields = ['uri', 'provider', 'name', 'type', 'added_at', 'release_date', 'listeners', 'play_count', 'wiki', 'wiki_publish_date', 'popularity', 'images', 'artists_uris', 'tracks_uris', 'artists'];
var fields = ['uri', 'provider', 'name', 'type', 'added_at', 'release_date', 'listeners', 'play_count', 'wiki', 'wiki_publish_date', 'popularity', 'images', 'artists_uris', 'tracks_uris', 'tracks_total', 'tracks_more', 'artists'];
// Loop fields and import from data
var _iteratorNormalCompletion8 = true;
@ -74856,12 +74856,15 @@ function userPlaylistsLoaded(uri, playlists) {
}
function loadedMore(parent_type, parent_key, records_type, records_data) {
var extra_data = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
return {
type: 'LOADED_MORE',
parent_type: parent_type,
parent_key: parent_key,
records_type: records_type,
records_data: records_data
records_data: records_data,
extra_data: extra_data
};
}
@ -75958,6 +75961,13 @@ var CoreMiddleware = function () {
var records_index = {};
var records_uris = helpers.arrayOf('uri', records);
// Merge any extra data (eg more_track's albums)
if (action.extra_data) {
records = records.map(function (record) {
return _extends({}, record, action.extra_data);
});
}
// If we're a list of playlists, we need to manually filter Spotify's new URI structure
// Really poor form because they haven't updated it everywhere, yet
if (action.records_type == 'playlist') {
@ -83618,11 +83628,12 @@ function getURL(url, action_name) {
function getMore(url) {
var core_action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var custom_action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var extra_data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
return function (dispatch, getState) {
request(dispatch, getState, url).then(function (response) {
if (core_action) {
dispatch(coreActions.loadedMore(core_action.parent_type, core_action.parent_key, core_action.records_type, response));
dispatch(coreActions.loadedMore(core_action.parent_type, core_action.parent_key, core_action.records_type, response, extra_data));
} else if (custom_action) {
custom_action.data = response;
dispatch(custom_action);
@ -87117,6 +87128,11 @@ var Album = exports.Album = function (_React$Component) {
parent_type: 'album',
parent_key: this.props.album.uri,
records_type: 'track'
}, null, {
album: {
uri: this.props.album.uri,
name: this.props.album.name
}
});
}
}, {
@ -87201,7 +87217,7 @@ var Album = exports.Album = function (_React$Component) {
album.tracks ? _react2.default.createElement(
'li',
null,
album.tracks.length,
album.tracks_total || album.tracks.length,
' ',
'tracks'
) : null,

File diff suppressed because one or more lines are too long

View File

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1581629738";
var build = "1581629971";
var version = "3.44.2";
// Construct the script tag

View File

@ -201,7 +201,7 @@ export const isCached = function (url) {
/**
* Digest a react-router's location.search string into an array of values
*
*
* @param key String = the key you want from the URL
* @param string String = the locaion.search string
*/
@ -508,6 +508,8 @@ export let formatAlbum = function (data) {
'images',
'artists_uris',
'tracks_uris',
'tracks_total',
'tracks_more',
'artists', // Array of simple records
];

View File

@ -1,5 +1,5 @@
import * as helpers from '../../helpers';
import * as helpers from '../../helpers';
const spotifyActions = require('../../services/spotify/actions');
const mopidyActions = require('../../services/mopidy/actions');
@ -221,13 +221,14 @@ export function userPlaylistsLoaded(uri, playlists, more = null, total = null) {
};
}
export function loadedMore(parent_type, parent_key, records_type, records_data) {
export function loadedMore(parent_type, parent_key, records_type, records_data, extra_data = {}) {
return {
type: 'LOADED_MORE',
parent_type,
parent_key,
records_type,
records_data,
extra_data,
};
}
@ -247,7 +248,7 @@ export function removeFromIndex(index_name, key, new_key = null) {
export function reorderPlaylistTracks(uri, indexes, insert_before, snapshot_id = false) {
const range = helpers.createRange(indexes);
switch (helpers.uriSource(uri)) {
switch (helpers.uriSource(uri)) {
case 'spotify':
return {
type: 'SPOTIFY_REORDER_PLAYLIST_TRACKS',
@ -270,7 +271,7 @@ export function reorderPlaylistTracks(uri, indexes, insert_before, snapshot_id =
}
export function savePlaylist(uri, name, description = '', is_public = false, is_collaborative = false, image = null) {
switch (helpers.uriSource(uri)) {
switch (helpers.uriSource(uri)) {
case 'spotify':
return {
type: 'SPOTIFY_SAVE_PLAYLIST',
@ -293,7 +294,7 @@ export function savePlaylist(uri, name, description = '', is_public = false, is_
}
export function createPlaylist(scheme, name, description = '', is_public = false, is_collaborative = false) {
switch (scheme) {
switch (scheme) {
case 'spotify':
if (description == '') {
description = null;
@ -307,7 +308,7 @@ export function createPlaylist(scheme, name, description = '', is_public = false
}
export function deletePlaylist(uri) {
switch (helpers.uriSource(uri)) {
switch (helpers.uriSource(uri)) {
case 'spotify':
return spotifyActions.following(uri, 'DELETE');
@ -318,7 +319,7 @@ export function deletePlaylist(uri) {
}
export function removeTracksFromPlaylist(uri, tracks_indexes) {
switch (helpers.uriSource(uri)) {
switch (helpers.uriSource(uri)) {
case 'spotify':
return {
type: 'SPOTIFY_REMOVE_PLAYLIST_TRACKS',
@ -336,7 +337,7 @@ export function removeTracksFromPlaylist(uri, tracks_indexes) {
}
export function addTracksToPlaylist(uri, tracks_uris) {
switch (helpers.uriSource(uri)) {
switch (helpers.uriSource(uri)) {
case 'spotify':
return {
type: 'SPOTIFY_ADD_PLAYLIST_TRACKS',

View File

@ -760,6 +760,11 @@ const CoreMiddleware = (function () {
var records_index = {};
var records_uris = helpers.arrayOf('uri', records);
// Merge any extra data (eg more_track's albums)
if (action.extra_data) {
records = records.map(record => ({ ...record, ...action.extra_data }));
}
// If we're a list of playlists, we need to manually filter Spotify's new URI structure
// Really poor form because they haven't updated it everywhere, yet
if (action.records_type == 'playlist') {

View File

@ -502,7 +502,7 @@ export function getURL(url, action_name, key = false) {
};
}
export function getMore(url, core_action = null, custom_action = null) {
export function getMore(url, core_action = null, custom_action = null, extra_data = {}) {
return (dispatch, getState) => {
request(dispatch, getState, url)
.then(
@ -513,6 +513,7 @@ export function getMore(url, core_action = null, custom_action = null) {
core_action.parent_key,
core_action.records_type,
response,
extra_data,
));
} else if (custom_action) {
custom_action.data = response;
@ -1301,7 +1302,6 @@ export function getAlbum(uri) {
const tracks = Object.assign([], response.tracks.items);
const album = {
...helpers.formatAlbum(response),
artists_uris: helpers.arrayOf('uri', response.artists),
tracks_uris: helpers.arrayOf('uri', tracks),

View File

@ -114,11 +114,20 @@ export class Album extends React.Component {
}
loadMore() {
this.props.spotifyActions.getMore(this.props.album.tracks_more, {
parent_type: 'album',
parent_key: this.props.album.uri,
records_type: 'track',
});
this.props.spotifyActions.getMore(
this.props.album.tracks_more, {
parent_type: 'album',
parent_key: this.props.album.uri,
records_type: 'track',
},
null,
{
album: {
uri: this.props.album.uri,
name: this.props.album.name,
},
},
);
}
play() {
@ -196,7 +205,7 @@ export class Album extends React.Component {
) : null}
{album.tracks ? (
<li>
{album.tracks.length}
{album.tracks_total || album.tracks.length}
{' '}
tracks
</li>