@cloudnest/redxplyr 1.0.0

package/src/js/utils/numbers.js

@@ -0,0 +1,17 @@
+/**
+ * Returns a number whose value is limited to the given range.
+ *
+ * Example: limit the output of this computation to between 0 and 255
+ * (x * 255).clamp(0, 255)
+ *
+ * @param {number} input
+ * @param {number} min The lower boundary of the output range
+ * @param {number} max The upper boundary of the output range
+ * @returns A number within the bounds of min and max
+ * @type Number
+ */
+export function clamp(input = 0, min = 0, max = 255) {
+  return Math.min(Math.max(input, min), max);
+}
+
+export default { clamp };

package/src/js/utils/objects.js

@@ -0,0 +1,43 @@
+// ==========================================================================
+// Object utils
+// ==========================================================================
+
+import is from './is';
+
+// Clone nested objects
+export function cloneDeep(object) {
+  return JSON.parse(JSON.stringify(object));
+}
+
+// Get a nested value in an object
+export function getDeep(object, path) {
+  return path.split('.').reduce((obj, key) => obj && obj[key], object);
+}
+
+// Deep extend destination object with N more objects
+export function extend(target = {}, ...sources) {
+  if (!sources.length) {
+    return target;
+  }
+
+  const source = sources.shift();
+
+  if (!is.object(source)) {
+    return target;
+  }
+
+  Object.keys(source).forEach((key) => {
+    if (is.object(source[key])) {
+      if (!Object.keys(target).includes(key)) {
+        Object.assign(target, { [key]: {} });
+      }
+
+      extend(target[key], source[key]);
+    }
+    else {
+      Object.assign(target, { [key]: source[key] });
+    }
+  });
+
+  return extend(target, ...sources);
+}

package/src/js/utils/promise.js

@@ -0,0 +1,14 @@
+import is from './is';
+/**
+ * Silence a Promise-like object.
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ * @param  {object} value An object that may or may not be `Promise`-like.
+ */
+export function silencePromise(value) {
+  if (is.promise(value)) {
+    value.then(null, () => {});
+  }
+}
+
+export default { silencePromise };

package/src/js/utils/strings.js

@@ -0,0 +1,80 @@
+// ==========================================================================
+// String utils
+// ==========================================================================
+
+import is from './is';
+
+// Generate a random ID
+export function generateId(prefix) {
+  return `${prefix}-${Math.floor(Math.random() * 10000)}`;
+}
+
+// Format string
+export function format(input, ...args) {
+  if (is.empty(input)) return input;
+
+  return input.toString().replace(/\{(\d+)\}/g, (_, i) => args[i].toString());
+}
+
+// Get percentage
+export function getPercentage(current, max) {
+  if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
+    return 0;
+  }
+
+  return ((current / max) * 100).toFixed(2);
+}
+
+// Replace all occurrences of a string in a string
+export function replaceAll(input = '', find = '', replace = '') {
+  return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
+}
+
+// Convert to title case
+export function toTitleCase(input = '') {
+  return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.slice(1).toLowerCase());
+}
+
+// Convert string to pascalCase
+export function toPascalCase(input = '') {
+  let string = input.toString();
+
+  // Convert kebab case
+  string = replaceAll(string, '-', ' ');
+
+  // Convert snake case
+  string = replaceAll(string, '_', ' ');
+
+  // Convert to title case
+  string = toTitleCase(string);
+
+  // Convert to pascal case
+  return replaceAll(string, ' ', '');
+}
+
+// Convert string to pascalCase
+export function toCamelCase(input = '') {
+  let string = input.toString();
+
+  // Convert to pascal case
+  string = toPascalCase(string);
+
+  // Convert first character to lowercase
+  return string.charAt(0).toLowerCase() + string.slice(1);
+}
+
+// Remove HTML from a string
+export function stripHTML(source) {
+  const fragment = document.createDocumentFragment();
+  const element = document.createElement('div');
+  fragment.appendChild(element);
+  element.innerHTML = source;
+  return fragment.firstChild.textContent;
+}
+
+// Like outerHTML, but also works for DocumentFragment
+export function getHTML(element) {
+  const wrapper = document.createElement('div');
+  wrapper.appendChild(element);
+  return wrapper.innerHTML;
+}

