ravnur-player-public 3.4.2 → 3.4.4

package/src/extensions/resizer.js

@@ -0,0 +1,37 @@
+import Base from './base';
+
+export default class Resizer extends Base {
+   _w;
+   _h;
+
+   constructor(player, state, options) {
+      super(player, state, options);
+
+      this.onResize = this.onResize.bind(this);
+
+      setTimeout(this.onResize);
+      this.addEvent(window, 'resize', () => setTimeout(this.onResize) );
+      this.bus.on('fullscreenchanged', () => setTimeout(this.onResize, 500) );
+      this.bus.on('cclayoutchange', () => setTimeout(this.onResize) );
+   }
+
+   onResize() {
+      const element = this.player.getElement();
+
+      if (!element) {
+         return;
+      }
+
+      const $el = element.parentNode ? element.parentNode : element;
+
+      const width = Math.max(element.offsetWidth, $el.offsetWidth);
+      const height = Math.max(element.offsetHeight, $el.offsetHeight, $el.parentNode.offsetHeight);
+      const outerWidth = Math.max(element.offsetWidth, $el.parentNode.offsetWidth);
+
+      if ( width !== this._w || height !== this._h ) {
+         this._h = height;
+         this._w = width;
+         setTimeout(() => this.bus.emit('resizeplayer', { width, height, outerWidth }));
+      }
+   }
+}

package/src/extensions/settings.js

