Loading library albums only on demand

This commit is contained in:
James Barnsley
2017-08-11 21:59:14 +12:00
parent 190a20c882
commit 9bb4b79f1e
12 changed files with 58 additions and 61 deletions

View File

@ -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>

View File

@ -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

View File

@ -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"

View File

@ -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>
)

View File

@ -167,6 +167,17 @@ export function addTracksToPlaylist( uri, tracks_uris ){
}
/**
* Asset libraries
**/
export function getLibraryPlaylists(){
return {
type: 'GET_LIBRARY_PLAYLISTS'
}
}
/**
* Assets loaded
**/

View File

@ -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

View File

@ -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 )

View File

@ -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

View File

@ -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
}

View File

@ -124,7 +124,8 @@ const UIMiddleware = (function(){
case 'START_PROCESS':
store.dispatch({
type: action.key
type: action.key,
data: action.data
})
next(action)
break

View File

@ -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})

View File

@ -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)