Implemented a spinner that pops up when any stream is buffering
This commit is contained in:
parent
f4081d0523
commit
5da12d47f8
@ -347,6 +347,10 @@
|
||||
this.initRightControls(controlRoot.createChild(
|
||||
'div', {'id': 'right-controls', 'class': 'control-box'}));
|
||||
|
||||
this._spinner = this._root.createChild(
|
||||
'div', {'id': 'loading-overlay'},
|
||||
[createIcon(['loading'])]);
|
||||
|
||||
// set up hiding of mouse pointer and controls
|
||||
const hide = () => {
|
||||
if(this._presTitle.classList.contains('hidden')) {
|
||||
@ -695,6 +699,7 @@
|
||||
this.autoBlurControls();
|
||||
this.initProgressContainer();
|
||||
this.initBuffer();
|
||||
this.initSpinner();
|
||||
|
||||
this.recallSettings();
|
||||
}
|
||||
@ -826,6 +831,33 @@
|
||||
window.requestAnimationFrame(paintBuffer);
|
||||
}
|
||||
|
||||
/*
|
||||
* Initialize dynamic showing of spinner based on buffering state
|
||||
*/
|
||||
initSpinner() {
|
||||
let buffering = new Set();
|
||||
let tryHiding = () => {
|
||||
// hide the spinner when all streams are done buffering
|
||||
if(buffering.size === 0) {
|
||||
this._spinner.classList.add('hidden');
|
||||
// modifying z-index so controls are still usable when
|
||||
// buffering mid-playback
|
||||
this._spinner.style.zIndex = 1;
|
||||
}
|
||||
}
|
||||
this._sources.forEach((source) => {
|
||||
// show the spinner when playback is stalled
|
||||
source.addEventListener('waiting', (event) => {
|
||||
buffering.add(source);
|
||||
this._spinner.classList.remove('hidden');
|
||||
});
|
||||
source.addEventListener('canplay', (event) => {
|
||||
buffering.delete(source);
|
||||
tryHiding();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Set up keyboard bindings.
|
||||
*/
|
||||
@ -1129,11 +1161,12 @@
|
||||
* Jump in the presentation.
|
||||
*
|
||||
* The arg 'time' gives the time to jump to as a number of seconds
|
||||
* since start. Syncronizes any secondary sources via a custom event.
|
||||
* since start.
|
||||
*/
|
||||
setTime(time) {
|
||||
this._mainSource.currentTime = time;
|
||||
this._mainSource.dispatchEvent(new CustomEvent('sync'));
|
||||
this._sources.forEach((source) => {
|
||||
source.currentTime = time;
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
|
16
style.css
16
style.css
@ -237,6 +237,22 @@ button {
|
||||
grid-area: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
background-color: black;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#loading-overlay > svg {
|
||||
height: 50%;
|
||||
}
|
||||
.select {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
Loading…
x
Reference in New Issue
Block a user