Add file downloader and example option. Update dependencies.

www/src/App.vue

@@ -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 />

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-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>
+</script>
+
+<style scoped>
+.protocol {
+  flex: 0 0 20% !important;
+}
+</style>