fix(FEC-13720): [Navigation Plugin]: Add Events (used by kava analytics)

src/components/navigation/index.tsx

@@ -21,6 +21,7 @@ import {AutoscrollButton} from './autoscroll-button';
 import {ItemTypes, ItemData, HighlightedMap, ItemTypesTranslates} from '../../types';
 import {CloseButton} from '../close-button';
 import {ScreenReaderContext, ScreenReaderProvider} from '@playkit-js/common/dist/hoc/sr-wrapper';
+import { NavigationEvent } from "../../events";
 
 const {KeyMap} = utils;
 const {withText, Text} = preacti18n;
@@ -34,7 +35,7 @@ export interface SearchFilter {
 
 export interface NavigationProps {
   data: Array<ItemData>;
-  onItemClicked(time: number): void;
+  onItemClicked(time: number, itemType: string): void;
   onClose: OnClick;
   retry?: () => void;
   isLoading: boolean;
@@ -43,6 +44,7 @@ export interface NavigationProps {
   kitchenSinkActive: boolean;
   toggledWithEnter: boolean;
   itemsOrder: typeof itemTypesOrder;
+  dispatcher: (name: string, payload?: any) => void;
 }
 
 interface NavigationState {
@@ -207,6 +209,7 @@ export class Navigation extends Component<NavigationProps, NavigationState> {
       ...this.state.searchFilter,
       [property]: data
     };
+    this.props.dispatcher(NavigationEvent.NAVIGATION_SEARCH, searchFilter);
     this._prepareNavigationData(searchFilter);
   };
 
@@ -242,11 +245,11 @@ export class Navigation extends Component<NavigationProps, NavigationState> {
     );
   };
 
-  private _handleSeek = (time: number) => {
+  private _handleSeek = (time: number, itemType: string) => {
     // we want to also autoscroll to the item
     this._preventScrollEvent = true;
     this.setState({autoscroll: true}, () => {
-      this.props.onItemClicked(time);
+      this.props.onItemClicked(time, itemType);
     });
   };
 
@@ -274,6 +277,7 @@ export class Navigation extends Component<NavigationProps, NavigationState> {
         onSeek={this._handleSeek}
         onScroll={this._scrollTo}
         data={convertedData}
+        dispatcher={this.props.dispatcher}
         highlightedTime={highlightedTime}
         showItemsIcons={searchFilter.activeTab === ItemTypes.All}
         listDataContainCaptions={listDataContainCaptions}

src/components/navigation/navigation-item/NavigationItem.tsx

@@ -5,6 +5,7 @@ import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './NavigationItem.scss';
 import {GroupTypes, ItemData} from '../../../types';
 import {IconsFactory} from '../icons/IconsFactory';
+import { NavigationEvent } from "../../../events";
 
 const {ExpandableText} = ui.components;
 const {Text, Localizer} = preacti18n;
@@ -14,10 +15,11 @@ export interface NavigationItemProps {
   onSelected: (params: {time: number; itemY: number}) => void;
   selectedItem: boolean;
   widgetWidth: number;
-  onClick: (time: number) => void;
+  onClick: (time: number, itemType: string) => void;
   showIcon: boolean;
   onNext: () => void;
   onPrev: () => void;
+  dispatcher: (name: string, payload?: any) => void;
 }
 
 export interface NavigationItemState {
@@ -109,9 +111,12 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
   };
 
   private _handleClick = () => {
-    this.props.onClick(this.props.data.startTime);
+    this.props.onClick(this.props.data.startTime, this.props.data.itemType);
   };
 
+  private _onExpand = (isTextExpanded: boolean) => {
+    this.props.dispatcher(NavigationEvent.NAVIGATION_EXPANDABLE_TEXT_CLICK,  {isTextExpanded, itemType: this.props.data.itemType});
+  }
   private _handleExpand = (e: MouseEvent) => {
     e?.stopPropagation();
     e?.preventDefault();
@@ -149,6 +154,7 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
               lines={1}
               forceShowMore={Boolean(displayTitle && displayDescription)}
               onClick={this._handleExpand}
+              onExpand={this._onExpand}
               className={styles.expandableText}
               classNameExpanded={styles.expanded}
               buttonProps={{

src/components/navigation/navigation-list/NavigationList.tsx

@@ -9,7 +9,7 @@ import {ItemData, ItemTypesTranslates} from '../../../types';
 
 export interface Props {
   data: Array<ItemData>;
-  onSeek: (n: number) => void;
+  onSeek: (n: number, itemType: string) => void;
   autoScroll: boolean;
   onScroll: (n: number) => void;
   widgetWidth: number;
@@ -18,6 +18,7 @@ export interface Props {
   listDataContainCaptions: boolean;
   searchActive: boolean;
   itemTypesTranslates: ItemTypesTranslates;
+  dispatcher: (name: string, payload?: any) => void;
 }
 
 export class NavigationList extends Component<Props> {
@@ -93,6 +94,7 @@ export class NavigationList extends Component<Props> {
               showIcon={showItemsIcons}
               onNext={() => this._handleDownKeyPressed(index)}
               onPrev={() => this._handleUpKeyPressed(index)}
+              dispatcher={this.props.dispatcher}
             />
           );
         })}

src/events/events.ts

@@ -0,0 +1,7 @@
+export const NavigationEvent = {
+  NAVIGATION_OPEN: 'navigation_open',
+  NAVIGATION_CLOSE: 'navigation_close',
+  NAVIGATION_SEARCH: 'navigation_search',
+  NAVIGATION_ITEM_CLICK: 'navigation_item_click',
+  NAVIGATION_EXPANDABLE_TEXT_CLICK: 'navigation_expandable_text_clicked',
+};

src/events/index.ts

@@ -0,0 +1,2 @@
+export {NavigationEvent} from './events';
+

src/index.ts

@@ -8,5 +8,6 @@ const NAME = __NAME__;
 
 export {NavigationPlugin as Plugin};
 export {VERSION, NAME};
+export {NavigationEvent} from './events'
 
 KalturaPlayer.core.registerPlugin(pluginName, NavigationPlugin);

src/navigation-plugin.tsx

@@ -18,6 +18,7 @@ import {PluginButton} from './components/navigation/plugin-button';
 import {icons} from './components/icons';
 import {NavigationConfig, PluginStates, ItemTypes, ItemData, CuePoint, HighlightedMap, CuePointsMap} from './types';
 import {QuizTitle} from './components/navigation/navigation-item/QuizTitle';
+import { NavigationEvent } from "./events";
 
 export const pluginName: string = 'navigation';
 
@@ -361,6 +362,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
             toggledWithEnter={this._triggeredByKeyboard}
             itemsOrder={this._itemsOrder}
             ref={node => (this._navigationPluginRef = node)}
+            dispatcher={(eventType, payload) => this.dispatchEvent(eventType, payload)}
           />
         ) as any;
       },
@@ -384,7 +386,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     }) as number;
 
     if ((this.config.expandOnFirstPlay && !this._pluginState) || this._pluginState === PluginStates.OPENED) {
-      this._activatePlugin();
+      this._activatePlugin(true);
     }
   };
 
