Merge pull request #2 from apivideo/add-attributes-to-progress-events

Add attributes to progress event

Author: olivier-lando

README.md

@@ -1,6 +1,7 @@
 ![](https://github.com/apivideo/API_OAS_file/blob/master/apivideo_banner.png)
 
 # api.video video uploader
+![npm](https://img.shields.io/npm/v/@api.video/video-uploader) ![ts](https://badgen.net/badge/-/TypeScript/blue?icon=typescript&label)
 
 Typescript library to upload videos to api.video using delegated upload token (or usual access token) from the front-end.
 
@@ -145,14 +146,25 @@ On fail, the promise embeds the status code & error message returned by the API.
 ## `onProgress()`
 
 The onProgress() method let you defined an upload progress listener. It takes a callback function with one parameter: the onProgress events.
-An onProgress event contains 2 attributes:
-- loaded: the number of uploaded bytes
-- total: the total number of bytes
+An onProgress event contains the following attributes:
+- uploadedBytes (number): total number of bytes uploaded for this upload
+- totalBytes (number): total size of the file
+- chunksCount (number): number of upload chunks 
+- chunksBytes (number): size of a chunk
+- currentChunk (number): index of the chunk being uploaded
+- currentChunkUploadedBytes (number): number of bytes uploaded for the current chunk
 
 ### Example
 
 ```javascript
     // ... uploader instanciation
 
-    uploader.onProgress((event) => console.log(event.loaded, event.total));
+    uploader.onProgress((event) => {
+        console.log(`total number of bytes uploaded for this upload: ${event.uploadedBytes}.`);
+        console.log(`total size of the file: ${event.totalBytes}.`);
+        console.log(`number of upload chunks: ${event.chunksCount} .`);
+        console.log(`size of a chunk: ${event.chunksBytes}.`);
+        console.log(`index of the chunk being uploaded: ${event.currentChunk}.`);
+        console.log(`number of bytes uploaded for the current chunk: ${event.currentChunkUploadedBytes}.`);
+    });
 ```

dist/index.js

@@ -11,9 +11,13 @@ interface Options {
     apiHost?: string;
     retries?: number;
 }
-interface UploadProgressEvent {
-    loaded: number;
-    total: number;
+export interface UploadProgressEvent {
+    uploadedBytes: number;
+    totalBytes: number;
+    chunksCount: number;
+    chunksBytes: number;
+    currentChunk: number;
+    currentChunkUploadedBytes: number;
 }
 export declare class VideoUploader {
     private file;
@@ -28,7 +32,7 @@ export declare class VideoUploader {
     private onProgressCallbacks;
     private headers;
     constructor(options: OptionsWithAccessToken | OptionsWithUploadToken);
-    onProgress(cb: () => UploadProgressEvent): void;
+    onProgress(cb: (e: UploadProgressEvent) => void): void;
     upload(): Promise<any>;
     private sleep;
     private createFormData;

dist/src/index.d.ts

@@ -0,0 +1 @@
+export {};

dist/test/index.test.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/video-uploader",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "api.video video uploader",
   "repository": {
     "type": "git",

package.json

@@ -12,9 +12,13 @@ interface Options {
     retries?: number;
 }
 
-interface UploadProgressEvent {
-    loaded: number;
-    total: number;
+export interface UploadProgressEvent {
+    uploadedBytes: number;
+    totalBytes: number;
+    chunksCount: number;
+    chunksBytes: number;
+    currentChunk: number;
+    currentChunkUploadedBytes: number;
 }
 
 const DEFAULT_CHUNK_SIZE = 1024 * 1024; // 1mb
@@ -65,7 +69,7 @@ export class VideoUploader {
         this.chunksCount = Math.ceil(this.fileSize / this.chunkSize);
     }
 
-    public onProgress(cb: () => UploadProgressEvent) {
+    public onProgress(cb: (e: UploadProgressEvent) => void) {
         this.onProgressCallbacks.push(cb);
     }
 
@@ -80,7 +84,7 @@ export class VideoUploader {
                     this.currentChunk++;
 
                 } catch (e) {
-                    if(retriesCount >= this.retries) {
+                    if (retriesCount >= this.retries) {
                         reject(e);
                         break;
                     }
@@ -122,7 +126,7 @@ export class VideoUploader {
             for (const headerName of Object.keys(this.headers)) {
                 xhr.setRequestHeader(headerName, this.headers[headerName]);
             }
-            xhr.onreadystatechange = (e) => {
+            xhr.onreadystatechange = (_) => {
                 if (xhr.readyState === 4) { // DONE
                     if (xhr.status >= 400) {
                         reject({
@@ -132,10 +136,14 @@ export class VideoUploader {
                     }
                 }
             };
-            xhr.onload = (e) => resolve(JSON.parse(xhr.response));
+            xhr.onload = (_) => resolve(JSON.parse(xhr.response));
             xhr.onprogress = (e) => this.onProgressCallbacks.forEach(cb => cb({
-                loaded: e.loaded + firstByte,
-                total: this.fileSize
+                uploadedBytes: e.loaded + firstByte,
+                totalBytes: this.fileSize,
+                chunksCount: this.chunksCount,
+                chunksBytes: this.chunkSize,
+                currentChunk: this.currentChunk + 1,
+                currentChunkUploadedBytes: e.loaded,
             }));
             xhr.send(this.createFormData(firstByte, lastByte));
         });

src/index.ts

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { VideoUploader } from '../src/index';
+import { UploadProgressEvent, VideoUploader } from '../src/index';
 import mock from 'xhr-mock';
 
 
@@ -78,6 +78,38 @@ describe('Access token auth', () => {
     });
 });
 
+describe('Progress listener', () => {
+    beforeEach(() => mock.setup());
+    afterEach(() => mock.teardown());
+
+    it('upload retries', (done) => {
+        const videoId = "9876";
+        let lastUploadProgressEvent: UploadProgressEvent;
+
+        const uploader = new VideoUploader({
+            file: new File([new ArrayBuffer(2000)], "filename"),
+            accessToken: "1234",
+            videoId,
+            chunkSize: 500
+        });
+
+        mock.post(`https://ws.api.video/videos/${videoId}/source`, (req, res) => res.status(201).body("{}"));
+
+        uploader.onProgress((e: UploadProgressEvent) => lastUploadProgressEvent = e);
+
+        uploader.upload().then(() => {
+            expect(lastUploadProgressEvent).to.deep.equal({
+                ...lastUploadProgressEvent,
+                totalBytes: 2000,
+                chunksCount: 4,
+                chunksBytes: 500,
+                currentChunk: 4,
+            });
+            done();
+        });
+    });
+});
+
 describe('Errors & retries', () => {
     beforeEach(() => mock.setup());
     afterEach(() => mock.teardown());