ravnur-player-public 3.4.2 → 3.4.4

package/src/extensions/crawl.js

@@ -0,0 +1,118 @@
+import StateEntity from "../state";
+import BaseExtension from "./base";
+import BaseController from '../players/base';
+import { createElement } from "../utils";
+
+import type { Player$ExtensionOptions } from '../types/Options';
+
+const CN = 'rmp-ext-crawl';
+const CN_TEXT = `${CN}__text`;
+
+export default class CrawlExtension extends BaseExtension {
+   $crawl;
+   $intervalId;
+
+   constructor(
+      player: BaseController,
+      state: StateEntity,
+      options: Player$ExtensionOptions,
+   ) {
+      super(player, state, options, []);
+      this.logger.debug('crawl:extensions:creating');
+      this.render();
+      this.logger.debug('crawl:extensions:created');
+
+      options.bus.on('fullscreenchanging', () => {
+         setTimeout(() => this.refresh(this.options.crawl, this.options.showCrawl), 100);
+      });
+
+      options.bus.on('resizeplayer', () => {
+         setTimeout(() => this.refresh(this.options.crawl, this.options.showCrawl), 100);
+      });
+   }
+
+   startAnimation(interval: number = 100) {
+      if (this.$intervalId) {
+         return;
+      }
+
+      const crawlTextElement = document.getElementById('crawlText');
+      const containerWidth = document.querySelector('.rmp-ext-crawl').offsetWidth;
+      const textWidth = crawlTextElement.offsetWidth;
+
+      let currentPosition = containerWidth;
+
+      const crawl = () => {
+         currentPosition--;
+
+         if (currentPosition < -textWidth) {
+            currentPosition = containerWidth;
+         }
+
+         crawlTextElement.style.transform = `translateX(${currentPosition}px)`;
+      };
+
+      this.$intervalId = setInterval(crawl, interval);
+   }
+
+   render() {
+      this.$crawl = createElement('div', { class: CN, 'data-testid': 'crawl' });
+      const content = createElement('div', {
+         id: 'crawlText', class: CN_TEXT, title: this.options.crawl, tabindex: 0
+      }, this.$crawl);
+
+      content.innerHTML = clearHtml(this.options.crawl.text) || '';
+
+      this.$crawl.style.color = this.options.crawl.textColor;
+      this.$crawl.style.backgroundColor = this.options.crawl.backgroundColor;
+
+      this.toggle(this.options.showCrawl);
+
+      setTimeout(() => this.startAnimation(this.options.crawl.speed));
+   }
+
+   getOuter() {
+      return this.$crawl;
+   }
+
+   toggle(visibility: boolean) {
+      if (visibility) {
+         this.$crawl.style.display = 'block';
+      } else {
+         this.$crawl.style.display = 'none';
+      }
+   }
+
+   refresh(crawl, visibility) {
+      if (!this.$crawl) return;
+
+      const crawlText = document.getElementById('crawlText');
+      crawlText.innerHTML = clearHtml(crawl.text) || '';
+      this.$crawl.style.color = crawl.textColor;
+      this.$crawl.style.backgroundColor = crawl.backgroundColor;
+      clearInterval(this.$intervalId);
+      this.$intervalId = null;
+      this.toggle(visibility);
+
+      if (visibility) {
+         this.startAnimation(crawl.speed);
+      }
+   }
+
+   destroy() {
+      super.destroy();
+      if (this.$crawl) {
+         const parent = this.$crawl.parentNode;
+         parent.removeChild(this.$crawl);
+         this.$crawl = null;
+         clearInterval(this.$intervalId);
+         this.$intervalId = null;
+      }
+   }
+}
+
+function clearHtml(html) {
+   let clearedHtml = html.replace(/(\r\n|\n|\r)/gm, '');
+   // remove br tags
+   return clearedHtml.replace(/<br\s*[\/]?>/gi, '');
+}

package/src/extensions/download.js

