Loading library albums only on demand
This commit is contained in:
@ -385,7 +385,7 @@ class ContextMenu extends React.Component{
|
||||
|
||||
var add_to_playlist = (
|
||||
<span className="menu-item-wrapper has-submenu">
|
||||
<a className="menu-item" onClick={e => this.setState({ submenu_expanded: !this.state.submenu_expanded })}>
|
||||
<a className="menu-item" onClick={e => {this.setState({ submenu_expanded: !this.state.submenu_expanded }); this.props.coreActions.getLibraryPlaylists()}}>
|
||||
<span className="label">Add to playlist</span>
|
||||
<FontAwesome className="submenu-icon" name='caret-right' />
|
||||
</a>
|
||||
|
||||
@ -33,8 +33,7 @@ export default class GridItem extends React.Component{
|
||||
case 'playlist':
|
||||
return (
|
||||
<div className="secondary">
|
||||
{item.tracks_total ? item.tracks_total+' tracks' : null}
|
||||
{item.can_edit ? <FontAwesome name="edit" /> : null}
|
||||
{item.tracks_total ? item.tracks_total : 0} tracks
|
||||
</div>
|
||||
)
|
||||
break
|
||||
|
||||
@ -76,7 +76,7 @@ export default class EditPlaylistModal extends React.Component{
|
||||
default:
|
||||
return (
|
||||
<div>
|
||||
<div className="field">
|
||||
<div className="field text">
|
||||
<span className="label">Name</span>
|
||||
<input
|
||||
type="text"
|
||||
|
||||
@ -56,7 +56,7 @@ export default class Notifications extends React.Component{
|
||||
items.push(
|
||||
<div className="process notification" key={key}>
|
||||
<div className="loader"></div>
|
||||
{ processes[key].content }
|
||||
{ processes[key].message }
|
||||
<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.cancelProcess(key) } />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -167,6 +167,17 @@ export function addTracksToPlaylist( uri, tracks_uris ){
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Asset libraries
|
||||
**/
|
||||
|
||||
export function getLibraryPlaylists(){
|
||||
return {
|
||||
type: 'GET_LIBRARY_PLAYLISTS'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Assets loaded
|
||||
**/
|
||||
|
||||
@ -254,6 +254,16 @@ const CoreMiddleware = (function(){
|
||||
next(action)
|
||||
break
|
||||
|
||||
case 'GET_LIBRARY_PLAYLISTS':
|
||||
if (store.getState().spotify.connected){
|
||||
store.dispatch(spotifyActions.getLibraryPlaylists())
|
||||
}
|
||||
if (store.getState().mopidy.connected){
|
||||
store.dispatch(mopidyActions.getLibraryPlaylists())
|
||||
}
|
||||
next(action)
|
||||
break
|
||||
|
||||
case 'RESTART':
|
||||
location.reload()
|
||||
break
|
||||
|
||||
@ -70,7 +70,7 @@ const sendRequest = ( dispatch, getState, endpoint, method = 'GET', data = false
|
||||
dispatch(refreshToken(dispatch, getState))
|
||||
}
|
||||
|
||||
dispatch(uiActions.createNotification('Spotify: '+message,'bad'))
|
||||
dispatch(uiActions.createNotification(message,'bad'))
|
||||
console.error( endpoint+' failed', response)
|
||||
reject(error)
|
||||
}
|
||||
@ -978,11 +978,19 @@ export function getUserPlaylists(user_uri){
|
||||
|
||||
var playlists = []
|
||||
for (var i = 0; i < response.items.length; i++){
|
||||
|
||||
var can_edit = false
|
||||
if (getState().spotify.me && response.items[i].owner.id == getState().spotify.me.id){
|
||||
can_edit = true
|
||||
} else if (response.items[i].owner.id == getState().backend_username){
|
||||
can_edit = true
|
||||
}
|
||||
|
||||
playlists.push(Object.assign(
|
||||
{},
|
||||
response.items[i],
|
||||
{
|
||||
can_edit: (getState().spotify.me && response.items[i].owner.id == getState().spotify.me.id),
|
||||
can_edit: can_edit,
|
||||
tracks_total: response.items[i].tracks.total
|
||||
}
|
||||
))
|
||||
@ -1259,6 +1267,9 @@ function loadNextPlaylistsBatch(dispatch, getState, playlists, lastResponse){
|
||||
loadNextPlaylistsBatch( dispatch, getState, playlists, response )
|
||||
});
|
||||
}else{
|
||||
|
||||
dispatch(uiActions.processFinished('SPOTIFY_GET_ALL_LIBRARY_PLAYLISTS'))
|
||||
|
||||
dispatch({
|
||||
type: 'SPOTIFY_LIBRARY_PLAYLISTS_LOADED',
|
||||
playlists: playlists
|
||||
@ -1266,8 +1277,11 @@ function loadNextPlaylistsBatch(dispatch, getState, playlists, lastResponse){
|
||||
}
|
||||
}
|
||||
|
||||
export function getAllLibraryPlaylists(){
|
||||
export function getLibraryPlaylists(){
|
||||
return (dispatch, getState) => {
|
||||
|
||||
dispatch(uiActions.startProcess('SPOTIFY_GET_ALL_LIBRARY_PLAYLISTS','Loading library playlists'))
|
||||
|
||||
sendRequest( dispatch, getState, 'me/playlists?limit=50' )
|
||||
.then( response => {
|
||||
loadNextPlaylistsBatch( dispatch, getState, response.items, response )
|
||||
|
||||
@ -67,59 +67,27 @@ const SpotifyMiddleware = (function(){
|
||||
break
|
||||
|
||||
case 'SPOTIFY_CREATE_PLAYLIST':
|
||||
if( !store.getState().spotify.authorization ){
|
||||
store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
|
||||
return
|
||||
}
|
||||
store.dispatch( spotifyActions.createPlaylist( action.name, action.description, action.is_private, action.is_collaborative ))
|
||||
break
|
||||
|
||||
case 'SPOTIFY_REMOVE_PLAYLIST_TRACKS':
|
||||
var playlist = state.core.playlists[action.key]
|
||||
|
||||
if( !store.getState().spotify.authorization ){
|
||||
store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
|
||||
return
|
||||
}
|
||||
if( !store.getState().spotify.me || store.getState().spotify.me.id != playlist.owner.id ){
|
||||
store.dispatch( uiActions.createNotification( "You can't edit a playlist you don't own", 'bad' ) )
|
||||
return
|
||||
}
|
||||
store.dispatch( spotifyActions.deleteTracksFromPlaylist( playlist.uri, playlist.snapshot_id, action.tracks_indexes ))
|
||||
break
|
||||
|
||||
|
||||
case 'SPOTIFY_ADD_PLAYLIST_TRACKS':
|
||||
|
||||
if( !store.getState().spotify.authorization ){
|
||||
store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
|
||||
return
|
||||
}
|
||||
store.dispatch( spotifyActions.addTracksToPlaylist( action.key, action.tracks_uris ))
|
||||
break
|
||||
|
||||
|
||||
case 'SPOTIFY_REORDER_PLAYLIST_TRACKS':
|
||||
|
||||
if( !store.getState().spotify.authorization ){
|
||||
store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
|
||||
return
|
||||
}
|
||||
|
||||
if( !store.getState().spotify.me || store.getState().spotify.me.id != helpers.getFromUri('artistid',action.key) ){
|
||||
store.dispatch( uiActions.createNotification( "You can't edit a playlist you don't own", 'bad' ) )
|
||||
return
|
||||
}
|
||||
store.dispatch( spotifyActions.reorderPlaylistTracks( action.key, action.range_start, action.range_length, action.insert_before, action.snapshot_id ))
|
||||
break
|
||||
|
||||
|
||||
case 'SPOTIFY_SAVE_PLAYLIST':
|
||||
|
||||
if( !store.getState().spotify.authorization ){
|
||||
store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
|
||||
return
|
||||
}
|
||||
store.dispatch( spotifyActions.savePlaylist( action.key, action.name, action.description, action.is_public, action.is_collaborative ))
|
||||
break
|
||||
|
||||
|
||||
@ -168,23 +168,25 @@ export function stopLoading(key){
|
||||
}
|
||||
}
|
||||
|
||||
export function startProcess(key,content){
|
||||
export function startProcess(key,message,data = {}){
|
||||
return {
|
||||
type: 'START_PROCESS',
|
||||
key: key,
|
||||
content: content
|
||||
message: message,
|
||||
data: data
|
||||
}
|
||||
}
|
||||
|
||||
export function updateProcess(key,content){
|
||||
export function updateProcess(key,message,data = {}){
|
||||
return {
|
||||
type: 'UPDATE_PROCESS',
|
||||
key: key,
|
||||
content: content
|
||||
message: message,
|
||||
data: data
|
||||
}
|
||||
}
|
||||
|
||||
export function runProcess(key){
|
||||
export function runProcess(key,data = {}){
|
||||
return {
|
||||
type: key
|
||||
}
|
||||
|
||||
@ -124,7 +124,8 @@ const UIMiddleware = (function(){
|
||||
|
||||
case 'START_PROCESS':
|
||||
store.dispatch({
|
||||
type: action.key
|
||||
type: action.key,
|
||||
data: action.data
|
||||
})
|
||||
next(action)
|
||||
break
|
||||
|
||||
@ -130,7 +130,8 @@ export default function reducer(ui = {}, action){
|
||||
var processes = Object.assign({}, (ui.processes ? ui.processes : []))
|
||||
processes[action.key] = {
|
||||
key: action.key,
|
||||
content: action.content
|
||||
message: action.message,
|
||||
data: action.data
|
||||
}
|
||||
return Object.assign({}, ui, {processes: processes})
|
||||
|
||||
|
||||
@ -11,6 +11,7 @@ import DropdownField from '../../components/DropdownField'
|
||||
import Header from '../../components/Header'
|
||||
|
||||
import * as helpers from '../../helpers'
|
||||
import * as coreActions from '../../services/core/actions'
|
||||
import * as uiActions from '../../services/ui/actions'
|
||||
import * as mopidyActions from '../../services/mopidy/actions'
|
||||
import * as spotifyActions from '../../services/spotify/actions'
|
||||
@ -22,19 +23,16 @@ class LibraryPlaylists extends React.Component{
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
if (!this.props.local_albums){
|
||||
if (!this.props.library_playlists){
|
||||
if (this.props.spotify_connected){
|
||||
this.props.spotifyActions.getAllLibraryPlaylists()
|
||||
}
|
||||
if (this.props.mopidy_connected){
|
||||
this.props.mopidyActions.getLibraryPlaylists()
|
||||
this.props.coreActions.getLibraryPlaylists()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(newProps){
|
||||
if (!this.props.spotify_connected && newProps.spotify_connected){
|
||||
this.props.spotifyActions.getAllLibraryPlaylists()
|
||||
this.props.spotifyActions.getLibraryPlaylists()
|
||||
}
|
||||
|
||||
if (!this.props.mopidy_connected && newProps.mopidy_connected){
|
||||
@ -64,14 +62,6 @@ class LibraryPlaylists extends React.Component{
|
||||
}
|
||||
|
||||
renderView(){
|
||||
if (helpers.isLoading(this.props.load_queue,['spotify_me/playlists'])){
|
||||
return (
|
||||
<div className="body-loader loading">
|
||||
<div className="loader"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!this.props.library_playlists || !this.props.playlists ){
|
||||
return null
|
||||
}
|
||||
@ -263,6 +253,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
coreActions: bindActionCreators(coreActions, dispatch),
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
mopidyActions: bindActionCreators(mopidyActions, dispatch),
|
||||
spotifyActions: bindActionCreators(spotifyActions, dispatch)
|
||||
|
||||
Reference in New Issue
Block a user