player-slider: bug fixes

mojs · Apr 28, 2016 · 7a5f0aa · 7a5f0aa
1 parent e2902a7
commit 7a5f0aa
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 84 deletions.
diff --git a/build/mojs-player.js b/build/mojs-player.js
@@ -1,9 +1,3 @@
-/*! 
-	:: MojsPlayer :: Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences.
-	Oleg Solomka @LegoMushroom 2016 MIT
-	0.40.1 
-*/
-
 /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -428,22 +422,48 @@
 
 	  MojsPlayer.prototype._onSysProgress = function _onSysProgress(p) {
 	    this.playerSlider.setTrackProgress(p);
+
 	    var rightBound = this._props.isBounds ? this._props.rightBound : 1,
 	        leftBound = this._props.isBounds ? this._props.leftBound : -1;
 
-	    if (p < leftBound && p !== 0) {
-	      this._sysTween.pause();
-	      this._defer(this._play);
+	    // since js is really bed in numbers precision,
+	    // if we set a progress in the `_play` method it returns slighly
+	    // different when piped thru tween, so add `0.01` gap to soften that
+	    if (p < leftBound - 0.01 && p !== 0) {
+	      this._sysTween.reset();
+	      requestAnimationFrame(this._play.bind(this));
 	    }
+
 	    if (p >= rightBound) {
-	      this._sysTween.pause();
+	      this._sysTween.reset();
 	      if (this._props.isRepeat) {
-	        this._defer(this._play);
+	        requestAnimationFrame(this._play.bind(this));
 	      } else {
 	        this._props.isPlaying = false;
 	      }
 	    }
 	  };
+	  /*
+	    Method to play system tween from progress.
+	    @private
+	  */
+
+
+	  MojsPlayer.prototype._play = function _play() {
+	    var p = this._props,
+	        leftBound = p.isBounds ? p.leftBound : p.progress,
+	        progress = p.progress >= this._getBound('right') ? leftBound : p.progress;
+
+	    if (progress === 1) {
+	      progress = p.isBounds ? p.leftBound : 0;
+	    };
+	    if (progress !== 0) {
+	      this._sysTween.setProgress(progress);
+	    };
+
+	    this._sysTween.play();
+	  };
+
 	  /*
 	    Method to set play button state.
 	    @private
@@ -457,7 +477,7 @@
 	    clearTimeout(this._playTimeout);
 	    this._playTimeout = setTimeout(function () {
 	      _this4.playButton && _this4.playButton[method](false);
-	    }, 2);
+	    }, 20);
 	  };
 	  /*
 	    Method that is invoked on system tween completion.
@@ -466,20 +486,22 @@
 	  */
 
 
-	  MojsPlayer.prototype._onSysTweenComplete = function _onSysTweenComplete(isForward) {
-	    if (this._props.isPlaying && isForward) {
-	      if (this._props.isRepeat) {
-	        this._sysTween.stop();
-	        this._play();
-	      }
-	    }
-	  };
+	  MojsPlayer.prototype._onSysTweenComplete = function _onSysTweenComplete(isForward) {}
+	  // console.log(' complete ', this._props.isPlaying, isForward, this._props.isRepeat);
+	  // if ( this._props.isPlaying && isForward ) {
+	  //   if ( this._props.isRepeat ) {
+	  //     console.log('reset 2')
+	  //     // this._sysTween.reset();
+	  //     // this._play();
+	  //   }
+	  // }
+
 	  /*
 	    Method that is invoked play button state change.
 	    @private
 	    @param {Boolean} Repeat button state.
 	  */
-
+	  ;
 
 	  MojsPlayer.prototype._onPlayStateChange = function _onPlayStateChange(isPlay) {
 	    this._props.isPlaying = isPlay;
@@ -505,19 +527,6 @@
 	      this.el.classList.add(CLASSES['is-transition']);
 	    }
 	  };
