Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf(seek-bar): don't update play progress when document is hidden #5879

Merged
merged 4 commits into from
Mar 22, 2019
Merged

perf(seek-bar): don't update play progress when document is hidden #5879

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e55b9a
null-check this.bar
gkatsev Mar 19, 2019
b0f14a5
move internal functions into helper methods
gkatsev Mar 19, 2019
7f0a7c9
toggle interval on visibilitychange
gkatsev Mar 19, 2019
4c705c7
make update a no-op if the element isn't visible
gkatsev Mar 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 42 additions & 15 deletions src/js/control-bar/progress-control/seek-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as Fn from '../../utils/fn.js';
import formatTime from '../../utils/format-time.js';
import {silencePromise} from '../../utils/promise';
import keycode from 'keycode';
import document from 'global/document';

import './load-progress-bar.js';
import './play-progress-bar.js';
Expand Down Expand Up @@ -64,24 +65,42 @@ class SeekBar extends Slider {
// via an interval
this.updateInterval = null;

this.on(this.player_, ['playing'], () => {
this.clearInterval(this.updateInterval);
this.on(this.player_, ['playing'], this.enableInterval_);

this.updateInterval = this.setInterval(() =>{
this.requestAnimationFrame(() => {
this.update();
});
}, UPDATE_REFRESH_INTERVAL);
});
this.on(this.player_, ['ended', 'pause', 'waiting'], this.disableInterval_);

this.on(this.player_, ['ended', 'pause', 'waiting'], (e) => {
if (this.player_.liveTracker && this.player_.liveTracker.isLive() && e.type !== 'ended') {
return;
}
// we don't need to update the play progress if the document is hidden,
// also, this causes the CPU to spike and eventually crash the page on IE11.
if ('hidden' in document && 'visibilityState' in document) {
this.on(document, 'visibilitychange', this.toggleVisibility_);
}
}

this.clearInterval(this.updateInterval);
});
toggleVisibility_(e) {
if (document.hidden) {
this.disableInterval_(e);
} else {
this.enableInterval_();

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

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

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

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

this.clearInterval(this.updateInterval);
}

/**
Expand Down Expand Up @@ -133,7 +152,9 @@ class SeekBar extends Slider {
);

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

/**
Expand All @@ -148,6 +169,12 @@ 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);
Expand Down