feature: add support for displaying chapters (#15)

* feat: add initial code for reading chapters

* feat: add more fields for supporting chapters and chapter tags.

www/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ffprobe-wasm",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

www/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffprobe-wasm",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

www/public/ffprobe-worker.js

@@ -21,6 +21,19 @@ onmessage = (e) => {
                 s.push(info.streams.get(i));
             }
 
+            // Remap chapters into collection.
+            const c = [];
+            for (let i = 0; i < info.chapters.size(); i++) {
+                const t = info.chapters.get(i).tags.get(0);
+
+                // Remap tags too.
+                const tags = [];
+                const obj = {};
+                obj[t.key] = t.value;
+                tags.push(obj);
+                c.push({...info.chapters.get(i), ...{tags}});
+            }
+
             const versions = {
                 libavutil:  Module.avutil_version(),
                 libavcodec:  Module.avcodec_version(),
@@ -31,6 +44,7 @@ onmessage = (e) => {
             data = {
                 ...info,
                 streams: s,
+                chapters: c,
                 versions,
             }
             postMessage(data);

www/src/components/Overview.vue

@@ -8,6 +8,15 @@
 
     <h4>Streams</h4>
     <b-table striped hover :items="info.streams"></b-table>
+
+    <div v-show="info.chapters.length > 0">
+      <h4>Chapters</h4>
+      <b-table striped hover :items="info.chapters">
+        <template #cell(tags)="data">
+          <b-table-lite small stacked outlined :items="data.item.tags"></b-table-lite>
+        </template>
+      </b-table>
+    </div>
   </div>
 </template>
 
@@ -25,6 +34,7 @@ export default {
           url: this.info.url,
           nb_streams: this.info.nb_streams,
           flags: this.info.flags,
+          nb_chapters: this.info.nb_chapters,
         },
       ]
     },