fix: Ensure additional components update on languagechange (#8175)

src/js/control-bar/skip-buttons/skip-backward.js

@@ -60,6 +60,13 @@ class SkipBackward extends Button {
     }
     this.player_.currentTime(newTime);
   }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.controlText(this.localize('Skip backward {1} seconds', [this.skipTime]));
+  }
 }
 
 SkipBackward.prototype.controlText_ = 'Skip Backward';

src/js/control-bar/skip-buttons/skip-forward.js

@@ -59,6 +59,13 @@ class SkipForward extends Button {
 
     this.player_.currentTime(newTime);
   }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.controlText(this.localize('Skip forward {1} seconds', [this.skipTime]));
+  }
 }
 
 Component.registerComponent('SkipForward', SkipForward);

src/js/control-bar/text-track-controls/caption-settings-menu-item.js

@@ -58,6 +58,15 @@ class CaptionSettingsMenuItem extends TextTrackMenuItem {
   handleClick(event) {
     this.player().getChild('textTrackSettings').open();
   }
+
+  /**
+   * Update control text and label on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.kind + ' settings');
+
+    super.handleLanguagechange();
+  }
 }
 
 Component.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);

src/js/control-bar/text-track-controls/off-text-track-menu-item.js

@@ -102,6 +102,15 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
     }
   }
 
+  /**
+   * Update control text and label on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-menu-item-text').textContent = this.player_.localize(this.options_.label);
+
+    super.handleLanguagechange();
+  }
+
 }
 
 Component.registerComponent('OffTextTrackMenuItem', OffTextTrackMenuItem);

src/js/loading-spinner.js

@@ -34,6 +34,15 @@ class LoadingSpinner extends Component {
 
     return el;
   }
+
+  /**
+   * Update control text on languagechange
+   */
+  handleLanguagechange() {
+    this.$('.vjs-control-text').textContent = this.localize('{1} is loading.', [
+      this.player_.isAudio() ? 'Audio Player' : 'Video Player'
+    ]);
+  }
 }
 
 Component.registerComponent('LoadingSpinner', LoadingSpinner);

src/js/tracks/text-track-settings.js

@@ -610,6 +610,13 @@ class TextTrackSettings extends ModalDialog {
     }
   }
 
+  /**
+   * Repopulate dialog with new localizations on languagechange
+   */
+  handleLanguagechange() {
+    this.fill();
+  }
+
 }
 
 Component.registerComponent('TextTrackSettings', TextTrackSettings);

test/unit/control-bar/skip-buttons/skip-backward-button.test.js

@@ -2,6 +2,7 @@
 import TestHelpers from '../../test-helpers';
 import sinon from 'sinon';
 import { createTimeRange } from '../../../../src/js/utils/time';
+import videojs from '../../../../src/js/video.js';
 
 QUnit.module('SkipBackwardButton');
 
@@ -96,3 +97,15 @@ QUnit.test('skip backward in video by configured skip backward time amount', fun
 
   player.dispose();
 });
+
+QUnit.test('localizes on languagechange', function(assert) {
+  const player = TestHelpers.makePlayer({controlBar: {skipButtons: {backward: 30}}});
+  const button = player.controlBar.skipBackward;
+
+  videojs.addLanguage('test', {'Skip backward {1} seconds': '{1} BACKWARD'});
+  player.language('test');
+
+  assert.equal(button.$('.vjs-control-text').textContent, '30 BACKWARD', 'control text updates on languagechange');
+
+  player.dispose();
+});

test/unit/control-bar/skip-buttons/skip-forward-button.test.js

@@ -2,6 +2,7 @@
 import TestHelpers from '../../test-helpers';
 import sinon from 'sinon';
 import { createTimeRange } from '../../../../src/js/utils/time';
+import videojs from '../../../../src/js/video.js';
 
 QUnit.module('SkipForwardButton');
 
