From 058d2607e9504d3bc7c13869e60f37a1271a95e4 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Fri, 3 Feb 2017 09:04:47 +1300 Subject: [PATCH] Editing and adding to playlists, then we'll reload it --- src/js/components/List.js | 17 +++++++++++++---- src/js/components/Modal/EditPlaylistModal.js | 2 +- src/js/helpers.js | 8 ++++---- src/js/services/mopidy/middleware.js | 6 +++--- src/js/services/spotify/middleware.js | 1 + src/js/services/ui/middleware.js | 13 ++++++++++--- src/js/views/Playlist.js | 4 +++- src/js/views/library/LibraryPlaylists.js | 16 ++++++++++------ 8 files changed, 45 insertions(+), 22 deletions(-) diff --git a/src/js/components/List.js b/src/js/components/List.js index e33959b2..6f269911 100755 --- a/src/js/components/List.js +++ b/src/js/components/List.js @@ -77,14 +77,23 @@ class List extends React.Component{ { this.props.rows.map( (row, row_index) => { - var className = 'list-item' - if( row.type ) className += ' '+row.type + var class_name = 'list-item' + if( row.type ) class_name += ' '+row.type + + var source_icon = null + if (this.props.show_source_icon){ + if (row.source){ + source_icon = + }else{ + source_icon = + } + } return (
this.handleClick(e, row.uri)} onContextMenu={e => this.handleContextMenu(e,row)} - className={className} + className={class_name} key={row_index}> { this.props.columns.map( (col, col_index) => { @@ -95,7 +104,7 @@ class List extends React.Component{ ) }) } - { this.props.show_source_icon ? : null } + {source_icon}
) }) diff --git a/src/js/components/Modal/EditPlaylistModal.js b/src/js/components/Modal/EditPlaylistModal.js index 766d8375..a54c5da6 100755 --- a/src/js/components/Modal/EditPlaylistModal.js +++ b/src/js/components/Modal/EditPlaylistModal.js @@ -26,7 +26,7 @@ export default class EditPlaylistModal extends React.Component{ savePlaylist(e){ e.preventDefault(); - this.props.uiActions.savePlaylist( this.props.data.uri, this.state.name, this.state.is_public ) + this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.is_public) this.props.uiActions.closeModal() return false; } diff --git a/src/js/helpers.js b/src/js/helpers.js index 38ac6524..86e13b88 100755 --- a/src/js/helpers.js +++ b/src/js/helpers.js @@ -129,13 +129,13 @@ export let flattenTracks = function( tracks ){ * Figure out a URI's source namespace * @param uri = string **/ -export let uriSource = function( uri ){ +export let uriSource = function(uri){ var exploded = uri.split(':'); return exploded[0] } -export let sourceIcon = function( uri ){ - var source = uriSource(uri) +export let sourceIcon = function(uri,source = null){ + if (uri) source = uriSource(uri) switch( source ){ case 'local': case 'm3u': @@ -153,7 +153,7 @@ export let sourceIcon = function( uri ){ * @param element = string, the element we wish to extract * @param uri = string **/ -export let getFromUri = function( element, uri ){ +export let getFromUri = function(element,uri){ var exploded = uri.split(':'); if( element == 'mbid'){ diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index db0654c4..d3c737f0 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -327,6 +327,7 @@ const MopidyMiddleware = (function(){ type: 'playlist', name: response.name, uri: response.uri, + source: 'local', last_modified: response.last_modified, can_edit: (response.uri.startsWith('m3u:')), tracks_total: ( response.tracks ? response.tracks.length : 0 ) @@ -344,7 +345,6 @@ const MopidyMiddleware = (function(){ break; case 'MOPIDY_GET_PLAYLIST': - store.dispatch({ type: 'MOPIDY_PLAYLIST_LOADED', data: false }); instruct( socket, store, 'playlists.lookup', action.data ) .then( response => { var playlist = Object.assign( @@ -352,8 +352,8 @@ const MopidyMiddleware = (function(){ response, { type: 'playlist', - tracks: ( response.tracks ? response.tracks : null ), - tracks_total: ( response.tracks ? response.tracks.length : null ) + tracks: ( response.tracks ? response.tracks : [] ), + tracks_total: ( response.tracks ? response.tracks.length : [] ) } ) diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index 6aca393c..939e43de 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -236,6 +236,7 @@ const SpotifyMiddleware = (function(){ {}, action.playlists[i], { + source: 'spotify', can_edit: (store.getState().spotify.authorized && store.getState().spotify.me && action.playlists[i].owner.id == store.getState().spotify.me.id), tracks_total: action.playlists[i].tracks.total } diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js index 5d636799..fa44b99d 100755 --- a/src/js/services/ui/middleware.js +++ b/src/js/services/ui/middleware.js @@ -2,6 +2,7 @@ import ReactGA from 'react-ga' var uiActions = require('./actions.js') +var mopidyActions = require('../mopidy/actions.js') var spotifyActions = require('../spotify/actions.js') var helpers = require('../../helpers.js') @@ -185,9 +186,15 @@ const UIMiddleware = (function(){ break case 'PLAYLIST_TRACKS_ADDED': - - store.dispatch(uiActions.createNotification('Added '+action.tracks_uris.length+' tracks to playlist')) - + store.dispatch(uiActions.createNotification('Added '+action.tracks_uris.length+' tracks to playlist')) + switch(helpers.uriSource(action.key)){ + case 'spotify': + store.dispatch(spotifyActions.getPlaylist(action.key)) + break + case 'm3u': + if( store.getState().mopidy.connected ) store.dispatch(mopidyActions.getPlaylist(action.key)) + break + } next(action) break diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index 174528b2..fa27463d 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -174,8 +174,10 @@ class Playlist extends React.Component{ **/ const mapStateToProps = (state, ownProps) => { + var uri = ownProps.params.uri + uri = uri.replace(' ','%20') return { - playlist: (state.ui.playlists && typeof(state.ui.playlists[ownProps.params.uri]) !== 'undefined' ? state.ui.playlists[ownProps.params.uri] : false ), + playlist: (state.ui.playlists && typeof(state.ui.playlists[uri]) !== 'undefined' ? state.ui.playlists[uri] : false ), mopidy_connected: state.mopidy.connected, spotify_authorized: state.spotify.authorized, spotify_userid: state.spotify.me.id diff --git a/src/js/views/library/LibraryPlaylists.js b/src/js/views/library/LibraryPlaylists.js index 81aae06b..789a5865 100755 --- a/src/js/views/library/LibraryPlaylists.js +++ b/src/js/views/library/LibraryPlaylists.js @@ -60,24 +60,24 @@ class LibraryPlaylists extends React.Component{ if( this.props.view == 'list' ){ var columns = [ { - width: 30, + width: 50, label: 'Name', name: 'name' }, { - width: 30, + width: 20, label: 'Owner', name: 'owner' }, { width: 10, - label: 'Can edit', - name: 'can_edit' + label: 'Tracks', + name: 'tracks_total' }, { width: 10, - label: 'Tracks', - name: 'tracks_total' + label: 'Can edit', + name: 'can_edit' } ] return ( @@ -130,6 +130,10 @@ class LibraryPlaylists extends React.Component{ { value: 'tracks.total', label: 'Tracks' + }, + { + value: 'source', + label: 'Source' } ]