ravnur-player-public 3.4.4 → 3.4.6

package/src/extensions/helpers/timeCodeToSeconds.js

@@ -1,44 +0,0 @@
-const SECS_IN_HOUR = 3600; // 60 * 60
-const SECS_IN_MIN  = 60;
-const MINS_IN_HOUR = 60;
-const HOURS_IN_DAY = 24;
-const SECS_IN_SEC  = 1;
-
-/**
- * Convert a '00:00:00' tiem string into seconds
- *
- * @param {String} time time
- * @return {number} time
- */
-export default function timeCodeToSeconds(time) {
-   // 00:00:00 HH:MM:SS
-   // 00:00    MM:SS
-   // 00       SS
-   const parts = time.split(':');
-   const multiples = [SECS_IN_HOUR, SECS_IN_MIN, SECS_IN_SEC];
-   let seconds = 0;
-
-   while (parts.length && multiples.length) {
-      seconds += parts.pop() * multiples.pop();
-   }
-
-   return seconds;
-}
-
-export function secondsToTime(seconds, showHours = false, showMS = false) {
-   const ms = Math.round(seconds * 1000) % 1000;
-   seconds = Math.floor(seconds);
-   const multiples = showHours ? [HOURS_IN_DAY, MINS_IN_HOUR, SECS_IN_MIN] : [MINS_IN_HOUR, SECS_IN_MIN];
-
-   const parts = [];
-   while (multiples.length) {
-      const koeff = multiples.pop();
-      parts.unshift(pad(seconds % koeff));
-      seconds = Math.floor(seconds / koeff);
-   }
-   return showMS ? parts.join(':') + '.' + ms : parts.join(':');
-}
-
-function pad(n) {
-   return n < 10 ? `0${n}` : `${n}`;
-}

package/src/extensions/helpers/transport.js

@@ -1,43 +0,0 @@
-import { existy } from '../../utils';
-
-export default function load({ url, success, responseType, rangeStart, rangeEnd, error }) {
-   const xhr = createXHR(() => {
-      const data = xhr.responseType === 'arraybuffer' ? xhr.response : xhr.responseText;
-      success({ url: xhr.responseURL, data });
-   }, error);
-
-   xhr.open('GET', url, true);
-
-   if ( existy(rangeEnd) && existy(rangeStart) ) {
-      xhr.setRequestHeader('Range', 'bytes=' + rangeStart + '-' + --rangeEnd);
-   }
-
-   if ( existy(responseType) ) {
-      xhr.responseType = responseType;
-   }
-   xhr.send(null);
-}
-
-function createXHR(callback, error) {
-   if (typeof XDomainRequest === 'undefined') {
-      const xhr = new XMLHttpRequest();
-      xhr.onreadystatechange = function onreadystatechange() {
-         try {
-            if (xhr.readyState === 4) {
-               if (xhr.status === 200) {
-                  setTimeout(callback);
-               } else if (error && (!xhr.status || xhr.status >= 400)) {
-                  setTimeout(error);
-               }
-            }
-         } catch (e) {
-            // noop
-         }
-      };
-      return xhr;
-   }
-
-   const xdr = new XDomainRequest();
-   xdr.onload = callback;
-   return xdr;
-}

package/src/extensions/helpers/vtt-loader.js

