ravnur-player-public 3.4.3 → 3.4.4

package/src/extensions/cc.js

@@ -0,0 +1,874 @@
+// @flow
+import BaseExtension from './base';
+
+import {
+   createElement,
+   each,
+   find,
+   removeClass,
+   addClass,
+   inRange,
+   findIndex,
+   isEmpty,
+   toArray,
+   hasClass,
+   filter,
+   append
+} from '../utils';
+
+import opener from './helpers/clickOpener';
+import popover from './helpers/popover';
+import openerHeightChecker from './helpers/openerHeightChecker';
+
+import binder from '../helpers/binder';
+
+import BaseController from '../players/base';
+import StateEntity from '../state';
+
+import {
+   CC_COLORS,
+   CC_FONT_FAMILIES,
+   CC_FONT_SIZES,
+   CC_LOCATIONS
+} from '../config/cc';
+
+import {
+   UNAPPROVED_TIMEDATA_STATUS,
+   UNTRANSLATED_TIMEDATA_STATUS,
+   TRANSLATABLE_TIMEDATA_STATUS
+} from '../config/statuses';
+
+import createSvg, { CC, BACK, NEXT } from '../svgs';
+
+import type { Player$ExtensionOptions } from '../types/Options';
+import type { Player$State } from '../types/State';
+import type { CCOption } from '../config/cc';
+import type { Player$Translation } from '../types/Translation';
+import type { Player$TimeDataSource } from '../types/Source';
+
+const CN = 'rmp-ext-cc';
+
+const BUTTON_CN = `${CN}__button`;
+const SELECTOR_CN = `${CN}__selector`;
+const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
+const SELECTOR_MAIN_STEP_CN = `${SELECTOR_CN}--main-step`;
+const SELECTOR_SETTINGS_STEP_CN = `${SELECTOR_CN}--settings-step`;
+const SELECTOR_ADDITIONAL_STEP_CN = `${SELECTOR_CN}--additional-step`;
+const SELECTOR_TRANSLATE_STEP_CN = `${SELECTOR_CN}--translate-step`;
+
+const MAIN_STEP_CN = `${CN}__main-step`;
+const SETTINGS_STEP_CN = `${CN}__settings-step`;
+const ADDITIONAL_STEP_CN = `${CN}__additional-step`;
+
+const ITEM_CN = `${CN}__item`;
+const ITEM_CHECKED_CN = `${ITEM_CN}--checked`;
+
+const SETTINGS_CN = `${CN}__settings`;
+const PROGRESS_SETTINGS_CN = `${SETTINGS_CN}--progress`;
+const MORE_CN = `${CN}__more`;
+const CURRENT_VALUE_CN = `${CN}__current-value`;
+
+const TEXT_CN = `${CN}__text`;
+const TEXT_VISIBLE_CN = `${TEXT_CN}--visible`;
+
+const TEXT_HOLDER_CN = `${CN}__text-holder`;
+
+const BACK_BTN_CN = `${CN}__back`;
+
+const TRANSLATE_WRAPPER_CN = `${CN}__translate-wrapper`;
+const SETTINGS_WRAPPER_CN = `${CN}__settings-wrapper`;
+
+export default class ClosedCaptionsExtension extends BaseExtension {
+   $el: HTMLElement;
+   $button: HTMLButtonElement;
+   $selector: HTMLElement;
+   $text: HTMLElement;
+   $textHolder: HTMLElement;
+   $mainStep: HTMLElement;
+   $embedCaptions: HTMLElement;
+   $settingsStep: HTMLElement;
+   $settings: HTMLElement;
+   $toMain: HTMLElement;
+   $toSettings: HTMLElement;
+   $fontColorSettings: HTMLElement;
+   $backgroundColorSettings: HTMLElement;
+   $fontSizeSettings: HTMLElement;
+   $fontFamilySettings: HTMLElement;
+   $locationSettings: ?HTMLElement = null;
+   $currentColor: HTMLElement;
+   $currentSize: HTMLElement;
+   $currentBgColor: HTMLElement;
+   $currentLocation: HTMLElement;
+   $currentFamily: HTMLElement;
+   $additionalStep: HTMLElement;
+   $additionalBackText: HTMLElement;
+   $additionalStepWrapper: HTMLElement;
+   $translate: ?HTMLElement;
+   $currentCustomTranslate: ?HTMLElement;
+
+   $captions: HTMLElement[] = [];
+   $translatableCaptions: HTMLElement[] = [];
+
+   embedCaptionsAutoShow: boolean = true;
+
+   constructor(
+      player: BaseController,
+      state: StateEntity,
+      options: Player$ExtensionOptions
+   ) {
+      super(player, state, options, ['timeupdate', 'showpopup', 'statechanged']);
+      this.logger.debug('cc:extension:creating');
+      this.render();
+      this.init();
+      this.logger.debug('cc:extension:created');
+   }
+
+   init() {
+      binder(this, [
+         '_toSettingsPage',
+         '_toMainPage',
+         '_toColorPage',
+         '_toBackgroundColorPage',
+         '_toFontFamilyPage',
+         '_toSizesPage',
+         '_toLocationsPage',
+         '_toTranslatePage',
+         '_handleEmbedChanged'
+      ]);
+
+      opener(this, {
+         $button: this.$button,
+         $selector: this.$selector,
+         SELECTOR_OPEN_CN,
+         heightControl: true,
+         firstFocusItemSelector: `.${ITEM_CN}`,
+         toMainFn: this._toMainPage.bind(this)
+      });
+      popover(this, { $button: this.$button, text: this.$t('cc') });
+
+      this.addEvent(this.$settings, 'click', this._toSettingsPage);
+      this.addEvent(this.$toMain, 'click', this._toMainPage);
+      this.addEvent(this.$toSettings, 'click', this._toSettingsPage);
+
+      this.addEvent(this.$fontColorSettings, 'click', this._toColorPage);
+      this.addEvent(
+         this.$backgroundColorSettings,
+         'click',
+         this._toBackgroundColorPage
+      );
+      this.addEvent(this.$fontFamilySettings, 'click', this._toFontFamilyPage);
+      this.addEvent(this.$fontSizeSettings, 'click', this._toSizesPage);
+
+      if (this.$locationSettings) {
+         this.addEvent(this.$locationSettings, 'click', this._toLocationsPage);
+      }
+
+      if (this.$translate) {
+         this.addEvent(this.$translate, 'click', this._toTranslatePage);
+      }
+
+      this.player.$el?.textTracks.addEventListener('addtrack', this._handleEmbedChanged);
+      this.player.$el?.textTracks.addEventListener('change', this._handleEmbedChanged);
+
+      this._toMainPage();
+      this._refresh();
+
+      this.changeLang(this.state.getCCLang());
+   }
+
+   render() {
+      this.$el = createElement('div', { class: CN });
+
+      this.$button = createElement(
+         'button',
+         { type: 'button', class: BUTTON_CN },
+         this.$el
+      );
+
+      this.$selector = createElement('div', { class: SELECTOR_CN }, this.$el);
+      this.$text = createElement('span', { class: TEXT_CN });
+      this.$textHolder = createElement(
+         'span',
+         { class: TEXT_HOLDER_CN },
+         this.$text
+      );
+
+      this._renderMainPage();
+      this._renderSettingsPage();
+      this._renderAdditionalPage();
+   }
+
+   _handleEmbedChanged() {
+      const textTracks = this.player.getTextTracks();
+      const sources = this.state.getCCSources();
+
+      this.$el.style.display = !sources.length && !textTracks?.length ? 'none' : 'block';
+
+      const addOffButton = () => {
+         const offItem = createElement(
+            'button',
+            { type: 'button', class: ITEM_CN },
+            this.$embedCaptions
+         );
+
+         offItem.textContent = 'None';
+         this.addEvent(offItem, 'click', () => {
+            each(textTracks, (track) => {
+               each(this.$captions, (el) => removeClass(el, ITEM_CHECKED_CN));
+               track.mode = 'disabled';
+               addClass(offItem, ITEM_CHECKED_CN);
+            });
+         });
+         this.$captions.push(offItem);
+      };
+
+      if (!sources.length) {
+         this.$settings.style.display = 'none';
+         const offItem = this.$embedCaptions.childNodes[0];
+         if (!offItem || offItem?.textContent !== 'None') {
+            addOffButton();
+         }
+      } else {
+         this.$settings.style.display = 'block';
+      }
+
+      if (!textTracks?.length) {
+         return;
+      }
+
+      each(textTracks, (track) => {
+         const alreadyExist = find(this.$captions, (el) => el.textContent === track.label);
+
+         if (alreadyExist) {
+            return;
+         }
+
+         const item = createElement(
+            'button',
+            { type: 'button', class: ITEM_CN },
+            this.$embedCaptions
+         );
+
+         item.textContent = track.label;
+         this.addEvent(item, 'click', () => {
+            each(this.$captions, (el) => removeClass(el, ITEM_CHECKED_CN));
+            each(this.$translatableCaptions, (el) => removeClass(el, ITEM_CHECKED_CN));
+            const idx = this.$captions.findIndex((el) => el === item);
+            addClass(this.$captions[idx], ITEM_CHECKED_CN);
+            track.mode = 'showing';
+         });
+
+         this.$captions.push(item);
+
+         if (this.embedCaptionsAutoShow) {
+            item.click();
+            this.embedCaptionsAutoShow = false;
+         }
+      });
+   }
+
+   _renderMainPage() {
+      this.$mainStep = createElement(
+         'div',
+         { class: MAIN_STEP_CN, tabindex: -1 },
+         this.$selector
+      );
+
+      createSvg(this.$button, CC);
+
+      const sources = this.state.getCCSources();
+
+      this.$el.style.display = sources.length ? 'block' : 'none';
+
+      const alreadyTranslatedSources = filter(
+         sources,
+         (s) =>
+            s.state !== UNTRANSLATED_TIMEDATA_STATUS &&
+            s.state !== TRANSLATABLE_TIMEDATA_STATUS
+      );
+
+      each(alreadyTranslatedSources, (data) => {
+         const item = createElement(
+            'button',
+            { type: 'button', class: ITEM_CN },
+            this.$mainStep
+         );
+
+         item.textContent =
+            data.state === UNAPPROVED_TIMEDATA_STATUS
+               ? `${data.label} ${this.$t('unapproved-source')}`
+               : data.label;
+         this.addEvent(item, 'click', () => this.bus.emit('cclang', data.srclang));
+         this.$captions.push(item);
+      });
+
+      // Create empty container for embed captions (order is important)
+      this.$embedCaptions = createElement(
+         'div',
+         {},
+         this.$mainStep
+      );
+
+      const $translate = createElement(
+         'button',
+         { type: 'button', class: SETTINGS_CN },
+         this.$mainStep
+      );
+      this.$translate = $translate;
+      let text = createElement('span', {}, $translate);
+      text.textContent = this.$t('translate');
+      _createMore($translate);
+
+      this.$currentCustomTranslate = createElement(
+         'span',
+         { class: CURRENT_VALUE_CN },
+         this.$translate
+      );
+      const haveUntranslatedSources =
+         alreadyTranslatedSources.length !== sources.length;
+      $translate.style.display = haveUntranslatedSources ? 'block' : 'none';
+
+      this.$settings = createElement(
+         'button',
+         { type: 'button', class: SETTINGS_CN },
+         this.$mainStep
+      );
+      text = createElement('span', {}, this.$settings);
+      text.textContent = this.$t('settings');
+      _createMore(this.$settings);
+   }
+
+   _rerenderLanguages(sources: Player$TimeDataSource[]) {
+      const { $mainStep, $translate, $settings } = this;
+      this.$el.style.display = sources.length ? 'block' : 'none';
+
+      if (!$mainStep) {
+         return;
+      }
+
+      each(this.$captions, (e) => {
+         $mainStep.removeChild(e);
+      });
+      this.$captions.length = 0;
+
+      const alreadyTranslatedSources = filter(
+         sources,
+         (s) =>
+            s.state !== UNTRANSLATED_TIMEDATA_STATUS &&
+            s.state !== TRANSLATABLE_TIMEDATA_STATUS
+      );
+
+      each(alreadyTranslatedSources, (data) => {
+         const item = createElement(
+            'button',
+            { type: 'button', class: ITEM_CN },
+            this.$mainStep
+         );
+
+         item.textContent =
+            data.state === UNAPPROVED_TIMEDATA_STATUS
+               ? `${data.label} ${this.$t('unapproved-source')}`
+               : data.label;
+         this.addEvent(item, 'click', () => this.bus.emit('cclang', data.srclang));
+         this.$captions.push(item);
+      });
+
+      if ($translate) {
+         $mainStep.removeChild($translate);
+         const haveUtranslatedSources =
+            alreadyTranslatedSources.length !== sources.length;
+         $translate.style.display = haveUtranslatedSources ? 'block' : 'none';
+         append($mainStep, $translate);
+      }
+
+      if ($settings) {
+         $mainStep.removeChild($settings);
+         append($mainStep, $settings);
+      }
+   }
+
+   _renderSettingsPage() {
+      this.$settingsStep = createElement(
+         'div',
+         { class: SETTINGS_STEP_CN },
+         this.$selector
+      );
+
+      this.$toMain = createElement(
+         'button',
+         { type: 'button', class: BACK_BTN_CN },
+         this.$settingsStep
+      );
+
+      const $backSpan = createElement('span', { class: 'arrow' }, this.$toMain);
+      createSvg($backSpan, BACK, { class: 'arrow' });
+
+      const $backText = createElement('span', {}, this.$toMain);
+      $backText.textContent = this.$t('cc');
+
+      const $settingsWrapper = createElement(
+         'div',
+         { class: `${SETTINGS_WRAPPER_CN} tab-content` },
+         this.$settingsStep
+      );
+
+      this.$fontColorSettings = createElement(
+         'button',
+         { type: 'button' },
+         $settingsWrapper
+      );
+      let text = createElement('span', {}, this.$fontColorSettings);
+      text.textContent = this.$t('settings-fontcolor');
+      _createMore(this.$fontColorSettings);
+      this.$currentColor = createElement(
+         'span',
+         { class: CURRENT_VALUE_CN },
+         this.$fontColorSettings
+      );
+      let color = find(CC_COLORS, (c) => c.value === this.state.getCCTextColor());
+      this.$currentColor.textContent =
+         color && color.key ? this.$t(color.key) : '';
+
+      this.$fontSizeSettings = createElement(
+         'button',
+         { type: 'button' },
+         $settingsWrapper
+      );
+      text = createElement('span', {}, this.$fontSizeSettings);
+      text.textContent = this.$t('settings-fontsize');
+      _createMore(this.$fontSizeSettings);
+      this.$currentSize = createElement(
+         'span',
+         { class: CURRENT_VALUE_CN },
+         this.$fontSizeSettings
+      );
+      this.$currentSize.textContent = this.state.getCCFontSize();
+
+      this.$fontFamilySettings = createElement(
+         'button',
+         { type: 'button' },
+         $settingsWrapper
+      );
+      text = createElement('span', {}, this.$fontFamilySettings);
+      text.textContent = this.$t('settings-fontfamily');
+      _createMore(this.$fontFamilySettings);
+      this.$currentFamily = createElement(
+         'span',
+         { class: CURRENT_VALUE_CN },
+         this.$fontFamilySettings
+      );
+      const family = find(
+         CC_FONT_FAMILIES,
+         (c) => c.value === this.state.getCCFontFamily()
+      );
+      this.$currentFamily.textContent =
+         family && family.key ? this.$t(family.key) : '';
+
+      this.$backgroundColorSettings = createElement(
+         'button',
+         { type: 'button' },
+         $settingsWrapper
+      );
+      text = createElement('span', {}, this.$backgroundColorSettings);
+      text.textContent = this.$t('settings-background');
+      _createMore(this.$backgroundColorSettings);
+      this.$currentBgColor = createElement(
+         'span',
+         { class: CURRENT_VALUE_CN },
+         this.$backgroundColorSettings
+      );
+      color = find(CC_COLORS, (c) => c.value === this.state.getCCBgColor());
+      this.$currentBgColor.textContent =
+         color && color.key ? this.$t(color.key) : '';
+
+      if (this.options.showCCLayout) {
+         const $locationSettings = createElement(
+            'button',
+            { type: 'button' },
+            $settingsWrapper
+         );
+         this.$locationSettings = $locationSettings;
+         text = createElement('span', {}, $locationSettings);
+         text.textContent = this.$t('settings-captionlocations');
+         _createMore($locationSettings);
+         this.$currentLocation = createElement(
+            'span',
+            { class: CURRENT_VALUE_CN },
+            this.$locationSettings
+         );
+         const location = find(
+            CC_LOCATIONS,
+            (c) => c.value === this.state.getCCLocation()
+         );
+         this.$currentLocation.textContent =
+            location && location.key ? this.$t(location.key) : '';
+      }
+
+      const $translateWrapper = createElement(
+         'div',
+         { class: `${TRANSLATE_WRAPPER_CN} tab-content` },
+         this.$settingsStep
+      );
+
+      const translatableSources = filter(
+         this.state.getCCSources(),
+         (s) =>
+            s.state === UNTRANSLATED_TIMEDATA_STATUS ||
+            s.state === TRANSLATABLE_TIMEDATA_STATUS
+      );
+
+      each(translatableSources, (data) => {
+         const item = createElement(
+            'button',
+            { type: 'button', class: ITEM_CN },
+            $translateWrapper
+         );
+         item.textContent = data.label;
+         this.addEvent(item, 'click', () => {
+            this.bus.emit('cclang', data.srclang);
+            this._toMainPage();
+         });
+         this.$translatableCaptions.push(item);
+      });
+   }
+
+   _renderAdditionalPage() {
+      this.$additionalStep = createElement(
+         'div',
+         { class: ADDITIONAL_STEP_CN },
+         this.$selector
+      );
+      this.$toSettings = createElement(
+         'button',
+         { type: 'button', class: BACK_BTN_CN },
+         this.$additionalStep
+      );
+      const $backSpan = createElement(
+         'span',
+         { class: 'arrow' },
+         this.$toSettings
+      );
+      createSvg($backSpan, BACK, { class: 'arrow' });
+      this.$additionalBackText = createElement('span', {}, this.$toSettings);
+      this.$additionalStepWrapper = createElement(
+         'div',
+         { class: 'tab-content' },
+         this.$additionalStep
+      );
+   }
+
+   onStatechanged(state: Player$State, old: Player$State) {
+      if (state.cc.sources !== old.cc.sources) {
+         this._rerenderLanguages(state.cc.sources);
+         this.changeLang(state.cc.lang);
+      } else if (state.cc.lang !== old.cc.lang) {
+         this.changeLang(state.cc.lang);
+      } else if (state.cc.timedata !== old.cc.timedata) {
+         this.onLoadingTimedata();
+      } else if (
+         state.cc.location !== old.cc.location ||
+         state.cc.fontFamily !== old.cc.fontFamily ||
+         state.cc.fontSize !== old.cc.fontSize ||
+         state.cc.bgcolor !== old.cc.bgcolor ||
+         state.cc.color !== old.cc.color
+      ) {
+         this._refresh();
+      }
+   }
+
+   onLoadingTimedata() {
+      const cc = this.state.getSelectedCC();
+      const { $currentCustomTranslate, $translate } = this;
+      if ($currentCustomTranslate && $translate) {
+         removeClass($translate, PROGRESS_SETTINGS_CN);
+         $currentCustomTranslate.textContent = '';
+         if (cc && !cc.state) {
+            $currentCustomTranslate.textContent = cc.label;
+         }
+      }
+      this.onTimeupdate();
+   }
+
+   changeLang(lang: ?string) {
+      each(this.$captions, (el) => removeClass(el, ITEM_CHECKED_CN));
+      each(this.$translatableCaptions, (el) => removeClass(el, ITEM_CHECKED_CN));
+
+      const textTracks = this.player.getTextTracks();
+
+      if (textTracks?.length) {
+         each(textTracks, (track) => {
+            track.mode = 'disabled';
+         });
+      }
+
+      const sources = this.state.getCCSources();
+      const alreadyTranslatedSources = filter(
+         sources,
+         (s) =>
+            s.state !== UNTRANSLATED_TIMEDATA_STATUS &&
+            s.state !== TRANSLATABLE_TIMEDATA_STATUS
+      );
+
+      const { $currentCustomTranslate, $translate } = this;
+      if ($currentCustomTranslate) {
+         $currentCustomTranslate.textContent = '';
+      }
+
+      let idx = findIndex(alreadyTranslatedSources, (d) => d.srclang === lang);
+
+      if (idx === -1) {
+         const translatableSources = filter(sources, (s) => !s.state);
+         idx = findIndex(translatableSources, (d) => d.srclang === lang);
+         if (this.$translatableCaptions[idx]) {
+            addClass(this.$translatableCaptions[idx], ITEM_CHECKED_CN);
+         }
+         if ($currentCustomTranslate && translatableSources[idx]) {
+            $currentCustomTranslate.textContent = this.$t('translating');
+         }
+         if ($translate) {
+            addClass($translate, PROGRESS_SETTINGS_CN);
+         }
+      } else {
+         if (this.$captions[idx]) {
+            addClass(this.$captions[idx], ITEM_CHECKED_CN);
+         }
+         if (!lang) {
+            removeClass(this.$text, TEXT_VISIBLE_CN);
+         }
+      }
+   }
+
+   onTimeupdate() {
+      const lang = this.state.getCCLang();
+      const timedata = this.state.getCCTimeData();
+      if (!lang) {
+         return;
+      }
+
+      if (isEmpty(timedata)) {
+         removeClass(this.$text, TEXT_VISIBLE_CN);
+         return;
+      }
+
+      const ct = this.player.getCurrentTime();
+      const item = find(timedata, ({ from, to }) => inRange(ct, from, to));
+
+      if (item) {
+         this.$textHolder.innerHTML = item.text.split('\n').join('<br>');
+         addClass(this.$text, TEXT_VISIBLE_CN);
+      } else {
+         removeClass(this.$text, TEXT_VISIBLE_CN);
+      }
+   }
+
+   onShowpopup($selector: ?HTMLElement) {
+      if ($selector === this.$selector) {
+         if (hasClass(this.$selector, SELECTOR_MAIN_STEP_CN)) {
+            openerHeightChecker(this.player, this.$mainStep);
+         } else if (hasClass(this.$selector, SELECTOR_SETTINGS_STEP_CN)) {
+            openerHeightChecker(this.player, this.$settingsStep);
+         } else if (hasClass(this.$selector, SELECTOR_ADDITIONAL_STEP_CN)) {
+            openerHeightChecker(this.player, this.$additionalStep);
+         }
+      }
+   }
+
+   _toMainPage() {
+      addClass(this.$selector, SELECTOR_MAIN_STEP_CN);
+      removeClass(this.$selector, SELECTOR_SETTINGS_STEP_CN);
+      removeClass(this.$selector, SELECTOR_ADDITIONAL_STEP_CN);
+      removeClass(this.$selector, SELECTOR_TRANSLATE_STEP_CN);
+
+      openerHeightChecker(this.player, this.$mainStep);
+
+      // Accessability: Focus on first item of main page
+      const mainStepItems = document.querySelectorAll(`.${MAIN_STEP_CN} > .${ITEM_CN}`);
+      if (mainStepItems[0]) mainStepItems[0].focus();
+   }
+
+   _toSettingsPage() {
+      addClass(this.$selector, SELECTOR_SETTINGS_STEP_CN);
+      removeClass(this.$selector, SELECTOR_MAIN_STEP_CN);
+      removeClass(this.$selector, SELECTOR_ADDITIONAL_STEP_CN);
+      removeClass(this.$selector, SELECTOR_TRANSLATE_STEP_CN);
+
+      openerHeightChecker(this.player, this.$settingsStep);
+
+      // Accessability: Focus on first item of settings page
+      const backBtn = document.querySelector(`.${BACK_BTN_CN}`);
+      backBtn.focus();
+   }
+
+   _toAdditionalPage() {
+      addClass(this.$selector, SELECTOR_ADDITIONAL_STEP_CN);
+      removeClass(this.$selector, SELECTOR_SETTINGS_STEP_CN);
+      removeClass(this.$selector, SELECTOR_MAIN_STEP_CN);
+      removeClass(this.$selector, SELECTOR_TRANSLATE_STEP_CN);
+
+      const items = toArray(this.$additionalStepWrapper.childNodes);
+      each(items, (btn) => this.$additionalStepWrapper.removeChild(btn));
+
+      openerHeightChecker(this.player, this.$additionalStep);
+   }
+
+   _toTranslatePage() {
+      if (this.state.isTranslatingCC()) {
+         return;
+      }
+
+      addClass(this.$selector, SELECTOR_TRANSLATE_STEP_CN);
+      removeClass(this.$selector, SELECTOR_SETTINGS_STEP_CN);
+      removeClass(this.$selector, SELECTOR_MAIN_STEP_CN);
+      removeClass(this.$selector, SELECTOR_ADDITIONAL_STEP_CN);
+
+      openerHeightChecker(this.player, this.$settingsStep);
+
+      // Accessability: Focus on first item of translate page
+      const backBtn = document.querySelector(`.${BACK_BTN_CN}`);
+      backBtn.focus();
+   }
+
+   _prepareAdditionalPage(
+      tkey: $Keys<Player$Translation>,
+      fnc: $Keys<StateEntity>,
+      event: string,
+      options: CCOption<any>[]
+   ) {
+      this._toAdditionalPage();
+      this.$additionalBackText.textContent = this.$t(tkey);
+      // Accessability: Focus on additional menu back button
+      this.$toSettings.focus();
+      const buttons = [];
+
+      // $FlowFixMe
+      const value = this.state[fnc]();
+
+      each(options, (c) => {
+         const button = createElement(
+            'button',
+            { type: 'button', class: ITEM_CN },
+            this.$additionalStepWrapper
+         );
+         const key = c.key;
+         button.textContent = key ? this.$t(key) : c.label;
+
+         if (value === c.value) {
+            addClass(button, ITEM_CHECKED_CN);
+         }
+
+         this.addEvent(button, 'click', () => {
+            each(buttons, (b) => removeClass(b, ITEM_CHECKED_CN));
+            addClass(button, ITEM_CHECKED_CN);
+            this.bus.emit(event, c.value);
+            this._toSettingsPage();
+         });
+         buttons.push(button);
+      });
+   }
+
+   _toColorPage() {
+      this._prepareAdditionalPage(
+         'settings-fontcolor',
+         'getCCTextColor',
+         'cccolor',
+         CC_COLORS
+      );
+   }
+
+   _toBackgroundColorPage() {
+      this._prepareAdditionalPage(
+         'settings-background',
+         'getCCBgColor',
+         'ccbgcolor',
+         CC_COLORS
+      );
+   }
+
+   _toSizesPage() {
+      this._prepareAdditionalPage(
+         'settings-fontsize',
+         'getCCFontSize',
+         'ccfontsize',
+         CC_FONT_SIZES
+      );
+   }
+
+   _toFontFamilyPage() {
+      this._prepareAdditionalPage(
+         'settings-fontfamily',
+         'getCCFontFamily',
+         'ccfontfamily',
+         CC_FONT_FAMILIES
+      );
+   }
+
+   _toLocationsPage() {
+      this._prepareAdditionalPage(
+         'settings-captionlocations',
+         'getCCLocation',
+         'cclocation',
+         CC_LOCATIONS
+      );
+   }
+
+   _detectLabel(options: CCOption<any>[], value: string): string {
+      const option = find(options, (c) => c.value === value);
+      if (!option) {
+         return '';
+      }
+      const key = option.key;
+      return key ? this.$t(key) : option.label || '';
+   }
+
+   _refresh() {
+      const color = this.state.getCCTextColor();
+      const bgcolor = this.state.getCCBgColor();
+      const fontSize = this.state.getCCFontSize();
+      const fontFamily = this.state.getCCFontFamily();
+
+      this.$textHolder.style.color = color;
+      this.$textHolder.style.backgroundColor = bgcolor;
+      this.$textHolder.style.fontSize = fontSize;
+      this.$textHolder.style.fontFamily = fontFamily;
+
+      this.$currentColor.textContent = this._detectLabel(CC_COLORS, color);
+      this.$currentBgColor.textContent = this._detectLabel(CC_COLORS, bgcolor);
+      this.$currentSize.textContent = this._detectLabel(CC_FONT_SIZES, fontSize);
+      this.$currentFamily.textContent = this._detectLabel(
+         CC_FONT_FAMILIES,
+         fontFamily
+      );
+      if (this.$currentLocation) {
+         this.$currentLocation.textContent = this._detectLabel(
+            CC_LOCATIONS,
+            this.state.getCCLocation()
+         );
+      }
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   getOuter() {
+      return this.$text;
+   }
+
+   destroy() {
+      super.destroy();
+      if (this.$el.parentNode) {
+         this.$el.parentNode.removeChild(this.$el);
+      }
+      if (this.$text.parentNode) {
+         this.$text.parentNode.removeChild(this.$text);
+      }
+   }
+}
+
+function _createMore($parent: HTMLElement) {
+   addClass($parent, MORE_CN);
+   const span = createElement('span', { class: 'arrow' }, $parent);
+   createSvg(span, NEXT);
+
+   return span;
+}