This commit is contained in:
Alf
2020-12-22 14:39:05 -08:00
parent 16d930c36e
commit 4c14fe9858
4 changed files with 11 additions and 14 deletions

2
www/package-lock.json generated
View File

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

View File

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

View File

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

View File

@@ -13,7 +13,12 @@
align="right" align="right"
></b-pagination> ></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"> <template #cell(pict_type)="data">
{{ String.fromCharCode(data.value) }} {{ String.fromCharCode(data.value) }}
</template> </template>
@@ -39,6 +44,7 @@ export default {
data: null, data: null,
currentPage: 1, currentPage: 1,
perPage: 48, perPage: 48,
isBusy: false,
}; };
}, },
computed: { computed: {
@@ -49,12 +55,14 @@ export default {
created() { created() {
this.$worker.onmessage = (e) => { this.$worker.onmessage = (e) => {
this.data = e.data; this.data = e.data;
this.isBusy = false;
} }
this.$worker.postMessage([ 'get_frames', this.file, 0 ]); this.$worker.postMessage([ 'get_frames', this.file, 0 ]);
}, },
methods: { methods: {
onPageChanged(page) { onPageChanged(page) {
this.isBusy = true;
this.$worker.postMessage([ 'get_frames', this.file, this.perPage * (page - 1) ]); this.$worker.postMessage([ 'get_frames', this.file, this.perPage * (page - 1) ]);
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, },