@@ -1,42 +0,0 @@
-// @flow
-
-import load from './transport';
-import timeCodeToSeconds from './timeCodeToSeconds';
-import { head, last, map, filter, uidGenerator } from '../../utils';
-
-import type { Player$TimeData } from '../../types/TimeData';
-
-const SCRIPT_TAG_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
-
-export default function loadVTT(url: string, callback: (Player$TimeData[]) => void, error: any) {
-   const success = ({data}) => {
-      callback(decode(data));
-   };
-   load({ url, success, error });
-}
-
-function decode(data: string): Player$TimeData[] {
-   let array = data.split(/\n\s*\n+/gm);
-
-   const format = array.shift().trim();
-
-   if (format !== 'WEBVTT') {
-      return [];
-   }
-
-   const timeDelim = '-->';
-
-   return map(filter(array), str => {
-      const lines = str.split(/\n/g);
-
-      const title = head(lines).indexOf(timeDelim) < 0 ? lines.shift() : '';
-
-      const period = lines.shift().split(timeDelim);
-      const from = timeCodeToSeconds(head(period).trim());
-      const to = timeCodeToSeconds(last(period).trim());
-
-      const text = lines.filter(l => !!l).join('<br/>&nbsp;').replace(SCRIPT_TAG_REGEX, '');
-
-      return { from, to, text, title, id: uidGenerator() };
-   });
-}

package/src/extensions/index.js

@@ -1,87 +0,0 @@
-// @flow
-import each from '../utils/each';
-
-import BasePlayer from '../players/base';
-import StateEntity from '../state';
-
-import BaseExtension from './base';
-import ProgressExtension from './progress';
-import PlayExtension from './play';
-import VolumeExtension from './volume';
-import FullScreenExtension from './fullscreen';
-import ClosedCaptionsExtension from './cc';
-import TOCExtension from './toc';
-import AnnotationsExtension from './annotations';
-import PosterExtension from './poster';
-import PlaceholderExtension from './placeholder';
-import ForwardExtension from './forward';
-import BackwardExtensaion from './backward';
-import DownloadExtension from './download';
-import SettingsExtension from './settings';
-// import HelpExtension from './help';
-import ResizerExtension from './resizer';
-import TitleExtension from './title';
-import PrevExtension from './prev';
-import NextExtension from './next';
-import NextFrameExtensaion from './next-frame';
-import PrevFrameExtensaion from './prev-frame';
-import BufferingExtension from './buffering';
-import MuxExtension from './mux';
-import TheaterExtension from './theater';
-import AudioTracksExtension from './audio-tarcks';
-import CaptionSearchExtension from './caption-search';
-// import C2PA from './c2pa';
-import BottomNext from './bottom-next';
-import BottomPrev from './bottom-prev';
-import CrawlExtension from './crawl';
-import LiveExtension from './live';
-import ErrorExtension from './error';
-
-import type { Player$ExtensionOptions } from '../types/Options';
-
-const cond = [
-   ['showTitle', TitleExtension],
-   [true, BufferingExtension],
-   ['showPoster', PosterExtension],
-   ['showError', ErrorExtension],
-   ['showBackward', BackwardExtensaion],
-   ['showPrevFrame', PrevFrameExtensaion],
-   ['showBottomPrev', BottomPrev],
-   ['showPlay', PlayExtension],
-   ['showBottomNext', BottomNext],
-   ['showNextFrame', NextFrameExtensaion],
-   ['showForward', ForwardExtension],
-   ['showVolume', VolumeExtension],
-   ['isLive', LiveExtension],
-   ['showProgress', ProgressExtension],
-   ['showAnnotations', AnnotationsExtension],
-   ['showTheaterMode', TheaterExtension],
-   ['showClosedCaptions', ClosedCaptionsExtension],
-   ['showTOC', TOCExtension],
-   ['showAudioTracks', AudioTracksExtension],
-   ['showPlaceholder', PlaceholderExtension],
-   ['showCaptionSearch', CaptionSearchExtension],
-   ['showDownload', DownloadExtension],
-   // ['showHelp', HelpExtension],
-   ['showPrev', PrevExtension],
-   ['showNext', NextExtension],
-   ['useMux', MuxExtension],
-   [true, ResizerExtension],
-   // ['showC2PA', C2PA]
-   ['showCrawl', CrawlExtension],
-   ['showSettings', SettingsExtension], // must be last (except FullScreenExtension)
-   ['showFullScreen', FullScreenExtension]
-];
-
-// eslint-disable-next-line
-export default function extensions(player: BasePlayer, state: StateEntity, options: Player$ExtensionOptions): Array<BaseExtension> {
-   const res = [];
-
-   each(cond, ([ key, Extension ]) => {
-      if (key === true || typeof key === 'string' && options[key] === true) {
-         res.push(new Extension(player, state, options));
-      }
-   });
-
-   return res;
-}

