@cloudnest/redxplyr 1.0.0

package/src/js/utils/browser.js

@@ -0,0 +1,21 @@
+// ==========================================================================
+// Browser sniffing
+// Unfortunately, due to mixed support, UA sniffing is required
+// ==========================================================================
+
+const isIE = Boolean(window.document.documentMode);
+const isEdge = /Edge/.test(navigator.userAgent);
+const isWebKit = 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent);
+const isIPhone = /iPhone|iPod/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1;
+// navigator.platform may be deprecated but this check is still required
+const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+const isIos = /iPad|iPhone|iPod/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1;
+
+export default {
+  isIE,
+  isEdge,
+  isWebKit,
+  isIPhone,
+  isIPadOS,
+  isIos,
+};

package/src/js/utils/elements.js

@@ -0,0 +1,263 @@
+// ==========================================================================
+// Element utils
+// ==========================================================================
+
+import is from './is';
+import { extend } from './objects';
+
+// Wrap an element
+export function wrap(elements, wrapper) {
+  // Convert `elements` to an array, if necessary.
+  const targets = elements.length ? elements : [elements];
+
+  // Loops backwards to prevent having to clone the wrapper on the
+  // first element (see `child` below).
+  Array.from(targets)
+    .reverse()
+    .forEach((element, index) => {
+      const child = index > 0 ? wrapper.cloneNode(true) : wrapper;
+      // Cache the current parent and sibling.
+      const parent = element.parentNode;
+      const sibling = element.nextSibling;
+
+      // Wrap the element (is automatically removed from its current
+      // parent).
+      child.appendChild(element);
+
+      // If the element had a sibling, insert the wrapper before
+      // the sibling to maintain the HTML structure; otherwise, just
+      // append it to the parent.
+      if (sibling) {
+        parent.insertBefore(child, sibling);
+      }
+      else {
+        parent.appendChild(child);
+      }
+    });
+}
+
+// Set attributes
+export function setAttributes(element, attributes) {
+  if (!is.element(element) || is.empty(attributes)) return;
+
+  // Assume null and undefined attributes should be left out,
+  // Setting them would otherwise convert them to "null" and "undefined"
+  Object.entries(attributes)
+    .filter(([, value]) => !is.nullOrUndefined(value))
+    .forEach(([key, value]) => element.setAttribute(key, value));
+}
+
+// Create a DocumentFragment
+export function createElement(type, attributes, text) {
+  // Create a new <element>
+  const element = document.createElement(type);
+
+  // Set all passed attributes
+  if (is.object(attributes)) {
+    setAttributes(element, attributes);
+  }
+
+  // Add text node
+  if (is.string(text)) {
+    element.textContent = text;
+  }
+
+  // Return built element
+  return element;
+}
+
+// Insert an element after another
+export function insertAfter(element, target) {
+  if (!is.element(element) || !is.element(target)) return;
+
+  target.parentNode.insertBefore(element, target.nextSibling);
+}
+
+// Insert a DocumentFragment
+export function insertElement(type, parent, attributes, text) {
+  if (!is.element(parent)) return;
+
+  parent.appendChild(createElement(type, attributes, text));
+}
+
+// Remove element(s)
+export function removeElement(element) {
+  if (is.nodeList(element) || is.array(element)) {
+    Array.from(element).forEach(removeElement);
+    return;
+  }
+
+  if (!is.element(element) || !is.element(element.parentNode)) {
+    return;
+  }
+
+  element.parentNode.removeChild(element);
+}
+
+// Remove all child elements
+export function emptyElement(element) {
+  if (!is.element(element)) return;
+
+  let { length } = element.childNodes;
+
+  while (length > 0) {
+    element.removeChild(element.lastChild);
+    length -= 1;
+  }
+}
+
+// Replace element
+export function replaceElement(newChild, oldChild) {
+  if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) return null;
+
+  oldChild.parentNode.replaceChild(newChild, oldChild);
+
+  return newChild;
+}
+
+// Get an attribute object from a string selector
+export function getAttributesFromSelector(sel, existingAttributes) {
+  // For example:
+  // '.test' to { class: 'test' }
+  // '#test' to { id: 'test' }
+  // '[data-test="test"]' to { 'data-test': 'test' }
+
+  if (!is.string(sel) || is.empty(sel)) return {};
+
+  const attributes = {};
+  const existing = extend({}, existingAttributes);
+
+  sel.split(',').forEach((s) => {
+    // Remove whitespace
+    const selector = s.trim();
+    const className = selector.replace('.', '');
+    const stripped = selector.replace(/[[\]]/g, '');
+    // Get the parts and value
+    const parts = stripped.split('=');
+    const [key] = parts;
+    const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
+    // Get the first character
+    const start = selector.charAt(0);
+
+    switch (start) {
+      case '.':
+        // Add to existing classname
+        if (is.string(existing.class)) {
+          attributes.class = `${existing.class} ${className}`;
+        }
+        else {
+          attributes.class = className;
+        }
+        break;
+
+      case '#':
+        // ID selector
+        attributes.id = selector.replace('#', '');
+        break;
+
+      case '[':
+        // Attribute selector
+        attributes[key] = value;
+
+        break;
+
+      default:
+        break;
+    }
+  });
+
+  return extend(existing, attributes);
+}
+
+// Toggle hidden
+export function toggleHidden(element, hidden) {
+  if (!is.element(element)) return;
+
+  let hide = hidden;
+
+  if (!is.boolean(hide)) {
+    hide = !element.hidden;
+  }
+
+  element.hidden = hide;
+}
+
+// Mirror Element.classList.toggle, with IE compatibility for "force" argument
+export function toggleClass(element, className, force) {
+  if (is.nodeList(element)) {
+    return Array.from(element).map(e => toggleClass(e, className, force));
+  }
+
+  if (is.element(element)) {
+    let method = 'toggle';
+    if (typeof force !== 'undefined') {
+      method = force ? 'add' : 'remove';
+    }
+
+    element.classList[method](className);
+    return element.classList.contains(className);
+  }
+
+  return false;
+}
+
+// Has class name
+export function hasClass(element, className) {
+  return is.element(element) && element.classList.contains(className);
+}
+
+// Element matches selector
+export function matches(element, selector) {
+  const { prototype } = Element;
+
+  function match() {
+    return Array.from(document.querySelectorAll(selector)).includes(this);
+  }
+
+  const method
+    = prototype.matches
+      || prototype.webkitMatchesSelector
+      || prototype.mozMatchesSelector
+      || prototype.msMatchesSelector
+      || match;
+
+  return method.call(element, selector);
+}
+
+// Closest ancestor element matching selector (also tests element itself)
+export function closest(element, selector) {
+  const { prototype } = Element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+  function closestElement() {
+    let el = this;
+
+    do {
+      if (matches.matches(el, selector)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  }
+
+  const method = prototype.closest || closestElement;
+
+  return method.call(element, selector);
+}
+
+// Find all elements
+export function getElements(selector) {
+  return this.elements.container.querySelectorAll(selector);
+}
+
+// Find a single element
+export function getElement(selector) {
+  return this.elements.container.querySelector(selector);
+}
+
+// Set focus and tab focus class
+export function setFocus(element = null, focusVisible = false) {
+  if (!is.element(element)) return;
+
+  // Set regular focus
+  element.focus({ preventScroll: true, focusVisible });
+}

package/src/js/utils/events.js

@@ -0,0 +1,116 @@
+// ==========================================================================
+// Event utils
+// ==========================================================================
+
+import is from './is';
+
+// Check for passive event listener support
+// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+// https://www.youtube.com/watch?v=NPM6172J22g
+const supportsPassiveListeners = (() => {
+  // Test via a getter in the options object to see if the passive property is accessed
+  let supported = false;
+  try {
+    const options = Object.defineProperty({}, 'passive', {
+      get() {
+        supported = true;
+        return null;
+      },
+    });
+    window.addEventListener('test', null, options);
+    window.removeEventListener('test', null, options);
+  }
+  catch {}
+
+  return supported;
+})();
+
+// Toggle event listener
+export function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) {
+  // Bail if no element, event, or callback
+  if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) {
+    return;
+  }
+
+  // Allow multiple events
+  const events = event.split(' ');
+  // Build options
+  // Default to just the capture boolean for browsers with no passive listener support
+  let options = capture;
+
+  // If passive events listeners are supported
+  if (supportsPassiveListeners) {
+    options = {
+      // Whether the listener can be passive (i.e. default never prevented)
+      passive,
+      // Whether the listener is a capturing listener or not
+      capture,
+    };
+  }
+
+  // If a single node is passed, bind the event listener
+  events.forEach((type) => {
+    if (this && this.eventListeners && toggle) {
+      // Cache event listener
+      this.eventListeners.push({ element, type, callback, options });
+    }
+
+    element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);
+  });
+}
+
+// Bind event handler
+export function on(element, events = '', callback, passive = true, capture = false) {
+  toggleListener.call(this, element, events, callback, true, passive, capture);
+}
+
+// Unbind event handler
+export function off(element, events = '', callback, passive = true, capture = false) {
+  toggleListener.call(this, element, events, callback, false, passive, capture);
+}
+
+// Bind once-only event handler
+export function once(element, events = '', callback, passive = true, capture = false) {
+  const onceCallback = (...args) => {
+    off(element, events, onceCallback, passive, capture);
+    callback.apply(this, args);
+  };
+
+  toggleListener.call(this, element, events, onceCallback, true, passive, capture);
+}
+
+// Trigger event
+export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
+  // Bail if no element
+  if (!is.element(element) || is.empty(type)) {
+    return;
+  }
+
+  // Create and dispatch the event
+  const event = new CustomEvent(type, {
+    bubbles,
+    detail: { ...detail, plyr: this },
+  });
+
+  // Dispatch the event
+  element.dispatchEvent(event);
+}
+
+// Unbind all cached event listeners
+export function unbindListeners() {
+  if (this && this.eventListeners) {
+    this.eventListeners.forEach((item) => {
+      const { element, type, callback, options } = item;
+      element.removeEventListener(type, callback, options);
+    });
+
+    this.eventListeners = [];
+  }
+}
+
+// Run method when / if player is ready
+export function ready() {
+  return new Promise(resolve =>
+    this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),
+  ).then(() => {});
+}

