ravnur-player-public 3.4.4 → 3.4.5

package/src/extensions/play.js

@@ -1,102 +0,0 @@
-import BaseExtension from './base';
-
-import { createElement, removeClass, addClass } from '../utils';
-
-import createSvg, { PAUSE, PLAY, REPLAY } from '../svgs';
-
-import popover from './helpers/popover';
-
-const CN = 'rmp-ext-play';
-const PLAYING_CN = `${CN}--playing`;
-const PAUSED_CN = `${CN}--paused`;
-const ENDED_CN = `${CN}--ended`;
-
-export default class PlayExtension extends BaseExtension {
-   constructor(player, state, options) {
-      super(player, state, options, ['pause', 'play', 'ended', 'seeking']);
-      this.logger.debug('play:extension:creating');
-
-      this.render();
-      this.addEvent(this.$el, 'click', this.toggle.bind(this));
-
-      this.logger.debug('play:extension:created');
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$el = createElement('button', { type: 'button', class: `${CN} ${PAUSED_CN}` });
-
-      setTimeout(() => {
-         const text = () => {
-            if (this.player.isEnded()) {
-               return this.$t('replay');
-            } else if (this.player.isPaused()) {
-               return this.$t('play');
-            }
-            return this.$t('pause');
-         };
-         popover(this, { $button: this.$el, text });
-      });
-
-      createSvg(this.$el, PLAY, {class: 'play'});
-      createSvg(this.$el, PAUSE, {class: 'pause'});
-      createSvg(this.$el, REPLAY, {class: 'replay'});
-   }
-
-   toggle() {
-      if (this.player.isPaused() || this.player.isEnded()) {
-         this.player.play();
-      } else {
-         this.player.pause();
-      }
-   }
-
-   onPause() {
-      this.$el.setAttribute('aria-label', 'Play');
-      removeClass(this.$el, PLAYING_CN);
-      removeClass(this.$el, ENDED_CN);
-      addClass(this.$el, PAUSED_CN);
-   }
-
-   onPlay() {
-      this.$el.setAttribute('aria-label', 'Pause');
-      removeClass(this.$el, PAUSED_CN);
-      removeClass(this.$el, ENDED_CN);
-      addClass(this.$el, PLAYING_CN);
-   }
-
-   onEnded() {
-      if (this.options.playLoop) {
-         this.player.play();
-      } else {
-         this.$el.setAttribute('aria-label', 'Reply');
-         removeClass(this.$el, PAUSED_CN);
-         removeClass(this.$el, PLAYING_CN);
-         addClass(this.$el, ENDED_CN);
-      }
-   }
-
-   onSeeking() {
-      removeClass(this.$el, ENDED_CN);
-      removeClass(this.$el, PAUSED_CN);
-      removeClass(this.$el, PLAYING_CN);
-
-      if (this.player.isPaused()) {
-         addClass(this.$el, PAUSED_CN);
-      } else {
-         addClass(this.$el, PLAYING_CN);
-      }
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-
-      const parent = this.$el.parentNode;
-      parent.removeChild(this.$el);
-      this.$el = null;
-   }
-}

package/src/extensions/poster.js

@@ -1,47 +0,0 @@
-import BaseExtension from './base';
-
-import { createElement, addClass } from '../utils';
-
-const CN = 'rmp-ext-poster';
-const VIDEO_CN = `${CN}--video`;
-const HIDDEN_CN = `${CN}--hidden`;
-
-export default class PosterExtension extends BaseExtension {
-   constructor(player, state, options) {
-      super(player, state, options);
-      this.logger.debug('poster:extension:creating');
-
-      this._hidePoster = this._hidePoster.bind(this);
-      this.render();
-
-      this.logger.debug('poster:extension:created');
-   }
-
-   render() {
-      this.$outer = createElement('div', { class: CN, tabindex: -1 });
-      const img = createElement('img', { src: this.options.poster }, this.$outer);
-      img.setAttribute('aria-label', this.options.title);
-      if (!this.options.isAudio) {
-         addClass(this.$outer, VIDEO_CN);
-         this.bus.on('play', this._hidePoster);
-      }
-   }
-
-   _hidePoster() {
-      addClass(this.$outer, HIDDEN_CN);
-   }
-
-   getOuter() {
-      return this.$outer;
-   }
-
-   destroy() {
-      this.bus.off('play', this._hidePoster);
-      super.destroy();
-      if (this.$outer) {
-         const parent = this.$outer.parentNode;
-         parent.removeChild(this.$outer);
-         this.$outer = null;
-      }
-   }
-}

