fix(FEC-11156): cast button appears for one player only when multiple…

… players configured on the page and casting failed (#495)

Use RemotePlayerManager instance instead of static to support multiple players
Add API to mark player where the cast button was clicked
Fixes FEC-11156

src/common/cast/base-remote-player.js

@@ -53,6 +53,7 @@ class BaseRemotePlayer extends FakeEventTarget implements IRemotePlayer {
   _playerConfig: Object;
   _castConfig: Object;
   _eventManager: EventManager;
+  _isCastInitiator: boolean = false;
 
   constructor(name: string, castConfig: Object, remoteControl: RemoteControl) {
     super();
@@ -597,6 +598,14 @@ class BaseRemotePlayer extends FakeEventTarget implements IRemotePlayer {
   get config(): Object {
     return this._playerConfig;
   }
+
+  set isCastInitiator(isCastInitiator: boolean) {
+    this._isCastInitiator = isCastInitiator;
+  }
+
+  get isCastInitiator() {
+    return this._isCastInitiator;
+  }
 }
 
 export {BaseRemotePlayer};

src/common/cast/remote-player-manager.js

@@ -2,11 +2,13 @@
 import {RemoteControl} from './remote-control';
 import {BaseRemotePlayer} from './base-remote-player';
 import {getLogger} from '@playkit-js/playkit-js';
+import {KalturaPlayer} from '../../kaltura-player';
 
 class RemotePlayerManager {
-  static _logger: any = getLogger('RemotePlayerManager');
   static _registry: Map<string, Function> = new Map();
-  static _remotePlayers: Map<string, BaseRemotePlayer> = new Map();
+  static _logger: any = getLogger('RemotePlayerManager');
+
+  _remotePlayers: Map<string, BaseRemotePlayer> = new Map();
 
   static register(type: string, remotePlayer: Function): void {
     if (typeof remotePlayer === 'function') {
@@ -21,39 +23,47 @@ class RemotePlayerManager {
     }
   }
 
-  static load(castConfig: Object, remoteControl: RemoteControl): void {
+  load(castConfig: Object, player: KalturaPlayer): void {
     const registry = RemotePlayerManager._registry;
     registry.forEach((RemotePlayer: Function, type: string) => {
       RemotePlayerManager._logger.debug(`Load remote player of type ${type}`);
-      RemotePlayerManager._remotePlayers.set(type, new RemotePlayer(castConfig, remoteControl));
+      const remotePlayer = new RemotePlayer(castConfig, new RemoteControl(player), player.config.targetId);
+      this._remotePlayers.set(type, remotePlayer);
     });
   }
 
-  static startCasting(type?: string): Promise<*> {
+  startCasting(type?: string): Promise<*> {
     RemotePlayerManager._logger.debug(`Start casting`);
-    const remotePlayer = RemotePlayerManager._getRemotePlayer(type);
+    const remotePlayer = this._getRemotePlayer(type);
     if (remotePlayer) {
       return remotePlayer.startCasting();
     }
     return Promise.reject();
   }
 
-  static isCastAvailable(type?: string): boolean {
-    const remotePlayer = RemotePlayerManager._getRemotePlayer(type);
+  isCastAvailable(type?: string): boolean {
+    const remotePlayer = this._getRemotePlayer(type);
     if (remotePlayer) {
       RemotePlayerManager._logger.debug(`isCastAvailable: ${remotePlayer.isCastAvailable()}`);
       return remotePlayer.isCastAvailable();
     }
     return false;
   }
 
-  static destroy(): void {
-    const remotePlayers = RemotePlayerManager._remotePlayers;
+  destroy(): void {
+    const remotePlayers = this._remotePlayers;
     Array.from(remotePlayers.values()).forEach(remotePlayer => remotePlayer.destroy());
   }
 
-  static _getRemotePlayer(type?: string): ?Object {
-    const remotePlayers = RemotePlayerManager._remotePlayers;
+  setIsCastInitiator(type?: string, isCastInitiator: boolean) {
+    const remotePlayer = this._getRemotePlayer(type);
+    if (remotePlayer) {
+      remotePlayer.isCastInitiator = isCastInitiator;
+    }
+  }
+
+  _getRemotePlayer(type?: string): ?Object {
+    const remotePlayers = this._remotePlayers;
     if (type && remotePlayers.get(type)) {
       return remotePlayers.get(type);
     } else if (remotePlayers.size > 0) {

src/common/utils/setup-helpers.js

@@ -15,8 +15,6 @@ import {
 } from '@playkit-js/playkit-js';
 import {ValidationErrorType} from './validation-error';
 import StorageManager from '../storage/storage-manager';
-import {RemotePlayerManager} from '../cast/remote-player-manager';
-import {RemoteControl} from '../cast/remote-control';
 import {KalturaPlayer} from '../../kaltura-player';
 import {addClientTag, addReferrer, updateSessionIdInUrl} from './kaltura-params';
 import {DEFAULT_OBSERVED_THRESHOLDS, DEFAULT_PLAYER_THRESHOLD} from './viewability-manager';
@@ -148,7 +146,7 @@ function applyStorageSupport(player: KalturaPlayer): void {
  */
 function applyCastSupport(defaultOptions: KPOptionsObject, player: KalturaPlayer): void {
   if (defaultOptions.cast) {
-    RemotePlayerManager.load(defaultOptions.cast, new RemoteControl(player));
+    player.remotePlayerManager.load(defaultOptions.cast, player);
   }
 }
 

src/kaltura-player.js

@@ -111,6 +111,7 @@ class KalturaPlayer extends FakeEventTarget {
     //configure sources after configure finished for all components - making sure all we'll set up correctly
     this._playlistManager.configure({items: (options.playlist && options.playlist.items) || []});
     this._localPlayer.setSources(sources || {});
+    this._remotePlayerManager = new RemotePlayerManager();
   }
 
   /**
@@ -353,7 +354,7 @@ class KalturaPlayer extends FakeEventTarget {
     this._eventManager.destroy();
     this._thumbnailManager?.destroy();
     this._viewabilityManager.destroy();
-    RemotePlayerManager.destroy();
+    this._remotePlayerManager.destroy();
     this._pluginsConfig = {};
     const targetContainer = document.getElementById(targetId);
     if (targetContainer && targetContainer.parentNode) {
@@ -454,12 +455,25 @@ class KalturaPlayer extends FakeEventTarget {
     return this._localPlayer.getLogLevel(name);
   }
 
-  startCasting(type?: string): Promise<*> {
-    return RemotePlayerManager.startCasting(type);
+  startCasting(type: string): Promise<*> {
+    this.setIsCastInitiator(type, true);
+    return new Promise((resolve, reject) => {
+      this.remotePlayerManager
+        .startCasting(type)
+        .then(resolve)
+        .catch(() => {
+          this.setIsCastInitiator(type, false);
+          reject();
+        });
+    });
+  }
+
+  setIsCastInitiator(type: string, isCastInitiator: boolean) {
+    this._remotePlayerManager.setIsCastInitiator(type, isCastInitiator);
   }
 
   isCastAvailable(type?: string): boolean {
-    return RemotePlayerManager.isCastAvailable(type);
+    return this._remotePlayerManager.isCastAvailable(type);
   }
 
   getCastSession(): ?RemoteSession {
@@ -1032,6 +1046,10 @@ class KalturaPlayer extends FakeEventTarget {
   addTextTrack(kind: string, label?: string): ?TextTrack {
     return this._localPlayer.addTextTrack(kind, label);
   }
+
+  get remotePlayerManager() {
+    return this._remotePlayerManager;
+  }
 }
 
 export {KalturaPlayer};