feat(FEC-9145): support non sibling video tags (#19)

update `ImaDAIEngineDecorator` according to kaltura/playkit-js#369
kaltura · Jul 4, 2019 · b991825 · b991825
1 parent d37dee5
commit b991825
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "watch": "webpack --progress --colors --watch"
   },
   "devDependencies": {
-    "@playkit-js/playkit-js": "0.47.0-canary.173edfb",
+    "@playkit-js/playkit-js": "0.49.0-canary.20b084c",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
     "babel-eslint": "^7.1.1",
@@ -77,7 +77,7 @@
     "webpack-dev-server": "latest"
   },
   "peerDependencies": {
-    "@playkit-js/playkit-js": "0.47.0-canary.173edfb"
+    "@playkit-js/playkit-js": "0.49.0-canary.20b084c"
   },
   "publishConfig": {
     "access": "public"

diff --git a/src/ima-dai-engine-decorator.js b/src/ima-dai-engine-decorator.js
@@ -1,5 +1,5 @@
 // @flow
-import {AdBreakType, AdEventType, BaseEngineDecorator, EventManager, FakeEvent, getLogger, Html5EventType} from '@playkit-js/playkit-js';
+import {AdBreakType, AdEventType, EventManager, FakeEvent, getLogger, Html5EventType} from '@playkit-js/playkit-js';
 import {ImaDAI} from './ima-dai';
 import {ImaDAIEventManager} from './ima-dai-event-manager';
 
@@ -8,21 +8,37 @@ import {ImaDAIEventManager} from './ima-dai-event-manager';
  * @class ImaDAIEngineDecorator
  * @param {IEngine} engine - The HTML5 engine.
  * @param {ImaDAI} plugin - The ima dai plugin.
+ * @param {Function} dispatchEventHandler - A dispatch event handler
+ * @implements {IEngineDecorator}
  */
-class ImaDAIEngineDecorator extends BaseEngineDecorator {
+class ImaDAIEngineDecorator implements IEngineDecorator {
   _plugin: ImaDAI;
   _logger: Object;
-  _pluginDestroyed: boolean;
+  _engine: IEngine;
+  _eventManager: EventManager;
+  _daiEventManager: ImaDAIEventManager;
+  _active: boolean;
+  _loadStart: boolean;
   _contentEnded: boolean;
 
-  constructor(engine: IEngine, plugin: ImaDAI) {
-    super(engine);
+  constructor(engine: IEngine, plugin: ImaDAI, dispatchEventHandler: Function) {
+    this._eventManager = new EventManager();
+    this._engine = engine;
     this._plugin = plugin;
-    this._pluginDestroyed = false;
-    this._contentEnded = false;
-    this._daiEventManager = new ImaDAIEventManager(plugin, super.dispatchEvent.bind(this));
-    this._attachListeners();
+    this._daiEventManager = new ImaDAIEventManager(plugin, dispatchEventHandler);
     this._logger = getLogger('ImaDAIEngineDecorator');
+    this._initMembers();
+    this._attachListeners();
+  }
+
+  _initMembers(): void {
+    this._active = true;
+    this._loadStart = false;
+    this._contentEnded = false;
+  }
+
+  get active(): boolean {
+    return this._active;
   }
 
   /**
@@ -34,22 +50,24 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @instance
    * @memberof ImaDAIEngineDecorator
    */
-  load(startTime: number): Promise<Object> {
+  load(startTime: ?number): Promise<Object> {
     this._logger.debug('load', startTime);
     // When load comes from a user gesture need to open the video element synchronously
     this._engine.getVideoElement().load();
     return this._plugin
       .getStreamUrl()
       .then(url => {
         this._logger.debug('Stream url has been fetched', url);
+        this._loadStart = true;
         this._engine.src = url;
         return this._engine.load(this._plugin.getStreamTime(startTime));
       })
       .catch(e => {
         this._logger.error(e);
         this._plugin.destroy();
-        this._pluginDestroyed = true;
-        return this._engine.load(startTime);
+        const loadPromise = this._engine.load(startTime);
+        this._active = false;
+        return loadPromise;
       });
   }
 
@@ -61,10 +79,7 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @instance
    * @memberof ImaDAIEngineDecorator
    */
-  dispatchEvent(event: FakeEvent): ?boolean {
-    if (this._pluginDestroyed) {
-      return super.dispatchEvent(event);
-    }
+  dispatchEvent(event: FakeEvent): boolean {
     return this._daiEventManager.dispatchEvent(event);
   }
 
@@ -77,14 +92,10 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @memberof ImaDAIEngineDecorator
    */
   pause(): void {
-    if (this._pluginDestroyed) {
-      super.pause();
-    } else {
-      if (this._plugin.isAdBreak()) {
-        this._plugin.pauseAd();
-      }
-      this._engine.pause();
+    if (this._plugin.isAdBreak()) {
+      this._plugin.pauseAd();
     }
+    this._engine.pause();
   }
 
   /**
@@ -96,14 +107,10 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @memberof ImaDAIEngineDecorator
    */
   play(): void {
-    if (this._pluginDestroyed) {
-      super.play();
-    } else {
-      if (this._plugin.isAdBreak()) {
-        this._plugin.resumeAd();
-      }
-      this._engine.play();
+    if (this._plugin.isAdBreak()) {
+      this._plugin.resumeAd();
     }
+    this._engine.play();
   }
 
   /**
@@ -115,10 +122,10 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @memberof ImaDAIEngineDecorator
    */
   reset(): void {
-    this._pluginDestroyed = false;
     this._daiEventManager.reset();
     this._engine.reset();
-    this._contentEnded = false;
+    this._eventManager.removeAll();
+    this._initMembers();
     this._attachListeners();
   }
 
@@ -131,8 +138,8 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @memberof ImaDAIEngineDecorator
    */
   destroy(): void {
-    this._pluginDestroyed = false;
     this._daiEventManager.destroy();
+    this._eventManager.destroy();
     this._engine.destroy();
   }
 
@@ -145,9 +152,6 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @memberof ImaDAIEngineDecorator
    */
   get paused(): boolean {
-    if (this._pluginDestroyed) {
-      return super.paused;
-    }
     return this._plugin.isAdBreak();
   }
 
@@ -160,7 +164,7 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @memberof ImaDAIEngineDecorator
    */
   get ended(): boolean {
-    return super.ended || (!this._pluginDestroyed && this._contentEnded);
+    return this._contentEnded;
   }
 
   /**
@@ -173,13 +177,9 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @memberof ImaDAIEngineDecorator
    */
   set currentTime(to: number): void {
-    if (this._pluginDestroyed) {
-      super.currentTime = to;
-    } else {
-      const streamTime = this._plugin.getStreamTime(to);
-      if (streamTime) {
-        this._engine.currentTime = streamTime;
-      }
+    const streamTime = this._plugin.getStreamTime(to);
+    if (streamTime) {
+      this._engine.currentTime = streamTime;
     }
   }
 
@@ -191,11 +191,8 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @instance
    * @memberof ImaDAIEngineDecorator
    */
-  get currentTime(): ?number {
-    if (this._pluginDestroyed) {
-      return super.currentTime;
-    }
-    return this._plugin.getContentTime(this._engine.currentTime);
+  get currentTime(): number {
+    return this._plugin.getContentTime(this._engine.currentTime) || 0;
   }
 
   /**
@@ -206,23 +203,25 @@ class ImaDAIEngineDecorator extends BaseEngineDecorator {
    * @instance
    * @memberof ImaDAIEngineDecorator
    */
-  get duration(): ?number {
-    if (this._pluginDestroyed) {
-      return super.duration;
-    }
-    return this._plugin.getContentTime(this._engine.duration);
+  get duration(): number {
+    return this._plugin.getContentTime(this._engine.duration) || NaN;
   }
 
   _attachListeners(): void {
-    this._eventManager.listen(this._plugin.player, AdEventType.AD_BREAK_START, event => this._onAdBreakStart(event));
     this._eventManager.listen(this._plugin.player, Html5EventType.PLAY, () => !this._plugin.isAdBreak() && (this._contentEnded = false));
+    this._eventManager.listen(this._plugin.player, AdEventType.AD_BREAK_START, event => this._onAdBreakStart(event));
+    this._eventManager.listenOnce(this._plugin.player, AdEventType.AD_BREAK_END, () => (this._active = true));
   }
 
   _onAdBreakStart(event: EventManager): void {
     const adBreak = event.payload.adBreak;
     if (adBreak.type === AdBreakType.POST) {
       this._contentEnded = true;
     }
+    if (!this._loadStart) {
+      // preroll from another ad plugin (e.g. bumper)
+      this._active = false;
+    }
   }
 }
 

diff --git a/src/ima-dai-event-manager.js b/src/ima-dai-event-manager.js
@@ -23,15 +23,16 @@ class ImaDAIEventManager {
     this._attachListeners();
   }
 
-  dispatchEvent(event: FakeEvent): ?boolean {
+  dispatchEvent(event: FakeEvent): boolean {
     if (this._stopEventDispatchingMap[event.type]) {
       this._logger.debug('Event dispatching terminated', event);
-      return;
+      return event.defaultPrevented;
     }
     if (this._parallelEvents.includes(event.type) || !this._plugin.isAdBreak() || !Object.values(Html5EventType).includes(event.type)) {
       return this._dispatchEventHandler(event);
     } else {
       this._queue.push(event);
+      return event.defaultPrevented;
     }
   }
 

diff --git a/src/ima-dai.js b/src/ima-dai.js
@@ -73,14 +73,15 @@ class ImaDAI extends BasePlugin implements IAdsControllerProvider, IEngineDecora
   /**
    * Gets the engine decorator.
    * @param {IEngine} engine - The engine to decorate.
+   * @param {Function} dispatchEventHandler - A dispatch event handler
    * @public
-   * @returns {ImaDAIEngineDecorator} - The ads api.
+   * @returns {IEngineDecorator} - The ads api.
    * @instance
    * @memberof ImaDAI
    */
-  getEngineDecorator(engine: IEngine): ImaDAIEngineDecorator {
+  getEngineDecorator(engine: IEngine, dispatchEventHandler: Function): IEngineDecorator {
     this._engine = engine;
-    return new ImaDAIEngineDecorator(engine, this);
+    return new ImaDAIEngineDecorator(engine, this, dispatchEventHandler);
   }
 
   /**
@@ -187,7 +188,7 @@ class ImaDAI extends BasePlugin implements IAdsControllerProvider, IEngineDecora
    * @instance
    * @memberof ImaDAI
    */
-  getStreamTime(contentTime: number): number {
+  getStreamTime(contentTime: ?number): number {
     return this._streamManager ? this._streamManager.streamTimeForContentTime(contentTime) : 0;
   }
 
@@ -199,7 +200,7 @@ class ImaDAI extends BasePlugin implements IAdsControllerProvider, IEngineDecora
    * @instance
    * @memberof ImaDAI
    */
-  getContentTime(streamTime: number): ?number {
+  getContentTime(streamTime: ?number): ?number {
     if (this._streamManager) {
       return this._streamManager.contentTimeForStreamTime(streamTime);
     }

diff --git a/yarn.lock b/yarn.lock
@@ -16,9 +16,9 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-"@playkit-js/playkit-js@0.47.0-canary.173edfb":
-  version "0.47.0-canary.173edfb"
-  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.47.0-canary.173edfb.tgz#de7dcea8d9d0f38e6764ab6c4d7b2b55a53cb209"
+"@playkit-js/playkit-js@0.49.0-canary.20b084c":
+  version "0.49.0-canary.20b084c"
+  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.49.0-canary.20b084c.tgz#c49685e6627029de39b8ababacf5a0c5ef5f184d"
   dependencies:
     js-logger "^1.3.0"
     ua-parser-js "^0.7.13"