@@ -0,0 +1,367 @@
+import BaseExtension from './base';
+
+import {
+   createElement, addClass, removeClass, each, toArray, existy, isEqual, get, has, isFunction,
+   find
+} from '../utils';
+
+import { storeData, getStoredData } from './helpers/storage';
+
+import opener from './helpers/clickOpener';
+import popover from './helpers/popover';
+import openerHeightChecker from './helpers/openerHeightChecker';
+import createSvg, { GEARS, BACK, NEXT } from '../svgs';
+
+const CN = 'rmp-ext-settings';
+const BUTTON_CN = `${CN}__button`;
+const SELECTOR_CN = `${CN}__selector`;
+const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
+const SELECTOR_SHOW_ADDITIONAL_CN = `${SELECTOR_CN}--additional`;
+
+const MAIN_STEP_CN = `${CN}__main-step`;
+const ADDITIONAL_STEP_CN = `${CN}__additional-step`;
+
+const ANNOTATIONS_CN = `${CN}__annotations`;
+
+const QUALITY_CN = `${CN}__quality`;
+const PLAYBACK_RATE_CN = `${CN}__playback-rate`;
+
+const BACK_BTN_CN = `${CN}__back`;
+
+const MORE_CN = `${CN}__more`;
+const CURRENT_VALUE_CN = `${CN}__current-value`;
+
+const ITEM_CN = `${CN}__item`;
+const ITEM_CHECKED_CN = `${ITEM_CN}--checked`;
+
+const ANNOTATIONS_STORAGE_KEY = 'annotationslang';
+const OFF_ITEM = { label: 'None', srclang: '' };
+
+const DEFAULT_RATES = [
+   { rate: 0.5 },
+   { rate: 0.8 },
+   { rate: 1, labelKey: 'standard-playbackrate' },
+   { rate: 1.5 },
+   { rate: 2 },
+   { rate: 3, hide: options => options.isLive },
+   { rate: 5, hide: options => options.isAudio || options.isLive }
+];
+
+export default class SettingsExtension extends BaseExtension {
+   playbackRate = 1
+   annLang = ''
+
+   constructor(player, state, options) {
+      super(player, state, options, ['loadedmetadata', 'annotationslang', 'qualitychange', 'timeupdate']);
+      this.logger.debug('settings:extension:creating');
+
+      this.render();
+      this.init();
+
+      this.logger.debug('settings:extension:created');
+   }
+
+   render() {
+      /** @type {HTMLMediaElement} */
+      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.$mainStep = createElement('div', { class: MAIN_STEP_CN }, this.$selector);
+
+      createSvg(this.$button, GEARS);
+
+      if (this.options.showAnnotations) {
+         this.$annotations = createElement('button', { type: 'button', class: ANNOTATIONS_CN }, this.$mainStep);
+
+         const text = createElement('span', {  }, this.$annotations);
+         text.textContent = this.$t('annotations');
+         addClass(this.$annotations, MORE_CN);
+
+         _createMore(this.$annotations);
+         this.$currentAnnotation = createElement('span', { class: CURRENT_VALUE_CN }, this.$annotations);
+      }
+
+      if (this.options.showQuality) {
+         this.$quality = createElement('button', { type: 'button', class: QUALITY_CN }, this.$mainStep);
+         const text = createElement('span', { }, this.$quality);
+         text.textContent = this.$t('quality');
+         addClass(this.$quality, MORE_CN);
+
+         _createMore(this.$quality);
+         this.$currentQuality = createElement('span', { class: CURRENT_VALUE_CN }, this.$quality);
+      }
+
+      if (this.options.showPlaybackRate) {
+         this.$speed = createElement('button', { type: 'button', class: PLAYBACK_RATE_CN }, this.$mainStep);
+         const text = createElement('span', { }, this.$speed);
+         text.textContent = this.$t('playback-rate');
+         addClass(this.$speed, MORE_CN);
+         _createMore(this.$speed);
+         this.$currentSpeed = createElement('span', { class: CURRENT_VALUE_CN }, this.$speed);
+         this.$currentSpeed.textContent = this.$t('standard-playbackrate');
+      }
+
+      this.$additionalStep = createElement('div', { class: ADDITIONAL_STEP_CN }, this.$selector);
+
+      this.$back = createElement('button', { type: 'button', class: BACK_BTN_CN }, this.$additionalStep);
+      const $backSpan = createElement('span', { class: 'arrow' }, this.$back);
+      createSvg($backSpan, BACK);
+
+      this.$backText = createElement('span', {}, this.$back);
+
+      this.$additional = createElement('div', { class: 'tab-content' }, this.$additionalStep);
+   }
+
+   init() {
+      const $button = this.$button, $selector = this.$selector, reposition = false, closeOnClick = false;
+      opener(this, {
+         $button,
+         $selector,
+         SELECTOR_OPEN_CN,
+         reposition,
+         closeOnClick,
+         firstFocusItemSelector: `.${MORE_CN}`,
+         toMainFn: this._toMain.bind(this)
+      });
+
+      if (this.options.showAnnotations) {
+         this.addEvent(this.$annotations, 'click', e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this._toAdditional(this.$t('annotations'));
+            this._renderAnnotationsLanguages();
+         });
+
+         const sources = [OFF_ITEM].concat(this.options.annotations);
+
+         const lang = getStoredData(ANNOTATIONS_STORAGE_KEY);
+         let source = find(sources, s => s.srclang === lang);
+
+         if (!source) {
+            source = find(sources, s => s.default);
+         }
+         // 1 - because OFF is the first
+         source = source || sources[1];
+         this.bus.emit('annotationslang', source.srclang);
+      }
+
+      if (this.options.showQuality) {
+         this.addEvent(this.$quality, 'click', e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this._toAdditional(this.$t('quality'));
+            this._renderQualities();
+         });
+      }
+
+      if (this.options.showPlaybackRate) {
+         this.addEvent(this.$speed, 'click', () => {
+            this._toAdditional(this.$t('playback-rate'));
+            this._renderPlaybackRate();
+         });
+      }
+
+      this.addEvent(this.$back, 'click', () => this._toMain() );
+
+      popover(this, { $button, text: this.$t('settings') } );
+   }
+
+   _toAdditional(text) {
+      const items = toArray(this.$additional.childNodes);
+      each(items, btn => this.$additional.removeChild(btn) );
+      addClass(this.$selector, SELECTOR_SHOW_ADDITIONAL_CN);
+      this.$backText.textContent = text;
+
+      openerHeightChecker(this.player, this.$additionalStep);
+
+      // Accessability: Focus on first menu item
+      this.$back.focus();
+   }
+
+   _renderQualities() {
+      // fix RAV-411
+      each(toArray(this.$additional.childNodes), btn => this.$additional.removeChild(btn) );
+
+      const currentLevel = this.player.getLevel();
+
+      const items = [];
+      const levels = this.player.getLevels();
+      levels.sort((a, b) => b.height - a.height);
+
+      each(levels, level => {
+         if (!(level.name || level.height)) {
+            return;
+         }
+
+         const item = createElement('button', { type: 'button', class: ITEM_CN }, this.$additional);
+         item.textContent = level.name || `${level.height}p`;
+
+         // fuck ie
+         if ( isEqual(level, currentLevel) || get(level, 'index', -1) === get(currentLevel, 'index', -2)) {
+            addClass(item, ITEM_CHECKED_CN);
+            if (!this.$currentQuality.textContent) {
+               this.bus.emit('qualitychange', item.textContent);
+            }
+         }
+
+         this.addEvent(item, 'click', () => {
+            this.bus.emit('qualitychange', item.textContent);
+            this.bus.emit('manualquality', item.textContent);
+            each(items, el => removeClass(el, ITEM_CHECKED_CN) );
+            addClass(item, ITEM_CHECKED_CN);
+
+            this.player.setLevel(level);
+            this._toMain();
+         });
+
+         items.push(item);
+      });
+   }
+
+   _renderAnnotationsLanguages() {
+      const items = [];
+      const lang = this.annLang; // getStoredData(ANNOTATIONS_STORAGE_KEY);
+      each([OFF_ITEM].concat(this.options.annotations), source => {
+         const item = createElement('button', { type: 'button', class: ITEM_CN }, this.$additional);
+         item.textContent = source.label;
+
+         if (lang === source.srclang) {
+            addClass(item, ITEM_CHECKED_CN);
+         }
+         this.addEvent(item, 'click', () => {
+            storeData(ANNOTATIONS_STORAGE_KEY, source.srclang);
+            this.bus.emit('annotationslang', source.srclang);
+            this._toMain();
+         });
+         items.push(item);
+      });
+   }
+
+   _mapRates() {
+      const customRates = this.options.playbackRates;
+
+      // Always keep standart rate
+      if (customRates.indexOf(1) === -1) {
+         customRates.push(1);
+      }
+
+      let rates = customRates.map(r => {
+         const rate = Math.round(r * 100) / 100;
+
+         if (rate === 1) {
+            return { rate, labelKey: 'standard-playbackrate' };
+         }
+
+         if (rate === 5) {
+            return { rate, hide: options => options.isAudio };
+         }
+
+         return { rate };
+      });
+
+      rates = rates.filter((r, i) => r.rate <= 5 && r.rate > 0).sort((a, b) => a.rate - b.rate);
+
+      return rates;
+   }
+
+   _renderPlaybackRate() {
+      const items = [];
+      const rates = Array.isArray(this.options.playbackRates) ? this._mapRates() : DEFAULT_RATES;
+
+      each(rates, rate => {
+         if ( has(rate, 'hide') && isFunction(rate.hide) && rate.hide(this.options) ) {
+            return;
+         }
+
+         const item = createElement('button', { type: 'button', class: ITEM_CN }, this.$additional);
+         item.textContent = existy(rate.labelKey) ? this.$t(rate.labelKey) : rate.rate;
+         if ( rate.rate === this.playbackRate ) {
+            addClass(item, ITEM_CHECKED_CN);
+            this.$currentSpeed.textContent = item.textContent;
+         }
+
+         this.addEvent(item, 'click', () => {
+            each(items, el => removeClass(el, ITEM_CHECKED_CN) );
+            addClass(item, ITEM_CHECKED_CN);
+
+            this.player.setPlaybackRate(rate.rate);
+            this.playbackRate = rate.rate;
+            this.$currentSpeed.textContent = item.textContent;
+            this._toMain();
+         });
+         items.push(item);
+      });
+   }
+
+   _toMain() {
+      removeClass(this.$selector, SELECTOR_SHOW_ADDITIONAL_CN);
+      openerHeightChecker(this.player, this.$mainStep);
+
+      // Accessability: Focus on first item of main page
+      const mainStepItems = document.querySelectorAll(`.${MAIN_STEP_CN} > .${MORE_CN}`);
+      if (mainStepItems[0]) mainStepItems[0].focus();
+   }
+
+   onAnnotationslang(lang) {
+      const source = find([OFF_ITEM].concat(this.options.annotations), s => s.srclang === lang) || OFF_ITEM;
+      this.annLang = source.srclang;
+      this.$currentAnnotation.textContent = source.label;
+   }
+
+   onLoadedmetadata() {
+      if (!this.options.showQuality) {
+         return;
+      }
+
+      if (this.player.isMultiQuality()) {
+         this._renderQualities();
+      } else {
+         this.$quality.style.display = 'none';
+      }
+   }
+
+   onQualitychange(label) {
+      if (this.$currentQuality) {
+         this.$currentQuality.textContent = label;
+      }
+   }
+
+   onTimeupdate() {
+      if (!this.player.isLive?.()) {
+         return;
+      }
+
+      this.player.setPlaybackRate(1);
+      this.playbackRate = 1;
+
+      if (this.options.showPlaybackRate) {
+         this.$currentSpeed.textContent = this.$t('standard-playbackrate');
+      }
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   destroy() {
+      super.destroy();
+
+      const parent = this.$el.parentNode;
+
+      parent.removeChild(this.$el);
+
+      this.$el = null;
+      this.$button = null;
+      this.$selector = null;
+   }
+
+}
+
+function _createMore($parent) {
+   const span = createElement('span', { class: 'arrow' }, $parent);
+   createSvg(span, NEXT);
+   return span;
+}

