ravnur-player-public 3.4.2 → 3.4.4

package/src/players/base.js

@@ -0,0 +1,209 @@
+// @flow
+import Entity from '../entity';
+
+import type { Player$ControllerOptions } from '../types/Options';
+
+const MS_IN_SEC = 1000;
+
+export default class BasePlayer extends Entity {
+   options: Player$ControllerOptions
+   state;
+   constructor(options: Player$ControllerOptions, state) {
+      super(options.bus, options.logger);
+      this.state = state;
+      this.logger.debug('player:created');
+      this.options = options;
+      setTimeout( () => this.getElement().setAttribute('tabindex', '-1') );
+   }
+
+   focus() {
+      let el = this.getElement();
+      // fix for ff
+      if ( this.options.isAudio ) {
+         // $FlowFixMe
+         el = el.parentNode.parentNode;
+      }
+
+      if ( el && el instanceof HTMLElement ) {
+         el.focus();
+      }
+   }
+
+   getTimeCode(): number {
+      return this.options.timecode;
+   }
+
+   getCurrentTime() {
+      return this.getElement().currentTime + this.getTimeCode();
+   }
+
+   setCurrentTime(time: number, silent: ?boolean = true) {
+      if (!this.getElement()) return;
+
+      time -= this.getTimeCode();
+
+      const { clip } = this.options;
+      if ( clip ) {
+         let [ start, end ]  = clip;
+         start = start || 0;
+         end = end || this.getElement().duration;
+         time = Math.max(time, start);
+         time = Math.min(time, end);
+      }
+
+      this.getElement().currentTime = time;
+      if ( !silent ) {
+         this.focus();
+      }
+   }
+
+   nextFrame() {
+      const frameDuration = this._getFrameDuration();
+      let time = this.getElement().currentTime;
+      let frameNumber = Math.floor(time * MS_IN_SEC / frameDuration);
+      time = Math.ceil(++frameNumber * frameDuration) / MS_IN_SEC;
+      this.setCurrentTime(time + this.getTimeCode());
+   }
+
+   prevFrame() {
+      const frameDuration = this._getFrameDuration();
+      let time = this.getElement().currentTime;
+      let frameNumber = Math.floor(time * MS_IN_SEC / frameDuration);
+      time = Math.ceil(--frameNumber * frameDuration) / MS_IN_SEC;
+      this.setCurrentTime(time + this.getTimeCode());
+   }
+
+   isPaused() {
+      if (!this.getElement()) return false;
+      return this.getElement().paused;
+   }
+
+   isEnded() {
+      if (!this.getElement()) return false;
+
+      const { clip } = this.options;
+      if ( clip ) {
+         const duration = this.getElement().duration;
+         let [ start, end ]  = clip; // eslint-disable-line no-unused-vars
+         end = end || duration;
+         end += this.getTimeCode();
+         return this.getCurrentTime() >= end;
+      }
+      return this.getElement().ended;
+   }
+
+   play(silent: ?boolean = true) {
+      this.bus.emit('handle-play-clicked');
+      if (!silent) {
+         this.focus();
+      }
+
+      const { clip } = this.options;
+      if ( this.isEnded() && clip ) {
+         const [ start ] = clip;
+         this.setCurrentTime(start || 0);
+      }
+      return this.getElement().play();
+   }
+
+   pause(silent: ?boolean = true) {
+      if (!silent) {
+         this.focus();
+      }
+      return this.getElement().pause();
+   }
+
+   getDuration() {
+      if (!this.getElement()) return '';
+
+      let duration = this.getElement().duration;
+      const { clip } = this.options;
+      if ( clip ) {
+         let [ start, end ]  = clip;
+         start = start || 0;
+         end = end || duration;
+         duration = end - start;
+      }
+      return duration + this.getTimeCode();
+   }
+
+   isMuted() {
+      return this.getElement().muted;
+   }
+
+   setMuted(muted: boolean, silent: ?boolean = true) {
+      this.getElement().muted = muted;
+      if (!silent) {
+         this.focus();
+      }
+   }
+
+   getVolume() {
+      return this.getElement().volume;
+   }
+
+   setVolume(volume: number, silent: ?boolean = true) {
+      this.getElement().volume = volume;
+      if (!silent) {
+         this.focus();
+      }
+   }
+
+   destroy() {
+      this.logger.debug('player:destroy');
+      super.destroy();
+   }
+
+   getLevels() {
+      throw new Error('You must override it');
+   }
+
+   getLevel() {
+      throw new Error('You must override it');
+   }
+
+   setLevel(/* level */) {
+      throw new Error('You must override it');
+   }
+
+   isMultiAudioTracks() {
+      return this.getAudioTracks().length > 1;
+   }
+
+   getAudioTracks() {
+      return [];
+   }
+
+   getAudioTrack() {
+      return 0;
+   }
+
+   setAudioTrack(idx) {
+      // noop;
+   }
+
+   getTextTracks() {
+      // noop;
+   }
+
+   load(/* sources */) {
+      throw new Error('You must override it');
+   }
+
+   isMultiQuality(): boolean {
+      // eslint-disable-next-line no-magic-numbers
+      return this.getLevels().length > 1;
+   }
+
+   getBufferedPercent(): number {
+      return 0;
+   }
+
+   getElement(): HTMLVideoElement | HTMLAudioElement {
+      throw new Error('You must override it');
+   }
+
+   _getFrameDuration(): number {
+      return MS_IN_SEC / this.options.frameRate;
+   }
+}

