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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.29",
+  "version": "3.5.30-canary.0-ae564b8",
   "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/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."
     }
   }
 }