0.3.0

www/package-lock.json

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

www/package.json

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

www/src/components/File.vue

@@ -12,12 +12,6 @@
           ></b-form-file>
         </b-form-group>
 
-        <b-progress
-          height="2px"
-          v-if="showProgress"
-          :value="progress"
-          max="100"></b-progress>
-
         <div v-if="info">
           <div class="mt-3">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
 
@@ -50,8 +44,6 @@ export default {
       file: null,
       data: null,
       info: null,
-      progress: 0,
-      showProgress: false,
     }
   },
   created() {
@@ -62,9 +54,6 @@ export default {
   methods: {
     onFile(event) {
       this.data = null;
-      this.progress = 0;
-      this.showProgress = true;
-
       const file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
       this.$worker.postMessage([ 'get_file_info', file ]);
     }

www/src/components/Frames.vue

@@ -13,7 +13,12 @@
         align="right"
       ></b-pagination>
 
-      <b-table striped hover :items="data.frames">
+      <b-table striped hover :items="data.frames" :busy="isBusy">
+        <template #table-busy>
+          <div class="text-center text-primary my-2">
+            <b-spinner class="align-middle"></b-spinner>
+          </div>
+        </template>
         <template #cell(pict_type)="data">
           {{ String.fromCharCode(data.value) }}
         </template>
@@ -39,6 +44,7 @@ export default {
       data: null,
       currentPage: 1,
       perPage: 48,
+      isBusy: false,
     };
   },
   computed: {
@@ -49,12 +55,14 @@ export default {
   created() {
     this.$worker.onmessage = (e) => {
       this.data = e.data;
+      this.isBusy = false;
     }
     this.$worker.postMessage([ 'get_frames', this.file, 0 ]);
 
   },
   methods: {
     onPageChanged(page) {
+      this.isBusy = true;
       this.$worker.postMessage([ 'get_frames', this.file, this.perPage * (page - 1) ]);
       window.scrollTo(0, 0);
     },