fix(FEC-13725): [Related Plugin]: Add Events (used by kava analytics) (…

…#63)

### Description of the Changes

Add Events (used by kava analytics)

#### Resolves:  FEC-13725

---------

Co-authored-by: JonathanTGold <jonathan.gold@[email protected]>

src/components/related-overlay/related-overlay.tsx

@@ -35,7 +35,6 @@ interface RelatedOverlayProps {
 /**
  * Overlay which wraps the related grid and controls its layout and visibility.
  *
-
  * @param {object} props Component props.
  * @param {RelatedManager} props.relatedManager Related manager instance.
  * @param {boolean} props.isPaused Indicates whether playback is paused.

src/event/related-event.d.ts

@@ -1,5 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export namespace RelatedEvent {
-  const RELATED_CLICKED: string;
-  const RELATED_SELECTED: string;
+  const RELATED_OPEN: string;
+  const RELATED_CLOSE: string;
+  const RELATED_ENTRY_SELECTED: string;
+  const RELATED_ENTRY_AUTO_PLAYED: string;
+  const RELATED_GRID_DISPLAYED: string;
 }

src/event/related-event.js

@@ -2,14 +2,26 @@
  * Related plugin event types.
  */
 const RelatedEvent = {
+  /**
+   * Fired when the user clicks the button to show the related list.
+   */
+  RELATED_OPEN: 'related_open',
+  /**
+   * Fired when the user clicks the button to close the related list.
+   */
+  RELATED_CLOSE: 'related_close',
   /**
    * Fired when the user selects an entry from the list or the grid.
    */
-  RELATED_SELECTED: 'related_selected',
+  RELATED_ENTRY_SELECTED: 'related_entry_selected',
   /**
-   * Fired when the user clicks the button to show the related list.
+   * Fired when the user selects an entry from the list or the grid.
+   */
+  RELATED_ENTRY_AUTO_PLAYED: 'related_entry_auto_played',
+  /**
+   * Fired when the related grid is shown or hidden.
    */
-  RELATED_CLICKED: 'related_clicked'
+  RELATED_GRID_DISPLAYED: 'related_grid_displayed'
 };
 
 export {RelatedEvent};

src/related-manager.ts

@@ -243,6 +243,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
       this.clearNextEntryTimeout();
       this.nextEntryTimeoutId = window.setTimeout(() => {
         this.playByIndex(0);
+        this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_ENTRY_AUTO_PLAYED));
       }, seconds * 1000);
     } else {
       this.playByIndex(0);
@@ -258,7 +259,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
   playSelected(internalIndex: number) {
     this.logger.info('going to play selected entry');
     this.playByIndex(internalIndex);
-    this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_SELECTED));
+    this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_ENTRY_SELECTED));
   }
 
   /**
@@ -397,6 +398,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
   set isGridVisible(isGridVisible: boolean) {
     this._isGridVisible = isGridVisible;
     this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedInternalEvent.GRID_VISIBILITY_CHANGED, this._isGridVisible));
+    if (isGridVisible) this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_GRID_DISPLAYED));
   }
 
   /**
@@ -417,8 +419,10 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
   set isListVisible(isListVisible: boolean) {
     this._isListVisible = isListVisible;
     this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedInternalEvent.LIST_VISIBILITY_CHANGED, this._isListVisible));
-    if (this._isListVisible) {
-      this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_CLICKED));
+    if (isListVisible) {
+      this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_OPEN, {expandMode: this.config?.expandMode}));
+    } else {
+      this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_CLOSE, {expandMode: this.config?.expandMode}));
     }
   }
 }