ravnur-player-public 3.4.4 → 3.4.5

package/src/extensions/help.js

@@ -1,201 +0,0 @@
-import BaseExtension from './base';
-
-import { createElement, addEvent, addClass, removeClass, each } from '../utils';
-
-// import popover from './helpers/popover';
-import createSvg, { HELP } from '../svgs';
-
-const CN = 'rmp-ext-help';
-
-const BUTTON_CN = `${CN}__button`;
-const CANVAS_CN = `${CN}__canvas`;
-const CANVAS_VISIBLE_CN = `${CANVAS_CN}--visible`;
-
-const START_POSITION = 11;
-const STEP = 36;
-
-const RECT_WIDTH = 32;
-const BUTTON_WIDTH = 26;
-const BUTTON_MIDDLE = BUTTON_WIDTH / 2;
-const THINKNESS = 2;
-const TEXT_HEIGHT = 14;
-
-export default class HelpExtension extends BaseExtension {
-   /** @type {HTMLElement} */
-   $outer;
-   /** @type {HTMLElement} */
-   $button;
-   /** @type {HTMLCanvasElement} */
-   $outer;
-
-   constructor(player, state, options) {
-      super(player, state, options, ['play']);
-      this.logger.debug('help:extension:creating');
-
-      this.showHelp = this.showHelp.bind(this);
-      this.hideHelp = this.hideHelp.bind(this);
-
-      this.render();
-      this.init();
-
-      this.logger.debug('help:extension:created');
-   }
-
-   init() {
-      // setTimeout(() => {
-      //    popover(this, { $button: this.$button, text: this.$t('help') });
-      // });
-      addEvent(this.$button, 'click', this.showHelp);
-      addEvent(this.$canvas, 'click', this.hideHelp);
-      addEvent(this.$canvas, 'mouseleave', this.hideHelp);
-   }
-
-   render() {
-      this.$outer = createElement('div', { class: CN });
-
-      this.$canvas = createElement('canvas', { class: CANVAS_CN, tabindex: -1 }, this.$outer);
-      this.$button = createElement('button', { type: 'button', class: BUTTON_CN }, this.$outer);
-      this.$button.setAttribute('aria-label', this.$t('help'));
-      createSvg(this.$button, HELP);
-   }
-
-   onPlay() {
-      this.hideHelp();
-   }
-
-   showHelp(e) {
-      e.stopPropagation();
-      this.player.pause();
-      addClass(this.$outer, CANVAS_VISIBLE_CN);
-      /** @type {HTMLElement} */
-      const parent = this.$outer.parentNode;
-      const rect = parent.getBoundingClientRect();
-
-      this.$canvas.setAttribute('width', rect.width);
-      this.$canvas.setAttribute('height', rect.height);
-
-      const ctx = this.$canvas.getContext('2d');
-      ctx.globalCompositeOperation = 'xor';
-      ctx.font = rect.width < 500 ? '12px Verdana' : '14px Verdana';
-
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
-      ctx.beginPath();
-      ctx.fillRect(0, 0, rect.width, rect.height);
-      ctx.fill();
-
-      const recttop = rect.height - RECT_WIDTH;
-
-      let top = TEXT_HEIGHT;
-      const linebottom = rect.height - RECT_WIDTH - THINKNESS;
-
-      let pointPosion = START_POSITION;
-
-      const points = [];
-
-      if (this.options.showForward) {
-         points.push(['help-bacward', pointPosion]);
-         pointPosion += STEP;
-      }
-
-      points.push(['help-play', pointPosion]);
-      pointPosion += STEP;
-
-      if (this.options.showBackward) {
-         points.push(['help-skip', pointPosion]);
-         pointPosion += STEP;
-      }
-
-      points.push(['help-volume', pointPosion]);
-      // pointPosion += STEP;
-
-      each(points, ([key, position], idx) => {
-         if (idx) {
-            top += 2 * TEXT_HEIGHT;
-         }
-         _rect(ctx, position, recttop);
-         _line(ctx, position, top, linebottom);
-         let left = position + BUTTON_MIDDLE;
-         _circle(ctx, left, top, THINKNESS);
-
-         left += 10;
-         top = wrapText(ctx, this.$t(key), left, top + 6, rect.width - left);
-      });
-
-      if (this.options.showFullScreen) {
-         top += 2 * TEXT_HEIGHT;
-         const fullscreenPosition = rect.width - START_POSITION - BUTTON_WIDTH;
-         _rect(ctx, fullscreenPosition, recttop);
-         _line(ctx, fullscreenPosition, top, linebottom);
-         _circle(ctx, fullscreenPosition + BUTTON_MIDDLE, top, THINKNESS);
-         ctx.textAlign = 'right';
-         ctx.fillText(this.$t('help-esc'), fullscreenPosition + BUTTON_MIDDLE - 10, top + 6);
-      }
-   }
-
-   hideHelp() {
-      removeClass(this.$outer, CANVAS_VISIBLE_CN);
-      const parent = this.$outer.parentNode;
-      const rect = parent.getBoundingClientRect();
-      const ctx = this.$canvas.getContext('2d');
-      ctx.fillRect(0, 0, rect.width, rect.height);
-   }
-
-   getOuter() {
-      return this.$outer;
-   }
-
-   destroy() {
-      super.destroy();
-
-      this.$outer.parentNode.removeChild(this.$outer);
-
-      this.$button = null;
-      this.$canvas = null;
-      this.$outer = null;
-   }
-}
-
-// eslint-disable-next-line
-function _rect(ctx, x, y) {
-   ctx.clearRect(x, y, BUTTON_WIDTH, BUTTON_WIDTH);
-   ctx.globalCompositeOperation = 'source-over';
-   ctx.strokeStyle = '#FFF';
-   ctx.lineWidth = THINKNESS;
-   const width = BUTTON_WIDTH + THINKNESS + THINKNESS;
-   const height = width;
-   ctx.strokeRect(x - THINKNESS, y - THINKNESS, width, height);
-}
-
-function _line(ctx, x, y1, y2) {
-   ctx.fillStyle = '#FFFFFF';
-   ctx.globalCompositeOperation = 'source-over';
-   ctx.lineWidth = 3;
-   ctx.strokeStyle = '#FFFFFF';
-   ctx.moveTo(x + BUTTON_MIDDLE, y1);
-   ctx.lineTo(x + BUTTON_MIDDLE, y2);
-   ctx.stroke();
-}
-
-function _circle(ctx, x, y, r) {
-   ctx.beginPath();
-   ctx.arc(x, y, r, 0, 2 * Math.PI);
-   ctx.stroke();
-}
-
-function wrapText(context, text, left, top, maxWidth) {
-   const lineHeight = 18;
-   let line = '';
-   each(text.split(' '), word => {
-      var testLine = line + word + ' ';
-      var testWidth = context.measureText(testLine).width;
-      if (testWidth > maxWidth) {
-         context.fillText(line, left, top);
-         line = word + ' ';
-         top += lineHeight;
-      } else {
-         line = testLine;
-      }
-   });
-   context.fillText(line, left, top);
-   return top;
-}

