From 7a5f0aa6433c46128ff00ddbcf1f516eab42001c Mon Sep 17 00:00:00 2001 From: Oleg Solomka Date: Thu, 28 Apr 2016 12:27:20 -0500 Subject: [PATCH] player-slider: bug fixes --- build/mojs-player.js | 92 ++++++++++++++++------------ build/mojs-player.min.js | 8 +-- index.html | 4 +- js/components/player-slider.babel.js | 10 ++- js/components/ripple.babel.js | 2 +- js/mojs-player.babel.js | 67 +++++++++++--------- lib/mojs-player.js | 26 ++++++-- package.json | 2 +- 8 files changed, 127 insertions(+), 84 deletions(-) diff --git a/build/mojs-player.js b/build/mojs-player.js index dd67c1c..bc010fc 100644 --- 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 index b5ee916..fe947cf 100644 --- a/build/mojs-player.min.js +++ b/build/mojs-player.min.js @@ -4,7 +4,7 @@ 0.40.1 */ -!function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="build/",e(0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){var i;(function(t,r){"use strict";function s(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(3),a=s(o),p=n(67),u=s(p),l=n(69),h=s(l),c=n(70),d=s(c),f=n(71),_=s(f),g=n(79),y=(s(g),n(80)),v=s(y),m=n(81),b=s(m),x=n(82),w=s(x),S=n(102),P=s(S),k=n(114),T=s(k),C=n(126),E=s(C),M=n(134),O=s(M),L=n(138),B=s(L),D=n(146),I=s(D),j=n(147),R=s(j);n(151);var A=n(153),N=function(t){function e(){return(0,h["default"])(this,e),(0,d["default"])(this,t.apply(this,arguments))}return(0,_["default"])(e,t),e.prototype._declareDefaults=function(){t.prototype._declareDefaults.call(this),this._defaults.isSaveState=!0,this._defaults.isPlaying=!1,this._defaults.progress=0,this._defaults.isRepeat=!1,this._defaults.isBounds=!1,this._defaults.leftBound=0,this._defaults.rightBound=1,this._defaults.isSpeed=!1,this._defaults.speed=1,this._defaults.isHidden=!1;var e="mojs-player";this.revision="0.40.1",this._prefix=e+"-"+this._hashCode(e)+"-",this._localStorage=this._prefix+"model"},e.prototype._extendDefaults=function(){this._props={};var t=this._props,e=this._o,n=this._defaults;t.isSaveState=this._fallbackTo(e.isSaveState,n.isSaveState);var i=t.isSaveState?JSON.parse(localStorage.getItem(this._localStorage))||{}:{};for(var r in n){var s=this._fallbackTo(i[r],e[r]);this._assignProp(r,this._fallbackTo(s,n[r]))}this._props["raw-speed"]=this._fallbackTo(i["raw-speed"],.5)},e.prototype._keyUp=function(t){if(t.altKey)switch(t.keyCode){case 80:this._props.isPlaying=!this._props.isPlaying,this._onPlayStateChange(this._props.isPlaying);break;case 189:this.playButton.off(),this.playerSlider.decreaseProgress(t.shiftKey?.1:.01);break;case 187:this.playButton.off(),this.playerSlider.increaseProgress(t.shiftKey?.1:.01);break;case 83:this._onStop();break;case 82:this._props.isRepeat=!this._props.isRepeat;var e=this._props.isRepeat?"on":"off";this.repeatButton[e]();break;case 66:this._props.isBounds=!this._props.isBounds;var e=this._props.isBounds?"on":"off";this.boundsButton[e]();break;case 72:this._props.isHidden=!this._props.isHidden,this._onHideStateChange(this._props.isHidden);var e=this._props.isHidden?"on":"off";this.hideButton[e]();break;case 81:this.speedControl.reset();break;case 50:this.speedControl.decreaseSpeed(t.shiftKey?.05:.01);break;case 51:this.speedControl.increaseSpeed(t.shiftKey?.05:.01)}},e.prototype._vars=function(){this._hideCount=0},e.prototype._render=function(){this._initTimeline();var e=this._props,n="mojs-player";new v["default"]({prefix:this._props.prefix});t.prototype._render.call(this),this.el.classList.add(A[n]),this.el.setAttribute("id","js-mojs-player");var i=this._createChild("div",A[n+"__left"]),r=this._createChild("div",A[n+"__mid"]),s=this._createChild("div",A[n+"__right"]);this.repeatButton=new B["default"]({parent:i,isOn:e.isRepeat,onStateChange:this._onRepeatStateChange.bind(this),prefix:this._props.prefix}),this.playerSlider=new w["default"]({parent:r,isBounds:e.isBounds,leftProgress:e.leftBound,rightProgress:e.rightBound,progress:e.progress,onLeftProgress:this._onLeftProgress.bind(this),onProgress:this._onProgress.bind(this),onRightProgress:this._onRightProgress.bind(this),onSeekStart:this._onSeekStart.bind(this),onSeekEnd:this._onSeekEnd.bind(this)}),this.boundsButton=new I["default"]({isOn:e.isBounds,parent:i,onStateChange:this._boundsStateChange.bind(this),prefix:this._props.prefix}),this.speedControl=new T["default"]({parent:i,speed:e.speed,isOn:e.isSpeed,onSpeedChange:this._onSpeedChange.bind(this),onIsSpeed:this._onIsSpeed.bind(this),prefix:this._props.prefix});this.stopButton=new O["default"]({parent:i,isPrepend:!0,onPointerUp:this._onStop.bind(this),prefix:this._props.prefix}),this.playButton=new E["default"]({parent:i,isOn:e.isPlaying,isPrepend:!0,onStateChange:this._onPlayStateChange.bind(this),prefix:this._props.prefix}),this.mojsButton=new P["default"]({parent:s,icon:"mojs",link:"https://github.com/legomushroom/mojs-player",title:"mo • js",prefix:this._props.prefix}),this.hideButton=new R["default"]({parent:this.el,className:A[n+"__hide-button"],isOn:e.isHidden,onStateChange:this._onHideStateChange.bind(this),prefix:this._props.prefix}),this._listen()},e.prototype._listen=function(){window.addEventListener("beforeunload",this._onUnload.bind(this)),document.addEventListener("keyup",this._keyUp.bind(this))},e.prototype._onSeekStart=function(t){this._sysTween.pause()},e.prototype._onSeekEnd=function(t){var e=this;clearTimeout(this._endTimer),this._endTimer=setTimeout(function(){e._props.isPlaying&&e._play()},20)},e.prototype._initTimeline=function(){var t=this;this.timeline=new mojs.Timeline({}),this.timeline.add(this._o.add),this._sysTween=new mojs.Tween({duration:this.timeline._props.repeatTime,onProgress:this._onSysProgress.bind(this),onComplete:this._onSysTweenComplete.bind(this),onPlaybackStop:function(){t._setPlayState("off")},onPlaybackPause:function(){t._setPlayState("off")},onPlaybackStart:function(){t._setPlayState("on")}})},e.prototype._onSysProgress=function(t){this.playerSlider.setTrackProgress(t);var e=this._props.isBounds?this._props.rightBound:1,n=this._props.isBounds?this._props.leftBound:-1;n>t&&0!==t&&(this._sysTween.pause(),this._defer(this._play)),t>=e&&(this._sysTween.pause(),this._props.isRepeat?this._defer(this._play):this._props.isPlaying=!1)},e.prototype._setPlayState=function(t){var e=this;clearTimeout(this._playTimeout),this._playTimeout=setTimeout(function(){e.playButton&&e.playButton[t](!1)},2)},e.prototype._onSysTweenComplete=function(t){this._props.isPlaying&&t&&this._props.isRepeat&&(this._sysTween.stop(),this._play())},e.prototype._onPlayStateChange=function(t){this._props.isPlaying=t,t?this._play():this._sysTween.pause()},e.prototype._onHideStateChange=function(t){this._props.isHidden=t;var e=t?"add":"remove";this.el.classList[e](A["is-hidden"]),1===this._hideCount++&&this.el.classList.add(A["is-transition"])},e.prototype._play=function(){var t=this._props,e=t.isBounds?t.leftBound:t.progress,n=t.progress>=this._getBound("right")?e:t.progress;this._sysTween.setProgress(n).setSpeed(t.speed).play()},e.prototype._onStop=function(){this._props.isPlaying=!1,this._sysTween.stop()},e.prototype._onRepeatStateChange=function(t){this._props.isRepeat=t},e.prototype._boundsStateChange=function(t){this.playerSlider._props.isBounds=t,this.playerSlider[(t?"enable":"disable")+"Bounds"](),this._props.isBounds=t},e.prototype._onSpeedChange=function(t,e){this._props["raw-speed"]=e,this._props.speed=t,this._sysTween.setSpeed(t)},e.prototype._onIsSpeed=function(t){this._props.isSpeed=t},e.prototype._onLeftProgress=function(t){this._props.leftBound=t},e.prototype._onProgress=function(t){this._props.progress=t,this.timeline._prevTime||this.timeline.setProgress(0),this.timeline.setProgress(t)},e.prototype._onRightProgress=function(t){this._props.rightBound=t},e.prototype._onUnload=function(t){return this._props.isSaveState?(delete this._props.parent,delete this._props.className,delete this._props.isSaveState,void localStorage.setItem(this._localStorage,(0,u["default"])(this._props))):localStorage.removeItem(this._localStorage)},e.prototype._fallbackTo=function(t,e){return null!=t?t:e},e.prototype._getBound=function(t){var e=this._props,n="left"===t?0:1;return e.isBounds?e[t+"Bound"]:n},e.prototype._defer=function(t){setTimeout(t.bind(this),1)},e.prototype._hashCode=function(t){var e,n,i,r=0;if(0===t.length)return r;for(e=0,i=t.length;i>e;e++)n=t.charCodeAt(e),r=(r<<5)-r+n,r|=0;return r},e}(b["default"]);i=function(){return N}.call(e,n,e,t),!(void 0!==i&&(t.exports=i)),"object"===(0,a["default"])(t)&&"object"===(0,a["default"])(t.exports)&&(t.exports=N);var F="undefined"!=typeof r?r:window;F.MojsPlayer=N,e["default"]=N}).call(e,n(2)(t),function(){return this}())},function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children=[],t.webpackPolyfill=1),t}},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var r=n(4),s=i(r),o=n(54),a=i(o),p="function"==typeof a["default"]&&"symbol"==typeof s["default"]?function(t){return typeof t}:function(t){return t&&"function"==typeof a["default"]&&t.constructor===a["default"]?"symbol":typeof t};e["default"]="function"==typeof a["default"]&&"symbol"===p(s["default"])?function(t){return"undefined"==typeof t?"undefined":p(t)}:function(t){return t&&"function"==typeof a["default"]&&t.constructor===a["default"]?"symbol":"undefined"==typeof t?"undefined":p(t)}},function(t,e,n){t.exports={"default":n(5),__esModule:!0}},function(t,e,n){n(6),n(50),t.exports=n(47)("iterator")},function(t,e,n){"use strict";var i=n(7)(!0);n(10)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=i(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){var i=n(8),r=n(9);t.exports=function(t){return function(e,n){var s,o,a=String(r(e)),p=i(n),u=a.length;return 0>p||p>=u?t?"":void 0:(s=a.charCodeAt(p),55296>s||s>56319||p+1===u||(o=a.charCodeAt(p+1))<56320||o>57343?t?a.charAt(p):s:t?a.slice(p,p+2):(s-55296<<10)+(o-56320)+65536)}}},function(t,e){var n=Math.ceil,i=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?i:n)(t)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){"use strict";var i=n(11),r=n(12),s=n(27),o=n(17),a=n(28),p=n(29),u=n(30),l=n(46),h=n(48),c=n(47)("iterator"),d=!([].keys&&"next"in[].keys()),f="@@iterator",_="keys",g="values",y=function(){return this};t.exports=function(t,e,n,v,m,b,x){u(n,e,v);var w,S,P,k=function(t){if(!d&&t in M)return M[t];switch(t){case _:return function(){return new n(this,t)};case g:return function(){return new n(this,t)}}return function(){return new n(this,t)}},T=e+" Iterator",C=m==g,E=!1,M=t.prototype,O=M[c]||M[f]||m&&M[m],L=O||k(m),B=m?C?k("entries"):L:void 0,D="Array"==e?M.entries||O:O;if(D&&(P=h(D.call(new t)),P!==Object.prototype&&(l(P,T,!0),i||a(P,c)||o(P,c,y))),C&&O&&O.name!==g&&(E=!0,L=function(){return O.call(this)}),i&&!x||!d&&!E&&M[c]||o(M,c,L),p[e]=L,p[T]=y,m)if(w={values:C?L:k(g),keys:b?L:k(_),entries:B},x)for(S in w)S in M||s(M,S,w[S]);else r(r.P+r.F*(d||E),e,w);return w}},function(t,e){t.exports=!0},function(t,e,n){var i=n(13),r=n(14),s=n(15),o=n(17),a="prototype",p=function(t,e,n){var u,l,h,c=t&p.F,d=t&p.G,f=t&p.S,_=t&p.P,g=t&p.B,y=t&p.W,v=d?r:r[e]||(r[e]={}),m=v[a],b=d?i:f?i[e]:(i[e]||{})[a];d&&(n=e);for(u in n)l=!c&&b&&void 0!==b[u],l&&u in v||(h=l?b[u]:n[u],v[u]=d&&"function"!=typeof b[u]?n[u]:g&&l?s(h,i):y&&b[u]==h?function(t){var e=function(e,n,i){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,i)}return t.apply(this,arguments)};return e[a]=t[a],e}(h):_&&"function"==typeof h?s(Function.call,h):h,_&&((v.virtual||(v.virtual={}))[u]=h,t&p.R&&m&&!m[u]&&o(m,u,h)))};p.F=1,p.G=2,p.S=4,p.P=8,p.B=16,p.W=32,p.U=64,p.R=128,t.exports=p},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n=t.exports={version:"2.2.2"};"number"==typeof __e&&(__e=n)},function(t,e,n){var i=n(16);t.exports=function(t,e,n){if(i(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,i){return t.call(e,n,i)};case 3:return function(n,i,r){return t.call(e,n,i,r)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var i=n(18),r=n(26);t.exports=n(22)?function(t,e,n){return i.f(t,e,r(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var i=n(19),r=n(21),s=n(25),o=Object.defineProperty;e.f=n(22)?Object.defineProperty:function(t,e,n){if(i(t),e=s(e,!0),i(n),r)try{return o(t,e,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var i=n(20);t.exports=function(t){if(!i(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){t.exports=!n(22)&&!n(23)(function(){return 7!=Object.defineProperty(n(24)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){t.exports=!n(23)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},function(t,e,n){var i=n(20),r=n(13).document,s=i(r)&&i(r.createElement);t.exports=function(t){return s?r.createElement(t):{}}},function(t,e,n){var i=n(20);t.exports=function(t,e){if(!i(t))return t;var n,r;if(e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;if("function"==typeof(n=t.valueOf)&&!i(r=n.call(t)))return r;if(!e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;throw TypeError("Can't convert object to primitive value")}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){t.exports=n(17)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e){t.exports={}},function(t,e,n){"use strict";var i=n(31),r=n(26),s=n(46),o={};n(17)(o,n(47)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=i(o,{next:r(1,n)}),s(t,e+" Iterator")}},function(t,e,n){var i=n(19),r=n(32),s=n(44),o=n(41)("IE_PROTO"),a=function(){},p="prototype",u=function(){var t,e=n(24)("iframe"),i=s.length,r=">";for(e.style.display="none",n(45).appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(" + - + \ No newline at end of file diff --git a/js/components/player-slider.babel.js b/js/components/player-slider.babel.js index 82a81fe..8849bdb 100644 --- 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 index a15b22d..b16fde3 100644 --- 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 index f4b2fd4..2f7be93 100644 --- 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,7 +309,7 @@ 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. @@ -296,12 +317,14 @@ class MojsPlayer extends Module { @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. diff --git a/lib/mojs-player.js b/lib/mojs-player.js index ca31df5..1a5726a 100644 --- a/lib/mojs-player.js +++ b/lib/mojs-player.js @@ -354,6 +354,8 @@ var MojsPlayer = function (_Module) { _this3._setPlayState('on'); } }); + + this._sysTween.isIt = 1; }; /* Method that is invoked on system tween progress. @@ -368,13 +370,18 @@ var MojsPlayer = function (_Module) { leftBound = this._props.isBounds ? this._props.leftBound : -1; if (p < leftBound && p !== 0) { - this._sysTween.pause(); - this._defer(this._play); + console.log('a'); + // this._sysTween.pause(); + // console.log(' progress ') + // this._play(); + // // this._defer( this._play ); } if (p >= rightBound) { this._sysTween.pause(); if (this._props.isRepeat) { - this._defer(this._play); + this._play(); + // this._defer( this._play ); + console.log(' progress 2'); } else { this._props.isPlaying = false; } @@ -405,7 +412,10 @@ var MojsPlayer = function (_Module) { MojsPlayer.prototype._onSysTweenComplete = function _onSysTweenComplete(isForward) { if (this._props.isPlaying && isForward) { if (this._props.isRepeat) { - this._sysTween.stop(); + // this._sysTween.pause(); + console.log('reset'); + this._sysTween.reset(); + // this._sysTween.stop(); this._play(); } } @@ -452,7 +462,13 @@ var MojsPlayer = function (_Module) { leftBound = p.isBounds ? p.leftBound : p.progress, progress = p.progress >= this._getBound('right') ? leftBound : p.progress; - this._sysTween.setProgress(progress).setSpeed(p.speed).play(); + // if ( progress < leftBound ) { progress = leftBound }; + if (progress < 1) { + console.log('set'); + this._sysTween.setProgress(progress); + } + this._sysTween.play(); + // .setSpeed( p.speed ) }; /* Method that is invoked on stop button tap. diff --git a/package.json b/package.json index f4bcf60..87e9423 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mojs-player", "description": "Player controls for mojs playback", - "version": "0.40.1", + "version": "0.40.2", "license": "MIT", "private": false, "scripts": { },