From 90a97eb27e3133519e028c0aea96a8b37485d731 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Sun, 10 Mar 2024 12:41:06 +0100 Subject: [PATCH 1/2] fix(FEC-13720): [Navigation Plugin]: Add Events (used by kava analytics) --- src/components/navigation/index.tsx | 9 ++++++--- .../navigation/navigation-item/NavigationItem.tsx | 8 ++++++-- .../navigation/navigation-list/NavigationList.tsx | 2 +- src/event/events.ts | 9 +++++++++ src/event/index.ts | 2 ++ src/index.ts | 1 + src/navigation-plugin.tsx | 7 ++++++- 7 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 src/event/events.ts create mode 100644 src/event/index.ts diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx index 98a907a..dda2926 100644 --- a/src/components/navigation/index.tsx +++ b/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 "../../event"; const {KeyMap} = utils; const {withText, Text} = preacti18n; @@ -34,7 +35,7 @@ export interface SearchFilter { export interface NavigationProps { data: Array; - 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 { ...this.state.searchFilter, [property]: data }; + this.props.dispatcher(NavigationEvent.NAVIGATION_FILTER_TAB, data); this._prepareNavigationData(searchFilter); }; @@ -242,11 +245,11 @@ export class Navigation extends Component { ); }; - 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); }); }; diff --git a/src/components/navigation/navigation-item/NavigationItem.tsx b/src/components/navigation/navigation-item/NavigationItem.tsx index 0aa7332..46f3e60 100644 --- a/src/components/navigation/navigation-item/NavigationItem.tsx +++ b/src/components/navigation/navigation-item/NavigationItem.tsx @@ -14,7 +14,7 @@ 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; @@ -109,9 +109,12 @@ export class NavigationItem extends Component { - this.props.onClick(this.props.data.startTime); + this.props.onClick(this.props.data.startTime, this.props.data.itemType); }; + private _onExpand = (isTextExpanded: boolean) => { + console.log('#@', {isTextExpanded, itemType: this.props.data.itemType}); + } private _handleExpand = (e: MouseEvent) => { e?.stopPropagation(); e?.preventDefault(); @@ -149,6 +152,7 @@ export class NavigationItem extends Component; - onSeek: (n: number) => void; + onSeek: (n: number, itemType: string) => void; autoScroll: boolean; onScroll: (n: number) => void; widgetWidth: number; diff --git a/src/event/events.ts b/src/event/events.ts new file mode 100644 index 0000000..73fe138 --- /dev/null +++ b/src/event/events.ts @@ -0,0 +1,9 @@ +export const NavigationEvent = { + NAVIGATION_OPEN: 'navigation_open', + NAVIGATION_CLOSE: 'navigation_close', + NAVIGATION_SEARCH: 'navigation_search', + NAVIGATION_FILTER_TAB: 'navigation_filter_tab', + NAVIGATION_ITEM_CLICK: 'navigation_item_click', + NAVIGATION_ITEM_SEE_MORE: 'navigation_item_see_more', + NAVIGATION_ITEM_SEE_LESS: 'navigation_item_see_less', +}; diff --git a/src/event/index.ts b/src/event/index.ts new file mode 100644 index 0000000..423b8c8 --- /dev/null +++ b/src/event/index.ts @@ -0,0 +1,2 @@ +export {NavigationEvent} from './events'; + diff --git a/src/index.ts b/src/index.ts index bf1d0fa..73a3d37 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,5 +8,6 @@ const NAME = __NAME__; export {NavigationPlugin as Plugin}; export {VERSION, NAME}; +export {NavigationEvent} from './event' KalturaPlayer.core.registerPlugin(pluginName, NavigationPlugin); diff --git a/src/navigation-plugin.tsx b/src/navigation-plugin.tsx index c3c05f3..102c652 100644 --- a/src/navigation-plugin.tsx +++ b/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 "./event"; 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; }, @@ -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) => { @@ -452,6 +455,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin { this.sidePanelsManager?.activateItem(this._navigationPanel); this._pluginState === PluginStates.OPENED; this.upperBarManager?.update(this._navigationIcon); + this.dispatchEvent(NavigationEvent.NAVIGATION_OPEN, {auto: this.config.expandOnFirstPlay}); }); }; @@ -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); }); }; From f5500a7fda181313364c347371b01490ff34682d Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Mon, 11 Mar 2024 13:59:28 +0100 Subject: [PATCH 2/2] fix --- src/components/navigation/index.tsx | 5 +++-- .../navigation/navigation-item/NavigationItem.tsx | 4 +++- .../navigation/navigation-list/NavigationList.tsx | 2 ++ src/{event => events}/events.ts | 4 +--- src/{event => events}/index.ts | 0 src/index.ts | 2 +- src/navigation-plugin.tsx | 8 ++++---- 7 files changed, 14 insertions(+), 11 deletions(-) rename src/{event => events}/events.ts (55%) rename src/{event => events}/index.ts (100%) diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx index dda2926..bc1d4f9 100644 --- a/src/components/navigation/index.tsx +++ b/src/components/navigation/index.tsx @@ -21,7 +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 "../../event"; +import { NavigationEvent } from "../../events"; const {KeyMap} = utils; const {withText, Text} = preacti18n; @@ -209,7 +209,7 @@ export class Navigation extends Component { ...this.state.searchFilter, [property]: data }; - this.props.dispatcher(NavigationEvent.NAVIGATION_FILTER_TAB, data); + this.props.dispatcher(NavigationEvent.NAVIGATION_SEARCH, searchFilter); this._prepareNavigationData(searchFilter); }; @@ -277,6 +277,7 @@ export class Navigation extends Component { onSeek={this._handleSeek} onScroll={this._scrollTo} data={convertedData} + dispatcher={this.props.dispatcher} highlightedTime={highlightedTime} showItemsIcons={searchFilter.activeTab === ItemTypes.All} listDataContainCaptions={listDataContainCaptions} diff --git a/src/components/navigation/navigation-item/NavigationItem.tsx b/src/components/navigation/navigation-item/NavigationItem.tsx index 46f3e60..e0fd0ee 100644 --- a/src/components/navigation/navigation-item/NavigationItem.tsx +++ b/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; @@ -18,6 +19,7 @@ export interface NavigationItemProps { showIcon: boolean; onNext: () => void; onPrev: () => void; + dispatcher: (name: string, payload?: any) => void; } export interface NavigationItemState { @@ -113,7 +115,7 @@ export class NavigationItem extends Component { - console.log('#@', {isTextExpanded, itemType: this.props.data.itemType}); + this.props.dispatcher(NavigationEvent.NAVIGATION_EXPANDABLE_TEXT_CLICK, {isTextExpanded, itemType: this.props.data.itemType}); } private _handleExpand = (e: MouseEvent) => { e?.stopPropagation(); diff --git a/src/components/navigation/navigation-list/NavigationList.tsx b/src/components/navigation/navigation-list/NavigationList.tsx index 157cce0..c9b5a90 100644 --- a/src/components/navigation/navigation-list/NavigationList.tsx +++ b/src/components/navigation/navigation-list/NavigationList.tsx @@ -18,6 +18,7 @@ export interface Props { listDataContainCaptions: boolean; searchActive: boolean; itemTypesTranslates: ItemTypesTranslates; + dispatcher: (name: string, payload?: any) => void; } export class NavigationList extends Component { @@ -93,6 +94,7 @@ export class NavigationList extends Component { showIcon={showItemsIcons} onNext={() => this._handleDownKeyPressed(index)} onPrev={() => this._handleUpKeyPressed(index)} + dispatcher={this.props.dispatcher} /> ); })} diff --git a/src/event/events.ts b/src/events/events.ts similarity index 55% rename from src/event/events.ts rename to src/events/events.ts index 73fe138..e59954d 100644 --- a/src/event/events.ts +++ b/src/events/events.ts @@ -2,8 +2,6 @@ export const NavigationEvent = { NAVIGATION_OPEN: 'navigation_open', NAVIGATION_CLOSE: 'navigation_close', NAVIGATION_SEARCH: 'navigation_search', - NAVIGATION_FILTER_TAB: 'navigation_filter_tab', NAVIGATION_ITEM_CLICK: 'navigation_item_click', - NAVIGATION_ITEM_SEE_MORE: 'navigation_item_see_more', - NAVIGATION_ITEM_SEE_LESS: 'navigation_item_see_less', + NAVIGATION_EXPANDABLE_TEXT_CLICK: 'navigation_expandable_text_clicked', }; diff --git a/src/event/index.ts b/src/events/index.ts similarity index 100% rename from src/event/index.ts rename to src/events/index.ts diff --git a/src/index.ts b/src/index.ts index 73a3d37..284314b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,6 +8,6 @@ const NAME = __NAME__; export {NavigationPlugin as Plugin}; export {VERSION, NAME}; -export {NavigationEvent} from './event' +export {NavigationEvent} from './events' KalturaPlayer.core.registerPlugin(pluginName, NavigationPlugin); diff --git a/src/navigation-plugin.tsx b/src/navigation-plugin.tsx index 102c652..1ca366a 100644 --- a/src/navigation-plugin.tsx +++ b/src/navigation-plugin.tsx @@ -18,7 +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 "./event"; +import { NavigationEvent } from "./events"; export const pluginName: string = 'navigation'; @@ -386,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); } }; @@ -450,12 +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: this.config.expandOnFirstPlay}); + this.dispatchEvent(NavigationEvent.NAVIGATION_OPEN, {auto: isFirstOpen}); }); };