Joe Osborn 0f4166a59f
Use ZipFS for web player asset bundle (#15924)
* wip

* fix mount path

* Fix path for zip bundle

* fix case where idbfs sets up correctly and filesystem initializes too early

* Use partfiles to keep each zip small

* use bufferview slices instead of resize to support firefox
2023-11-17 11:25:45 -08:00

407 lines
12 KiB
JavaScript

/**
* RetroArch Web Player
*
* This provides the basic JavaScript for the RetroArch web player.
*/
var BrowserFS = BrowserFS;
var afs;
var initializationCount = 0;
var setImmediate;
var Module = {
noInitialRun: true,
arguments: ["-v", "--menu"],
encoder: new TextEncoder(),
message_queue:[],
message_out:[],
message_accum:"",
retroArchSend: function(msg) {
let bytes = this.encoder.encode(msg+"\n");
this.message_queue.push([bytes,0]);
},
retroArchRecv: function() {
let out = this.message_out.shift();
if(out == null && this.message_accum != "") {
out = this.message_accum;
this.message_accum = "";
}
return out;
},
preRun: [
function(module) {
function stdin() {
// Return ASCII code of character, or null if no input
while(module.message_queue.length > 0){
var msg = module.message_queue[0][0];
var index = module.message_queue[0][1];
if(index >= msg.length) {
module.message_queue.shift();
} else {
module.message_queue[0][1] = index+1;
// assumption: msg is a uint8array
return msg[index];
}
}
return null;
}
function stdout(c) {
if(c == null) {
// flush
if(module.message_accum != "") {
module.message_out.push(module.message_accum);
module.message_accum = "";
}
} else {
let s = String.fromCharCode(c);
if(s == "\n") {
if(module.message_accum != "") {
module.message_out.push(module.message_accum);
module.message_accum = "";
}
} else {
module.message_accum = module.message_accum+s;
}
}
}
module.FS.init(stdin, stdout);
}
],
postRun: [],
onRuntimeInitialized: function()
{
appInitialized();
},
print: function(text)
{
console.log(text);
},
printErr: function(text)
{
console.error(text);
},
canvas: document.getElementById("canvas"),
totalDependencies: 0,
monitorRunDependencies: function(left)
{
this.totalDependencies = Math.max(this.totalDependencies, left);
}
};
function cleanupStorage()
{
localStorage.clear();
if (BrowserFS.FileSystem.IndexedDB.isAvailable())
{
var req = indexedDB.deleteDatabase("RetroArch");
req.onsuccess = function () {
console.log("Deleted database successfully");
};
req.onerror = function () {
console.log("Couldn't delete database");
};
req.onblocked = function () {
console.log("Couldn't delete database due to the operation being blocked");
};
}
document.getElementById("btnClean").disabled = true;
}
function idbfsInit()
{
$('#icnLocal').removeClass('fa-globe');
$('#icnLocal').addClass('fa-spinner fa-spin');
var imfs = new BrowserFS.FileSystem.InMemory();
if (BrowserFS.FileSystem.IndexedDB.isAvailable())
{
afs = new BrowserFS.FileSystem.AsyncMirror(imfs,
new BrowserFS.FileSystem.IndexedDB(function(e, fs)
{
if (e)
{
//fallback to imfs
afs = new BrowserFS.FileSystem.InMemory();
console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem");
appInitialized();
}
else
{
// initialize afs by copying files from async storage to sync storage.
afs.initialize(function (e)
{
if (e)
{
afs = new BrowserFS.FileSystem.InMemory();
console.log("WEBPLAYER: error: " + e + " falling back to in-memory filesystem");
appInitialized();
}
else
{
idbfsSyncComplete();
}
});
}
},
"RetroArch"));
}
}
function idbfsSyncComplete()
{
$('#icnLocal').removeClass('fa-spinner').removeClass('fa-spin');
$('#icnLocal').addClass('fa-check');
console.log("WEBPLAYER: idbfs setup successful");
appInitialized();
}
function appInitialized()
{
/* Need to wait for the file system, the wasm runtime, and the zip download
to complete before enabling the Run button. */
initializationCount++;
if (initializationCount == 3)
{
setupFileSystem("browser");
preLoadingComplete();
}
}
function preLoadingComplete()
{
/* Make the Preview image clickable to start RetroArch. */
$('.webplayer-preview').addClass('loaded').click(function () {
startRetroArch();
return false;
});
document.getElementById("btnRun").disabled = false;
$('#btnRun').removeClass('disabled');
}
var zipTOC;
function zipfsInit() {
// 256 MB max bundle size
let buffer = new ArrayBuffer(256*1024*1024);
let bufferView = new Uint8Array(buffer);
let idx = 0;
// bundle should be in four parts (this can be changed later)
Promise.all([fetch("assets/frontend/bundle.zip.aa"),
fetch("assets/frontend/bundle.zip.ab"),
fetch("assets/frontend/bundle.zip.ac"),
fetch("assets/frontend/bundle.zip.ad")
]).then(function(resps) {
Promise.all(resps.map((r) => r.arrayBuffer())).then(function(buffers) {
for (let buf of buffers) {
if (idx+buf.byteLength > buffer.maxByteLength) {
console.log("WEBPLAYER: error: bundle.zip is too large");
}
bufferView.set(new Uint8Array(buf), idx, buf.byteLength);
idx += buf.byteLength;
}
BrowserFS.FileSystem.ZipFS.computeIndex(BrowserFS.BFSRequire('buffer').Buffer(new Uint8Array(buffer, 0, idx)), function(toc) {
zipTOC = toc;
appInitialized();
});
})
});
}
function setupFileSystem(backend)
{
/* create a mountable filesystem that will server as a root
mountpoint for browserfs */
var mfs = new BrowserFS.FileSystem.MountableFileSystem();
/* create an XmlHttpRequest filesystem for the bundled data */
var xfs1 = new BrowserFS.FileSystem.ZipFS(zipTOC);
/* create an XmlHttpRequest filesystem for core assets */
var xfs2 = new BrowserFS.FileSystem.XmlHttpRequest
(".index-xhr", "assets/cores/");
console.log("WEBPLAYER: initializing filesystem: " + backend);
mfs.mount('/home/web_user/retroarch/userdata', afs);
mfs.mount('/home/web_user/retroarch/', xfs1);
mfs.mount('/home/web_user/retroarch/userdata/content/downloads', xfs2);
BrowserFS.initialize(mfs);
var BFS = new BrowserFS.EmscriptenFS(Module.FS, Module.PATH, Module.ERRNO_CODES);
Module.FS.mount(BFS, {root: '/home'}, '/home');
console.log("WEBPLAYER: " + backend + " filesystem initialization successful");
}
/**
* Retrieve the value of the given GET parameter.
*/
function getParam(name) {
var results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results) {
return results[1] || null;
}
}
function startRetroArch()
{
$('.webplayer').show();
$('.webplayer-preview').hide();
document.getElementById("btnRun").disabled = true;
$('#btnFullscreen').removeClass('disabled');
$('#btnMenu').removeClass('disabled');
$('#btnAdd').removeClass('disabled');
$('#btnRom').removeClass('disabled');
document.getElementById("btnAdd").disabled = false;
document.getElementById("btnRom").disabled = false;
document.getElementById("btnMenu").disabled = false;
document.getElementById("btnFullscreen").disabled = false;
Module["canvas"] = document.getElementById("canvas");
Module["canvas"].addEventListener("click", () => Module["canvas"].focus());
Module['callMain'](Module['arguments']);
Module['resumeMainLoop']();
Module['canvas'].focus();
}
function selectFiles(files)
{
$('#btnAdd').addClass('disabled');
$('#icnAdd').removeClass('fa-plus');
$('#icnAdd').addClass('fa-spinner spinning');
var count = files.length;
for (var i = 0; i < count; i++)
{
filereader = new FileReader();
filereader.file_name = files[i].name;
filereader.readAsArrayBuffer(files[i]);
filereader.onload = function(){uploadData(this.result, this.file_name)};
filereader.onloadend = function(evt)
{
console.log("WEBPLAYER: file: " + this.file_name + " upload complete");
if (evt.target.readyState == FileReader.DONE)
{
$('#btnAdd').removeClass('disabled');
$('#icnAdd').removeClass('fa-spinner spinning');
$('#icnAdd').addClass('fa-plus');
}
}
}
}
function uploadData(data,name)
{
var dataView = new Uint8Array(data);
Module.FS.createDataFile('/', name, dataView, true, false);
var data = Module.FS.readFile(name,{ encoding: 'binary' });
Module.FS.writeFile('/home/web_user/retroarch/userdata/content/' + name, data ,{ encoding: 'binary' });
Module.FS.unlink(name);
}
function switchCore(corename) {
localStorage.setItem("core", corename);
}
function switchStorage(backend) {
if (backend != localStorage.getItem("backend"))
{
localStorage.setItem("backend", backend);
location.reload();
}
}
// When the browser has loaded everything.
$(function() {
// Enable all available ToolTips.
$('.tooltip-enable').tooltip({
placement: 'right'
});
// Allow hiding the top menu.
$('.showMenu').hide();
$('#btnHideMenu, .showMenu').click(function () {
$('nav').slideToggle('slow');
$('.showMenu').toggle('slow');
});
/**
* Attempt to disable some default browser keys.
*/
var keys = {
9: "tab",
13: "enter",
16: "shift",
18: "alt",
27: "esc",
33: "rePag",
34: "avPag",
35: "end",
36: "home",
37: "left",
38: "up",
39: "right",
40: "down",
112: "F1",
113: "F2",
114: "F3",
115: "F4",
116: "F5",
117: "F6",
118: "F7",
119: "F8",
120: "F9",
121: "F10",
122: "F11",
123: "F12"
};
window.addEventListener('keydown', function (e) {
if (keys[e.which]) {
e.preventDefault();
}
});
// Switch the core when selecting one.
$('#core-selector a').click(function () {
var coreChoice = $(this).data('core');
switchCore(coreChoice);
});
// Find which core to load.
var core = localStorage.getItem("core", core);
if (!core) {
core = 'gambatte';
}
loadCore(core);
});
function loadCore(core) {
// Make the core the selected core in the UI.
var coreTitle = $('#core-selector a[data-core="' + core + '"]').addClass('active').text();
$('#dropdownMenu1').text(coreTitle);
// Load the Core's related JavaScript.
import("./"+core+"_libretro.js").then(script => {
script.default(Module).then(mod => {
Module = mod;
$('#icnRun').removeClass('fa-spinner').removeClass('fa-spin');
$('#icnRun').addClass('fa-play');
$('#lblDrop').removeClass('active');
$('#lblLocal').addClass('active');
idbfsInit();
zipfsInit();
}).catch(err => { console.error("Couldn't instantiate module",err); throw err; });
}).catch(err => { console.error("Couldn't load script",err); throw err; });
}
function keyPress(k)
{
function kp(k, event) {
var oEvent = new KeyboardEvent(event, { code: k });
document.dispatchEvent(oEvent);
document.getElementById('canvas').focus();
}
kp(k, "keydown");
setTimeout(function(){kp(k, "keyup")}, 50);
}