@playkit-js/transcript 3.5.9 → 3.5.10-canary.0-7fdf771

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.9",
+  "version": "3.5.10-canary.0-7fdf771",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -13,7 +13,9 @@
     "url": "git+https://github.com/kaltura/playkit-js-transcript.git"
   },
   "devDependencies": {
-    "@playkit-js/kaltura-player-js": "canary",
+    "@playkit-js/kaltura-player-js": "3.17.9",
+    "@playkit-js/playkit-js-ui": "0.78.0",
+    "@playkit-js/ui-managers": "1.5.2",
     "@types/sanitize-html": "^2.9.3",
     "conventional-github-releaser": "3.1.3",
     "copyfiles": "^2.4.1",
@@ -21,7 +23,6 @@
     "css-loader": "^6.7.1",
     "cypress": "^12.12.0",
     "playwright-webkit": "^1.33.0",
-    "preact": "^10.4.1",
     "prettier": "^2.6.2",
     "rimraf": "^5.0.5",
     "sass": "^1.54.3",
@@ -30,13 +31,12 @@
     "style-loader": "1.3.0",
     "ts-loader": "^9.3.0",
     "typescript": "^4.9.4",
-    "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0"
   },
   "peerDependencies": {
-    "@playkit-js/kaltura-player-js": "canary"
+    "@playkit-js/kaltura-player-js": "3.17.9"
   },
   "scripts": {
     "clean": "rimraf ./dist",
@@ -77,9 +77,7 @@
     "html5 player"
   ],
   "dependencies": {
-    "@playkit-js/common": "^1.2.13",
-    "@playkit-js/playkit-js-ui": "^0.77.3",
-    "@playkit-js/ui-managers": "^1.3.11",
+    "@playkit-js/common": "1.5.9",
     "sanitize-html": "^2.11.0",
     "stream-browserify": "^3.0.0"
   },

package/src/components/popover-menu/popover-menu.scss

@@ -29,19 +29,6 @@
     position: absolute;
     right: 0px;
     z-index: 1;
-    
-    &.hidden {
-      display: none;
-    }
-    
-    &.bottom {
-      top: 100%;
-      margin-top: 6px;
-    }
-    
-    &.left {
-      right: 0px;
-    }
   }
 }
 .popover-menu-item {

package/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 => {

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

package/src/events/index.ts

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

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

package/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,7 +260,8 @@ 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
         );
       },
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
@@ -269,8 +273,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
       showTranscript: <Text id="transcript.show_plugin">Show Transcript</Text>,
       hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>
     };
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     this._transcriptIcon = this.upperBarManager!.add({
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -296,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);
     }
   }
 
@@ -318,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 = () => {
@@ -325,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) => {