ravnur-player-public 3.4.2 → 3.4.4

package/src/extensions/play.js

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

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

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

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

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