package/src/js/utils/style.js

@@ -0,0 +1,148 @@
+// ==========================================================================
+// Style utils
+// ==========================================================================
+
+import { closest } from './arrays';
+import is from './is';
+
+// Check support for a CSS declaration
+export function supportsCSS(declaration) {
+  if (!window || !window.CSS) {
+    return false;
+  }
+
+  return window.CSS.supports(declaration);
+}
+
+// Standard/common aspect ratios
+const standardRatios = [
+  [1, 1],
+  [4, 3],
+  [3, 4],
+  [5, 4],
+  [4, 5],
+  [3, 2],
+  [2, 3],
+  [16, 10],
+  [10, 16],
+  [16, 9],
+  [9, 16],
+  [21, 9],
+  [9, 21],
+  [32, 9],
+  [9, 32],
+].reduce((out, [x, y]) => ({ ...out, [x / y]: [x, y] }), {});
+
+// Validate an aspect ratio
+export function validateAspectRatio(input) {
+  if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
+    return false;
+  }
+
+  const ratio = is.array(input) ? input : input.split(':');
+
+  return ratio.map(Number).every(is.number);
+}
+
+// Reduce an aspect ratio to it's lowest form
+export function reduceAspectRatio(ratio) {
+  if (!is.array(ratio) || !ratio.every(is.number)) {
+    return null;
+  }
+
+  const [width, height] = ratio;
+  const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));
+  const divider = getDivider(width, height);
+
+  return [width / divider, height / divider];
+}
+
+// Calculate an aspect ratio
+export function getAspectRatio(input) {
+  const parse = ratio => (validateAspectRatio(ratio) ? ratio.split(':').map(Number) : null);
+  // Try provided ratio
+  let ratio = parse(input);
+
+  // Get from config
+  if (ratio === null) {
+    ratio = parse(this.config.ratio);
+  }
+
+  // Get from embed
+  if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {
+    ({ ratio } = this.embed);
+  }
+
+  // Get from HTML5 video
+  if (ratio === null && this.isHTML5) {
+    const { videoWidth, videoHeight } = this.media;
+    ratio = [videoWidth, videoHeight];
+  }
+
+  return reduceAspectRatio(ratio);
+}
+
+// Set aspect ratio for responsive container
+export function setAspectRatio(input) {
+  if (!this.isVideo) {
+    return {};
+  }
+
+  const { wrapper } = this.elements;
+  const ratio = getAspectRatio.call(this, input);
+
+  if (!is.array(ratio)) {
+    return {};
+  }
+
+  const [x, y] = reduceAspectRatio(ratio);
+  const useNative = supportsCSS(`aspect-ratio: ${x}/${y}`);
+  const padding = (100 / x) * y;
+
+  if (useNative) {
+    wrapper.style.aspectRatio = `${x}/${y}`;
+  }
+  else {
+    wrapper.style.paddingBottom = `${padding}%`;
+  }
+
+  // For Vimeo we have an extra <div> to hide the standard controls and UI
+  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
+    const height = (100 / this.media.offsetWidth) * Number.parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
+    const offset = (height - padding) / (height / 50);
+
+    if (this.fullscreen.active) {
+      wrapper.style.paddingBottom = null;
+    }
+    else {
+      this.media.style.transform = `translateY(-${offset}%)`;
+    }
+  }
+  else if (this.isHTML5) {
+    wrapper.classList.add(this.config.classNames.videoFixedRatio);
+  }
+
+  return { padding, ratio };
+}
+
+// Round an aspect ratio to closest standard ratio
+export function roundAspectRatio(x, y, tolerance = 0.05) {
+  const ratio = x / y;
+  const closestRatio = closest(Object.keys(standardRatios), ratio);
+
+  // Check match is within tolerance
+  if (Math.abs(closestRatio - ratio) <= tolerance) {
+    return standardRatios[closestRatio];
+  }
+
+  // No match
+  return [x, y];
+}
+
+// Get the size of the viewport
+// https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions
+export function getViewportSize() {
+  const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+  const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+  return [width, height];
+}

package/src/js/utils/time.js

