fix(ADA-1777): University of Illinois Urbana-Champaign (ADA) V7 playe…

…r issues Priority 2(#8) transcript panel does not immediately follow the toggle button (#228)

Sending the event to focusPluginButton function then only in case we have transcript/more button on the dom - we will use event.preventDefault() functionality. so if these elements are not exist on the dom, tab will be moved the previous element as usually. (in case player is too small and top bar buttons are removed)
Add the listener to first_play only if this is indeed the first play (before video is played - when preload is enabled) and if the component is called after the first play - listener to keydown is added immediately
part of - kaltura/playkit-js-ui-managers#68

solves ADA-1777

src/components/search/search.tsx

@@ -41,7 +41,7 @@ export interface SearchProps {
   prevMatchLabel?: string;
   searchResultsLabel?: string;
   eventManager?: any
-  focusPluginButton: () => void;
+  focusPluginButton: (event: KeyboardEvent) => void;
   player?: any;
 }
 
@@ -52,15 +52,19 @@ class SearchComponent extends Component<SearchProps> {
 
   constructor(props: SearchProps) {
     super(props);
-    this.props.eventManager?.listen(this.props.player, this.props.player.Event.FIRST_PLAY, () => {
+    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]){
-      event.preventDefault();
-      this.props.focusPluginButton();
+      //@ts-ignore
+      this.props.focusPluginButton(event);
     }
   };
 

src/components/transcript/transcript.tsx

@@ -70,7 +70,7 @@ export interface TranscriptProps {
   isMobile?: boolean;
   playerWidth?: number;
   onJumpToSearchMatch: () => void;
-  focusPluginButton: () => void;
+  focusPluginButton: (event: KeyboardEvent) => void;
   textTracks: Array<core.TextTrack>;
   changeLanguage: (textTrack: core.TextTrack) => void;
 }

src/transcript-plugin.tsx

@@ -346,7 +346,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
             }}
             onJumpToSearchMatch={this._toSearchMatch}
             //@ts-ignore
-            focusPluginButton={() => this.upperBarManager!.focusPluginButton(this._transcriptIcon)}
+            focusPluginButton={(event: KeyboardEvent) => this.upperBarManager!.focusPluginButton(this._transcriptIcon, event)}
             textTracks={this._getTextTracks()}
             changeLanguage={this._changeLanguage}
           />