Loading progress and big endian

index.html

@@ -84,9 +84,10 @@
                 margin: 0 auto;
             }
 
-        #previewimg, audio.preview, video.preview {
+        #previewimg, audio.preview, video.preview, #downloadprogress {
             position: relative;
             top: 50%;
+            text-align: center;
             transform: translateY(-50%);
         }
 
@@ -162,6 +163,11 @@
             -moz-box-sizing: border-box;
         }
 
+
+        #downloadprogress {
+            color: white;
+        }
+
             .btn:hover {
                 opacity: 1;
             }
@@ -192,7 +198,11 @@
     </div>
 
 
+    
+
     <div id="downloadview" class="hidden">
+
+        <h1 id="downloadprogress"></h1>
         <div id="downloaddetails" class="hidden">
             <h1 id="filename">Filename</h1>
             <img src="" class="hidden preview" id="previewimg" />

static/js/downloadable.js

@@ -19,11 +19,7 @@ $(function () {
             var seed = window.location.hash.substring(1)
 
             function embed(data) {
-                details.find('.preview').addClass('hidden')
-                details.find('video.preview').prop('src', '')
-                details.find('audio.preview').prop('src', '')
-                previewimg.prop('src', '')
-                previewtext.find('code').empty()
+               
 
                 previewfilename.text(data.header.name)
                
@@ -55,22 +51,38 @@ $(function () {
                 } else {
                     // Unknown, todo
                 }
-
+                $('#downloadprogress').text('').hide()
                 details.removeClass('hidden')
             }
 
             function downloaded() {
+                $('#downloadprogress').text('Decrypting')
                 crypt.decrypt(this.response, seed).done(embed)
             }
 
+            function downloadprogress(e) {
+                var percent = (e.loaded / e.total) * 100
+                $('#downloadprogress').text(Math.floor(percent) + '%')
+            }
+
             function downloadfromident(ident) {
                 var xhr = new XMLHttpRequest();
                 xhr.onload = downloaded
-                xhr.open('GET', 'https://e.3d3.ca/i/' + ident.ident);
-                xhr.responseType = 'blob';
-                xhr.send();
+                xhr.open('GET', 'https://e.3d3.ca/i/' + ident.ident)
+                xhr.responseType = 'blob'
+                
+                xhr.addEventListener('progress', downloadprogress, false)
+                xhr.send()
             }
 
+            details.find('.preview').addClass('hidden')
+            details.find('video.preview').prop('src', '')
+            details.find('audio.preview').prop('src', '')
+            previewimg.prop('src', '')
+            previewtext.find('code').empty()
+            details.addClass('hidden')
+            upview.addClass('hidden')
+            $('#downloadprogress').show().text('Loading')
             crypt.ident(seed).done(downloadfromident)
         } else {
             upview.removeClass('hidden')

static/js/encryption.js

@@ -34,6 +34,9 @@ function encrypt(file, seed, id) {
     })
 }
 
+function decode_utf8(s) {
+    return decodeURIComponent(escape(s));
+}
 
 function decrypt(file, seed, id) {
     var params = parameters(seed)
@@ -43,9 +46,19 @@ function decrypt(file, seed, id) {
     var after = sjcl.mode.ccm.decrypt(prp, before, params.iv);
     var afterarray = new Uint8Array(sjcl.codec.bytes.fromBits(after));
 
-    var headerlength = new Uint16Array([afterarray[0], afterarray[1]])[0];
+    var headerlengthbuffer = new Uint8Array(Array.prototype.slice.call(afterarray, 0, 2)).buffer
 
-    var header = String.fromCharCode.apply(null, new Uint16Array(new Uint8Array(Array.prototype.slice.call(afterarray, 2, (headerlength + 1) * 2)).buffer));
+    var headerlength = new DataView(headerlengthbuffer).getUint16(0)
+
+    var headerbuffer = new Uint8Array(Array.prototype.slice.call(afterarray, 2, (headerlength + 1) * 2)).buffer
+
+    var header = ''
+
+    var headerview = new DataView(headerbuffer)
+
+    for (var i = 0; i < headerlength; i++) {
+        header += String.fromCharCode(headerview.getUint16(i * 2, false));
+    }
 
     var header = JSON.parse(header)
 

static/js/loadencryption.js

@@ -20,9 +20,9 @@ $(function () {
 
     function str2ab(str) {
         var buf = new ArrayBuffer(str.length * 2);
-        var bufView = new Uint16Array(buf);
+        var bufView = new DataView(buf);
         for (var i = 0, strLen = str.length; i < strLen; i++) {
-            bufView[i] = str.charCodeAt(i);
+            bufView.setUint16(i * 2, str.charCodeAt(i), false)
         }
         return buf;
     }
@@ -50,7 +50,9 @@ $(function () {
             'name': file.name ? file.name : ('Pasted ' + (file.type.startsWith('text/') ? 'text' : 'file'))
         })
 
-        var length = new Uint16Array([header.length])
+        var length = new ArrayBuffer(2);
+
+        var dv = new DataView(length).setUint16(0, header.length, false)
 
         var blob = new Blob([length, str2ab(header), file])