DMC/multiplayer-ce
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

The progress bar now displays progress as the video plays

Browse Source
This commit is contained in:
Erik Thuning 2022-10-31 11:25:03 +01:00
parent 0a6f09a287
commit 0aac98ddc2
1 changed files with 29 additions and 15 deletions

44
multiplayer.js

@ -261,8 +261,19 @@
// list of stream overlay icons for play/pause
this._overlayPlayIcons = [];
// the periodic task that updates progress bar etc.
this._progressInterval = null;
// the container element for the progress bar
this._progressContainer = null;
// the element displaying buffer state
this._progressBuffer = null;
// the actual progress bar
this._progressBar = null;
// the popup displaying time information when hovering on
// the progress bar
this._progressPopup = null;
// prepare shadow root
this.attachShadow({'mode': 'open'});
@ -283,8 +294,15 @@
const controlRoot = this._root.createChild('div',
{'id': 'controls'});
this.initProgressBar(controlRoot.createChild(
'div', {'id': 'progress-container'}));
this._progressContainer = controlRoot.createChild(
'div', {'id': 'progress-container'})
this._progressBuffer = this._progressContainer.createChild(
'canvas', {id: 'buffer'});
this._progressBar = this._progressContainer.createChild(
'div', {id: 'progress'});
this._progressPopup = this._progressBar.createChild(
'div', {id: 'progress-popup'});
this.initLeftControls(controlRoot.createChild(
'div', {'id': 'left-controls', 'class': 'control-box'}));
this.initRightControls(controlRoot.createChild(
@ -362,15 +380,6 @@
return parent;
}
/*
* Progress bar setup
*/
initProgressBar(parent) {
const buffer = parent.createChild('canvas', {id: 'buffer'});
const progress = parent.createChild('div', {id: 'progress'});
const popup = progress.createChild('div', {id: 'progress-popup'});
}
/*
* Prepare controls anchored to the left part of the viewport
*/
@ -682,8 +691,13 @@
initProgressTracking() {
this._controlSource.addEventListener(
'timeupdate', (event) => {
this._elapsed.textContent = this.formatTime(
this._controlSource.currentTime);
const elapsed = this._controlSource.currentTime;
this._elapsed.textContent = this.formatTime(elapsed);
const progressWidth = (
elapsed
/ this._controlSource.duration
* this._progressContainer.clientWidth);
this._progressBar.style.width = progressWidth + 'px';
}
);
}