ravnur-player-public 3.4.2 → 3.4.4

package/server.js

@@ -0,0 +1,29 @@
+// var https = require('https');
+var express = require('express');
+var fs = require('fs');
+
+var server = express();
+
+//CORS middleware
+function allowCrossDomain(req, res, next) {
+   res.header('Access-Control-Allow-Origin', '*');
+   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+   res.header('Access-Control-Allow-Headers', 'Content-Type');
+   next();
+}
+
+
+server.use(allowCrossDomain);
+server.use('/lib', express.static('./lib'));
+server.use('/demo', express.static('./demo'));
+server.use('/', express.static('./'));
+
+// server = https.createServer({
+//    key: fs.readFileSync('key.pem'),
+//    cert: fs.readFileSync('cert.pem')
+// }, server);
+
+/* =============== RUNNER =============== */
+server.listen(7890, function() {
+   console.log(`http://localhost:7890/test.html`);
+});

package/src/config/cc.js

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

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

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

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

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

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

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

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

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

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

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