ravnur-player-public 3.4.4 → 3.4.5

package/src/extensions/toc.js

@@ -1,334 +0,0 @@
-// @flow
-
-import BaseExtension from './base';
-
-import { createElement, each, findIndex, addClass, removeClass, filter } from '../utils';
-// find,
-
-import opener from './helpers/clickOpener';
-import openerHeightChecker from './helpers/openerHeightChecker';
-// import loadVTT from './helpers/vtt-loader';
-import popover from './helpers/popover';
-import createSvg, { TOC, NEXT, BACK } from '../svgs';
-
-import binder from '../helpers/binder';
-
-import BaseController from '../players/base';
-import StateEntity from '../state';
-
-import { UNAPPROVED_TIMEDATA_STATUS } from '../config/statuses';
-
-import type { Player$ExtensionOptions } from '../types/Options';
-import type { Player$State } from '../types/State';
-
-const CN = 'rmp-ext-toc';
-
-const BUTTON_CN = `${CN}__button`;
-const SELECTOR_CN = `${CN}__selector`;
-const SELECTOR_MAIN_STEP_CN = `${SELECTOR_CN}--main-step`;
-const SELECTOR_LANGUAGES_STEP_CN = `${SELECTOR_CN}--languages-step`;
-const SELECTOR_TRANSLATE_STEP_CN = `${SELECTOR_CN}--translate-step`;
-const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
-
-const LANGUAGES_STEP_CN = `${CN}__languages-step`;
-const MORE_CN = `${CN}__more`;
-const BACK_BTN_CN = `${CN}__back`;
-
-const MAIN_STEP_CN = `${CN}__main-step`;
-const LANGUAGE_BTN_CN = `${CN}__languge-btn`;
-const CHAPTERS_CN = `${CN}__chapters`;
-const ITEM_CN = `${CN}__item`;
-const LANG_ITEM_CN = `${CN}__lang-item`;
-const LANG_ITEM_CHECKED_CN = `${LANG_ITEM_CN}--checked`;
-
-const TRANSLATE_STEP_CN = `${CN}__translate-step`;
-
-const CURRENT_VALUE_CN = `${CN}__current-value`;
-
-export default class TOCExtension extends BaseExtension {
-   $el: HTMLElement
-   $button: HTMLElement
-   $selector: HTMLElement
-   $mainStep: HTMLElement
-   $languagesStep: HTMLElement
-   $chaptersWrapper: HTMLElement
-   $moreLanguages: HTMLElement
-   $currentLanguage: HTMLElement
-   $toMain: HTMLElement
-
-   $translateStep: HTMLElement
-   $toLanguages: HTMLElement
-
-   $translate: ?HTMLElement
-   $currentCustomTranslate: ?HTMLElement
-
-   $languages: HTMLElement[] = []
-   $translatableLanguages: HTMLElement[] = []
-   $items: HTMLElement[] = [];
-
-   constructor(player: BaseController, state: StateEntity, options: Player$ExtensionOptions) {
-      super(player, state, options, ['statechanged']);
-      this.logger.debug('toc:extension:creating');
-
-      binder(this, ['_toMainPage', '_toLanguagesPage', '_toTranslatePage']);
-
-      this.render();
-      this.init();
-      this.changeLang(this.state.getTOCLang());
-
-      this.logger.debug('toc:extension:created');
-   }
-
-   init() {
-      const { $button, $selector } = this;
-      opener(this, {
-         $button,
-         $selector,
-         SELECTOR_OPEN_CN,
-         heightControl: true,
-         firstFocusItemSelector: 'button',
-         toMainFn: this._toMainPage.bind(this)
-      });
-
-      popover(this, { $button, text: this.$t('chapters') });
-
-      this.addEvent(this.$moreLanguages, 'click', this._toLanguagesPage);
-      this.addEvent(this.$toMain, 'click', this._toMainPage);
-      this.addEvent(this.$toLanguages, 'click', this._toLanguagesPage);
-
-      this._toMainPage();
-   }
-
-   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);
-
-      createSvg(this.$button, TOC);
-
-      this.$mainStep = createElement('div', { class: MAIN_STEP_CN, tabindex: -1 }, this.$selector);
-      this.$languagesStep = createElement('div', { class: LANGUAGES_STEP_CN }, this.$selector);
-
-      // main step
-      this.$chaptersWrapper = createElement('div', { class: `${CHAPTERS_CN} tab-content` }, this.$mainStep);
-      this.$moreLanguages = createElement('button', { type: 'button', class: LANGUAGE_BTN_CN }, this.$mainStep);
-      const text = createElement('span', { }, this.$moreLanguages);
-      text.textContent = this.$t('language');
-      _createMore(this.$moreLanguages);
-      this.$currentLanguage = createElement('span', { class: CURRENT_VALUE_CN }, this.$moreLanguages);
-
-      // languages step
-      this.$toMain = createElement('button', { type: 'button', class: BACK_BTN_CN }, this.$languagesStep);
-      let $backSpan = createElement('span', { class: 'arrow' }, this.$toMain);
-      createSvg($backSpan, BACK, {class: 'arrow'});
-      let $backText = createElement('span', {}, this.$toMain);
-      $backText.textContent = this.$t('chapters');
-
-      // translate step
-      this.$translateStep = createElement('div', { class: TRANSLATE_STEP_CN }, this.$selector);
-      this.$toLanguages = createElement('button', { type: 'button', class: BACK_BTN_CN }, this.$translateStep);
-      $backSpan = createElement('span', { class: 'arrow' }, this.$toLanguages);
-      createSvg($backSpan, BACK, {class: 'arrow'});
-      $backText = createElement('span', {}, this.$toLanguages);
-      $backText.textContent = this.$t('language');
-
-      this.fillLanguages();
-   }
-
-   fillLanguages() {
-      each(this.$languages, el => {
-         if (this.$languagesStep) {
-            this.$languagesStep.removeChild(el);
-         }
-      });
-      each(this.$translatableLanguages, el => {
-         if (this.$languagesStep) {
-            this.$languagesStep.removeChild(el);
-         }
-      });
-
-      if (this.$translate) {
-         this.$languagesStep.removeChild(this.$translate);
-      }
-
-      this.$languages = [];
-      this.$translatableLanguages = [];
-
-      const sources = this.state.getTOCSources();
-      const alreadyTranslatedSources = filter(sources, s => !!s.state);
-      this.$el.style.display = sources.length ? 'block' : 'none';
-
-      each(alreadyTranslatedSources, data => {
-         const item = createElement('button', { type: 'button', class: LANG_ITEM_CN }, this.$languagesStep);
-
-         item.textContent = data.state === UNAPPROVED_TIMEDATA_STATUS
-            ? `${data.label} ${this.$t('unapproved-source')}`
-            : data.label;
-
-         this.addEvent(item, 'click', () => {
-            this._toMainPage();
-            this.bus.emit('toclang', data.srclang);
-         });
-         this.$languages.push(item);
-      });
-
-      if (alreadyTranslatedSources.length !== sources.length) {
-         const $translate = createElement('button', { type: 'button', class: CHAPTERS_CN }, this.$languagesStep);
-         this.$translate = $translate;
-         const text = createElement('span', { }, $translate);
-         text.textContent = this.$t('translate');
-         _createMore($translate);
-
-         this.$currentCustomTranslate = createElement('span', { class: CURRENT_VALUE_CN }, this.$translate);
-         this.addEvent($translate, 'click', this._toTranslatePage);
-      }
-
-      each(filter(sources, s => !s.state), data => {
-         const item = createElement('button', { type: 'button', class: LANG_ITEM_CN }, this.$translateStep);
-         item.textContent = data.label;
-         this.addEvent(item, 'click', () => {
-            this._toMainPage();
-            this.bus.emit('toclang', data.srclang);
-         });
-         this.$translatableLanguages.push(item);
-      });
-   }
-
-   onStatechanged(state: Player$State, old: Player$State) {
-      if (state.toc.sources !== old.toc.sources) {
-         this.fillLanguages();
-      }
-      if (state.toc.lang !== old.toc.lang) {
-         this.changeLang(state.toc.lang);
-      }
-      if (state.toc.timedata !== old.toc.timedata) {
-         this.renderTimeData();
-      }
-   }
-
-   changeLang(lang: ?string) {
-      each(this.$languages, el => removeClass(el, LANG_ITEM_CHECKED_CN));
-      each(this.$translatableLanguages, el => removeClass(el, LANG_ITEM_CHECKED_CN));
-      const sources = this.state.getTOCSources();
-      const alreadyTranslatedSources = filter(sources, s => !!s.state);
-
-      if (this.$currentCustomTranslate) {
-         this.$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 (idx === -1) {
-            return;
-         }
-
-         addClass(this.$translatableLanguages[idx], LANG_ITEM_CHECKED_CN);
-         if (this.$currentCustomTranslate) {
-            this.$currentCustomTranslate.textContent = translatableSources[idx].label;
-         }
-         this.$currentLanguage.textContent = translatableSources[idx].label;
-      } else {
-         addClass(this.$languages[idx], LANG_ITEM_CHECKED_CN);
-         this.$currentLanguage.textContent = alreadyTranslatedSources[idx].label;
-      }
-      this.renderTimeData();
-   }
-
-   renderTimeData() {
-      const lang = this.state.getTOCLang();
-      const timedata = lang ? this.state.getTOCTimeData() : [];
-      each(this.$items, $item => {
-         this.$chaptersWrapper.removeChild($item);
-      });
-      this._toMainPage();
-      this.$items.length = 0;
-
-      each(timedata, chapter => {
-         const item = createElement('button', { href: '#', class: ITEM_CN }, this.$chaptersWrapper);
-         item.innerHTML = chapter.text || chapter.title;
-         this.addEvent(item, 'click', (e: Event) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const isPaused = this.player.isPaused();
-            this.player.setCurrentTime(chapter.from);
-            if (isPaused) {
-               this.player.play();
-            }
-         });
-         this.$items.push(item);
-      });
-   }
-
-   _toMainPage() {
-      addClass(this.$selector, SELECTOR_MAIN_STEP_CN);
-      removeClass(this.$selector, SELECTOR_LANGUAGES_STEP_CN);
-      removeClass(this.$selector, SELECTOR_TRANSLATE_STEP_CN);
-
-      openerHeightChecker(this.player, this.$mainStep);
-
-      // Accessability: Focus on first item of main page
-      setTimeout(() => {
-         const mainStepItems = document.querySelectorAll(`.${CHAPTERS_CN} > .${ITEM_CN}`);
-         if (mainStepItems[0]) {
-            mainStepItems[0].focus();
-         } else {
-            const languageBtn = document.querySelector(`.${LANGUAGE_BTN_CN}`);
-            if (languageBtn) languageBtn.focus();
-         }
-      });
-   }
-
-   _toLanguagesPage() {
-      addClass(this.$selector, SELECTOR_LANGUAGES_STEP_CN);
-      removeClass(this.$selector, SELECTOR_MAIN_STEP_CN);
-      removeClass(this.$selector, SELECTOR_TRANSLATE_STEP_CN);
-
-      openerHeightChecker(this.player, this.$languagesStep);
-
-      // Accessability: Focus on the first item
-      const backBtn = document.querySelector(`.${LANGUAGES_STEP_CN} > .${BACK_BTN_CN}`);
-      if (backBtn) backBtn.focus();
-   }
-
-   _toTranslatePage() {
-      addClass(this.$selector, SELECTOR_TRANSLATE_STEP_CN);
-      removeClass(this.$selector, SELECTOR_MAIN_STEP_CN);
-      removeClass(this.$selector, SELECTOR_LANGUAGES_STEP_CN);
-
-      if (this.$translateStep) {
-         openerHeightChecker(this.player, this.$translateStep);
-      }
-
-      // Accessability: Focus on the first item
-      const backBtn = document.querySelector(`.${TRANSLATE_STEP_CN} > .${BACK_BTN_CN}`);
-      if (backBtn) backBtn.focus();
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-      if (this.$el.parentNode) {
-         this.$el.parentNode.removeChild(this.$el);
-      }
-      this.$items.length = 0;
-      this.$languages.length = 0;
-      this.$translatableLanguages.length = 0;
-   }
-}
-
-function _createMore($parent) {
-   addClass($parent, MORE_CN);
-   const span = createElement('span', { class: 'arrow' }, $parent);
-   createSvg(span, NEXT);
-
-   return span;
-}

