Merge pull request #1 from apivideo/retries

Retries

Author: olivier-lando

.github/workflows/release.yml

@@ -0,0 +1,16 @@
+name: Release package to npmjs
+on:
+  release:
+    types: [created]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install --no-save
+      - run: npm publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -2,7 +2,7 @@
 
 # api.video video uploader
 
-Typescript library to upload videos to api.video using delegated token
+Typescript library to upload videos to api.video using delegated token (or usual access token) from front-end.
 
 # Usage
 
@@ -73,3 +73,83 @@ Then, once the `window.onload` event has been trigered, create your player using
     }
 </script>
 ```
+
+# Instanciation
+
+## Options 
+
+The upload is instanciated using an `options` object. Options to provide depend on the way you want to authenticate to the API: either using a delegated upload token (recommanded), or using a usual access token. 
+
+### Using a delegated token:
+
+
+|                   Option name | Mandatory | Type   | Description       |
+| ----------------------------: | --------- | ------ | ----------------- |
+|                   uploadToken | **yes**   | string | your upload token |
+| _common options (see bellow)_ |           |        |                   |
+
+
+### Using an access token:
+
+
+|                   Option name | Mandatory | Type   | Description             |
+| ----------------------------: | --------- | ------ | ----------------------- |
+|                   accessToken | **yes**   | string | your access token       |
+|                       videoId | **yes**   | string | id of an existing video |
+| _common options (see bellow)_ |           |        |                         |
+
+
+### Common options
+
+
+| Option name | Mandatory | Type   | Description                                           |
+| ----------: | --------- | ------ | ----------------------------------------------------- |
+|        file | yes       | File   | the file you want to upload                           |
+|   chunkSize | no        | number | number of bytes of each upload chunk (default: 1MB)   |
+|     apiHost | no        | string | api.video host (default: ws.api.video)                |
+|     retries | no        | number | number of retries when an API call fails (default: 5) |
+
+
+## Example
+
+```javascript
+    const uploader = new VideoUploader({
+        file: files[0],
+        uploadToken: "YOUR_DELEGATED_TOKEN",
+        chunkSize: 1024*1024*10, // 10MB
+        retries: 10,
+    });
+```
+
+# Methods
+
+## `upload()`
+
+The upload() method starts the upload. It takes no parameter. It returns a Promise that resolves once the file is uploaded. If an API call fails more than the specified number of retries, then the promise is rejected.
+On success, the promise embeds the `video` object returned by the API.
+On fail, the promise embeds the status code & error message returned by the API.
+
+### Example
+
+```javascript
+    // ... uploader instanciation
+
+    uploader.upload()
+        .then((video) => console.log(video))
+        .catch((error) => console.log(error.status, error.message));
+```
+
+## `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
+
+### Example
+
+```javascript
+    // ... uploader instanciation
+    
+    uploader.onProgress((event) => console.log(event.loaded, event.total));
+```

dist/index.js