@@ -0,0 +1,411 @@
+import BaseExtension from './base';
+
+import {
+   createElement,
+   addClass,
+   isEmpty,
+   each,
+   toArray,
+   removeClass,
+   last
+} from '../utils';
+
+import opener from './helpers/clickOpener';
+import openerHeightChecker from './helpers/openerHeightChecker';
+import popover from './helpers/popover';
+import { secondsToTime } from './helpers/timeCodeToSeconds';
+import {
+   UNAPPROVED_TIMEDATA_STATUS,
+   TRANSLATABLE_TIMEDATA_STATUS
+} from '../config/statuses';
+
+import createSvg, { DOWNLOAD, BACK, NEXT } from '../svgs';
+import loadVTT from './helpers/vtt-loader';
+import load from './helpers/transport';
+import { saveAs } from './helpers/FileSaver';
+
+const CN = 'rmp-ext-download';
+const BUTTON_CN = `${CN}__button`;
+const SELECTOR_CN = `${CN}__selector`;
+const SELECTOR_OPEN_CN = `${SELECTOR_CN}--open`;
+const SELECTOR_SHOW_ADDITIONAL_CN = `${SELECTOR_CN}--additional`;
+const MORE_CN = `${CN}__more`;
+
+const MAIN_STEP_CN = `${CN}__main-step`;
+const ADDITIONAL_STEP_CN = `${CN}__additional-step`;
+
+const BACK_BTN_CN = `${CN}__back`;
+
+const DOWNLOADCC_CN = `${CN}__download-cc`;
+
+export default class DownloadExtension extends BaseExtension {
+   constructor(player, state, options) {
+      super(player, state, options);
+      this.logger.debug('download:extension:creating');
+
+      this.render();
+      this.init();
+
+      this.logger.debug('download:extension:created');
+   }
+
+   render() {
+      /** @type {HTMLMediaElement} */
+      this.$el = createElement('span', { class: CN, 'data-testid': 'download' });
+
+      this.$button = createElement(
+         'button',
+         { type: 'button', class: BUTTON_CN },
+         this.$el
+      );
+
+      this.$selector = createElement('div', { class: SELECTOR_CN }, this.$el);
+      this.$link = createElement(
+         'a',
+         { style: 'display: none;' },
+         this.$selector
+      );
+
+      this.$mainStep = createElement(
+         'div',
+         { class: MAIN_STEP_CN },
+         this.$selector
+      );
+
+      if (this.options.showDownloadVideo) {
+         this.$video = createElement(
+            'button',
+            { type: 'button', class: DOWNLOADCC_CN },
+            this.$mainStep
+         );
+
+         const text = createElement('span', {}, this.$video);
+         text.textContent = this.$t('video-drm');
+         addClass(this.$video, MORE_CN);
+
+         _createMore(this.$video);
+      }
+
+      if (this.options.showDownloadCC) {
+         this.$cc = createElement(
+            'button',
+            { type: 'button', class: DOWNLOADCC_CN },
+            this.$mainStep
+         );
+
+         const ccText = createElement('span', {}, this.$cc);
+         ccText.textContent = this.$t('cc');
+         addClass(this.$cc, MORE_CN);
+
+         _createMore(this.$cc);
+
+         this.$transcript = createElement(
+            'button',
+            { type: 'button', class: DOWNLOADCC_CN },
+            this.$mainStep
+         );
+
+         const transcriptText = createElement('span', {}, this.$transcript);
+         transcriptText.textContent = this.$t('transcript');
+         addClass(this.$transcript, MORE_CN);
+
+         _createMore(this.$transcript);
+      }
+
+      if (this.options.downloadVideoURL) {
+         this.$mp4 = createElement(
+            'button',
+            { type: 'button', class: DOWNLOADCC_CN },
+            this.$mainStep
+         );
+         const mp4 = createElement('span', {}, this.$mp4);
+         mp4.textContent = this.$t('video-drm');
+      }
+
+      this.$svg = createSvg(this.$button, DOWNLOAD);
+      this.$spinner = createElement('img', {
+         src: '/images/Spinner-small.gif',
+         height: '26',
+         width: '26'
+      });
+
+      this.$additionalStep = createElement(
+         'div',
+         { class: ADDITIONAL_STEP_CN },
+         this.$selector
+      );
+
+      this.$back = createElement(
+         'button',
+         { type: 'button', class: BACK_BTN_CN },
+         this.$additionalStep
+      );
+      const $backSpan = createElement('span', { class: 'arrow' }, this.$back);
+      createSvg($backSpan, BACK);
+
+      this.$backText = createElement('span', {}, this.$back);
+
+      this.$additional = createElement('div', { class: 'tab-content' }, this.$additionalStep);
+   }
+
+   init() {
+      const $button = this.$button,
+         $selector = this.$selector,
+         reposition = false,
+         closeOnClick = false;
+      const options = this.options;
+      opener(this, {
+         $button,
+         $selector,
+         SELECTOR_OPEN_CN,
+         reposition,
+         closeOnClick,
+         firstFocusItemSelector: `.${DOWNLOADCC_CN}`,
+         toMainFn: this._toMain.bind(this)
+      });
+      popover(this, { $button, text: this.$t('download') });
+
+      if (isEmpty(options.downloadCCLanguages) && !options.showDownloadCC && !options.downloadVideoURL) {
+         this.addEvent(this.$el, 'click', this.downloadDRMVideo.bind(this, null));
+         return;
+      }
+
+      if (options.downloadVideoURL) {
+         this.addEvent(this.$mp4, 'click', this.performClick.bind(this, options.downloadVideoURL));
+      }
+
+      this.addEvent(this.$back, 'click', () => this._toMain());
+
+      if (options.showDownloadVideo) {
+         this.addEvent(this.$video, 'click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this._toAdditional(this.$t('video-drm'));
+            this._renderVideos();
+         });
+      }
+
+      if (options.showDownloadCC) {
+         this.addEvent(this.$transcript, 'click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this._toAdditional(this.$t('transcript'));
+            this._renderTranscripts();
+         });
+
+         this.addEvent(this.$cc, 'click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this._toAdditional(this.$t('cc'));
+            this._renderClosedCaptions();
+         });
+      }
+   }
+
+   downloadDRMVideo(ccLanguage) {
+      let url = this.options.downloadURL;
+      if (ccLanguage !== null) {
+         url += '?ccLang=' + ccLanguage;
+      }
+
+      this.bus.emit('downloadRequested', url, this.performClick.bind(this));
+      this.$button.removeChild(this.$svg);
+      this.$button.appendChild(this.$spinner);
+   }
+
+   downloadTranscript(cc) {
+      const filename = `transcript__${cc.srclang}.txt`;
+      if (cc.type === 'json') {
+         load({
+            url: cc.src,
+            success: (resp) =>
+               this.prepareTranscriptForDownload(JSON.parse(resp.data), filename)
+         });
+      } else {
+         loadVTT(cc.src, (m) => this.prepareTranscriptForDownload(m, filename));
+      }
+   }
+
+   prepareTranscriptForDownload(segments, filename) {
+      const { text } = segments.reduce(
+         ({ prevSegmentTime, text }, segment) => {
+            if (prevSegmentTime > 0 && segment.from >= prevSegmentTime + 0.1) {
+               text += '\r\n';
+            }
+            const segmentText = segment.text
+               .replace(/(\r?\n|\r)$/, '')
+               .replace(/<br\s*\/?>/gm, '\r\n');
+            text = text + segmentText + '\r\n';
+            return { prevSegmentTime: segment.to, text };
+         },
+         { text: '', prevSegmentTime: 0 }
+      );
+
+      var blob = new Blob([text], {
+         type: 'text/plain;charset=utf-8'
+      });
+
+      saveAs(blob, filename);
+   }
+
+   downloadCC(cc) {
+      const filename = `captions__${cc.srclang}.vtt`;
+      if (cc.type === 'json') {
+         load({
+            url: cc.src,
+            success: (resp) =>
+               this.prepareCCForDownload(JSON.parse(resp.data), filename)
+         });
+      } else {
+         load({
+            url: cc.src,
+            success: (resp) => {
+               var blob = new Blob([resp.data], {
+                  type: 'text/plain;charset=utf-8'
+               });
+
+               saveAs(blob, filename);
+            }
+         });
+      }
+   }
+
+   prepareCCForDownload(segments, filename) {
+      const text = segments.reduce((memo, segment) => {
+         if (!memo) {
+            memo += 'WEBVTT\r\n';
+         }
+         memo += '\r\n';
+         memo +=
+        secondsToTime(segment.from, false, true) +
+        ' --> ' +
+        secondsToTime(segment.to, false, true);
+         memo += '\r\n';
+         memo += segment.text;
+         memo += '\r\n';
+         return memo;
+      }, '');
+
+      var blob = new Blob([text], {
+         type: 'text/plain;charset=utf-8'
+      });
+
+      saveAs(blob, filename);
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   destroy() {
+      super.destroy();
+
+      const parent = this.$el.parentNode;
+      parent.removeChild(this.$el);
+      this.$el = null;
+   }
+
+   performClick(url) {
+      var link = document.createElement('a', {href: url, target: '_blank'});
+      link.href = url;
+      link.target = '_blank';
+      link.className = 'rmp-ext-download-hidden';
+      link.download = last(url.split('/')) || 'video.mp4';
+      document.body.appendChild(link);
+      link.click();
+      // document.body.removeChild(link);
+
+      try {
+         this.$button.removeChild(this.$spinner);
+         this.$button.appendChild(this.$svg);
+      } catch (e) {
+      // noop
+      }
+   }
+
+   _toMain() {
+      removeClass(this.$selector, SELECTOR_SHOW_ADDITIONAL_CN);
+      openerHeightChecker(this.player, this.$mainStep);
+
+      // Accessability: Focus on first item of main page
+      const mainStepItems = document.querySelectorAll(`.${MAIN_STEP_CN} > .${DOWNLOADCC_CN}`);
+      if (mainStepItems[0]) mainStepItems[0].focus();
+   }
+
+   _toAdditional(text) {
+      const items = toArray(this.$additional.childNodes);
+      each(items, (btn) => this.$additional.removeChild(btn));
+      addClass(this.$selector, SELECTOR_SHOW_ADDITIONAL_CN);
+      this.$backText.textContent = text;
+
+      openerHeightChecker(this.player, this.$additionalStep);
+
+      // Accessability: focus on the first item
+      this.$back.focus();
+   }
+
+   _renderVideos() {
+      const btn = createElement(
+         'button',
+         { type: 'button', class: DOWNLOADCC_CN },
+         this.$additional
+      );
+
+      this.addEvent(btn, 'click', () => this.downloadDRMVideo(null));
+      const text = createElement('span', {}, btn);
+      text.textContent = this.$t('video-only');
+
+      each(this.options.downloadCCLanguages, (c) => {
+         const btn = createElement(
+            'button',
+            { type: 'button', class: DOWNLOADCC_CN },
+            this.$additional
+         );
+
+         this.addEvent(btn, 'click', () => this.downloadDRMVideo(c.code));
+         const text = createElement('span', {}, btn);
+         text.textContent = `${this.$t('video-and')} ${c.label} CC`;
+      });
+   }
+
+   _renderTranscripts() {
+      each(this.options.cc.filter(isApprovedCC), (cc) => {
+         const btn = createElement(
+            'button',
+            { type: 'button', class: DOWNLOADCC_CN },
+            this.$additional
+         );
+
+         this.addEvent(btn, 'click', () => this.downloadTranscript(cc));
+         const text = createElement('span', {}, btn);
+         text.textContent = cc.label;
+      });
+   }
+
+   _renderClosedCaptions() {
+      each(this.options.cc.filter(isApprovedCC), (cc) => {
+         const btn = createElement(
+            'button',
+            { type: 'button', class: DOWNLOADCC_CN },
+            this.$additional
+         );
+
+         this.addEvent(btn, 'click', () => this.downloadCC(cc));
+         const text = createElement('span', {}, btn);
+         text.textContent = cc.label;
+      });
+   }
+}
+
+function _createMore($parent) {
+   const span = createElement('span', { class: 'arrow' }, $parent);
+   createSvg(span, NEXT);
+   return span;
+}
+
+function isApprovedCC(cc) {
+   return (
+      cc.state !== UNAPPROVED_TIMEDATA_STATUS &&
+    cc.state !== TRANSLATABLE_TIMEDATA_STATUS
+   );
+}