package/src/players/flash.js

@@ -0,0 +1,172 @@
+import BasePlayer from './base';
+
+import MediaElement from '../flash/MediaElement';
+
+import { get, createElement, toArray, find, first, isArray } from '../utils';
+
+import type { Player$Options } from '../types/Options';
+
+const AUTO_LEVEL = { name: 'Auto', index: -1 };
+
+export default class FlashPlayer extends BasePlayer {
+   $el: HTMLAudioElement | HTMLVideoElement
+   _levels = [];
+   _currentLevel = null;
+
+   mediaElement: ?MediaElement = null
+
+   constructor(options: Player$Options, state) {
+      super(options, state);
+      this.logger.debug('flash:controller:creating');
+
+      this.$el = createElement(options.isAudio ? 'audio' : 'video');
+
+      this.onFullScreenChanged = this.onFullScreenChanged.bind(this);
+
+      this.logger.debug('flash:controller:created');
+   }
+
+   load({src}) {
+
+      if ( isArray(src) ) {
+         this._levels = src;
+         this._currentLevel = find(this._levels, lvl => lvl.default) || first(this._levels);
+         src = this._currentLevel.src;
+      }
+
+      this.logger.debug('flash:controller:loading', src);
+
+      const mediaElement = new MediaElement(this.$el, this.options);
+      this.mediaElement = mediaElement;
+      mediaElement.setSrc(src);
+      mediaElement.setSize('100%', '100%');
+
+      mediaElement.play();
+
+      this.bus.once('loadedmetadata', () => {
+         mediaElement.pause();
+
+         if (this.options.qualityLevel) {
+            const h = parseInt(this.options.qualityLevel, 10);
+            const level = find(this.getLevels(), l => l.height === h);
+            if (level) {
+               this.setLevel(level);
+               this.bus.emit('qualitychange', `${h}p`);
+            }
+         }
+      });
+
+      if (this.options.isAudio) {
+         mediaElement.pause();
+         this.bus.once('canplaythrough', () => {
+            mediaElement.pause();
+            this.bus.emit('loadedmetadata');
+         });
+      }
+
+      this.bus.on('fullscreenchanged', this.onFullScreenChanged);
+      this.bus.on('cclayoutchange', this.onFullScreenChanged);
+   }
+
+   isHLS() {
+      return get(this.mediaElement, 'rendererName') === 'flash_hls';
+   }
+
+   getLevels() {
+      if (this.isHLS()) {
+         const levels = toArray(this.mediaElement.levels);
+         return [ AUTO_LEVEL ].concat(levels);
+      }
+      return this._levels;
+   }
+
+   setLevel(level) {
+      if (this.isHLS()) {
+         this.mediaElement.level = level.index;
+      } else if ( this._currentLevel !== level ) {
+         const currentTime = this.mediaElement.currentTime;
+         const paused = this.mediaElement.paused;
+         this._currentLevel = level;
+         this.mediaElement.setSrc(level.src);
+         this.mediaElement.setSize('100%', '100%');
+         this.mediaElement.play();
+         this.bus.once('loadedmetadata', () => {
+            this.mediaElement.currentTime = currentTime;
+            this.mediaElement.pause();
+            this.mediaElement.play();
+            if (paused) {
+               this.mediaElement.pause();
+            }
+         });
+      }
+   }
+
+   getLevel() {
+      if (this.isHLS()) {
+         return this.mediaElement.levels[this.getElement().currentLevel] || AUTO_LEVEL;
+      }
+      return this._currentLevel;
+   }
+
+   getElement() {
+      return this.mediaElement;
+   }
+
+   setCurrentTime(time: number, silent: ?boolean = true) {
+      const paused = this.isPaused();
+      this.pause(silent);
+      super.setCurrentTime(time, silent);
+      if ( !paused ) {
+         this.play(silent);
+      }
+   }
+
+   isMultiQuality() {
+      const levels = this.isHLS() ? this.mediaElement.levels : this._levels;
+      // eslint-disable-next-line no-magic-numbers
+      return levels.length > 1;
+   }
+
+   onFullScreenChanged(isFullScreen: ?boolean = false) {
+      if (isFullScreen) {
+         const { mediaElement } = this;
+         if (mediaElement) {
+            mediaElement.setSize('100%', '100%');
+         }
+      } else {
+         setTimeout(() => this._resizeME());
+      }
+   }
+
+   _resizeME() {
+      const parent = this.$el.parentNode;
+      const me = this.mediaElement;
+      if (parent && me && parent instanceof HTMLElement) {
+         const width = parent.offsetWidth;
+         const height = parent.offsetHeight;
+         me.setSize(`${width}px`, `${height}px`);
+      }
+   }
+
+   getBufferedPercent() {
+      const $el = this.mediaElement;
+      return $el.buffered.end($el.buffered.length - 1) / $el.duration;
+   }
+
+   destroy() {
+      this.pause();
+      const { mediaElement } = this;
+      if ( mediaElement ) {
+         mediaElement.renderer.hide();
+      }
+      super.destroy();
+      this.bus.off('fullscreenchanged', this.onFullScreenChanged);
+      this.bus.off('cclayoutchange', this.onFullScreenChanged);
+
+      if (mediaElement) {
+         mediaElement.removeChild(this.$el);
+         mediaElement.parentNode.removeChild(mediaElement);
+      }
+      this.mediaElement = null;
+   }
+}

