From ecef37c1fcc998d043db68002ffc71b2365f631f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20M=2E?=
 <34163393+amtins@users.noreply.github.com>
Date: Wed, 30 Oct 2024 09:35:04 +0100
Subject: [PATCH] fix(text-track-settings): localization not correctly applied
 (#8904)

Localization is not applied correctly in fieldset labels and select
options. As a result, the text track setting modal dialog is only half
translated.

- add `localize` at `label` level in `TextTrackFieldset`
- add `localize` at `option` level in `TextTrackSelect`
- add test cases
---
 src/js/tracks/text-track-fieldset.js         | 2 +-
 src/js/tracks/text-track-select.js           | 2 +-
 test/unit/tracks/text-track-settings.test.js | 8 +++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/js/tracks/text-track-fieldset.js b/src/js/tracks/text-track-fieldset.js
index b8f69df9f3..945c21cf62 100644
--- a/src/js/tracks/text-track-fieldset.js
+++ b/src/js/tracks/text-track-fieldset.js
@@ -87,7 +87,7 @@ class TextTrackFieldset extends Component {
         const label = Dom.createEl('label', {
           id,
           className: 'vjs-label',
-          textContent: selectConfig.label
+          textContent: this.localize(selectConfig.label)
         });
 
         label.setAttribute('for', guid);
diff --git a/src/js/tracks/text-track-select.js b/src/js/tracks/text-track-select.js
index 288bc55b7a..99bb538ee3 100644
--- a/src/js/tracks/text-track-select.js
+++ b/src/js/tracks/text-track-select.js
@@ -68,7 +68,7 @@ class TextTrackSelect extends Component {
           {
             id: optionId,
             value: this.localize(optionText[0]),
-            textContent: optionText[1]
+            textContent: this.localize(optionText[1])
           }
         );
 
diff --git a/test/unit/tracks/text-track-settings.test.js b/test/unit/tracks/text-track-settings.test.js
index e20a93664a..1eec3e6aef 100644
--- a/test/unit/tracks/text-track-settings.test.js
+++ b/test/unit/tracks/text-track-settings.test.js
@@ -375,10 +375,16 @@ QUnit.test('should update on languagechange', function(assert) {
     tracks
   });
 
-  videojs.addLanguage('test', {'Font Size': 'FONTSIZE'});
+  videojs.addLanguage('test', {
+    'Font Size': 'FONTSIZE',
+    'Color': 'COLOR',
+    'White': 'WHITE'
+  });
   player.language('test');
 
   assert.equal(player.$('.vjs-font-percent legend').textContent, 'FONTSIZE', 'settings dialog updates on languagechange');
+  assert.equal(player.$('.vjs-text-color label').textContent, 'COLOR', 'settings dialog label updates on languagechange');
+  assert.equal(player.$('.vjs-text-color select option').textContent, 'WHITE', 'settings dialog select updates on languagechange');
 
   player.dispose();
 });