ravnur-player-public 3.4.4 → 3.4.5

package/src/config/cc.js

@@ -1,56 +0,0 @@
-// @flow
-
-import type {
-   Player$CCColor, Player$CCFontFamily, Player$CCFontSize, Player$CCLocation
-} from '../types/State';
-
-import type { Player$Translation } from '../types/Translation';
-
-export type CCOption<T: string> = {
-   key?: $Keys<Player$Translation>,
-   label?: string,
-   value: T
-}
-
-export const DEFAULT_CC_TEXT_COLOR: Player$CCColor = '#FFF';
-export const DEFAULT_CC_BG_COLOR: Player$CCColor = '#000';
-
-export const CC_COLORS: CCOption<Player$CCColor>[] = [
-   { key: 'red',      value: '#F44336' },
-   { key: 'purple',   value: '#9C27B0' },
-   { key: 'indigo',   value: '#3F51B5' },
-   { key: 'blue',     value: '#2196F3' },
-   { key: 'green',    value: '#4CAF50' },
-   { key: 'yellow',   value: '#FFEB3B' },
-   { key: 'orange',   value: '#FF9800' },
-   { key: 'brown',    value: '#795548' },
-   { key: 'grey',     value: '#9E9E9E' },
-   { key: 'white',    value: '#FFF' },
-   { key: 'black',    value: '#000' }
-];
-
-export const DEFAULT_CC_FONT_SIZE = '100%';
-
-export const CC_FONT_SIZES: CCOption<Player$CCFontSize>[] = [
-   { label: '75%',   value: '75%' },
-   { label: '100%',  value: '100%' },
-   { label: '125%',  value: '125%' },
-   { label: '150%',  value: '150%' },
-   { label: '200%',  value: '200%' }
-];
-
-export const DEFAULT_CC_FONT_FAMILY = 'Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, sans-serif';
-
-export const CC_FONT_FAMILIES: CCOption<Player$CCFontFamily>[] = [
-   { key: 'monoserif',   value: '"Courier New", Courier, "Nimbus Mono L", "Cutive Mono", monospace' },
-   { key: 'propserif',   value: '"Times New Roman", Times, Georgia, Cambria, "PT Serif Caption", serif' },
-   { key: 'monosans',    value: '"Deja Vu Sans Mono", "Lucida Console", Monaco, Consolas, "PT Mono", monospace' },
-   { key: 'propssans',   value: 'Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, sans-serif' }
-];
-
-export const DEFAULT_CC_LOCATION = 'over';
-
-export const CC_LOCATIONS: CCOption<Player$CCLocation>[] = [
-   { key: 'cc-location-over',     value: 'over' },
-   { key: 'cc-location-below',    value: 'below' }
-];

package/src/config/i18n.js

