Fixed TrackHeaderAtom inheritance chain, which was causing a parsing bug. Made the...

[movie_parser.git] / AtomTester.html

diff --git a/AtomTester.html b/AtomTester.html
index 789e24633336267030f319cbd398e8787206729f..26172643932f28a827bb6ebe664a8f5b0f1da7ee 100644 (file)
--- a/AtomTester.html
+++ b/AtomTester.html
@@ -3,30 +3,111 @@
     <title>AtomTester</title>
     <script src=Atom.js></script>
     <script>
     <title>AtomTester</title>
     <script src=Atom.js></script>
     <script>

-        var atoms = [];
+        // Add Blob.prototype.slice if it does not already exist:
+        if (typeof(Blob.prototype.slice) == 'undefined' && typeof(Blob.prototype.webkitSlice) != 'undefined')
+            Blob.prototype.slice = Blob.prototype.webkitSlice;
+
+        var moovAtom;

         function onFileSelect(e) {
             var file = e.target.files[0];
             var reader = new FileReader();
         function onFileSelect(e) {
             var file = e.target.files[0];
             var reader = new FileReader();

-            reader.onload = (function(file) {
-                return function(e) {
-                    var offset = 0;
-                    while (offset < e.target.result.byteLength) {
-                        var atom = new Atom(e.target.result, offset);
-                        if (!atom)
-                            break;
-                        atoms.push(atom);
-                        offset += atom.size;
-                    }
+            output.innerHTML = '';
+            
+            function checkForMoovAtom(offset) {
+                reader.onload = function(e) {
+                    var result = e.target.result;
+                    var basicAtom = new Atom(result);
+                    if (!basicAtom)
+                        return;
+                    else if (basicAtom.type == 'moov') 
+                        readMoovAtom(offset, basicAtom.size);
+                    else
+                        checkForMoovAtom(offset + basicAtom.size);

                 };
                 };

-            })(file);
-            reader.readAsArrayBuffer(file);
+                var subset = file.slice(offset, offset + 16);
+                reader.readAsArrayBuffer(subset);
+            };
+            
+            function readMoovAtom(offset, length) {
+                reader.onload = function(e) { 
+                    moovAtom = Atom.create(e.target.result);
+                    var output = document.getElementById('output');
+                    output.appendChild(toDOMNode(moovAtom));
+                };
+                var subset = file.slice(offset, offset + length);
+                reader.readAsArrayBuffer(subset);
+            };
+            
+            checkForMoovAtom(0);
+        }
+        
+        function toDOMRepresentation(object)
+        {
+            if (object instanceof Atom)
+                return toDOMNode(object);
+            else if (object instanceof Array) {
+                var span = document.createElement('span');
+                span.appendChild(document.createTextNode('['));
+                for (var i = 0; i < object.length; ++i) {
+                    span.appendChild(toDOMRepresentation(object[i]));
+                    if (i + 1 < object.length)
+                        span.appendChild(document.createTextNode(', '));
+                }
+                span.appendChild(document.createTextNode(']'));
+                return span;
+            }
+            else if (typeof(object) == "string")
+                return document.createTextNode('"' + object + '"');
+            else if (object instanceof Date)
+                return document.createTextNode(object.toLocaleString());
+            else
+                return document.createTextNode(object.toString());
+        }
+        
+        function toDOMNode(object)
+        {
+            var output = document.createElement('dl');
+
+            for (property in object) {
+                var value = object[property];
+                if (typeof(value) == 'function')
+                    continue;
+                var div = document.createElement('div');
+                var dt = document.createElement('dt');
+                dt.appendChild(document.createTextNode(property));
+                var dd = document.createElement('dd');
+                dd.appendChild(toDOMRepresentation(value));
+                div.appendChild(dt);
+                div.appendChild(dd);
+                output.appendChild(div);
+            }
+            return output;

         }
         
         function setup() {
             document.getElementById('file').addEventListener('change', onFileSelect, false);
         }
     </script>
         }
         
         function setup() {
             document.getElementById('file').addEventListener('change', onFileSelect, false);
         }
     </script>

+    <style>
+        dl { border: 1px solid black; padding: 1px; }
+        dt, dd { display: inline; }
+        dt:after { content:": " }
+        dd:after { content:"\A"; white-space:pre; }
+        dd dl { margin: 0; vertical-align: top }
+        dd span { display: inline-block; vertical-align: top; }
+
+        dt, dd { display: inline-block; min-width: 8em; }
+        dd { margin-left: 1em; }
+        
+        /* make the output display as a table */
+        /*
+        dl { display: table; }
+        dl div { display: table-row; }
+        dt, dd { display: table-cell; }
+        */
+    </style>

 </head>
 <body id="atomtester" onload="setup()">
     <input type="file" id="file" name="file" />
 </head>
 <body id="atomtester" onload="setup()">
     <input type="file" id="file" name="file" />

+    <div id=output>

 </body>
\ No newline at end of file
 </body>
\ No newline at end of file