package/src/js/utils/fetch.js

@@ -0,0 +1,45 @@
+// ==========================================================================
+// Fetch wrapper
+// Using XHR to avoid issues with older browsers
+// ==========================================================================
+
+export default function fetch(url, responseType = 'text', withCredentials = false) {
+  return new Promise((resolve, reject) => {
+    try {
+      const request = new XMLHttpRequest();
+
+      // Check for CORS support
+      if (!('withCredentials' in request)) return;
+
+      // Set to true if needed for CORS
+      if (withCredentials) {
+        request.withCredentials = true;
+      }
+
+      request.addEventListener('load', () => {
+        if (responseType === 'text') {
+          try {
+            resolve(JSON.parse(request.responseText));
+          }
+          catch {
+            resolve(request.responseText);
+          }
+        }
+        else {
+          resolve(request.response);
+        }
+      });
+
+      request.addEventListener('error', () => {
+        throw new Error(request.status);
+      });
+
+      request.open('GET', url, true);
+      request.responseType = responseType;
+      request.send();
+    }
+    catch (error) {
+      reject(error);
+    }
+  });
+}

package/src/js/utils/i18n.js

@@ -0,0 +1,47 @@
+// ==========================================================================
+// Plyr internationalization
+// ==========================================================================
+
+import is from './is';
+import { getDeep } from './objects';
+import { replaceAll } from './strings';
+
+// Skip i18n for abbreviations and brand names
+const resources = {
+  pip: 'PIP',
+  airplay: 'AirPlay',
+  html5: 'HTML5',
+  vimeo: 'Vimeo',
+  youtube: 'YouTube',
+};
+
+const i18n = {
+  get(key = '', config = {}) {
+    if (is.empty(key) || is.empty(config)) {
+      return '';
+    }
+
+    let string = getDeep(config.i18n, key);
+
+    if (is.empty(string)) {
+      if (Object.keys(resources).includes(key)) {
+        return resources[key];
+      }
+
+      return '';
+    }
+
+    const replace = {
+      '{seektime}': config.seekTime,
+      '{title}': config.title,
+    };
+
+    Object.entries(replace).forEach(([k, v]) => {
+      string = replaceAll(string, k, v);
+    });
+
+    return string;
+  },
+};
+
+export default i18n;

