diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx index 98a907a..bc1d4f9 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 "../../events"; 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_SEARCH, searchFilter); 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); }); }; @@ -274,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 0aa7332..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; @@ -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 { - 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; - 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 { @@ -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/events/events.ts b/src/events/events.ts new file mode 100644 index 0000000..e59954d --- /dev/null +++ b/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', +}; diff --git a/src/events/index.ts b/src/events/index.ts new file mode 100644 index 0000000..423b8c8 --- /dev/null +++ b/src/events/index.ts @@ -0,0 +1,2 @@ +export {NavigationEvent} from './events'; + diff --git a/src/index.ts b/src/index.ts index bf1d0fa..284314b 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 './events' KalturaPlayer.core.registerPlugin(pluginName, NavigationPlugin); diff --git a/src/navigation-plugin.tsx b/src/navigation-plugin.tsx index c3c05f3..1ca366a 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 "./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); }); };