Use a more concise text format for mp4 diffing

Create textifyMp4() to output a text representation of an inspected mp4. It's more concise than straight JSON.stringify() so hopefully it will allow for quicker comparisons between working and transmuxed MP4s.

@@ -404,12 +404,12 @@ form label {
 /**
  * Diff styling
  */
-#comparison {
-  white-space: pre;
-}
 #comparison p {
   white-space: normal;
 }
+#comparison pre {
+  font-size: 90%;
+}
 ins, del {
   text-decoration: none;
 }

@@ -735,4 +735,65 @@ videojs.inspectMp4 = function(data) {
   }
   return result;
 };
+
+/**
+ * Returns a textual representation of the javascript represtentation
+ * of an MP4 file. You can use it as an alternative to
+ * JSON.stringify() to compare inspected MP4s.
+ * @param inspectedMp4 {array} the parsed array of boxes in an MP4
+ * file
+ * @param depth {number} (optional) the number of ancestor boxes of
+ * the elements of inspectedMp4. Assumed to be zero if unspecified.
+ * @return {string} a text representation of the parsed MP4
+ */
+videojs.textifyMp4 = function(inspectedMp4, depth) {
+  var indent;
+  depth = depth || 0;
+  indent = Array(depth * 2 + 1).join(' ');
+
+  // iterate over all the boxes
+  return inspectedMp4.map(function(box, index) {
+
+    // list the box type first at the current indentation level
+    return indent + box.type + '\n' +
+
+      // the type is already included and handle child boxes separately
+      Object.keys(box).filter(function(key) {
+        return key !== 'type' && key !== 'boxes';
+
+      // output all the box properties
+      }).map(function(key) {
+        var prefix = indent + '  ' + key + ': ',
+            value = box[key];
+
+        // print out raw bytes as hexademical
+        if (value instanceof Uint8Array || value instanceof Uint32Array) {
+          var bytes = Array.prototype.slice.call(new Uint8Array(value.buffer, value.byteOffset, value.byteLength))
+              .map(function(byte) {
+                return ' ' + ('00' + byte.toString(16)).slice(-2);
+              }).join('').match(/.{1,24}/g);
+          if (bytes.length === 1) {
+            return prefix + '<' + bytes.join('').slice(1) + '>';
+          }
+          return prefix + '<\n' + bytes.map(function(line) {
+            return indent + '  ' + line;
+          }).join('\n') + '\n' + indent + '  >';
+        }
+
+        // stringify generic objects
+        return prefix +
+            JSON.stringify(value, null, 2)
+              .split('\n').map(function(line, index) {
+                if (index === 0) {
+                  return line;
+                }
+                return indent + '  ' + line;
+              }).join('\n');
+      }).join('\n') +
+
+    // recursively textify the child boxes
+    (box.boxes ? '\n' + videojs.textifyMp4(box.boxes, depth + 1) : '');
+  }).join('\n');
+};
+
 })(window, window.videojs);

@@ -127,9 +127,6 @@
         original = document.getElementById('original'),
         working = document.getElementById('working'),
 
-        // customize JSON.stringify for more readable TypedArrays
-        stringify,
-
         vjsParsed,
         workingParsed,
         diffParsed,
@@ -150,22 +147,6 @@
           console.log(event.type);
         };
 
-
-    stringify = function(object) {
-      return JSON.stringify(object, function(s, o) {
-        if (o instanceof Uint8Array) {
-          return Array.prototype.slice.call(o).map(function(byte) {
-            return ('00' + byte.toString(16)).slice(-2);
-          });
-        } else if (o instanceof Uint32Array) {
-          return Array.prototype.slice.call(o).map(function(byte) {
-            return ('00000000' + byte.toString(16)).slice(-8);
-          });
-        }
-        return o;
-      }, ' ');
-    };
-
     // output a diff of the two parsed MP4s
     diffParsed = function() {
       var comparison, diff, transmuxed;
@@ -189,8 +170,11 @@
         'working version. A <ins>green background</ins> indicates ' +
         'properties present in the working version but missing in the ' +
         'transmuxed output.</p>';
-      diff += QUnit.diff(stringify(transmuxed, null, ' '),
-                         stringify(workingParsed, null, ' '));
+      diff += '<pre class="mp4-diff">' +
+        QUnit.diff(videojs.textifyMp4(transmuxed, null, ' '),
+                   videojs.textifyMp4(workingParsed, null, ' ')) +
+        '</pre>';
+
       comparison.innerHTML = diff;
     };
 
@@ -252,7 +236,7 @@
         diffParsed();
 
         // clear old box info
-        vjsBoxes.innerHTML = stringify(vjsParsed, null, ' ');
+        vjsBoxes.innerHTML = videojs.textifyMp4(vjsParsed, null, ' ');
 
         // write out the result
         hex += '<pre>';
@@ -279,7 +263,7 @@
         diffParsed();
 
         // clear old box info
-        workingBoxes.innerHTML = stringify(workingParsed, null, ' ');
+        workingBoxes.innerHTML = videojs.textifyMp4(workingParsed, null, ' ');
 
         // output the hex dump
         hex += '<pre>';
@@ -288,7 +272,7 @@
         workingOutput.innerHTML = hex;
 
         // XXX Media Sources Testing
-        //window.vjsSourceBuffer.appendBuffer(bytes);
+        // window.vjsSourceBuffer.appendBuffer(bytes);
       });
       reader.readAsArrayBuffer(this.files[0]);
     }, false);