feat: improved text tracks settings labels

lang/ar.json

@@ -86,5 +86,9 @@
   "{1} is loading.": "{1} قيد التحميل.",
   "Exit Picture-in-Picture": "خرج من وضع صورة داخل صورة",
   "Picture-in-Picture": "صورة داخل صورة",
-  "No content": "لا يوجد محتوى"
+  "No content": "لا يوجد محتوى",
+  "Color": "اللون",
+  "Opacity": "معدل الشفافية",
+  "Text Background": "خلفية النص",
+  "Caption Area Background": "خلفية منطقة التسمية التوضيحية"
 }

lang/de.json

@@ -86,6 +86,10 @@
   "Seek to live, currently playing live": "Zur Live-Übertragung wechseln. Es wird aktuell live abgespielt.",
   "Exit Picture-in-Picture": "Bild-im-Bild-Modus beenden",
   "Picture-in-Picture": "Bild-im-Bild-Modus",
-  "No content": "Kein Inhalt"
+  "No content": "Kein Inhalt",
+  "Color": "Farbe",
+  "Opacity": "Opazität",
+  "Text Background": "Text-Hintergrund",
+  "Caption Area Background": "Hintergrund des Untertitelbereichs"
 }
 

lang/en.json

@@ -87,5 +87,9 @@
   "{1} is loading.": "{1} is loading.",
   "Exit Picture-in-Picture": "Exit Picture-in-Picture",
   "Picture-in-Picture": "Picture-in-Picture",
-  "No content": "No content"
+  "No content": "No content",
+  "Color": "Color",
+  "Opacity": "Opacity",
+  "Text Background": "Text Background",
+  "Caption Area Background": "Caption Area Background"
 }

lang/es.json

@@ -86,5 +86,9 @@
   "{1} is loading.": "{1} se está cargando.",
   "Exit Picture-in-Picture": "Salir de imagen sobre imagen",
   "Picture-in-Picture": "Imagen sobre imagen",
-  "No content": "Sin contenido"
+  "No content": "Sin contenido",
+  "Color": "Color",
+  "Opacity": "Opacidad",
+  "Text Background": "Fondo del texto",
+  "Caption Area Background": "Fondo del área de subtítulos"
 }

lang/fr.json

@@ -86,5 +86,9 @@
   "Exit Picture-in-Picture": "Quitter le mode image dans l'image",
   "Picture-in-Picture": "Image dans l'image",
   "{1} is loading.": "{1} en cours de chargement.",
-  "No content": "Aucun contenu"
+  "No content": "Aucun contenu",
+  "Color": "Couleur",
+  "Opacity": "Opacité",
+  "Text Background": "Arrière-plan du texte",
+  "Caption Area Background": "Arrière-plan de la zone de sous-titre"
 }

lang/ja.json

@@ -86,5 +86,9 @@
   "{1} is loading.": "{1}は読み込み中です。",
   "Exit Picture-in-Picture": "ピクチャーインピクチャー機能の終了",
   "Picture-in-Picture": "ピクチャーインピクチャー",
-  "No content": "コンテンツなし"
+  "No content": "コンテンツなし",
+  "Color": "色",
+  "Opacity": "不透明度",
+  "Text Background": "テキスト背景",
+  "Caption Area Background": "キャプション領域背景"
 }

lang/ko.json

@@ -86,5 +86,9 @@
   "{1} is loading.": "{1}이(가) 로딩 중입니다.",
   "Exit Picture-in-Picture": "Picture-in-Picture 종료",
   "Picture-in-Picture": "Picture-in-Picture",
-  "No content": "콘텐츠 없음"
+  "No content": "콘텐츠 없음",
+  "Color": "색상",
+  "Opacity": "투명도",
+  "Text Background": "텍스트 배경",
+  "Caption Area Background": "자막 배경"
 }

lang/zh-CN.json

@@ -86,5 +86,9 @@
   "Seek to live, currently playing live": "尝试直播，当前为实时播放",
   "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
   "{1} is loading.": "正在加载 {1}。",
-  "No content": "无内容"
+  "No content": "无内容",
+  "Color": "颜色",
+  "Opacity": "不透明度",
+  "Text Background": "文本背景",
+  "Caption Area Background": "字幕区域背景"
 }

lang/zh-TW.json

@@ -86,5 +86,9 @@
   "Seek to live, currently playing live": "快轉至直播，目前為現場畫面",
   "progress bar timing: currentTime={1} duration={2}": "{1}/{2}",
   "{1} is loading.": "{1} 正在載入。",
-  "No content": "無內容"
+  "No content": "無內容",
+  "Color": "顏色",
+  "Opacity": "不透明度",
+  "Text Background": "文字背景",
+  "Caption Area Background": "字幕區域背景"
 }

src/css/components/_captions-settings.scss

@@ -59,7 +59,7 @@
 }
 
 .vjs-text-track-settings fieldset {
-  margin: 5px;
+  margin: 8px 10px;
   padding: 3px;
   border: none;
 }
@@ -75,21 +75,17 @@
 
 .vjs-text-track-settings legend {
   color: $primary-foreground-color;
-  margin: 0 0 5px 0;
 }
 
-// Hide labels, so they are only for screen reader users
 .vjs-text-track-settings .vjs-label {
-  position: absolute;
   clip: rect(1px 1px 1px 1px); // for Internet Explorer
   clip: rect(1px, 1px, 1px, 1px);
-  display: block;
-  margin: 0 0 5px 0;
-  padding: 0;
+  margin: 0 5px 5px 0;
   border: 0;
   height: 1px;
   width: 1px;
   overflow: hidden;
+  padding-inline-start: 2px;
 }
 
 .vjs-track-settings-controls button:focus,

src/js/tracks/text-track-settings.js

@@ -54,7 +54,7 @@ const selectConfigs = {
   backgroundOpacity: {
     selector: '.vjs-bg-opacity > select',
     id: 'captions-background-opacity-%s',
-    label: 'Transparency',
+    label: 'Opacity',
     options: [
       OPACITY_OPAQUE,
       OPACITY_SEMI,
@@ -128,7 +128,7 @@ const selectConfigs = {
   textOpacity: {
     selector: '.vjs-text-opacity > select',
     id: 'captions-foreground-opacity-%s',
-    label: 'Transparency',
+    label: 'Opacity',
     options: [
       OPACITY_OPAQUE,
       OPACITY_SEMI
@@ -146,7 +146,7 @@ const selectConfigs = {
   windowOpacity: {
     selector: '.vjs-window-opacity > select',
     id: 'captions-window-opacity-%s',
-    label: 'Transparency',
+    label: 'Opacity',
     options: [
       OPACITY_TRANS,
       OPACITY_SEMI,
@@ -370,7 +370,7 @@ class TextTrackSettings extends ModalDialog {
     return [
       '<fieldset class="vjs-bg-color vjs-track-setting">',
       `<legend id="${legendId}">`,
-      this.localize('Background'),
+      this.localize('Text Background'),
       '</legend>',
       this.createElSelect_('backgroundColor', legendId),
       '<span class="vjs-bg-opacity vjs-opacity">',
@@ -394,7 +394,7 @@ class TextTrackSettings extends ModalDialog {
     return [
       '<fieldset class="vjs-window-color vjs-track-setting">',
       `<legend id="${legendId}">`,
-      this.localize('Window'),
+      this.localize('Caption Area Background'),
       '</legend>',
       this.createElSelect_('windowColor', legendId),
       '<span class="vjs-window-opacity vjs-opacity">',