package/src/extensions/helpers/FileSaver.js

@@ -1,157 +0,0 @@
-// The one and only way of getting global scope in all environments
-// https://stackoverflow.com/q/3277182/1008999
-var _global = typeof window === 'object' && window.window === window
-   ? window
-   : typeof self === 'object' && self.self === self
-      ? self
-      : typeof global === 'object' && global.global === global
-         ? global
-         : this;
-
-function bom (blob, opts) {
-   if (typeof opts === 'undefined') opts = { autoBom: false };
-   else if (typeof opts !== 'object') {
-      console.warn('Deprecated: Expected third argument to be a object');
-      opts = { autoBom: !opts };
-   }
-
-   // prepend BOM for UTF-8 XML and text/* types (including HTML)
-   // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
-   if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
-      return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
-   }
-   return blob;
-}
-
-function download (url, name, opts) {
-   var xhr = new XMLHttpRequest();
-   xhr.open('GET', url);
-   xhr.responseType = 'blob';
-   xhr.onload = function () {
-      saveAs(xhr.response, name, opts);
-   };
-   xhr.onerror = function () {
-      console.error('could not download file');
-   };
-   xhr.send();
-}
-
-function corsEnabled (url) {
-   var xhr = new XMLHttpRequest();
-   // use sync to avoid popup blocker
-   xhr.open('HEAD', url, false);
-   try {
-      xhr.send();
-   } catch (e) {}
-   return xhr.status >= 200 && xhr.status <= 299;
-}
-
-// `a.click()` doesn't work for all browsers (#465)
-function click (node) {
-   try {
-      node.dispatchEvent(new MouseEvent('click'));
-   } catch (e) {
-      var evt = document.createEvent('MouseEvents');
-      evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
-         20, false, false, false, false, 0, null);
-      node.dispatchEvent(evt);
-   }
-}
-
-// Detect WebView inside a native macOS app by ruling out all browsers
-// We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
-// https://www.whatismybrowser.com/guides/the-latest-user-agent/macos
-var isMacOSWebView = /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent);
-
-export var saveAs = _global.saveAs || (
-// probably in some web worker
-   (typeof window !== 'object' || window !== _global)
-      ? function saveAs () { /* noop */ }
-
-   // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
-      : ('download' in HTMLAnchorElement.prototype && !isMacOSWebView)
-         ? function saveAs (blob, name, opts) {
-            var URL = _global.URL || _global.webkitURL;
-            var a = document.createElement('a');
-            name = name || blob.name || 'download';
-
-            a.download = name;
-            a.rel = 'noopener'; // tabnabbing
-
-            // TODO: detect chrome extensions & packaged apps
-            // a.target = '_blank'
-
-            if (typeof blob === 'string') {
-               // Support regular links
-               a.href = blob;
-               if (a.origin !== location.origin) {
-                  corsEnabled(a.href)
-                     ? download(blob, name, opts)
-                     : click(a, a.target = '_blank');
-               } else {
-                  click(a);
-               }
-            } else {
-               // Support blobs
-               a.href = URL.createObjectURL(blob);
-               setTimeout(function () { URL.revokeObjectURL(a.href); }, 4E4); // 40s
-               setTimeout(function () { click(a); }, 0);
-            }
-         }
-
-      // Use msSaveOrOpenBlob as a second approach
-         : 'msSaveOrOpenBlob' in navigator
-            ? function saveAs (blob, name, opts) {
-               name = name || blob.name || 'download';
-
-               if (typeof blob === 'string') {
-                  if (corsEnabled(blob)) {
-                     download(blob, name, opts);
-                  } else {
-                     var a = document.createElement('a');
-                     a.href = blob;
-                     a.target = '_blank';
-                     setTimeout(function () { click(a); });
-                  }
-               } else {
-                  navigator.msSaveOrOpenBlob(bom(blob, opts), name);
-               }
-            }
-
-         // Fallback to using FileReader and a popup
-            : function saveAs (blob, name, opts, popup) {
-               // Open a popup immediately do go around popup blocker
-               // Mostly only available on user interaction and the fileReader is async so...
-               popup = popup || open('', '_blank');
-               if (popup) {
-                  popup.document.title =
-      popup.document.body.innerText = 'downloading...';
-               }
-
-               if (typeof blob === 'string') return download(blob, name, opts);
-
-               var force = blob.type === 'application/octet-stream';
-               var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;
-               var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
-
-               if ((isChromeIOS || (force && isSafari) || isMacOSWebView) && typeof FileReader !== 'undefined') {
-                  // Safari doesn't allow downloading of blob URLs
-                  var reader = new FileReader();
-                  reader.onloadend = function () {
-                     var url = reader.result;
-                     url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
-                     if (popup) popup.location.href = url;
-                     else location = url;
-                     popup = null; // reverse-tabnabbing #460
-                  };
-                  reader.readAsDataURL(blob);
-               } else {
-                  var URL = _global.URL || _global.webkitURL;
-                  var url = URL.createObjectURL(blob);
-                  if (popup) popup.location = url;
-                  else location.href = url;
-                  popup = null; // reverse-tabnabbing #460
-                  setTimeout(function () { URL.revokeObjectURL(url); }, 4E4); // 40s
-               }
-            }
-);