package/src/extensions/error.js

@@ -0,0 +1,47 @@
+import BaseExtension from './base';
+
+import { createElement, removeClass } from '../utils';
+import createSvg, { ERROR } from '../svgs';
+
+const CN = 'rmp-ext-error';
+const HIDDEN_CN = `${CN}--hidden`;
+const ERROR_CONTENT = `${CN}__content`;
+
+export default class ErrorExtension extends BaseExtension {
+   constructor(player, state, options) {
+      super(player, state, options, ['error']);
+      this.logger.debug('error:extension:creating');
+
+      this.onError = this.onError.bind(this);
+
+      this.render();
+
+      this.logger.debug('error:extension:created');
+   }
+
+   render() {
+      this.$outer = createElement('div', { class: `${CN} ${HIDDEN_CN}`, tabindex: -1 });
+      createSvg(this.$outer, ERROR, { class: 'error', width: 800, height: 800, viewBox: '0 0 16 16' });
+      const error = createElement('div', { class: ERROR_CONTENT }, this.$outer);
+      error.textContent = this.$t('error');
+      this.logger.debug('error:extension:rendered');
+   }
+
+   onError() {
+      this.logger.debug('error:extension:onError');
+      removeClass(this.$outer, HIDDEN_CN);
+   }
+
+   getOuter() {
+      return this.$outer;
+   }
+
+   destroy() {
+      super.destroy();
+      if (this.$outer) {
+         const parent = this.$outer.parentNode;
+         parent.removeChild(this.$outer);
+         this.$outer = null;
+      }
+   }
+}

