epiclabs-io · tchakabam · Jun 2, 2018 · Jun 2, 2018 · Jun 4, 2018 · Jun 4, 2018
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,28 @@
+root = true
+
+[*]
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+
+[*.yml]
+indent_size = 2
+
+[*.json]
+indent_size = 2
+
+[*.html]
+indent_size = 2
+
+[*.css]
+indent_size = 2
+
+[.*]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "build:prod": "cross-env NODE_ENV=production webpack --config ./webpack.config.js  --progress --profile --color --display-error-details --display-cached --bail",
     "clean": "npm cache clear && rimraf -- dist",
     "test": "npm run build:dev && mocha --compilers js:babel-core/register --colors ./test/*.spec.js",
-    "test:watch": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
+    "test:watch": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js",
+    "lint": "tslint --project ."
   },
   "author": "[email protected]",
   "license": "ISC",
@@ -39,7 +40,6 @@
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "tslint": "^5.1.0",
-    "tslint-loader": "^3.5.2",
     "typescript": "^2.2.2",
     "webpack": "^2.4.1",
     "webpack-build-notifier": "^0.1.14",

diff --git a/samples/.editorconfig b/samples/.editorconfig
@@ -0,0 +1,2 @@
+[*.js]
+indent_size = 2
diff --git a/samples/index.html b/samples/index.html
@@ -1,214 +1,79 @@
 <!DOCTYPE html>
-<html ng-app="myApp">
+<html>
 
 <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>
-    <%= htmlWebpackPlugin.options.title %>
+    Inspector.js - media file viewer and analyzer
   </title>
-  <meta name="description" content="<%= htmlWebpackPlugin.options.title %>">
-  <style>
-    body {
-      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
-    }
+  <meta name="description" content="Inspector.js - media file viewer and analyzer">
 
-    #atoms-info {
-      margin-top: 20px;
-      background-color: #94bf1e;
-      color: #ffffff;
-      border: 1px solid black;
-      display: flex;
-    }
-
-    .atom_column {
-      flex: 50%;
-    }
-
-    #atoms li {
-      cursor: pointer;
-    }
-
-    #details {
-      background-color: #000000;
-    }
-
-    #tracks {
-      margin-top: 20px;
-    }
-  </style>
+  <link rel="stylesheet" href="/samples/style.css">
 </head>
 
 <body>
-    <h3>Basic sample</h3>
+    <h3>Inspector.js - media file viewer and analyzer</h3>
   <div>
     Sample media assets:
     <select id="mediaUrl">
       <option value="https://video-dev.github.io/streams/x36xhzz/url_0/url_462/193039199_mp4_h264_aac_hd_7.ts">TS Segment</option>
       <option value="http://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/segment2_0_av.ts">Another TS Segment</option>
       <option value="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps_480x270_600k/bbb_30fps_480x270_600k_0.m4v">MP4 Init Segment</option>
       <option value="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps_480x270_600k/bbb_30fps_480x270_600k_1.m4v">MP4 Segment</option>
+      <option value="https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/v-0480p-1000k-libx264.mp4">Fragmented MP4 video file (multi-segment)</option>
+      <option value="https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/a-eng-0128k-aac.mp4">Fragmented MP4 audio file (multi-segment)</option>
       <option value="https://media.axprod.net/TestVectors/v7-Clear/8/init.mp4">MP4 Init Segment H265</option>
       <option value="https://media.axprod.net/TestVectors/v7-Clear/8/0001.m4s">MP4 Segment H265</option>
       <option value="http://well-to-do-view.surge.sh/big-buck-bunny_trailer.webm">WebM file</option>
       <option value="https://storage.googleapis.com/shaka-demo-assets/sintel-webm-only/v-0240p-0300k-vp9.webm">WebM video segment of DASH stream</option>
       <option value="https://storage.googleapis.com/shaka-demo-assets/sintel-webm-only/a-eng-0128k-libopus.webm">WebM audio segment of DASH stream</option>
     </select>
-    <input type="button" value="Inspect" onclick="inspectMedia()">
+    <input type="button" value="Inspect selected sample" onclick="inspectMedia('remote-sample-media')">
   </div>
 