@@ -0,0 +1,36 @@
+// ==========================================================================
+// Time utils
+// ==========================================================================
+
+import is from './is';
+
+// Time helpers
+export const getHours = value => Math.trunc((value / 60 / 60) % 60, 10);
+export const getMinutes = value => Math.trunc((value / 60) % 60, 10);
+export const getSeconds = value => Math.trunc(value % 60, 10);
+
+// Format time to UI friendly string
+export function formatTime(time = 0, displayHours = false, inverted = false) {
+  // Bail if the value isn't a number
+  if (!is.number(time)) {
+    return formatTime(undefined, displayHours, inverted);
+  }
+
+  // Format time component to add leading zero
+  const format = value => `0${value}`.slice(-2);
+  // Breakdown to hours, mins, secs
+  let hours = getHours(time);
+  const mins = getMinutes(time);
+  const secs = getSeconds(time);
+
+  // Do we need to display hours?
+  if (displayHours || hours > 0) {
+    hours = `${hours}:`;
+  }
+  else {
+    hours = '';
+  }
+
+  // Render
+  return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;
+}

package/src/js/utils/urls.js

@@ -0,0 +1,40 @@
+// ==========================================================================
+// URL utils
+// ==========================================================================
+
+import is from './is';
+
+/**
+ * Parse a string to a URL object
+ * @param {string} input - the URL to be parsed
+ * @param {boolean} safe - failsafe parsing
+ */
+export function parseUrl(input, safe = true) {
+  let url = input;
+
+  if (safe) {
+    const parser = document.createElement('a');
+    parser.href = url;
+    url = parser.href;
+  }
+
+  try {
+    return new URL(url);
+  }
+  catch {
+    return null;
+  }
+}
+
+// Convert object to URLSearchParams
+export function buildUrlParams(input) {
+  const params = new URLSearchParams();
+
+  if (is.object(input)) {
+    Object.entries(input).forEach(([key, value]) => {
+      params.set(key, value);
+    });
+  }
+
+  return params;
+}

package/src/sass/base.scss

