Seek through frames given a timestamp. (#9)

* Add input slide to Frames component for seeking frames.

* 0.4.0

www/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffprobe-wasm",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -23,8 +23,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11",
-    "hello": "file:../dist"
+    "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {
     "root": true,

www/src/components/Frames.vue

@@ -1,25 +1,24 @@
 <template>
   <div>
-    <h4>Frames</h4>
-    <div v-if="!data">Loading...</div>
+    <div v-if="!data" class="text-center mt-4">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-table
+        class="col-4"
+        :items="metadata"
+        thead-class="d-none"
+        small outlined
+      ></b-table>
 
-      <b-pagination
-        v-model="currentPage"
-        @change="onPageChanged"
-        :total-rows="pages"
-        :per-page="perPage"
-        align="right"
-      ></b-pagination>
+      <div>
+        <b-form-group label="Timestamp:" label-for="timestamp">
+          <b-input class="float-left col-2" v-model="value" @change="inputHandler"></b-input>
+          <b-button class="float-right ml-2" @click="onNext">Next</b-button>
+          <b-button class="float-right" @click="onPrev">Prev</b-button>
+          <b-input id="timestamp" v-model="value" type="range" min="0" :max="data.duration" @change="inputHandler"></b-input>
+        </b-form-group>
+      </div>
 
-      <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>
+      <b-table striped hover :fields="fields" :items="data.frames" :busy="isBusy">
         <template #cell(frame_number)="data">
           {{ data.value + 1 }}
         </template>
@@ -27,14 +26,6 @@
           {{ String.fromCharCode(data.value) }}
         </template>
       </b-table>
-
-      <b-pagination
-        v-model="currentPage"
-        @change="onPageChanged"
-        :total-rows="pages"
-        :per-page="perPage"
-        align="right"
-      ></b-pagination>
     </div>
   </div>
 </template>
@@ -45,33 +36,56 @@ export default {
   props: ['file'],
   data() {
     return {
+      fields: [
+        { key: 'frame_number', label: 'Index' },
+        'pict_type', 'pts', 'dts', 'pos', 'pkt_size'
+      ],
       data: null,
-      currentPage: 1,
       isBusy: false,
+      value: 0,
+      lastPts: 0,
+      ptsPageSize: 0,
     };
   },
   computed: {
-    perPage() {
-      return this.data.gop_size;
-    },
-    pages() {
-      return this.data.nb_frames;
-    },
+    metadata() {
+      return [
+        { name: 'GOP Size', value: this.data.gop_size },
+        { name: 'Duration', value: this.data.duration },
+        { name: 'Timebase', value: this.data.time_base },
+        { name: 'Total Frames', value: this.data.nb_frames },
+      ]
+    }
   },
   created() {
     this.$worker.onmessage = (e) => {
       this.data = e.data;
       this.isBusy = false;
+      this.value = e.data.frames.length > 0 ? e.data.frames[0].pts : 0;
     }
     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);
+    inputHandler(value) {
+      this.getFrames(value);
     },
+    onNext() {
+      this.lastPts = this.data.frames[0].pts;
+      const nextPts = this.data.frames[this.data.frames.length - 1].pts;
+      this.getFrames(nextPts);
+    },
+    onPrev() {
+      if (this.ptsPageSize === 0) {
+        this.ptsPageSize = this.data.frames[0].pts - this.lastPts;
+      }
+      const prevPts = this.data.frames[0].pts - this.ptsPageSize;
+      this.getFrames(prevPts);
+    },
+    getFrames(value) {
+      this.isBusy = true;
+      this.$worker.postMessage([ 'get_frames', this.file, parseInt(value) ]);
+      window.scrollTo(0, 0);
+    }
   }
 }
 </script>