package/src/players/hls.js

@@ -0,0 +1,278 @@
+import HTMLPlayer from './html';
+
+// import { C2PA, ValidationResult, C2PAValidationError } from '@ravnur-inc/c2pa';
+import {
+   findIndex,
+   existy,
+   createElement,
+   first,
+   isArray,
+   isObject,
+   head,
+   extend,
+   find
+   // isEqualBuffer
+} from '../utils';
+
+const AUTO_LEVEL = { name: 'Auto' };
+const HLS_OPTIONS = {
+   maxFragLookUpTolerance: 0.5,
+   maxMaxBufferLength: 600,
+   highBufferWatchdogPeriod: 3,
+   playlistLoadPolicy: {
+      default: {
+         maxTimeToFirstByteMs: 10000,
+         maxLoadTimeMs: 120000,
+         timeoutRetry: {
+            maxNumRetry: 10,
+            retryDelayMs: 0,
+            maxRetryDelayMs: 0
+         },
+         errorRetry: {
+            maxNumRetry: 10,
+            retryDelayMs: 3000,
+            maxRetryDelayMs: 8000
+         }
+      }
+   }
+};
+
+export default class HLSPlayer extends HTMLPlayer {
+   constructor(options, state) {
+      super(options, state);
+      this.logger.debug('hls:player:created');
+   }
+
+   load({ src }) {
+      src = isArray(src) ? head(src) : src;
+      src = isObject(src) ? src.src : src;
+      this.logger.debug('hls:player:loading', src);
+
+      if (existy(window.Hls)) {
+         this._attachMedia(src);
+      } else {
+         this._loadLibraryAndAttachMedia(src);
+      }
+   }
+
+   _loadLibraryAndAttachMedia(src) {
+      // use requiresjs if we can
+      if (typeof window.define === 'function' && window.define.amd) {
+         window.require.config({
+            paths: {
+               hlsjs: this.options.hlsjsURL
+            }
+         });
+
+         window.require(['hlsjs'], hls => {
+            window.Hls = hls;
+            this._attachMedia(src);
+         });
+      } else {
+         const script = createElement('script', { src: this.options.hlsjsURL });
+         const firstScriptTag = first(document.getElementsByTagName('script'));
+         script.onload = script.onreadystatechange = () => this._attachMedia(src);
+
+         if (!firstScriptTag.parentNode) return;
+
+         firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
+      }
+   }
+
+   _attachMedia(src) {
+      const Hls = window.Hls;
+      if (Hls.isSupported()) {
+         this.hls = new Hls(extend(HLS_OPTIONS, this.options.hls));
+
+         // if (this.options.showC2PA) {
+         //    this.c2pa = new C2PA((status, data) => {
+         //       switch (status) {
+         //       case ValidationResult.Complete:
+         //          this.bus.emit('c2painit', { status, data });
+         //          break;
+         //       case ValidationResult.NoData:
+         //          this.bus.emit('c2painit', { status, data });
+         //          break;
+         //       case ValidationResult.Failed:
+         //          this.bus.emit('c2painit', { status, data });
+         //          if (!(data instanceof C2PAValidationError)) {
+         //             this.bus.emit('c2paexception');
+         //          }
+         //          break;
+         //       default:
+         //          console.debug(`[HLS] Unrecognized status ${status}`);
+         //       }
+         //    });
+
+         //    // The video init segment is parsing
+         //    this.hls.on(Hls.Events.FRAG_PARSING_INIT_SEGMENT, (name, data) => {
+         //       console.debug(`[HLS] Executed ${name} handler, data: ${data}`);
+
+         //       this.c2pa.initSegment(data);
+         //    });
+
+         //    // The video segment is appending to buffer
+         //    this.hls.on(Hls.Events.BUFFER_APPENDING, (name, data) => {
+         //       console.debug(`[HLS] Executed ${name} handler, data: ${data}`);
+
+         //       // Check whether buffered segment is init segment
+         //       if (isEqualBuffer(data.data, data.frag.initSegment.data)) {
+         //          return;
+         //       }
+
+         //       // TODO: c2pa.validateSegment should define own data model, not just accept hls event data
+         //       data.data1 = data.data;
+         //       this.c2pa.validateSegment(data, validationResult => {
+         //          this.bus.emit('c2pafragment', validationResult);
+         //       });
+         //    });
+         // }
+
+         this.hls.loadSource(src);
+         this.hls.attachMedia(this.$el);
+
+         this.hls.on(Hls.Events.ERROR, (a, data) => {
+            this.bus.emit('error', data);
+            this.logger.error(data);
+         });
+
+         this.hls.on(Hls.Events.AUDIO_TRACK_SWITCHED, () => {
+            this.bus.emit('audiotrackswitched');
+         });
+
+         this.hls.on(Hls.Events.MANIFEST_PARSED, (a, data) => {
+            if (!this.options.showSubtitles) {
+               this.hls.subtitleDisplay = false;
+            }
+
+            if (this.options.qualityLevel) {
+               const h = parseInt(this.options.qualityLevel, 10);
+               if (h) {
+                  const level = find(data.levels, l => l.height === h);
+                  if (level) {
+                     this.setLevel(level);
+                  }
+               }
+            }
+
+            if (this.options.maxQualityLevel) {
+               this.limitLevel(this.options.maxQualityLevel);
+            }
+
+            if (this.options.startLevel) {
+               const h = parseInt(this.options.startLevel, 10);
+               if (h) {
+                  const idx = findIndex(data.levels, l => l.height === h);
+                  this.hls.startLevel = idx;
+               }
+            }
+         });
+
+         this.hls.on(Hls.Events.BUFFER_CREATED, () => {
+            if (this.options.isLive) {
+               this.goToLive();
+            }
+         });
+
+         // Encryption. Token should be passed as an option or as a query parameter
+         if (this.options.aesToken) {
+            let descriptionUrl;
+
+            this.hls.config.xhrSetup = (xhr, url) => {
+               xhr.addEventListener('load', () => {
+                  if (typeof xhr.response === 'string' && xhr.response.indexOf('#EXTM3U') >= 0) {
+                     const lines = xhr.response.split('\n');
+                     const keyLine = lines.find(line => line.indexOf('#EXT-X-KEY') === 0);
+                     const keyUrl = keyLine?.split('URI="')[1].split('"')[0];
+                     const urlBase = 'https://' + url.split('/')[2];
+                     const finalUrl = urlBase + keyUrl;
+
+                     if (keyUrl) {
+                        descriptionUrl = finalUrl;
+                     }
+                  }
+               });
+
+               if (url === descriptionUrl) {
+                  xhr.setRequestHeader('Authorization', 'Bearer ' + this.options.aesToken);
+               }
+            };
+         } else {
+            // append all query parameters to the subsequent requests
+            const query = src.split('?')[1];
+
+            if (query) {
+               this.hls.config.xhrSetup = (xhr, url) => {
+                  xhr.open('GET', url + `?${query}`, true);
+               };
+            }
+         }
+      } else {
+         this.logger.error('HLS is not supported for this browser');
+      }
+   }
+
+   goToLive() {
+      if (!this.hls.media) {
+         return;
+      }
+
+      this.logger.debug('hls:player:live');
+      this.hls.media.currentTime = this.hls.liveSyncPosition || this.hls.media.duration - 10;
+   }
+
+   isLive() {
+      if (this.hls?.liveSyncPosition) {
+         return this.hls?.media.currentTime >= (this.hls?.liveSyncPosition - 10);
+      }
+
+      return this.hls?.media.currentTime >= (this.hls?.media.duration - 10); // Default to 10s from duration
+   }
+
+   getLevels() {
+      return [AUTO_LEVEL].concat(this.hls.levels);
+   }
+
+   setLevel(level) {
+      const idx = findIndex(this.hls.levels, level);
+      this.hls.currentLevel = idx;
+   }
+
+   limitLevel(level) {
+      const h = parseInt(level, 10);
+      if (h) {
+         const idx = findIndex(this.hls.levels, l => l.height === h);
+         this.hls.autoLevelCapping = idx;
+      }
+   }
+
+   getLevel() {
+      return this.hls.levels[this.hls.manualLevel] || AUTO_LEVEL;
+   }
+
+   isMultiQuality() {
+      // eslint-disable-next-line no-magic-numbers
+      return this.hls.levels.length > 1;
+   }
+
+   getAudioTracks() {
+      return this.hls.audioTracks;
+   }
+
+   getAudioTrack() {
+      return this.hls.audioTrack;
+   }
+
+   getTextTracks() {
+      return this.$el.textTracks || [];
+   }
+
+   setAudioTrack(idx) {
+      this.hls.audioTrack = idx;
+   }
+
+   destroy() {
+      this.hls.destroy();
+      super.destroy();
+   }
+}