package/src/js/utils/is.js

@@ -0,0 +1,81 @@
+// ==========================================================================
+// Type checking utils
+// ==========================================================================
+
+const getConstructor = input => (input !== null && typeof input !== 'undefined' ? input.constructor : null);
+const instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor);
+const isNullOrUndefined = input => input === null || typeof input === 'undefined';
+const isObject = input => getConstructor(input) === Object;
+const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);
+const isString = input => getConstructor(input) === String;
+const isBoolean = input => getConstructor(input) === Boolean;
+const isFunction = input => typeof input === 'function';
+const isArray = input => Array.isArray(input);
+const isWeakMap = input => instanceOf(input, WeakMap);
+const isNodeList = input => instanceOf(input, NodeList);
+const isTextNode = input => getConstructor(input) === Text;
+const isEvent = input => instanceOf(input, Event);
+const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);
+const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
+const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);
+
+function isElement(input) {
+  return input !== null
+    && typeof input === 'object'
+    && input.nodeType === 1
+    && typeof input.style === 'object'
+    && typeof input.ownerDocument === 'object';
+}
+
+function isEmpty(input) {
+  return isNullOrUndefined(input)
+    || ((isString(input) || isArray(input) || isNodeList(input)) && !input.length)
+    || (isObject(input) && !Object.keys(input).length);
+}
+
+function isUrl(input) {
+  // Accept a URL object
+  if (instanceOf(input, window.URL)) {
+    return true;
+  }
+
+  // Must be string from here
+  if (!isString(input)) {
+    return false;
+  }
+
+  // Add the protocol if required
+  let string = input;
+  if (!input.startsWith('http://') || !input.startsWith('https://')) {
+    string = `http://${input}`;
+  }
+
+  try {
+    return !isEmpty(new URL(string).hostname);
+  }
+  catch {
+    return false;
+  }
+}
+
+export default {
+  nullOrUndefined: isNullOrUndefined,
+  object: isObject,
+  number: isNumber,
+  string: isString,
+  boolean: isBoolean,
+  function: isFunction,
+  array: isArray,
+  weakMap: isWeakMap,
+  nodeList: isNodeList,
+  element: isElement,
+  textNode: isTextNode,
+  event: isEvent,
+  keyboardEvent: isKeyboardEvent,
+  cue: isCue,
+  track: isTrack,
+  promise: isPromise,
+  url: isUrl,
+  empty: isEmpty,
+};