package/src/extensions/forward.js

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

package/src/extensions/fullscreen.js

@@ -0,0 +1,84 @@
+// @flow
+import BaseExtension from './base';
+
+import BaseController from '../players/base';
+import StateEntity from '../state';
+
+import { createElement, toggleClass } from '../utils';
+
+import popover from './helpers/popover';
+import createSvg, { FULLSCREEN, EXIT_FULLSCREEN } from '../svgs';
+
+import type { Player$ExtensionOptions } from '../types/Options';
+import type { Player$State } from '../types/State';
+
+const CN = 'rmp-ext-fullscreen';
+const EXIT_CN = `${CN}--exit`;
+
+const ESC_CODE = 27;
+
+export default class FullScreenExtension extends BaseExtension {
+   $el: HTMLElement
+
+   constructor(player: BaseController, state: StateEntity, options: Player$ExtensionOptions) {
+      super(player, state, options, ['statechanged']);
+      this.logger.debug('fullscreen:extension:creating');
+
+      this.render();
+
+      this.addEvent(this.$el, 'click', this.toggle.bind(this));
+      this.addEvent(document, 'keyup', this.onKeyup.bind(this));
+
+      if (!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
+         this.addEvent(window, 'resize', this.onResize.bind(this));
+      }
+
+      toggleClass(this.$el, EXIT_CN, this.state.isFullScreen());
+
+      this.logger.debug('fullscreen:extension:created');
+   }
+
+   render() {
+      /** @type {HTMLMediaElement} */
+      this.$el = createElement('button', { type: 'button', class: CN, 'data-testid': 'fullscreen' });
+
+      createSvg(this.$el, FULLSCREEN, { class: 'fullscreen-icon'});
+      createSvg(this.$el, EXIT_FULLSCREEN, { class: 'exit-fullscreen-icon'});
+
+      const text = () => this.$t(this.state.isFullScreen() ? 'exit-fullscreen' : 'fullscreen');
+      setTimeout(() => popover(this, { $button: this.$el, text }) );
+   }
+
+   onResize() {
+      if (this.state.isFullScreen()) {
+         this.bus.emit('fullscreenchanging', true);
+      }
+   }
+
+   onKeyup(e: KeyboardEvent) {
+      if (e.keyCode === ESC_CODE) {
+         this.bus.emit('fullscreenchanging', false);
+      }
+   }
+
+   onStatechanged(state: Player$State) {
+      toggleClass(this.$el, EXIT_CN, state.isFullScreen);
+   }
+
+   toggle() {
+      this.bus.emit('fullscreenchanging');
+   }
+
+   getElement() {
+      return this.$el;
+   }
+
+   destroy() {
+      super.destroy();
+      const parent = this.$el.parentNode;
+      if (parent instanceof HTMLElement) {
+         parent.removeChild(this.$el);
+      }
+      // this.$el = null;
+   }
+}