forked from forks/ffprobe-wasm
94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<div class="file">
|
|
<b-form-group label="Select a file:" label-for="file">
|
|
<b-form-file
|
|
id="file"
|
|
accept="video/mp4"
|
|
v-model="file"
|
|
:state="Boolean(file)"
|
|
placeholder="Choose a file or drop it here..."
|
|
drop-placeholder="Drop file here..."
|
|
@change="onFile"
|
|
></b-form-file>
|
|
</b-form-group>
|
|
|
|
<b-progress
|
|
height="2px"
|
|
v-if="showProgress"
|
|
:value="progress"
|
|
max="100"></b-progress>
|
|
|
|
<div v-if="data">
|
|
<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">
|
|
<Overview :info="info" />
|
|
</div>
|
|
</b-tab>
|
|
<b-tab title="Streams" class="mt-2" disabled></b-tab>
|
|
<b-tab title="Frames" class="mt-2" disabled></b-tab>
|
|
</b-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Overview from './Overview.vue';
|
|
|
|
export default {
|
|
name: 'File',
|
|
components: {
|
|
Overview,
|
|
},
|
|
data() {
|
|
return {
|
|
file: null,
|
|
data: null,
|
|
progress: 0,
|
|
showProgress: false,
|
|
}
|
|
},
|
|
computed: {
|
|
avformat_version() {
|
|
return window.Module.c_avformat_version();
|
|
},
|
|
info() {
|
|
return this.data && window.Module.get_file_info();
|
|
}
|
|
},
|
|
methods: {
|
|
onFile(event) {
|
|
this.data = null;
|
|
this.progress = 0;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tree-view {
|
|
overflow: auto;
|
|
height: 60vh;
|
|
}
|
|
</style>
|