ravnur-player-public 3.4.2 → 3.4.4

package/src/extensions/help.js

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

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

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

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

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

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

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

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

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

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