@playkit-js/transcript 3.7.13 → 3.7.14-canary.0-8267ebd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/transcript",
-  "version": "3.7.13",
+  "version": "3.7.14-canary.0-8267ebd",
   "main": "dist/playkit-transcript.js",
   "license": "AGPL-3.0",
   "private": false,

package/src/components/caption/caption.tsx

@@ -20,10 +20,6 @@ export interface CaptionProps {
   videoDuration: number;
   eventManager?: any;
   player?: any;
-  captionLabel?: string;
-  moveToSearch?: string;
-  navigationInstruction?: string;
-  timeLabel?: string;
   setTextToRead: (textToRead: string, delay?: number) => void;
 }
 
@@ -39,17 +35,18 @@ interface ExtendedCaptionProps extends CaptionProps {
   isAutoScrollEnabled: boolean;
   onUpKeyPressed?: (e: KeyboardEvent) => void;
   onDownKeyPressed?: (e: KeyboardEvent) => void;
+  includeNavigationInstructions?: boolean;
+  jumpTo?: string;
+  navigationInstruction?: string;
 }
 
 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>,
+  jumpTo: <Text id="transcript.jump_to">Jump to</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)
@@ -162,17 +159,19 @@ export class Caption extends Component<ExtendedCaptionProps> {
   };
 
   render() {
-    const {caption, isHighlighted, showTime, longerThanHour, indexMap, captionLabel, moveToSearch, navigationInstruction, timeLabel, player} =
+    const {caption, isHighlighted, showTime, longerThanHour, indexMap, jumpTo, player, includeNavigationInstructions, navigationInstruction} =
       this.props;
     const {startTime} = caption;
     const time = showTime ? secondsToTime(startTime, longerThanHour) : '';
+    // Always include timestamp in aria-label for screen reader navigation, regardless of showTime visual display setting
+    const baseLabel = `${jumpTo} ${getDurationAsText(Math.floor(startTime), player?.config.ui.locale, true)}. ${caption.text}`;
+    const separator = /[.!?]$/.test(baseLabel.trim()) ? ' ' : '. ';
+    const ariaLabel = includeNavigationInstructions ? `${baseLabel}${separator}${navigationInstruction}` : baseLabel;
 
     const captionA11yProps: Record<string, any> = {
       ariaCurrent: isHighlighted,
       tabIndex: 0,
-      ariaLabel: `${showTime ? `${timeLabel} ${getDurationAsText(Math.floor(startTime), player?.config.ui.locale, true)} ` : ''}${caption.text} ${
-        indexMap ? moveToSearch : captionLabel
-      }. ${navigationInstruction}`,
+      ariaLabel,
       role: 'button'
     };
 

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

@@ -28,6 +28,7 @@ export interface Props {
   activeSearchIndex: number;
   searchMap: Record<string, Record<string, number>>;
   captionProps: CaptionProps;
+  captionsList?: string;
 }
 export class CaptionList extends Component<Props> {
   private _currentCaptionRef: any = null;
@@ -138,10 +139,10 @@ export class CaptionList extends Component<Props> {
   };
 
   render() {
-    const {data, highlightedMap} = this.props;
+    const {data, highlightedMap, captionsList} = this.props;
     let isSearchCaptionInList = false;
     return (
-      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp}>
+      <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp} aria-label={captionsList || 'Captions List'} role="region">
         {data.map((captionData, index) => {
           const captionProps = this._getCaptionProps(captionData);
           let isSearchCaption = false;
@@ -168,6 +169,7 @@ export class CaptionList extends Component<Props> {
                     }}
                     onUpKeyPressed={() => this._focusPrevCaption(index)}
                     onDownKeyPressed={() => this._focusNextCaption(index)}
+                    includeNavigationInstructions={index === 0 || index === data.length - 1}
                     {...captionProps}
                   />
                 );

package/src/components/transcript/transcript.tsx

@@ -33,7 +33,8 @@ const translates = {
   attachTranscript: <Text id="transcript.attach_transcript">Bring Transcript back</Text>,
   detachTranscript: <Text id="transcript.detach_transcript">Popout transcript</Text>,
   toSearchResult: <Text id="transcript.to_search_result">Go to result</Text>,
-  hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>
+  hideTranscript: <Text id="transcript.hide_plugin">Hide Transcript</Text>,
+  captionsList: <Text id="transcript.captions_list">Captions List</Text>
 };
 
 export interface TranscriptProps {
@@ -60,6 +61,7 @@ export interface TranscriptProps {
   detachTranscript?: string;
   toSearchResult?: string;
   hideTranscript?: string;
+  captionsList?: string;
   downloadDisabled: boolean;
   onDownload: () => void;
   printDisabled: boolean;
@@ -497,6 +499,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         onScroll={this._onScroll}
         showItemsIcons={true}
         searchActive={false}
+        captionsList={this.props.captionsList}
       />
     );
   };

package/translations/ca_es.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Tornar a la finestra de transcripció",
       "detach_transcript": "Desplegar transcripció",
       "transcript": "Transcripció",
-      "caption_label": "Saltar a aquest punt del vídeo",
-      "move_to_search": "Feu clic per anar al resultat de la cerca",
       "to_search_result": "Anar al resultat",
       "to_search_result_label": "Feu clic per anar a aquest punt del vídeo",
-      "navigation_instruction": "Premeu Inici per tornar al principi de la transcripció. Premeu Fi per anar a la fi de la transcripció.",
-      "time_label": "Marca de temps"
+      "navigation_instruction": "Premeu Inici per tornar al principi de la transcripció. Premeu Fi per anar a la fi de la transcripció."
     }
   }
 }

