Context menu playlist loader
This commit is contained in:
@ -248,6 +248,17 @@ class ContextMenu extends React.Component{
|
||||
|
||||
playlists = helpers.sortItems(playlists, 'name')
|
||||
|
||||
var loader = null
|
||||
if (this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status == 'running'){
|
||||
loader = (
|
||||
<div className="menu-item-wrapper">
|
||||
<div className="menu-item mini-loader loading">
|
||||
<div className="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={this.state.submenu_expanded ? 'submenu expanded' : 'submenu'}>
|
||||
<span className="menu-item-wrapper">
|
||||
@ -270,6 +281,7 @@ class ContextMenu extends React.Component{
|
||||
)
|
||||
})
|
||||
}
|
||||
{loader}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -589,6 +601,7 @@ class ContextMenu extends React.Component{
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
menu: state.ui.context_menu,
|
||||
processes: state.ui.processes,
|
||||
current_track: state.core.current_track,
|
||||
current_tracklist: state.core.current_tracklist,
|
||||
spotify_library_playlists: state.spotify.library_playlists,
|
||||
|
||||
@ -34,6 +34,15 @@ export default class AddToPlaylistModal extends React.Component{
|
||||
|
||||
playlists = helpers.sortItems(playlists, 'name')
|
||||
|
||||
var loader = null
|
||||
if (this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status == 'running'){
|
||||
loader = (
|
||||
<div className='lazy-loader body-loader loading'>
|
||||
<div className="loader"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Add to playlist</h1>
|
||||
@ -54,6 +63,7 @@ export default class AddToPlaylistModal extends React.Component{
|
||||
})
|
||||
}
|
||||
</div>
|
||||
{loader}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@ class Modal extends React.Component{
|
||||
</div>
|
||||
<div className="content">
|
||||
|
||||
{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} spotifyActions={this.props.spotifyActions} mopidyActions={this.props.mopidyActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} spotify_library_playlists={this.props.spotify_library_playlists} mopidy_library_playlists={this.props.mopidy_library_playlists} /> : null }
|
||||
{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} spotifyActions={this.props.spotifyActions} mopidyActions={this.props.mopidyActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} spotify_library_playlists={this.props.spotify_library_playlists} mopidy_library_playlists={this.props.mopidy_library_playlists} processes={this.props.processes} /> : null }
|
||||
{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} /> : null }
|
||||
{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} /> : null }
|
||||
{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} data={this.props.modal.data} /> : null }
|
||||
@ -78,6 +78,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
artists: state.core.artists,
|
||||
playlists: state.core.playlists,
|
||||
context_menu: state.ui.context_menu,
|
||||
processes: state.ui.processes,
|
||||
mopidy_connected: state.mopidy.connected,
|
||||
spotify_authorized: state.spotify.authorization,
|
||||
spotify_library_playlists: state.spotify.library_playlists,
|
||||
|
||||
@ -64,4 +64,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mini-loader {
|
||||
.loader {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 1;
|
||||
|
||||
&:before {
|
||||
border-color: darken($secondary_grey, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user