Always display epilepsy, size warning before loading.

src/js/HuesCore.js

@@ -146,7 +146,24 @@ function HuesCore(defaults) {
     this.vCtx = this.visualiser.getContext("2d");
     
     this.soundManager = new SoundManager(this);
-    this.soundManager.init().then(response => {
+    
+    this.resourceManager.getSizes(defaults.respacks).then( sizes => {
+        let size = sizes.reduce( (prev, curr) => {
+            return typeof curr === 'number' ? prev + curr : null;
+        });
+        if(typeof size === 'number') {
+            size = size.toFixed(1);
+        } else {
+            size = '<abbr title="Content-Length header not present for respack URLs">???</abbr>';
+        }
+        
+        this.warning(size + "MB of music/images.<br />" +
+            "Epilepsy warning.<br />" +
+            "<b>Tap or click to start</b>");
+        
+        return this.soundManager.init();
+    }).then(() => {
+        this.clearMessage();
         setInterval(this.loopCheck.bind(this), 1000);
         this.renderer = new HuesCanvas("waifu", this.soundManager.context, this);
         this.settings.connectCore(this);
@@ -168,7 +185,7 @@ function HuesCore(defaults) {
             document.getElementById("preloadHelper").style.display = "none";
             return;
         }
-    }).then(response => {
+    }).then(() => {
         document.getElementById("preloadHelper").classList.add("loaded");
         if(defaults.firstImage) {
             this.setImageByName(defaults.firstImage);
@@ -931,7 +948,7 @@ HuesCore.prototype.error = function(message) {
 
 HuesCore.prototype.warning = function(message) {
     console.log(message);
-    document.getElementById("preSub").textContent = message;
+    document.getElementById("preSub").innerHTML = message;
     document.getElementById("preMain").style.color = "#F93";
 };
 

src/js/HuesEditor.js

@@ -1282,7 +1282,7 @@ HuesEditor.prototype.drawOneWave = function(wave, center, width) {
 
 HuesEditor.prototype.confirmLeave = function() {
     return "Unsaved beatmap - leave anyway?";
-}
+};
 
 HuesEditor.prototype.alert = function(msg) {
     this.statusMsg.classList.remove("fade");

src/js/ResourceManager.js

@@ -76,6 +76,39 @@ function Resources(core) {
     }
 }
 
+/* Uses HTTP HEAD requests to get the size of all the linked URLs
+   Returns an Promise.all which will resolve to an array of sizes */
+Resources.prototype.getSizes = function(urls) {
+    let promises = [];
+    
+    urls.forEach(url => {
+        let p = new Promise((resolve, reject) => {
+            let xhr = new XMLHttpRequest();
+            xhr.open("HEAD", url, true);
+            xhr.onreadystatechange = function() {
+                if (this.readyState == this.DONE) {
+                    let bytes = parseInt(xhr.getResponseHeader("Content-Length"));
+                    resolve(bytes / 1024 / 1024);
+                }
+            };
+            xhr.onerror = function() {
+                reject(Error(req.status + ": Could not fetch respack at " + url));
+            };
+            xhr.send();
+        }).catch(error => {
+            // Infinitely more user friendly than the error Same Origin gives
+            if(error.code == 1012) {
+                throw Error("Respack at URL " + url + " is restricted. Check CORS.");
+            } else {
+                throw error;
+            }
+        });
+        promises.push(p);
+    });
+    
+    return Promise.all(promises);
+};
+
 // Array of URLs to load, and a callback for when we're done
 // Preserves order of URLs being loaded
 Resources.prototype.addAll = function(urls, progressCallback) {

src/js/SoundManager.js

@@ -115,30 +115,25 @@ SoundManager.prototype.init = function() {
             return new Promise((resolve, reject) => {
                 // iOS and other some mobile browsers - unlock the context as
                 // it starts in a suspended state
-                if(this.context.state != "running") {
-                    this.core.warning("We're about to load about 10MB of stuff. Tap to begin!");
-                    let unlocker = () => {
-                        // create empty buffer
-                        let buffer = this.context.createBuffer(1, 1, 22050);
-                        let source =  this.context.createBufferSource();
-                        source.buffer = buffer;
-
-                        // connect to output (your speakers)
-                        source.connect( this.context.destination);
-
-                        // play the file
-                        source.start(0);
-                        
-                        window.removeEventListener('touchend', unlocker);
-                        window.removeEventListener('click', unlocker);
-                        this.core.clearMessage();
-                        resolve();
-                    };
-                    window.addEventListener('touchend', unlocker, false);
-                    window.addEventListener('click', unlocker, false);
-                } else {
+                let unlocker = () => {
+                    // create empty buffer
+                    let buffer = this.context.createBuffer(1, 1, 22050);
+                    let source =  this.context.createBufferSource();
+                    source.buffer = buffer;
+
+                    // connect to output (your speakers)
+                    source.connect( this.context.destination);
+
+                    // play the file
+                    source.start(0);
+                    
+                    window.removeEventListener('touchend', unlocker);
+                    window.removeEventListener('click', unlocker);
+                    this.core.clearMessage();
                     resolve();
-                }
+                };
+                window.addEventListener('touchend', unlocker, false);
+                window.addEventListener('click', unlocker, false);
             });
         });
     }