Show loading progress
This commit is contained in:
parent
2de283af8e
commit
30c4b1d594
63
shell.html
63
shell.html
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
#spinner {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
bottom: 40px;
|
||||
left: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
@ -80,6 +80,16 @@
|
|||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#progress {
|
||||
background-color: white;
|
||||
opacity: 0.6;
|
||||
position: fixed;
|
||||
bottom: 0; left: 0;
|
||||
color: black;
|
||||
padding: 3px 10px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -87,6 +97,7 @@
|
|||
<div style="overflow:visible;" id="spinner">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div id="progress">Loading ...</div>
|
||||
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width="640" height="480"></canvas>
|
||||
</div>
|
||||
|
@ -179,11 +190,11 @@
|
|||
};
|
||||
|
||||
window.setBusy = function() {
|
||||
document.getElementById('spinner').style.display = "block";
|
||||
document.getElementById('spinner').style.opacity = "0.5";
|
||||
};
|
||||
|
||||
window.setNotBusy = function() {
|
||||
document.getElementById('spinner').style.display = "none";
|
||||
document.getElementById('spinner').style.opacity = "0";
|
||||
};
|
||||
|
||||
function fullscreen() {
|
||||
|
@ -206,10 +217,54 @@
|
|||
const url = mapping[f.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "")];
|
||||
if (!url) return;
|
||||
|
||||
fetch('gameasync/' + url).then().catch();
|
||||
// Get filename
|
||||
let filename = url.split('?')[0];
|
||||
filename = filename.split('/');
|
||||
filename = filename[filename.length -1];
|
||||
|
||||
// Preload asset
|
||||
getLazyAsset('gameasync/' + url, filename, () => {});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var hideTimer = 0;
|
||||
function getLazyAsset(url, filename, callback) {
|
||||
const xhr = new XMLHttpRequest();
|
||||
const pdiv = document.getElementById("progress");
|
||||
let showTimer = 0;
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState == XMLHttpRequest.DONE) {
|
||||
pdiv.innerHTML = `${filename} - done`;
|
||||
hideTimer = setTimeout(() => {
|
||||
window.setNotBusy();
|
||||
pdiv.style.opacity = '0';
|
||||
hideTimer = 0;
|
||||
}, 500);
|
||||
callback();
|
||||
|
||||
clearTimeout(showTimer);
|
||||
}
|
||||
}
|
||||
xhr.onprogress = function (event) {
|
||||
const loaded = Math.round(event.loaded / 1024);
|
||||
const total = Math.round(event.total / 1024);
|
||||
pdiv.innerHTML = `${filename} - ${loaded}KB / ${total}KB`;
|
||||
};
|
||||
xhr.open('GET', url);
|
||||
xhr.send();
|
||||
|
||||
showTimer = setTimeout(() => {
|
||||
pdiv.style.opacity = '0.5';
|
||||
window.setBusy();
|
||||
}, 100);
|
||||
|
||||
if (hideTimer) {
|
||||
clearTimeout(hideTimer);
|
||||
hideTimer = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{{{ SCRIPT }}}
|
||||
|
|
|
@ -13,9 +13,6 @@ EM_JS(void, load_file_async_js, (const char* fullPathC), {
|
|||
// Check if already loaded
|
||||
if (window.fileAsyncCache.hasOwnProperty(fullPath)) return wakeUp();
|
||||
|
||||
// Show spinner
|
||||
if (window.setBusy) window.setBusy();
|
||||
|
||||
// Get mapping key
|
||||
const mappingKey = fullPath.toLowerCase().replace(new RegExp("\\\\.[^/.]+$"), "");
|
||||
const mappingValue = mapping[mappingKey];
|
||||
|
@ -39,12 +36,13 @@ EM_JS(void, load_file_async_js, (const char* fullPathC), {
|
|||
} catch (err) {}
|
||||
|
||||
// Get the new file
|
||||
FS.createPreloadedFile(path, filename, iurl, true, true, function() {
|
||||
window.fileAsyncCache[fullPath] = 1;
|
||||
if (window.setNotBusy) window.setNotBusy();
|
||||
if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
|
||||
wakeUp();
|
||||
}, console.error);
|
||||
getLazyAsset(iurl, filename, () => {
|
||||
FS.createPreloadedFile(path, filename, iurl, true, true, function() {
|
||||
window.fileAsyncCache[fullPath] = 1;
|
||||
if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
|
||||
wakeUp();
|
||||
}, console.error);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue