@playkit-js/playkit-js-ui 0.83.1 → 0.83.2-canary.0-e2f0ab8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/playkit-js-ui",
-  "version": "0.83.1",
+  "version": "0.83.2-canary.0-e2f0ab8",
   "description": "",
   "keywords": [
     "kaltura",

package/src/components/cvaa-overlay/main-captions_window.tsx

@@ -1,23 +1,39 @@
 import {Component, VNode} from 'preact';
 import style from '../../styles/style.scss';
-import {Text} from 'preact-i18n';
+import {Text, withText} from 'preact-i18n';
 import {Icon, IconType} from '../icon';
 import {SampleCaptionsStyleButton} from './sample-captions-style-button';
 import {h} from 'preact';
 import {withPlayer} from '../player';
 import { KeyCode } from '../../utils';
 
+const translates = (props: any) => ({ 
+  title: <Text id={'cvaa.title'} />,
+  sampleHighContrast: <Text id={'cvaa.sample_high_contrast'} />,
+  sampleMinimalist: <Text id={'cvaa.sample_minimalist'} />,
+  sampleClassicTv: <Text id={'cvaa.sample_classic_tv'} />,
+  sampleEasyReading: <Text id={'cvaa.sample_easy_reading'} />,
+  sampleEarlyReaders: <Text id={'cvaa.sample_early_readers'} />,
+  sampleNightMode: <Text id={'cvaa.sample_night_mode'} />,
+  sampleCustom: <Text id={'cvaa.sample_custom'} />,
+  setCustomCaption: <Text id={'cvaa.set_custom_caption'} />,
+  captionPreview: <Text id={'cvaa.caption_preview'} />
+});
+
 /**
  * MainWindow component
  * @class MainCaptionsWindow
  * @extends {Component}
  */
 @withPlayer
+@withText(translates)
 class MainCaptionsWindow extends Component<any, any> {
     presets: {
       key: string;
       className: string;
       textId: string;
+      label: string;
+      ariaLabel: string;
       source: string;
       style: any;
     }[] = [];
@@ -37,6 +53,8 @@ class MainCaptionsWindow extends Component<any, any> {
       {
         key: "minimalist",
         className: style.minimalist,
+        label: "Minimalist",
+        ariaLabel: this.props.sampleMinimalist,
         textId: "cvaa.sample_minimalist",
         source: "Advanced_captions_preset_minimalist",
         style: player.TextStyle.fromJson({
@@ -52,6 +70,8 @@ class MainCaptionsWindow extends Component<any, any> {
       {
         key: "highContrast",
         className: style.highContrast,
+        label: "High Contrast",
+        ariaLabel: this.props.sampleHighContrast,
         textId: "cvaa.sample_high_contrast",
         source: "Advanced_captions_preset_high_contrast",
         style: player.TextStyle.fromJson({
@@ -67,6 +87,8 @@ class MainCaptionsWindow extends Component<any, any> {
       {
         key: "classicTv",
         className: style.classicTv,
+        label: "Classic",  
+        ariaLabel: this.props.sampleClassicTv,
         textId: "cvaa.sample_classic_tv",
         source: "Advanced_captions_preset_classic_tv_style",
         style: player.TextStyle.fromJson({
@@ -82,6 +104,8 @@ class MainCaptionsWindow extends Component<any, any> {
       {
         key: "easyReading",
         className: style.easyReading,
+        label: "Easy Reading",
+        ariaLabel: this.props.sampleEasyReading,
         textId: "cvaa.sample_easy_reading",
         source: "Advanced_captions_preset_easy_reading",
         style: player.TextStyle.fromJson({
@@ -97,6 +121,8 @@ class MainCaptionsWindow extends Component<any, any> {
       {
         key: "earlyReaders",
         className: style.earlyReaders,
+        label: "Early Readers",
+        ariaLabel: this.props.sampleEarlyReaders,
         textId: "cvaa.sample_early_readers",
         source: "Advanced_captions_preset_early_readers",
         style: player.TextStyle.fromJson({
@@ -112,6 +138,8 @@ class MainCaptionsWindow extends Component<any, any> {
       {
         key: "nightMode",
         className: style.nightMode,
+        label: "Night Mode",
+        ariaLabel: this.props.sampleNightMode,
         textId: "cvaa.sample_night_mode",
         source: "Advanced_captions_preset_night_mode",
         style: player.TextStyle.fromJson({
@@ -263,7 +291,7 @@ class MainCaptionsWindow extends Component<any, any> {
     return (
       <div className={[style.overlayScreen, style.active].join(' ')}>
         <h2 className={style.title} id={this.props.captionsTitleId}>
-          <Text id={'cvaa.title'} />
+          {this.props.title}
         </h2>
         <div role="radiogroup" aria-labelledby={this.props.captionsTitleId}>
           {this.presets.map((preset, index) => (
@@ -278,8 +306,9 @@ class MainCaptionsWindow extends Component<any, any> {
               tabIndex={index === focusIndex ? 0 : -1}
               onKeyDown={(e: KeyboardEvent) => this.onPresetsKeyDown(e, index)}
               setRef={(el: HTMLDivElement | null) => {this.presetRefs[index] = el;}}
+              ariaLabel={preset.ariaLabel}
             >
-              <Text id={preset.textId} />
+              {preset.label}
             </SampleCaptionsStyleButton>
           ))}
         </div>
@@ -291,9 +320,10 @@ class MainCaptionsWindow extends Component<any, any> {
               changeCaptionsStyle={() => props.changeCaptionsStyle(props.customPresetStyle, "Advanced_captions_custom")}
               isActive={isCustomActive}
               tabIndex={0}
+              ariaLabel={this.props.sampleCustom}
             >
               <span className={style.customButtonText}>
-                <Text id={'cvaa.sample_custom'} />
+                Custom captions
               </span>
               {isCustomActive && (
                 <span className={style.activeTick}>
@@ -312,15 +342,16 @@ class MainCaptionsWindow extends Component<any, any> {
               props.setCustomOrEditRef?.(el);
             }}
             onKeyDown={this.onKeyDown}
+            aria-label={this.props.setCustomCaption}
           >
             <span>
-              <Text id={'cvaa.set_custom_caption'} />
+              Set custom caption
             </span>
           </button>
         </div>
         <div className={`${style.previewContainer} ${activePreset?.key === "easyReading" ? style.previewEasyReading : ""}`}>
           <span style={this.getActiveStyle().toCSS()}>
-            <Text id={'cvaa.caption_preview'} />
+            {this.props.captionPreview}
           </span>
         </div>
       </div>

package/src/components/cvaa-overlay/sample-captions-style-button.tsx

@@ -40,6 +40,7 @@ const SampleCaptionsStyleButton = (props: any) => {
       role="radio"
       tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : (props.isActive ? 0 : -1)}
       aria-checked={props.isActive ? 'true' : 'false'}
+      aria-label={props['ariaLabel']}
       ref={el => {
         if (el) {
           _sampleCaptionsElRef.current = el;

package/src/components/smart-container/smart-container.tsx

@@ -100,7 +100,7 @@ class SmartContainer extends Component<any, any> {
           addAccessibleChild={this.props.addAccessibleChild}
           ariaLabel={props.label ? props.label : props.settingsText}
         >
-          <div className={style.title}>{props.title}</div>
+          <h2 className={style.title}>{props.title}</h2>
           {this.renderChildren(props)}
         </Overlay>,
         getOverlayPortalElement(props.player)!

package/translations/ca_es.i18n.json

@@ -100,6 +100,13 @@
     "cvaa": {
       "title": "Configuració avançada dels subtítols",
       "sample_caption_tag": "Subtítol exemple {{number}}",
+      "sample_high_contrast": "Alt contrast",
+      "sample_minimalist": "Minimalista",
+      "sample_classic_tv": "Clàssic",
+      "sample_easy_reading": "Lectura fàcil",
+      "sample_early_readers": "Lectors principiants",
+      "sample_night_mode": "Mode nocturn",
+      "sample_custom": "Personalitzat",
       "sample_custom_caption_tag": "Subtítols personalitzats",
       "set_custom_caption": "Establir subtítol personalitzat",
       "edit_caption": "Editar subtítol",
@@ -112,7 +119,8 @@
       "background_color_label": "Color de fons",
       "background_opacity_label": "Opacitat del fons",
       "apply": "Aplicar",
-      "caption_preview": "Aquesta és la previsualització del teu subtítol"
+      "caption_preview": "Aquesta és la previsualització del teu subtítol",
+      "close_label": "Tanca la configuració avançada dels subtítols"
     },
     "cast": {
       "play_on_tv": "Reproduir a la TV",

package/translations/de.i18n.json

@@ -61,6 +61,13 @@
     "cvaa": {
       "title": "Erweiterte Einstellungen für Untertitel",
       "sample_caption_tag": "Beispiel {{number}}",
+      "sample_high_contrast": "Hoher Kontrast",
+      "sample_minimalist": "Minimalist",
+      "sample_classic_tv": "Klassisch",
+      "sample_easy_reading": "leicht zu lesen",
+      "sample_early_readers": "Erstleser",
+      "sample_night_mode": "Nachtmodus",
+      "sample_custom": "Benutzerdefiniert",
       "sample_custom_caption_tag": "Benutzerdefinierte Untertitel",
       "set_custom_caption": "Benutzerdefinierte Untertitel auswählen",
       "edit_caption": "Untertitel bearbeiten",
@@ -72,7 +79,8 @@
       "background_color_label": "Hintergrundfarbe",
       "background_opacity_label": "Deckkraft Hintergrund",
       "apply": "Übernehmen",
-      "caption_preview": "Untertitelvorschau"
+      "caption_preview": "Untertitelvorschau",
+      "close_label": "Erweiterte Einstellungen für Untertitel schließen"
     },
     "cast": {
       "play_on_tv": "Über Fernseher abspielen",

package/translations/es.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Configuración avanzada de los subtítulos",
       "sample_caption_tag": "Ejemplo {{number}}",
+      "sample_high_contrast": "Contraste alto",
+      "sample_minimalist": "Minimalista",
+      "sample_classic_tv": "Clásico",
+      "sample_easy_reading": "Fácil de leer",
+      "sample_early_readers": "Primeros lectores",
+      "sample_night_mode": "Modo nocturno",
+      "sample_custom": "Personalizado",
       "sample_custom_caption_tag": "Personalizar subtítulos",
       "set_custom_caption": "Configurar subtítulos personalizados",
       "edit_caption": "Editar subtítulo",
@@ -71,7 +78,8 @@
       "background_color_label": "Color de fondo",
       "background_opacity_label": "Opacidad del fondo",
       "apply": "Aplicar",
-      "caption_preview": "Esta es la vista previa de su subtítulo"
+      "caption_preview": "Esta es la vista previa de su subtítulo",
+      "close_label": "Cerrar configuración avanzada de los subtítulos"
     },
     "cast": {
       "play_on_tv": "Reproducir en TV",

package/translations/fi.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Tekstityksen lisäasetukset",
       "sample_caption_tag": "Esimerkki {{number}}",
+      "sample_high_contrast": "Suuri kontrasti",
+      "sample_minimalist": "Minimalistinen",
+      "sample_classic_tv": "Klassinen",
+      "sample_easy_reading": "Helppolukuinen",
+      "sample_early_readers": "Varhain lukemaan oppineet",
+      "sample_night_mode": "Yötila",
+      "sample_custom": "Mukautettu",
       "sample_custom_caption_tag": "Mukautetut tekstitykset",
       "set_custom_caption": "Aseta mukautettu tekstitys",
       "edit_caption": "Muokkaa tekstitystä",
@@ -71,7 +78,8 @@
       "background_color_label": "Taustaväri",
       "background_opacity_label": "Taustavärin peittävyys",
       "apply": "Käytä",
-      "caption_preview": "Tämä on esikatselu tekstityksestäsi"
+      "caption_preview": "Tämä on esikatselu tekstityksestäsi",
+      "close_label": "Sulje tekstityksen lisäasetukset"
     },
     "cast": {
       "play_on_tv": "Toista TV:ssä",

package/translations/fr.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Paramètres avancés de sous-titres",
       "sample_caption_tag": "Échantillon {{number}}",
+      "sample_high_contrast": "Contraste élevé",
+      "sample_minimalist": "Minimaliste",
+      "sample_classic_tv": "Classique",
+      "sample_easy_reading": "Lecture facile",
+      "sample_early_readers": "Premiers débutants",
+      "sample_night_mode": "Mode nuit",
+      "sample_custom": "Personnalisé",
       "sample_custom_caption_tag": "Sous-titres personnalisés",
       "set_custom_caption": "Régler les sous-titres personnalisées",
       "edit_caption": "Modifier le sous-titre",
@@ -71,7 +78,8 @@
       "background_color_label": "Couleur d’arrière-plan",
       "background_opacity_label": "Opacité d’arrière-plan",
       "apply": "Appliquer",
-      "caption_preview": "Voici l’aperçu de vos sous-titres"
+      "caption_preview": "Voici l’aperçu de vos sous-titres",
+      "close_label": "Fermer Paramètres avancés des sous-titres"
     },
     "cast": {
       "play_on_tv": "Lire sur le TV",

package/translations/fr_ca.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Paramètres avancés de sous-titres",
       "sample_caption_tag": "Échantillon {{number}}",
+      "sample_high_contrast": "Contraste élevé",
+      "sample_minimalist": "Minimaliste",
+      "sample_classic_tv": "Classique",
+      "sample_easy_reading": "Lecture facile",
+      "sample_early_readers": "Premiers lecteurs",
+      "sample_night_mode": "Mode nuit",
+      "sample_custom": "Personnalisé",
       "sample_custom_caption_tag": "Sous-titres personnalisés",
       "set_custom_caption": "Paramétrer les sous-titres personnalisés",
       "edit_caption": "Modifier les sous-titres",
@@ -71,7 +78,8 @@
       "background_color_label": "Couleur d’arrière-plan",
       "background_opacity_label": "Opacité de l’arrière-plan",
       "apply": "Appliquer",
-      "caption_preview": "Ceci est un aperçu de vos sous-titres"
+      "caption_preview": "Ceci est un aperçu de vos sous-titres",
+      "close_label": "Fermer les paramètres avancés de sous-titres"
     },
     "cast": {
       "play_on_tv": "Lire sur la TV",

package/translations/it.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Impostazioni didascalie avanzate",
       "sample_caption_tag": "Campione {{number}}",
+      "sample_high_contrast": "Contrasto elevato",
+      "sample_minimalist": "Minimal",
+      "sample_classic_tv": "Classico",
+      "sample_easy_reading": "Lettura agevolata",
+      "sample_early_readers": "Primi lettori",
+      "sample_night_mode": "Modalità notte",
+      "sample_custom": "Personalizza",
       "sample_custom_caption_tag": "Didascalie personalizzate",
       "set_custom_caption": "Imposta didascalia personalizzata",
       "edit_caption": "Modifica didascalia",
@@ -71,7 +78,8 @@
       "background_color_label": "Colore sfondo",
       "background_opacity_label": "Opacità sfondo",
       "apply": "Applica",
-      "caption_preview": "Anteprima didascalia"
+      "caption_preview": "Anteprima didascalia",
+      "close_label": "Chiudi Impostazioni didascalie avanzate"
     },
     "cast": {
       "play_on_tv": "Riproduci su TV",

package/translations/ja.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "キャプションの詳細設定",
       "sample_caption_tag": "サンプル {{number}}",
+      "sample_high_contrast": "ハイコントラスト",
+      "sample_minimalist": "ミニマリスト",
+      "sample_classic_tv": "クラシック",
+      "sample_easy_reading": "やさしい内容",
+      "sample_early_readers": "子ども向け",
+      "sample_night_mode": "ナイト モード",
+      "sample_custom": "カスタム",
       "sample_custom_caption_tag": "カスタム キャプション",
       "set_custom_caption": "カスタム キャプションの設定",
       "edit_caption": "キャプションを編集する",
@@ -71,7 +78,8 @@
       "background_color_label": "背景色",
       "background_opacity_label": "背景の透明度",
       "apply": "適用する",
-      "caption_preview": "これはキャプションのプレビューです"
+      "caption_preview": "これはキャプションのプレビューです",
+      "close_label": "キャプションの詳細設定を閉じる"
     },
     "cast": {
       "play_on_tv": "TV で再生する",

package/translations/ko.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "고급 자막 설정",
       "sample_caption_tag": "샘플 {{number}}",
+      "sample_high_contrast": "고대비",
+      "sample_minimalist": "미니멀리스트",
+      "sample_classic_tv": "클래식",
+      "sample_easy_reading": "가독성 모드",
+      "sample_early_readers": "초급 독자용",
+      "sample_night_mode": "야간 모드",
+      "sample_custom": "사용자 지정",
       "sample_custom_caption_tag": "자막 변경",
       "set_custom_caption": "자막 설정하기",
       "edit_caption": "자막 편집",
@@ -71,7 +78,8 @@
       "background_color_label": "배경색",
       "background_opacity_label": "배경 불투명도",
       "apply": "적용",
-      "caption_preview": "자막 미리 보기입니다"
+      "caption_preview": "자막 미리 보기입니다",
+      "close_label": "고급 캡션 설정 닫기"
     },
     "cast": {
       "play_on_tv": "TV에서 재생",

package/translations/nl.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Geavanceerde instellingen voor onderschriften",
       "sample_caption_tag": "Voorbeeld {{number}}",
+      "sample_high_contrast": "Hoog contrast",
+      "sample_minimalist": "Minimalist",
+      "sample_classic_tv": "Klassiek",
+      "sample_easy_reading": "Gemakkelijk leesbaar",
+      "sample_early_readers": "Beginnende lezers",
+      "sample_night_mode": "Nachtmodus",
+      "sample_custom": "Aangepast",
       "sample_custom_caption_tag": "Aangepaste onderschriften",
       "set_custom_caption": "Aangepast onderschrift instellen",
       "edit_caption": "Onderschrift bewerken",
@@ -71,7 +78,8 @@
       "background_color_label": "Achtergrondkleur",
       "background_opacity_label": "Achtergronddekking",
       "apply": "Toepassen",
-      "caption_preview": "Dit is uw onderschriftvoorbeeld"
+      "caption_preview": "Dit is uw onderschriftvoorbeeld",
+      "close_label": "Geavanceerde ondertitelingsinstellingen sluiten"
     },
     "cast": {
       "play_on_tv": "Afspelen op TV",

package/translations/pt_br.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Configurações avançadas de legendas",
       "sample_caption_tag": "Amostra {{number}}",
+      "sample_high_contrast": "Alto contraste",
+      "sample_minimalist": "Minimalista",
+      "sample_classic_tv": "Clássico",
+      "sample_easy_reading": "Fácil leitura",
+      "sample_early_readers": "Para crianças leitoras",
+      "sample_night_mode": "Modo noturno",
+      "sample_custom": "Personalizado",
       "sample_custom_caption_tag": "Legendas personalizadas",
       "set_custom_caption": "Definir legenda personalizada",
       "edit_caption": "Editar legenda",
@@ -71,7 +78,8 @@
       "background_color_label": "Cor de fundo",
       "background_opacity_label": "Opacidade do fundo",
       "apply": "Aplicar",
-      "caption_preview": "Esta é a pré-visualização da sua legenda"
+      "caption_preview": "Esta é a pré-visualização da sua legenda",
+      "close_label": "Fechar configurações avançadas de legendas"
     },
     "cast": {
       "play_on_tv": "Reproduzir na TV",

package/translations/ru.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "Расширенные настройки субтитров",
       "sample_caption_tag": "Образец {{number}}",
+      "sample_high_contrast": "Высокая контрастность",
+      "sample_minimalist": "Минималистичный дизайн",
+      "sample_classic_tv": "Классический вариант",
+      "sample_easy_reading": "Легкое чтение",
+      "sample_early_readers": "Для начинающих читать",
+      "sample_night_mode": "Ночной режим",
+      "sample_custom": "Пользовательская настройка",
       "sample_custom_caption_tag": "Индивидуальные субтитры",
       "set_custom_caption": "Установить индивидуальные субтитры",
       "edit_caption": "Редактировать субтитры",
@@ -71,7 +78,8 @@
       "background_color_label": "Цвет фона",
       "background_opacity_label": "Непрозрачность фона",
       "apply": "Применить",
-      "caption_preview": "Это предварительный просмотр ваших субтитров"
+      "caption_preview": "Это предварительный просмотр ваших субтитров",
+      "close_label": "Закрыть расширенные настройки субтитров"
     },
     "cast": {
       "play_on_tv": "Воспроизвести на ТВ",

package/translations/zh_cn.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "高级字幕设置",
       "sample_caption_tag": "范例 {{number}}",
+      "sample_high_contrast": "高对比度",
+      "sample_minimalist": "极简主义",
+      "sample_classic_tv": "经典",
+      "sample_easy_reading": "轻松阅读",
+      "sample_early_readers": "初学读者",
+      "sample_night_mode": "夜间模式",
+      "sample_custom": "自定义",
       "sample_custom_caption_tag": "自定义字幕",
       "set_custom_caption": "设置自定义字幕",
       "edit_caption": " 编辑字幕",
@@ -71,7 +78,8 @@
       "background_color_label": "背景颜色",
       "background_opacity_label": "背景透明度",
       "apply": "采用",
-      "caption_preview": "这是您的字幕预览"
+      "caption_preview": "这是您的字幕预览",
+      "close_label": "关闭高级字幕设置"
     },
     "cast": {
       "play_on_tv": "在电视上播放",

package/translations/zh_tw.i18n.json

@@ -60,6 +60,13 @@
     "cvaa": {
       "title": "進階字幕設定",
       "sample_caption_tag": "樣本 {{number}}",
+      "sample_high_contrast": "高對比",
+      "sample_minimalist": "極簡主義",
+      "sample_classic_tv": "經典",
+      "sample_easy_reading": "輕鬆閱讀",
+      "sample_early_readers": "幼兒讀者",
+      "sample_night_mode": "夜間模式",
+      "sample_custom": "自訂",
       "sample_custom_caption_tag": "自訂字幕",
       "set_custom_caption": "設定自訂字幕",
       "edit_caption": "编辑字幕",
@@ -71,7 +78,8 @@
       "background_color_label": "背景颜色",
       "background_opacity_label": "背景透明度",
       "apply": "套用",
-      "caption_preview": "這是您的字幕預覽"
+      "caption_preview": "這是您的字幕預覽",
+      "close_label": "關閉進階字幕設定"
     },
     "cast": {
       "play_on_tv": "在電視中播放",