package/src/extensions/live.js

@@ -1,76 +0,0 @@
-import BaseExtension from './base';
-
-import { createElement, addClass, removeClass } from '../utils';
-
-import createSvg, { BROADCAST_OFF, BROADCAST_ON } from '../svgs';
-
-import popover from './helpers/popover';
-
-const CN = 'rmp-ext-live';
-const BROADCAST_ON_CN = `${CN}--live`;
-
-export default class LiveExtension extends BaseExtension {
-   constructor(player, state, options) {
-      super(player, state, options, ['timeupdate', 'progress']);
-      this.logger.debug('play:extension:creating');
-
-      this.render();
-      this.addEvent(this.$el, 'click', this.toggle.bind(this));
-
-      this.logger.debug('live:extension:created');
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$el = createElement('button', { type: 'button', class: CN});
-
-      createSvg(this.$el, BROADCAST_OFF, {class: 'broadcast-off', width: 50, height: 50, viewBox: '0 0 50 50'});
-      createSvg(this.$el, BROADCAST_ON, {class: 'broadcast-on', width: 50, height: 50,  viewBox: '0 0 50 50'});
-
-      setTimeout(() => {
-         const text = this.player.isLive() ? 'Live' : 'Go to live';
-         popover(this, { $button: this.$el, text });
-      }, 100);
-   }
-
-   toggle() {
-      this.goToLive();
-   }
-
-   goToLive() {
-      this.player.goToLive();
-      addClass(this.$el, BROADCAST_ON_CN);
-   }
-
-   onTimeupdate() {
-      if (!this.player.isLive()) {
-         this.$el.setAttribute('aria-label', 'Go to live');
-         removeClass(this.$el, BROADCAST_ON_CN);
-      } else {
-         this.$el.setAttribute('aria-label', 'Live');
-         addClass(this.$el, BROADCAST_ON_CN);
-      }
-   }
-
-   onProgress() {
-      if (!this.player.isLive()) {
-         this.$el.setAttribute('aria-label', 'Go to live');
-         removeClass(this.$el, BROADCAST_ON_CN);
-      } else {
-         this.$el.setAttribute('aria-label', 'Live');
-         addClass(this.$el, BROADCAST_ON_CN);
-      }
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-
-      const parent = this.$el.parentNode;
-      parent.removeChild(this.$el);
-      this.$el = null;
-   }
-}

package/src/extensions/mux.js

@@ -1,57 +0,0 @@
-import BaseExtension from './base';
-
-import { existy, first, createElement, extend } from '../utils';
-
-/* eslint camelcase: 0 */
-
-const MUX_OPTIONS = {
-   page_type: 'watchpage',
-
-   player_name: 'RavnurPlayer',
-   player_version: '3.3.3',
-
-   video_stream_type: 'on-demand'
-};
-
-export default class MuxExtension extends BaseExtension {
-   constructor(player, state, options) {
-      super(player, state, options);
-      this.logger.debug('mux:extension:creating');
-
-      this.init();
-
-      this.logger.debug('mux:extension:created');
-   }
-
-   init() {
-      if ( existy(window.mux) ) {
-         this.monitor();
-      } else {
-         this.loadLibraryAndStartMonitor();
-      }
-   }
-
-   loadLibraryAndStartMonitor() {
-      const script = createElement('script', { src: this.options.muxURL } );
-      const firstScriptTag = first(document.getElementsByTagName('script'));
-      script.onload = script.onreadystatechange = () => this.monitor();
-
-      if (!firstScriptTag.parentNode) return;
-
-      firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
-   }
-
-   monitor() {
-      const $el = this.player.getElement();
-      const data = extend({}, MUX_OPTIONS, this.options.mux);
-      window.mux.monitor(`#${$el.id}`, { debug: false, data });
-   }
-
-   destroy() {
-      const $el = this.player.getElement();
-      if ($el?.mux) {
-         $el.mux.destroy();
-      }
-      super.destroy();
-   }
-}

