Add file downloader and example option. Update dependencies.

www/package.json

@@ -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": "^4.6.0",
-    "bootstrap-vue": "^2.16.0",
+    "bootstrap-vue": "^2.21.2",
-    "core-js": "^3.6.5",
+    "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-babel": "^4.5.12",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.12",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.12",
-    "@wasm-tool/wasm-pack-plugin": "^1.3.1",
+    "@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,

www/src/App.vue

@@ -13,10 +13,8 @@
     <GitHubCorner />
 
     <div id="app" class="container">
-      <h3>FFProbe</h3>
+      <b-alert variant="warning" size="sm" show>
-
+        Please use Google Chrome or Microsoft Edge.
-      <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>
 
       <hr />

www/src/components/File.vue

@@ -1,31 +1,69 @@
 <template>
     <div class="file">
-        <b-form-group label="Select a file:" label-for="file">
+      <b-form-row>
-          <b-form-file
+        <b-col>
-              id="file"
+          <b-form-group label="Select a file:" label-for="file">
-              accept=".mp4, .mkv"
+            <b-input-group>
-              v-model="file"
+              <b-form-select class="protocol" v-model="protocol">
-              :state="Boolean(file)"
+                <option v-for="o in protocols" :key="o.id" :value="o.value">{{ o.name }}</option>
-              placeholder="Choose a file or drop it here..."
+              </b-form-select>
-              drop-placeholder="Drop file here..."
-              @change="onFile"
-          ></b-form-file>
-        </b-form-group>
 
-        <div v-if="info">
+              <b-form-file
-          <div class="mt-3">Selected file: {{ file ? `${file.name}: ${file.size} bytes` : '' }}</div>
+                  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-form-input
-            <b-tab title="Overview" class="mt-2">
+                v-if="protocol === 'url'"
-              <div v-if="info">
+                v-model="url"
-                <Overview :info="info" />
+                :state="Boolean(url)"
-              </div>
+                placeholder="Enter a URL"
-            </b-tab>
+              ></b-form-input>
-            <b-tab title="Frames" class="mt-2" lazy>
+
-              <Frames :file="file" />
+              <b-form-select v-if="protocol === 'example'" v-model="url">
-            </b-tab>
+                <template #first>
-          </b-tabs>
+                  <b-form-select-option :value="null" disabled>-- Please select an option --</b-form-select-option>
-        </div>
+                </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>