Merge pull request #38 from apivideo/v1.2.15

v1.2.15

Author: olivier-lando

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [1.2.15] - 2022-04-20
+- Add event callback types
+- Delay some methods execution after ready event is received
+- Add playbackRate option
+- Add hideTitle() and showTitle() methods
+- Add setAutoplay() method
+
 ## [1.2.14] - 2022-04-11
 - Add `chromeless` mode
 - Add `hidePoster` option

README.md

@@ -27,7 +27,10 @@
       - [`setChromeless(chromeless: boolean)`](#setchromelesschromeless-boolean)
       - [`hideSubtitles()`](#hidesubtitles)
       - [`showSubtitles()`](#showsubtitles)
+      - [`hideTitles()`](#hidetitles)
+      - [`showTitles()`](#showtitles)
       - [`setLoop(loop: boolean)`](#setlooploop-boolean)
+      - [`setAutoplay(autoplay: boolean)`](#setautoplayautoplay-boolean)
       - [`seek(time: number)`](#seektime-number)
       - [`setPlaybackRate(rate: number)`](#setplaybackraterate-number)
       - [`setCurrentTime(time: number)`](#setcurrenttimetime-number)
@@ -139,6 +142,7 @@ The PlayerSdk constructor takes 2 parameters:
 |    hidePoster | no (default: false)   | boolean | the poster image isn't displayed                                                                             |
 | showSubtitles | no (default: false)   | boolean | the video subtitles are shown by default                                                                     |
 |          loop | no (default: false)   | boolean | once the video is finished it automatically starts again                                                     |
+|  playbackRate | no (default: 1)       | number  | the playback rate of the video: 1 for normal, 2 for x2, etc.                                                 |
 
 
 The sdk instance can be used to control the video playback, and to listen to player events.
@@ -226,8 +230,14 @@ The sdk instance has the following methods:
 > Hide the player subtitles.
 #### `showSubtitles()` 
 > Show the player subtitles.
+#### `hideTitles()` 
+> Hide the video title at the top of the video.
+#### `showTitles()` 
+> Show the video title at the top of the video.
 #### `setLoop(loop: boolean)`
 > Define if the video should be played in loop.
+#### `setAutoplay(autoplay: boolean)`
+> Define if the video should start playing as soon as it is loaded                                                              |
 #### `seek(time: number)` 
 > Add/substract the given number of seconds to/from the playback time. 
 #### `setPlaybackRate(rate: number)` 

dist/index.d.ts

@@ -26,13 +26,47 @@ declare type SdkOptions = {
     iframeUrl?: string;
     token?: string;
     showSubtitles?: boolean;
+    playbackRate?: number;
 };
-declare type ControlName = "play" | "seekBack" | "seekForward" | "playbackRate" | "volume" | "fullscreen" | "subtitles" | "chapters" | "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more";
+declare type PlayerSdkEvent = {
+    controlsdisabled: () => void;
+    controlsenabled: () => void;
+    ended: () => void;
+    error: () => void;
+    firstplay: () => void;
+    fullscreenchange: () => void;
+    mouseenter: () => void;
+    mouseleave: () => void;
+    pause: () => void;
+    play: () => void;
+    playerresize: () => void;
+    qualitychange: (value: {
+        resolution: {
+            height: number;
+            width: number;
+        };
+    }) => void;
+    ratechange: () => void;
+    ready: () => void;
+    resize: () => void;
+    seeking: () => void;
+    timeupdate: (value: {
+        currentTime: number;
+    }) => void;
+    useractive: () => void;
+    userinactive: () => void;
+    volumechange: (value: {
+        volume: number;
+    }) => void;
+};
+export declare type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate" | "volume" | "fullscreen" | "subtitles" | "chapters" | "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more";
 export declare class PlayerSdk {
     private static DEFAULT_IFRAME_URL;
     private iframe;
-    private playerReady;
-    private onceReadyCallbacks;
+    private sdkInSync;
+    private currentVideoReady;
+    private onceSdkInSyncCallbacks;
+    private onceVideoReadyCallbacks;
     private userEventListeners;
     private sdkPlayerId;
     private sdkOrigin;
@@ -47,12 +81,15 @@ export declare class PlayerSdk {
     showControls(controls?: ControlName[]): void;
     hideSubtitles(): void;
     showSubtitles(): void;
+    hideTitle(): void;
+    showTitle(): void;
     pause(): void;
     mute(): void;
     unmute(): void;
     seek(time: number): void;
     setCurrentTime(time: number): void;
     setVolume(volume: number): void;
+    setAutoplay(autoplay: boolean): void;
     setLoop(loop: boolean): void;
     setChromeless(chromeless: boolean): void;
     setPlaybackRate(rate: number): void;
@@ -64,15 +101,23 @@ export declare class PlayerSdk {
     getPlaybackRate(callback?: (rate: number) => void): Promise<number>;
     getVolume(callback?: (volume: number) => void): Promise<number>;
     getLoop(callback?: (loop: boolean) => void): Promise<boolean>;
-    addEventListener(event: string, callback: () => void): void;
+    getVideoSize(callback?: (size: {
+        width: number;
+        height: number;
+    }) => void): Promise<{
+        width: number;
+        height: number;
+    }>;
+    addEventListener<K extends keyof PlayerSdkEvent>(event: K, callback: PlayerSdkEvent[K]): void;
     destroy(): void;
     private createNewPlayer;
     private buildPlayerUrl;
     private bindExistingPlayer;
     private addParametersInIframeHash;
     private urlParametersFromOptions;
     private onEvent;
-    private onReady;
+    private onSdkInSync;
+    private onVideoReady;
     private postMessage;
     private makeId;
     private createIframe;

dist/index.js

@@ -37,9 +37,33 @@ type SdkOptions = {
     iframeUrl?: string;
     token?: string;
     showSubtitles?: boolean;
+    playbackRate?: number;
 }
 
-type ControlName = "play" | "seekBack" | "seekForward" | "playbackRate"
+type PlayerSdkEvent = {
+    controlsdisabled: () => void;
+    controlsenabled: () => void;
+    ended: () => void;
+    error: () => void;
+    firstplay: () => void;
+    fullscreenchange: () => void;
+    mouseenter: () => void;
+    mouseleave: () => void;
+    pause: () => void;
+    play: () => void;
+    playerresize: () => void;
+    qualitychange: (value: { resolution: { height: number, width: number }}) => void;
+    ratechange: () => void;
+    ready: () => void;
+    resize: () => void;
+    seeking: () => void;
+    timeupdate: (value: { currentTime: number}) => void;
+    useractive: () => void;
+    userinactive: () => void;
+    volumechange: (value: { volume: number}) => void;
+}
+
+export type ControlName = "play" | "seekBackward" | "seekForward" | "playbackRate"
     | "volume" | "fullscreen" | "subtitles" | "chapters"
     | "pictureInPicture" | "progressBar" | "chromecast" | "download" | "more";
 
@@ -48,8 +72,10 @@ export class PlayerSdk {
     private static DEFAULT_IFRAME_URL = "https://embed.api.video/${type}/${id}";
 
     private iframe: HTMLIFrameElement | null = null;
-    private playerReady: boolean = false;
-    private onceReadyCallbacks: (() => void)[] = [];
+    private sdkInSync: boolean = false;
+    private currentVideoReady: boolean = false;
+    private onceSdkInSyncCallbacks: (() => void)[] = [];
+    private onceVideoReadyCallbacks: (() => void)[] = [];
     private userEventListeners: UserEventListener[] = [];
     private sdkPlayerId: number;
     private sdkOrigin: string;
@@ -85,9 +111,10 @@ export class PlayerSdk {
             this.bindExistingPlayer(this.iframe);
         }
 
-        this.onceReadyCallbacks = [];
+        this.onceSdkInSyncCallbacks = [];
         this.userEventListeners = [];
-        this.playerReady = false;
+        this.sdkInSync = false;
+        this.currentVideoReady = false;
         this.playerOrigin = new URL(this.iframeUrl).origin;
 
         window.addEventListener("message", (message) => {
@@ -99,9 +126,14 @@ export class PlayerSdk {
                 }
             }
         }, false);
+
+        if(options.playbackRate) {
+            this.setPlaybackRate(options.playbackRate);
+        }
     }
 
     loadConfig(options: SdkOptions) {
+        this.currentVideoReady = false;
         this.postMessage({
             message: 'loadConfig',
             url: this.buildPlayerUrl(options)
@@ -123,6 +155,12 @@ export class PlayerSdk {
     showSubtitles() {
         this.postMessage({ message: 'showSubtitles' });
     }
+    hideTitle() {
+        this.postMessage({ message: 'hideTitle' });
+    }
+    showTitle() {
+        this.postMessage({ message: 'showTitle' });
+    }
     pause() {
         this.postMessage({ message: 'pause' });
     }
@@ -141,14 +179,17 @@ export class PlayerSdk {
     setVolume(volume: number) {
         this.postMessage({ message: 'setVolume', volume });
     }
+    setAutoplay(autoplay: boolean) {
+        this.postMessage({ message: 'setAutoplay', autoplay });
+    }
     setLoop(loop: boolean) {
         this.postMessage({ message: 'setLoop', loop });
     }
     setChromeless(chromeless: boolean) {
         this.postMessage({ message: 'setChromeless', chromeless });
     }
     setPlaybackRate(rate: number) {
-        this.postMessage({ message: 'setPlaybackRate', rate });
+        this.postMessage({ message: 'setPlaybackRate', rate }, undefined, true);
     }
     setTheme(theme: PlayerTheme) {
         this.postMessage({ message: 'setTheme', theme });
@@ -160,7 +201,7 @@ export class PlayerSdk {
         return this.postMessage({ message: 'getMuted' }, callback);
     }
     getDuration(callback?: (duration: number) => void): Promise<number> {
-        return this.postMessage({ message: 'getDuration' }, callback);
+        return this.postMessage({ message: 'getDuration' }, callback, true);
     }
     getCurrentTime(callback?: (currentTime: number) => void): Promise<number> {
         return this.postMessage({ message: 'getCurrentTime' }, callback);
@@ -174,8 +215,11 @@ export class PlayerSdk {
     getLoop(callback?: (loop: boolean) => void): Promise<boolean> {
         return this.postMessage({ message: 'getLoop' }, callback);
     }
+    getVideoSize(callback?: (size: {width: number, height: number}) => void): Promise<{width: number, height: number}> {
+        return this.postMessage({ message: 'getVideoSize' }, callback, true);
+    }
 
-    addEventListener(event: string, callback: () => void) {
+    addEventListener<K extends keyof PlayerSdkEvent>(event: K, callback: PlayerSdkEvent[K]) {
         this.userEventListeners.push({ event, callback });
     }
 
@@ -252,9 +296,15 @@ export class PlayerSdk {
     }
 
     private urlParametersFromOptions(options: SdkOptions) {
+        const allowedKeys = ["id", "live", "autoplay", "muted", "metadata", "hideControls", "hidePoster",
+            "chromeless", "loop", "hideTitle", "iframeUrl", "token", "showSubtitles", "ts"];
+
         const optionsAsAny = options as any;
         optionsAsAny.ts = new Date().getTime();
         return Object.keys(options).map((key: string) => {
+            if(allowedKeys.indexOf(key) === -1) {
+                return;
+            }
             if (key === "metadata" && typeof optionsAsAny[key] === "object") {
                 const metadata = optionsAsAny[key];
                 return Object.keys(metadata).map((metadataName: string) => {
@@ -275,22 +325,34 @@ export class PlayerSdk {
             .forEach(uel => uel.callback(userData));
 
         switch (data.type) {
+            case 'ready':
+                this.onVideoReady();
+                break;
             case 'sdkSync':
-                this.onReady();
+                this.onSdkInSync();
                 break;
         }
     }
 
-    private onReady() {
-        if (!this.playerReady) {
-            this.playerReady = true;
-            this.onceReadyCallbacks.forEach(cb => {
+    private onSdkInSync() {
+        if (!this.sdkInSync) {
+            this.sdkInSync = true;
+            this.onceSdkInSyncCallbacks.forEach(cb => {
+                cb();
+            });
+        }
+    }
+
+    private onVideoReady() {
+        if(!this.currentVideoReady) {
+            this.currentVideoReady = true;
+            this.onceVideoReadyCallbacks.forEach(cb => {
                 cb();
             });
         }
     }
 
-    private postMessage<T>(message: any, callback?: (arg: T) => void): Promise<T> {
+    private postMessage<T>(message: any, callback?: (arg: T) => void, requireVideoReady: boolean = false): Promise<T> {
 
         return new Promise((resolve, reject): void => {
 
@@ -313,12 +375,17 @@ export class PlayerSdk {
             };
             messageWithPlayerId.callbackId = callbackId;
 
+            if(!this.currentVideoReady && requireVideoReady) {
+                this.onceVideoReadyCallbacks.push(() => this.playerOrigin && this.iframe?.contentWindow?.postMessage(messageWithPlayerId, this.playerOrigin));
+                return;
+            }
 
-            if (this.playerReady && !!this.playerOrigin) {
+            if (this.sdkInSync && !!this.playerOrigin) {
                 this.iframe.contentWindow.postMessage(messageWithPlayerId, this.playerOrigin);
-            } else {
-                this.onceReadyCallbacks.push(() => this.playerOrigin && this.iframe?.contentWindow?.postMessage(messageWithPlayerId, this.playerOrigin));
+                return;
             }
+
+            this.onceSdkInSyncCallbacks.push(() => this.playerOrigin && this.iframe?.contentWindow?.postMessage(messageWithPlayerId, this.playerOrigin));
         });
     }
 

index.ts

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/player-sdk",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "description": "api.video player SDK",
   "repository": {
     "type": "git",