Skip to content

Commit

Permalink
perf: only update ui on change, wrap things in requestAnimationFrame (#…
Browse files Browse the repository at this point in the history 
…6155)
  • Loading branch information
@brandonocasey @gkatsev
brandonocasey authored and gkatsev committed Aug 29, 2019
1 parent f7185ba commit 99b610b
Show file tree
Hide file tree
Showing 10 changed files with 225 additions and 259 deletions.
103 changes: 59 additions & 44 deletions src/js/control-bar/progress-control/load-progress-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
*/
import Component from '../../component.js';
import * as Dom from '../../utils/dom.js';
import clamp from '../../utils/clamp';
import document from 'global/document';

// get the percent width of a time compared to the total end
const percentify = (time, end) => clamp((time / end) * 100, 0, 100).toFixed(2) + '%';

/**
* Shows loading progress
Expand Down Expand Up @@ -33,14 +38,27 @@ class LoadProgressBar extends Component {
* The element that was created.
*/
createEl() {
return super.createEl('div', {
className: 'vjs-load-progress',
innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: <span class="vjs-control-text-loaded-percentage">0%</span></span>`
const el = super.createEl('div', {className: 'vjs-load-progress'});
const wrapper = Dom.createEl('span', {className: 'vjs-control-text'});
const loadedText = Dom.createEl('span', {textContent: this.localize('Loaded')});
const separator = document.createTextNode(': ');

this.percentageEl_ = Dom.createEl('span', {
className: 'vjs-control-text-loaded-percentage',
textContent: '0%'
});

el.appendChild(wrapper);
wrapper.appendChild(loadedText);
wrapper.appendChild(separator);
wrapper.appendChild(this.percentageEl_);

return el;
}

dispose() {
this.partEls_ = null;
this.percentageEl_ = null;

super.dispose();
}
Expand All @@ -54,56 +72,53 @@ class LoadProgressBar extends Component {
* @listens Player#progress
*/
update(event) {
const liveTracker = this.player_.liveTracker;
const buffered = this.player_.buffered();
const duration = (liveTracker && liveTracker.isLive()) ? liveTracker.seekableEnd() : this.player_.duration();
const bufferedEnd = this.player_.bufferedEnd();
const children = this.partEls_;
const controlTextPercentage = this.$('.vjs-control-text-loaded-percentage');

// get the percent width of a time compared to the total end
const percentify = function(time, end, rounded) {
// no NaN
let percent = (time / end) || 0;

percent = (percent >= 1 ? 1 : percent) * 100;

if (rounded) {
percent = percent.toFixed(2);
this.requestAnimationFrame(() => {
const liveTracker = this.player_.liveTracker;
const buffered = this.player_.buffered();
const duration = (liveTracker && liveTracker.isLive()) ? liveTracker.seekableEnd() : this.player_.duration();
const bufferedEnd = this.player_.bufferedEnd();
const children = this.partEls_;
const percent = percentify(bufferedEnd, duration);

if (this.percent_ !== percent) {
// update the width of the progress bar
this.el_.style.width = percent;
// update the control-text
Dom.textContent(this.percentageEl_, percent);
this.percent_ = percent;
}

return percent + '%';
};
// add child elements to represent the individual buffered time ranges
for (let i = 0; i < buffered.length; i++) {
const start = buffered.start(i);
const end = buffered.end(i);
let part = children[i];

// update the width of the progress bar
this.el_.style.width = percentify(bufferedEnd, duration);
if (!part) {
part = this.el_.appendChild(Dom.createEl());
children[i] = part;
}

// update the control-text
Dom.textContent(controlTextPercentage, percentify(bufferedEnd, duration, true));
// only update if changed
if (part.dataset.start === start && part.dataset.end === end) {
continue;
}

// add child elements to represent the individual buffered time ranges
for (let i = 0; i < buffered.length; i++) {
const start = buffered.start(i);
const end = buffered.end(i);
let part = children[i];
part.dataset.start = start;
part.dataset.end = end;

if (!part) {
part = this.el_.appendChild(Dom.createEl());
children[i] = part;
// set the percent based on the width of the progress bar (bufferedEnd)
part.style.left = percentify(start, bufferedEnd);
part.style.width = percentify(end - start, bufferedEnd);
}

// set the percent based on the width of the progress bar (bufferedEnd)
part.style.left = percentify(start, bufferedEnd);
part.style.width = percentify(end - start, bufferedEnd);
}

// remove unused buffered range elements
for (let i = children.length; i > buffered.length; i--) {
this.el_.removeChild(children[i - 1]);
}
children.length = buffered.length;
// remove unused buffered range elements
for (let i = children.length; i > buffered.length; i--) {
this.el_.removeChild(children[i - 1]);
}
children.length = buffered.length;
});
}

}

Component.registerComponent('LoadProgressBar', LoadProgressBar);
Expand Down
46 changes: 28 additions & 18 deletions src/js/control-bar/progress-control/progress-control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import Component from '../../component.js';
import * as Dom from '../../utils/dom.js';
import clamp from '../../utils/clamp.js';
import {bind, throttle, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';

import './seek-bar.js';
Expand Down Expand Up @@ -56,25 +57,34 @@ class ProgressControl extends Component {
handleMouseMove(event) {
const seekBar = this.getChild('seekBar');

if (seekBar) {
const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
const seekBarEl = seekBar.el();
const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;

// The default skin has a gap on either side of the `SeekBar`. This means
// that it's possible to trigger this behavior outside the boundaries of
// the `SeekBar`. This ensures we stay within it at all times.
if (seekBarPoint > 1) {
seekBarPoint = 1;
} else if (seekBarPoint < 0) {
seekBarPoint = 0;
}

if (mouseTimeDisplay) {
mouseTimeDisplay.update(seekBarRect, seekBarPoint);
}
if (!seekBar) {
return;
}

const playProgressBar = seekBar.getChild('playProgressBar');
const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');

if (!playProgressBar && !mouseTimeDisplay) {
return;
}

const seekBarEl = seekBar.el();
const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;

// The default skin has a gap on either side of the `SeekBar`. This means
// that it's possible to trigger this behavior outside the boundaries of
// the `SeekBar`. This ensures we stay within it at all times.
seekBarPoint = clamp(0, 1, seekBarPoint);

if (mouseTimeDisplay) {
mouseTimeDisplay.update(seekBarRect, seekBarPoint);
}

if (playProgressBar) {
playProgressBar.update(seekBarRect, seekBar.getProgress());
}

}

/**
Expand Down
113 changes: 45 additions & 68 deletions src/js/control-bar/progress-control/seek-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,7 @@ class SeekBar extends Slider {
setEventHandlers_() {
this.update = Fn.throttle(Fn.bind(this, this.update), UPDATE_REFRESH_INTERVAL);

this.on(this.player_, 'timeupdate', this.update);
this.on(this.player_, 'ended', this.handleEnded);
this.on(this.player_, 'durationchange', this.update);
this.on(this.player_, ['ended', 'durationchange', 'timeupdate'], this.update);
if (this.player_.liveTracker) {
this.on(this.player_.liveTracker, 'liveedgechange', this.update);
}
Expand All @@ -83,24 +81,29 @@ class SeekBar extends Slider {
this.enableInterval_();

// we just switched back to the page and someone may be looking, so, update ASAP
this.requestAnimationFrame(this.update);
this.update();
}
}

enableInterval_() {
this.clearInterval(this.updateInterval);
if (this.updateInterval) {
return;

this.updateInterval = this.setInterval(() =>{
this.requestAnimationFrame(this.update);
}, UPDATE_REFRESH_INTERVAL);
}
this.updateInterval = this.setInterval(this.update, UPDATE_REFRESH_INTERVAL);
}

disableInterval_(e) {
if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e.type !== 'ended') {
return;
}

if (!this.updateInterval) {
return;
}

this.clearInterval(this.updateInterval);
this.updateInterval = null;
}

/**
Expand All @@ -121,45 +124,6 @@ class SeekBar extends Slider {
* This function updates the play progress bar and accessibility
* attributes to whatever is passed in.
*
* @param {number} currentTime
* The currentTime value that should be used for accessibility
*
* @param {number} percent
* The percentage as a decimal that the bar should be filled from 0-1.
*
* @private
*/
update_(currentTime, percent) {
const liveTracker = this.player_.liveTracker;
let duration = this.player_.duration();

if (liveTracker && liveTracker.isLive()) {
duration = this.player_.liveTracker.liveCurrentTime();
}

// machine readable value of progress bar (percentage complete)
this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));

// human readable value of progress bar (time complete)
this.el_.setAttribute(
'aria-valuetext',
this.localize(
'progress bar timing: currentTime={1} duration={2}',
[formatTime(currentTime, duration),
formatTime(duration, duration)],
'{1} of {2}'
)
);

// Update the `PlayProgressBar`.
if (this.bar) {
this.bar.update(Dom.getBoundingClientRect(this.el_), percent);
}
}

/**
* Update the seek bar's UI.
*
* @param {EventTarget~Event} [event]
* The `timeupdate` or `ended` event that caused this to run.
*
Expand All @@ -169,15 +133,41 @@ class SeekBar extends Slider {
* The current percent at a number from 0-1
*/
update(event) {
// if the offsetParent is null, then this element is hidden, in which case
// we don't need to update it.
if (this.el().offsetParent === null) {
return;
}

const percent = super.update();

this.update_(this.getCurrentTime_(), percent);
this.requestAnimationFrame(() => {
const currentTime = this.player_.ended() ?
this.player_.duration() : this.getCurrentTime_();
const liveTracker = this.player_.liveTracker;
let duration = this.player_.duration();

if (liveTracker && liveTracker.isLive()) {
duration = this.player_.liveTracker.liveCurrentTime();
}

if (this.percent_ !== percent) {
// machine readable value of progress bar (percentage complete)
this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
this.percent_ = percent;
}

if (this.currentTime_ !== currentTime || this.duration_ !== duration) {
// human readable value of progress bar (time complete)
this.el_.setAttribute(
'aria-valuetext',
this.localize(
'progress bar timing: currentTime={1} duration={2}',
[formatTime(currentTime, duration),
formatTime(duration, duration)],
'{1} of {2}'
)
);

this.currentTime_ = currentTime;
this.duration_ = duration;
}
});

return percent;
}

Expand All @@ -196,19 +186,6 @@ class SeekBar extends Slider {
this.player_.currentTime();
}

/**
* We want the seek bar to be full on ended
* no matter what the actual internal values are. so we force it.
*
* @param {EventTarget~Event} [event]
* The `timeupdate` or `ended` event that caused this to run.
*
* @listens Player#ended
*/
handleEnded(event) {
this.update_(this.player_.duration(), 1);
}

/**
* Get the percentage of media played so far.
*
Expand All @@ -231,7 +208,7 @@ class SeekBar extends Slider {
percent = currentTime / this.player_.duration();
}

return percent >= 1 ? 1 : (percent || 0);
return percent;
}

/**
Expand Down
Loading

0 comments on commit 99b610b

Please sign in to comment.