ravnur-player-public 3.4.4 → 3.4.6

package/src/extensions/cc.js

@@ -1,874 +0,0 @@
-// @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;
-}