package/src/extensions/next-frame.js

@@ -1,44 +0,0 @@
-import BaseExtension from './base';
-
-import createElement from '../utils/createElement';
-
-import popover from './helpers/popover';
-
-import createSvg, { NEXT_TRACK } from '../svgs';
-
-const CN = 'rmp-ext-next-frame';
-
-export default class NextFrameExtension extends BaseExtension {
-   constructor(player, state, options) {
-      super(player, state, options);
-      this.logger.debug('nextframe:extension:creating');
-
-      this.render();
-      this.addEvent(this.$el, 'click', this.nextframe.bind(this));
-
-      this.logger.debug('nextframe:extension:created');
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$el = createElement('button', { type: 'button', class: CN });
-      setTimeout(() => popover(this, { $button: this.$el, text: this.$t('nextframe') }) );
-      createSvg(this.$el, NEXT_TRACK);
-   }
-
-   nextframe() {
-      this.player.nextFrame();
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-
-      const parent = this.$el.parentNode;
-      parent.removeChild(this.$el);
-      this.$el = null;
-   }
-}

package/src/extensions/next.js

@@ -1,48 +0,0 @@
-import BaseExtension from './base';
-
-import createElement from '../utils/createElement';
-import createSvg, { NEXT_TRACK } from '../svgs';
-
-const CN = 'rmp-ext-next';
-const BUTTON_CN = `${CN}__button`;
-const THUMBNAIL_CN = `${CN}__thumbnail`;
-
-export default class NextExtension extends BaseExtension {
-   /** @type {HTMLElement} */
-   $outer;
-   /** @type {HTMLButtonElement} */
-   $button;
-
-   constructor(player, state, options) {
-      super(player, state, options);
-      this.logger.debug('next:extension:creating');
-
-      this.render();
-
-      const bus = this.options.bus;
-
-      this.addEvent(this.$outer, 'click', () => bus.emit('nexttrack') );
-
-      this.logger.debug('next:extension:created');
-   }
-
-   render() {
-      const title = this.options.nextTrackTitle;
-      this.$outer = createElement('div', { class: CN, title });
-      this.$button = createElement('button', { type: 'button', class: BUTTON_CN }, this.$outer);
-      createSvg(this.$button, NEXT_TRACK);
-      this.$button.setAttribute('aria-label', 'Go to next track');
-
-      createElement('img', { src: this.options.nextTrackThumbnails, class: THUMBNAIL_CN }, this.$outer);
-   }
-
-   getOuter() {
-      return this.$outer;
-   }
-
-   destroy() {
-      super.destroy();
-      this.$outer.parentNode.removeChild(this.$outer);
-      this.$outer = null;
-   }
-}

package/src/extensions/placeholder.js