@@ -1,101 +0,0 @@
-// @flow
-import type { Player$Translation } from '../types/Translation';
-
-const i18n: Player$Translation = {
-   fullscreen: 'Fullscreen',
-   'exit-fullscreen': 'Exit full screen',
-
-   theater: 'Theater mode',
-   'exit-theater': 'Standard mode',
-
-   play: 'Play',
-   pause: 'Pause',
-   replay: 'Replay',
-   'standard-playbackrate': 'Standard',
-   forward: 'Forward 10 sec',
-   backward: 'Back 10 sec',
-   prevframe: 'Move to previous frame',
-   nextframe: 'Move to next frame',
-   annotations: 'Annotations',
-   quality: 'Quality',
-   'audio-tracks': 'Audio tracks',
-   'playback-rate': 'Playback rate',
-   settings: 'Settings',
-   buffering: 'Buffering...',
-   cc: 'Closed Captions',
-   transcript: 'Transcript',
-   chapters: 'Chapters',
-   back: 'Back',
-   'settings-fontcolor': 'Font color',
-   'settings-fontsize': 'Font size',
-   'settings-fontfamily': 'Font family',
-   'settings-background': 'Background color',
-   'settings-captionlocations': 'Captions location',
-   help: 'Help',
-   download: 'Download',
-   'video-drm': 'Video',
-   'video-only': 'Video Only',
-   'video-and': 'Video and',
-   language: 'Language',
-
-   'unapproved-source': '(unapproved)',
-   translate: 'Translate',
-   translating: 'Translating...',
-
-   monoserif  : 'Monospace serif',
-   propserif  : 'Proportionate serif',
-   monosans   : 'Monospace sans serif',
-   propssans  : 'Proportionate sans serif',
-
-   'cc-location-over'    : 'Overlay video',
-   'cc-location-below'   : 'Below the video',
-
-   red     : 'Red',
-   purple  : 'Purple',
-   indigo  : 'Indigo',
-   blue    : 'Blue',
-   green   : 'Green',
-   yellow  : 'Yellow',
-   orange  : 'Orange',
-   brown   : 'Brown',
-   grey    : 'Grey',
-   white   : 'White',
-   black   : 'Black',
-
-   'help-bacward'  : '"Left (◄)" - Jump backward by 10 seconds',
-   'help-play'     : '"Space" - Toggle playback',
-   'help-skip'     : '"Right (►)" - Skip 10 seconds',
-   'help-volume'   : '"UP/DOWN (▲/▼)" - Change volume by 10%',
-   'help-esc'      : '"ESC" - exit fullscreen',
-
-   'no-video'      : 'No playable sources found',
-   'no-flash'      : 'For watching video you need to install Flash Player and restart your browser',
-   'playlist-count-of': 'videos',
-
-   'caption-search': 'Search captions',
-
-   c2pa: 'C2PA',
-   'view-more': 'Learn more',
-   'c2pa-invalid-claim': 'Content credentials are incomplete or missing',
-   'c2pa-exception-subtitle': 'Unexpected error occurred while validating content provenance',
-   'c2pa-unverified-claim': 'Content credentials are unverified',
-   'c2pa-no-data-message': 'Video is missing provenance information. Video owner cannot be established',
-   'c2pa-video-credentials-status': 'Video credentials status:',
-   'c2pa-status-valid': 'Valid',
-   'c2pa-status-invalid': 'Invalid',
-   'c2pa-status-incomplete': 'Incomplete',
-   'c2pa-status-unknown': 'Unknown',
-   'c2pa-signature-valid': 'Digital signature is valid',
-   'c2pa-signature-valid-extended': 'Digital signature is valid. All tracks pass validation and are signed by the owner.',
-   'c2pa-issued-to': 'Issued to:',
-   'c2pa-issued-by': 'Issued by:',
-   'c2pa-encoded-by': 'Encoded by:',
-   'c2pa-video-owner': 'Video owner:',
-   'c2pa-signature-invalid': 'Content credentials have been changed, and authenticity cannot be verified',
-   next: 'Next',
-   prev: 'Previous',
-
-   error: 'An error occurred while playing the media.'
-};
-
-export default i18n;

package/src/config/options.js

