Update Frames component to use ffprobe-worker.

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
-      v-model="currentPage"
-      @change="onPageChanged"
-      :total-rows="pages"
-      :per-page="perPage"
-      align="right"
-    ></b-pagination>
+      <b-pagination
+        v-model="currentPage"
+        @change="onPageChanged"
+        :total-rows="pages"
+        :per-page="perPage"
+        align="right"
+      ></b-pagination>
 
-    <b-table striped hover :items="frames">
-      <template #cell(pict_type)="data">
-        {{ String.fromCharCode(data.value) }}
-      </template>
-    </b-table>
+      <b-table striped hover :items="data.frames">
+        <template #cell(pict_type)="data">
+          {{ String.fromCharCode(data.value) }}
+        </template>
+      </b-table>
 
-    <b-pagination
-      v-model="currentPage"
-      @change="onPageChanged"
-      :total-rows="pages"
-      :per-page="perPage"
-      align="right"
-    ></b-pagination>
+      <b-pagination
+        v-model="currentPage"
+        @change="onPageChanged"
+        :total-rows="pages"
+        :per-page="perPage"
+        align="right"
+      ></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);
     },
   }