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

Service worker caching, Loader component

Browse Source
This commit is contained in:
James Barnsley
2019-09-10 06:59:44 +12:00
parent a86403fa59
commit c08cc71c47
49 changed files with 16390 additions and 11259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,10 +11,9 @@ import Thumbnail from '../components/Thumbnail';
import Parallax from '../components/Parallax';
import NiceNumber from '../components/NiceNumber';
import Dater from '../components/Dater';
import ConfirmationButton from '../components/Fields/ConfirmationButton';
import LazyLoadListener from '../components/LazyLoadListener';
import FollowButton from '../components/Fields/FollowButton';
import Header from '../components/Header';
import Loader from '../components/Loader';
import ContextMenuTrigger from '../components/ContextMenuTrigger';
import URILink from '../components/URILink';
import Icon from '../components/Icon';
@ -25,7 +24,7 @@ import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
import * as spotifyActions from '../services/spotify/actions';
class Playlist extends React.Component {
class Playlist extends React.Component {
constructor(props) {
super(props);
}
@ -46,7 +45,7 @@ class Playlist extends React.Component {
this.props.coreActions.loadPlaylist(this.props.uri);
}
componentWillReceiveProps(nextProps) {
componentWillReceiveProps(nextProps) {
// Follow a URI moved_to instruction
if (this.props.playlist && nextProps.playlist && this.props.playlist.moved_to != nextProps.playlist.moved_to) {
this.props.history.push(`/playlist/${encodeURIComponent(nextProps.playlist.moved_to)}`);
@ -136,7 +135,7 @@ class Playlist extends React.Component {
}
renderActions() {
switch (helpers.uriSource(this.props.uri)) {
switch (helpers.uriSource(this.props.uri)) {
case 'm3u':
return (
<div className="actions">
@ -179,21 +178,17 @@ class Playlist extends React.Component {
if (!this.props.playlist) {
if (helpers.isLoading(this.props.load_queue, [`spotify_playlists/${playlist_id}?`])) {
return (
<div className="body-loader loading">
<div className="loader" />
</div>
);
return <Loader body loading />
}
return (
<ErrorMessage type="not-found" title="Not found">
<p>
Could not find playlist with URI "
{encodeURIComponent(this.props.uri)}
"
<p>
Could not find playlist with URI "
{encodeURIComponent(this.props.uri)}
"
</p>
</ErrorMessage>
);
);
}
const playlist = helpers.collate(this.props.playlist, { tracks: this.props.tracks, users: this.props.users });
@ -225,24 +220,24 @@ Could not find playlist with URI "
<ul className="details">
{!this.props.slim_mode ? <li className="source"><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /></li> : null }
{playlist.user_uri ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid', playlist.user_uri)}</URILink></li> : null }
<li>
{playlist.tracks_total ? playlist.tracks_total : '0'}
{' '}
tracks
<li>
{playlist.tracks_total ? playlist.tracks_total : '0'}
{' '}
tracks
</li>
{!this.props.slim_mode && playlist.tracks && playlist.tracks_total > 0 ? <li><Dater type="total-time" data={playlist.tracks} /></li> : null }
{!this.props.slim_mode && playlist.followers !== undefined ? (
<li>
<NiceNumber value={playlist.followers} />
{' '}
followers
</li>
{!this.props.slim_mode && playlist.followers !== undefined ? (
<li>
<NiceNumber value={playlist.followers} />
{' '}
followers
</li>
) : null }
{!this.props.slim_mode && playlist.last_modified_date ? (
<li>
Edited
<Dater type="ago" data={playlist.last_modified_date} />
</li>
{!this.props.slim_mode && playlist.last_modified_date ? (
<li>
Edited
<Dater type="ago" data={playlist.last_modified_date} />
</li>
) : null }
</ul>
</div>
@ -256,12 +251,12 @@ Edited
track_context={context}
tracks={playlist.tracks}
removeTracks={(tracks_indexes) => this.removeTracks(tracks_indexes)}
reorderTracks={(indexes, index) => this.reorderTracks(indexes, index)}
reorderTracks={(indexes, index) => this.reorderTracks(indexes, index)}
/>
<LazyLoadListener
loadKey={playlist.tracks_more}
showLoader={is_loading_tracks || playlist.tracks_more}
loadMore={() => this.loadMore()}
loadMore={() => this.loadMore()}
/>
</section>
</div>
@ -269,7 +264,7 @@ Edited
}
}
const mapStateToProps = (state, ownProps) => {
const mapStateToProps = (state, ownProps) => {
// Decode the URI, and then re-encode selected characters
// This is needed as Mopidy encodes *some* characters in playlist URIs (but not other characters)
// We need to retain ":" because this a reserved URI separator
@ -305,4 +300,4 @@ const mapDispatchToProps = (dispatch) => ({
spotifyActions: bindActionCreators(spotifyActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Playlist);
export default connect(mapStateToProps, mapDispatchToProps)(Playlist);