feat(FEC-13318): support click event from timeline service (#333)

add support to click events from timeline service-
- toggle side panel
- focus to a specific tab by cuepoint type

related PR- kaltura/playkit-js-timeline#16

Solves [FEC-13318](https://kaltura.atlassian.net/browse/FEC-13318)

[FEC-13318]: https://kaltura.atlassian.net/browse/FEC-13318?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

cypress/e2e/navigation.cy.ts

@@ -323,8 +323,9 @@ describe('Navigation plugin', () => {
             ]
           })
         );
-        cy.get('[data-testid="navigation_questionStateLabel"]').should('be.visible');
-        cy.get('[data-testid="navigation_questionStateLabel"]').should($div => {
+        cy.get('[data-testid="navigation_questionStateLabel"]')
+          .should('exist')
+          .should($div => {
           expect($div.text()).to.eq('Answered');
         });
       });
@@ -371,7 +372,7 @@ describe('Navigation plugin', () => {
           })
         );
         cy.get('[data-testid="navigation_questionStateLabel"]')
-          .should('be.visible')
+          .should('exist')
           .should($div => {
             expect($div.text()).to.eq('Correct');
           });
@@ -395,7 +396,7 @@ describe('Navigation plugin', () => {
           })
         );
         cy.get('[data-testid="navigation_questionStateLabel"]')
-          .should('be.visible')
+          .should('exist')
           .should($div => {
             expect($div.text()).to.eq('Incorrect');
           });

src/components/navigation/index.tsx

@@ -202,7 +202,7 @@ export class Navigation extends Component<NavigationProps, NavigationState> {
     return styles.smallWidth;
   };
 
-  private _handleSearchFilterChange = (property: string) => (data: ItemTypes | string | null) => {
+  public handleSearchFilterChange = (property: string) => (data: ItemTypes | string | null) => {
     const searchFilter: SearchFilter = {
       ...this.state.searchFilter,
       [property]: data
@@ -219,7 +219,7 @@ export class Navigation extends Component<NavigationProps, NavigationState> {
         {!hasError && (
           <div class={[styles.searchWrapper, this._getHeaderStyles()].join(' ')}>
             <NavigationSearch
-              onChange={this._handleSearchFilterChange('searchQuery')}
+              onChange={this.handleSearchFilterChange('searchQuery')}
               searchQuery={searchFilter.searchQuery}
               toggledWithEnter={toggledWithEnter}
               kitchenSinkActive={kitchenSinkActive}
@@ -231,7 +231,7 @@ export class Navigation extends Component<NavigationProps, NavigationState> {
 
         {!hasError && (
           <TranslatedNavigationFilter
-            onChange={this._handleSearchFilterChange('activeTab')}
+            onChange={this.handleSearchFilterChange('activeTab')}
             activeTab={searchFilter.activeTab}
             availableTabs={searchFilter.availableTabs}
             totalResults={searchFilter.searchQuery.length > 0 ? convertedData.length : null}

src/navigation-plugin.tsx

@@ -41,6 +41,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
   private _activeCaptionMapId: string = '';
   private _quizQuestionData: ItemData[] = [];
   private _pluginButtonRef: HTMLButtonElement | null = null;
+  private _navigationPluginRef: Navigation | null = null;
 
   private _player: KalturaPlayerTypes.Player;
   private _navigationPanel = -1;
@@ -350,6 +351,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
             kitchenSinkActive={this.isPluginActive()}
             toggledWithEnter={this._triggeredByKeyboard}
             itemsOrder={this._itemsOrder}
+            ref={node => this._navigationPluginRef = node}
           />
         );
       },
@@ -407,7 +409,13 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     if (this._itemsFilter[ItemTypes.Caption]) {
       this.eventManager.listen(this._player, this._player.Event.TEXT_TRACK_CHANGED, this._handleLanguageChange);
     }
-    this.eventManager.listen(this._player, 'TimelinePreviewArrowClicked', this._handleClickOnPluginIcon);
+    this.eventManager.listen(this._player, 'TimelinePreviewArrowClicked', this._handleTimelinePreviewClick);
+  }
+
+  private _handleTimelinePreviewClick = ({payload}: any) => {
+    const {e, byKeyboard, cuePointType} = payload;
+    this._handleClickOnPluginIcon(e, byKeyboard);
+    this._navigationPluginRef?.handleSearchFilterChange('activeTab')(cuePointType);
   }
 
   private _seekTo = (time: number) => {
@@ -457,6 +465,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       this._navigationPanel = -1;
       this._navigationIcon = -1;
       this._pluginButtonRef = null;
+      this._navigationPluginRef = null;
     }
     this._activeCuePointsMap = this._getDefaultActiveCuePointsMap();
     this._activeCaptionMapId = '';