@@ -1,123 +0,0 @@
-// import type { Player$InputOptions } from '../types/Options';
-
-import { AUTO_MODE } from './playlist';
-
-/* eslint camelcase: 0 */
-
-const DEFAULT_OPTIONS = {
-   // logger: null,
-   loggerLevel: 2,
-
-   timecode: 0,
-   frameRate: 23.976,
-
-   autoStart: false,
-   startTime: null,
-   endTime: null,
-
-   useNativeControls: false,
-
-   useOriginTimeForPreview: true,
-
-   playlistmode: AUTO_MODE,
-   plalistAutoGoNext: true,
-   playlistitle: '',
-   playlistforcepoint: 0,
-
-   showExtensions: true,
-   alwaysShowExtensions: false,
-   extensionsVisibilityTimeout: 2000,
-
-   showPlay: true,
-   showProgress: true,
-   showVolume: true,
-   showFullScreen: true,
-   showClosedCaptions: true,
-   showTOC: true,
-   showAnnotations: true,
-   showQuality: true,
-   showAudioTracks: false,
-   showPoster: true,
-   showError: false,
-   showPlaceholder: true,
-   showPlaybackRate: true,
-   showForward: true,
-   showBackward: true,
-   showSettings: true,
-   showDownload: true,
-   showDownloadVideo: true,
-   showDownloadCC: false,
-   showBottomNext: false,
-   showBottomPrev: false,
-   showCaptionSearch: false,
-   showCrawl: false,
-   crawl: {},
-   downloadVideoURL: null,
-
-   showHelp: true,
-   showTitle: true,
-   showNext: false,
-   showNextFrame: false,
-   showPrevFrame: false,
-   showCCLayout: true,
-   showTheaterMode: false,
-   useMux: false,
-   showSubtitles: false,
-   skipDelta: 10,
-   keyboardListeners: {},
-   globalKeyboardListeners: false,
-   isHandlingKeyboardEvents: true,
-
-   bufferingTimeout: 200,
-
-   // qualityLevel: null,
-   // startLevel: null,
-
-   hls: {
-      maxFragLookUpTolerance: 0.001,
-      maxMaxBufferLength: 60 // 60 s = 1 min; default - 10 min
-   },
-
-   shaka: {},
-
-   mux: {
-      env_key: '', // required
-      page_type: 'watchpage', // (see docs) 'watchpage', 'iframe', or leave empty
-      viewer_user_id: '', // ex: '12345'
-      experiment_name: '', // ex: 'player_test_A'
-      sub_property_id: '', // ex: 'cus-1'
-
-      // Player Metadata
-      player_name: 'RavnurPlayer',
-      player_version: '3.3.3',
-      player_init_time: '', // ex: 1451606400000
-
-      // Video Metadata (cleared with 'videochange' event)
-      video_id: '', // ex: 'abcd123'
-      video_title: '', // ex: 'My Great Video'
-      video_series: '', // ex: 'Weekly Great Videos'
-      video_producer: '', // ex: 'Bob the Producer'
-      video_content_type: '', // 'short', 'movie', 'episode', 'clip', 'trailer', or 'event'
-      video_language_code: '', // ex: 'en'
-      video_variant_name: '', // ex: 'Spanish Hard Subs'
-      video_variant_id: '', // ex: 'abcd1234'
-      video_duration: '', // in milliseconds, ex: 120000
-      video_stream_type: 'on-demand', // 'live' or 'on-demand'
-      video_encoding_variant: '', // ex: 'Variant 1'
-      video_cdn: '' // ex: 'Fastly', 'Akamai'
-   },
-
-   i18n: null,
-
-   hlsjsURL    : 'https://cdn.jsdelivr.net/npm/hls.js@1.5.17/dist/hls.min.js',
-   shakaURL    : 'https://cdn.jsdelivr.net/npm/shaka-player@4.16.0/dist/shaka-player.compiled.min.js',
-   flashPath   : '/',
-   muxURL      : 'https://src.litix.io/core/4/mux.js',
-
-   disableAutoUrlRewrite: false,
-
-   useHTMLPlayer: false,
-   useHLSJSPlayer: false
-};
-
-export default DEFAULT_OPTIONS;

package/src/config/playlist.js

@@ -1,9 +0,0 @@
-// @flow
-
-import type { Player$PlaylistMode } from '../types/Playlist';
-
-export const BOTTOM_MODE: Player$PlaylistMode = 'bottom';
-export const RIGHT_MODE: Player$PlaylistMode  = 'right';
-export const AUTO_MODE: Player$PlaylistMode   = 'auto';
-
-export const PLAYLIST_MODES  = [ AUTO_MODE, BOTTOM_MODE, RIGHT_MODE ];

package/src/config/source.js

