Context menu on local material; Passes full item object; Shift + click when nothing selected
This commit is contained in:
@ -137,14 +137,15 @@ class ContextMenu extends React.Component{
|
||||
{ handleClick: 'playURIs', label: 'Play' },
|
||||
{ handleClick: 'playURIsNext', label: 'Play next' },
|
||||
{ handleClick: 'addToQueue', label: 'Add to queue' },
|
||||
// { handleClick: 'toggleFollow', label: 'Follow/unfollow' }, TODO
|
||||
{ handleClick: 'copyURIs', label: 'Copy URI' }
|
||||
]
|
||||
break
|
||||
|
||||
case 'artist':
|
||||
var items = [
|
||||
//{ handleClick: 'toggleFollow', label: 'Follow/unfollow' }, TODO
|
||||
{ handleClick: 'startRadio', label: 'Start radio' },
|
||||
{ handleClick: 'toggleFollow', label: 'Follow/unfollow' },
|
||||
{ handleClick: 'copyURIs', label: 'Copy URI' }
|
||||
]
|
||||
break
|
||||
@ -152,7 +153,7 @@ class ContextMenu extends React.Component{
|
||||
case 'playlist':
|
||||
var items = [
|
||||
{ handleClick: 'playURIs', label: 'Play' },
|
||||
{ handleClick: 'toggleFollow', label: 'Follow/unfollow' },
|
||||
// { handleClick: 'toggleFollow', label: 'Follow/unfollow' }, TODO
|
||||
{ handleClick: 'copyURIs', label: 'Copy URI' }
|
||||
]
|
||||
break
|
||||
|
||||
@ -26,14 +26,10 @@ class List extends React.Component{
|
||||
}
|
||||
|
||||
handleContextMenu(e,item){
|
||||
e.preventDefault()
|
||||
var data = {
|
||||
e: e,
|
||||
context: helpers.uriType(item.uri),
|
||||
uris: [item.uri],
|
||||
item: item
|
||||
if (this.props.handleContextMenu){
|
||||
e.preventDefault()
|
||||
this.props.handleContextMenu(e,item)
|
||||
}
|
||||
this.props.uiActions.showContextMenu(data)
|
||||
}
|
||||
|
||||
renderHeader(){
|
||||
|
||||
@ -153,12 +153,18 @@ class TrackList extends React.Component{
|
||||
}
|
||||
}
|
||||
|
||||
toggleTrackSelections(e, index){
|
||||
toggleTrackSelections(e,index){
|
||||
var tracks = this.state.tracks
|
||||
var lastSelectedTrack = this.state.lastSelectedTrack
|
||||
|
||||
if( e.ctrlKey ){
|
||||
|
||||
tracks[index].selected = !tracks[index].selected
|
||||
if (tracks[index].selected){
|
||||
tracks[index].selected = false
|
||||
} else {
|
||||
tracks[index].selected = true
|
||||
lastSelectedTrack = index
|
||||
}
|
||||
|
||||
}else if( e.shiftKey ){
|
||||
|
||||
@ -170,8 +176,11 @@ class TrackList extends React.Component{
|
||||
var end = this.state.lastSelectedTrack
|
||||
}
|
||||
|
||||
for( var i = start; i <= end; i++ ){
|
||||
tracks[i].selected = true
|
||||
if (start !== false && end !== false){
|
||||
for( var i = start; i <= end; i++ ){
|
||||
tracks[i].selected = true
|
||||
lastSelectedTrack = index
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
@ -180,10 +189,11 @@ class TrackList extends React.Component{
|
||||
tracks[i].selected = false
|
||||
}
|
||||
|
||||
tracks[index].selected = !tracks[index].selected
|
||||
tracks[index].selected = true
|
||||
lastSelectedTrack = index
|
||||
}
|
||||
|
||||
this.setState({ tracks: tracks, lastSelectedTrack: index })
|
||||
this.setState({ tracks: tracks, lastSelectedTrack: lastSelectedTrack })
|
||||
}
|
||||
|
||||
isRightClick(e){
|
||||
|
||||
@ -98,7 +98,7 @@ class Album extends React.Component{
|
||||
<div className="view album-view">
|
||||
<SidebarToggleButton />
|
||||
<div className="intro">
|
||||
<Thumbnail size="large" canZoom images={ this.props.album.images } handleContextMenu={ e => this.handleContextMenu(e) } />
|
||||
<Thumbnail size="large" canZoom images={ this.props.album.images } />
|
||||
<ArtistGrid artists={artists} />
|
||||
|
||||
<div className="actions">
|
||||
|
||||
@ -28,10 +28,14 @@ class LibraryAlbums extends React.Component{
|
||||
if (!this.props.library_albums) this.props.spotifyActions.getLibraryAlbums();
|
||||
}
|
||||
|
||||
handleContextMenu(e,uri){
|
||||
e.preventDefault()
|
||||
var data = { uris: [uri] }
|
||||
this.props.uiActions.showContextMenu( e, data, 'album', 'click' )
|
||||
handleContextMenu(e,item){
|
||||
var data = {
|
||||
e: e,
|
||||
context: 'album',
|
||||
uris: [item.uri],
|
||||
item: item
|
||||
}
|
||||
this.props.uiActions.showContextMenu(data)
|
||||
}
|
||||
|
||||
loadMore(){
|
||||
@ -83,7 +87,7 @@ class LibraryAlbums extends React.Component{
|
||||
return (
|
||||
<section className="list-wrapper">
|
||||
<List
|
||||
handleContextMenu={(e,uri) => this.handleContextMenu(e,uri)}
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
rows={albums}
|
||||
columns={columns}
|
||||
link_prefix={global.baseURL+"album/"} />
|
||||
@ -93,7 +97,7 @@ class LibraryAlbums extends React.Component{
|
||||
return (
|
||||
<section className="grid-wrapper">
|
||||
<AlbumGrid
|
||||
handleContextMenu={(e,uri) => this.handleContextMenu(e,uri)}
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
albums={albums} />
|
||||
</section>
|
||||
)
|
||||
|
||||
@ -21,10 +21,14 @@ class LibraryArtists extends React.Component{
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleContextMenu(e,uri){
|
||||
e.preventDefault()
|
||||
var data = { uris: [uri] }
|
||||
this.props.uiActions.showContextMenu( e, data, 'artist', 'click' )
|
||||
handleContextMenu(e,item){
|
||||
var data = {
|
||||
e: e,
|
||||
context: 'artist',
|
||||
uris: [item.uri],
|
||||
item: item
|
||||
}
|
||||
this.props.uiActions.showContextMenu(data)
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
@ -68,17 +72,18 @@ class LibraryArtists extends React.Component{
|
||||
return (
|
||||
<section className="list-wrapper">
|
||||
<List
|
||||
handleContextMenu={(e,uri) => this.handleContextMenu(e,uri)}
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
rows={artists}
|
||||
columns={columns}
|
||||
link_prefix={global.baseURL+"artist/"} show_source_icon={true} />
|
||||
link_prefix={global.baseURL+"artist/"}
|
||||
show_source_icon={true} />
|
||||
</section>
|
||||
)
|
||||
}else{
|
||||
return (
|
||||
<section className="grid-wrapper">
|
||||
<ArtistGrid
|
||||
handleContextMenu={(e,uri) => this.handleContextMenu(e,uri)}
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
artists={artists} />
|
||||
</section>
|
||||
)
|
||||
|
||||
@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux'
|
||||
import Header from '../../components/Header'
|
||||
import List from '../../components/List'
|
||||
|
||||
import * as uiActions from '../../services/ui/actions'
|
||||
import * as mopidyActions from '../../services/mopidy/actions'
|
||||
import * as spotifyActions from '../../services/spotify/actions'
|
||||
|
||||
@ -26,6 +27,16 @@ class LibraryLocalArtists extends React.Component{
|
||||
}
|
||||
}
|
||||
|
||||
handleContextMenu(e,item){
|
||||
var data = {
|
||||
e: e,
|
||||
context: 'artist',
|
||||
uris: [item.uri],
|
||||
item: item
|
||||
}
|
||||
this.props.uiActions.showContextMenu(data)
|
||||
}
|
||||
|
||||
loadArtists(props = this.props){
|
||||
if( props.mopidy_connected && !props.local_artists ){
|
||||
this.props.mopidyActions.getLibraryArtists();
|
||||
@ -47,7 +58,12 @@ class LibraryLocalArtists extends React.Component{
|
||||
<div className="view library-local-view">
|
||||
<Header icon="music" title="Local artists" />
|
||||
<section className="list-wrapper">
|
||||
<List columns={[{ name: 'name', width: '100'}]} rows={artists} link_prefix={global.baseURL+"artist/"} />
|
||||
<List
|
||||
columns={[{ name: 'name', width: '100'}]}
|
||||
rows={artists}
|
||||
link_prefix={global.baseURL+"artist/"}
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
@ -71,6 +87,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
mopidyActions: bindActionCreators(mopidyActions, dispatch),
|
||||
spotifyActions: bindActionCreators(spotifyActions, dispatch)
|
||||
}
|
||||
|
||||
@ -85,8 +85,10 @@ class LibraryLocalDirectory extends React.Component{
|
||||
<div className="view library-local-view">
|
||||
<Header icon="music" title="Local files" actions={actions} />
|
||||
<section className="list-wrapper">
|
||||
|
||||
<List columns={[{ name: 'name', width: '100'}]} rows={items.folders} link_prefix={global.baseURL+"library/local/directory/"} />
|
||||
<List
|
||||
columns={[{ name: 'name', width: '100'}]}
|
||||
rows={items.folders}
|
||||
link_prefix={global.baseURL+"library/local/directory/"} />
|
||||
<TrackList tracks={items.tracks} noheader />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -21,6 +21,16 @@ class LibraryPlaylists extends React.Component{
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleContextMenu(e,item){
|
||||
var data = {
|
||||
e: e,
|
||||
context: 'playlist',
|
||||
uris: [item.uri],
|
||||
item: item
|
||||
}
|
||||
this.props.uiActions.showContextMenu(data)
|
||||
}
|
||||
|
||||
setSort(value){
|
||||
var reverse = false
|
||||
if( this.props.sort == value ) reverse = !this.props.sort_reverse
|
||||
@ -72,13 +82,20 @@ class LibraryPlaylists extends React.Component{
|
||||
]
|
||||
return (
|
||||
<section className="list-wrapper">
|
||||
<List rows={playlists} columns={columns} link_prefix={global.baseURL+"playlist/"} show_source_icon={true} />
|
||||
<List
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
rows={playlists}
|
||||
columns={columns}
|
||||
link_prefix={global.baseURL+"playlist/"}
|
||||
show_source_icon={true} />
|
||||
</section>
|
||||
)
|
||||
}else{
|
||||
return (
|
||||
<section className="grid-wrapper">
|
||||
<PlaylistGrid playlists={playlists} />
|
||||
<PlaylistGrid
|
||||
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
|
||||
playlists={playlists} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user