@@ -0,0 +1,69 @@
+// --------------------------------------------------------------
+// Base styling
+// --------------------------------------------------------------
+
+// Base
+.plyr {
+  @include plyr-font-smoothing($plyr-font-smoothing);
+
+  align-items: center;
+  direction: ltr;
+  display: flex;
+  flex-direction: column;
+  font-family: $plyr-font-family;
+  font-variant-numeric: tabular-nums; // Force monosace-esque number widths
+  font-weight: $plyr-font-weight-regular;
+  line-height: $plyr-line-height;
+  max-width: 100%;
+  min-width: 200px;
+  position: relative;
+  text-shadow: none;
+  transition: box-shadow 0.3s ease;
+  z-index: 0; // Force any border radius
+
+  // Media elements
+  video,
+  audio,
+  iframe {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  button {
+    font: inherit;
+    line-height: inherit;
+    width: auto;
+  }
+
+  // Ignore focus
+  &:focus {
+    outline: 0;
+  }
+}
+
+// border-box everything
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+@if $plyr-border-box {
+  .plyr--full-ui {
+    box-sizing: border-box;
+
+    *,
+    *::after,
+    *::before {
+      box-sizing: inherit;
+    }
+  }
+}
+
+// Fix 300ms delay
+@if $plyr-touch-action {
+  .plyr--full-ui {
+    a,
+    button,
+    input,
+    label {
+      touch-action: manipulation;
+    }
+  }
+}

package/src/sass/components/badges.scss

@@ -0,0 +1,12 @@
+// --------------------------------------------------------------
+// Badges
+// --------------------------------------------------------------
+
+.plyr__badge {
+  background: $plyr-badge-background;
+  border-radius: $plyr-badge-border-radius;
+  color: $plyr-badge-text-color;
+  font-size: $plyr-font-size-badge;
+  line-height: 1;
+  padding: 3px 4px;
+}

package/src/sass/components/captions.scss

@@ -0,0 +1,58 @@
+// --------------------------------------------------------------
+// Captions
+// --------------------------------------------------------------
+
+// Hide default captions
+.plyr--full-ui ::-webkit-media-text-track-container {
+  display: none;
+}
+
+.plyr__captions {
+  animation: plyr-fade-in 0.3s ease;
+  bottom: 0;
+  display: none;
+  font-size: $plyr-font-size-captions-small;
+  left: 0;
+  padding: $plyr-control-spacing;
+  position: absolute;
+  text-align: center;
+  transition: transform 0.4s ease-in-out;
+  width: 100%;
+
+  span:empty {
+    display: none;
+  }
+
+  @media (min-width: $plyr-bp-sm) {
+    font-size: $plyr-font-size-captions-base;
+    padding: calc(#{$plyr-control-spacing} * 2);
+  }
+
+  @media (min-width: $plyr-bp-md) {
+    font-size: $plyr-font-size-captions-medium;
+  }
+}
+
+.plyr--captions-active .plyr__captions {
+  display: block;
+}
+
+// If the lower controls are shown and not empty
+.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
+  transform: translateY(calc(#{$plyr-control-spacing} * -4));
+}
+
+.plyr__caption {
+  background: $plyr-captions-background;
+  border-radius: 4px;
+  box-decoration-break: clone;
+  color: $plyr-captions-text-color;
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
+
+  // Firefox adds a <div> when using getCueAsHTML()
+  div {
+    display: inline;
+  }
+}

package/src/sass/components/control.scss

@@ -0,0 +1,52 @@
+// --------------------------------------------------------------
+// Control buttons
+// --------------------------------------------------------------
+
+.plyr__control {
+  background: transparent;
+  border: 0;
+  border-radius: $plyr-control-radius;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: visible; // IE11
+  padding: $plyr-control-padding;
+  position: relative;
+  transition: all 0.1s ease-in-out;
+
+  svg {
+    display: block;
+    fill: currentColor;
+    height: $plyr-control-icon-size;
+    pointer-events: none;
+    width: $plyr-control-icon-size;
+  }
+
+  // Default focus
+  &:focus {
+    outline: 0;
+  }
+
+  // Tab focus
+  &:focus-visible {
+    @include plyr-focus-visible;
+  }
+}
+
+// Remove any link styling
+a.plyr__control {
+  text-decoration: none;
+
+  &::after,
+  &::before {
+    display: none;
+  }
+}
+
+// Change icons on state change
+.plyr__control:not(.plyr__control--pressed) .icon--pressed,
+.plyr__control.plyr__control--pressed .icon--not-pressed,
+.plyr__control:not(.plyr__control--pressed) .label--pressed,
+.plyr__control.plyr__control--pressed .label--not-pressed {
+  display: none;
+}

package/src/sass/components/controls.scss

@@ -0,0 +1,65 @@
+// --------------------------------------------------------------
+// Controls
+// --------------------------------------------------------------
+
+// Hide native controls
+.plyr--full-ui ::-webkit-media-controls {
+  display: none;
+}
+
+// Playback controls
+.plyr__controls {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  text-align: center;
+
+  .plyr__progress__container {
+    flex: 1;
+    min-width: 0; // Fix for Edge issue where content would overflow
+  }
+
+  // Spacing
+  .plyr__controls__item {
+    margin-left: calc(#{$plyr-control-spacing} / 4);
+
+    &:first-child {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+    &.plyr__progress__container {
+      padding-left: calc(#{$plyr-control-spacing} / 4);
+    }
+
+    &.plyr__time {
+      padding: 0 calc(#{$plyr-control-spacing} / 2);
+    }
+
+    &.plyr__progress__container:first-child,
+    &.plyr__time:first-child,
+    &.plyr__time + .plyr__time {
+      padding-left: 0;
+    }
+  }
+
+  // Hide empty controls
+  &:empty {
+    display: none;
+  }
+}
+
+// Some options are hidden by default
+.plyr [data-plyr='captions'],
+.plyr [data-plyr='pip'],
+.plyr [data-plyr='airplay'],
+.plyr [data-plyr='fullscreen'] {
+  display: none;
+}
+
+.plyr--captions-enabled [data-plyr='captions'],
+.plyr--pip-supported [data-plyr='pip'],
+.plyr--airplay-supported [data-plyr='airplay'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+  display: inline-block;
+}