@@ -1,23 +0,0 @@
-// @flow
-
-// import type { Player$Source } from '../types/Source';
-
-const SOURCE_OPTIONS = {
-   annotations: null,
-   chapters: null,
-   cc: null,
-   preview: null,
-   poster: null,
-
-   title: '',
-
-   nextTrackTitle: '',
-   nextTrackThumbnails: '',
-
-   clip: null, // [ 10, 300 ] sec
-
-   // inner props
-   isAudio: false
-};
-
-export default SOURCE_OPTIONS;

package/src/config/statuses.js

@@ -1,8 +0,0 @@
-// @flow
-
-import type { Player$SourceStatus } from '../types/Source';
-
-export const APPROVED_TIMEDATA_STATUS: Player$SourceStatus = 2;
-export const UNAPPROVED_TIMEDATA_STATUS: Player$SourceStatus = 1;
-export const TRANSLATABLE_TIMEDATA_STATUS: Player$SourceStatus = 0;
-export const UNTRANSLATED_TIMEDATA_STATUS: Player$SourceStatus = 3;

package/src/config/styles.js

@@ -1,16 +0,0 @@
-// @flow
-import type { Player$Styles } from '../types/Styles';
-
-const DEFAULT_STYLES: Player$Styles = {
-   accentColor: '#81d4fa',
-   mainColor: '#fff',
-   submenuBgColor: '#eee',
-   submenuColor: '#333',
-   chaptersBubbleColor: '#1565C0',
-
-   pltHeight: '135px',
-
-   rplaylistHeight: '30%'
-};
-
-export default DEFAULT_STYLES;

package/src/entity.js

@@ -1,27 +0,0 @@
-// @flow
-import { addEvent, removeEvent, each } from './utils';
-
-import MicroEvent from './microevent';
-
-import type { Player$Logger } from './types/Logger';
-
-export default class Entity {
-   _tokens: Array<mixed> = []
-   bus: MicroEvent
-   logger: Player$Logger
-
-   constructor(bus: MicroEvent, logger: Player$Logger) {
-      this.bus = bus;
-      this.logger = logger;
-   }
-
-   addEvent(el: EventTarget, event: string, callback: (Event) => void, useCapture: boolean = false) {
-      const token = addEvent(el, event, callback, useCapture);
-      this._tokens.push(token);
-   }
-
-   destroy() {
-      each(this._tokens, removeEvent);
-      this._tokens.length = 0;
-   }
-}

package/src/events.js

@@ -1,5 +0,0 @@
-export default [
-   'loadstart', 'progress', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata',
-   'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', 'seeking', 'seeked', 'timeupdate', 'ended',
-   'ratechange', 'durationchange', 'volumechange'
-];

package/src/extensions/annotations.js