package/src/extensions/prev-frame.js

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

package/src/extensions/prev.js

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

package/src/extensions/progress.js

@@ -1,465 +0,0 @@
-import BaseExtension from './base';
-
-import {
-   existy, createElement, last, find, inRange, isEmpty, each, removeEvent, addEvent, isNotEmpty, hasClass
-} from '../utils';
-
-import loadVTT from './helpers/vtt-loader';
-import popoverPosition from './helpers/popoverPosition';
-
-import type { Player$State } from '../types/State';
-import addClass from '../utils/addClass';
-
-const CN = 'rmp-ext-progress';
-const CURRENT_TIME_CN = `${CN}__current`;
-const DURATION_TIME_CN = `${CN}__duration`;
-const BAR_CN = `${CN}__bar`;
-const BAR_PADDING_CN = `${CN}__bar-padding`;
-const HANDLE_CN = `${CN}__handle`;
-const OVERALY_CN = `${CN}__overlay`;
-const PLAY_PROGRESS_CN = `${CN}__play-progress`;
-const PROGRESS_CN = `${CN}__progress`;
-const C2PA_STATUS_CN = `${CN}__c2pa-status`;
-const C2PA_STATUS_INVALID_SEGMENT_CN = `${C2PA_STATUS_CN}--invalid-segment`;
-
-const TOOLTIP_CN = `${CN}__tooltip`;
-const TOOLTIP_VISIBLE_CN = `${CN}__tooltip--visible`;
-const THUMBNAIL_CN = `${CN}__thumbmail`;
-const THUMBNAIL_TIME_CN = `${CN}__thumbmail-time`;
-const DISABLE_SLIDE_CN = `${CN}__generic-live-stream`;
-const HIDDEN_CN = `${CN}__hidden`;
-
-const CHAPTER_BUBBLE_CN = `${CN}__chapter-bubble`;
-
-const SECS_IN_HOUR = 3600; // 60 * 60
-const SECS_IN_MIN = 60;
-
-const TEN = 10;
-
-export default class ProgressExtension extends BaseExtension {
-   thumbnails = [];
-   _dragNdropTokens = [];
-   _isLoadedMetadata = false;
-   _chapters = [];
-   _bubbles = [];
-
-   constructor(player, state, options) {
-      super(player, state, options, [
-         'progress', 'timeupdate', 'loadedmetadata', 'canplaythrough', 'statechanged', 'c2pafragment', 'durationchange'
-      ]);
-      this.logger.debug('progress:extension:creating');
-
-      this.onLeave = this.onLeave.bind(this);
-      this.onHover = this.onHover.bind(this);
-      this.onHandleMouseUp = this.onHandleMouseUp.bind(this);
-      this.onHandleMouseDown = this.onHandleMouseDown.bind(this);
-      this.onHandleMouseMove = this.onHandleMouseMove.bind(this);
-      this.onTouchStart = this.onTouchStart.bind(this);
-      this.onTouchMove = this.onTouchMove.bind(this);
-      this.onTouchEnd = this.onTouchEnd.bind(this);
-
-      this.render();
-
-      this.addEvent(this.$bar, 'click', e => {
-         const target = e.target || e.srcElement;
-         if (target === this.$handle) {
-            e.stopPropagation();
-         } else {
-            const time = this._getTimeByEventPosition(e);
-            player.setCurrentTime(time);
-            this._moveHandle2time(time);
-         }
-      });
-
-      this.addEvent(this.$bar, 'mouseleave', this.onLeave);
-      this.addEvent(this.$bar, 'mousemove', this.onHover);
-      this.addEvent(this.$handle, 'mousedown', this.onHandleMouseDown);
-      this.addEvent(this.$handle, 'touchstart', this.onTouchStart);
-
-      if (existy(options.preview)) {
-         loadVTT(options.preview, resp => this.thumbnails = resp);
-      }
-
-      this.logger.debug('progress:extension:created');
-   }
-
-   render() {
-      /** @type {HTMLMediaElement} */
-      this.$el = createElement('span', { class: CN });
-
-      /** @type {HTMLMediaElement} */
-      const extensions = this.player.$el.parentNode.querySelector('.rmp-extensions');
-
-      this.$bar = createElement('span', { class: BAR_CN, tabindex: 0 }, extensions);
-      createElement('span', { class: BAR_PADDING_CN }, this.$bar);
-      createElement('span', { class: OVERALY_CN }, this.$bar);
-
-      /** @type {HTMLMediaElement} */
-      this.$handle = createElement('span', { class: HANDLE_CN }, this.$bar);
-      /** @type {HTMLMediaElement} */
-      this.$current = createElement('span', { class: CURRENT_TIME_CN }, this.$el);
-      /** @type {HTMLMediaElement} */
-      const span = createElement('span', { }, this.$el);
-      span.textContent = '/';
-      this.$duration = createElement('span', { class: DURATION_TIME_CN }, this.$el);
-      this.$c2paStatus = createElement('span', { class: C2PA_STATUS_CN }, this.$bar);
-      this.$playProgress = createElement('span', { class: PLAY_PROGRESS_CN }, this.$bar);
-      this.$progress = createElement('span', { class: PROGRESS_CN }, this.$bar);
-
-      this.$tooltip = createElement('div', { class: TOOLTIP_CN }, this.$el);
-      this.$thumbnail = createElement('div', { class: THUMBNAIL_CN }, this.$tooltip);
-      this.$thumbnailTime = createElement('span', { class: THUMBNAIL_TIME_CN }, this.$tooltip);
-
-      if (this.options.isProgressLiveStream) {
-         addClass(this.$el, DISABLE_SLIDE_CN);
-         addClass(this.$bar, DISABLE_SLIDE_CN);
-      }
-
-      if (this.options.isLive) {
-         addClass(this.$el, HIDDEN_CN);
-      }
-
-      if ( this.options.isMobile ) {
-         this.$tooltip.style.visibility = 'hidden';
-      }
-   }
-
-   onTimeupdate() {
-      if ( isNotEmpty(this._dragNdropTokens) ) {
-         return;
-      }
-
-      if (this.options.isLive && this.player?.isLive()) {
-         this.$progress.style.width = '100%';
-         this.$handle.style.left = this.$playProgress.style.width = '100%';
-         this.$current.textContent = secondsToTimeCode(+this._getCurrentTime());
-         // Accessibility: Set correct values for screen readers
-         this.$bar.setAttribute('aria-label', this._getAriaLabelValue());
-      } else {
-         this._moveHandle2time(this._getCurrentTime());
-      }
-   }
-
-   _moveHandle2time(time) {
-      const duration = this.player.getDuration();
-      const { timecode, clip } = this.options;
-      if (existy(time) && duration) {
-         this.$current.textContent = secondsToTimeCode(+time);
-         // Accessibility: Set correct values for screen readers
-         this.$bar.setAttribute('aria-label', this._getAriaLabelValue());
-         let percent;
-
-         if ( clip ) {
-            let [ start, end ] = clip;
-            start = start || 0;
-            end = end ? end + timecode : duration + start;
-            percent = (time - start - timecode) / (end - start - timecode);
-         } else {
-            percent = (time - timecode) / (duration - timecode);
-         }
-
-         const position = (100 * percent).toFixed(2) + '%';
-         this.$handle.style.left = this.$playProgress.style.width = position;
-      }
-   }
-
-   onProgress() {
-      this.$duration.textContent = secondsToTimeCode(this._getDuration()); // for live streams
-      this.$progress.style.width = 100 * this.player.getBufferedPercent() + '%';
-   }
-
-   onHandleMouseDown() {
-      this._dragNdropTokens.push( addEvent(document, 'mouseup', this.onHandleMouseUp) );
-      this._dragNdropTokens.push( addEvent(document, 'mousemove', this.onHandleMouseMove) );
-   }
-
-   onTouchStart() {
-      this._dragNdropTokens.push( addEvent(document, 'touchend', this.onTouchEnd) );
-      this._dragNdropTokens.push( addEvent(document, 'touchmove', this.onTouchMove) );
-   }
-
-   onHandleMouseUp(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      each(this._dragNdropTokens, removeEvent);
-      this._dragNdropTokens.length = 0;
-      this.player.setCurrentTime(this._getTimeByEventPosition(e));
-   }
-
-   onTouchMove(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      const rect = this.$bar.getBoundingClientRect();
-      const touch = e.touches[0];
-      let left = Math.max(rect.left, touch.clientX);
-      left = Math.min(rect.right, left);
-      left -= rect.left;
-      left = 100 * (left / this.$bar.offsetWidth) + '%';
-      this.$handle.style.left = this.$playProgress.style.width = left;
-      const time = this._getTimeByEventPosition(touch);
-      this.player.setCurrentTime(time);
-      this.bus.emit('heartbeatextensions');
-   }
-
-   onTouchEnd(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      each(this._dragNdropTokens, removeEvent);
-      this._dragNdropTokens.length = 0;
-   }
-
-   onHandleMouseMove(e) {
-      const rect = this.$bar.getBoundingClientRect();
-      // const parentRect = this.player.getElement().parentNode.getBoundingClientRect();
-      let left = Math.max(rect.left, e.clientX);
-      left = Math.min(rect.right, left);
-      left -= rect.left;
-      left = 100 * (left / this.$bar.offsetWidth) + '%';
-      this.$handle.style.left = this.$playProgress.style.width = left;
-   }
-
-   onDurationchange() {
-      if (!this.options.isLive && !this.isProgressLiveStream) {
-         this._updateTimes();
-      }
-   }
-
-   onCanplaythrough() {
-      this._updateTimes();
-   }
-
-   onLoadedmetadata() {
-      this._updateTimes();
-   }
-
-   onC2pafragment(fragment) {
-      if (fragment.valid) return;
-
-      setTimeout(() => {
-         const duration = this.player.getDuration();
-         const start = fragment.start;
-         const fragDuration = fragment.duration;
-         const startPercent = (start / duration) * 100;
-         const widthPercent = (fragDuration / duration) * 100;
-
-         const $fragment = createElement('span', { class: C2PA_STATUS_INVALID_SEGMENT_CN }, this.$c2paStatus);
-
-         $fragment.style.left = startPercent + '%';
-         $fragment.style.width = widthPercent + '%';
-      }, 1000);
-   }
-
-   // Accessibility: Screen reader expect hours to be present in the timecode
-   _getAriaLabelValue() {
-      const current = this.$current.textContent;
-      const duration = this.$duration.textContent;
-
-      return `Current: ${this._timeCodeToSentence(current)} Total: ${this._timeCodeToSentence(duration)}`;
-   }
-
-   // Accessibility
-   _timeCodeToSentence(time) {
-      const parts = time.split(':');
-      const words = ['minutes', 'seconds'];
-
-      if (parts.length > 2) words.unshift('hours');
-
-      const formatted = parts.map((p, idx) => {
-         const value = p.charAt(0) === '0' ? p.charAt(1) : p;
-         return `${value} ${words[idx]}`;
-      });
-
-      return formatted.join(' ');
-   }
-
-   _getDuration() {
-      const { clip, timecode } = this.options;
-      const duration = this.player.getDuration();
-
-      if ( clip ) {
-         let [ start, end ] = clip; // eslint-disable-line no-unused-vars
-         start = start || 0;
-         return end ? end + timecode : duration + start;
-      }
-
-      return duration;
-   }
-
-   _getCurrentTime() {
-      const time = this.player.getCurrentTime();
-      const { clip, timecode } = this.options;
-      const [ start ] = clip || [ 0 ];
-      return Math.max(time, start + timecode);
-   }
-
-   onLeave() {
-      this.$tooltip.classList.remove(TOOLTIP_VISIBLE_CN);
-   }
-
-   onHover(e) {
-      let time;
-      const { useOriginTimeForPreview, timecode } = this.options;
-      const target = e.target || e.srcElement;
-      if ( hasClass(target, CHAPTER_BUBBLE_CN) ) {
-         const idx = parseInt(target.getAttribute('data-idx'), 10);
-         const chapter = this._chapters[idx];
-         time = chapter.from;
-         this.$thumbnailTime.innerHTML = chapter.text || chapter.title;
-      } else {
-         time = this._getTimeByEventPosition(e);
-         this.$thumbnailTime.textContent = secondsToTimeCode(time);
-      }
-
-      if (isEmpty(this.thumbnails)) {
-         this._popoverPosition(e);
-         return;
-      }
-
-      const tt = useOriginTimeForPreview ? time - timecode : time;
-      const thumbnail = find(this.thumbnails, ({ from, to }) => inRange(tt, from, to));
-      if (thumbnail) {
-         const [url, hash] = thumbnail.text.split('#');
-
-         this.$thumbnail.style.backgroundImage = `url("${url}")`;
-
-         const xywh = last(hash.split('=')).split(',');
-         const h = xywh.pop().trim();
-         const w = xywh.pop().trim();
-         const y = xywh.pop().trim();
-         const x = xywh.pop().trim();
-
-         this.$thumbnail.style.width = `${w}px`;
-         this.$thumbnail.style.height = `${h}px`;
-         this.$thumbnail.style.backgroundPosition = `-${x}px -${y}px`;
-         this.$thumbnail.style.marginBottom = '7px';
-      } else {
-         this.$thumbnail.style.height = '';
-         this.$thumbnail.style.width = '';
-         this.$thumbnail.style.marginBottom = '';
-      }
-      this._popoverPosition(e);
-   }
-
-   _updateTimes() {
-      this.$duration.textContent = secondsToTimeCode(this._getDuration());
-      this.$current.textContent = secondsToTimeCode(this._getCurrentTime());
-      // Accessibility: Set correct values for screen readers
-      this.$bar.setAttribute('aria-label', this._getAriaLabelValue());
-      this._isLoadedMetadata = true;
-      this._renderChaptersIfNeeded();
-   }
-
-   _popoverPosition(e) {
-      popoverPosition(this.player, this._offsetX(e), this.$tooltip);
-      this.$tooltip.classList.add(TOOLTIP_VISIBLE_CN);
-   }
-
-   onStatechanged(state: Player$State, old: Player$State) {
-      if (state.toc.lang !== old.toc.lang) {
-         this._refreshTOC();
-      } else if ( state.toc.timedata !== old.toc.timedata ) {
-         this._refreshTOC();
-      }
-   }
-
-   _refreshTOC() {
-      const chapters = this.state.getTOCTimeData();
-      const lang = this.state.getTOCLang();
-      this._chapters = lang ? chapters : [];
-      this._renderChaptersIfNeeded();
-   }
-
-   _renderChaptersIfNeeded() {
-      each(this._bubbles, b => this.$bar.removeChild(b));
-      this._bubbles.length = 0;
-      if ( isEmpty(this._chapters) || !this._isLoadedMetadata ) {
-         return;
-      }
-
-      const duration = this.player.getDuration();
-
-      each(this._chapters, (c, idx) => {
-         const bubble = createElement('span', { class: CHAPTER_BUBBLE_CN, 'data-idx': idx }, this.$bar );
-         bubble.style.left = (100 * c.from / duration).toFixed(0) + '%';
-         this.addEvent(bubble, 'click', e => {
-            e.stopPropagation();
-            this._moveHandle2time(c.from);
-            this.player.setCurrentTime(c.from);
-         });
-         this._bubbles.push(bubble);
-      });
-   }
-
-   _getTimeByEventPosition(e) {
-      const duration = this.player.getDuration();
-      const { timecode, clip } = this.options;
-      const percent = this._getPercentageByPosition(e);
-
-      if (clip) {
-         let [ start, end ] = clip;
-         start = start || 0;
-         end = end || duration + start - timecode;
-         return ((end - start) * percent + start + timecode).toFixed(2);
-      }
-
-      return parseFloat(((duration - timecode) * percent + timecode).toFixed(2));
-   }
-
-   _getPercentageByPosition(e) {
-      const rect = this.$bar.getBoundingClientRect();
-      let left = Math.max(rect.left, e.clientX);
-      left = Math.min(rect.right, left);
-      left -=  rect.left;
-      return (left / this.$bar.offsetWidth).toFixed(2);
-   }
-
-   _offsetX(e) {
-      if (!this.player.getElement()) return;
-
-      const rect = this.$bar.getBoundingClientRect();
-      const parentRect = this.player.getElement().parentNode.getBoundingClientRect();
-      let left = Math.max(rect.left, e.clientX);
-      left = Math.min(rect.right, left);
-      left -= parentRect.left;
-      return left;
-   }
-
-   getElement() {
-      return this.$el;
-   }
-
-   destroy() {
-      super.destroy();
-
-      const parent = this.$el.parentNode;
-
-      parent.removeChild(this.$el);
-
-      this.$el = null;
-      this.$bar = null;
-      this.$handle = null;
-      this.$current = null;
-      this.$duration = null;
-      this.$playProgress = null;
-      this.$progress = null;
-      this.$tooltip = null;
-      this.$thumbnail = null;
-      this.$thumbnailTime = null;
-   }
-}
-
-function secondsToTimeCode(time) {
-   if (time === Infinity || isNaN(time)) {
-      return '--:--';
-   }
-
-   const hours = Math.floor(time / SECS_IN_HOUR);
-   const minutes = Math.floor(time / SECS_IN_MIN) % SECS_IN_MIN;
-   const seconds = Math.floor(time % SECS_IN_MIN);
-
-   return (hours ? _pad(hours) + ':' : '') + _pad(minutes) + ':' + _pad(seconds);
-}
-
-function _pad(num) {
-   return num < TEN ? `0${num}` : `${num}`;
-}