Skip to content

Commit

Permalink
@forbesjo added the `scrubbing` property. closes #2080
Browse files Browse the repository at this point in the history
  • Loading branch information
jforbes authored and heff committed Apr 28, 2015
1 parent f19d13b commit 69738a8
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 6 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ CHANGELOG
* @dconnolly replaced JSON.parse with a safe non-eval JSON parse ([view](https://github.com/videojs/video.js/pull/2077))
* @mmcc added a new default skin, switched to SASS, modified the html ([view](https://github.com/videojs/video.js/pull/1999))
* @gkatsev removed event.isDefaultPrevented in favor of event.defaultPrevented ([view](https://github.com/videojs/video.js/pull/2081))
* @heff added and `extends` function for external subclassing ([view](https://github.com/videojs/video.js/pull/2078))
* @heff added and `extends` function for external subclassing ([view](https://github.com/videojs/video.js/pull/2078))
* @forbesjo added the `scrubbing` property ([view](https://github.com/videojs/video.js/pull/2080))

--------------------

Expand Down
8 changes: 3 additions & 5 deletions src/js/control-bar/progress-control/seek-bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class SeekBar extends Slider {

updateARIAAttributes() {
// Allows for smooth scrubbing, when player can't keep up.
let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
let time = (this.player_.scrubbing()) ? this.player_.getCache().currentTime : this.player_.currentTime();
this.el_.setAttribute('aria-valuenow', Lib.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete)
this.el_.setAttribute('aria-valuetext', Lib.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete)
}
Expand All @@ -40,8 +40,7 @@ class SeekBar extends Slider {
onMouseDown(event) {
super.onMouseDown(event);

this.player_.scrubbing = true;
this.player_.addClass('vjs-scrubbing');
this.player_.scrubbing(true);

this.videoWasPlaying = !this.player_.paused();
this.player_.pause();
Expand All @@ -60,8 +59,7 @@ class SeekBar extends Slider {
onMouseUp(event) {
super.onMouseUp(event);

this.player_.scrubbing = false;
this.player_.removeClass('vjs-scrubbing');
this.player_.scrubbing(false);
if (this.videoWasPlaying) {
this.player_.play();
}
Expand Down
30 changes: 30 additions & 0 deletions src/js/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,13 @@ class Player extends Component {
// May be turned back on by HTML5 tech if nativeControlsForTouch is true
tag.controls = false;

/**
* Store the internal state of scrubbing
* @private
* @return {Boolean} True if the user is scrubbing
*/
this.scrubbing_ = false;

this.el_ = this.createEl();
this.initChildren();

Expand Down Expand Up @@ -559,6 +566,29 @@ class Player extends Component {
return (this.techGet('paused') === false) ? false : true;
}

/**
* Returns whether or not the user is "scrubbing". Scrubbing is when the user
* has clicked the progress bar handle and is dragging it along the progress bar.
* @param {Boolean} isScrubbing True/false the user is scrubbing
* @return {Boolean} The scrubbing status when getting
* @return {Object} The player when setting
*/
scrubbing(isScrubbing) {
if (isScrubbing !== undefined) {
this.scrubbing_ = !!isScrubbing;

if (isScrubbing) {
this.addClass('vjs-scrubbing');
} else {
this.removeClass('vjs-scrubbing');
}

return this;
}

return this.scrubbing_;
}

/**
* Get or set the current time (in seconds)
*
Expand Down
15 changes: 15 additions & 0 deletions test/unit/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -702,3 +702,18 @@ test('should add an audio class if an audio el is used', function() {

ok(player.el().className.indexOf(audioClass) !== -1, 'added '+ audioClass +' css class');
});

test('should not be scrubbing while not seeking', function(){
var player = TestHelpers.makePlayer();
equal(player.scrubbing(), false, 'player is not scrubbing');
ok(player.el().className.indexOf('scrubbing') === -1, 'scrubbing class is not present');
player.scrubbing(false);
equal(player.scrubbing(), false, 'player is not scrubbing');
});

test('should be scrubbing while seeking', function(){
var player = TestHelpers.makePlayer();
player.scrubbing(true);
equal(player.scrubbing(), true, 'player is scrubbing');
ok(player.el().className.indexOf('scrubbing') !== -1, 'scrubbing class is present');
});

0 comments on commit 69738a8

Please sign in to comment.