@@ -1,142 +0,0 @@
-import BaseExtension from './base';
-
-import {
-   createElement, existy, inRange, find, addClass, removeClass, remove, map, isArray
-} from '../utils';
-
-import load from './helpers/transport';
-import timeCodeToSeconds from './helpers/timeCodeToSeconds';
-import createSvg, { CROSS } from '../svgs';
-
-const OUTER_CN = 'rmp-annotation';
-const OUTER_VISIBLE_CN = `${OUTER_CN}--visible`;
-const OUTER_HOLDER_CN = `${OUTER_CN}__holder`;
-const OUTER_BUTTON_CN = `${OUTER_CN}__button`;
-
-const URL_REGEX = /(https?:\/\/[^\s]+)/g;
-const CROSS_SIZE = 16;
-
-export default class AnnotationsExtension extends BaseExtension {
-   /** @type {Array} */
-   annotations = [];
-   /** @type {Array} */
-   sources = [];
-   /** @type {Object} */
-   current = null;
-
-   constructor(player, state, options) {
-      super(player, state, options, ['timeupdate', 'annotationslang']);
-      this.logger.debug('annotations:extension:creating');
-
-      this.render();
-      this.init();
-
-      this.logger.debug('annotations:extension:created');
-   }
-
-   init() {
-      this.addEvent(this.$button, 'click', () => {
-         remove(this.annotations, this.current);
-         removeClass(this.$outer, OUTER_VISIBLE_CN);
-         this.current = null;
-         this.player.focus();
-      });
-
-      const { annotations } = this.options;
-      this.sources = isArray(annotations) ? annotations : [annotations];
-   }
-
-   onAnnotationslang(lang) {
-      this.annotations.length = 0;
-      this.current = null;
-      this.onTimeupdate();
-      const source = find(this.sources, s => s.srclang === lang );
-      if (source) {
-         load({ url: source.src, success: (resp) => {
-            try {
-               this.annotations = map( JSON.parse(resp.data), _convert);
-               this.onTimeupdate();
-            } catch (e) {
-               this.logger.error('Error occurred when parsing the response', resp.data, e);
-            }
-         }});
-      }
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$outer = createElement('div', { class: OUTER_CN } );
-
-      this.$button = createElement('button', { type: 'button', class: OUTER_BUTTON_CN }, this.$outer);
-      this.$button.setAttribute('aria-label', 'Close annotation');
-
-      createSvg(this.$button, CROSS, { width: CROSS_SIZE, height: CROSS_SIZE });
-
-      this.$outerHolder = createElement('div', { class: OUTER_HOLDER_CN }, this.$outer);
-   }
-
-   onTimeupdate() {
-      const time = this.player.getCurrentTime();
-      if ( existy(this.current) && inRange(time, this.current.from, this.current.to) ) {
-         return;
-      }
-
-      this.current = find(this.annotations, ann => inRange(time, ann.from, ann.to));
-
-      if ( existy(this.current) ) {
-         _applyStyles(this.$outer, this.current);
-         _insertText(this.$outerHolder, this.current.text);
-         addClass(this.$outer, OUTER_VISIBLE_CN);
-      } else {
-         removeClass(this.$outer, OUTER_VISIBLE_CN);
-      }
-   }
-
-   getOuter() {
-      return this.$outer;
-   }
-
-   destroy() {
-      super.destroy();
-
-      if (this.$outer) {
-         const parent = this.$outer.parentNode;
-         parent.removeChild(this.$outer);
-         this.$outer = null;
-      }
-   }
-}
-
-function _wrapURLs(text) {
-   return text.replace(URL_REGEX, '<a href="$1">$1</a>');
-}
-
-function _wrapNewLine(text) {
-   return text.replace(/\n/g, '<br />');
-}
-
-function _convert({ text, starts, ends, top, left, width, height, fontsize, fontcolor, background }) {
-   return {
-      text, top, left, width, height, fontsize, fontcolor, background,
-      from: timeCodeToSeconds(`${starts.hh}:${starts.mm}:${starts.ss}`),
-      to: timeCodeToSeconds(`${ends.hh}:${ends.mm}:${ends.ss}`)
-   };
-}
-
-function _applyStyles(element, ann) {
-   element.style.top = `${ann.top}px`;
-   element.style.left = `${ann.left}px`;
-   element.style.width = `${ann.width}px`;
-   element.style.height = `${ann.height}px`;
-
-   element.style.fontSize = ann.fontsize;
-   element.style.color = `#${ann.fontcolor}`;
-   element.style.backgroundColor = `#${ann.background}`;
-}
-
-function _insertText(element, text) {
-   element.textContent = text;
-   let html = _wrapURLs(element.innerHTML);
-   html = _wrapNewLine(html);
-   element.innerHTML = html;
-}

package/src/extensions/audio-tarcks.js