package/src/extensions/volume.js

@@ -1,196 +0,0 @@
-import BaseExtension from './base';
-
-import { createElement, addClass, removeClass, addEvent, removeEvent, each } from '../utils';
-
-import opener from './helpers/opener';
-
-import { storeData, getStoredData } from './helpers/storage';
-import createSvg, { MUTED, VOLUME_UP } from '../svgs';
-
-const CN = 'rmp-ext-volume';
-
-const BUTTON_CN = `${CN}__btn`;
-const MUTED_CN = `${BUTTON_CN}--muted`;
-
-const SELECTOR_CN = `${CN}__selector`;
-const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
-const SELECTOR_ACTIVE_CN = `${SELECTOR_CN}--active`;
-
-const SLIDER_CN = `${CN}__slider`;
-const HANDLE_CN = `${CN}__handle`;
-const PROGRESS_CN = `${CN}__progress`;
-const OVERLAY_CN = `${CN}__overlay`;
-
-const VOLUME_STORAGE_KEY = 'volume';
-const MUTED_STORAGE_KEY = 'muted';
-
-const MIN_VOLUME = 0.1;
-
-const ESC_CODE    = 27;
-
-export default class VolumeExtension extends BaseExtension {
-   _dragNdropTokens = [];
-
-   constructor(player, state, options) {
-      super(player, state, options, ['volumechange', 'loadedmetadata']);
-      this.logger.debug('volume:extension:creating');
-
-      this.onHandleMouseUp = this.onHandleMouseUp.bind(this);
-      this.onHandleMouseDown = this.onHandleMouseDown.bind(this);
-      this.onHandleMouseMove = this.onHandleMouseMove.bind(this);
-      this.onHandleEsqKey = this.onHandleEsqKey.bind(this);
-
-      this.render();
-
-      this.addEvent(this.$button, 'click', this.toggle.bind(this));
-      this.addEvent(this.$slider, 'click', this.changeVolume.bind(this));
-      this.addEvent(this.$handle, 'mousedown', this.onHandleMouseDown);
-
-      opener(this, { $button: this.$button, $selector: this.$selector, SELECTOR_OPEN_CN, closeOnClick: false });
-
-      this.refreshHandle();
-      this.logger.debug('volume:extension:created');
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$el = createElement('span', { class: CN });
-      this.$button = createElement('button', { type: 'button', class: BUTTON_CN }, this.$el);
-      this.$button.setAttribute('aria-label', 'Volume');
-      this.$button.addEventListener('keydown', this.onHandleEsqKey);
-
-      this.$selector = createElement('div', { class: SELECTOR_CN }, this.$el);
-
-      this.$slider = createElement('span', { class: SLIDER_CN }, this.$selector);
-      createElement('span', { class: OVERLAY_CN }, this.$slider);
-      this.$progress = createElement('span', { class: PROGRESS_CN }, this.$slider);
-      this.$handle = createElement('span', { class: HANDLE_CN }, this.$slider);
-
-      createSvg(this.$button, MUTED, { class: 'muted' });
-      createSvg(this.$button, VOLUME_UP, { class: 'unmuted' });
-   }
-
-   toggle() {
-      const muted = !this.player.isMuted();
-      this.player.setMuted(muted);
-      storeData(MUTED_STORAGE_KEY, muted);
-
-      if (!muted) {
-         const volume = Math.max(this.player.getVolume(), MIN_VOLUME);
-         this.player.setVolume(volume);
-         storeData(VOLUME_STORAGE_KEY, volume);
-      }
-   }
-
-   _getVolumeByEvent(e) {
-      const rect = this.$slider.getBoundingClientRect();
-      return (1 - (clientY(e) - rect.top) / this.$slider.offsetHeight).toFixed(2);
-   }
-
-   changeVolume(e) {
-      const volume = this._getVolumeByEvent(e);
-      this.updateVolume(volume);
-   }
-
-   updateVolume(volume) {
-      volume = _normalizeVolume(volume);
-      this.logger.debug('changevolume', volume);
-      if (volume) {
-         this.player.setVolume(volume);
-         this.player.setMuted(false);
-         storeData(VOLUME_STORAGE_KEY, volume);
-         storeData(MUTED_STORAGE_KEY, false);
-      } else {
-         this.player.setMuted(true);
-         storeData(MUTED_STORAGE_KEY, true);
-      }
-   }
-
-   onVolumechange() {
-      if (this.player.isMuted()) {
-         addClass(this.$button, MUTED_CN);
-      } else {
-         removeClass(this.$button, MUTED_CN);
-      }
-      this.refreshHandle();
-   }
-
-   onLoadedmetadata() {
-      const muted = this.options.muted;
-      this.player.setVolume(parseFloat(getStoredData(VOLUME_STORAGE_KEY, '1.0')));
-      if (typeof muted === 'boolean') {
-         this.player.setMuted(muted);
-      } else {
-         this.player.setMuted(getStoredData(MUTED_STORAGE_KEY, 'false') === 'true', true);
-      }
-   }
-
-   refreshHandle() {
-      this._refreshHadle4volume(this.player.getVolume());
-   }
-
-   _refreshHadle4volume(volume) {
-      const position = this.player.isMuted() ? '100%' : (1 - volume) * 100 + '%';
-      this.$handle.style.top = this.$progress.style.top = position;
-   }
-
-   onHandleMouseDown() {
-      addClass(this.$selector, SELECTOR_ACTIVE_CN);
-      this._dragNdropTokens.push( addEvent(document, 'mouseup', this.onHandleMouseUp) );
-      this._dragNdropTokens.push( addEvent(document, 'mousemove', this.onHandleMouseMove) );
-   }
-
-   onHandleMouseUp(e) {
-      each(this._dragNdropTokens, removeEvent);
-      this._dragNdropTokens.length = 0;
-      this.changeVolume(e);
-      removeClass(this.$selector, SELECTOR_ACTIVE_CN);
-   }
-
-   onHandleMouseMove(e) {
-      let volume = this._getVolumeByEvent(e);
-      volume = _normalizeVolume(volume);
-      this._refreshHadle4volume(volume);
-   }
-
-   onHandleEsqKey(e) {
-      const keyCode = e.keyCode;
-      if (keyCode === ESC_CODE) {
-         removeClass(this.$selector, SELECTOR_OPEN_CN);
-         e.preventDefault();
-      }
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-
-      const parent = this.$el.parentNode;
-
-      parent.removeChild(this.$el);
-
-      if (this.$button) {
-         this.$button.removeEventListener('keydown', this.onHandleEsqKey);
-      }
-
-      this.$el = null;
-      this.$button = null;
-      this.$selector = null;
-      this.$slider = null;
-      this.$progress = null;
-      this.$handle = null;
-   }
-}
-
-function clientY(e) {
-   return e.clientY;
-}
-
-function _normalizeVolume(volume) {
-   volume = Math.max(0, volume);
-   volume = Math.min(volume, 1);
-   return volume;
-}