fix(text-track-settings): localization not correctly applied (#8904)

amtins · web-flow · commit ecef37c1fcc9 · 2024-10-30T09:35:04.000+01:00
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
diff --git 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
@@ -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
@@ -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();
 });

Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ class TextTrackSelect extends Component {`
`68`	`68`	`{`
`69`	`69`	`id: optionId,`
`70`	`70`	`value: this.localize(optionText[0]),`
`71`		`- textContent: optionText[1]`
	`71`	`+ textContent: this.localize(optionText[1])`
`72`	`72`	`}`
`73`	`73`	`);`
`74`	`74`