@playkit-js/transcript 3.6.3 → 3.6.4-canary.0-ab5dad4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.6.3",
+  "version": "3.6.4-canary.0-ab5dad4",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/components/search/search.tsx

@@ -1,13 +1,17 @@
 import {h, Component} from 'preact';
 import {InputField} from '@playkit-js/common/dist/components/input-field';
-import {core, ui} from '@playkit-js/kaltura-player-js';
+import {ui} from '@playkit-js/kaltura-player-js';
 
-const {Utils} = core;
+const {connect} = ui.redux;
 const {withEventManager} = KalturaPlayer.ui.Event;
 const {TAB} = KalturaPlayer.ui.utils.KeyMap;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {withPlayer} = ui.Components;
 
+const mapStateToProps = (state: any) => ({
+  isOverlayOpen: state.shell.playerClasses?.includes('playkit-overlay-active')
+});
+
 const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
   searchLabel: <Text id="transcript.search">Search in Transcript</Text>,
   clearSearchLabel: <Text id="transcript.clear_search">Clear search</Text>,
@@ -40,30 +44,32 @@ export interface SearchProps {
   nextMatchLabel?: string;
   prevMatchLabel?: string;
   searchResultsLabel?: string;
-  eventManager?: any
+  eventManager?: any;
   focusPluginButton: (event: KeyboardEvent) => void;
   player?: any;
+
+  isOverlayOpen?: boolean;
 }
 
 @withPlayer
 @withEventManager
+@connect(mapStateToProps)
 class SearchComponent extends Component<SearchProps> {
   private _inputField: InputField | null = null;
 
   constructor(props: SearchProps) {
     super(props);
-    if (this.props.player._firstPlay){
+    if (this.props.player._firstPlay) {
       this.props.eventManager?.listen(this.props.player, this.props.player.Event.FIRST_PLAY, () => {
         this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
-      })
+      });
     } else {
       this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
     }
   }
 
   private handleKeydownEvent = (event: KeyboardEvent) => {
-    if (event.keyCode === TAB && event.shiftKey && document.activeElement === this._inputField?.base?.childNodes[0]){
-      //@ts-ignore
+    if (event.keyCode === TAB && event.shiftKey && document.activeElement === this._inputField?.base?.childNodes[0] && !this.props.isOverlayOpen) {
       this.props.focusPluginButton(event);
     }
   };

package/src/components/transcript/transcript.tsx

@@ -117,6 +117,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _scrollToSearchMatchEnabled: boolean = false;
   private _widgetRootRef: HTMLElement | null = null;
   private _transcriptMenuRef: HTMLElement | null = null;
+  private _jumpToSearchButtonComponentRef = ui.preact.createRef<Button>();
 
   private _widgetHeight: number = 0;
   private _topAutoscrollEdge: number = 0;
@@ -142,6 +143,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
       // use player size to define transcript root element size
       this._debounced.setWidgetSize();
     }
+    document.addEventListener('keydown', this._handleKeyboardShortcuts);
   }
 
   componentDidUpdate(previousProps: Readonly<TranscriptProps>, previousState: Readonly<TranscriptState>): void {
@@ -168,8 +170,18 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
       this._resizeObserver?.disconnect();
       this._resizeObserver = null;
     }
+    document.removeEventListener('keydown', this._handleKeyboardShortcuts);
   }
 
+  private _handleKeyboardShortcuts = (event: KeyboardEvent) => {
+    if ((event.ctrlKey || event.metaKey) && event.code === 'KeyJ') {
+      event.preventDefault();
+      if (this._jumpToSearchButtonComponentRef.current && this._jumpToSearchButtonComponentRef.current.buttonRef.current) {
+        this._jumpToSearchButtonComponentRef.current.buttonRef.current.focus();
+      }
+    }
+  }; 
+  
   private _handleClose = (event: KeyboardEvent) => {
     if (event.keyCode === ESC) {
       this.props.onClose(event, true);
@@ -288,6 +300,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
   private _renderJumpToSearchButton = () => {
     const {toSearchResult, onJumpToSearchMatch} = this.props;
     const {search, activeSearchIndex, totalSearchResults} = this.state;
+  
     if (!search || totalSearchResults === 0 || activeSearchIndex === 0) {
       return null;
     }
@@ -297,6 +310,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         className={styles.toSearchButton}
         onClick={onJumpToSearchMatch}
         ariaLabel={toSearchResult}
+        ref={this._jumpToSearchButtonComponentRef}
         testId="transcript_jumpToSearchMatch">
         {toSearchResult}
       </Button>