Refactor to load wasm module in a web worker to prevent blocking main browser thread. Update FS to use WORKERFS.

www/public/index.html

@@ -12,7 +12,6 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script src="ffprobe-wasm.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

www/src/components/File.vue

@@ -18,12 +18,12 @@
           :value="progress"
           max="100"></b-progress>
 
-        <div v-if="data">
+        <div v-if="info">
           <div class="mt-3">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
 
           <b-tabs class="mt-4">
             <b-tab title="Overview" class="mt-2">
-              <div v-if="data">
+              <div v-if="info">
                 <Overview :info="info" />
               </div>
             </b-tab>
@@ -39,6 +39,8 @@
 import Overview from './Overview.vue';
 import Frames from './Frames.vue';
 
+const worker = new Worker('ffprobe-worker.js');
+
 export default {
   name: 'File',
   components: {
@@ -49,13 +51,14 @@ export default {
     return {
       file: null,
       data: null,
+      info: null,
       progress: 0,
       showProgress: false,
     }
   },
-  computed: {
-    info() {
-      return this.data && window.Module.get_file_info();
+  created() {
+    worker.onmessage = (e) => {
+      this.info = e.data;
     }
   },
   methods: {
@@ -65,21 +68,7 @@ export default {
       this.showProgress = true;
 
       const file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
-      const reader = new FileReader();
-
-      // reader.onload = e => this.$emit("load", event.target.result);
-      reader.onload = (event) => {
-        this.progress = 100;
-        this.data = new Uint8Array(event.target.result);
-        window.Module.FS.writeFile('file', new Uint8Array(this.data));
-        setTimeout(() => { this.showProgress = false; }, 2000);
-      }
-      reader.onprogress = (event) => {
-        if (event.lengthComputable) {
-          this.progress = parseInt(((event.loaded / event.total) * 100), 10);
-        }
-      }
-      reader.readAsArrayBuffer(file);
+      worker.postMessage([ file ]);
     }
   }
 }

www/src/components/Overview.vue

@@ -7,7 +7,7 @@
     <b-table stacked :items="items"></b-table>
 
     <h4>Streams</h4>
-    <b-table striped hover :items="streams"></b-table>
+    <b-table striped hover :items="info.streams"></b-table>
   </div>
 </template>
 
@@ -15,15 +15,6 @@
 export default {
   name: 'Overview',
   props: ['info'],
-  computed: {
-      streams() {
-          const s = [];
-          for (let i = 0; i < this.info.streams.size(); i++) {
-              s.push(this.info.streams.get(i));
-          }
-          return s;
-      }
-  },
   data() {
     return {
       items: [
@@ -38,9 +29,9 @@ export default {
       ],
       versions: [
         {
-          libavutil:  window.Module.avutil_version(),
-          libavcodec:  window.Module.avcodec_version(),
-          libavformat:  window.Module.avformat_version(),
+          libavutil:  this.info.versions.libavutil,
+          libavcodec:  this.info.versions.libavcodec,
+          libavformat:  this.info.versions.libavformat,
         }
       ]
     }