@cloudnest/redxplyr 1.0.0

package/src/js/plyr.polyfilled.js

@@ -0,0 +1,13 @@
+// ==========================================================================
+// redxplyr Polyfilled Build
+// redxplyr.js v1.0.0
+// https://github.com/xgauravyaduvanshii/redxplyr
+// License: The MIT License (MIT)
+// ==========================================================================
+
+import Plyr from './plyr';
+import 'custom-event-polyfill';
+
+import 'url-polyfill';
+
+export default Plyr;

package/src/js/source.js

@@ -0,0 +1,155 @@
+// ==========================================================================
+// Plyr source update
+// ==========================================================================
+
+import { providers } from './config/types';
+import html5 from './html5';
+import media from './media';
+import PreviewThumbnails from './plugins/preview-thumbnails';
+import support from './support';
+import ui from './ui';
+import { createElement, insertElement, removeElement } from './utils/elements';
+import is from './utils/is';
+import { getDeep } from './utils/objects';
+
+const source = {
+  // Add elements to HTML5 media (source, tracks, etc)
+  insertElements(type, attributes) {
+    if (is.string(attributes)) {
+      insertElement(type, this.media, {
+        src: attributes,
+      });
+    }
+    else if (is.array(attributes)) {
+      attributes.forEach((attribute) => {
+        insertElement(type, this.media, attribute);
+      });
+    }
+  },
+
+  // Update source
+  // Sources are not checked for support so be careful
+  change(input) {
+    if (!getDeep(input, 'sources.length')) {
+      this.debug.warn('Invalid source format');
+      return;
+    }
+
+    // Cancel current network requests
+    html5.cancelRequests.call(this);
+
+    // Destroy instance and re-setup
+    this.destroy(() => {
+      // Reset quality options
+      this.options.quality = [];
+
+      // Remove elements
+      removeElement(this.media);
+      this.media = null;
+
+      // Reset class name
+      if (is.element(this.elements.container)) {
+        this.elements.container.removeAttribute('class');
+      }
+
+      // Set the type and provider
+      const { sources, type } = input;
+      const [{ provider = providers.html5, src }] = sources;
+      const tagName = provider === 'html5' ? type : 'div';
+      const attributes = provider === 'html5' ? {} : { src };
+
+      Object.assign(this, {
+        provider,
+        type,
+        // Check for support
+        supported: support.check(type, provider, this.config.playsinline),
+        // Create new element
+        media: createElement(tagName, attributes),
+      });
+
+      // Inject the new element
+      this.elements.container.appendChild(this.media);
+
+      // Autoplay the new source?
+      if (is.boolean(input.autoplay)) {
+        this.config.autoplay = input.autoplay;
+      }
+
+      // Set attributes for audio and video
+      if (this.isHTML5) {
+        if (this.config.crossorigin) {
+          this.media.setAttribute('crossorigin', '');
+        }
+        if (this.config.autoplay) {
+          this.media.setAttribute('autoplay', '');
+        }
+        if (!is.empty(input.poster)) {
+          this.poster = input.poster;
+        }
+        if (this.config.loop.active) {
+          this.media.setAttribute('loop', '');
+        }
+        if (this.config.muted) {
+          this.media.setAttribute('muted', '');
+        }
+        if (this.config.playsinline) {
+          this.media.setAttribute('playsinline', '');
+        }
+      }
+
+      // Restore class hook
+      ui.addStyleHook.call(this);
+
+      // Set new sources for html5
+      if (this.isHTML5) {
+        source.insertElements.call(this, 'source', sources);
+      }
+
+      // Set video title
+      this.config.title = input.title;
+
+      // Set up from scratch
+      media.setup.call(this);
+
+      // HTML5 stuff
+      if (this.isHTML5) {
+        // Setup captions
+        if (Object.keys(input).includes('tracks')) {
+          source.insertElements.call(this, 'track', input.tracks);
+        }
+      }
+
+      // If HTML5 or embed but not fully supported, setupInterface and call ready now
+      if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
+        // Setup interface
+        ui.build.call(this);
+      }
+
+      // Load HTML5 sources
+      if (this.isHTML5) {
+        this.media.load();
+      }
+
+      // Update previewThumbnails config & reload plugin
+      if (!is.empty(input.previewThumbnails)) {
+        Object.assign(this.config.previewThumbnails, input.previewThumbnails);
+
+        // Cleanup previewThumbnails plugin if it was loaded
+        if (this.previewThumbnails && this.previewThumbnails.loaded) {
+          this.previewThumbnails.destroy();
+          this.previewThumbnails = null;
+        }
+
+        // Create new instance if it is still enabled
+        if (this.config.previewThumbnails.enabled) {
+          this.previewThumbnails = new PreviewThumbnails(this);
+        }
+      }
+
+      // Update the fullscreen support
+      this.fullscreen.update();
+    }, true);
+  },
+};
+
+export default source;