@@ -1,241 +0,0 @@
-import BaseExtension from './base';
-
-import { createElement, removeClass, addClass, isFunction, existy, hasClass, each } from '../utils';
-
-import createSvg, { PAUSE_CIRCLE, PLAY_CIRCLE, MUTED, VOLUME_UP, VOLUME_DOWN, BACKWARD, FORWARD, PLAY } from '../svgs';
-
-const CN = 'rmp-ext-placeholder';
-const ANIMATION_CN = `${CN}--animation`;
-
-const ICON_CN = `${CN}__icon`;
-const PLAY_BUTTON_CN = `${CN}__play-btn`;
-
-const SPACE_CODE  = 32;
-const LEFT_CODE   = 37;
-const UP_CODE     = 38;
-const RIGHT_CODE  = 39;
-const DOWN_CODE   = 40;
-const PREV_FRAME  = 74;
-const NEXT_FRAME  = 75;
-
-const VOLUME_DELTA = 0.1;
-const MAX_VOLUME = 1;
-const MIN_VOLUME = 0;
-
-const MAP = {};
-
-MAP[SPACE_CODE]   = '_togglePlay';
-MAP[LEFT_CODE]    = '_skeepLeft';
-MAP[RIGHT_CODE]   = '_skeepRight';
-MAP[UP_CODE]      = '_upVolume';
-MAP[DOWN_CODE]    = '_downVolume';
-MAP[PREV_FRAME]   = '_prevFrame';
-MAP[NEXT_FRAME]   = '_nextFrame';
-
-const CLICK_DELAY = 350;
-
-let timerId;
-let animationTimerId;
-let accessibilityEnabled;
-
-export default class PlaceholderExtension extends BaseExtension {
-   /** @type {HTMLElement} */
-   $outer;
-   /** @type {HTMLElement} */
-   $placeholderIcon;
-   /** @type {HTMLElement} */
-   $playButton;
-
-   constructor(player, state, options) {
-      super(player, state, options);
-      this.logger.debug('placeholder:extension:creating');
-
-      accessibilityEnabled = this.options.accessibility;
-
-      this.render();
-      if (options.isHandlingKeyboardEvents) {
-         this.addEvent(document, 'keydown', this.onKeyDown.bind(this), options.globalKeyboardListeners);
-      }
-
-      this.addEvent(this.$outer, 'click', this.onPlaceholderClick.bind(this));
-      this.addEvent(this.$playButton, 'click', this.onPlaceholderClick.bind(this));
-      setTimeout(() => {
-         const $title = this.$outer.parentNode.querySelector('.rmp-ext-title');
-         if ($title) {
-            this.addEvent($title, 'click', this.onPlaceholderClick.bind(this));
-         }
-         this.addEvent(this.$outer.parentNode, 'dblclick', this.toggleFullScreen.bind(this));
-      });
-
-      this.logger.debug('placeholder:extension:created');
-   }
-
-   render() {
-      this.$outer = createElement('div', { class: CN, tabindex: -1 });
-      this.$placeholderIcon = createElement('div', { class: ICON_CN, tabindex: -1 }, this.$outer);
-      this.$playButton = createElement('button', { type: 'button', class: PLAY_BUTTON_CN, tabindex: -1 }, this.$outer);
-      createSvg(this.$playButton, PLAY);
-      this.$playButton.setAttribute('aria-label', 'Play');
-   }
-
-   onPlaceholderClick() {
-      this.logger.debug('placeholder:click');
-      clearTimeout(timerId);
-      timerId = setTimeout(() => this._togglePlay(), CLICK_DELAY);
-   }
-
-   onKeyDown(e) {
-      if (!this.player.getElement()) return;
-
-      this.logger.debug('placeholder:keydown');
-      const target = e.target || e.srcElement;
-      let isPlayerEvent = target === this.player.getElement();
-      isPlayerEvent = isPlayerEvent || hasClass(target, 'rplayer');
-      // ie 11
-      isPlayerEvent = isPlayerEvent || this.player.getElement().parentNode.contains(target);
-
-      if ( isPlayerEvent ) {
-         this._processKeyDown(e);
-      } else if ( this.options.globalKeyboardListeners && !_isTextInput(e.target)) {
-         this._processKeyDown(e);
-      }
-   }
-
-   _processKeyDown(e) {
-      if (e.target instanceof HTMLInputElement) {
-         return;
-      }
-
-      const keyCode = e.keyCode;
-
-      // Accessibility: If accessibility enabled, space button should trigger focused one, not play
-      if (keyCode === SPACE_CODE && accessibilityEnabled && e.target.tagName === 'BUTTON') {
-         return;
-      }
-
-      let fnc = MAP[keyCode];
-      if ( existy(fnc) && isFunction(this[fnc]) ) {
-         this[fnc](this.player);
-         e.preventDefault();
-         e.stopPropagation();
-      }
-
-      fnc = this.options.keyboardListeners[keyCode];
-      if ( existy(fnc) && isFunction(fnc) ) {
-         fnc(this.player);
-         e.preventDefault();
-         e.stopPropagation();
-      }
-   }
-
-   toggleFullScreen() {
-      this.logger.debug('placeholder:toggleFullScreen');
-      clearTimeout(timerId);
-      if (this.options.showFullScreen) {
-         this.bus.emit('fullscreenchanging');
-      }
-   }
-
-   _togglePlay() {
-      this.logger.debug('placeholder:togglePlay');
-      if ( this.options.isMobile ) {
-         this.bus.emit('mobiletouch');
-      } else if (this.player.isPaused()) {
-         this.player.play();
-         this._showAction(PLAY_CIRCLE);
-      } else {
-         this.player.pause();
-         this._showAction(PAUSE_CIRCLE);
-      }
-   }
-
-   _skeepLeft() {
-      this.logger.debug('placeholder:skeepLeft');
-      this.player.setCurrentTime(this.player.getCurrentTime() - this.options.skipDelta);
-      this._showAction(BACKWARD);
-   }
-
-   _skeepRight() {
-      this.logger.debug('placeholder:skeepRight');
-      this.player.setCurrentTime(this.player.getCurrentTime() + this.options.skipDelta);
-      this._showAction(FORWARD);
-   }
-
-   _upVolume() {
-      this.logger.debug('placeholder:volumeup');
-      const volume = Math.min(MAX_VOLUME, VOLUME_DELTA + this.player.getVolume());
-      this.player.setMuted(false);
-      this.player.setVolume(volume);
-      this._showAction(VOLUME_UP);
-   }
-
-   _downVolume() {
-      this.logger.debug('placeholder:volumedown');
-      const volume = Math.max(MIN_VOLUME, this.player.getVolume() - VOLUME_DELTA).toFixed(2);
-      // eslint-disable-next-line eqeqeq
-      if (volume == MIN_VOLUME) {
-         this.player.setVolume(0);
-         this.player.setMuted(true);
-         this._showAction(MUTED);
-      } else {
-         this.player.setVolume(volume);
-         this._showAction(VOLUME_DOWN);
-      }
-   }
-
-   _showAction(path) {
-      this.logger.debug('placeholder:showaction');
-      removeClass(this.$outer, ANIMATION_CN);
-      clearTimeout(animationTimerId);
-      animationTimerId = setTimeout(() => {
-         this.logger.debug('placeholder:showaction:clear');
-         this._clearPlaceholderIcon();
-         createSvg(this.$placeholderIcon, path);
-         addClass(this.$outer, ANIMATION_CN);
-         animationTimerId = setTimeout(() => {
-            this.logger.debug('placeholder:showaction:remove');
-            this._clearPlaceholderIcon();
-            removeClass(this.$outer, ANIMATION_CN);
-         }, 500);
-      }, CLICK_DELAY);
-   }
-
-   _clearPlaceholderIcon() {
-      if (!this.$placeholderIcon.childNodes.length) {
-         return;
-      }
-      each(this.$placeholderIcon.childNodes, c => {
-         this.$placeholderIcon.removeChild(c);
-      });
-   }
-
-   _prevFrame() {
-      this.player.prevFrame();
-   }
-
-   _nextFrame() {
-      this.player.nextFrame();
-   }
-
-   getOuter() {
-      return this.$outer;
-   }
-
-   destroy() {
-      super.destroy();
-      this.$outer.removeChild(this.$placeholderIcon);
-      this.$outer.parentNode.removeChild(this.$outer);
-
-      this.$outer = null;
-      this.$placeholderIcon = null;
-   }
-}
-
-function _isTextInput(target) {
-   let res = false;
-
-   res = res || target instanceof HTMLTextAreaElement;
-   res = res || target instanceof HTMLInputElement && target.type === 'text';
-
-   return res;
-}