Moving player position to middleware - no animations, just simple math. Fixes #97

src/js/components/ProgressSlider.js

@@ -10,37 +10,6 @@ class ProgressSlider extends React.Component{
 
 	constructor(props) {
 		super(props);
-
-		this.state = {
-			animating: false
-		}
-	}
-
-	componentDidMount(){
-		var interval_counter = 0
-		setInterval(() => {
-			if( this.props.play_state == 'playing' ){
-
-				// every 10 seconds get real position from Mopidy
-				if( interval_counter % 10 == 0 ){
-					this.updateProgress()
-				}else{
-					var time_position = this.props.time_position
-
-					// only add 600ms every 1000ms as Mopidy's time tracker is a bit shit
-					// TODO: Why does this kill UI?
-					//this.props.mopidyActions.setTimePosition( time_position + 600 )					
-				}
-
-				interval_counter++
-			}
-		}, 1000);
-	}
-
-	updateProgress(){
-		if( this.props.connected && this.props.play_state == 'playing' ){
-			this.props.mopidyActions.getTimePosition()
-		}
 	}
 
 	handleClick(e){

src/js/services/mopidy/middleware.js

@@ -11,7 +11,11 @@ var lastfmActions = require('../lastfm/actions.js')
 const MopidyMiddleware = (function(){ 
 
     // container for the actual Mopidy socket
-    var socket = null;
+    var socket = null
+
+    // play position timer
+    var progress_interval = null
+    var progress_interval_counter = 0
 
     // handle all manner of socket messages
     const handleMessage = (ws, store, type, data) => {
@@ -32,10 +36,32 @@ const MopidyMiddleware = (function(){
                 instruct( ws, store, 'playback.getCurrentTlTrack' );
                 instruct( ws, store, 'playback.getTimePosition' );
                 instruct( ws, store, 'getUriSchemes' );
+
+                // every 1000s update our play position (when playing)
+                progress_interval = setInterval(() => {
+                    if (store.getState().mopidy.play_state == 'playing'){
+
+                        // every 10s get real position from server
+                        if( progress_interval_counter % 10 == 0 ){
+                            store.dispatch(mopidyActions.getTimePosition())
+
+                        // otherwise we just assume to add 1000ms every 1000ms of play time
+                        }else{
+                            store.dispatch(mopidyActions.setTimePosition( store.getState().mopidy.time_position + 1000 ))              
+                        }
+
+                        progress_interval_counter++
+                    }
+                }, 1000);
+
                 break;
 
             case 'state:offline':
                 store.dispatch({ type: 'MOPIDY_DISCONNECTED' });
+
+                // reset our playback interval timer
+                clearInterval(progress_interval)
+                progress_interval_counter = 0
                 break;
 
             case 'event:tracklistChanged':

src/scss/components/_player.scss

@@ -46,10 +46,6 @@
 
 	.slider.horizontal {
 		margin-bottom: 0;
-
-		.progress{
-			@include animate(1s);
-		}
 	}
 
 	.artwork {

src/scss/components/_slider.scss

@@ -6,7 +6,6 @@
 	.track {
 		position: absolute;
 		background: rgba(255,255,255,0.3);
-		@include animate()
 
 		.progress {
 			position: absolute;