package/src/js/storage.js

@@ -0,0 +1,70 @@
+// ==========================================================================
+// Plyr storage
+// ==========================================================================
+
+import is from './utils/is';
+import { extend } from './utils/objects';
+
+class Storage {
+  constructor(player) {
+    this.enabled = player.config.storage.enabled;
+    this.key = player.config.storage.key;
+  }
+
+  // Check for actual support (see if we can use it)
+  static get supported() {
+    try {
+      if (!('localStorage' in window)) return false;
+      const test = '___test';
+      // Try to use it (it might be disabled, e.g. user is in private mode)
+      // see: https://github.com/xgauravyaduvanshii/redxplyr/issues/131
+      window.localStorage.setItem(test, test);
+      window.localStorage.removeItem(test);
+      return true;
+    }
+    catch {
+      return false;
+    }
+  }
+
+  get = (key) => {
+    if (!Storage.supported || !this.enabled) {
+      return null;
+    }
+    const store = window.localStorage.getItem(this.key);
+    if (is.empty(store)) return null;
+    const json = JSON.parse(store);
+    return is.string(key) && key.length ? json[key] : json;
+  };
+
+  set = (object) => {
+    // Bail if we don't have localStorage support or it's disabled
+    if (!Storage.supported || !this.enabled) {
+      return;
+    }
+
+    // Can only store objects
+    if (!is.object(object)) {
+      return;
+    }
+
+    // Get current storage
+    let storage = this.get();
+
+    // Default to empty object
+    if (is.empty(storage)) {
+      storage = {};
+    }
+
+    // Update the working copy of the values
+    extend(storage, object);
+
+    // Update storage
+    try {
+      window.localStorage.setItem(this.key, JSON.stringify(storage));
+    }
+    catch { }
+  };
+}
+
+export default Storage;

package/src/js/support.js

@@ -0,0 +1,100 @@
+// ==========================================================================
+// Plyr support checks
+// ==========================================================================
+
+import { transitionEndEvent } from './utils/animation';
+import { createElement } from './utils/elements';
+import is from './utils/is';
+
+// Default codecs for checking mimetype support
+const defaultCodecs = {
+  'audio/ogg': 'vorbis',
+  'audio/wav': '1',
+  'video/webm': 'vp8, vorbis',
+  'video/mp4': 'avc1.42E01E, mp4a.40.2',
+  'video/ogg': 'theora',
+};
+
+// Check for feature support
+const support = {
+  // Basic support
+  audio: 'canPlayType' in document.createElement('audio'),
+  video: 'canPlayType' in document.createElement('video'),
+
+  // Check for support
+  // Basic functionality vs full UI
+  check(type, provider) {
+    const api = support[type] || provider !== 'html5';
+    const ui = api && support.rangeInput;
+
+    return {
+      api,
+      ui,
+    };
+  },
+
+  // Picture-in-picture support
+  pip: (() => {
+    return (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture);
+  })(),
+
+  // Airplay support
+  // Safari only currently
+  airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),
+
+  // Inline playback support
+  // https://webkit.org/blog/6784/new-video-policies-for-ios/
+  playsinline: 'playsInline' in document.createElement('video'),
+
+  // Check for mime type support against a player instance
+  // Credits: http://diveintohtml5.info/everything.html
+  // Related: http://www.leanbackplayer.com/test/h5mt.html
+  mime(input) {
+    if (is.empty(input)) {
+      return false;
+    }
+
+    const [mediaType] = input.split('/');
+    let type = input;
+
+    // Verify we're using HTML5 and there's no media type mismatch
+    if (!this.isHTML5 || mediaType !== this.type) {
+      return false;
+    }
+
+    // Add codec if required
+    if (Object.keys(defaultCodecs).includes(type)) {
+      type += `; codecs="${defaultCodecs[input]}"`;
+    }
+
+    try {
+      return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
+    }
+    catch {
+      return false;
+    }
+  },
+
+  // Check for textTracks support
+  textTracks: 'textTracks' in document.createElement('video'),
+
+  // <input type="range"> Sliders
+  rangeInput: (() => {
+    const range = document.createElement('input');
+    range.type = 'range';
+    return range.type === 'range';
+  })(),
+
+  // Touch
+  // NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
+  touch: 'ontouchstart' in document.documentElement,
+
+  // Detect transitions support
+  transitions: transitionEndEvent !== false,
+
+  // Reduced motion iOS & MacOS setting
+  // https://webkit.org/blog/7551/responsive-design-for-motion/
+  reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,
+};
+
+export default support;

