From fb4e65f68565b9a63509fd21e4c04d64eeab66e6 Mon Sep 17 00:00:00 2001
From: lianbenjamin <79077248+lianbenjamin@users.noreply.github.com>
Date: Fri, 31 Mar 2023 15:31:28 +0300
Subject: [PATCH] feat(FEC-13059): add quiz tab to filter bar (#308)

- add quiz tab to filter bar

related PR- https://github.com/kaltura/playkit-js-common/pull/14

Solves [FEC-13059](https://kaltura.atlassian.net/browse/FEC-13059)
*was previously FEV-1634

[FEC-13059]: https://kaltura.atlassian.net/browse/FEC-13059?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 package.json                                     |  2 +-
 src/components/navigation/icons/IconsFactory.tsx |  4 +++-
 src/components/navigation/index.tsx              |  8 +++++---
 src/navigation-plugin.tsx                        | 12 +++++++++++-
 src/types/navigation-item-data.ts                |  4 +++-
 src/utils/index.ts                               |  6 ++++--
 translations/en.i18n.json                        |  1 +
 yarn.lock                                        |  8 ++++----
 8 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 714fa04..ed6d240 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "url": "git+https://github.com/kaltura/playkit-js-navigation.git"
   },
   "dependencies": {
-    "@playkit-js/common": "^1.1.5",
+    "@playkit-js/common": "^1.1.8",
     "@playkit-js/playkit-js-ui": "^0.73.0",
     "@playkit-js/ui-managers": "^1.3.4"
   },
diff --git a/src/components/navigation/icons/IconsFactory.tsx b/src/components/navigation/icons/IconsFactory.tsx
index 88181c6..22853c1 100644
--- a/src/components/navigation/icons/IconsFactory.tsx
+++ b/src/components/navigation/icons/IconsFactory.tsx
@@ -1,4 +1,4 @@
-import {h, Component, Fragment} from 'preact';
+import {h} from 'preact';
 import {ItemTypes} from '../../../types';
 import {HotspotIcon} from './HotspotIcon';
 import {AnswerOnAirIcon} from './AnswerOnAirIcon';
@@ -6,6 +6,7 @@ import {ChapterIcon} from './ChapterIcon';
 import {SlideIcon} from './SlideIcon';
 import {CaptionIcon} from './CaptionIcon';
 import * as styles from './IconsFactory.scss';
+import {QuizIcon} from "@playkit-js/common/dist/icon/icons/quiz";
 export interface Props {
   iconType: ItemTypes;
   color?: any;
@@ -20,6 +21,7 @@ export const IconsFactory = (props: Props) => {
       {props.iconType === ItemTypes.Chapter && <ChapterIcon />}
       {props.iconType === ItemTypes.Slide && <SlideIcon />}
       {props.iconType === ItemTypes.Caption && <CaptionIcon />}
+      {props.iconType === ItemTypes.QuizQuestion && <QuizIcon />}
     </div>
   );
 };
diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx
index 5f31727..e4ac145 100644
--- a/src/components/navigation/index.tsx
+++ b/src/components/navigation/index.tsx
@@ -59,7 +59,7 @@ const HEADER_HEIGHT_WITH_AMOUNT = 120;
 const initialSearchFilter = {
   searchQuery: '',
   activeTab: ItemTypes.All,
-  availableTabs: [ItemTypes.All, ItemTypes.Chapter, ItemTypes.Slide, ItemTypes.Hotspot, ItemTypes.AnswerOnAir],
+  availableTabs: [ItemTypes.All, ItemTypes.Chapter, ItemTypes.Slide, ItemTypes.Hotspot, ItemTypes.AnswerOnAir, ItemTypes.QuizQuestion],
   totalResults: 0
 };
 
@@ -69,7 +69,8 @@ const translates = {
   [ItemTypes.Chapter]: <Text id="navigation.chapter_type">Chapters</Text>,
   [ItemTypes.Slide]: <Text id="navigation.slide_type">Slides</Text>,
   [ItemTypes.Hotspot]: <Text id="navigation.hotspot_type">Hotspots</Text>,
-  [ItemTypes.Caption]: <Text id="navigation.caption_type">Captions</Text>
+  [ItemTypes.Caption]: <Text id="navigation.caption_type">Captions</Text>,
+  [ItemTypes.QuizQuestion]: <Text id="navigation.quiz_question_type">Questions</Text>
 };
 
 @withText(translates)
@@ -180,7 +181,8 @@ export class Navigation extends Component<NavigationProps & ItemTypesTranslates,
       [ItemTypes.Chapter]: this.props[ItemTypes.Chapter],
       [ItemTypes.Slide]: this.props[ItemTypes.Slide],
       [ItemTypes.Hotspot]: this.props[ItemTypes.Hotspot],
-      [ItemTypes.Caption]: this.props[ItemTypes.Caption]
+      [ItemTypes.Caption]: this.props[ItemTypes.Caption],
+      [ItemTypes.QuizQuestion]: this.props[ItemTypes.QuizQuestion]
     };
   };
 