package/src/js/utils/load-image.js

@@ -0,0 +1,19 @@
+// ==========================================================================
+// Load image avoiding xhr/fetch CORS issues
+// Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded
+// By default it checks if it is at least 1px, but you can add a second argument to change this
+// ==========================================================================
+
+export default function loadImage(src, minWidth = 1) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+
+    const handler = () => {
+      delete image.onload;
+      delete image.onerror;
+      (image.naturalWidth >= minWidth ? resolve : reject)(image);
+    };
+
+    Object.assign(image, { onload: handler, onerror: handler, src });
+  });
+}

package/src/js/utils/load-script.js

@@ -0,0 +1,14 @@
+// ==========================================================================
+// Load an external script
+// ==========================================================================
+
+import loadjs from 'loadjs';
+
+export default function loadScript(url) {
+  return new Promise((resolve, reject) => {
+    loadjs(url, {
+      success: resolve,
+      error: reject,
+    });
+  });
+}

package/src/js/utils/load-sprite.js

@@ -0,0 +1,77 @@
+// ==========================================================================
+// Sprite loader
+// ==========================================================================
+
+import Storage from '../storage';
+import fetch from './fetch';
+import is from './is';
+
+// Load an external SVG sprite
+export default function loadSprite(url, id) {
+  if (!is.string(url)) {
+    return;
+  }
+
+  const prefix = 'cache';
+  const hasId = is.string(id);
+  let isCached = false;
+  const exists = () => document.getElementById(id) !== null;
+
+  const update = (container, data) => {
+    container.innerHTML = data;
+
+    // Check again incase of race condition
+    if (hasId && exists()) {
+      return;
+    }
+
+    // Inject the SVG to the body
+    document.body.insertAdjacentElement('afterbegin', container);
+  };
+
+  // Only load once if ID set
+  if (!hasId || !exists()) {
+    const useStorage = Storage.supported;
+    // Create container
+    const container = document.createElement('div');
+    container.setAttribute('hidden', '');
+
+    if (hasId) {
+      container.setAttribute('id', id);
+    }
+
+    // Check in cache
+    if (useStorage) {
+      const cached = window.localStorage.getItem(`${prefix}-${id}`);
+      isCached = cached !== null;
+
+      if (isCached) {
+        const data = JSON.parse(cached);
+        update(container, data.content);
+      }
+    }
+
+    // Get the sprite
+    fetch(url)
+      .then((result) => {
+        if (is.empty(result)) {
+          return;
+        }
+
+        if (useStorage) {
+          try {
+            window.localStorage.setItem(
+              `${prefix}-${id}`,
+              JSON.stringify({
+                content: result,
+              }),
+            );
+          }
+          catch {}
+        }
+
+        update(container, result);
+      })
+      .catch(() => {});
+  }
+}