Use gop size for perPage results. #3

www/src/components/File.vue

@@ -15,7 +15,7 @@
         <div v-if="info">
           <div class="mt-3">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
 
-          <b-tabs class="mt-4">
+          <b-tabs class="mt-4" v-model="tabIndex">
             <b-tab title="Overview" class="mt-2">
               <div v-if="info">
                 <Overview :info="info" />
@@ -42,18 +42,16 @@ export default {
   data() {
     return {
       file: null,
-      data: null,
       info: null,
-    }
-  },
-  created() {
-    this.$worker.onmessage = (e) => {
-      this.info = e.data;
+      tabIndex: 0,
     }
   },
   methods: {
     onFile(event) {
-      this.data = null;
+      this.tabIndex = 0;
+      this.$worker.onmessage = (e) => {
+        this.info = e.data;
+      }
       const file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
       this.$worker.postMessage([ 'get_file_info', file ]);
     }

www/src/components/Frames.vue

@@ -3,6 +3,7 @@
     <h4>Frames</h4>
     <div v-if="!data">Loading...</div>
     <div v-if="data">
+      <p class="float-left">GOP Size: {{ data.gop_size }}</p>
       <p class="text-right">Total: {{ data.nb_frames }}</p>
 
       <b-pagination
@@ -19,6 +20,9 @@
             <b-spinner class="align-middle"></b-spinner>
           </div>
         </template>
+        <template #cell(frame_number)="data">
+          {{ data.value + 1 }}
+        </template>
         <template #cell(pict_type)="data">
           {{ String.fromCharCode(data.value) }}
         </template>
@@ -43,11 +47,13 @@ export default {
     return {
       data: null,
       currentPage: 1,
-      perPage: 48,
       isBusy: false,
     };
   },
   computed: {
+    perPage() {
+      return this.data.gop_size;
+    },
     pages() {
       return this.data.nb_frames;
     },