-  <div id="atoms-info">
-    <div id="atoms" class="atom_column">
-    </div>
-    <div id="details" class="atom_column">
-    </div>
-  </div>
-
-  <div id="tracks"></div>
-
-  <script>
-    function inspectMedia() {
-      clearTracksInfo();
-      clearAtomsTree();
-      clearAtomDetails();
-
-      var mediaUrl = document.getElementById("mediaUrl").value;
-      if (!mediaUrl) return;
-
-      var req = new XMLHttpRequest();
-      req.open('GET', mediaUrl, true);
-      req.responseType = 'arraybuffer';
-
-      req.onload = function (data) {
-        var arrayBuffer = req.response;
-        if (arrayBuffer) {
-          var byteArray = new Uint8Array(arrayBuffer);
-
-          var demuxer = createDemuxer(mediaUrl);
-          demuxer.append(byteArray);
-          demuxer.end();
-
-          updateAtomsInfo(demuxer);
-          updateTracksInfo(demuxer);
-        }
-      };
-
-      req.send(null);
-    }
-
-    function createDemuxer(mediaUrl) {
-      // Find out demuxer looking at file extension. "Enough" good for this sample
-      var ext = mediaUrl.split('.').pop();
-      if (ext === 'ts') {
-        return inspectorjs.createMpegTSDemuxer();
-      } else if (ext === 'webm') {
-        return inspectorjs.createWebMDemuxer();
-      } else {
-        return inspectorjs.createMp4Demuxer();
-      }
-    }
-
-    function updateTracksInfo(demuxer) {
-      var el = document.getElementById('tracks');
-      for (var trackId in demuxer.tracks) {
-        addTrackInfo(el, demuxer.tracks[trackId]);
-      }
-    }
-
-    function addTrackInfo(el, track) {
-      var trackEl = document.createElement('div');
+  <br>
 
-      // Add track general info
-      trackEl.innerHTML = '<h4>Track # ' + track.id + ' - ' + track.mimeType + '</h4>';
-
-      // Add frame details
-      var framesEl = document.createElement('ul');
-      for (var frame of track.frames) {
-        var frameEl = document.createElement('li');
-        frameEl.innerHTML = 'Frame ' + frame.frameType + ' - ' + parseFloat(frame.timeUs / 1000000).toFixed(3);
-        framesEl.appendChild(frameEl);
-      }
-      trackEl.appendChild(framesEl);
-
-      // Add track info to dom
-      el.appendChild(trackEl);
-    }
-
-    function updateAtomsInfo(demuxer) {
-      // Only makes sense for MP4 files
-      if (demuxer.atoms) {
-        var el = document.getElementById('atoms');
-        addAtoms(el, demuxer.atoms);
-      }
-    }
-
-    // Add information about MP4 atoms
-    function addAtoms(parent, atoms) {
-      if (!atoms || atoms.length === 0) return;
-
-      var containerEl = document.createElement('ul');
-      for (var atom of atoms) {
-        var atomEl = document.createElement('li');
-        atomEl.innerHTML = atom.type + ', ' + atom.size + ' bytes';
-        atomEl.onclick = renderAtomDetails.bind(null, atom);
-        containerEl.appendChild(atomEl);
-
-        if (atom.atoms && atom.atoms.length > 0) {
-          addAtoms(atomEl, atom.atoms);
-        }
-      }
-
-      parent.appendChild(containerEl);
-    }
+  <div>
+    <input size="64" id="urlInput" type="input">
+    <input type="button" value="Inspect input URL" onclick="inspectMedia('remote-input-url')">
+  </div>
 
-    function renderAtomDetails(atom, event) {
-      event.stopPropagation();
-      var el = document.getElementById('details');
-      clearAtomDetails();
+  <br>
 
-      var containerEl = document.createElement('ul');
-      for (var p in atom) {
-        if (atom.hasOwnProperty(p) && shouldRenderAtom(p, atom)) {
-          var item = document.createElement('li');
-          item.innerHTML = p + ":" + atom[p];
-          containerEl.appendChild(item);
-        }
-      }
+  <div>
+    <input id="fileInput" type="file">
+    <input type="button" value="Inspect local file" onclick="inspectMedia('local')">
+  </div>
 
-      el.appendChild(containerEl);
-    }
+  <br>
 
-    function clearTracksInfo() {
-      var el = document.getElementById('tracks');
+  <div>
+    <b>Total bytes:</b> <output id="totalBytes"></output>
+    <br>
+    <progress style="width:100%" id="loadProgress" min="0" max="100" value="0"></progress>
+  </div>
 
-      // Remove any child of tracks element
-      while (el.firstChild) {
-        el.removeChild(el.firstChild);
-      }
-    }
+  <br>
 
-    function clearAtomsTree() {
-      var el = document.getElementById('atoms');
+  <div>
+      <b>File URI:</b> <output style="width:100%" id="uri"></output>
+    </div>
 
-      // Remove any child of tracks element
-      while (el.firstChild) {
-        el.removeChild(el.firstChild);
-      }
-    }
+  <div id="viewer">
+    <div id="atoms-info">
+      <div id="atoms" class="atom_column">
+      </div>
+      <div id="details" class="atom_column">
+      </div>
+    </div>
 
-    function clearAtomDetails() {
-      var el = document.getElementById('details');
-      while (el.firstChild) {
-        el.removeChild(el.firstChild);
-      }
-    }
+    <div id="tracks"></div>
+  </div>
 
-    function shouldRenderAtom(p, atom) {
-      return p !== 'atoms' && p !== 'containerDataOffset' && p !== 'constructor';
-        //&& !Array.isArray(atom[p]);
-    }
-  </script>
+  <script src="/samples/main.js"></script>
+  <script src="inspectorjs-lib.js"></script>
 </body>
 
-</html>
+</html>