ravnur-player-public 3.4.4 → 3.4.5

package/src/extensions/crawl.js

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

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

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

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

@@ -1,84 +0,0 @@
-// @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;
-   }
-}