diff --git a/app/components/download-progress/component.js b/app/components/download-progress/component.js index 1d8cf27f..ec213717 100644 --- a/app/components/download-progress/component.js +++ b/app/components/download-progress/component.js @@ -1,5 +1,7 @@ import Component from '@ember/component'; +import moment from 'moment'; + import { DisposableMixin, ContextBoundTasksMixin, @@ -7,6 +9,8 @@ import { 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 }); }, }); diff --git a/app/components/download-progress/styles.scss b/app/components/download-progress/styles.scss new file mode 100644 index 00000000..1425bd18 --- /dev/null +++ b/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); +} diff --git a/app/components/download-progress/template.hbs b/app/components/download-progress/template.hbs index eb3ad61d..041ea0fe 100644 --- a/app/components/download-progress/template.hbs +++ b/app/components/download-progress/template.hbs @@ -1,4 +1,8 @@

{{t status asset=(t asset)}}

{{#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}} + + {{t 'progress' value=value eta=(if eta (format-relative eta) null)}} + + {{/p.bar}} {{/bs-progress}}