package/src/extensions/helpers/clickOpener.js

@@ -1,180 +0,0 @@
-import { removeClass, addClass, removeEvent, addEvent, existy } from '../../utils';
-
-import popoverPosition from './popoverPosition';
-import openerHeightChecker from './openerHeightChecker';
-
-const UP_CODE     = 38;
-const DOWN_CODE   = 40;
-const LEFT_CODE   = 37;
-const RIGHT_CODE  = 39;
-const ESC_CODE    = 27;
-
-export default function handle(extension, {
-   $button,
-   $selector,
-   SELECTOR_OPEN_CN,
-   reposition = true,
-   closeOnClick = false,
-   heightControl = false,
-   firstFocusItemSelector = '',
-   toMainFn = () => {}
-}) {
-   let outerClickToken = null;
-
-   extension.addEvent($button, 'click', toggle);
-
-   if (!closeOnClick) {
-      extension.addEvent($selector, 'click', e => e.stopPropagation() );
-   }
-   extension.addEvent(extension.player.getElement(), 'mouseleave', hide);
-   extension.addEvent(extension.$selector, 'keydown', handleKeydown);
-   extension.bus.on('resizeplayer', hide);
-
-   function toggle() {
-      if (existy(outerClickToken)) {
-         hide();
-      } else {
-         show();
-      }
-   }
-
-   // Accessability: Handle arrow keys press
-   // TODO: This is not generic way, we can find better one
-   // To be able to improve this we should refactor the way we rendering our extensions
-   // Ex.: Remove hidden elements from DOM, fix the order of element rendering, etc.
-   function handleKeydown(e) {
-      e.stopPropagation();
-
-      const keyCode = e.keyCode;
-      const activeElement = document.activeElement;
-
-      if (keyCode === ESC_CODE) {
-         e.preventDefault();
-         hide();
-         extension.$button.focus();
-
-         return;
-      }
-
-      // If nested menu, move to next step
-      if (keyCode === RIGHT_CODE) {
-         e.preventDefault();
-
-         if (activeElement.classList.value.includes('__more')) {
-            activeElement.click();
-         }
-
-         return;
-      }
-
-      // If nested menu, move to prev step
-      if (keyCode === LEFT_CODE) {
-         e.preventDefault();
-
-         const allBackButtons = extension.$selector.querySelectorAll('button[class$="__back"]');
-         const visibleBackButton = Array.from(allBackButtons).find((btn) => btn.offsetWidth > 0 || btn.offsetHeight > 0);
-
-         if (visibleBackButton) visibleBackButton.click();
-
-         return;
-      }
-
-      if (keyCode === DOWN_CODE) {
-         e.preventDefault();
-         let nextFocus = activeElement.nextElementSibling;
-         nextFocus = checkVisibility(nextFocus, 'nextElementSibling');
-         nextFocus = handleWrapperSibling(nextFocus, 'firstElementChild');
-
-         if (!nextFocus) {
-            nextFocus = handleWrapperParent(nextFocus, 'nextElementSibling');
-         }
-
-         if (nextFocus) nextFocus.focus();
-
-         return;
-      }
-
-      if (keyCode === UP_CODE) {
-         e.preventDefault();
-         let prevFocus = activeElement.previousElementSibling;
-         prevFocus = handleWrapperParent(prevFocus, 'previousElementSibling');
-         prevFocus = checkVisibility(prevFocus, 'previousElementSibling');
-         prevFocus = handleWrapperSibling(prevFocus, 'lastElementChild');
-
-         if (prevFocus) prevFocus.focus();
-
-      }
-   }
-
-   function handleWrapperParent(el, sibling) {
-      const activeElement = document.activeElement;
-      let element = el;
-      // check if there is no next element and parent is wrapper
-      const isInsideWrapper = !element && activeElement.parentElement.classList.value.includes('tab-content');
-
-      if (isInsideWrapper) {
-         element = activeElement.parentElement[sibling];
-      }
-
-      return element;
-   }
-
-   function handleWrapperSibling(el, child) {
-      let element = el;
-      // check if nextElement is wrapper element
-      const isWrapper = element && element.classList.value.includes('tab-content');
-
-      if (isWrapper) {
-         element = element[child];
-      }
-
-      return element;
-   }
-
-   function checkVisibility(el, direction) {
-      let element = el;
-      let visible = el && (element.offsetWidth > 0 || element.offsetHeight > 0);
-
-      while (!visible && element) {
-         element = element[direction];
-         visible = el && (element.offsetWidth > 0 || element.offsetHeight > 0);
-      }
-
-      return element;
-   }
-
-   function hide() {
-      toMainFn();
-      extension.bus.emit('hidepopup');
-      removeClass($selector, SELECTOR_OPEN_CN);
-      if (existy(outerClickToken)) {
-         removeEvent(outerClickToken);
-         outerClickToken = null;
-      }
-   }
-
-   function show() {
-      addClass($selector, SELECTOR_OPEN_CN);
-
-      if (reposition) {
-         popoverPosition(extension.player, $button, $selector);
-      }
-
-      setTimeout(() => {
-         extension.bus.emit('showpopup', $selector);
-         outerClickToken = addEvent(document, 'click', hide);
-      });
-
-      if (heightControl) {
-         openerHeightChecker(extension.player, $selector);
-      }
-
-      // Accessability: If presented, focus on the first menu item
-      if (firstFocusItemSelector) {
-         setTimeout(() => {
-            const firstFocusItem = $selector.querySelector(firstFocusItemSelector);
-            firstFocusItem.focus();
-         });
-      }
-   }
-}

