ravnur-player-public 3.4.2 → 3.4.4

package/src/players/html.js

@@ -0,0 +1,205 @@
+import BasePlayer from './base';
+
+import events from '../events';
+
+import { createElement, append, each, find, first, isArray, uidGenerator, findIndex } from '../utils';
+import isIOS from '../helpers/isiOS';
+import {
+   UNTRANSLATED_TIMEDATA_STATUS
+} from '../config/statuses';
+
+export default class HtmlPlayer extends BasePlayer {
+   $el;
+   source;
+   _levels = [];
+   _currentLevel = null;
+
+   constructor(options, state) {
+      super(options, state);
+      this.logger.debug('html:player:creating');
+
+      let tag = 'video';
+      const params = { id: uidGenerator(), tabindex: -1 };
+
+      if ( options.disableAutoFullScreenOnIOS ) {
+         params['webkit-playsinline'] = true;
+         params.playsinline = true;
+      }
+
+      if ( options.isMobile ) {
+         params.preload = 'metadata';
+         // use audio for audio. fix for ios safari RAV-2462
+         tag = options.isAudio ? 'audio' : 'video';
+      }
+
+      /** @type {HTMLMediaElement} */
+      // use video also for audio. fix for opera. RAV-412
+      this.$el = createElement(tag, params);
+
+      each(events, type => {
+         this.addEvent(this.$el, type, event => {
+            this.logger.debug('triggered event', type);
+            this.bus.emit(type, event);
+         });
+      });
+
+      this.handleFullscreenChanging = this.handleFullscreenChanging.bind(this);
+      this.handleWebkitEndFullscreen = this.handleWebkitEndFullscreen.bind(this);
+
+      if (isIOS()) {
+         this.bus.on('fullscreenchanging', this.handleFullscreenChanging);
+      }
+      this.logger.debug('html:player:created');
+   }
+
+   load({type, src, cc}) {
+      let options = { type, src };
+      // i hate opera, safari, iOS
+      if (this.options.isMobile && type === 'audio/mp3') {
+         options = { src };
+      }
+      if ( isArray(src) ) {
+         this._levels = src;
+         if (this.options.qualityLevel) {
+            const h = parseInt(this.options.qualityLevel, 10);
+            if (h) {
+               this._currentLevel = find(this._levels, l => parseInt(l.name, 10) === h);
+            }
+         }
+         this._currentLevel = this._currentLevel || find(this._levels, lvl => lvl.default);
+         this._currentLevel = this._currentLevel || first(this._levels);
+         options.src = this._currentLevel.src;
+      }
+
+      this.logger.debug('html:player:loading', src);
+      this.source = createElement('source', options);
+
+      this.source.addEventListener('error', (e) => {
+         this.bus.emit('error', e);
+         this.logger.error(e);
+      });
+
+      append(this.$el, this.source);
+
+      if (isIOS()) {
+         each(cc, (track) => {
+            if (track.state !== UNTRANSLATED_TIMEDATA_STATUS && track.type !== 'json') {
+               append(this.$el, createElement('track', track));
+            }
+         });
+      }
+
+      if (this.$el.audioTracks) {
+         this.$el.audioTracks.onchange = () => {
+            this.bus.emit('audiotrackswitched');
+         };
+      }
+
+      this.$el.addEventListener('webkitendfullscreen', this.handleWebkitEndFullscreen);
+      if (isIOS()) {
+         this.bus.once('loadeddata', () => {
+            const textTracks = this.getTextTracks();
+            if (textTracks instanceof TextTrackList) {
+               textTracks.addEventListener('change', () => {
+                  const tt = find(textTracks, (tt) => tt.mode === 'showing');
+                  if (tt) {
+                     this.bus.emit('cclang', tt.language);
+                  }
+               });
+            }
+            this.handleWebkitEndFullscreen();
+         });
+      }
+   }
+
+   getLevels() {
+      return this._levels;
+   }
+
+   setLevel(level) {
+      const currentTime = this.$el.currentTime;
+      const paused = this.$el.paused;
+      this._currentLevel = level;
+      this.$el.pause();
+      this.source.src = level.src;
+
+      this.bus.once('loadedmetadata', () => {
+         this.$el.currentTime = currentTime;
+
+         if (!paused) {
+            this.$el.play();
+         }
+
+      });
+      this.$el.currentTime = currentTime;
+      this.$el.load();
+   }
+
+   setPlaybackRate(rate) {
+      this.$el.playbackRate = rate;
+      this.$el.defaultPlaybackRate = rate;
+   }
+
+   getLevel() {
+      return this._currentLevel;
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   getBufferedPercent() {
+      const target = this.$el;
+      if (target && target.buffered && target.buffered.length > 0 && target.buffered.end && target.duration) {
+         return target.buffered.end(target.buffered.length - 1) / target.duration;
+      }
+
+      return 0;
+   }
+
+   getAudioTrack() {
+      return findIndex(this.getAudioTracks(), (track) => track.enabled);
+   }
+
+   getAudioTracks() {
+      return this.$el.audioTracks || [];
+   }
+
+   setAudioTrack(idx) {
+      each(this.getAudioTracks(), (track, index) => {
+         if (track && typeof track === 'object') {
+            track.enabled = index == idx;
+         }
+      });
+   }
+
+   getTextTracks() {
+      return this.$el.textTracks || [];
+   }
+
+   handleFullscreenChanging(flag) {
+      const lang = flag !== true ? this.state.getCCLang() : '__';
+      this._textTrackWalker((track) => track.language === lang ? 'showing' : 'disabled');
+   }
+
+   handleWebkitEndFullscreen() {
+      this.handleFullscreenChanging(this.$el.webkitDisplayingFullscreen);
+   }
+
+   _textTrackWalker(modeFiller) {
+      each(this.getTextTracks(), (track) => {
+         if (track && typeof track === 'object') {
+            track.mode = modeFiller(track);
+         }
+      });
+   }
+
+   destroy() {
+      this.$el.removeEventListener('webkitendfullscreen', this.handleWebkitEndFullscreen);
+      this.bus.off('fullscreenchanging', this.handleFullscreenChanging);
+      super.destroy();
+      this.$el.parentNode.removeChild(this.$el);
+      this.$el = null;
+      this.source = null;
+   }
+}

package/src/players/index.js

@@ -0,0 +1,59 @@
+// @flow
+import HtmlPlayer from './html';
+import HLSPlayer from './hls';
+import FlashPlayer from './flash';
+import ShakaPlayer from './shaka';
+
+import {
+   existy,
+   isFunction,
+   contains
+} from '../utils';
+
+import type { Player$CombineOptions } from '../types/Options';
+
+const CODEC = 'video/mp4; codecs=avc1.42E01E,mp4a.40.2';
+const HLS_TYPES = [ 'application/x-mpegURL', 'vnd.apple.mpegURL', 'application/vnd.apple.mpegurl' ];
+
+export const HLS_TYPE = 'HLS';
+export const FLASH_TYPE = 'Flash';
+export const HTML5_TYPE = 'HTML5';
+export const SHAKA_TYPE = 'Shaka';
+
+const MAP = {};
+MAP[HLS_TYPE] = HLSPlayer;
+MAP[FLASH_TYPE] = FlashPlayer;
+MAP[HTML5_TYPE] = HtmlPlayer;
+MAP[SHAKA_TYPE] = ShakaPlayer;
+
+export default function createInstance(options: $Shape<Player$CombineOptions>, state) {
+   const type = getPlayerType(options);
+   const Player = MAP[type];
+   return new Player(options, state);
+}
+
+export function getPlayerType(opts: $Shape<Player$CombineOptions>) {
+   const {type, logger} = opts;
+
+   if (opts.useHTMLPlayer) {
+      logger.debug('Using html player for type: ', type);
+      return HTML5_TYPE;
+   }
+
+   if (_canUseMediaSource() && (opts.useHLSJSPlayer || opts.isLive)) {
+      logger.debug('Using hlsjs player for type: ', type);
+      return HLS_TYPE;
+   }
+
+   logger.debug('Using shaka player for type: ', type);
+   return SHAKA_TYPE;
+}
+
+export function isHLS(type: string) {
+   return contains(HLS_TYPES, type);
+}
+
+function _canUseMediaSource() {
+   const ms = window.ManagedMediaSource || window.MediaSource || window.WebKitMediaSource;
+   return existy(ms) && isFunction(ms.isTypeSupported) && ms.isTypeSupported(CODEC);
+}

package/src/players/shaka.js

@@ -0,0 +1,219 @@
+import isiOS from '../helpers/isiOS';
+import {
+   first,
+   createElement,
+   isArray,
+   isObject,
+   head
+} from '../utils';
+import HtmlPlayer from './html';
+
+const AUTO_LEVEL = { name: 'Auto' };
+
+export default class ShakaPlayer extends HtmlPlayer {
+   constructor(options, state) {
+      super(options, state);
+      this.logger.debug('shaka:player:created');
+   }
+
+   load({ src, type }) {
+      src = isArray(src) ? head(src) : src;
+      src = isObject(src) ? src.src : src;
+
+      // If the source is a DASH stream
+      // and the device is an iOS device, we need to convert it to HLS
+      if (/format=mpd-time-csf/.test(src) && isiOS() && !this.options.disableAutoUrlRewrite) {
+         type = 'application/x-mpegurl';
+         src = src.replace('format=mpd-time-csf', 'format=m3u8-cmaf');
+      }
+
+      this.onError = this.onError.bind(this);
+
+      this.logger.debug('shaka:player:loading', src);
+      this._loadLibraryAndAttachMedia(src, type);
+   }
+
+   _loadLibraryAndAttachMedia(src, type) {
+      // use requiresjs if we can
+      if (typeof window.define === 'function' && window.define.amd) {
+         window.require.config({
+            paths: {
+               shakajs: this.options.shakaURL
+            }
+         });
+
+         window.require(['shakajs'], shaka => {
+            window.shaka = shaka;
+            this._attachMedia(src, type);
+         });
+      } else {
+         const script = createElement('script', { src: this.options.shakaURL });
+         const firstScriptTag = first(document.getElementsByTagName('script'));
+         script.onload = script.onreadystatechange = () => this._attachMedia(src, type);
+
+         if (!firstScriptTag.parentNode) return;
+
+         firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
+      }
+   }
+
+   async _attachMedia(src, type) {
+      let shakaOptions = this.options.shaka;
+      window.shaka.polyfill.installAll();
+
+      if (window.shaka.Player.isBrowserSupported()) {
+         this.shaka = new window.shaka.Player();
+
+         if (this.options.shaka) {
+            this.shaka.configure(this.options.shaka);
+         }
+
+         this.shaka.setTextTrackVisibility(!!this.options.showSubtitles);
+
+         this.preselectQuality();
+         this.modifyRequests(src);
+
+         if (this.options.maxQualityLevel) {
+            this.limitLevel(this.options.maxQualityLevel);
+         }
+
+         await this.configureDRM();
+         await this.shaka.attach(this.$el);
+
+         // See: https://github.com/shaka-project/shaka-player/issues/9415
+         // Can be removed after Shaka v5 release and Ravnur Player update to Shaka v5
+         const normolizedMimeType = type.toLowerCase();
+
+         await this.shaka.load(src, null, normolizedMimeType).catch(this.onError);
+
+         // Catching errors after load
+         const listener = new window.shaka.util.EventManager();
+         listener.listen(this.shaka, 'error', (e) => this.onError(e.detail));
+
+         this.shaka.configure(shakaOptions);
+      } else {
+         this.logger.error('Browser not supported!');
+      }
+   }
+
+   async configureDRM() {
+      const servers = {};
+
+      if (this.options.widevineURL) {
+         servers['com.widevine.alpha'] = this.options.widevineURL;
+      }
+
+      if (this.options.playreadyURL) {
+         servers['com.microsoft.playready'] = this.options.playreadyURL;
+      }
+
+      if (this.options.fairplayURL) {
+         servers['com.apple.fps.1_0'] = this.options.fairplayURL;
+      }
+
+      this.shaka.configure({ drm: { servers } });
+
+      if (this.options.fairplayCertificateUrl) {
+         const req = await fetch(this.options.fairplayCertificateUrl);
+         const cert = await req.arrayBuffer();
+
+         this.shaka.configure('drm.advanced.com\\.apple\\.fps\\.1_0.serverCertificate', new Uint8Array(cert));
+
+         window.shaka.polyfill.PatchedMediaKeysApple.install();
+
+         const FairPlayUtils = window.shaka.util.FairPlayUtils;
+         this.shaka.getNetworkingEngine().registerRequestFilter(FairPlayUtils.ezdrmFairPlayRequest);
+         this.shaka.getNetworkingEngine().registerResponseFilter(FairPlayUtils.commonFairPlayResponse);
+         this.shaka.configure('drm.initDataTransform', FairPlayUtils.ezdrmInitDataTransform);
+      }
+   }
+
+   onError(event) {
+      this.bus.emit('error', event);
+      this.logger.error(event);
+   }
+
+   modifyRequests(src) {
+      this.shaka.getNetworkingEngine().registerRequestFilter((type, request) => {
+         if (type === window.shaka.net.NetworkingEngine.RequestType.KEY && this.options.aesToken) {
+            request.headers.Authorization = 'Bearer ' + this.options.aesToken;
+         }
+
+         const params = src?.split('?')[1]?.split('&');
+
+         // Append query parameters in case when token is required in the query
+         // check query parameters and if request uri don't contain it add it
+         if (params?.length) {
+            params.forEach((value) => {
+               const requestHadParams = request.uris[0]?.split('?')[1];
+
+               if (!requestHadParams) {
+                  request.uris[0] += '?' + value;
+               } else if (!request.uris[0].includes(value)) {
+                  request.uris[0] += '&' + value;
+               }
+            });
+         }
+      });
+   }
+
+   preselectQuality() {
+      if (!this.options.qualityLevel) {
+         return;
+      }
+
+      const eventManager = new window.shaka.util.EventManager();
+
+      eventManager.listen(this.shaka, 'streaming', () => {
+         const h = parseInt(this.options.qualityLevel, 10);
+         const level = this.getLevels().find(l => l.height === h);
+
+         if (level) {
+            this.setLevel(level);
+         }
+      });
+
+   }
+
+   getLevels() {
+      return [AUTO_LEVEL].concat(this.shaka.getVariantTracks());
+   }
+
+   setLevel(level) {
+      if (level === AUTO_LEVEL) {
+         this.shaka.configure({ abr: { enabled: true } });
+      } else {
+         this.shaka.configure({ abr: { enabled: false } });
+         this.shaka.selectVariantTrack(level, true);
+      }
+   }
+
+   limitLevel(level) {
+      const h = parseInt(level, 10);
+      if (h) {
+         this.shaka.configure({ abr: { restrictions: { maxHeight: h } } });
+      }
+   }
+
+   goToLive() {
+      this.shaka.goToLive();
+   }
+
+   isLive() {
+      return this.$el.currentTime >= this.shaka?.seekRange()?.end - 10;
+   }
+
+   getLevel() {
+      const track = this.shaka.getVariantTracks().find(track => track.active);
+      return this.shaka.getConfiguration().abr.enabled ? AUTO_LEVEL : track;
+   }
+
+   isMultiQuality() {
+      return this.shaka.getVariantTracks().length > 1;
+   }
+
+   destroy() {
+      this.shaka.destroy();
+      super.destroy();
+   }
+}