diff --git a/src/js/components/ProgressSlider.js b/src/js/components/ProgressSlider.js index f020de1c..b3012537 100755 --- a/src/js/components/ProgressSlider.js +++ b/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){ diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 92da4354..db827df8 100755 --- a/src/js/services/mopidy/middleware.js +++ b/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': diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss index 2bdbba35..36a75187 100755 --- a/src/scss/components/_player.scss +++ b/src/scss/components/_player.scss @@ -46,10 +46,6 @@ .slider.horizontal { margin-bottom: 0; - - .progress{ - @include animate(1s); - } } .artwork { diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss index 259b5ee9..9998a8e1 100755 --- a/src/scss/components/_slider.scss +++ b/src/scss/components/_slider.scss @@ -6,7 +6,6 @@ .track { position: absolute; background: rgba(255,255,255,0.3); - @include animate() .progress { position: absolute;