@@ -431,10 +433,11 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     this._navigationPluginRef?.handleSearchFilterChange('activeTab')(cuePointType);
   };
 
-  private _seekTo = (time: number) => {
+  private _seekTo = (time: number, itemType: string) => {
     this.player.currentTime = time;
     // need to trigger _onTimedMetadataChange in a case where the highlightedMap wasn't updated
     this._triggerOnTimedMetadataChange();
+    this.dispatchEvent(NavigationEvent.NAVIGATION_ITEM_CLICK, {seekTo: time, itemType: itemType});
   };
 
   private _handleClickOnPluginIcon = (e: OnClickEvent, byKeyboard?: boolean) => {
@@ -447,11 +450,12 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     }
   };
 
-  private _activatePlugin = () => {
+  private _activatePlugin = (isFirstOpen = false) => {
     this.ready.then(() => {
       this.sidePanelsManager?.activateItem(this._navigationPanel);
       this._pluginState === PluginStates.OPENED;
       this.upperBarManager?.update(this._navigationIcon);
+      this.dispatchEvent(NavigationEvent.NAVIGATION_OPEN, {auto: isFirstOpen});
     });
   };
 
@@ -460,6 +464,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       this.sidePanelsManager?.deactivateItem(this._navigationPanel);
       this._pluginState = PluginStates.CLOSED;
       this.upperBarManager?.update(this._navigationIcon);
+      this.dispatchEvent(NavigationEvent.NAVIGATION_CLOSE);
     });
   };