package/src/extensions/helpers/opener.js

@@ -1,30 +0,0 @@
-import { toggleClass, removeClass, addClass } from '../../utils';
-
-import popoverPosition from './popoverPosition';
-
-const DELAY = 200;
-
-export default function handle(extension, { $button, $selector, SELECTOR_OPEN_CN }) {
-   extension.addEvent($button, 'click', toggle);
-
-   let timerId = 0;
-
-   extension.addEvent(extension.getElement(), 'mouseleave', hide);
-
-   extension.addEvent($button, 'mouseenter', () => timerId = setTimeout(show, DELAY) );
-
-   function toggle() {
-      toggleClass($selector, SELECTOR_OPEN_CN);
-      popoverPosition(extension.player, $button, $selector);
-   }
-
-   function hide() {
-      clearTimeout(timerId);
-      removeClass($selector, SELECTOR_OPEN_CN);
-   }
-
-   function show() {
-      addClass($selector, SELECTOR_OPEN_CN);
-      popoverPosition(extension.player, $button, $selector);
-   }
-}

package/src/extensions/helpers/openerHeightChecker.js

@@ -1,13 +0,0 @@
-
-const OPENER_MARGIN = 100;
-const MAX_MAX_HEIGHT = 300;
-
-export default function openerHeightChecker(player, $selector) {
-   if (!player || !player.getElement()) return;
-
-   $selector.style.maxHeight = '';
-   const rect = player.getElement().parentNode.getBoundingClientRect();
-   const mh = (rect.height || rect.bottom - rect.top) - OPENER_MARGIN;
-
-   $selector.style.maxHeight = `${Math.min(mh, MAX_MAX_HEIGHT)}px`;
-}

