ravnur-player-public 3.4.2 → 3.4.4

package/src/extensions/toc.js

@@ -0,0 +1,334 @@
+// @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

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