package/translations/de.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Transkript zurückholen",
       "detach_transcript": "Transkript öffnen",
       "transcript": "Transkript",
-      "caption_label": "An diese Stelle im Video springen",
-      "move_to_search": "Klicken, um zum Suchergebnis zu springen",
       "to_search_result": "Zum Ergebnis springen",
       "to_search_result_label": "Klicken, um zu diesem Punkt im Video zu springen",
-      "navigation_instruction": "Mit Home zum Transkript-Anfang springen. Mit End zum Transkript-Ende springen.",
-      "time_label": "Zeitstempel"
+      "navigation_instruction": "Mit Home zum Transkript-Anfang springen. Mit End zum Transkript-Ende springen."
     }
   }
 }

package/translations/en.i18n.json

@@ -22,12 +22,11 @@
       "attach_transcript": "Bring Transcript back",
       "detach_transcript": "Popout transcript",
       "transcript": "Transcript",
-      "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",
       "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"
+      "jump_to": "Jump to",
+      "captions_list": "Captions List"
     }
   }
 }

package/translations/es.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Volver a la ventana de transcripción",
       "detach_transcript": "Mostrar transcripción en la ventana emergente",
       "transcript": "Transcripción",
-      "caption_label": "Saltar a este punto del vídeo",
-      "move_to_search": "Hacer clic para ir al resultado de la búsqueda",
       "to_search_result": "Ir al resultado",
       "to_search_result_label": "Hacer clic para ir a este punto del vídeo",
-      "navigation_instruction": "Pulsar Inicio para volver al comienzo de la transcripción. Pulsar Fin para ir al final de la transcripción.",
-      "time_label": "Marca de tiempo"
+      "navigation_instruction": "Pulsar Inicio para volver al comienzo de la transcripción. Pulsar Fin para ir al final de la transcripción."
     }
   }
 }

package/translations/fi.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Tuo tekstitallenne takaisin",
       "detach_transcript": "Kelluva tekstitallenne",
       "transcript": "Tekstitallenne",
-      "caption_label": "Siirry tähän kohtaan videossa",
-      "move_to_search": "Siirry hakutulokseen napsauttamalla",
       "to_search_result": "Siirry tulokseen",
       "to_search_result_label": "Siirry tähän kohtaan videossa napsauttamalla",
-      "navigation_instruction": "Siirry tekstitallenteen alkuun painamalla Etusivu. Siirry tekstitallenteen loppuun painamalla Loppu.",
-      "time_label": "Aikaleima"
+      "navigation_instruction": "Siirry tekstitallenteen alkuun painamalla Etusivu. Siirry tekstitallenteen loppuun painamalla Loppu."
     }
   }
 }

package/translations/fr.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Ramener la transcription",
       "detach_transcript": "Transcription pop-out",
       "transcript": "Relevé",
