diff --git a/src/components/transcript/transcript.tsx b/src/components/transcript/transcript.tsx index 8799507..f100928 100644 --- a/src/components/transcript/transcript.tsx +++ b/src/components/transcript/transcript.tsx @@ -12,6 +12,7 @@ import {TranscriptMenu} from '../transcript-menu'; import {SmallScreenSlate} from '../small-screen-slate'; import {Button, ButtonType, ButtonSize} from '@playkit-js/common/dist/components/button'; import {OnClickEvent, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper'; +import { TranscriptEvents } from "../../events"; const {ENTER, SPACE, TAB} = ui.utils.KeyMap; const {withText, Text} = ui.preacti18n; @@ -52,6 +53,7 @@ export interface TranscriptProps { onPrint: () => void; smallScreen?: boolean; expandMode?: string; + dispatcher: (name: string, payload?: any) => void; } interface TranscriptState { @@ -168,6 +170,7 @@ export class Transcript extends Component { searchMap[caption.id] = {...searchMap[caption.id], [index]: i}; }); }); + this.props.dispatcher(TranscriptEvents.TRANSCRIPT_SEARCH, {search: state.search}); return { searchMap, totalSearchResults: index, @@ -183,6 +186,7 @@ export class Transcript extends Component { activeSearchIndex: index, isAutoScrollEnabled: false }); + this.props.dispatcher(TranscriptEvents.TRANSCRIPT_NAVIGATE_RESULT, {index}); }; private _getHeaderStyles = (): string => { diff --git a/src/events/events.ts b/src/events/events.ts new file mode 100644 index 0000000..f2d4a60 --- /dev/null +++ b/src/events/events.ts @@ -0,0 +1,9 @@ + +export const TranscriptEvents = { + TRANSCRIPT_OPEN: 'transcript_open', + TRANSCRIPT_CLOSE: 'transcript_close', + TRANSCRIPT_DOWNLOAD: 'transcript_download', + TRANSCRIPT_PRINT: 'transcript_print', + TRANSCRIPT_SEARCH: 'transcript_search', + TRANSCRIPT_NAVIGATE_RESULT: 'transcript_navigate_result', +}; diff --git a/src/events/index.ts b/src/events/index.ts new file mode 100644 index 0000000..a05d36b --- /dev/null +++ b/src/events/index.ts @@ -0,0 +1 @@ +export {TranscriptEvents} from './events'; diff --git a/src/index.ts b/src/index.ts index bc2414e..87a8317 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,6 +6,7 @@ declare var __NAME__: string; const VERSION = __VERSION__; const NAME = __NAME__; +export { TranscriptEvents} from './events' export {TranscriptPlugin as Plugin}; export {VERSION, NAME}; diff --git a/src/transcript-plugin.tsx b/src/transcript-plugin.tsx index aabcb49..112dff3 100644 --- a/src/transcript-plugin.tsx +++ b/src/transcript-plugin.tsx @@ -9,6 +9,7 @@ import {PluginButton} from './components/plugin-button/plugin-button'; import {Transcript} from './components/transcript'; import {getConfigValue, isBoolean, makePlainText, prepareCuePoint} from './utils'; import {TranscriptConfig, PluginStates, HighlightedMap, CuePointData, ItemTypes, CuePoint} from './types'; +import { TranscriptEvents } from "./events"; export const pluginName: string = 'playkit-js-transcript'; @@ -172,11 +173,12 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { return `${activeTextTrack?.language}-${activeTextTrack?.label}`; }; - private _activatePlugin = () => { + private _activatePlugin = (isFirstOpen = false) => { this.ready.then(() => { this.sidePanelsManager?.activateItem(this._transcriptPanel); this._pluginState = PluginStates.OPENED; this.upperBarManager?.update(this._transcriptIcon); + this.dispatchEvent(TranscriptEvents.TRANSCRIPT_OPEN, {auto: isFirstOpen}); }); }; @@ -184,6 +186,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { this.ready.then(() => { this.sidePanelsManager?.deactivateItem(this._transcriptPanel); this.upperBarManager?.update(this._transcriptIcon); + this.dispatchEvent(TranscriptEvents.TRANSCRIPT_CLOSE); }); }; @@ -257,6 +260,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { onDownload={this._handleDownload} printDisabled={getConfigValue(printDisabled, isBoolean, false)} onPrint={this._handlePrint} + dispatcher={(eventType, payload) => this.dispatchEvent(eventType, payload)} /> as any ); }, @@ -294,7 +298,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { }) as number; if ((expandOnFirstPlay && !this._pluginState) || this._pluginState === PluginStates.OPENED) { - this._activatePlugin(); + this._activatePlugin(true); } } @@ -316,6 +320,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { downloadContent(makePlainText(captions), `${language}${entryMetadata.name ? `-${entryMetadata.name}` : ''}.txt`); } + this.dispatchEvent(TranscriptEvents.TRANSCRIPT_DOWNLOAD, {videoPosition: this.player.currentTime}); }; private _handlePrint = () => { @@ -323,6 +328,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin { if (captions) { printContent(makePlainText(captions)); } + this.dispatchEvent(TranscriptEvents.TRANSCRIPT_PRINT, {videoPosition: this.player.currentTime}); }; private _handleClose = (e: OnClickEvent, byKeyboard: boolean) => {