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();
});