From a80595560629f6e2bba965873a9cf7f01715013d Mon Sep 17 00:00:00 2001
From: Jan Kuri <jkuri88@gmail.com>
Date: Sun, 25 Jun 2017 04:13:34 +0200
Subject: [PATCH] fix(speed): fix upload speed calculation

---
 src/components/app-home/app-home.component.ts |  2 +-
 .../classes/ngx-uploader.class.ts             | 23 ++++++++++++-------
 src/styles/app.sass                           |  7 +++---
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/app-home/app-home.component.ts b/src/components/app-home/app-home.component.ts
index 9af4d2fe..0eb45b8b 100644
--- a/src/components/app-home/app-home.component.ts
+++ b/src/components/app-home/app-home.component.ts
@@ -64,7 +64,7 @@ export class AppHomeComponent {
   startUpload(): void {
     const event: UploadInput = {
       type: 'uploadAll',
-      url: '/upload',
+      url: 'http://ngx-uploader.com/upload',
       method: 'POST',
       data: { foo: 'bar' },
       concurrency: this.formData.concurrency
diff --git a/src/ngx-uploader/classes/ngx-uploader.class.ts b/src/ngx-uploader/classes/ngx-uploader.class.ts
index 2257e39d..e9819b46 100644
--- a/src/ngx-uploader/classes/ngx-uploader.class.ts
+++ b/src/ngx-uploader/classes/ngx-uploader.class.ts
@@ -20,6 +20,8 @@ export interface UploadProgress {
     percentage: number;
     speed: number;
     speedHuman: string;
+    startTime: number | null;
+    endTime: number | null;
   };
 }
 
@@ -92,7 +94,9 @@ export class NgUploaderService {
           data: {
             percentage: 0,
             speed: null,
-            speedHuman: null
+            speedHuman: null,
+            startTime: null,
+            endTime: null
           }
         },
         lastModifiedDate: file.lastModifiedDate
@@ -171,22 +175,22 @@ export class NgUploaderService {
       const reader = new FileReader();
       const xhr = new XMLHttpRequest();
       let time: number = new Date().getTime();
-      let load = 0;
+      let speed = 0;
 
       xhr.upload.addEventListener('progress', (e: ProgressEvent) => {
         if (e.lengthComputable) {
           const percentage = Math.round((e.loaded * 100) / e.total);
           const diff = new Date().getTime() - time;
-          time += diff;
-          load = e.loaded - load;
-          const speed = parseInt((load / diff * 1000) as any, 10);
+          speed = Math.round(e.loaded / diff * 1000);
 
           file.progress = {
             status: UploadStatus.Uploading,
             data: {
               percentage: percentage,
               speed: speed,
-              speedHuman: `${humanizeBytes(speed)}/s`
+              speedHuman: `${humanizeBytes(speed)}/s`,
+              startTime: file.progress.data.startTime || new Date().getTime(),
+              endTime: null
             }
           };
 
@@ -201,12 +205,15 @@ export class NgUploaderService {
 
       xhr.onreadystatechange = () => {
         if (xhr.readyState === XMLHttpRequest.DONE) {
+          const speedAverage = Math.round(file.size / (new Date().getTime() - file.progress.data.startTime) * 1000);
           file.progress = {
             status: UploadStatus.Done,
             data: {
               percentage: 100,
-              speed: null,
-              speedHuman: null
+              speed: speedAverage,
+              speedHuman: `${humanizeBytes(speedAverage)}/s`,
+              startTime: file.progress.data.startTime,
+              endTime: new Date().getTime()
             }
           };
 
diff --git a/src/styles/app.sass b/src/styles/app.sass
index f29a37d7..ca34cbe9 100644
--- a/src/styles/app.sass
+++ b/src/styles/app.sass
@@ -9,8 +9,7 @@ html, body, .hero
   width: 100%
   font-family: 'Open Sans', sans-serif
   -webkit-font-smoothing: antialiased
-  background: #00bf8f
-  background: linear-gradient(to bottom, #001510, #00bf8f)
+  background: $black
 
 .drop-container
   padding: 40px 0
@@ -64,7 +63,7 @@ html, body, .hero
   width: 100%
   height: 4px
   border-radius: 10px
-  background: #414E63
+  background: #495057
   margin: 30px 0
   position: relative
   border: none
@@ -102,7 +101,7 @@ html, body, .hero
 
 .label
   margin: 5px 10px 0 0
-  color: $black
+  color: $white
   display: block
 
 .input-field