Implemented a spinner that pops up when any stream is buffering

This commit is contained in:
Erik Thuning 2023-01-20 14:40:05 +01:00
parent f4081d0523
commit 5da12d47f8
2 changed files with 52 additions and 3 deletions

@ -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;
});
}
/*

@ -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;