feat(FEC-11600): Related grid analytics (#34)

Fire events on toggle button click and on manual entry selection
Expose event types for kava

Related PR: kaltura/playkit-js-kava#133

Resolves FEC-11600

src/components/next/next.tsx

@@ -1,7 +1,7 @@
 const {PrevNext} = KalturaPlayer.ui.components;
 const {withEventManager} = KalturaPlayer.ui.Event;
 
-import {RelatedEvent} from 'event';
+import {RelatedInternalEvent} from 'event';
 import {useState, useEffect} from 'preact/hooks';
 import {RelatedManager} from 'related-manager';
 import {Sources} from 'types';
@@ -28,7 +28,7 @@ const Next = withEventManager(({relatedManager, showPreview, onClick, eventManag
   const [entries, setEntries] = useState<Sources[]>([]);
 
   useEffect(() => {
-    eventManager.listen(eventContext, RelatedEvent.RELATED_ENTRIES_CHANGED, ({payload}: {payload: Sources[]}) => {
+    eventManager.listen(eventContext, RelatedInternalEvent.RELATED_ENTRIES_CHANGED, ({payload}: {payload: Sources[]}) => {
       setEntries(payload);
     });
 

src/components/pre-playback-play-overlay-wrapper/pre-playback-play-overlay-wrapper.tsx

@@ -1,7 +1,7 @@
 const {withText} = KalturaPlayer.ui.preacti18n;
 const {withEventManager} = KalturaPlayer.ui.Event;
 
-import {RelatedEvent} from 'event';
+import {RelatedInternalEvent} from 'event';
 import {useEffect, useState} from 'preact/hooks';
 
 const {Tooltip} = KalturaPlayer.ui.components;
@@ -57,7 +57,7 @@ const PrePlaybackPlayOverlayWrapper = withEventManager(
         const [isAutoContinueCancelled, setIsAutoContinueCancelled] = useState(relatedManager.isAutoContinueCancelled);
 
         useEffect(() => {
-          eventManager.listen(eventContext, RelatedEvent.AUTO_CONTINUE_CANCELLED_CHANGED, ({payload}: {payload: boolean}) => {
+          eventManager.listen(eventContext, RelatedInternalEvent.AUTO_CONTINUE_CANCELLED_CHANGED, ({payload}: {payload: boolean}) => {
             setIsAutoContinueCancelled(payload);
           });
         }, []);

src/components/related-countdown-preview/related-countdown-preview.tsx

@@ -6,7 +6,7 @@ import {CloseButton, RelatedContext, Thumbnail, Countdown, MultilineText} from '
 import {RelatedManager} from 'related-manager';
 
 import * as styles from './related-countdown-preview.scss';
-import {RelatedEvent} from 'event';
+import {RelatedInternalEvent} from 'event';
 
 const {connect} = KalturaPlayer.ui.redux;
 const {withText} = KalturaPlayer.ui.preacti18n;
@@ -56,10 +56,10 @@ const RelatedCountdownPreview = withText({
       const showPreview = isPlaybackEnded && relatedManager.countdownTime > -1 && isListVisible && !isAutoContinueCancelled;
 
       useEffect(() => {
-        eventManager.listen(eventContext, RelatedEvent.LIST_VISIBILITY_CHANGED, ({payload}: {payload: boolean}) => {
+        eventManager.listen(eventContext, RelatedInternalEvent.LIST_VISIBILITY_CHANGED, ({payload}: {payload: boolean}) => {
           setIsListVisible(payload);
         });
-        eventManager.listen(eventContext, RelatedEvent.AUTO_CONTINUE_CANCELLED_CHANGED, ({payload}: {payload: boolean}) => {
+        eventManager.listen(eventContext, RelatedInternalEvent.AUTO_CONTINUE_CANCELLED_CHANGED, ({payload}: {payload: boolean}) => {
           setIsAutoContinueCancelled(payload);
         });
       }, []);

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

@@ -5,7 +5,7 @@ import {RelatedGrid} from '../related-grid/related-grid';
 import {getNextEntry} from '../related-grid/grid-utils';
 
 import * as styles from './related-overlay.scss';
-import {RelatedEvent} from 'event';
+import {RelatedInternalEvent} from 'event';
 
 const {withEventManager} = KalturaPlayer.ui.Event;
 const {connect} = KalturaPlayer.ui.redux;
@@ -51,7 +51,7 @@ const RelatedOverlay = withEventManager(
     const [isAutoContinueCancelled, setIsAutoContinueCancelled] = useState(relatedManager.isAutoContinueCancelled);
 
     useEffect(() => {
-      eventManager.listen(eventContext, RelatedEvent.AUTO_CONTINUE_CANCELLED_CHANGED, ({payload}: {payload: boolean}) => {
+      eventManager.listen(eventContext, RelatedInternalEvent.AUTO_CONTINUE_CANCELLED_CHANGED, ({payload}: {payload: boolean}) => {
         setIsAutoContinueCancelled(payload);
       });
     }, []);

src/event/index.ts

@@ -1 +1,3 @@
-export {RelatedEvent} from './related-event';
+import {RelatedEvent} from './related-event';
+import {RelatedInternalEvent} from './related-internal-event';
+export {RelatedInternalEvent, RelatedEvent};

src/event/related-event.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export namespace RelatedEvent {
+  const RELATED_CLICKED: string;
+  const RELATED_SELECTED: string;
+}

src/event/related-event.js

@@ -0,0 +1,15 @@
+/**
+ * Related plugin event types.
+ */
+const RelatedEvent = {
+  /**
+   * Fired when the user selects an entry from the list or the grid.
+   */
+  RELATED_SELECTED: 'related_selected',
+  /**
+   * Fired when the user clicks the button to show the related list.
+   */
+  RELATED_CLICKED: 'related_clicked'
+};
+
+export {RelatedEvent};

src/event/related-event.ts → src/event/related-internal-event.ts

@@ -1,9 +1,7 @@
 /**
- * Internal related plugin events enum.
- *
- * @enum {string}
+ * Internal related plugin event types.
  */
-enum RelatedEvent {
+enum RelatedInternalEvent {
   /**
    * Fired every time the list of related entries is changed.
    */
@@ -22,4 +20,4 @@ enum RelatedEvent {
   LIST_VISIBILITY_CHANGED = 'list_visibility_changed'
 }
 
-export {RelatedEvent};
+export {RelatedInternalEvent};

src/related-manager.ts

@@ -1,4 +1,4 @@
-import {RelatedEvent} from 'event';
+import {RelatedInternalEvent, RelatedEvent} from 'event';
 import {EntryService, ImageService} from 'services';
 import {RelatedConfig, Sources} from 'types';
 /**
@@ -145,7 +145,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
   }
 
   /**
-   * Play a selected entry.
+   * Play an entry by index.
    *
    * @private
    * @param {number} index index of the selected entry to play
@@ -244,14 +244,15 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
   }
 
   /**
-   * Wrapper for playByIndex.
+   * Play the selected entry.
    *
    * @param {number} internalIndex index of the entry to be played
    * @memberof RelatedManager
    */
   playSelected(internalIndex: number) {
     this.logger.info('going to play selected entry');
     this.playByIndex(internalIndex);
+    this.player.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_SELECTED));
   }
 
   /**
@@ -305,7 +306,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
    */
   set isAutoContinueCancelled(isAutoContinueCancelled: boolean) {
     this._isAutoContinueCancelled = isAutoContinueCancelled;
-    this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.AUTO_CONTINUE_CANCELLED_CHANGED, isAutoContinueCancelled));
+    this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedInternalEvent.AUTO_CONTINUE_CANCELLED_CHANGED, isAutoContinueCancelled));
   }
 
   /**
@@ -348,7 +349,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
   set entries(entries: Sources[]) {
     this.logger.info(`related entries changed`);
     this._entries = entries;
-    this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.RELATED_ENTRIES_CHANGED, this._entries));
+    this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedInternalEvent.RELATED_ENTRIES_CHANGED, this._entries));
   }
 
   /**
@@ -389,7 +390,7 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
    */
   set isGridVisible(isGridVisible: boolean) {
     this._isGridVisible = isGridVisible;
-    this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.GRID_VISIBILITY_CHANGED, this._isGridVisible));
+    this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedInternalEvent.GRID_VISIBILITY_CHANGED, this._isGridVisible));
   }
 
   /**
@@ -409,7 +410,10 @@ class RelatedManager extends KalturaPlayer.core.FakeEventTarget {
    */
   set isListVisible(isListVisible: boolean) {
     this._isListVisible = isListVisible;
-    this.dispatchEvent(new KalturaPlayer.core.FakeEvent(RelatedEvent.LIST_VISIBILITY_CHANGED, this._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));
+    }
   }
 }
 

src/related.tsx

@@ -6,7 +6,7 @@ import {Next, PrePlaybackPlayOverlayWrapper, RelatedList, RelatedOverlay, ListTo
 import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';
 
 import {Icon, RelatedConfig} from 'types';
-import {RelatedEvent} from 'event';
+import {RelatedInternalEvent} from 'event';
 
 const PRESETS = ['Playback', 'Live'];
 
@@ -213,11 +213,11 @@ class Related extends KalturaPlayer.core.BasePlugin {
       expandMode: this.config.expandMode
     }) as number;
 
-    this.relatedManager.listen(RelatedEvent.GRID_VISIBILITY_CHANGED, () => {
+    this.relatedManager.listen(RelatedInternalEvent.GRID_VISIBILITY_CHANGED, () => {
       this.upperBarManager?.update(this.iconId);
     });
 
-    this.relatedManager.listen(RelatedEvent.LIST_VISIBILITY_CHANGED, () => {
+    this.relatedManager.listen(RelatedInternalEvent.LIST_VISIBILITY_CHANGED, () => {
       this.upperBarManager?.update(this.iconId);
       this.sidePanelsManager[this.relatedManager.isListVisible ? 'activateItem' : 'deactivateItem'](this.panelId);
     });

types/index.js

@@ -0,0 +1 @@
+export {RelatedEvent} from '../src/event/related-event';