Factor out JSZipUtils, support local skins

file-manager.js

@@ -11,4 +11,29 @@ function FileManager () {
     this.urlFromFileReference = function(fileReference) {
         return URL.createObjectURL(fileReference);
     }
+
+    this.bufferFromFileReference = function(fileReference, bufferHandler) {
+        this.reader.onload = function (e) {
+            var arrayBuffer = e.target.result;
+            bufferHandler(arrayBuffer);
+        };
+        this.reader.onerror = function (e) {
+            //console.error(e);
+        };
+
+        this.reader.readAsArrayBuffer(fileReference);
+    }.bind(this)
+
+    this.bufferFromUrl = function(url, bufferHandler) {
+        var oReq = new XMLHttpRequest();
+        oReq.open("GET", url, true);
+        oReq.responseType = "arraybuffer";
+
+        oReq.onload = function (oEvent) {
+            var arrayBuffer = oReq.response; // Note: not oReq.responseText
+            bufferHandler(arrayBuffer);
+        };
+
+        oReq.send(null);
+    }.bind(this)
 }

index.html

@@ -73,8 +73,7 @@
         </div>
         <p style="position: absolute; bottom: 0;">by <a href='https://twitter.com/captbaritone'>@captbaritone</a> - <a href='https://github.com/captbaritone/winamp2-js'>GitHub</a></p>
 
-        <script src="http://stuk.github.io/jszip/dist/jszip.js"></script>
-        <script src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
 
         <script src="file-manager.js"></script>
         <script src="media.js"></script>

skin.js

@@ -1,6 +1,7 @@
 // Dynamically set the css background images for all the sprites
 SkinManager = function() {
     var self = this;
+    this.fileManager = new FileManager();
 
     this._skinImages = {
         "#winamp": "MAIN.BMP",
@@ -34,23 +35,19 @@ SkinManager = function() {
         ".shade #position::-moz-range-thumb": "TITLEBAR.BMP",
     }
 
+    // Given a file of an original Winamp WSZ file, set the current skin
+    this.setSkinByFileReference = function(fileReference) {
+        this.fileManager.bufferFromFileReference(fileReference, this._setSkinByBuffer);
+    }.bind(this)
+
     // Given the url of an original Winamp WSZ file, set the current skin
     this.setSkinByUrl = function(url) {
-        JSZipUtils.getBinaryContent(url, function(err, data) {
-            if (err) {
-                alert('Failed to load skin ' + url + ' : ' + err);
-            }
-            try {
-                this._setSkinByDataBlob(data);
-            } catch(e) {
-                alert('Failed to load skin ' + url + ' : ' + e.message);
-            }
-        }.bind(this));
-    }
+        this.fileManager.bufferFromUrl(url, this._setSkinByBuffer);
+    }.bind(this)
 
-    // Given a raw blob of a Winamp WSZ file, set the current skin
-    this._setSkinByDataBlob = function(data) {
-        var zip = new JSZip(data);
+    // Given a bufferArray containing a Winamp WSZ file, set the current skin
+    this._setSkinByBuffer = function(buffer) {
+        var zip = new JSZip(buffer);
 
         var style = document.getElementById('skin');
         // XXX Ideally we would empty the style tag here, but I don't know how

winamp.js

@@ -356,8 +356,12 @@ function Winamp () {
     this.nodes.winamp.addEventListener('drop', this.drop);
 
     this.startFileViaReference = function(fileReference) {
-        var url = self.fileManager.urlFromFileReference(fileReference);
-        self.startFile(url, fileReference.name);
+        if(new RegExp("(wsz|zip)", 'i').test(fileReference.name)) {
+            self.skinManager.setSkinByFileReference(fileReference);
+        } else {
+            var url = self.fileManager.urlFromFileReference(fileReference);
+            self.startFile(url, fileReference.name);
+        }
     }
 
     this.startFile = function(file, fileName) {