fix(FEC-13719): [Transcript Plugins]: Add Events (used by kava analyt…

…ics) (#180)

Solves FEC-13719, FEC-13691
Related PR:
kaltura/playkit-js-kava#156
---------

Co-authored-by: JonathanTGold <jonathan.gold@[email protected]>

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<TranscriptProps, TranscriptState> {
           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<TranscriptProps, TranscriptState> {
       activeSearchIndex: index,
       isAutoScrollEnabled: false
     });
+    this.props.dispatcher(TranscriptEvents.TRANSCRIPT_NAVIGATE_RESULT, {index});
   };
 
   private _getHeaderStyles = (): string => {

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',
+};

src/events/index.ts

@@ -0,0 +1 @@
+export {TranscriptEvents} from './events';

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};
 

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,18 +173,20 @@ 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});
     });
   };
 
   private _deactivatePlugin = () => {
     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,13 +320,15 @@ 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 = () => {
     const captions = this._sanitizeCaptions(this._captionMap.get(this._activeCaptionMapId) || []);
     if (captions) {
       printContent(makePlainText(captions));
     }
+    this.dispatchEvent(TranscriptEvents.TRANSCRIPT_PRINT, {videoPosition: this.player.currentTime});
   };
 
   private _handleClose = (e: OnClickEvent, byKeyboard: boolean) => {