diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js
index 8aafbff6..d3358b78 100755
--- a/src/js/components/SpotifyAuthenticationFrame.js
+++ b/src/js/components/SpotifyAuthenticationFrame.js
@@ -7,7 +7,8 @@ import { createStore, bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import Thumbnail from './Thumbnail'
-import * as actions from '../services/spotify/actions'
+import * as uiActions from '../services/ui/actions'
+import * as spotifyActions from '../services/spotify/actions'
class SpotifyAuthenticationFrame extends React.Component{
@@ -39,8 +40,8 @@ class SpotifyAuthenticationFrame extends React.Component{
if( !/^https?:\/\/jamesbarnsley\.co\.nz/.test(event.origin) ) return false;
var data = JSON.parse(event.data);
- self.props.actions.authorizationGranted( data );
- self.props.actions.getMe();
+ self.props.spotifyActions.authorizationGranted( data );
+ self.props.spotifyActions.getMe();
// and turn off our authorizing switch
self.setState({
@@ -57,6 +58,7 @@ class SpotifyAuthenticationFrame extends React.Component{
frameUrl: '//jamesbarnsley.co.nz/auth.php?action=authorize&app='+location.protocol+'//'+window.location.host,
authorizing: true
})
+ this.props.uiActions.createNotification('No popup? Your browse may have blocked it...')
}
renderAuthorizeButton(){
@@ -70,7 +72,7 @@ class SpotifyAuthenticationFrame extends React.Component{
);
}else if( this.props.authorized ){
return (
-
+
);
}else{
return (
@@ -92,7 +94,7 @@ class SpotifyAuthenticationFrame extends React.Component{
);
}else{
return (
-
+
);
}
}
@@ -119,7 +121,8 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
- actions: bindActionCreators(actions, dispatch)
+ uiActions: bindActionCreators(uiActions, dispatch),
+ spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js
index 17bbf5b2..9900d3bd 100755
--- a/src/js/services/spotify/actions.js
+++ b/src/js/services/spotify/actions.js
@@ -160,10 +160,6 @@ export function connect(){
* Handle authorization process
**/
-export function startAuthorization(){
- return { type: 'SPOTIFY_START_AUTHORIZATION' }
-}
-
export function authorizationGranted( data ){
data.token_expiry = new Date().getTime() + data.expires_in;
return { type: 'SPOTIFY_AUTHORIZATION_GRANTED', data: data }
diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js
index f0186925..26857254 100755
--- a/src/js/services/spotify/middleware.js
+++ b/src/js/services/spotify/middleware.js
@@ -1,6 +1,7 @@
-var actions = require('./actions.js')
+var spotifyActions = require('./actions.js')
+var uiActions = require('../ui/actions.js')
const SpotifyMiddleware = (function(){
@@ -13,17 +14,18 @@ const SpotifyMiddleware = (function(){
switch(action.type){
case 'SPOTIFY_CONNECT':
- store.dispatch( actions.getMe() )
-
+ store.dispatch( spotifyActions.getMe() )
+ break
+
case 'SPOTIFY_CREATE_PLAYLIST':
var playlist = state.ui.playlist
if( !store.getState().spotify.authorized ){
- alert('Must be logged in to Spotify to do this')
+ store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
return
}
- store.dispatch( actions.createPlaylist( action.name, action.is_private ))
+ store.dispatch( spotifyActions.createPlaylist( action.name, action.is_private ))
break
@@ -31,44 +33,44 @@ const SpotifyMiddleware = (function(){
var playlist = state.ui.playlist
if( !store.getState().spotify.authorized ){
- alert('Must be logged in to Spotify to do this')
+ store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
return
}
if( !store.getState().spotify.me || store.getState().spotify.me.id != playlist.owner.id ){
- alert('You can only modify playlists you own')
+ store.dispatch( uiActions.createNotification( "You can't edit a playlist you don't own", 'bad' ) )
return
}
- store.dispatch( actions.deleteTracksFromPlaylist( playlist.uri, playlist.snapshot_id, action.tracks_indexes ))
+ store.dispatch( spotifyActions.deleteTracksFromPlaylist( playlist.uri, playlist.snapshot_id, action.tracks_indexes ))
break
case 'SPOTIFY_ADD_PLAYLIST_TRACKS':
if( !store.getState().spotify.authorized ){
- alert('Must be logged in to Spotify to do this')
+ store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
return
}
- store.dispatch( actions.addTracksToPlaylist( action.playlist_uri, action.tracks_uris ))
+ store.dispatch( spotifyActions.addTracksToPlaylist( action.playlist_uri, action.tracks_uris ))
break
case 'SPOTIFY_REORDER_PLAYLIST_TRACKS':
if( !store.getState().spotify.authorized ){
- alert('Must be logged in to Spotify to do this')
+ store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
return
}
- store.dispatch( actions.reorderPlaylistTracks( action.uri, action.range_start, action.range_length, action.insert_before, action.snapshot_id ))
+ store.dispatch( spotifyActions.reorderPlaylistTracks( action.uri, action.range_start, action.range_length, action.insert_before, action.snapshot_id ))
break
case 'SPOTIFY_SAVE_PLAYLIST':
if( !store.getState().spotify.authorized ){
- alert('Must be logged in to Spotify to do this')
+ store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) )
return
}
- store.dispatch( actions.savePlaylist( action.uri, action.name, action.is_public ))
+ store.dispatch( spotifyActions.savePlaylist( action.uri, action.name, action.is_public ))
break
// when our mopidy server current track changes
@@ -79,7 +81,7 @@ const SpotifyMiddleware = (function(){
// if the current track is a spotify track
if( action.data && action.data.track.uri.substring(0,14) == 'spotify:track:' ){
- store.dispatch( actions.getTrack( action.data.track.uri ) )
+ store.dispatch( spotifyActions.getTrack( action.data.track.uri ) )
}
// This action is irrelevant to us, pass it on to the next middleware
diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js
index f48b801e..7f02f5f4 100755
--- a/src/js/services/ui/middleware.js
+++ b/src/js/services/ui/middleware.js
@@ -1,6 +1,6 @@
-var actions = require('./actions.js')
+var uiActions = require('./actions.js')
var spotifyActions = require('../spotify/actions.js')
var helpers = require('../../helpers.js')
@@ -18,7 +18,7 @@ const UIMiddleware = (function(){
// start a timeout to remove this notification
var timeout = setTimeout(
function(){
- store.dispatch(actions.removeNotification(action.notification.id))
+ store.dispatch(uiActions.removeNotification(action.notification.id))
},
3000
)
@@ -27,6 +27,14 @@ const UIMiddleware = (function(){
next(action)
break
+ case 'PLAYLIST_TRACKS_ADDED':
+
+ store.dispatch(uiActions.createNotification('Added '+action.tracks_uris.length+' tracks to playlist'))
+
+ // we don't want to stop things happening as usual
+ next(action)
+ break
+
// This action is irrelevant to us, pass it on to the next middleware
default:
return next(action)
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index 631eda1f..b8400907 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -76,11 +76,7 @@ class Playlist extends React.Component{
}
reorderTracks( indexes, index ){
- if( this.isEditable() ){
- this.props.uiActions.reorderPlaylistTracks( this.props.playlist.uri, indexes, index, this.props.playlist.snapshot_id )
- }else{
- this.props.uiActions.createNotification( "You can't edit a playlist you don't own!", 'bad' )
- }
+ this.props.uiActions.reorderPlaylistTracks( this.props.playlist.uri, indexes, index, this.props.playlist.snapshot_id )
}
removeTracks( tracks_indexes ){
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index d584d7b1..1b0fdcd0 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -28,7 +28,7 @@
}
.content {
- padding: 100px;
+ padding: 100px 25%;
margin: 0 auto;
width: 50%;
color: #FFFFFF;
@@ -113,7 +113,7 @@
@include responsive( $bp_medium ){
.content {
- padding: 50px;
+ padding: 50px 10%;
width: 80%;
.list {