@@ -1,115 +0,0 @@
-import BaseExtension from './base';
-
-import { createElement, addClass, removeClass, each, toArray } from '../utils';
-
-import opener from './helpers/clickOpener';
-import popover from './helpers/popover';
-import createSvg, { HEADPHONE } from '../svgs';
-
-const CN = 'rmp-ext-audio-tracks';
-const BUTTON_CN = `${CN}__button`;
-const SELECTOR_CN = `${CN}__selector`;
-const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
-
-const ITEM_CN = `${CN}__item`;
-const ITEM_CHECKED_CN = `${ITEM_CN}--checked`;
-
-export default class AudioTracksExtension extends BaseExtension {
-   constructor(player, state, options) {
-      super(player, state, options, ['loadeddata', 'audiotrackswitched']);
-      this.logger.debug('audio-tracks:extension:creating');
-
-      this.render();
-      this.init();
-
-      this.logger.debug('audio-tracks:extension:created');
-   }
-
-   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, tabindex: -1 }, this.$el);
-
-      createSvg(this.$button, HEADPHONE);
-   }
-
-   init() {
-      const $button = this.$button,
-         $selector = this.$selector,
-         reposition = false,
-         closeOnClick = true,
-         heightControl = true;
-      popover(this, { $button, text: this.$t('audio-tracks') });
-      opener(this, {
-         $button,
-         $selector,
-         SELECTOR_OPEN_CN,
-         reposition,
-         closeOnClick,
-         heightControl,
-         firstFocusItemSelector: `.${ITEM_CN}`
-      });
-   }
-
-   _renderAudioTracks() {
-      // fix RAV-411
-      each(toArray(this.$selector.childNodes), (btn) =>
-         this.$selector.removeChild(btn)
-      );
-
-      const audioTrackIdx = this.player.getAudioTrack();
-
-      const items = [];
-      each(this.player.getAudioTracks(), (track, idx) => {
-         if (!track || typeof track !== 'object') {
-            return;
-         }
-         const item = createElement(
-            'button',
-            { type: 'button', class: ITEM_CN },
-            this.$selector
-         );
-         item.textContent = track.name || track.label;
-
-         if (+idx === audioTrackIdx) {
-            addClass(item, ITEM_CHECKED_CN);
-         }
-
-         this.addEvent(item, 'click', () => {
-            each(items, (el) => removeClass(el, ITEM_CHECKED_CN));
-            addClass(item, ITEM_CHECKED_CN);
-            this.player.setAudioTrack(track.id);
-         });
-         items.push(item);
-      });
-   }
-
-   onAudiotrackswitched() {
-      this._renderAudioTracks();
-   }
-
-   onLoadeddata() {
-      if (this.player.isMultiAudioTracks()) {
-         this._renderAudioTracks();
-      } else {
-         this.$el.style.display = 'none';
-      }
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-      const parent = this.$el.parentNode;
-      parent.removeChild(this.$el);
-      this.$el = null;
-   }
-}

package/src/extensions/backward.js

@@ -1,45 +0,0 @@
-import BaseExtension from './base';
-
-import createElement from '../utils/createElement';
-
-import popover from './helpers/popover';
-
-import createSvg, { BACKWARD } from '../svgs';
-
-const CN = 'rmp-ext-backward';
-
-export default class BackwardExtension extends BaseExtension {
-   constructor(player, state, options) {
-      super(player, state, options);
-      this.logger.debug('backward:extension:creating');
-
-      this.render();
-      this.addEvent(this.$el, 'click', this.backward.bind(this));
-
-      this.logger.debug('backward:extension:created');
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$el = createElement('button', { type: 'button', class: CN });
-      setTimeout(() => popover(this, { $button: this.$el, text: this.$t('backward') }) );
-      createSvg(this.$el, BACKWARD);
-   }
-
-   backward() {
-      this.player.setCurrentTime(this.player.getCurrentTime() - this.options.skipDelta);
-      this.bus.emit('heartbeatextensions');
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-
-      const parent = this.$el.parentNode;
-      parent.removeChild(this.$el);
-      this.$el = null;
-   }
-}