Skip to content

Commit 7a5f0aa

Browse files
legomushroomlegomushroom
committed
player-slider: bug fixes
1 parent e2902a7 commit 7a5f0aa

File tree

8 files changed

+127
-84
lines changed

8 files changed

+127
-84
lines changed

‎build/mojs-player.js‎

Lines changed: 53 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
/*!
2-
:: MojsPlayer :: Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences.
3-
Oleg Solomka @LegoMushroom 2016 MIT
4-
0.40.1
5-
*/
6-
71
/******/ (function(modules) { // webpackBootstrap
82
/******/ // The module cache
93
/******/ var installedModules = {};
@@ -428,22 +422,48 @@
428422

429423
MojsPlayer.prototype._onSysProgress = function _onSysProgress(p) {
430424
this.playerSlider.setTrackProgress(p);
425+
431426
var rightBound = this._props.isBounds ? this._props.rightBound : 1,
432427
leftBound = this._props.isBounds ? this._props.leftBound : -1;
433428

434-
if (p < leftBound && p !== 0) {
435-
this._sysTween.pause();
436-
this._defer(this._play);
429+
// since js is really bed in numbers precision,
430+
// if we set a progress in the `_play` method it returns slighly
431+
// different when piped thru tween, so add `0.01` gap to soften that
432+
if (p < leftBound - 0.01 && p !== 0) {
433+
this._sysTween.reset();
434+
requestAnimationFrame(this._play.bind(this));
437435
}
436+
438437
if (p >= rightBound) {
439-
this._sysTween.pause();
438+
this._sysTween.reset();
440439
if (this._props.isRepeat) {
441-
this._defer(this._play);
440+
requestAnimationFrame(this._play.bind(this));
442441
} else {
443442
this._props.isPlaying = false;
444443
}
445444
}
446445
};
446+
/*
447+
Method to play system tween from progress.
448+
@private
449+
*/
450+
451+
452+
MojsPlayer.prototype._play = function _play() {
453+
var p = this._props,
454+
leftBound = p.isBounds ? p.leftBound : p.progress,
455+
progress = p.progress >= this._getBound('right') ? leftBound : p.progress;
456+
457+
if (progress === 1) {
458+
progress = p.isBounds ? p.leftBound : 0;
459+
};
460+
if (progress !== 0) {
461+
this._sysTween.setProgress(progress);
462+
};
463+
464+
this._sysTween.play();
465+
};
466+
447467
/*
448468
Method to set play button state.
449469
@private
@@ -457,7 +477,7 @@
457477
clearTimeout(this._playTimeout);
458478
this._playTimeout = setTimeout(function () {
459479
_this4.playButton && _this4.playButton[method](false);
460-
}, 2);
480+
}, 20);
461481
};
462482
/*
463483
Method that is invoked on system tween completion.
@@ -466,20 +486,22 @@
466486
*/
467487

468488

469-
MojsPlayer.prototype._onSysTweenComplete = function _onSysTweenComplete(isForward) {
470-
if (this._props.isPlaying && isForward) {
471-
if (this._props.isRepeat) {
472-
this._sysTween.stop();
473-
this._play();
474-
}
475-
}
476-
};
489+
MojsPlayer.prototype._onSysTweenComplete = function _onSysTweenComplete(isForward) {}
490+
// console.log(' complete ', this._props.isPlaying, isForward, this._props.isRepeat);
491+
// if ( this._props.isPlaying && isForward ) {
492+
// if ( this._props.isRepeat ) {
493+
// console.log('reset 2')
494+
// // this._sysTween.reset();
495+
// // this._play();
496+
// }
497+
// }
498+
477499
/*
478500
Method that is invoked play button state change.
479501
@private
480502
@param {Boolean} Repeat button state.
481503
*/
482-
504+
;
483505

484506
MojsPlayer.prototype._onPlayStateChange = function _onPlayStateChange(isPlay) {
485507
this._props.isPlaying = isPlay;
@@ -505,19 +527,6 @@
505527
this.el.classList.add(CLASSES['is-transition']);
506528
}
507529
};
508-
/*
509-
Method to play system tween from progress.
510-
@private
511-
*/
512-
513-
514-
MojsPlayer.prototype._play = function _play() {
515-
var p = this._props,
516-
leftBound = p.isBounds ? p.leftBound : p.progress,
517-
progress = p.progress >= this._getBound('right') ? leftBound : p.progress;
518-
519-
this._sysTween.setProgress(progress).setSpeed(p.speed).play();
520-
};
521530
/*
522531
Method that is invoked on stop button tap.
523532
@private
@@ -526,8 +535,7 @@
526535

527536
MojsPlayer.prototype._onStop = function _onStop() {
528537
this._props.isPlaying = false;
529-
// this.playButton.off();
530-
this._sysTween.stop();
538+
this._sysTween.reset();
531539
};
532540
/*
533541
Method that is invoked on repeat switch state change.
@@ -2856,7 +2864,9 @@
28562864
isBound: true,
28572865
parent: this.el,
28582866
isRipple: false,
2859-
onProgress: this._onLeftBoundProgress.bind(this)
2867+
onProgress: this._onLeftBoundProgress.bind(this),
2868+
onSeekStart: p.onSeekStart,
2869+
onSeekEnd: p.onSeekEnd
28602870
});
28612871

28622872
this.track = new _slider2.default({
@@ -2871,7 +2881,9 @@
28712881
parent: this.el,
28722882
isRipple: false,
28732883
isInversed: true,
2874-
onProgress: this._onRightBoundProgress.bind(this)
2884+
onProgress: this._onRightBoundProgress.bind(this),
2885+
onSeekStart: p.onSeekStart,
2886+
onSeekEnd: p.onSeekEnd
28752887
});
28762888

28772889
this.rightBound.setProgress(p.rightProgress);
@@ -2901,6 +2913,7 @@
29012913
if (!this._props.isBounds) {
29022914
return;
29032915
}
2916+
this._props.leftProgress = p;
29042917
this.track.setMinBound(p);
29052918
this.rightBound.setMinBound(p);
29062919
this._callIfFunction(this._props.onLeftProgress, p);
@@ -2916,6 +2929,7 @@
29162929
if (!this._props.isBounds) {
29172930
return;
29182931
}
2932+
this._props.rightProgress = p;
29192933
this.track.setMaxBound(p);
29202934
this.leftBound.setMaxBound(p);
29212935
this._callIfFunction(this._props.onRightProgress, p);
@@ -6788,7 +6802,7 @@
67886802
y = e.offsetY != null ? e.offsetY : e.layerY;
67896803

67906804
this.isRelease = false;
6791-
this.transit.tune({ x: x, y: y }).replay();
6805+
this.transit.tune({ x: x, y: y }).stop().replay();
67926806
};
67936807
/*
67946808
Method that should be run on touch serface cancel.

‎build/mojs-player.min.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<br />
3131
<br />
3232

33-
<script src="node_modules/mo-js/build/mo.min.js"></script>
33+
<script src="node_modules/mo-js/build/mo.js"></script>
3434
<script src="build/mojs-player.js"></script>
3535

3636
<script>
@@ -50,6 +50,6 @@
5050
// isSaveState: false
5151
});
5252
</script>
53-
53+
5454
</body>
5555
</html>

‎js/components/player-slider.babel.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@ class PlayerSlider extends Module {
101101
isBound: true,
102102
parent: this.el,
103103
isRipple: false,
104-
onProgress: this._onLeftBoundProgress.bind(this)
104+
onProgress: this._onLeftBoundProgress.bind(this),
105+
onSeekStart: p.onSeekStart,
106+
onSeekEnd: p.onSeekEnd
105107
});
106108

107109
this.track = new Slider({
@@ -116,7 +118,9 @@ class PlayerSlider extends Module {
116118
parent: this.el,
117119
isRipple: false,
118120
isInversed: true,
119-
onProgress: this._onRightBoundProgress.bind(this)
121+
onProgress: this._onRightBoundProgress.bind(this),
122+
onSeekStart: p.onSeekStart,
123+
onSeekEnd: p.onSeekEnd
120124
});
121125

122126
this.rightBound.setProgress( p.rightProgress );
@@ -141,6 +145,7 @@ class PlayerSlider extends Module {
141145
*/
142146
_onLeftBoundProgress ( p ) {
143147
if ( !this._props.isBounds ) { return; }
148+
this._props.leftProgress = p;
144149
this.track.setMinBound( p );
145150
this.rightBound.setMinBound( p );
146151
this._callIfFunction( this._props.onLeftProgress, p );
@@ -152,6 +157,7 @@ class PlayerSlider extends Module {
152157
*/
153158
_onRightBoundProgress ( p ) {
154159
if ( !this._props.isBounds ) { return; }
160+
this._props.rightProgress = p;
155161
this.track.setMaxBound( p );
156162
this.leftBound.setMaxBound( p );
157163
this._callIfFunction( this._props.onRightProgress, p );

‎js/components/ripple.babel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ class Ripple extends Module {
7878
y = ( e.offsetY != null ) ? e.offsetY : e.layerY;
7979

8080
this.isRelease = false;
81-
this.transit.tune({ x: x, y: y }).replay();
81+
this.transit.tune({ x: x, y: y }).stop().replay();
8282
}
8383
/*
8484
Method that should be run on touch serface cancel.

‎js/mojs-player.babel.js‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ class MojsPlayer extends Module {
255255
onComplete: this._onSysTweenComplete.bind( this ),
256256
onPlaybackStop: () => { this._setPlayState( 'off' ); },
257257
onPlaybackPause: () => { this._setPlayState( 'off' ); },
258-
onPlaybackStart: () => { this._setPlayState( 'on' ) }
258+
onPlaybackStart: () => { this._setPlayState( 'on' ); }
259259
});
260260
}
261261
/*
@@ -265,20 +265,41 @@ class MojsPlayer extends Module {
265265
*/
266266
_onSysProgress ( p ) {
267267
this.playerSlider.setTrackProgress( p );
268+
268269
let rightBound = ( this._props.isBounds ) ? this._props.rightBound : 1,
269270
leftBound = ( this._props.isBounds ) ? this._props.leftBound : -1;
270271

271-
if ( p < leftBound && p !== 0 ) {
272-
this._sysTween.pause();
273-
this._defer( this._play );
272+
// since js is really bed in numbers precision,
273+
// if we set a progress in the `_play` method it returns slighly
274+
// different when piped thru tween, so add `0.01` gap to soften that
275+
if ( p < leftBound - 0.01 && p !== 0 ) {
276+
this._sysTween.reset();
277+
requestAnimationFrame(this._play.bind(this));
274278
}
279+
275280
if ( p >= rightBound ) {
276-
this._sysTween.pause();
281+
this._sysTween.reset();
277282
if ( this._props.isRepeat ) {
278-
this._defer( this._play );
283+
requestAnimationFrame(this._play.bind(this));
279284
} else { this._props.isPlaying = false; }
280285
}
281286
}
287+
/*
288+
Method to play system tween from progress.
289+
@private
290+
*/
291+
_play () {
292+
let p = this._props,
293+
leftBound = ( p.isBounds ) ? p.leftBound : p.progress,
294+
progress = ( p.progress >= this._getBound( 'right' ) )
295+
? leftBound : p.progress;
296+
297+
if (progress === 1) { progress = ( p.isBounds ) ? p.leftBound : 0 };
298+
if ( progress !== 0 ) { this._sysTween.setProgress( progress ); };
299+
300+
this._sysTween.play();
301+
}
302+
282303
/*
283304
Method to set play button state.
284305
@private
@@ -288,20 +309,22 @@ class MojsPlayer extends Module {
288309
clearTimeout( this._playTimeout );
289310
this._playTimeout = setTimeout( () => {
290311
this.playButton && this.playButton[ method ]( false );
291-
}, 2);
312+
}, 20);
292313
}
293314
/*
294315
Method that is invoked on system tween completion.
295316
@private
296317
@param {Boolean} If forward direction.
297318
*/
298319
_onSysTweenComplete ( isForward ) {
299-
if ( this._props.isPlaying && isForward ) {
300-
if ( this._props.isRepeat ) {
301-
this._sysTween.stop();
302-
this._play();
303-
}
304-
}
320+
// console.log(' complete ', this._props.isPlaying, isForward, this._props.isRepeat);
321+
// if ( this._props.isPlaying && isForward ) {
322+
// if ( this._props.isRepeat ) {
323+
// console.log('reset 2')
324+
// // this._sysTween.reset();
325+
// // this._play();
326+
// }
327+
// }
305328
}
306329
/*
307330
Method that is invoked play button state change.
@@ -326,29 +349,13 @@ class MojsPlayer extends Module {
326349
this.el.classList.add( CLASSES[ 'is-transition' ] );
327350
}
328351
}
329-
/*
330-
Method to play system tween from progress.
331-
@private
332-
*/
333-
_play () {
334-
let p = this._props,
335-
leftBound = ( p.isBounds ) ? p.leftBound : p.progress,
336-
progress = ( p.progress >= this._getBound( 'right' ) )
337-
? leftBound : p.progress;
338-
339-
this._sysTween
340-
.setProgress( progress )
341-
.setSpeed( p.speed )
342-
.play();
343-
}
344352
/*
345353
Method that is invoked on stop button tap.
346354
@private
347355
*/
348356
_onStop ( ) {
349357
this._props.isPlaying = false;
350-
// this.playButton.off();
351-
this._sysTween.stop();
358+
this._sysTween.reset();
352359
}
353360
/*
354361
Method that is invoked on repeat switch state change.

0 commit comments

Comments
 (0)