package/src/js/ui.js

@@ -0,0 +1,297 @@
+// ==========================================================================
+// Plyr UI
+// ==========================================================================
+
+import captions from './captions';
+import controls from './controls';
+import support from './support';
+import { getElement, toggleClass } from './utils/elements';
+import { ready, triggerEvent } from './utils/events';
+import i18n from './utils/i18n';
+import is from './utils/is';
+import loadImage from './utils/load-image';
+
+const ui = {
+  addStyleHook() {
+    toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);
+    toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);
+  },
+
+  // Toggle native HTML5 media controls
+  toggleNativeControls(toggle = false) {
+    if (toggle && this.isHTML5) {
+      this.media.setAttribute('controls', '');
+    }
+    else {
+      this.media.removeAttribute('controls');
+    }
+  },
+
+  // Setup the UI
+  build() {
+    // Re-attach media element listeners
+    // TODO: Use event bubbling?
+    this.listeners.media();
+
+    // Don't setup interface if no support
+    if (!this.supported.ui) {
+      this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
+
+      // Restore native controls
+      ui.toggleNativeControls.call(this, true);
+
+      // Bail
+      return;
+    }
+
+    // Inject custom controls if not present
+    if (!is.element(this.elements.controls)) {
+      // Inject custom controls
+      controls.inject.call(this);
+
+      // Re-attach control listeners
+      this.listeners.controls();
+    }
+
+    // Remove native controls
+    ui.toggleNativeControls.call(this);
+
+    // Setup captions for HTML5
+    if (this.isHTML5) {
+      captions.setup.call(this);
+    }
+
+    // Reset volume
+    this.volume = null;
+
+    // Reset mute state
+    this.muted = null;
+
+    // Reset loop state
+    this.loop = null;
+
+    // Reset quality setting
+    this.quality = null;
+
+    // Reset speed
+    this.speed = null;
+
+    // Reset volume display
+    controls.updateVolume.call(this);
+
+    // Reset time display
+    controls.timeUpdate.call(this);
+
+    // Reset duration display
+    controls.durationUpdate.call(this);
+
+    // Update the UI
+    ui.checkPlaying.call(this);
+
+    // Check for picture-in-picture support
+    toggleClass(
+      this.elements.container,
+      this.config.classNames.pip.supported,
+      support.pip && this.isHTML5 && this.isVideo,
+    );
+
+    // Check for airplay support
+    toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
+
+    // Add touch class
+    toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
+
+    // Ready for API calls
+    this.ready = true;
+
+    // Ready event at end of execution stack
+    setTimeout(() => {
+      triggerEvent.call(this, this.media, 'ready');
+    }, 0);
+
+    // Set the title
+    ui.setTitle.call(this);
+
+    // Assure the poster image is set, if the property was added before the element was created
+    if (this.poster) {
+      ui.setPoster.call(this, this.poster, false).catch(() => {});
+    }
+
+    // Manually set the duration if user has overridden it.
+    // The event listeners for it doesn't get called if preload is disabled (#701)
+    if (this.config.duration) {
+      controls.durationUpdate.call(this);
+    }
+
+    // Media metadata
+    if (this.config.mediaMetadata) {
+      controls.setMediaMetadata.call(this);
+    }
+  },
+
+  // Setup aria attribute for play and iframe title
+  setTitle() {
+    // Find the current text
+    let label = i18n.get('play', this.config);
+
+    // If there's a media title set, use that for the label
+    if (is.string(this.config.title) && !is.empty(this.config.title)) {
+      label += `, ${this.config.title}`;
+    }
+
+    // If there's a play button, set label
+    Array.from(this.elements.buttons.play || []).forEach((button) => {
+      button.setAttribute('aria-label', label);
+    });
+
+    // Set iframe title
+    // https://github.com/xgauravyaduvanshii/redxplyr/issues/124
+    if (this.isEmbed) {
+      const iframe = getElement.call(this, 'iframe');
+
+      if (!is.element(iframe)) {
+        return;
+      }
+
+      // Default to media type
+      const title = !is.empty(this.config.title) ? this.config.title : 'video';
+      const format = i18n.get('frameTitle', this.config);
+
+      iframe.setAttribute('title', format.replace('{title}', title));
+    }
+  },
+
+  // Toggle poster
+  togglePoster(enable) {
+    toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);
+  },
+
+  // Set the poster image (async)
+  // Used internally for the poster setter, with the passive option forced to false
+  setPoster(poster, passive = true) {
+    // Don't override if call is passive
+    if (passive && this.poster) {
+      return Promise.reject(new Error('Poster already set'));
+    }
+
+    // Set property synchronously to respect the call order
+    this.media.setAttribute('data-poster', poster);
+
+    // Show the poster
+    this.elements.poster.removeAttribute('hidden');
+
+    // Wait until ui is ready
+    return (
+      ready
+        .call(this)
+        // Load image
+        .then(() => loadImage(poster))
+        .catch((error) => {
+          // Hide poster on error unless it's been set by another call
+          if (poster === this.poster) {
+            ui.togglePoster.call(this, false);
+          }
+          // Rethrow
+          throw error;
+        })
+        .then(() => {
+          // Prevent race conditions
+          if (poster !== this.poster) {
+            throw new Error('setPoster cancelled by later call to setPoster');
+          }
+        })
+        .then(() => {
+          Object.assign(this.elements.poster.style, {
+            backgroundImage: `url('${poster}')`,
+            // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube)
+            backgroundSize: '',
+          });
+
+          ui.togglePoster.call(this, true);
+
+          return poster;
+        })
+    );
+  },
+
+  // Check playing state
+  checkPlaying(event) {
+    // Class hooks
+    toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
+    toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
+    toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
+
+    // Set state
+    Array.from(this.elements.buttons.play || []).forEach((target) => {
+      Object.assign(target, { pressed: this.playing });
+      target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));
+    });
+
+    // Only update controls on non timeupdate events
+    if (is.event(event) && event.type === 'timeupdate') {
+      return;
+    }
+
+    // Toggle controls
+    ui.toggleControls.call(this);
+  },
+
+  // Check if media is loading
+  checkLoading(event) {
+    this.loading = ['stalled', 'waiting'].includes(event.type);
+
+    // Clear timer
+    clearTimeout(this.timers.loading);
+
+    // Timer to prevent flicker when seeking
+    this.timers.loading = setTimeout(
+      () => {
+        // Update progress bar loading class state
+        toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
+
+        // Update controls visibility
+        ui.toggleControls.call(this);
+      },
+      this.loading ? 250 : 0,
+    );
+  },
+
+  // Toggle controls based on state and `force` argument
+  toggleControls(force) {
+    const { controls: controlsElement } = this.elements;
+
+    if (controlsElement && this.config.hideControls) {
+      // Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)
+      const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();
+
+      // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
+      this.toggleControls(
+        Boolean(
+          force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,
+        ),
+      );
+    }
+  },
+
+  // Migrate any custom properties from the media to the parent
+  migrateStyles() {
+    // Loop through values (as they are the keys when the object is spread 🤔)
+    Object.values({ ...this.media.style })
+      // We're only fussed about Plyr specific properties
+      .filter(key => !is.empty(key) && is.string(key) && key.startsWith('--plyr'))
+      .forEach((key) => {
+        // Set on the container
+        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
+
+        // Clean up from media element
+        this.media.style.removeProperty(key);
+      });
+
+    // Remove attribute if empty
+    if (is.empty(this.media.style)) {
+      this.media.removeAttribute('style');
+    }
+  },
+};
+
+export default ui;

