Skip to content

Commit f433260

Browse files
legomushroomlegomushroom
committed
mojs-player: refactor to _reset method
1 parent 7a5f0aa commit f433260

File tree

9 files changed

+150
-106
lines changed

9 files changed

+150
-106
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mojs-player",
3-
"version": "0.40.1",
3+
"version": "0.40.3",
44
"description": "Player controls for [mojs](mojs.io). Intended to help you to craft `mojs` animation sequences.",
55
"main": "build/mojs-player.min.js",
66
"authors": [

‎build/mojs-player.js‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
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.3
5+
*/
6+
17
/******/ (function(modules) { // webpackBootstrap
28
/******/ // The module cache
39
/******/ var installedModules = {};
@@ -153,7 +159,7 @@
153159
this._defaults.isHidden = false;
154160

155161
var str = 'mojs-player';
156-
this.revision = '0.40.1';
162+
this.revision = '0.40.3';
157163
this._prefix = str + '-' + this._hashCode(str) + '-';
158164
this._localStorage = this._prefix + 'model';
159165
};
@@ -430,12 +436,12 @@
430436
// if we set a progress in the `_play` method it returns slighly
431437
// different when piped thru tween, so add `0.01` gap to soften that
432438
if (p < leftBound - 0.01 && p !== 0) {
433-
this._sysTween.reset();
439+
this._reset();
434440
requestAnimationFrame(this._play.bind(this));
435441
}
436442

437443
if (p >= rightBound) {
438-
this._sysTween.reset();
444+
this._reset();
439445
if (this._props.isRepeat) {
440446
requestAnimationFrame(this._play.bind(this));
441447
} else {
@@ -463,7 +469,16 @@
463469

464470
this._sysTween.play();
465471
};
472+
/*
473+
Method to reset sysTween and timeline.
474+
@private
475+
*/
466476

477+
478+
MojsPlayer.prototype._reset = function _reset() {
479+
this._sysTween.reset();
480+
this.timeline.reset();
481+
};
467482
/*
468483
Method to set play button state.
469484
@private
@@ -535,7 +550,7 @@
535550

536551
MojsPlayer.prototype._onStop = function _onStop() {
537552
this._props.isPlaying = false;
538-
this._sysTween.reset();
553+
this._reset();
539554
};
540555
/*
541556
Method that is invoked on repeat switch state change.
@@ -601,8 +616,15 @@
601616

602617
MojsPlayer.prototype._onProgress = function _onProgress(progress) {
603618
this._props.progress = progress;
604-
if (!this.timeline._prevTime) {
605-
this.timeline.setProgress(0);
619+
// if timeline was reset - refresh it's state
620+
// by incremental updates until progress (0 always)
621+
if (!this.timeline._prevTime && progress > 0) {
622+
var start = 0,
623+
step = 0.1;
624+
do {
625+
this.timeline.setProgress(start);
626+
start += step;
627+
} while (start + step < progress);
606628
}
607629
this.timeline.setProgress(progress);
608630
};
@@ -6742,24 +6764,19 @@
67426764

67436765

67446766
Ripple.prototype._addRipple = function _addRipple() {
6745-
var _ref;
6767+
var _this2 = this,
6768+
_ref;
67466769

67476770
this.transit = new mojs.Transit((_ref = {
67486771
parent: this.el,
67496772
strokeWidth: { 10: 0 },
67506773
fill: 'none',
6751-
// stroke: 'white',
67526774
stroke: 'hotpink'
6753-
}, _ref['fill'] = 'hotpink', _ref.fillOpacity = .75, _ref.opacity = { .85: 0 }, _ref.radius = { 0: 40 }, _ref.isShowEnd = false, _ref.onStart = this._onStart.bind(this), _ref.onUpdate = this._onUpdate.bind(this), _ref));
6754-
};
6755-
/*
6756-
Method that is invoked on ripple start.
6757-
@private
6758-
*/
6759-
6760-
6761-
Ripple.prototype._onStart = function _onStart() {
6762-
this.isStart = true;
6775+
}, _ref['fill'] = 'hotpink', _ref.fillOpacity = .75, _ref.opacity = { .85: 0 }, _ref.radius = { 0: 40 }, _ref.isShowEnd = false, _ref.onStart = function onStart() {
6776+
_this2.isStart = true;
6777+
}, _ref.onUpdate = this._onUpdate.bind(this), _ref.onComplete = function onComplete() {
6778+
_this2.isStart = false;
6779+
}, _ref));
67636780
};
67646781
/*
67656782
Method that is invoked on ripple update.
@@ -6784,6 +6801,7 @@
67846801

67856802

67866803
Ripple.prototype._release = function _release() {
6804+
// console.log('release');
67876805
if (!this._props.withHold) {
67886806
return;
67896807
}
@@ -6802,7 +6820,7 @@
68026820
y = e.offsetY != null ? e.offsetY : e.layerY;
68036821

68046822
this.isRelease = false;
6805-
this.transit.tune({ x: x, y: y }).stop().replay();
6823+
this.transit.tune({ x: x, y: y }).replay();
68066824
};
68076825
/*
68086826
Method that should be run on touch serface cancel.

‎build/mojs-player.min.js‎

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

‎js/components/ripple.babel.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,17 @@ class Ripple extends Module {
3131
parent: this.el,
3232
strokeWidth: { 10 : 0 },
3333
fill: 'none',
34-
// stroke: 'white',
3534
stroke: 'hotpink',
3635
fill: 'hotpink',
3736
fillOpacity: .75,
3837
opacity: { .85: 0 },
3938
radius: { 0: 40 },
4039
isShowEnd: false,
41-
onStart: this._onStart.bind( this ),
42-
onUpdate: this._onUpdate.bind( this )
40+
onStart: () => { this.isStart = true; },
41+
onUpdate: this._onUpdate.bind( this ),
42+
onComplete: () => { this.isStart = false; }
4343
});
4444
}
45-
/*
46-
Method that is invoked on ripple start.
47-
@private
48-
*/
49-
_onStart () { this.isStart = true; }
5045
/*
5146
Method that is invoked on ripple update.
5247
@private
@@ -64,6 +59,7 @@ class Ripple extends Module {
6459
@private
6560
*/
6661
_release () {
62+
// console.log('release');
6763
if ( !this._props.withHold ) { return; }
6864
this.isRelease = true;
6965
this.transit.setSpeed( 1 ).play();
@@ -78,7 +74,7 @@ class Ripple extends Module {
7874
y = ( e.offsetY != null ) ? e.offsetY : e.layerY;
7975

8076
this.isRelease = false;
81-
this.transit.tune({ x: x, y: y }).stop().replay();
77+
this.transit.tune({ x: x, y: y }).replay();
8278
}
8379
/*
8480
Method that should be run on touch serface cancel.

‎js/mojs-player.babel.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ class MojsPlayer extends Module {
3434
this._defaults.isHidden = false;
3535

3636
let str = 'mojs-player';
37-
this.revision = '0.40.1';
37+
this.revision = '0.40.3';
3838
this._prefix = `${str}-${ this._hashCode( str ) }-`;
3939
this._localStorage = `${ this._prefix }model`;
4040
}
@@ -273,12 +273,12 @@ class MojsPlayer extends Module {
273273
// if we set a progress in the `_play` method it returns slighly
274274
// different when piped thru tween, so add `0.01` gap to soften that
275275
if ( p < leftBound - 0.01 && p !== 0 ) {
276-
this._sysTween.reset();
276+
this._reset();
277277
requestAnimationFrame(this._play.bind(this));
278278
}
279279

280280
if ( p >= rightBound ) {
281-
this._sysTween.reset();
281+
this._reset();
282282
if ( this._props.isRepeat ) {
283283
requestAnimationFrame(this._play.bind(this));
284284
} else { this._props.isPlaying = false; }
@@ -299,7 +299,14 @@ class MojsPlayer extends Module {
299299

300300
this._sysTween.play();
301301
}
302-
302+
/*
303+
Method to reset sysTween and timeline.
304+
@private
305+
*/
306+
_reset () {
307+
this._sysTween.reset();
308+
this.timeline.reset();
309+
}
303310
/*
304311
Method to set play button state.
305312
@private
@@ -355,7 +362,7 @@ class MojsPlayer extends Module {
355362
*/
356363
_onStop ( ) {
357364
this._props.isPlaying = false;
358-
this._sysTween.reset();
365+
this._reset();
359366
}
360367
/*
361368
Method that is invoked on repeat switch state change.
@@ -403,8 +410,15 @@ class MojsPlayer extends Module {
403410
*/
404411
_onProgress ( progress ) {
405412
this._props.progress = progress;
406-
if ( !this.timeline._prevTime ) {
407-
this.timeline.setProgress( 0 );
413+
// if timeline was reset - refresh it's state
414+
// by incremental updates until progress (0 always)
415+
if ( !this.timeline._prevTime && progress > 0 ) {
416+
let start = 0,
417+
step = 0.1;
418+
do {
419+
this.timeline.setProgress( start );
420+
start += step;
421+
} while ( start + step < progress );
408422
}
409423
this.timeline.setProgress( progress );
410424
}

‎lib/components/player-slider.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,9 @@ var PlayerSlider = function (_Module) {
143143
isBound: true,
144144
parent: this.el,
145145
isRipple: false,
146-
onProgress: this._onLeftBoundProgress.bind(this)
146+
onProgress: this._onLeftBoundProgress.bind(this),
147+
onSeekStart: p.onSeekStart,
148+
onSeekEnd: p.onSeekEnd
147149
});
148150

149151
this.track = new _slider2.default({
@@ -158,7 +160,9 @@ var PlayerSlider = function (_Module) {
158160
parent: this.el,
159161
isRipple: false,
160162
isInversed: true,
161-
onProgress: this._onRightBoundProgress.bind(this)
163+
onProgress: this._onRightBoundProgress.bind(this),
164+
onSeekStart: p.onSeekStart,
165+
onSeekEnd: p.onSeekEnd
162166
});
163167

164168
this.rightBound.setProgress(p.rightProgress);
@@ -188,6 +192,7 @@ var PlayerSlider = function (_Module) {
188192
if (!this._props.isBounds) {
189193
return;
190194
}
195+
this._props.leftProgress = p;
191196
this.track.setMinBound(p);
192197
this.rightBound.setMinBound(p);
193198
this._callIfFunction(this._props.onLeftProgress, p);
@@ -203,6 +208,7 @@ var PlayerSlider = function (_Module) {
203208
if (!this._props.isBounds) {
204209
return;
205210
}
211+
this._props.rightProgress = p;
206212
this.track.setMaxBound(p);
207213
this.leftBound.setMaxBound(p);
208214
this._callIfFunction(this._props.onRightProgress, p);

‎lib/components/ripple.js‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -54,24 +54,19 @@ var Ripple = function (_Module) {
5454

5555

5656
Ripple.prototype._addRipple = function _addRipple() {
57-
var _ref;
57+
var _this2 = this,
58+
_ref;
5859

5960
this.transit = new mojs.Transit((_ref = {
6061
parent: this.el,
6162
strokeWidth: { 10: 0 },
6263
fill: 'none',
63-
// stroke: 'white',
6464
stroke: 'hotpink'
65-
}, _ref['fill'] = 'hotpink', _ref.fillOpacity = .75, _ref.opacity = { .85: 0 }, _ref.radius = { 0: 40 }, _ref.isShowEnd = false, _ref.onStart = this._onStart.bind(this), _ref.onUpdate = this._onUpdate.bind(this), _ref));
66-
};
67-
/*
68-
Method that is invoked on ripple start.
69-
@private
70-
*/
71-
72-
73-
Ripple.prototype._onStart = function _onStart() {
74-
this.isStart = true;
65+
}, _ref['fill'] = 'hotpink', _ref.fillOpacity = .75, _ref.opacity = { .85: 0 }, _ref.radius = { 0: 40 }, _ref.isShowEnd = false, _ref.onStart = function onStart() {
66+
_this2.isStart = true;
67+
}, _ref.onUpdate = this._onUpdate.bind(this), _ref.onComplete = function onComplete() {
68+
_this2.isStart = false;
69+
}, _ref));
7570
};
7671
/*
7772
Method that is invoked on ripple update.
@@ -96,6 +91,7 @@ var Ripple = function (_Module) {
9691

9792

9893
Ripple.prototype._release = function _release() {
94+
// console.log('release');
9995
if (!this._props.withHold) {
10096
return;
10197
}

0 commit comments

Comments
 (0)