Context menu on local material; Passes full item object; Shift + click when nothing selected

This commit is contained in:
James Barnsley
2017-02-02 09:06:15 +13:00
parent 902b9cf58c
commit c0633ad409
9 changed files with 86 additions and 34 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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