-      "caption_label": "Allez à ce point de la vidéo",
-      "move_to_search": "Cliquez pour accéder aux résultats de recherche",
       "to_search_result": "Allez au résultat",
       "to_search_result_label": "Cliquez pour passer à ce moment de la vidéo",
-      "navigation_instruction": "Appuyez sur Accueil pour revenir au début de la transcription. Appuyez sur Fin pour passer à la fin de la transcription.",
-      "time_label": "Horodatage"
+      "navigation_instruction": "Appuyez sur Accueil pour revenir au début de la transcription. Appuyez sur Fin pour passer à la fin de la transcription."
     }
   }
 }

package/translations/fr_ca.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Ramenez la transcription",
       "detach_transcript": "Transcription pop-out",
       "transcript": "Relevé",
-      "caption_label": "Passez à ce point de la vidéo",
-      "move_to_search": "Cliquez pour accéder aux résultats de recherche",
       "to_search_result": "Allez au résultat",
       "to_search_result_label": "Cliquez pour passer à ce point de la vidéo",
-      "navigation_instruction": "Appuyez sur Accueil pour revenir au début de la transcription. Appuyez sur Fin pour passer à la fin de la transcription.",
-      "time_label": "Horodatage"
+      "navigation_instruction": "Appuyez sur Accueil pour revenir au début de la transcription. Appuyez sur Fin pour passer à la fin de la transcription."
     }
   }
 }

package/translations/it.i18n.json

@@ -22,12 +22,10 @@
       "attach_transcript": "Ripristina la trascrizione",
       "detach_transcript": "Trascrizione a comparsa",
       "transcript": "Trascrizione",
-      "caption_label": "Vai a questo punto del video",
-      "move_to_search": "Clicca per andare al risultato di ricerca",
+
       "to_search_result": "Vai al risultato",
       "to_search_result_label": "Clicca per andare a questo punto del video",
-      "navigation_instruction": "Premi Home per andare all'inizio della trascrizione. Premi Fine per andare alla fine della trascrizione.",
-      "time_label": "Timestamp"
+      "navigation_instruction": "Premi Home per andare all'inizio della trascrizione. Premi Fine per andare alla fine della trascrizione."
     }
   }
 }

package/translations/ja.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "トランスクリプトを元に戻す",
       "detach_transcript": "トランスクリプトを表示する",
       "transcript": "トランスクリプト",
-      "caption_label": "ビデオのこのポイントにジャンプする",
-      "move_to_search": "クリックして検索結果にジャンプする",
       "to_search_result": "結果に移動する",
       "to_search_result_label": "クリックして、ビデオのこのポイントにジャンプする",
-      "navigation_instruction": "Home キーを押すと、トランスクリプトの先頭に移動します。End キーを押すと、トランスクリプトの最後に移動します。",
-      "time_label": "タイプスタンプ"
+      "navigation_instruction": "Home キーを押すと、トランスクリプトの先頭に移動します。End キーを押すと、トランスクリプトの最後に移動します。"
     }
   }
 }

package/translations/ko.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "대본을 원래 위치로 가져옵니다",
       "detach_transcript": "기록 팝아웃",
       "transcript": "기록",
-      "caption_label": "이 시점으로 이동합니다",
-      "move_to_search": "클릭하여 검색 결과로 이동합니다",
       "to_search_result": "결과로 이동합니다",
       "to_search_result_label": "클릭하여 이 시점으로 이동합니다",
-      "navigation_instruction": "Home 키를 누르면 대본의 시작으로 이동합니다. End 키를 누르면 대본의 끝으로 이동합니다.",
-      "time_label": "타임스탬프"
+      "navigation_instruction": "Home 키를 누르면 대본의 시작으로 이동합니다. End 키를 누르면 대본의 끝으로 이동합니다."
     }
   }
 }

package/translations/nl.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Breng de transcriptie terug",
       "detach_transcript": "Transcript weergeven",
       "transcript": "Transcriptie",
-      "caption_label": "Spoel door naar dit punt in de video",
-      "move_to_search": "Klik om door te spoelen naar het zoekresultaat",
       "to_search_result": "Ga naar resultaat",
       "to_search_result_label": "Klik om door te spoelen naar dit punt in de video",
