Playlist and Users data storage overhaul
This commit is contained in:
@ -29,16 +29,16 @@ class Playlist extends React.Component{
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.loadPlaylist();
|
||||
this.setWindowTitle();
|
||||
this.props.coreActions.loadPlaylist(this.props.params.uri);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
if (nextProps.params.uri != this.props.params.uri){
|
||||
this.loadPlaylist(nextProps);
|
||||
this.props.coreActions.loadPlaylist(nextProps.params.uri);
|
||||
} else if (!this.props.mopidy_connected && nextProps.mopidy_connected){
|
||||
if (helpers.uriSource(this.props.params.uri) != 'spotify'){
|
||||
this.loadPlaylist(nextProps);
|
||||
this.props.coreActions.loadPlaylist(nextProps.params.uri);
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,28 +59,6 @@ class Playlist extends React.Component{
|
||||
}
|
||||
}
|
||||
|
||||
loadPlaylist(props = this.props){
|
||||
|
||||
if (props.playlist && props.playlist.is_completely_loaded){
|
||||
console.info('Loading playlist from index')
|
||||
|
||||
} else {
|
||||
switch (helpers.uriSource(props.params.uri)){
|
||||
|
||||
case 'spotify':
|
||||
this.props.spotifyActions.getPlaylist(props.params.uri);
|
||||
this.props.spotifyActions.following(props.params.uri);
|
||||
break
|
||||
|
||||
default:
|
||||
if (props.mopidy_connected){
|
||||
this.props.mopidyActions.getPlaylist(props.params.uri);
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadMore(){
|
||||
this.props.spotifyActions.getMore(
|
||||
this.props.playlist.tracks_more,
|
||||
@ -140,7 +118,7 @@ class Playlist extends React.Component{
|
||||
}
|
||||
|
||||
renderActions(){
|
||||
switch(helpers.uriSource(this.props.playlist.uri )){
|
||||
switch(helpers.uriSource(this.props.playlist.uri)){
|
||||
|
||||
case 'm3u':
|
||||
return (
|
||||
@ -196,22 +174,14 @@ class Playlist extends React.Component{
|
||||
}
|
||||
}
|
||||
|
||||
var playlist = helpers.collate(this.props.playlist, {tracks: this.props.tracks, users: this.props.users});
|
||||
|
||||
var context = 'playlist';
|
||||
if (this.props.playlist.can_edit){
|
||||
if (playlist.can_edit){
|
||||
context = 'editable-playlist';
|
||||
}
|
||||
|
||||
var tracks = [];
|
||||
if (this.props.playlist.tracks_uris && this.props.tracks){
|
||||
for (var i = 0; i < this.props.playlist.tracks_uris.length; i++){
|
||||
var uri = this.props.playlist.tracks_uris[i]
|
||||
if (this.props.tracks.hasOwnProperty(uri)){
|
||||
tracks.push(this.props.tracks[uri])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (tracks.length <= 0 && helpers.isLoading(this.props.load_queue,['spotify_users/'+user_id+'/playlists/'+playlist_id, 'spotify_users/'+user_id+'/playlists/'+playlist_id+'/tracks'])){
|
||||
if (playlist.tracks && playlist.tracks.length <= 0 && helpers.isLoading(this.props.load_queue,['spotify_users/'+user_id+'/playlists/'+playlist_id, 'spotify_users/'+user_id+'/playlists/'+playlist_id+'/tracks'])){
|
||||
var is_loading_tracks = true;
|
||||
} else {
|
||||
var is_loading_tracks = false;
|
||||
@ -220,21 +190,21 @@ class Playlist extends React.Component{
|
||||
return (
|
||||
<div className="view playlist-view content-wrapper">
|
||||
<div className="thumbnail-wrapper">
|
||||
<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
|
||||
<Thumbnail size="large" canZoom images={playlist.images} />
|
||||
</div>
|
||||
|
||||
<div className="title">
|
||||
<h1>{ this.props.playlist.name }</h1>
|
||||
{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
|
||||
<h1>{playlist.name}</h1>
|
||||
{playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: playlist.description}}></h2> : null }
|
||||
|
||||
<ul className="details">
|
||||
{ !this.props.slim_mode ? <li className="has-tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.params.uri )} /><span className="tooltip">{helpers.uriSource(this.props.params.uri)} playlist</span></li> : null }
|
||||
{ this.props.playlist.owner && !this.props.slim_mode ? <li><URILink type="user" uri={this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</URILink></li> : null }
|
||||
{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
|
||||
{ this.props.playlist.last_modified ? <li>Edited <Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
|
||||
{!this.props.slim_mode ? <li className="has-tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(playlist.uri)} /><span className="tooltip">{helpers.uriSource(playlist.uri)} playlist</span></li> : null }
|
||||
{playlist.user_uri && !this.props.slim_mode ? <li><URILink type="user" uri={playlist.user_uri}>{playlist.user ? playlist.user.name : helpers.getFromUri('userid',playlist.user_uri)}</URILink></li> : null }
|
||||
{playlist.followers ? <li>{playlist.followers.toLocaleString()} followers</li> : null }
|
||||
{playlist.last_modified_date ? <li>Edited <Dater type="ago" data={playlist.last_modified_date} /></li> : null }
|
||||
<li>
|
||||
{ this.props.playlist.tracks_total ? this.props.playlist.tracks_total : tracks.length} tracks,
|
||||
<Dater type="total-time" data={tracks} />
|
||||
{playlist.tracks_total ? playlist.tracks_total : (playlist.tracks ? playlist.tracks.length : '0')} tracks,
|
||||
<Dater type="total-time" data={playlist.tracks} />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -242,8 +212,8 @@ class Playlist extends React.Component{
|
||||
{ this.renderActions() }
|
||||
|
||||
<section className="list-wrapper">
|
||||
<TrackList uri={this.props.params.uri} className="playlist-track-list" context={context} tracks={tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } />
|
||||
<LazyLoadListener loading={this.props.playlist.tracks_more} forceLoader={is_loading_tracks} loadMore={() => this.loadMore()}/>
|
||||
<TrackList uri={playlist.uri} className="playlist-track-list" context={context} tracks={playlist.tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } />
|
||||
<LazyLoadListener loading={playlist.tracks_more} forceLoader={is_loading_tracks} loadMore={() => this.loadMore()}/>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
@ -263,6 +233,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
allow_reporting: state.ui.allow_reporting,
|
||||
slim_mode: state.ui.slim_mode,
|
||||
load_queue: state.ui.load_queue,
|
||||
users: state.core.users,
|
||||
tracks: state.core.tracks,
|
||||
playlist: (state.core.playlists[uri] !== undefined ? state.core.playlists[uri] : false ),
|
||||
spotify_library_playlists: state.spotify.library_playlists,
|
||||
|
||||
Reference in New Issue
Block a user