@@ -115,3 +116,15 @@ QUnit.test('skips forward in video by configured skip forward time amount', func
 
   player.dispose();
 });
+
+QUnit.test('localizes on languagechange', function(assert) {
+  const player = TestHelpers.makePlayer({controlBar: {skipButtons: {forward: 30}}});
+  const button = player.controlBar.skipForward;
+
+  videojs.addLanguage('test', {'Skip forward {1} seconds': '{1} FORWARD'});
+  player.language('test');
+
+  assert.equal(button.$('.vjs-control-text').textContent, '30 FORWARD', 'control text updates on languagechange');
+
+  player.dispose();
+});

test/unit/control-bar/text-track-controls/text-track-menu-item.test.js

@@ -1,6 +1,9 @@
 /* eslint-env qunit */
 import TextTrackMenuItem from '../../../../src/js/control-bar/text-track-controls/text-track-menu-item.js';
+import OffTextTrackMenuItem from '../../../../src/js/control-bar/text-track-controls/off-text-track-menu-item.js';
+import CaptionSettingsMenuItem from '../../../../src/js/control-bar/text-track-controls/caption-settings-menu-item.js';
 import TestHelpers from '../../test-helpers.js';
+import videojs from '../../../../src/js/video.js';
 
 QUnit.module('TextTrackMenuItem', {
   beforeEach(assert) {
@@ -84,3 +87,18 @@ QUnit.test('clicking should disable non-selected tracks of the relevant kind(s)'
   barItem.dispose();
   bipItem.dispose();
 });
+
+QUnit.test('should localize meu items on languagechage', function(assert) {
+  const OffItem = new OffTextTrackMenuItem(this.player, {kind: 'subtitles'});
+  const SettingsItem = new CaptionSettingsMenuItem(this.player, {kind: 'subtitles'});
+
+  videojs.addLanguage('test', {
+    'subtitles off': 'SUBSOFF',
+    'subtitles settings': 'SUBSSETTINGS'
+  });
+
+  this.player.language('test');
+
+  assert.equal(OffItem.$('.vjs-menu-item-text').textContent, 'SUBSOFF', 'subtitles settings text updates');
+  assert.equal(SettingsItem.$('.vjs-menu-item-text').textContent, 'SUBSSETTINGS', 'subtitles settings text updates');
+});

test/unit/loading-spinner.test.js

@@ -0,0 +1,16 @@
+/* eslint-env qunit */
+import LoadingSpinner from '../../src/js/loading-spinner.js';
+import TestHelpers from './test-helpers.js';
+import videojs from '../../src/js/video.js';
+
+QUnit.module('Loading Spinner', {});
+
+QUnit.test('should localize on languagechange', function(assert) {
+  const player = TestHelpers.makePlayer({});
+  const spinner = new LoadingSpinner(player);
+
+  videojs.addLanguage('test', {'{1} is loading.': '{1} LOADING'});
+  player.language('test');
+
+  assert.equal(spinner.$('.vjs-control-text').textContent, 'Video Player LOADING', 'loading spinner text is localized');
+});

test/unit/tracks/text-track-settings.test.js

@@ -6,6 +6,7 @@ import safeParseTuple from 'safe-json-parse/tuple';
 import sinon from 'sinon';
 import window from 'global/window';
 import Component from '../../../src/js/component.js';
+import videojs from '../../../src/js/video.js';
 
 const tracks = [{
   kind: 'captions',
@@ -369,3 +370,16 @@ QUnit.test('should not restore saved settings', function(assert) {
 
   player.dispose();
 });
+
+QUnit.test('should update on languagechange', function(assert) {
+  const player = TestHelpers.makePlayer({
+    tracks
+  });
+
+  videojs.addLanguage('test', {'Font Size': 'FONTSIZE'});
+  player.language('test');
+
+  assert.equal(player.$('.vjs-font-percent legend').textContent, 'FONTSIZE', 'settings dialog updates on languagechange');
+
+  player.dispose();
+});