-      "navigation_instruction": "Klik op startpagina om naar het begin van de transcriptie te navigeren. Druk op einde om naar het einde van de transcriptie door te spoelen.",
-      "time_label": "Tijdstempel"
+      "navigation_instruction": "Klik op startpagina om naar het begin van de transcriptie te navigeren. Druk op einde om naar het einde van de transcriptie door te spoelen."
     }
   }
 }

package/translations/pt.i18n.json

@@ -7,12 +7,9 @@
       "attach_transcript_text": "Transcrição exibida",
       "attach_transcript_button": "Trazer de volta",
       "attach_transcript": "Trazer a Transcrição de volta",
-      "caption_label": "Avançar para este ponto no vídeo",
-      "move_to_search": "Clicar para avançar para o resultado da pesquisa",
       "to_search_result": "Ir para o resultado",
       "to_search_result_label": "Clicar para avançar para este ponto do vídeo",
-      "navigation_instruction": "Premir Início para navegar até ao início da transcrição. Premir Fim para avançar para o final da transcrição.",
-      "time_label": "Marcação de data e hora"
+      "navigation_instruction": "Premir Início para navegar até ao início da transcrição. Premir Fim para avançar para o final da transcrição."
     }
   }
 }

package/translations/pt_br.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Voltar a Transcrição",
       "detach_transcript": "Transcrição em janela separada",
       "transcript": "Transcrição",
-      "caption_label": "Avançar para este ponto no vídeo",
-      "move_to_search": "Clicar para avançar para o resultado da pesquisa",
       "to_search_result": "Ir para o resultado",
       "to_search_result_label": "Clicar para avançar para este ponto do vídeo",
-      "navigation_instruction": "Pressione Início para ir ao início da transcrição. Pressione Fim para ir ao fim da transcrição.",
-      "time_label": "Marcação de data e hora"
+      "navigation_instruction": "Pressione Início para ir ao início da transcrição. Pressione Fim para ir ao fim da transcrição."
     }
   }
 }

package/translations/ru.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "Вернуть расшифровку",
       "detach_transcript": "Всплывающая текстовая расшифровка",
       "transcript": "Текстовая расшифровка",
-      "caption_label": "Перейти к этой точке в видео",
-      "move_to_search": "Нажмите, чтобы перейти к результату поиска",
       "to_search_result": "Перейти к результату",
       "to_search_result_label": "Нажмите, чтобы перейти к этой точке в видео",
-      "navigation_instruction": "Нажмите Home, чтобы перейти к началу текстовой расшифровки. Нажмите End, чтобы перейти к концу текстовой расшифровки.",
-      "time_label": "Временная метка"
+      "navigation_instruction": "Нажмите Home, чтобы перейти к началу текстовой расшифровки. Нажмите End, чтобы перейти к концу текстовой расшифровки."
     }
   }
 }

package/translations/zh_cn.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "还原转录文字",
       "detach_transcript": "弹出转录文字",
       "transcript": "转录文字",
-      "caption_label": "跳至视频此位置",
-      "move_to_search": "点击跳转至搜索结果",
       "to_search_result": "前往结果",
       "to_search_result_label": "点击跳转至视频此位置",
-      "navigation_instruction": "按 Home 键跳转至转录文字开头。按 End 键跳转至转录文字末尾。",
-      "time_label": "时间戳"
+      "navigation_instruction": "按 Home 键跳转至转录文字开头。按 End 键跳转至转录文字末尾。"
     }
   }
 }

package/translations/zh_tw.i18n.json

@@ -22,12 +22,9 @@
       "attach_transcript": "帶文字內容返回",
       "detach_transcript": "彈出轉錄視窗",
       "transcript": "逐字稿",
-      "caption_label": "跳轉至影片中的這個位置",
-      "move_to_search": "點擊跳轉至搜尋結果",
       "to_search_result": "前往結果",
       "to_search_result_label": "點擊跳轉至影片中的這個位置",
-      "navigation_instruction": "按下首頁導覽至文字內容開頭。按下結束跳轉至文字內容末端。",
-      "time_label": "時間戳記"
+      "navigation_instruction": "按下首頁導覽至文字內容開頭。按下結束跳轉至文字內容末端。"
     }
   }
 }