From 6a8848ab51a118f10fb8ddcba63fdb6396b4c774 Mon Sep 17 00:00:00 2001
From: Tzipi <101048005+Tzipi-kaltura@users.noreply.github.com>
Date: Wed, 20 Nov 2024 13:34:32 +0200
Subject: [PATCH] fix(ADA-1777): University of Illinois Urbana-Champaign (ADA)
 V7 player 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         | 14 +++++++++-----
 src/components/transcript/transcript.tsx |  2 +-
 src/transcript-plugin.tsx                |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx
index d470755..ebf5249 100644
--- a/src/components/search/search.tsx
+++ b/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);
     }
   };
 
diff --git a/src/components/transcript/transcript.tsx b/src/components/transcript/transcript.tsx
index f847b10..002df34 100644
--- a/src/components/transcript/transcript.tsx
+++ b/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;
 }
diff --git a/src/transcript-plugin.tsx b/src/transcript-plugin.tsx
index e0b9ab4..21a1c1f 100644
--- a/src/transcript-plugin.tsx
+++ b/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}
           />