feat(download-progress): show progress percent and ETA when possible

app/components/download-progress/component.js

@@ -1,12 +1,16 @@
 import Component from '@ember/component';
 
+import moment from 'moment';
+
 import {
   DisposableMixin,
   ContextBoundTasksMixin,
 } from 'ember-lifeline';
 import { defineError } from 'ember-exex/error';
 import { on } from 'ember-decorators/object/evented';
 
+import speedometer from 'npm:speedometer';
+
 export const STATUS_DOWNLOADING = 'downloading';
 export const STATUS_VERIFYING = 'verifying';
 export const STATUS_EXTRACTING = 'extracting';
@@ -22,9 +26,17 @@ export default Component.extend(DisposableMixin, ContextBoundTasksMixin, {
   status: STATUS_DOWNLOADING,
   asset: null,
   value: 0,
+  eta: null,
+
+  speed: null,
 
   onFinish: null,
 
+  @on('init')
+  setupSpeedometer() {
+    this.speed = speedometer();
+  },
+
   @on('didInsertElement')
   addListeners() {
     const downloader = this.get('downloader');
@@ -36,6 +48,7 @@ export default Component.extend(DisposableMixin, ContextBoundTasksMixin, {
         downloader.off('extract', this, this.onExtract);
         downloader.off('done', this, this.onDone);
         downloader.off('done', this, this.reset);
+        this.speed = null;
       });
 
       downloader.on('error', this, this.onError);
@@ -79,14 +92,17 @@ export default Component.extend(DisposableMixin, ContextBoundTasksMixin, {
 
   reset(status = STATUS_DOWNLOADING) {
     return this.scheduleTask('routerTransitions', () => {
-      this.setProperties({
-        status,
-        value: 1,
-      });
+      this.setupSpeedometer();
+      this.setProperties({ status, value: 0, eta: null });
     });
   },
 
   updateProgress(value) {
-    this.set('value', value);
+    const delta = value - this.get('value');
+    const speed = this.speed(delta);
+    const remaining = 1 - value;
+    const seconds = Math.round(remaining / speed);
+    const eta = moment().add(seconds, 'second').toDate();
+    this.setProperties({ value, eta });
   },
 });

app/components/download-progress/styles.scss

@@ -0,0 +1,7 @@
+.progress {
+  height: 1.5rem;
+}
+
+.progress-bar {
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
+}

app/components/download-progress/template.hbs

@@ -1,4 +1,8 @@
 <h4>{{t status asset=(t asset)}}</h4>
 {{#bs-progress as |p|}}
-  {{p.bar value=value minValue=0 maxValue=1 striped=true animate=true}}
+  {{#p.bar value=value minValue=0 maxValue=1 striped=true animate=true showLabel=true}}
+    <span class="position-absolute w-100 d-flex justify-content-center">
+      {{t 'progress' value=value eta=(if eta (format-relative eta) null)}}
+    </span>
+  {{/p.bar}}
 {{/bs-progress}}