From b306ce614e70e6d3305348d1b69e1434031d73ef Mon Sep 17 00:00:00 2001 From: Walter Seymour Date: Mon, 6 Feb 2023 13:44:24 -0600 Subject: [PATCH] feat: improved text tracks settings labels (#8101) --- docs/translations-needed.md | 220 +++++++++++++++---- lang/ar.json | 6 +- lang/de.json | 6 +- lang/en.json | 6 +- lang/es.json | 6 +- lang/fr.json | 6 +- lang/it.json | 6 +- lang/ja.json | 6 +- lang/ko.json | 6 +- lang/zh-CN.json | 6 +- lang/zh-TW.json | 6 +- src/css/components/_captions-settings.scss | 13 +- src/js/tracks/text-track-settings.js | 24 +- test/unit/tracks/text-track-settings.test.js | 10 +- 14 files changed, 258 insertions(+), 69 deletions(-) diff --git a/docs/translations-needed.md b/docs/translations-needed.md index 25d42884e3..ded483e370 100644 --- a/docs/translations-needed.md +++ b/docs/translations-needed.md @@ -17,7 +17,7 @@ This default value is hardcoded as a default to the localize method in the SeekB | Language file | Missing translations | | ----------------------- | ----------------------------------------------------------------------------------- | | ar.json (Complete) | | -| ba.json (missing 64) | Audio Player | +| ba.json (missing 68) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -81,7 +81,11 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| bg.json (missing 64) | Audio Player | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| bg.json (missing 68) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -145,8 +149,16 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| bn.json (missing 1) | Exit Fullscreen | -| ca.json (missing 64) | Audio Player | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| bn.json (missing 5) | Exit Fullscreen | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| ca.json (missing 68) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -210,17 +222,29 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| cs.json (missing 5) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| cs.json (missing 9) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| cy.json (missing 5) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| cy.json (missing 9) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| da.json (missing 64) | Audio Player | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| da.json (missing 68) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -284,8 +308,12 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | | de.json (Complete) | | -| el.json (missing 50) | Audio Player | +| el.json (missing 54) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -335,11 +363,27 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | | es.json (Complete) | | -| et.json (missing 1) | No content | -| eu.json (missing 1) | No content | -| fa.json (missing 1) | No content | -| fi.json (missing 64) | Audio Player | +| et.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| eu.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| fa.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| fi.json (missing 68) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -403,21 +447,41 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | | fr.json (Complete) | | -| gd.json (missing 3) | Exit Picture-in-Picture | +| gd.json (missing 7) | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| gl.json (missing 3) | Exit Picture-in-Picture | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| gl.json (missing 7) | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| he.json (missing 6) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| he.json (missing 10) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | {1} is loading. | | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| hi.json (missing 1) | No content | -| hr.json (missing 64) | Audio Player | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| hi.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| hr.json (missing 68) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -481,7 +545,15 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| hu.json (missing 1) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| hu.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | | it.json (missing 7) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | Raised | @@ -491,25 +563,51 @@ This default value is hardcoded as a default to the localize method in the SeekB | | No content | | ja.json (Complete) | | | ko.json (Complete) | | -| lv.json (missing 1) | No content | -| nb.json (missing 3) | Exit Picture-in-Picture | +| lv.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| nb.json (missing 7) | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| nl.json (missing 6) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| nl.json (missing 10) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | {1} is loading. | | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| nn.json (missing 3) | Exit Picture-in-Picture | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| nn.json (missing 7) | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| oc.json (Complete) | | -| pl.json (Complete) | | -| pt-BR.json (missing 3) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| oc.json (missing 4) | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| pl.json (missing 4) | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| pt-BR.json (missing 7) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | No content | -| pt-PT.json (missing 49) | Audio Player | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| pt-PT.json (missing 53) | Audio Player | | | Video Player | | | Seek to live, currently behind live | | | Seek to live, currently playing live | @@ -558,21 +656,41 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| ro.json (missing 1) | No content | -| ru.json (missing 1) | No content | -| sk.json (missing 5) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| ro.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| ru.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| sk.json (missing 9) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| sl.json (missing 7) | Proportional Sans-Serif | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| sl.json (missing 11) | Proportional Sans-Serif | | | Monospace Sans-Serif | | | Proportional Serif | | | Monospace Serif | | | Casual | | | Script | | | No content | -| sr.json (missing 64) | Audio Player | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| sr.json (missing 68) | Audio Player | | | Video Player | | | Replay | | | Seek to live, currently behind live | @@ -636,12 +754,28 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| sv.json (missing 3) | Exit Picture-in-Picture | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| sv.json (missing 7) | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| te.json (missing 1) | No content | -| th.json (missing 1) | No content | -| tr.json (missing 14) | Audio Player | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| te.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| th.json (missing 5) | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| tr.json (missing 18) | Audio Player | | | Video Player | | | Seek to live, currently behind live | | | Seek to live, currently playing live | @@ -655,17 +789,29 @@ This default value is hardcoded as a default to the localize method in the SeekB | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| uk.json (missing 5) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| uk.json (missing 9) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | -| vi.json (missing 6) | Seek to live, currently behind live | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | +| vi.json (missing 10) | Seek to live, currently behind live | | | Seek to live, currently playing live | | | {1} is loading. | | | Exit Picture-in-Picture | | | Picture-in-Picture | | | No content | +| | Color | +| | Opacity | +| | Text Background | +| | Caption Area Background | | zh-CN.json (Complete) | | | zh-TW.json (Complete) | | diff --git a/lang/ar.json b/lang/ar.json index 44922a6e1c..21719af8d6 100644 --- 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 index d02e4457cb..110684e966 100644 --- 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 index a20324a5ee..308a0bb1e8 100644 --- 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 index 28932ff4f5..fa7ef20056 100644 --- 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 index 69b3ffd8e4..09aba0eb05 100644 --- 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 index e5d11b1bbc..3994eb3952 100644 --- 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 index 4f632ae2f4..dfde916461 100644 --- 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 index 30fde926bb..b9f66e384e 100644 --- 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 index e622bdf7b0..baf0716386 100644 --- 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 index 70808eae46..281ab00c4b 100644 --- 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 index 34aca4e3a9..8fa89452dd 100644 --- 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 index 0f65995cdb..d866e0c2e1 100644 --- 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 [ - '
', + '
', ``, this.localize('Text'), '', + '', this.createElSelect_('color', legendId), + '', '', this.createElSelect_('textOpacity', legendId), '', @@ -368,11 +370,13 @@ class TextTrackSettings extends ModalDialog { const legendId = `captions-background-${this.id_}`; return [ - '
', + '
', ``, - this.localize('Background'), + this.localize('Text Background'), '', + '', this.createElSelect_('backgroundColor', legendId), + '', '', this.createElSelect_('backgroundOpacity', legendId), '', @@ -392,11 +396,13 @@ class TextTrackSettings extends ModalDialog { const legendId = `captions-window-${this.id_}`; return [ - '
', + '
', ``, - this.localize('Window'), + this.localize('Caption Area Background'), '', + '', this.createElSelect_('windowColor', legendId), + '', '', this.createElSelect_('windowOpacity', legendId), '', diff --git a/test/unit/tracks/text-track-settings.test.js b/test/unit/tracks/text-track-settings.test.js index 443e9eda35..bbf061a49d 100644 --- 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(