@playkit-js/transcript 3.5.24 → 3.5.25-canary.0-46c6dcd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.24",
+  "version": "3.5.25-canary.0-46c6dcd",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/components/caption-list/captionList.tsx

@@ -3,8 +3,12 @@ import {HOUR} from '../../utils';
 import {Caption} from '../caption';
 import * as styles from './captionList.scss';
 import {HighlightedMap, CuePointData} from '../../types';
+import {TranscriptEvents} from "../../events/events";
+import {ui} from "@playkit-js/kaltura-player-js";
 
 const {END, HOME} = KalturaPlayer.ui.utils.KeyMap;
+const {withEventManager} = KalturaPlayer.ui.Event;
+const {withPlayer} = ui.Components;
 
 export interface CaptionProps {
   showTime: boolean;
@@ -28,20 +32,35 @@ export interface Props {
   activeSearchIndex: number;
   searchMap: Record<string, Record<string, number>>;
   captionProps: CaptionProps;
+  eventManager?: any;
+  player?: any;
 }
+
+
+@withEventManager
+@withPlayer
 export class CaptionList extends Component<Props> {
   private _currentCaptionRef: any = null;
   private _firstCaptionRef: any = null;
   private _lastCaptionRef: any = null;
+  private _isTranscriptNavigateTriggered: boolean = false;
+
+  constructor(props: Props | undefined) {
+    super(props);
+    this._setFocus();
+  }
+
   shouldComponentUpdate(nextProps: Readonly<Props>) {
-    const {highlightedMap, data, searchMap, activeSearchIndex, isAutoScrollEnabled, captionProps} = this.props;
+    const {highlightedMap, data, searchMap, activeSearchIndex, isAutoScrollEnabled} = this.props;
+    if (searchMap !== nextProps.searchMap){
+      this._isTranscriptNavigateTriggered = false;
+    }
     if (
       highlightedMap !== nextProps.highlightedMap ||
       data !== nextProps.data ||
       searchMap !== nextProps.searchMap ||
       activeSearchIndex !== nextProps.activeSearchIndex ||
-      isAutoScrollEnabled !== nextProps.isAutoScrollEnabled ||
-      captionProps.videoDuration !== nextProps.captionProps.videoDuration
+      isAutoScrollEnabled !== nextProps.isAutoScrollEnabled
     ) {
       return true;
     }
@@ -103,6 +122,12 @@ export class CaptionList extends Component<Props> {
     }
   };
 
+  private _setFocus = () =>{
+    this.props.eventManager?.listen(this.props.player, TranscriptEvents.TRANSCRIPT_NAVIGATE_RESULT, () => {
+      this._isTranscriptNavigateTriggered = true
+    });
+  }
+
   render() {
     const {data} = this.props;
     let isSearchCaption = false;
@@ -126,6 +151,9 @@ export class CaptionList extends Component<Props> {
                     }
                   });
                 }
+                if (this._isTranscriptNavigateTriggered && isSearchCaption){
+                  this._currentCaptionRef?.base?.focus();
+                }
                 if (!isSearchCaption && captionProps.highlighted[captionData.id]) {
                   this._currentCaptionRef = node;
                 }

package/src/components/transcript/transcript.scss

@@ -45,7 +45,7 @@
     font-style: normal;
   }
 
-  *:focus-visible:not(input) {
+  *:focus:not(input) {
     outline: 1px solid $tab-focus-color;
   }
 }

package/src/transcript-plugin.tsx

@@ -27,6 +27,8 @@ interface TimedMetadataEvent {
 }
 
 export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
+  public displayName = 'Transcript';
+  public svgIcon = {path: icons.PLUGIN_ICON, viewBox: '0 0 32 32'};
   static defaultConfig: TranscriptConfig = {
     expandMode: SidePanelModes.ALONGSIDE,
     expandOnFirstPlay: true,
@@ -48,6 +50,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
 
   private _transcriptPanel = -1;
   private _transcriptIcon = -1;
+  private _audioPlayerIconId = -1;
   private _pluginState: PluginStates | null = null;
   private _pluginButtonRef: HTMLButtonElement | null = null;
 
@@ -111,6 +114,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this._updateTranscriptPanel();
   };
 
+  public open(): void {
+    this._handleDetach();
+  }
+
   private _handleLanguageChange = () => {
     this._activeCaptionMapId = this._getCaptionMapId();
     this._initLoading();
@@ -271,11 +278,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
   };
 
   private _addTranscriptItem(): void {
-    if (Math.max(this._transcriptPanel, this._transcriptIcon) > 0) {
+    if (Math.max(this._transcriptPanel, this._transcriptIcon, this._audioPlayerIconId) > 0) {
       // transcript panel or icon already exist
       return;
     }
-
     const {
       expandMode,
       position,
@@ -331,29 +337,36 @@ 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>
     };
-    this._transcriptIcon = this.upperBarManager!.add({
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (ui.redux.useStore().getState().shell['activePresetName'] !== ReservedPresetNames.MiniAudioUI) {
+      this._transcriptIcon = this.upperBarManager!.add({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        displayName: 'Transcript',
+        ariaLabel: 'Transcript',
+        order: 30,
+        svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
+        onClick: this._handleClickOnPluginIcon as () => void,
+        component: withText(translates)((props: {showTranscript: string; hideTranscript: string}) => {
+          const isActive = this._isPluginActive();
+          const label = isActive ? props.hideTranscript : props.showTranscript;
+          return (
+            <PluginButton
+              isActive={isActive}
+              id={pluginName}
+              label={label}
+              icon={icons.PLUGIN_ICON}
+              dataTestId="transcript_pluginButton"
+              setRef={this._setPluginButtonRef}
+            />
+          );
+        })
+      }) as number;
+    } else {
+      const {displayName, svgIcon} = this;
       // @ts-ignore
-      displayName: 'Transcript',
-      ariaLabel: 'Transcript',
-      order: 30,
-      svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
-      onClick: this._handleClickOnPluginIcon as () => void,
-      component: withText(translates)((props: {showTranscript: string; hideTranscript: string}) => {
-        const isActive = this._isPluginActive();
-        const label = isActive ? props.hideTranscript : props.showTranscript;
-        return (
-          <PluginButton
-            isActive={isActive}
-            id={pluginName}
-            label={label}
-            icon={icons.PLUGIN_ICON}
-            dataTestId="transcript_pluginButton"
-            setRef={this._setPluginButtonRef}
-          />
-        );
-      })
-    }) as number;
+      this._audioPlayerIconId = this.player.getService('AudioPluginsManager').add({displayName, svgIcon, onClick: (e) => this.open(e)});
+    }
 
     if ((expandOnFirstPlay && !this._pluginState) || this._pluginState === PluginStates.OPENED) {
       this._activatePlugin(true);
@@ -397,10 +410,6 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this._pluginState = PluginStates.CLOSED;
   };
 
-  public isPluginAvailable = () => {
-    return this._captionMap.size > 0;
-  };
-
   static isValid(): boolean {
     return true;
   }
@@ -410,8 +419,11 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     if (Math.max(this._transcriptPanel, this._transcriptIcon) > 0) {
       this.sidePanelsManager?.remove(this._transcriptPanel);
       this.upperBarManager!.remove(this._transcriptIcon);
+      // @ts-ignore
+      this.player.getService('AudioPluginsManager').remove(this._audioPlayerIconId);
       this._transcriptPanel = -1;
       this._transcriptIcon = -1;
+      this._audioPlayerIconId = -1;
       this._pluginButtonRef = null;
     }
     this._captionMap = new Map();