package/src/extensions/helpers/popover.js

@@ -1,33 +0,0 @@
-import { createElement, append, removeClass, addClass, isFunction } from '../../utils';
-
-import popoverPosition from './popoverPosition';
-
-const CN = 'rmp-ext-popover';
-const VISIBLE_CN = `${CN}--visible`;
-
-const DELAY = 500;
-
-export default function popover(extension, { $button, text }) {
-   const parent = $button.parentNode;
-   const span = createElement('span', { class: CN, tabindex: 0 });
-   append(parent, span, $button);
-   $button.setAttribute('aria-label', isFunction(text) ? text() : text);
-
-   let timerId = 0;
-
-   extension.addEvent($button, 'mouseenter', () => timerId = setTimeout(show, DELAY) );
-   extension.addEvent($button, 'mouseleave', hide);
-   extension.addEvent($button, 'click', hide);
-
-   function show() {
-      span.textContent =  isFunction(text) ? text() : text;
-      span.style.left = '0';
-      popoverPosition(extension.player, $button, span);
-      addClass(span, VISIBLE_CN);
-   }
-
-   function hide() {
-      clearTimeout(timerId);
-      removeClass(span, VISIBLE_CN);
-   }
-}

package/src/extensions/helpers/popoverPosition.js

@@ -1,30 +0,0 @@
-import isElement from '../../utils/isElement';
-
-const HALF = 2;
-
-const PADDING = 3;
-
-export default function popoverPosition(player, position, $popover) {
-   $popover.style.display = 'block';
-   let element = player.getElement();
-   const mediaWidth = element ? element.offsetWidth : 0;
-   if ( isElement(position) ) {
-      const parent = mediaWidth ? element : element.parentNode;
-      const parentRect = parent.getBoundingClientRect();
-      const rect = position.getBoundingClientRect();
-      position = _half(rect.left + rect.right) - parentRect.left;
-   }
-   const w = $popover.offsetWidth;
-   let l = Math.max(PADDING, position - _half(w));
-   // native audio element doesn't have any width
-   if (mediaWidth) {
-      l = Math.min(l, mediaWidth - w - PADDING);
-   }
-
-   $popover.style.left = `${l}px`;
-   $popover.style.display = '';
-}
-
-function _half(num) {
-   return Math.floor(num / HALF);
-}

package/src/extensions/helpers/scrollIntoView.js

@@ -1,9 +0,0 @@
-export default function scrollIntoView(el, parent) {
-   const { top } = el.getBoundingClientRect();
-   const rect = parent.getBoundingClientRect();
-
-   const startPosition = parent.scrollTop;
-   const delta = Math.floor(top - rect.top);
-
-   parent.scrollTop = startPosition + delta;
-}

package/src/extensions/helpers/storage.js

@@ -1,20 +0,0 @@
-import existy from '../../utils/existy';
-
-const PREFIX = 'rmp-';
-
-export function storeData(key, value) {
-   try {
-      localStorage.setItem(PREFIX + key, value);
-   } catch (e) {
-      //
-   }
-}
-
-export function getStoredData(key, defaultValue) {
-   try {
-      const res = localStorage.getItem(PREFIX + key);
-      return existy(res) ? res : defaultValue;
-   } catch (e) {
-      return defaultValue;
-   }
-}

package/src/extensions/helpers/textContent.js

@@ -1,6 +0,0 @@
-const textEl = document.createElement('span');
-
-export default function textContent(html) {
-   textEl.innerHTML = html;
-   return textEl.textContent;
-}