Update Frames component to use ffprobe-worker.

www/public/ffprobe-worker.js

@@ -1,36 +1,72 @@
 onmessage = (e) => {
-    const file = e.data[0];
+    const type = e.data[0];
+    const file = e.data[1];
 
-    // Mount FS for files.
+    let data;
-    if (!FS.analyzePath('/work').exists) {
-        FS.mkdir('/work');
-    }
-    FS.mount(WORKERFS, { files: [file] }, '/work');
 
-    // Call the wasm module.
+    switch (type) {
-    const info = Module.get_file_info('/work/' + file.name);
+        case 'get_file_info':
+            // Mount FS for files.
+            if (!FS.analyzePath('/work').exists) {
+                FS.mkdir('/work');
+            }
+            FS.mount(WORKERFS, { files: [file] }, '/work');
 
-    // Remap streams into collection.
+            // Call the wasm module.
-    const s = [];
+            const info = Module.get_file_info('/work/' + file.name);
-    for (let i = 0; i < info.streams.size(); i++) {
+
-        s.push(info.streams.get(i));
+            // Remap streams into collection.
+            const s = [];
+            for (let i = 0; i < info.streams.size(); i++) {
+                s.push(info.streams.get(i));
+            }
+
+            const versions = {
+                libavutil:  Module.avutil_version(),
+                libavcodec:  Module.avcodec_version(),
+                libavformat:  Module.avformat_version(),
+            };
+
+            // Send back data response.
+            data = {
+                ...info,
+                streams: s,
+                versions,
+            }
+            postMessage(data);
+
+            // Cleanup mount.
+            FS.unmount('/work');
+            break;
+        
+        case 'get_frames':
+            if (!FS.analyzePath('/work').exists) {
+                FS.mkdir('/work');
+            }
+            FS.mount(WORKERFS, { files: [file] }, '/work');
+
+            const offset = e.data[2];
+            const frames = Module.get_frames('/work/' + file.name, offset);
+
+            // Remap frames into collection.
+            const f = [];
+            for (let i = 0; i < frames.frames.size(); i++) {
+                f.push(frames.frames.get(i));
+            }
+
+            data = {
+                ...frames,
+                frames: f,
+            }
+            postMessage(data);
+
+            // Cleanup mount.
+            FS.unmount('/work');
+            break;
+    
+        default:
+            break;
     }
 
-    const versions = {
-        libavutil:  Module.avutil_version(),
-        libavcodec:  Module.avcodec_version(),
-        libavformat:  Module.avformat_version(),
-    };
-
-    // Send back data response.
-    const data = {
-        ...info,
-        streams: s,
-        versions,
-    }
-    postMessage(data);
-
-    // Cleanup mount.
-    FS.unmount('/work');
 }
 self.importScripts('ffprobe-wasm.js'); // Load ffprobe into worker context.

www/src/components/File.vue

@@ -28,7 +28,7 @@
               </div>
             </b-tab>
             <b-tab title="Frames" class="mt-2" lazy>
-              <Frames />
+              <Frames :file="file" />
             </b-tab>
           </b-tabs>
         </div>
@@ -39,8 +39,6 @@
 import Overview from './Overview.vue';
 import Frames from './Frames.vue';
 
-const worker = new Worker('ffprobe-worker.js');
-
 export default {
   name: 'File',
   components: {
@@ -57,7 +55,7 @@ export default {
     }
   },
   created() {
-    worker.onmessage = (e) => {
+    this.$worker.onmessage = (e) => {
       this.info = e.data;
     }
   },
@@ -68,7 +66,7 @@ export default {
       this.showProgress = true;
 
       const file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
-      worker.postMessage([ file ]);
+      this.$worker.postMessage([ 'get_file_info', file ]);
     }
   }
 }

www/src/components/Frames.vue

@@ -1,35 +1,39 @@
 <template>
   <div>
     <h4>Frames</h4>
-    <p class="text-right">Total: {{ data.nb_frames }}</p>
+    <div v-if="!data">Loading...</div>
+    <div v-if="data">
+      <p class="text-right">Total: {{ data.nb_frames }}</p>
 
-    <b-pagination
+      <b-pagination
-      v-model="currentPage"
+        v-model="currentPage"
-      @change="onPageChanged"
+        @change="onPageChanged"
-      :total-rows="pages"
+        :total-rows="pages"
-      :per-page="perPage"
+        :per-page="perPage"
-      align="right"
+        align="right"
-    ></b-pagination>
+      ></b-pagination>
 
-    <b-table striped hover :items="frames">
+      <b-table striped hover :items="data.frames">
-      <template #cell(pict_type)="data">
+        <template #cell(pict_type)="data">
-        {{ String.fromCharCode(data.value) }}
+          {{ String.fromCharCode(data.value) }}
-      </template>
+        </template>
-    </b-table>
+      </b-table>
 
-    <b-pagination
+      <b-pagination
-      v-model="currentPage"
+        v-model="currentPage"
-      @change="onPageChanged"
+        @change="onPageChanged"
-      :total-rows="pages"
+        :total-rows="pages"
-      :per-page="perPage"
+        :per-page="perPage"
-      align="right"
+        align="right"
-    ></b-pagination>
+      ></b-pagination>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Frames',
+  props: ['file'],
   data() {
     return {
       data: null,
@@ -41,22 +45,17 @@ export default {
     pages() {
       return this.data.nb_frames;
     },
-    frames() {
-      if (!this.data) return [];
-
-      const s = [];
-      for (let i = 0; i < this.data.frames.size(); i++) {
-        s.push(this.data.frames.get(i));
-      }
-      return s;
-    },
   },
   created() {
-    this.data = window.Module.get_frames(0);
+    this.$worker.onmessage = (e) => {
+      this.data = e.data;
+    }
+    this.$worker.postMessage([ 'get_frames', this.file, 0 ]);
+
   },
   methods: {
     onPageChanged(page) {
-      this.data = window.Module.get_frames(this.perPage * (page - 1));
+      this.$worker.postMessage([ 'get_frames', this.file, this.perPage * (page - 1) ]);
       window.scrollTo(0, 0);
     },
   }

www/src/main.js

@@ -5,6 +5,9 @@ import App from './App.vue'
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 
+const worker = new Worker('ffprobe-worker.js');
+Vue.prototype.$worker = worker;
+
 Vue.use(BootstrapVue);
 
 Vue.config.productionTip = false