-	  /*
-	    Method to play system tween from progress.
-	    @private
-	  */
-
-
-	  MojsPlayer.prototype._play = function _play() {
-	    var p = this._props,
-	        leftBound = p.isBounds ? p.leftBound : p.progress,
-	        progress = p.progress >= this._getBound('right') ? leftBound : p.progress;
-
-	    this._sysTween.setProgress(progress).setSpeed(p.speed).play();
-	  };
 	  /*
 	    Method that is invoked on stop button tap.
 	    @private
@@ -526,8 +535,7 @@
 
 	  MojsPlayer.prototype._onStop = function _onStop() {
 	    this._props.isPlaying = false;
-	    // this.playButton.off();
-	    this._sysTween.stop();
+	    this._sysTween.reset();
 	  };
 	  /*
 	    Method that is invoked on repeat switch state change.
@@ -2856,7 +2864,9 @@
 	      isBound: true,
 	      parent: this.el,
 	      isRipple: false,
-	      onProgress: this._onLeftBoundProgress.bind(this)
+	      onProgress: this._onLeftBoundProgress.bind(this),
+	      onSeekStart: p.onSeekStart,
+	      onSeekEnd: p.onSeekEnd
 	    });
 
 	    this.track = new _slider2.default({
@@ -2871,7 +2881,9 @@
 	      parent: this.el,
 	      isRipple: false,
 	      isInversed: true,
-	      onProgress: this._onRightBoundProgress.bind(this)
+	      onProgress: this._onRightBoundProgress.bind(this),
+	      onSeekStart: p.onSeekStart,
+	      onSeekEnd: p.onSeekEnd
 	    });
 
 	    this.rightBound.setProgress(p.rightProgress);
@@ -2901,6 +2913,7 @@
 	    if (!this._props.isBounds) {
 	      return;
 	    }
+	    this._props.leftProgress = p;
 	    this.track.setMinBound(p);
 	    this.rightBound.setMinBound(p);
 	    this._callIfFunction(this._props.onLeftProgress, p);
@@ -2916,6 +2929,7 @@
 	    if (!this._props.isBounds) {
 	      return;
 	    }
+	    this._props.rightProgress = p;
 	    this.track.setMaxBound(p);
 	    this.leftBound.setMaxBound(p);
 	    this._callIfFunction(this._props.onRightProgress, p);
@@ -6788,7 +6802,7 @@
 	        y = e.offsetY != null ? e.offsetY : e.layerY;
 
 	    this.isRelease = false;
-	    this.transit.tune({ x: x, y: y }).replay();
+	    this.transit.tune({ x: x, y: y }).stop().replay();
 	  };
 	  /*
 	    Method that should be run on touch serface cancel.

diff --git a/build/mojs-player.min.js b/build/mojs-player.min.js
diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
     <br />
     <br />
 
-    <script src="node_modules/mo-js/build/mo.min.js"></script>
+    <script src="node_modules/mo-js/build/mo.js"></script>
     <script src="build/mojs-player.js"></script>
 
     <script>
@@ -50,6 +50,6 @@
         // isSaveState: false
       });
     </script>
-    
+
   </body>
 </html>
diff --git a/js/components/player-slider.babel.js b/js/components/player-slider.babel.js
@@ -101,7 +101,9 @@ class PlayerSlider extends Module {
       isBound:        true,
       parent:         this.el,
       isRipple:       false,
-      onProgress:     this._onLeftBoundProgress.bind(this)
+      onProgress:     this._onLeftBoundProgress.bind(this),
+      onSeekStart:    p.onSeekStart,
+      onSeekEnd:      p.onSeekEnd
     });
 
     this.track = new Slider({
@@ -116,7 +118,9 @@ class PlayerSlider extends Module {
       parent:         this.el,
       isRipple:       false,
       isInversed:     true,
-      onProgress:     this._onRightBoundProgress.bind(this)
+      onProgress:     this._onRightBoundProgress.bind(this),
+      onSeekStart:    p.onSeekStart,
+      onSeekEnd:      p.onSeekEnd
     });
 
     this.rightBound.setProgress( p.rightProgress );
@@ -141,6 +145,7 @@ class PlayerSlider extends Module {
   */
   _onLeftBoundProgress ( p ) {
     if ( !this._props.isBounds ) { return; }
+    this._props.leftProgress = p;
     this.track.setMinBound( p );
     this.rightBound.setMinBound( p );
     this._callIfFunction( this._props.onLeftProgress, p );
@@ -152,6 +157,7 @@ class PlayerSlider extends Module {
   */
   _onRightBoundProgress ( p ) {
     if ( !this._props.isBounds ) { return; }
+    this._props.rightProgress = p;
     this.track.setMaxBound( p );
     this.leftBound.setMaxBound( p );
     this._callIfFunction( this._props.onRightProgress, p );

diff --git a/js/components/ripple.babel.js b/js/components/ripple.babel.js
@@ -78,7 +78,7 @@ class Ripple extends Module {
         y = ( e.offsetY != null ) ? e.offsetY : e.layerY;
 
     this.isRelease = false;
-    this.transit.tune({ x: x, y: y }).replay();
+    this.transit.tune({ x: x, y: y }).stop().replay();
   }
   /*
     Method that should be run on touch serface cancel.

diff --git a/js/mojs-player.babel.js b/js/mojs-player.babel.js
@@ -255,7 +255,7 @@ class MojsPlayer extends Module {
       onComplete:      this._onSysTweenComplete.bind( this ),
       onPlaybackStop:  () => { this._setPlayState( 'off' ); },
       onPlaybackPause: () => { this._setPlayState( 'off' ); },
-      onPlaybackStart: () => { this._setPlayState( 'on' ) }
+      onPlaybackStart: () => { this._setPlayState( 'on' ); }
     });
   }
   /*
@@ -265,20 +265,41 @@ class MojsPlayer extends Module {
   */
   _onSysProgress ( p ) {
     this.playerSlider.setTrackProgress( p );
+
     let rightBound = ( this._props.isBounds ) ? this._props.rightBound : 1,
         leftBound  = ( this._props.isBounds ) ? this._props.leftBound : -1;
 
-    if ( p < leftBound && p !== 0 ) {
-      this._sysTween.pause();
-      this._defer( this._play );
+    // since js is really bed in numbers precision,
+    // if we set a progress in the `_play` method it returns slighly
+    // different when piped thru tween, so add `0.01` gap to soften that
+    if ( p < leftBound - 0.01 && p !== 0 ) {
+      this._sysTween.reset();
+      requestAnimationFrame(this._play.bind(this));
     }
+
     if ( p >= rightBound ) {
-      this._sysTween.pause();
+      this._sysTween.reset();
       if ( this._props.isRepeat ) {
-        this._defer( this._play );
+        requestAnimationFrame(this._play.bind(this));
       } else { this._props.isPlaying = false; }
     }
   }
+  /*
+    Method to play system tween from progress.
+    @private
+  */
+  _play () {
+    let p         = this._props,
+        leftBound = ( p.isBounds ) ? p.leftBound : p.progress,
+        progress  = ( p.progress >= this._getBound( 'right' ) )
+          ? leftBound : p.progress;
+
+    if (progress === 1) { progress = ( p.isBounds ) ? p.leftBound : 0 };
+    if ( progress !== 0 ) { this._sysTween.setProgress( progress ); };
+
+    this._sysTween.play();
+  }
+
   /*
     Method to set play button state.
     @private
@@ -288,20 +309,22 @@ class MojsPlayer extends Module {
     clearTimeout( this._playTimeout );
     this._playTimeout = setTimeout( () => {
       this.playButton && this.playButton[ method ]( false );
-    }, 2);
+    }, 20);
   }
   /*
     Method that is invoked on system tween completion.
     @private
     @param {Boolean} If forward direction.
   */
   _onSysTweenComplete ( isForward ) {
-    if ( this._props.isPlaying && isForward ) {
-      if ( this._props.isRepeat ) {
-        this._sysTween.stop();
-        this._play();
-      }
-    }
+    // console.log(' complete ', this._props.isPlaying, isForward, this._props.isRepeat);
+    // if ( this._props.isPlaying && isForward ) {
+    //   if ( this._props.isRepeat ) {
+    //     console.log('reset 2')
+    //     // this._sysTween.reset();
+    //     // this._play();
+    //   }
+    // }
   }
   /*
     Method that is invoked play button state change.
@@ -326,29 +349,13 @@ class MojsPlayer extends Module {
       this.el.classList.add( CLASSES[ 'is-transition' ] );
     }
   }
-  /*
-    Method to play system tween from progress.
-    @private
-  */
-  _play () {
-    let p         = this._props,
-        leftBound = ( p.isBounds ) ? p.leftBound : p.progress,
-        progress  = ( p.progress >= this._getBound( 'right' ) )
-          ? leftBound : p.progress;
-
-    this._sysTween
-      .setProgress( progress )
-      .setSpeed( p.speed )
-      .play();
-  }
   /*
     Method that is invoked on stop button tap.
     @private
   */
   _onStop ( ) {
     this._props.isPlaying = false;
-    // this.playButton.off();
-    this._sysTween.stop();
+    this._sysTween.reset();
   }
   /*
     Method that is invoked on repeat switch state change.