@@ -1,8 +1,15 @@
+interface OptionsWithUploadToken extends Options {
+    uploadToken: string;
+}
+interface OptionsWithAccessToken extends Options {
+    accessToken: string;
+    videoId: string;
+}
 interface Options {
     file: File;
-    uploadToken: string;
     chunkSize?: number;
-    uploadEndpoint?: string;
+    apiHost?: string;
+    retries?: number;
 }
 interface UploadProgressEvent {
     loaded: number;
@@ -12,17 +19,18 @@ export declare class VideoUploader {
     private file;
     private chunkSize;
     private uploadEndpoint;
-    private uploadToken;
     private currentChunk;
     private chunksCount;
     private fileSize;
     private fileName;
     private videoId?;
+    private retries;
     private onProgressCallbacks;
-    constructor(options: Options);
+    private headers;
+    constructor(options: OptionsWithAccessToken | OptionsWithUploadToken);
     onProgress(cb: () => UploadProgressEvent): void;
     upload(): Promise<any>;
-    private validateOptions;
+    private sleep;
     private createFormData;
     private uploadCurrentChunk;
 }

dist/src/index.d.ts

@@ -34,7 +34,8 @@
     "tslint": "^6.1.3",
     "typescript": "^4.0.2",
     "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "xhr-mock": "^2.5.1"
   },
   "dependencies": {
     "core-js": "^3.8.3"

package-lock.json

@@ -1,8 +1,15 @@
+interface OptionsWithUploadToken extends Options {
+    uploadToken: string;
+}
+interface OptionsWithAccessToken extends Options {
+    accessToken: string;
+    videoId: string;
+}
 interface Options {
     file: File;
-    uploadToken: string;
     chunkSize?: number;
-    uploadEndpoint?: string;
+    apiHost?: string;
+    retries?: number;
 }
 
 interface UploadProgressEvent {
@@ -11,25 +18,46 @@ interface UploadProgressEvent {
 }
 
 const DEFAULT_CHUNK_SIZE = 1024 * 1024; // 1mb
-const DEFAULT_UPLOAD_ENDPOINT = "https://ws.api.video/upload";
+const DEFAULT_RETRIES = 5;
+const DEFAULT_API_HOST = "ws.api.video";
 
 export class VideoUploader {
     private file: File;
     private chunkSize: number;
     private uploadEndpoint: string;
-    private uploadToken: string;
     private currentChunk: number = 0;
     private chunksCount: number;
     private fileSize: number;
     private fileName: string;
     private videoId?: string;
+    private retries: number;
     private onProgressCallbacks: ((e: UploadProgressEvent) => void)[] = [];
+    private headers: { [name: string]: string } = {};
+
+    constructor(options: OptionsWithAccessToken | OptionsWithUploadToken) {
+        const apiHost = options.apiHost || DEFAULT_API_HOST;
+
+        if (!options.file) {
+            throw new Error("'file' is missing");
+        }
+
+        if (options.hasOwnProperty("uploadToken")) {
+            const optionsWithUploadToken = options as OptionsWithUploadToken;
+            this.uploadEndpoint = `https://${apiHost}/upload?token=${optionsWithUploadToken.uploadToken}`;
+
+        } else if (options.hasOwnProperty("accessToken")) {
+            const optionsWithAccessToken = options as OptionsWithAccessToken;
+            if (!optionsWithAccessToken.videoId) {
+                throw new Error("'videoId' is missing");
+            }
+            this.uploadEndpoint = `https://${apiHost}/videos/${optionsWithAccessToken.videoId}/source`;
+            this.headers.Authorization = `Bearer ${optionsWithAccessToken.accessToken}`;
+        } else {
+            throw new Error(`You must provide either an accessToken or an uploadToken`);
+        }
 
-    constructor(options: Options) {
-        this.validateOptions(options);
         this.chunkSize = options.chunkSize || DEFAULT_CHUNK_SIZE;
-        this.uploadEndpoint = options.uploadEndpoint || DEFAULT_UPLOAD_ENDPOINT;
-        this.uploadToken = options.uploadToken;
+        this.retries = options.retries || DEFAULT_RETRIES;
         this.file = options.file;
         this.fileSize = this.file.size;
         this.fileName = this.file.name;
@@ -44,20 +72,30 @@ export class VideoUploader {
     public upload(): Promise<any> {
         return new Promise(async (resolve, reject) => {
             let response;
+            let retriesCount = 0;
             while (this.currentChunk < this.chunksCount) {
-                response = await this.uploadCurrentChunk();
-                this.videoId = response.videoId;
-                this.currentChunk++;
+                try {
+                    response = await this.uploadCurrentChunk();
+                    this.videoId = response.videoId;
+                    this.currentChunk++;
+
+                } catch (e) {
+                    if(retriesCount >= this.retries) {
+                        reject(e);
+                        break;
+                    }
+                    await this.sleep(200 + retriesCount * 500);
+                    retriesCount++;
+                }
             }
             resolve(response);
         });
     }
 
-    private validateOptions(options: Options) {
-        const required = ['file', 'uploadToken']
-        required.forEach(r => {
-            if (!(options as any)[r]) throw new Error(`"${r}" is missing`);
-        });
+    private sleep(duration: number): Promise<void> {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => resolve(), duration);
+        })
     }
 
     private createFormData(startByte: number, endByte: number): FormData {
@@ -78,10 +116,22 @@ export class VideoUploader {
 
             const contentRange = `bytes ${firstByte}-${lastByte - 1}/${this.fileSize}`;
 
-            const xhr = new XMLHttpRequest();
-            xhr.open("POST", `${this.uploadEndpoint}?token=${this.uploadToken}`, true);
+            const xhr = new window.XMLHttpRequest();
+            xhr.open("POST", `${this.uploadEndpoint}`, true);
             xhr.setRequestHeader("Content-Range", contentRange);
-
+            for (const headerName of Object.keys(this.headers)) {
+                xhr.setRequestHeader(headerName, this.headers[headerName]);
+            }
+            xhr.onreadystatechange = (e) => {
+                if (xhr.readyState === 4) { // DONE
+                    if (xhr.status >= 400) {
+                        reject({
+                            status: xhr.status,
+                            message: xhr.response
+                        });
+                    }
+                }
+            };
             xhr.onload = (e) => resolve(JSON.parse(xhr.response));
             xhr.onprogress = (e) => this.onProgressCallbacks.forEach(cb => cb({
                 loaded: e.loaded + firstByte,