ADA-1629: Player v7 | Transcript | "Go to result" button background color doesn't match figma.

src/components/caption/caption.tsx

@@ -80,6 +80,12 @@ export class Caption extends Component<ExtendedCaptionProps> {
         this._captionRef?.focus();
       }
     });
+
+    eventManager?.listen(player, TranscriptEvents.TRANSCRIPT_SCROLLING, () => {
+      if(this._hasSearchMatch()) {
+        this._captionRef?.scrollIntoView()
+      }
+    })
   }
 
   shouldComponentUpdate(nextProps: ExtendedCaptionProps) {

src/components/transcript/transcript.scss

@@ -83,6 +83,9 @@ $button-height: 32px;
     &:focus {
       opacity: 1;
     }
+    &[class^="Button__button"]:focus:not([class^="Button__disabled"]) {
+      background-color: $tone-5-color
+    }
   }
 }
 

src/components/transcript/transcript.tsx

@@ -70,6 +70,7 @@ export interface TranscriptProps {
   isMobile?: boolean;
   playerWidth?: number;
   onJumpToSearchMatch: () => void;
+  onScrollToSearchMatch: () => void;
   focusPluginButton: (event: KeyboardEvent) => void;
   textTracks: Array<core.TextTrack>;
   changeLanguage: (textTrack: core.TextTrack) => void;
@@ -223,6 +224,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
 
   private _onSearch = (search: string) => {
     this.setState({search});
+    this.props.onScrollToSearchMatch()
   };
 
   private _findSearchMatches = () => {

src/events/events.ts

@@ -9,6 +9,7 @@ export const TranscriptEvents = {
   TRANSCRIPT_POPOUT_CLOSE: 'transcript_popout_close',
   TRANSCRIPT_POPOUT_DRAG: 'transcript_popout_drag',
   TRANSCRIPT_POPOUT_RESIZE: 'transcript_popout_resize',
+  TRANSCRIPT_SCROLLING: 'transcript_scrolling',
 
   TRANSCRIPT_TO_SEARCH_MATCH: 'transcript_to_search_match' // internal event
 };

src/transcript-plugin.tsx

@@ -284,6 +284,10 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
     this.dispatchEvent(TranscriptEvents.TRANSCRIPT_TO_SEARCH_MATCH);
   };
 
+  private _scrollToMatch = () => {
+    this.dispatchEvent(TranscriptEvents.TRANSCRIPT_SCROLLING);
+  }
+
   private _changeLanguage = (textTrack: core.TextTrack) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error - Property 'selectTrack' does not exist on type 'Player'
@@ -340,6 +344,7 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
               this._handleAttach(CloseDetachTypes.arrow);
             }}
             onJumpToSearchMatch={this._toSearchMatch}
+            onScrollToSearchMatch={this._scrollToMatch}
             //@ts-ignore
             focusPluginButton={(event: KeyboardEvent) => this.upperBarManager!.focusPluginButton(this._transcriptIcon, event)}
             textTracks={this._getTextTracks()}