feat(FEC-10081): as a front end developer I would like to be able to …

…be notified via events when floating player is toggled on/off (#10)

src/event-type.js

@@ -0,0 +1,17 @@
+// @flow
+const EventType: PKEventTypes = {
+  /**
+   * Fired when the player got in or out of visibility (according to the minimum visible percentage threshold)
+   */
+  PLAYER_VISIBILITY_CHANGED: 'playervisibilitychanged',
+  /**
+   * Fired when the player started / stopped floating due to visibility change
+   */
+  FLOATING_PLAYER_STATE_CHANGED: 'floatingplayerstatechanged',
+  /**
+   * Fired when the player stopped floating due to end user dismissal
+   */
+  FLOATING_PLAYER_DISMISSED: 'floatingplayerdismissed'
+};
+
+export {EventType};

src/index.js

@@ -7,6 +7,7 @@ declare var __NAME__: string;
 
 export {Visibility as Plugin};
 export {__VERSION__ as VERSION, __NAME__ as NAME};
+export {EventType} from './event-type';
 
 const pluginName: string = 'visibility';
 registerPlugin(pluginName, Visibility);

src/visibility.js

@@ -3,6 +3,7 @@ import {BasePlugin, Utils} from '@playkit-js/playkit-js';
 import './style.css';
 import {DismissibleFloatingButtonComponent} from './components/dismissible/dismissible';
 import 'intersection-observer';
+import {EventType} from './event-type';
 
 const FLOATING_ACTIVE_CLASS: string = 'playkit-floating-active';
 const FLOATING_CONTAINER_CLASS: string = 'playkit-floating-container';
@@ -113,25 +114,29 @@ class Visibility extends BasePlugin {
     this._dismissed = true;
     this.player.pause();
     this._stopFloating();
+    this.dispatchEvent(EventType.FLOATING_PLAYER_DISMISSED);
   }
 
   _stopFloating() {
     Utils.Dom.removeClassName(this._floatingContainer, FLOATING_ACTIVE_CLASS);
     Utils.Dom.removeAttribute(this._floatingContainer, 'style');
+    this.dispatchEvent(EventType.FLOATING_PLAYER_STATE_CHANGED, {active: false});
   }
 
   _startFloating() {
     Utils.Dom.addClassName(this._floatingContainer, FLOATING_ACTIVE_CLASS);
     Utils.Dom.setStyle(this._floatingContainer, 'height', this.config.floating.height + 'px');
     Utils.Dom.setStyle(this._floatingContainer, 'width', this.config.floating.width + 'px');
     Utils.Dom.setStyle(this._floatingContainer, 'margin', `${this.config.floating.marginY}px ${this.config.floating.marginX}px`);
+    this.dispatchEvent(EventType.FLOATING_PLAYER_STATE_CHANGED, {active: true});
   }
 
   _handleVisibilityChange(entries: Array<window.IntersectionObserverEntry>) {
     const playerIsOutOfVisibility = entries[0].intersectionRatio < this.config.threshold / 100;
     if (this.config.floating && this._playbackStartOccurred && !this._dismissed && !this._isInPIP) {
       this._handleFloatingChange(playerIsOutOfVisibility);
     }
+    this.dispatchEvent(EventType.PLAYER_VISIBILITY_CHANGED, {visible: !playerIsOutOfVisibility});
   }
 
   _handleFloatingChange(playerIsOutOfVisibility: boolean) {