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

Fixing New Releases and Featured loaders; Exploring expensive API calls load on JS thread (eg Tiesto with >300 albums)

Browse Source
This commit is contained in:
James Barnsley
2020-09-17 20:58:30 +12:00
parent 7fde458926
commit 5e019200fd
13 changed files with 155 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/components/Sidebar.js
View File

@ -59,17 +59,17 @@ class Sidebar extends React.Component {
<Icon name="warning" className="red-text" />
<span className="tooltip__content">
{!mopidy_connected && (
<I18n path="sidebar.not_connected" params={{ name: i18n('services.mopidy.title') }} contentAfter>
<I18n path="sidebar.not_connected" name={i18n('services.mopidy.title')} contentAfter>
<br />
</I18n>
)}
{!pusher_connected && (
<I18n path="sidebar.not_connected" params={{ name: i18n('services.pusher.title') }} contentAfter>
<I18n path="sidebar.not_connected" name={i18n('services.pusher.title')} contentAfter>
<br />
</I18n>
)}
{!snapcast_connected && snapcast_enabled && (
<I18n path="sidebar.not_connected" params={{ name: i18n('services.snapcast.title') }} contentAfter>
<I18n path="sidebar.not_connected" name={i18n('services.snapcast.title')} contentAfter>
<br />
</I18n>
)}

53
src/js/services/spotify/actions.js
View File

@ -18,12 +18,10 @@ import {
formatArtist,
formatArtists,
formatAlbums,
formatPlaylists,
formatImages,
formatTrack,
} from '../../util/format';
import URILink from '../../components/URILink';
import { i18n } from '../../locale';
const coreActions = require('../../services/core/actions');
const uiActions = require('../../services/ui/actions');
@ -361,7 +359,7 @@ export function getLibraryTracks() {
};
}
export function getFeaturedPlaylists() {
export function getFeaturedPlaylists(forceRefetch = false) {
return (dispatch, getState) => {
dispatch({ type: 'SPOTIFY_FEATURED_PLAYLISTS_LOADED', data: false });
@ -380,8 +378,13 @@ export function getFeaturedPlaylists() {
if (sec < 10) sec = `0${sec}`;
const timestamp = `${year}-${month}-${day}T${hour}:${min}:${sec}`;
let endpoint = 'browse/featured-playlists?limit=50';
endpoint += `&country=${getState().spotify.country}`;
endpoint += `&locale=${getState().spotify.locale}`;
endpoint += `&timestamp=${timestamp}`;
if (forceRefetch) endpoint += `&refetch=${Date.now()}`;
request(dispatch, getState, `browse/featured-playlists?limit=50&country=${getState().spotify.country}&locale=${getState().spotify.locale}timestamp=${timestamp}`)
request(dispatch, getState, endpoint)
.then(
(response) => {
const playlists = response.playlists.items.map(
@ -432,9 +435,14 @@ export function getCategories() {
};
}
export function getCategory(id) {
export function getCategory(id, forceRefetch = false) {
return (dispatch, getState) => {
request(dispatch, getState, `browse/categories/${id}?country=${getState().spotify.country}&locale=${getState().spotify.locale}`)
let endpoint = `browse/categories/${id}`;
endpoint += `?country=${getState().spotify.country}`;
endpoint += `&locale=${getState().spotify.locale}`;
if (forceRefetch) endpoint += `&refetch=${Date.now()}`;
request(dispatch, getState, endpoint)
.then(
(response) => {
dispatch({
@ -456,9 +464,15 @@ export function getCategory(id) {
};
}
export function getCategoryPlaylists(id) {
export function getCategoryPlaylists(id, forceRefetch = false) {
return (dispatch, getState) => {
request(dispatch, getState, `browse/categories/${id}/playlists?limit=50&country=${getState().spotify.country}&locale=${getState().spotify.locale}`)
let endpoint = `browse/categories/${id}/playlists`;
endpoint += '?limit=50';
endpoint += `&country=${getState().spotify.country}`;
endpoint += `&locale=${getState().spotify.locale}`;
if (forceRefetch) endpoint += `&refetch=${Date.now()}`;
request(dispatch, getState, endpoint)
.then(
(response) => {
dispatch({
@ -477,9 +491,15 @@ export function getCategoryPlaylists(id) {
};
}
export function getNewReleases() {
export function getNewReleases(forceRefetch = false) {
return (dispatch, getState) => {
request(dispatch, getState, `browse/new-releases?country=${getState().spotify.country}&limit=50`)
let endpoint = 'browse/new-releases';
endpoint += '?limit=50';
endpoint += '&offset=0';
endpoint += `&country=${getState().spotify.country}`;
if (forceRefetch) endpoint += `&refetch=${Date.now()}`;
request(dispatch, getState, endpoint)
.then(
(response) => {
dispatch({
@ -1030,7 +1050,9 @@ export function getGenres() {
* */
export function getArtist(uri, { full, forceRefetch }) {
return (dispatch, getState) => {
const endpoint = `artists/${getFromUri('artistid', uri)}${forceRefetch ? `?refetch=${Date.now()}` : ''}`;
let endpoint = `artists/${getFromUri('artistid', uri)}`;
if (forceRefetch) endpoint += `?refetch=${Date.now()}`;
request(dispatch, getState, endpoint, 'GET', false, true)
.then(
(response) => {
@ -1198,7 +1220,9 @@ export function getUserPlaylists(uri) {
* */
export function getAlbum(uri, { full, forceRefetch }) {
return (dispatch, getState) => {
const endpoint = `albums/${getFromUri('albumid', uri)}${forceRefetch ? `?refetch=${Date.now()}` : ''}`;
let endpoint = `albums/${getFromUri('albumid', uri)}`;
if (forceRefetch) endpoint += `?refetch=${Date.now()}`;
request(dispatch, getState, endpoint)
.then(
(response) => {
@ -1345,7 +1369,10 @@ export function savePlaylist(uri, name, description, is_public, is_collaborative
export function getPlaylist(uri, { full, forceRefetch, callbackAction }) {
return (dispatch, getState) => {
const endpoint = `playlists/${getFromUri('playlistid', uri)}?market=${getState().spotify.country}${forceRefetch ? `&refetch=${Date.now()}` : ''}`;
let endpoint = `playlists/${getFromUri('playlistid', uri)}`;
endpoint += `?market=${getState().spotify.country}`;
if (forceRefetch) endpoint += `&refetch=${Date.now()}`;
request(dispatch, getState, endpoint)
.then(
(response) => {

25
src/js/services/spotify/middleware.js
View File

@ -8,6 +8,7 @@ import {
formatTracks,
formatImages,
formatUser,
formatAlbums,
} from '../../util/format';
const coreActions = require('../core/actions');
const uiActions = require('../ui/actions');
@ -106,22 +107,20 @@ const SpotifyMiddleware = (function () {
store.dispatch(spotifyActions.savePlaylist(action.key, action.name, action.description, action.is_public, action.is_collaborative, action.image));
break;
case 'SPOTIFY_NEW_RELEASES_LOADED':
store.dispatch({
type: 'ALBUMS_LOADED',
albums: action.data.albums.items,
case 'SPOTIFY_NEW_RELEASES_LOADED': {
const albums = formatAlbums(action.data.albums.items);
store.dispatch(coreActions.itemsLoaded(albums));
next({
...action,
uris: arrayOf('uri', albums),
more: action.data.albums.next,
total: action.data.albums.total,
});
// Collate result into the three key values we want
action.uris = arrayOf('uri', action.data.albums.items);
action.more = action.data.albums.next;
action.total = action.data.albums.total;
// And pass on to our reducer
next(action);
break;
}
// TODO: This can go
// TODO: This can go
case 'SPOTIFY_ARTIST_ALBUMS_LOADED':
store.dispatch(coreActions.albumsLoaded(action.data.items));
store.dispatch({

4
src/js/util/helpers.js
View File

@ -1,3 +1,5 @@
import { indexToArray } from "./arrays";
/**
* Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for
@ -372,7 +374,7 @@ let isObject = function (value) {
const isLoading = function (load_queue = {}, keys = []) {
if (!load_queue || !keys) return false;
const queue_keys = Object.keys(load_queue);
const queue_keys = indexToArray(load_queue);
const matches = keys.reduce((acc, key) => {
let regex = '';
try {

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

@ -22,7 +22,6 @@ import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
import {
uriSource,
getFromUri,
isLoading,
sourceIcon,
titleCase,
@ -35,8 +34,15 @@ import { trackEvent } from '../components/Trackable';
class Artist extends React.Component {
componentDidMount() {
const {
uri,
coreActions: {
loadItem,
},
} = this.props;
this.setWindowTitle();
this.props.coreActions.loadItem(this.props.uri, { full: true });
loadItem(uri, { full: true });
}
componentDidUpdate = ({

6
src/js/views/Playlist.js
View File

@ -279,8 +279,8 @@ class Playlist extends React.Component {
const playlist_id = getFromUri('playlistid', uri);
if (!playlist) {
if (isLoading(load_queue, [`(.*)${playlist_id}`])) {
return <Loader body loading />
if (isLoading(load_queue, [`(.*)${playlist_id}(.*)`])) {
return <Loader body loading />;
}
return (
<ErrorMessage type="not-found" title="Not found">
@ -349,7 +349,7 @@ class Playlist extends React.Component {
{this.renderActions()}
{isLoading(load_queue, [`(.*)${playlist_id}/tracks`]) ? (
{isLoading(load_queue, [`(.*)${playlist_id}/tracks(.*)`]) ? (
<Loader body loading />
) : (
<section className="list-wrapper">

6
src/js/views/discover/DiscoverFeatured.js
View File

@ -40,7 +40,7 @@ class DiscoverFeatured extends React.Component {
},
} = this.props;
hideContextMenu();
getFeaturedPlaylists();
getFeaturedPlaylists(true);
}
handleContextMenu = (e, item) => {
@ -68,7 +68,7 @@ class DiscoverFeatured extends React.Component {
items,
} = this.props;
if (isLoading(load_queue, ['spotify_browse/featured-playlists'])) {
if (isLoading(load_queue, ['(.*)spotify_browse/featured-playlists(.*)'])) {
return (
<div className="view discover-featured-view preserve-3d">
<Header className="overlay" uiActions={uiActions}>
@ -80,7 +80,7 @@ class DiscoverFeatured extends React.Component {
);
}
const playlists = indexToArray(items, uris);
const playlists = indexToArray(items, uris || []);
const options = (
<Button

19
src/js/views/discover/DiscoverNewReleases.js
View File

@ -14,6 +14,7 @@ import * as spotifyActions from '../../services/spotify/actions';
import { isLoading } from '../../util/helpers';
import { i18n, I18n } from '../../locale';
import Button from '../../components/Button';
import { indexToArray } from '../../util/arrays';
class DiscoverNewReleases extends React.Component {
componentDidMount() {
@ -68,7 +69,7 @@ class DiscoverNewReleases extends React.Component {
} = this.props;
hideContextMenu();
getNewReleases();
getNewReleases(true);
}
handleContextMenu(e, item) {
@ -92,13 +93,13 @@ class DiscoverNewReleases extends React.Component {
render = () => {
const {
load_queue,
items,
new_releases,
albums: albumsProp,
new_releases_more,
uiActions,
} = this.props;
if (isLoading(load_queue, ['spotify_browse/new-releases'])) {
if (isLoading(load_queue, ['(.*)new-releases(.*)offset=0(.*)'])) {
return (
<div className="view discover-new-releases-view">
<Header>
@ -110,14 +111,7 @@ class DiscoverNewReleases extends React.Component {
);
}
const albums = [];
if (new_releases) {
for (const uri of new_releases) {
if (albumsProp.hasOwnProperty(uri)) {
albums.push(albumsProp[uri]);
}
}
}
const albums = indexToArray(items, new_releases || []);
const options = (
<Button
@ -152,8 +146,7 @@ class DiscoverNewReleases extends React.Component {
const mapStateToProps = (state) => ({
theme: state.ui.theme,
load_queue: state.ui.load_queue,
artists: state.core.artists,
albums: state.core.albums,
items: state.core.items,
new_releases: (state.spotify.new_releases ? state.spotify.new_releases : null),
new_releases_more: (state.spotify.new_releases_more ? state.spotify.new_releases_more : null),
new_releases_total: (state.spotify.new_releases_total ? state.spotify.new_releases_total : null),

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

@ -235,7 +235,7 @@ class LibraryAlbums extends React.Component {
<LazyLoadListener
loadKey={total_albums > limit ? limit : total_albums}
showLoader={limit < total_albums}
loadMore={() => this.loadMore()}
loadMore={this.loadMore}
/>
</section>
);