@playkit-js/transcript 3.5.29 → 3.5.30-canary.0-bdae263

package/package.json

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

package/src/components/caption/caption.tsx

@@ -20,6 +20,7 @@ export interface CaptionProps {
   player?: any;
   captionLabel?: string;
   moveToSearch?: string;
+  navigationInstruction?: string
   setTextToRead: (textToRead: string, delay?: number) => void;
 }
 
@@ -37,7 +38,8 @@ interface ExtendedCaptionProps extends CaptionProps {
 
 const translates = {
   captionLabel: <Text id="transcript.caption_label">Jump to this point in video</Text>,
-  moveToSearch: <Text id="transcript.move_to_search">Click to jump to search result</Text>
+  moveToSearch: <Text id="transcript.move_to_search">Click to jump to search result</Text>,
+  navigationInstruction: <Text id="transcript.navigation_instruction">Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript.</Text>
 };
 
 @withText(translates)
@@ -143,7 +145,7 @@ export class Caption extends Component<ExtendedCaptionProps> {
   };
 
   render() {
-    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch} = this.props;
+    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction} = this.props;
     const {startTime, id} = caption;
     const isHighlighted = Object.keys(highlighted).some(c => c === id);
     const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
@@ -151,7 +153,7 @@ export class Caption extends Component<ExtendedCaptionProps> {
     const captionA11yProps: Record<string, any> = {
       ariaCurrent: isHighlighted,
       tabIndex: 0,
-      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text} ${indexMap ? moveToSearch : captionLabel}`,
+      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text} ${indexMap ? moveToSearch : captionLabel}. ${navigationInstruction}`,
       role: 'button'
     };
 

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

@@ -98,9 +98,9 @@ export class CaptionList extends Component<Props> {
 
   private _handleKeyUp = (event: KeyboardEvent) => {
     if (event.keyCode === END) {
-      this._lastCaptionRef?._hotspotRef?.focus();
+      this._lastCaptionRef?.base.focus();
     } else if (event.keyCode === HOME) {
-      this._firstCaptionRef?._hotspotRef?.focus();
+      this._firstCaptionRef?.base.focus();
     }
   };
 

package/src/components/plugin-button/plugin-button.tsx

@@ -24,6 +24,7 @@ export const PluginButton = ({isActive, label, id, icon, dataTestId, setRef}: Pl
               setRef(node);
             }
           }}
+          tabIndex={0}
           type="button"
           aria-label={label}
           className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}

package/src/components/search/search.tsx

@@ -1,7 +1,12 @@
 import {h, Component} from 'preact';
 import {InputField} from '@playkit-js/common/dist/components/input-field';
+import {core} from '@playkit-js/kaltura-player-js';
 
+const {Utils} = core;
+const {withEventManager} = KalturaPlayer.ui.Event;
+const {TAB} = KalturaPlayer.ui.utils.KeyMap;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
+
 const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
   searchLabel: <Text id="transcript.search">Search in Transcript</Text>,
   clearSearchLabel: <Text id="transcript.clear_search">Clear search</Text>,
@@ -34,11 +39,26 @@ export interface SearchProps {
   nextMatchLabel?: string;
   prevMatchLabel?: string;
   searchResultsLabel?: string;
+  eventManager?: any
+  focusPluginButton: () => void;
 }
 
+@withEventManager
 class SearchComponent extends Component<SearchProps> {
   private _inputField: InputField | null = null;
 
+  constructor(props: SearchProps) {
+    super(props);
+    this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+  }
+
+  private handleKeydownEvent = (event: KeyboardEvent) => {
+    if (event.keyCode === TAB && event.shiftKey && this._inputField?.base?.contains(document.activeElement)){
+      event.preventDefault();
+      this.props.focusPluginButton();
+    }
+  };
+
   shouldComponentUpdate(nextProps: Readonly<SearchProps>) {
     const {value, activeSearchIndex, totalSearchResults, kitchenSinkActive} = this.props;
     if (

package/src/components/transcript/transcript.tsx

@@ -70,6 +70,7 @@ export interface TranscriptProps {
   isMobile?: boolean;
   playerWidth?: number;
   onJumpToSearchMatch: () => void;
+  focusPluginButton: () => void;
 }
 
 interface TranscriptState {
@@ -325,6 +326,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           totalSearchResults={totalSearchResults}
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
+          focusPluginButton={this.props.focusPluginButton}
         />
         {this._renderJumpToSearchButton()}
         <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading, detachMenuItem, kitchenSinkDetached}} />

package/src/transcript-plugin.tsx

@@ -335,6 +335,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
               this._handleAttach(CloseDetachTypes.arrow);
             }}
             onJumpToSearchMatch={this._toSearchMatch}
+            //@ts-ignore
+            focusPluginButton={() => this.upperBarManager!.focusPluginButton(this._transcriptIcon)}
           />
         ) as any;
       },

package/translations/en.i18n.json

@@ -25,7 +25,8 @@
       "caption_label": "Jump to this point in video",
       "move_to_search": "Click to jump to search result",
       "to_search_result": "Go to result",
-      "to_search_result_label": "Click to jump to this point in the video"
+      "to_search_result_label": "Click to jump to this point in the video",
+      "navigation_instruction": "Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript."
     }
   }
 }