Notifications for events

This commit is contained in:
James Barnsley
2016-12-14 08:29:24 +13:00
parent 2d193ca204
commit e599692c3a
6 changed files with 39 additions and 34 deletions

View File

@ -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 (
<button className="destructive" onClick={() => this.props.actions.authorizationRevoked()}>Log out</button>
<button className="destructive" onClick={() => this.props.spotifyActions.authorizationRevoked()}>Log out</button>
);
}else{
return (
@ -92,7 +94,7 @@ class SpotifyAuthenticationFrame extends React.Component{
);
}else{
return (
<button onClick={() => this.props.actions.refreshingToken()}>Refresh token</button>
<button onClick={() => this.props.spotifyActions.refreshingToken()}>Refresh token</button>
);
}
}
@ -119,7 +121,8 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
uiActions: bindActionCreators(uiActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}

View File

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

View File

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

View File

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

View File

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

View File

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