feat(FEC-13059): add quiz tab to filter bar (#308)

- add quiz tab to filter bar related PR- kaltura/playkit-js-common#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
kaltura · Mar 31, 2023 · fb4e65f · fb4e65f
1 parent d93f922
commit fb4e65f
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 13 deletions.
diff --git 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
@@ -1,11 +1,12 @@
-import {h, Component, Fragment} from 'preact';
+import {h} from 'preact';
 import {ItemTypes} from '../../../types';
 import {HotspotIcon} from './HotspotIcon';
 import {AnswerOnAirIcon} from './AnswerOnAirIcon';
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"