@playkit-js/transcript 3.5.33 → 3.5.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.5.33",
+  "version": "3.5.34",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/components/caption/caption.tsx

@@ -6,6 +6,8 @@ import * as styles from './caption.scss';
 
 import {TranscriptEvents} from '../../events/events';
 
+//@ts-ignore
+const {getDurationAsText} = KalturaPlayer.ui.utils
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
 const {withEventManager} = KalturaPlayer.ui.Event;
 const {withPlayer} = KalturaPlayer.ui.components;
@@ -20,7 +22,8 @@ export interface CaptionProps {
   player?: any;
   captionLabel?: string;
   moveToSearch?: string;
-  navigationInstruction?: string
+  navigationInstruction?: string;
+  timeLabel?: string;
   setTextToRead: (textToRead: string, delay?: number) => void;
 }
 
@@ -39,7 +42,9 @@ 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>,
-  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>
+  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>,
+  timeLabel: <Text id="transcript.time_label">Timestamp</Text>,
+
 };
 
 @withText(translates)
@@ -145,7 +150,7 @@ export class Caption extends Component<ExtendedCaptionProps> {
   };
 
   render() {
-    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction} = this.props;
+    const {caption, highlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction, timeLabel, player} = this.props;
     const {startTime, id} = caption;
     const isHighlighted = Object.keys(highlighted).some(c => c === id);
     const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
@@ -153,7 +158,7 @@ export class Caption extends Component<ExtendedCaptionProps> {
     const captionA11yProps: Record<string, any> = {
       ariaCurrent: isHighlighted,
       tabIndex: 0,
-      ariaLabel: `${time}${showTime ? ' ' : ''}${caption.text} ${indexMap ? moveToSearch : captionLabel}. ${navigationInstruction}`,
+      ariaLabel: `${showTime? `${timeLabel} ${getDurationAsText(Math.floor(startTime), player?.config.ui.locale, true)} ` : ''}${caption.text} ${indexMap ? moveToSearch : captionLabel}. ${navigationInstruction}`,
       role: 'button'
     };
 

package/translations/en.i18n.json

@@ -26,7 +26,8 @@
       "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",
-      "navigation_instruction": "Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript."
+      "navigation_instruction": "Press Home to navigate to the beginning of the transcript. Press End to jump to the end of the transcript.",
+      "time_label": "Timestamp"
     }
   }
 }