package/src/extensions/theater.js

@@ -0,0 +1,56 @@
+// @flow
+
+import BaseExtension from './base';
+
+import BaseController from '../players/base';
+import StateEntity from '../state';
+
+import { createElement, toggleClass } from '../utils';
+
+import popover from './helpers/popover';
+import createSvg, { THEATER_MODE, EXIT_THEATER_MODE } from '../svgs';
+
+import type { Player$ExtensionOptions } from '../types/Options';
+import type { Player$State } from '../types/State';
+
+const CN = 'rmp-ext-theater';
+const EXIT_CN = `${CN}--exit`;
+const HIDDEN_CN = `${CN}--hidden`;
+
+export default class TheaterExtensions extends BaseExtension {
+   $el: HTMLElement
+
+   constructor(player: BaseController, state: StateEntity, options: Player$ExtensionOptions) {
+      super(player, state, options, ['statechanged']);
+      this.logger.debug('theater:extension:creating');
+
+      this.render();
+      this.addEvent(this.$el, 'click', this.toggle.bind(this));
+      toggleClass(this.$el, EXIT_CN, state.isTheaterMode());
+
+      this.logger.debug('theater:extension:created');
+   }
+
+   render() {
+      this.$el = createElement('button', { type: 'button', class: CN });
+
+      createSvg(this.$el, THEATER_MODE, { class: `${CN}__icon`});
+      createSvg(this.$el, EXIT_THEATER_MODE, { class: `${CN}__exit-icon`});
+
+      const text = () => this.$t(this.state.isTheaterMode() ? 'exit-theater' : 'theater');
+      setTimeout(() => popover(this, { $button: this.$el, text }) );
+   }
+
+   toggle() {
+      this.bus.emit('theaterchanging');
+   }
+
+   onStatechanged(state: Player$State) {
+      toggleClass(this.$el, EXIT_CN, state.isTheaterMode);
+      toggleClass(this.$el, HIDDEN_CN, state.isFullScreen);
+   }
+
+   getElement() {
+      return this.$el;
+   }
+}

package/src/extensions/title.js

@@ -0,0 +1,38 @@
+import BaseExtension from './base';
+
+import createElement from '../utils/createElement';
+
+const CN = 'rmp-ext-title';
+const TITLE_CN = `${CN}__title`;
+
+export default class TitleExtension extends BaseExtension {
+   /** @type {HTMLElement} */
+   $outer;
+   constructor(player, state, options) {
+      super(player, state, options);
+      this.logger.debug('title:extension:creating');
+
+      this.render();
+
+      this.logger.debug('title:extension:created');
+   }
+
+   render() {
+      this.$outer = createElement('div', { class: CN, 'data-testid': 'title' });
+      const span = createElement('span', { class: TITLE_CN, title: this.options.title, tabindex: 0 }, this.$outer);
+      span.textContent = this.options.title || '';
+   }
+
+   getOuter() {
+      return this.$outer;
+   }
+
+   destroy() {
+      super.destroy();
+      if (this.$outer) {
+         const parent = this.$outer.parentNode;
+         parent.removeChild(this.$outer);
+         this.$outer = null;
+      }
+   }
+}