ravnur-player-public 3.4.4 → 3.4.5

package/src/extensions/resizer.js

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

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

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

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