cis-oss/libav-wasm
2
0
Fork 0
forked from forks/ffprobe-wasm
Code Pull Requests Activity

Add file downloader and example option. Update dependencies.

Browse Source
This commit is contained in:
Alf
2021-03-28 00:04:37 -07:00
parent 39da8ac6a7
commit 88110bfd1b
4 changed files with 3241 additions and 919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3996
www/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
www/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ffprobe-wasm",
"version": "0.4.0",
"version": "0.5.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
@@ -8,22 +8,22 @@
"deploy": "npm run build && gh-pages -d dist"
},
"dependencies": {
"bootstrap": "^4.5.2",
"bootstrap-vue": "^2.16.0",
"core-js": "^3.6.5",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.9.1",
"gh-pages": "^3.1.0",
"vue": "^2.6.11",
"vue": "^2.6.12",
"wasm-loader": "^1.3.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@wasm-tool/wasm-pack-plugin": "^1.3.1",
"@vue/cli-plugin-babel": "^4.5.12",
"@vue/cli-plugin-eslint": "^4.5.12",
"@vue/cli-service": "^4.5.12",
"@wasm-tool/wasm-pack-plugin": "^1.3.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint": "^6.8.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.12"
},
"eslintConfig": {
"root": true,

6
www/src/App.vue
View File

@@ -13,10 +13,8 @@
<GitHubCorner />
<div id="app" class="container">
<h3>FFProbe</h3>
<b-alert variant="warning" show>
⚠️Compatible with Chrome and Edge only due to limited support for <a href="https://caniuse.com/sharedarraybuffer">SharedArrayBuffer</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">required CORS headers</a> for Firefox on Github Pages.
<b-alert variant="warning" size="sm" show>
Please use Google Chrome or Microsoft Edge.
</b-alert>
<hr />

134
www/src/components/File.vue
View File

@@ -1,31 +1,69 @@
<template>
<div class="file">
<b-form-group label="Select a file:" label-for="file">
<b-form-file
id="file"
accept=".mp4, .mkv"
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-form-row>
<b-col>
<b-form-group label="Select a file:" label-for="file">
<b-input-group>
<b-form-select class="protocol" v-model="protocol">
<option v-for="o in protocols" :key="o.id" :value="o.value">{{ o.name }}</option>
</b-form-select>
<div v-if="info">
<div class="mt-3">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
<b-form-file
v-if="protocol === 'file'"
id="file"
accept=".mp4, .mkv"
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-tabs class="mt-4" v-model="tabIndex">
<b-tab title="Overview" class="mt-2">
<div v-if="info">
<Overview :info="info" />
</div>
</b-tab>
<b-tab title="Frames" class="mt-2" lazy>
<Frames :file="file" />
</b-tab>
</b-tabs>
</div>
<b-form-input
v-if="protocol === 'url'"
v-model="url"
:state="Boolean(url)"
placeholder="Enter a URL"
></b-form-input>
<b-form-select v-if="protocol === 'example'" v-model="url">
<template #first>
<b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
</template>
<option v-for="o in examples" :key="o.id" :value="o.value">{{ o.name }}</option>
</b-form-select>
<b-input-group-append v-if="protocol !== 'file'">
<b-button @click="onDownload">Download</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
</b-col>
</b-form-row>
<b-progress
class="mb-2"
height="2px"
v-if="showProgress"
:value="progress"
max="100">
</b-progress>
<div v-if="data">
<div v-if="file">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
<div v-else>URL: {{ url ? `${url} (${size} bytes)` : '' }}</div>
<b-tabs class="mt-4" v-model="tabIndex">
<b-tab title="Overview" class="mt-2">
<div v-if="data">
<Overview :info="data" />
</div>
</b-tab>
<b-tab title="Frames" class="mt-2" lazy>
<Frames :file="file" />
</b-tab>
</b-tabs>
</div>
</div>
</template>
@@ -41,20 +79,62 @@ export default {
},
data() {
return {
protocols: [
{ name: 'File', value: 'file'},
{ name: 'URL', value: 'url'},
{ name: 'Example', value: 'example'},
],
examples: [
{ name: 'Video Counter (10min, unfragmented, AVC Baseline)', value: 'https://video-examples-public.s3.us-west-2.amazonaws.com/video_counter_10min_unfragmented_avc.mp4' },
],
protocol: 'file',
file: null,
info: null,
url: null,
size: null,
data: null,
tabIndex: 0,
progress: 0,
showProgress: false,
}
},
methods: {
onFile(event) {
this.tabIndex = 0;
this.$worker.onmessage = (e) => {
this.info = e.data;
this.data = e.data;
}
const file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
this.$worker.postMessage([ 'get_file_info', file ]);
}
},
onDownload() {
this.showProgress = true;
this.tabIndex = 0;
this.$worker.onmessage = (e) => {
this.data = e.data;
}
const xhr = new XMLHttpRequest();
xhr.onprogress = (event) => {
if (event.lengthComputable) {
this.progress = parseInt(((event.loaded / event.total) * 100), 10);
}
}
xhr.onload = (event) => {
this.progress = 100;
const file = new File([event.target.response], "file");
this.size = file.size;
this.$worker.postMessage([ 'get_file_info', file ]);
setTimeout(() => { this.showProgress = false; }, 2000);
}
xhr.open('GET', this.url, true);
xhr.responseType = 'blob';
xhr.send();
},
}
}
</script>
<style scoped>
.protocol {
flex: 0 0 20% !important;
}
</style>