diff --git a/src/js/components/DebugInfo.js b/src/js/components/DebugInfo.js
index b4d965fc..1716ff51 100755
--- a/src/js/components/DebugInfo.js
+++ b/src/js/components/DebugInfo.js
@@ -74,12 +74,15 @@ class DebugInfo extends React.Component{
Notifications: {this.props.ui.notifications ? Object.keys(this.props.ui.notifications).length : '0'}
+
+ Processes: {this.props.ui.processes ? Object.keys(this.props.ui.processes).length : '0'}
+
_testMode: {window._testMode ? 'on' : 'off'}
- Touch: {helpers.isTouchDevice() ? 'yes' : 'no'}
+ Touch: {helpers.isTouchDevice() ? 'on' : 'off'}
{this.renderLoadQueue()}
diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js
index 4b01bf3f..27e1666b 100755
--- a/src/js/components/Notifications.js
+++ b/src/js/components/Notifications.js
@@ -21,23 +21,23 @@ export default class Notifications extends React.Component{
switch (notification.type){
case 'shortcut':
return (
-
+
)
- case 'loading':
+ case 'process':
return (
-
-
this.props.uiActions.cancelLoading(notification.id) } />
+
+ this.props.uiActions.cancelProcess(notification.key) } />
{ notification.content }
)
default:
return (
-
-
this.props.uiActions.removeNotification(notification.id) } />
+
+ this.props.uiActions.removeNotification(notification.key) } />
{ notification.content }
)
diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js
index 8d7ea6ec..f8567f74 100755
--- a/src/js/services/mopidy/middleware.js
+++ b/src/js/services/mopidy/middleware.js
@@ -237,7 +237,13 @@ const MopidyMiddleware = (function(){
}
}
- let process_batch = function(){
+ let process_batch = function(){
+
+ // process is not active, so abort
+ if (!store.getState().ui.processes || !store.getState().ui.processes[action.uri]){
+ return false
+ }
+
store.dispatch(uiActions.createNotification('Adding '+remaining_uris.length+' URI(s)', 'loading', action.type))
var params = {uris: remaining_uris.splice(0,5)}
@@ -274,11 +280,13 @@ const MopidyMiddleware = (function(){
// all done
} else {
store.dispatch(uiActions.removeNotification(action.type))
+ store.dispatch(uiActions.stopProcess(action.type))
}
})
}
// start processing
+ store.dispatch(uiActions.startProcess(action.type))
process_batch()
break
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index 7ab3ff68..3a8236b1 100755
--- a/src/js/services/ui/actions.js
+++ b/src/js/services/ui/actions.js
@@ -224,28 +224,21 @@ export function createBrowserNotification( data ){
}
}
-export function createNotification(content, type = 'default', id = helpers.generateGuid()){
+export function createNotification(content, type = 'default', key = helpers.generateGuid()){
return {
type: 'CREATE_NOTIFICATION',
notification: {
- id: id,
+ key: key,
type: type,
content: content
}
}
}
-export function cancelLoading(id){
- return {
- type: 'CANCEL_LOADING_'+id,
- id: id
- }
-}
-
-export function removeNotification(id){
+export function removeNotification(key){
return {
type: 'REMOVE_NOTIFICATION',
- id: id
+ key: key
}
}
@@ -268,3 +261,24 @@ export function stopLoading(key){
key: key
}
}
+
+export function startProcess(key){
+ return {
+ type: 'START_PROCESS',
+ key: key
+ }
+}
+
+export function cancelProcess(key){
+ return {
+ type: 'CANCEL_PROCESS',
+ key: key
+ }
+}
+
+export function stopProcess(key){
+ return {
+ type: 'STOP_PROCESS',
+ key: key
+ }
+}
diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js
index 2a22f600..d9f05afb 100755
--- a/src/js/services/ui/middleware.js
+++ b/src/js/services/ui/middleware.js
@@ -269,10 +269,10 @@ const UIMiddleware = (function(){
case 'CREATE_NOTIFICATION':
// start a timeout to remove this (non loading) notification
- if (action.notification.type != 'loading'){
+ if (action.notification.type != 'process'){
var timeout = setTimeout(
function(){
- store.dispatch(uiActions.removeNotification(action.notification.id))
+ store.dispatch(uiActions.removeNotification(action.notification.key))
},
(action.notification.type == 'shortcut' ? 1000 : 3000)
)
diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js
index d8a8a783..42c29a1d 100755
--- a/src/js/services/ui/reducer.js
+++ b/src/js/services/ui/reducer.js
@@ -711,16 +711,16 @@ export default function reducer(ui = {}, action){
case 'CREATE_NOTIFICATION':
var notifications = [...ui.notifications, action.notification]
- notifications = helpers.mergeDuplicates(notifications,'id')
+ notifications = helpers.mergeDuplicates(notifications,'key')
return Object.assign({}, ui, { notifications: notifications })
case 'REMOVE_NOTIFICATION':
var notifications = Object.assign([], ui.notifications)
- function getByID( notification ){
- return notification.id === action.id
+ function getByKey( notification ){
+ return notification.key === action.key
}
- var index = notifications.findIndex(getByID)
+ var index = notifications.findIndex(getByKey)
if( index > -1 ) notifications.splice(index, 1)
return Object.assign({}, ui, { notifications: notifications })
@@ -728,7 +728,7 @@ export default function reducer(ui = {}, action){
/**
- * Loader
+ * Loading and processes
**/
case 'START_LOADING':
@@ -743,6 +743,18 @@ export default function reducer(ui = {}, action){
}
return Object.assign({}, ui, {load_queue: load_queue})
+ case 'START_PROCESS':
+ var processes = Object.assign({}, (ui.processes ? ui.processes : []))
+ processes[action.key] = 'active'
+ return Object.assign({}, ui, {processes: processes})
+
+ case 'STOP_PROCESS':
+ var processes = Object.assign({}, (ui.processes ? ui.processes : {}))
+ if (processes[action.key]){
+ delete processes[action.key]
+ }
+ return Object.assign({}, ui, {processes: processes})
+
default:
return ui
diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js
index 3050ea7a..6b716691 100755
--- a/src/js/views/Debug.js
+++ b/src/js/views/Debug.js
@@ -104,7 +104,7 @@ class Debug extends React.Component{
diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss
index da2ee27e..12d6d206 100755
--- a/src/scss/components/_notifications.scss
+++ b/src/scss/components/_notifications.scss
@@ -44,7 +44,7 @@
background: $red;
}
- &.loading {
+ &.process {
position: relative;
padding-right: 18px;