diff --git a/src/navigation-plugin.tsx b/src/navigation-plugin.tsx
index f6a30e3..525e96f 100644
--- a/src/navigation-plugin.tsx
+++ b/src/navigation-plugin.tsx
@@ -80,7 +80,8 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       [ItemTypes.Caption, -1],
       [ItemTypes.Chapter, -1],
       [ItemTypes.Hotspot, -1],
-      [ItemTypes.Slide, -1]
+      [ItemTypes.Slide, -1],
+      [ItemTypes.QuizQuestion, -1]
     ]);
   };
 
@@ -115,6 +116,9 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     if (this._itemsFilter[ItemTypes.Caption]) {
       cuePointTypes.push(this.cuePointManager.CuepointType.CAPTION);
     }
+    if (this._itemsFilter[ItemTypes.QuizQuestion]) {
+      cuePointTypes.push(this.cuePointManager.CuepointType.QUIZ_QUESTION);
+    }
     this.cuePointManager.registerTypes(cuePointTypes);
   };
 
@@ -169,6 +173,9 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     if (metadata?.cuePointType === KalturaCuePointType.CAPTION) {
       return ItemTypes.Caption;
     }
+    if (metadata?.cuePointType === KalturaCuePointType.QUIZ_QUESTION) {
+      return ItemTypes.QuizQuestion;
+    }
     return null;
   };
 
@@ -212,6 +219,9 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       if (this._getCuePointType(cue) === ItemTypes.Caption && this._itemsFilter[ItemTypes.Caption]) {
         captionData.push(prepareCuePoint(cue, ItemTypes.Caption, isLive));
       }
+      if (this._getCuePointType(cue) === ItemTypes.QuizQuestion && this._itemsFilter[ItemTypes.QuizQuestion]) {
+        navigationData.push(prepareCuePoint(cue, ItemTypes.QuizQuestion, isLive));
+      }
     });
     if (navigationData.length) {
       this._addNavigationData(navigationData);
diff --git a/src/types/navigation-item-data.ts b/src/types/navigation-item-data.ts
index 0449428..305db6a 100644
--- a/src/types/navigation-item-data.ts
+++ b/src/types/navigation-item-data.ts
@@ -10,7 +10,8 @@ export enum ItemTypes {
   Chapter = 'Chapter',
   Slide = 'Slide',
   Hotspot = 'Hotspot',
-  Caption = 'Caption'
+  Caption = 'Caption',
+  QuizQuestion = 'QuizQuestion'
 }
 
 export interface ItemTypesTranslates {
@@ -20,6 +21,7 @@ export interface ItemTypesTranslates {
   [ItemTypes.Slide]?: string;
   [ItemTypes.Hotspot]?: string;
   [ItemTypes.Caption]?: string;
+  [ItemTypes.QuizQuestion]?: string;
 }
 
 export interface CuePoint {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 52b953c..25a6787 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,5 @@
-import {GroupTypes, CuePoint, ItemData, ItemTypes, HighlightedMap} from '../types';
+import {CuePoint, GroupTypes, HighlightedMap, ItemData, ItemTypes} from '../types';
+
 const {toHHMMSS} = KalturaPlayer.ui.utils;
 
 export const itemTypesOrder: Record<string, number> = {
@@ -7,7 +8,8 @@ export const itemTypesOrder: Record<string, number> = {
   [ItemTypes.Slide]: 2,
   [ItemTypes.Hotspot]: 3,
   [ItemTypes.AnswerOnAir]: 4,
-  [ItemTypes.Caption]: 5
+  [ItemTypes.Caption]: 5,
+  [ItemTypes.QuizQuestion]: 6
 };
 
 export const getLastItem = <T>(arr: Array<T>) => {
diff --git a/translations/en.i18n.json b/translations/en.i18n.json
index 0567074..b23f89e 100644
--- a/translations/en.i18n.json
+++ b/translations/en.i18n.json
@@ -18,6 +18,7 @@
       "slide_type": "Slides",
       "hotspot_type": "Hotspots",
       "caption_type": "Captions",
+      "quiz_question_type": "Questions",
       "search_result_one_type": {
         "one": "{{totalResults}} result in {{type}}",
         "many": "{{totalResults}} results in {{type}}"
diff --git a/yarn.lock b/yarn.lock
index 5500c4a..cca947d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -130,10 +130,10 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
-"@playkit-js/common@^1.1.5":
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.1.5.tgz#20410ef8e32c4820146a2a462d5318fac6be1e96"
-  integrity sha512-NgVELo6z9+DI9aiKL8oj5p/d5pzJCZgwuk0LN3lKizPuNfvu/30lavsH4hNCrWOjgnT7o4EEFrmVK9buzqmIHQ==
+"@playkit-js/common@^1.1.8":
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.1.8.tgz#d3f0c85ed69eb57d283a997e9e36500d24e6937c"
+  integrity sha512-GLalqLaFE3qzhaSsp7sq+X+0Bab3TlJ31wm8Xho0vlSWwQgU53cjDOIjy6VIK6g35Rbx7uA+TbNJwV4GVhYkyA==
   dependencies:
     "@playkit-js/playkit-js-ui" "^0.74.0"
     classnames "^2.3.2"