secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Making context menu more generic for other assets; Copy to clipboard

Browse Source
This commit is contained in:
James Barnsley
2017-01-27 09:55:19 +13:00
parent 598dd9f0b0
commit 60f49d4611
6 changed files with 65 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/js/components/ContextMenu.js
View File

@ -41,63 +41,59 @@ class ContextMenu extends React.Component{
}
playQueueItem(){
var selectedTracks = this.props.context_menu.data.selected_tracks;
this.props.mopidyActions.changeTrack( selectedTracks[0].tlid );
var tracks = this.props.context_menu.data.items;
this.props.mopidyActions.changeTrack( tracks[0].tlid );
this.props.uiActions.hideContextMenu();
}
removeFromQueue(){
var selected_tracks = this.props.context_menu.data.selected_tracks;
var selected_tracks_tlids = [];
for( var i = 0; i < selected_tracks.length; i++ ){
selected_tracks_tlids.push( selected_tracks[i].tlid );
var tracks = this.props.context_menu.data.items;
var tracks_tlids = [];
for( var i = 0; i < tracks.length; i++ ){
tracks_tlids.push( tracks[i].tlid );
}
this.props.mopidyActions.removeTracks( selected_tracks_tlids );
this.props.mopidyActions.removeTracks( tracks_tlids );
this.props.uiActions.hideContextMenu();
}
playItems(){
var selected_tracks_uris = helpers.asURIs(this.props.context_menu.data.selected_tracks)
this.props.mopidyActions.playURIs(selected_tracks_uris);
playURIs(){
this.props.mopidyActions.playURIs(this.props.context_menu.data.uris);
this.props.uiActions.hideContextMenu();
}
playItemsNext(){
var selected_tracks_uris = helpers.asURIs(this.props.context_menu.data.selected_tracks)
this.props.mopidyActions.enqueueTracksNext(selected_tracks_uris);
playURIsNext(){
this.props.mopidyActions.enqueueURIsNext(this.props.context_menu.data.uris);
this.props.uiActions.hideContextMenu();
}
addToPlaylist(){
var selected_tracks_uris = helpers.asURIs(this.props.context_menu.data.selected_tracks)
this.props.uiActions.openModal( 'add_to_playlist', { tracks_uris: selected_tracks_uris } )
this.props.uiActions.openModal( 'add_to_playlist', { tracks_uris: this.props.context_menu.data.uris } )
this.props.uiActions.hideContextMenu();
}
addToQueue(){
var selected_tracks_uris = helpers.asURIs(this.props.context_menu.data.selected_tracks)
this.props.mopidyActions.enqueueTracks(selected_tracks_uris);
this.props.uiActions.hideContextMenu();
this.props.mopidyActions.enqueueURIs(this.props.context_menu.data.uris)
this.props.uiActions.hideContextMenu()
}
addTracksToPlaylist( playlist_uri ){
var selected_tracks_uris = helpers.asURIs(this.props.context_menu.data.selected_tracks)
this.props.uiActions.addTracksToPlaylist( playlist_uri, selected_tracks_uris )
this.props.uiActions.addTracksToPlaylist( playlist_uri, this.props.context_menu.data.uris )
this.props.uiActions.hideContextMenu();
}
removeFromPlaylist(){
this.props.uiActions.removeTracksFromPlaylist( this.props.playlist.uri, this.props.context_menu.data.selected_tracks_indexes )
this.props.uiActions.removeTracksFromPlaylist( this.props.playlist.uri, this.props.context_menu.data.indexes )
this.props.uiActions.hideContextMenu();
}
copyURIs(){
var uris = '';
for( var i = 0; i < this.props.context_menu.data.selected_tracks.length; i++ ){
if( i > 0 ) uris += ','
uris += this.props.context_menu.data.selected_tracks[i].uri
}
console.log('Yet to be implemented', uris)
copyURIs(e){
var temp = $("<input>");
$("body").append(temp);
temp.val(this.props.context_menu.data.uris.join(',')).select();
document.execCommand("copy");
temp.remove();
this.props.uiActions.createNotification( "Copied "+this.props.context_menu.data.uris.length+" URIs" )
this.props.uiActions.hideContextMenu()
}
@ -144,8 +140,8 @@ class ContextMenu extends React.Component{
case 'editable-playlist':
var items = [
{ handleClick: 'playItems', label: 'Play', icon: 'play' },
{ handleClick: 'playItemsNext', label: 'Play next', icon: 'play' },
{ handleClick: 'playURIs', label: 'Play', icon: 'play' },
{ handleClick: 'playURIsNext', label: 'Play next', icon: 'play' },
{ handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' },
{ handleClick: 'addToPlaylist', label: 'Add to playlist', icon: 'plus', playlists: true },
{ handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' },
@ -153,10 +149,19 @@ class ContextMenu extends React.Component{
]
break
case 'album':
var items = [
{ handleClick: 'playURIs', label: 'Play', icon: 'play' },
{ handleClick: 'playURIsNext', label: 'Play next', icon: 'play' },
{ handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' },
{ handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' }
]
break
default:
var items = [
{ handleClick: 'playItems', label: 'Play', icon: 'play' },
{ handleClick: 'playItemsNext', label: 'Play next', icon: 'play' },
{ handleClick: 'playURIs', label: 'Play', icon: 'play' },
{ handleClick: 'playURIsNext', label: 'Play next', icon: 'play' },
{ handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' },
{ handleClick: 'addToPlaylist', label: 'Add to playlist', icon: 'plus', playlists: true },
{ handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' }

9
src/js/components/Thumbnail.js
View File

@ -39,6 +39,13 @@ class Thumbnail extends React.Component{
return false
}
handleContextMenu(e){
if (this.props.handleContextMenu){
e.preventDefault()
this.props.handleContextMenu(e)
}
}
mapImageSizes( props = this.props ){
// no images
@ -75,7 +82,7 @@ class Thumbnail extends React.Component{
}
return (
<div className={class_name}>
<div className={class_name} onContextMenu={ e => this.handleContextMenu(e) }>
<div className="image" style={style}></div>
{zoom_icon}
</div>

11
src/js/components/TrackList.js
View File

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import Track from './Track'
import * as helpers from '../helpers'
import * as mopidyActions from '../services/mopidy/actions'
import * as uiActions from '../services/ui/actions'
@ -78,8 +79,9 @@ class TrackList extends React.Component{
var selected_tracks = this.selectedTracks()
if( selected_tracks.length > 0 ){
var data = {
selected_tracks: selected_tracks,
selected_tracks_indexes: this.tracksIndexes( selected_tracks )
items: selected_tracks,
uris: helpers.asURIs(selected_tracks),
indexes: this.tracksIndexes(selected_tracks)
}
this.props.uiActions.showContextMenu( e, data, this.props.context, 'touch' )
}else{
@ -133,8 +135,9 @@ class TrackList extends React.Component{
handleContextMenu(e, index){
var selected_tracks = this.selectedTracks()
var data = {
selected_tracks: selected_tracks,
selected_tracks_indexes: this.tracksIndexes( selected_tracks )
items: selected_tracks,
uris: helpers.asURIs(selected_tracks),
indexes: this.tracksIndexes(selected_tracks)
}
this.props.uiActions.showContextMenu( e, data, this.props.context, 'click' )
}

6
src/js/services/mopidy/actions.js
View File

@ -56,15 +56,15 @@ export function playURIs( uris ){
}
}
export function enqueueTracksNext( uris ){
export function enqueueURIsNext( uris ){
if( typeof(uris) !== 'object' ) uris = [uris]
return {
type: 'MOPIDY_ENQUEUE_TRACKS_NEXT',
type: 'MOPIDY_ENQUEUE_URIS_NEXT',
uris: uris
}
}
export function enqueueTracks( uris, at_position = false ){
export function enqueueURIs( uris, at_position = false ){
if( typeof(uris) !== 'object' ) uris = [uris];
var value = { uris: uris };
if( at_position ) value.at_position = at_position;

2
src/js/services/mopidy/middleware.js
View File

@ -229,7 +229,7 @@ const MopidyMiddleware = (function(){
store.dispatch({ type: 'MOPIDY_URISCHEMES_FILTERED', data: uri_schemes });
break;
case 'MOPIDY_ENQUEUE_TRACKS_NEXT':
case 'MOPIDY_ENQUEUE_URIS_NEXT':
var current_track = store.getState().ui.current_track
var current_tracklist = store.getState().ui.current_tracklist

10
src/js/views/Album.js
View File

@ -15,6 +15,7 @@ import LazyLoadListener from '../components/LazyLoadListener'
import SidebarToggleButton from '../components/SidebarToggleButton'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
@ -28,6 +29,12 @@ class Album extends React.Component{
this.loadAlbum()
}
handleContextMenu(e){
e.preventDefault()
var data = { uris: [this.props.params.uri] }
this.props.uiActions.showContextMenu( e, data, 'album', 'click' )
}
componentWillReceiveProps( nextProps ){
// if our URI has changed, fetch new album
@ -91,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 } />
<Thumbnail size="large" canZoom images={ this.props.album.images } handleContextMenu={ e => this.handleContextMenu(e) } />
<ArtistGrid artists={artists} />
<div className="actions">
@ -145,6 +152,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}