feat: improved text tracks settings labels (#8101)

videojs · Feb 6, 2023 · b306ce6 · b306ce6
1 parent f080150
commit b306ce6
Show file tree

Hide file tree

Showing 14 changed files with 258 additions and 69 deletions.
diff --git a/docs/translations-needed.md b/docs/translations-needed.md
diff --git a/lang/ar.json b/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": "خلفية منطقة التسمية التوضيحية"
 }
diff --git a/lang/de.json b/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": "Deckkraft",
+  "Text Background": "Texthintergrund",
+  "Caption Area Background": "Hintergrund des Untertitelbereichs"
 }
 
diff --git a/lang/en.json b/lang/en.json
@@ -86,5 +86,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"
 }
diff --git a/lang/es.json b/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"
 }
diff --git a/lang/fr.json b/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"
 }
diff --git a/lang/it.json b/lang/it.json
@@ -79,5 +79,9 @@
   "End of dialog window.": "Fine della finestra di dialogo.",
   "{1} is loading.": "{1} in fase di caricamento.",
   "Exit Picture-in-Picture": "Uscire dalla modalità Picture-in-Picture",
-  "Picture-in-Picture": "Picture-in-Picture"
+  "Picture-in-Picture": "Picture-in-Picture",
+  "Color": "Colore",
+  "Opacity": "Opacità",
+  "Text Background": "Sfondo del testo",
+  "Caption Area Background": "Sfondo dell'area dei sottotitoli"
 }
diff --git a/lang/ja.json b/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": "キャプション領域背景"
 }
diff --git a/lang/ko.json b/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": "자막 배경"
 }
diff --git a/lang/zh-CN.json b/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": "字幕区域背景"
 }
diff --git a/lang/zh-TW.json b/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": "字幕區域背景"
 }
diff --git a/src/css/components/_captions-settings.scss b/src/css/components/_captions-settings.scss
@@ -59,13 +59,13 @@
 }
 
 .vjs-text-track-settings fieldset {
-  margin: 5px;
-  padding: 3px;
+  margin: 10px;
   border: none;
 }
 
 .vjs-text-track-settings fieldset span {
   display: inline-block;
+  padding: 0 6px 8px;
 }
 
 // style the second select for text colors
@@ -75,17 +75,14 @@
 
 .vjs-text-track-settings legend {
   color: $primary-foreground-color;
-  margin: 0 0 5px 0;
+  font-weight: bold;
+  font-size: 14px;
 }
 
-// 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;

diff --git a/src/js/tracks/text-track-settings.js b/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,
@@ -63,7 +63,7 @@ const selectConfigs = {
   },
 
   color: {
-    selector: '.vjs-fg-color > select',
+    selector: '.vjs-text-color > select',
     id: 'captions-foreground-color-%s',
     label: 'Color',
     options: [
@@ -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,
@@ -344,11 +344,13 @@ class TextTrackSettings extends ModalDialog {
     const legendId = `captions-text-legend-${this.id_}`;
 
     return [
-      '<fieldset class="vjs-fg-color vjs-track-setting">',
+      '<fieldset class="vjs-fg vjs-track-setting">',
       `<legend id="${legendId}">`,
       this.localize('Text'),
       '</legend>',
+      '<span class="vjs-text-color">',
       this.createElSelect_('color', legendId),
+      '</span>',
       '<span class="vjs-text-opacity vjs-opacity">',
       this.createElSelect_('textOpacity', legendId),
       '</span>',
@@ -368,11 +370,13 @@ class TextTrackSettings extends ModalDialog {
     const legendId = `captions-background-${this.id_}`;
 
     return [
-      '<fieldset class="vjs-bg-color vjs-track-setting">',
+      '<fieldset class="vjs-bg vjs-track-setting">',
       `<legend id="${legendId}">`,
-      this.localize('Background'),
+      this.localize('Text Background'),
       '</legend>',
+      '<span class="vjs-bg-color">',
       this.createElSelect_('backgroundColor', legendId),
+      '</span>',
       '<span class="vjs-bg-opacity vjs-opacity">',
       this.createElSelect_('backgroundOpacity', legendId),
       '</span>',
@@ -392,11 +396,13 @@ class TextTrackSettings extends ModalDialog {
     const legendId = `captions-window-${this.id_}`;
 
     return [
-      '<fieldset class="vjs-window-color vjs-track-setting">',
+      '<fieldset class="vjs-window vjs-track-setting">',
       `<legend id="${legendId}">`,
-      this.localize('Window'),
+      this.localize('Caption Area Background'),
       '</legend>',
+      '<span class="vjs-window-color">',
       this.createElSelect_('windowColor', legendId),
+      '</span>',
       '<span class="vjs-window-opacity vjs-opacity">',
       this.createElSelect_('windowOpacity', legendId),
       '</span>',

diff --git a/test/unit/tracks/text-track-settings.test.js b/test/unit/tracks/text-track-settings.test.js
@@ -63,9 +63,9 @@ QUnit.test('should update settings', function(assert) {
   );
 
   assert.equal(
-    player.$('.vjs-fg-color > select').selectedIndex,
+    player.$('.vjs-text-color > select').selectedIndex,
     2,
-    'fg-color is set to new value'
+    'text-color is set to new value'
   );
 
   assert.equal(
@@ -133,7 +133,7 @@ QUnit.test('should restore default settings', function(assert) {
     persistTextTrackSettings: true
   });
 
-  player.$('.vjs-fg-color > select').selectedIndex = 1;
+  player.$('.vjs-text-color > select').selectedIndex = 1;
   player.$('.vjs-bg-color > select').selectedIndex = 1;
   player.$('.vjs-window-color > select').selectedIndex = 1;
   player.$('.vjs-text-opacity > select').selectedIndex = 1;
@@ -160,9 +160,9 @@ QUnit.test('should restore default settings', function(assert) {
   //                 'values are saved');
 
   assert.equal(
-    player.$('.vjs-fg-color > select').selectedIndex,
+    player.$('.vjs-text-color > select').selectedIndex,
     0,
-    'fg-color is set to default value'
+    'text-color is set to default value'
   );
 
   assert.equal(