package/src/js/utils/animation.js

@@ -0,0 +1,33 @@
+// ==========================================================================
+// Animation utils
+// ==========================================================================
+
+import is from './is';
+
+export const transitionEndEvent = (() => {
+  const element = document.createElement('span');
+
+  const events = {
+    WebkitTransition: 'webkitTransitionEnd',
+    MozTransition: 'transitionend',
+    OTransition: 'oTransitionEnd otransitionend',
+    transition: 'transitionend',
+  };
+
+  const type = Object.keys(events).find(event => element.style[event] !== undefined);
+
+  return is.string(type) ? events[type] : false;
+})();
+
+// Force repaint of element
+export function repaint(element, delay) {
+  setTimeout(() => {
+    try {
+      element.hidden = true;
+      // eslint-disable-next-line no-unused-expressions
+      element.offsetHeight;
+      element.hidden = false;
+    }
+    catch {}
+  }, delay);
+}

package/src/js/utils/arrays.js

@@ -0,0 +1,23 @@
+// ==========================================================================
+// Array utils
+// ==========================================================================
+
+import is from './is';
+
+// Remove duplicates in an array
+export function dedupe(array) {
+  if (!is.array(array)) {
+    return array;
+  }
+
+  return array.filter((item, index) => array.indexOf(item) === index);
+}
+
+// Get the closest value in an array
+export function closest(array, value) {
+  if (!is.array(array) || !array.length) {
+    return null;
+  }
+
+  return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
+}