cloudinary-video-player 1.6.2-edge.13

package/src/plugins/colors/index.js

@@ -0,0 +1,303 @@
+import { assign } from 'utils/assign';
+import { playerClassPrefix } from 'utils/css-prefix';
+import { isLight } from '../../video-player.utils';
+
+const playerColors = `
+  .PLAYER-CLASS-PREFIX {
+    --color-accent: --accent-color;
+    --color-base: --base-color;
+    --color-text: --text-color;
+
+    color: --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-time-tooltip,
+  .PLAYER-CLASS-PREFIX .vjs-mouse-display:after,
+  .PLAYER-CLASS-PREFIX .vjs-play-progress:after {
+    color: --base-color;
+    background-color: --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-slider {
+    background-color: rgba(--accent-color, 0.3);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-load-progress,
+  .PLAYER-CLASS-PREFIX .vjs-load-progress div {
+    background: rgba(--accent-color, 0.2);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-volume-level,
+  .PLAYER-CLASS-PREFIX .vjs-play-progress {
+    background: --accent-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-volume-vertical {
+    background-color: rgba(--base-color, 0.7);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-volume-panel-horizontal .vjs-control:before {
+    border-color: transparent transparent rgba(--accent-color, 0.4) transparent;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-volume-panel-horizontal .vjs-volume-level:before {
+    border-color: transparent transparent --accent-color transparent;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-title-bar {
+    color: --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay {
+    color: --text-color;
+    background-color: rgba(--base-color, 0.4);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item {
+    box-shadow: 0 0.5em 1.2em 0px --base-color;
+    color: --text-color;
+    border: 1px solid --text-color !important;
+    position: relative;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item:active,
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item:hover {
+    border: 1px solid --accent-color !important;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-context-menu-ui .vjs-menu-content .vjs-menu-item:active,
+  .PLAYER-CLASS-PREFIX .vjs-context-menu-ui .vjs-menu-content .vjs-menu-item:hover {
+    color: --text-color;
+    background-color: --accent-color;
+  }
+
+  .PLAYER-CLASS-PREFIX.vjs-ad-playing .vjs-progress-control .vjs-play-progress {
+    background: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX.cld-plw-layout {
+    background-color: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .cld-plw-item-info-wrap {
+    color: --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .cld-plw-panel-item {
+    border-color: --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .cld-video-player-floater-close polygon {
+    fill: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .cld-spbl-product-hotspot:after {
+    background: --base-color;
+    box-shadow: 0 0 0 4px --accent-color, 0 0 0 8px rgba(--text-color, 0.24);
+  }
+
+  .PLAYER-CLASS-PREFIX .cld-spbl-product-tooltip {
+    color: --base-color;
+    background: --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .base-color-semi-bg {
+    background: rgba(--base-color, 0.7);
+  }
+
+  .PLAYER-CLASS-PREFIX .text-color-semi-bg {
+    background: rgba(--text-color, 0.7);
+  }
+
+  .PLAYER-CLASS-PREFIX .text-color-text {
+    color: --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .base-color-text {
+    color: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .accent-color-text {
+    color: --accent-color;
+  }
+`;
+
+const darkOnlyColors = `
+
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .base-color-bg,
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .vjs-control-bar,
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .vjs-big-play-button,
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-dark .vjs-menu-button
+  .vjs-menu-content {
+    background-color: rgba(--base-color, 0.6);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-title-bar {
+    background-image: linear-gradient(--base-color, rgba(255, 255, 255, 0) 100%);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content {
+    background-color: rgba(--base-color, 0.6);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-secondary div {
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 80%);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-upcoming-video {
+    border: 1px solid rgba(--text-color, 0.5);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-upcoming-video .vjs-upcoming-video-bar {
+    background-color: rgba(--base-color, 0.6);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-context-menu-ui .vjs-menu-content {
+    background-color: rgba(--base-color, 0.6);
+  }
+`;
+
+const lightOnlyColors = `
+  .PLAYER-CLASS-PREFIX .vjs-title-bar {
+    flex-direction: row;
+    justify-content: left;
+    height: 3.6em;
+    background: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-title-bar div {
+    width: auto;
+    padding: 0 inherit;
+    margin: 0;
+  }
+
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .base-color-bg,
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .vjs-control-bar,
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .vjs-big-play-button,
+  .PLAYER-CLASS-PREFIX.cld-video-player-skin-light .vjs-menu-button .vjs-menu-content {
+    background-color: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary .vjs-recommendations-overlay-item-primary-content {
+    background-color: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary:active .vjs-recommendations-overlay-item-primary-content,
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-primary:hover .vjs-recommendations-overlay-item-primary-content {
+    color: --base-color;
+    background-color: rgba(--accent-color, 0.8);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-secondary:active div,
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-secondary:hover div {
+    color: --base-color;
+    background-color: rgba(--accent-color, 0.8);
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay .vjs-recommendations-overlay-item.vjs-recommendations-overlay-item-secondary div {
+    background: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-upcoming-video {
+    border: 1px solid --text-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-upcoming-video .vjs-upcoming-video-bar {
+    background-color: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .vjs-context-menu-ui .vjs-menu-content {
+    background-color: --base-color;
+  }
+
+  .PLAYER-CLASS-PREFIX .cld-plw-item-info-wrap {
+    color: --text-color;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .PLAYER-CLASS-PREFIX.cld-plw-vertical .cld-plw-item-info-wrap {
+      color: --accent-color;
+    }
+  }
+`;
+
+const defaults = {
+  colorsDark: {
+    'base': '#000000',
+    'accent': '#FF620C',
+    'text': '#FFFFFF'
+  },
+  colorsLight: {
+    'base': '#FFFFFF',
+    'accent': '#0078FF',
+    'text': '#0E2F5A'
+  }
+};
+
+export const getDefaultPlayerColor = (options) => {
+  return isLight(options) ? defaults.colorsLight : defaults.colorsDark;
+};
+
+class Colors {
+  constructor(player, opts = {}) {
+    this.player = player;
+
+    const skinDefaults = getDefaultPlayerColor(this.player.options_);
+
+    opts.colors = assign({}, skinDefaults, opts.colors);
+
+    this.init = () => {
+      injectCSS(parseStyles(playerColors));
+
+      if (this.player.options_.skin === 'light') {
+        injectCSS(parseStyles(lightOnlyColors));
+      } else {
+        injectCSS(parseStyles(darkOnlyColors));
+      }
+    };
+
+    const injectCSS = (css) => {
+      const style = document.createElement('style');
+      style.innerHTML = css;
+      this.player.el_.appendChild(style);
+    };
+
+    const hexToRgb = (hex) => {
+
+      // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+      const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+      hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+        return r + r + g + g + b + b;
+      });
+
+      // '#0080C0' to '0, 128, 192'
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+      return result
+        ? parseInt(result[1], 16) + ', ' +
+          parseInt(result[2], 16) + ', ' +
+          parseInt(result[3], 16)
+        : null;
+    };
+
+    const parseStyles = (styles) => {
+      const parsed = styles
+        // wrapper class
+        .replace(/PLAYER\-CLASS\-PREFIX/g, playerClassPrefix(this.player))
+        // rgba first
+        .replace(/rgba\(\-\-base\-color/g, 'rgba(' + hexToRgb(opts.colors.base))
+        .replace(/rgba\(\-\-accent\-color/g, 'rgba(' + hexToRgb(opts.colors.accent))
+        .replace(/rgba\(\-\-text\-color/g, 'rgba(' + hexToRgb(opts.colors.text))
+        // solid colors
+        .replace(/\-\-base\-color/g, opts.colors.base)
+        .replace(/\-\-accent\-color/g, opts.colors.accent)
+        .replace(/\-\-text\-color/g, opts.colors.text);
+      return parsed;
+    };
+
+  }
+}
+
+export default function(opts = {}) {
+  new Colors(this, opts).init();
+}

package/src/plugins/context-menu/components/context-menu-item.js

@@ -0,0 +1,12 @@
+import videojs from 'video.js';
+
+const MenuItem = videojs.getComponent('MenuItem');
+
+class ContextMenuItem extends MenuItem {
+  handleClick() {
+    super.handleClick();
+    this.options_.listener();
+  }
+}
+
+export default ContextMenuItem;

package/src/plugins/context-menu/components/context-menu.js

@@ -0,0 +1,63 @@
+import videojs from 'video.js';
+import ContextMenuItem from './context-menu-item';
+import { setPosition } from '../../../utils/positioning';
+import { isFunction } from '../../../utils/type-inference';
+
+const Menu = videojs.getComponent('Menu');
+
+// support VJS5 & VJS6 at the same time
+const dom = videojs.dom || videojs;
+
+class ContextMenu extends Menu {
+
+  constructor(player, options) {
+    super(player, options);
+
+    // Each menu component has its own `dispose` method that can be
+    // safely bound and unbound to events while maintaining its context.
+    this.dispose = videojs.bind(this, this.dispose);
+
+    options.content.forEach(c => {
+      let fn = null;
+
+      if (isFunction(c.listener)) {
+        fn = c.listener;
+      } else if (typeof c.href === 'string') {
+        fn = () => window.open(c.href);
+      } else {
+        fn = () => true;
+      }
+
+      const that = this;
+
+      this.addItem(new ContextMenuItem(player, {
+        label: c.label,
+        listener: videojs.bind(player, function() {
+          fn(this);
+          window.setTimeout(() => {
+            that.dispose();
+          }, 1);
+        })
+      }));
+    });
+  }
+
+  setPosition(left, top) {
+    setPosition(this.el(), left, top);
+  }
+
+  createEl() {
+    const el = super.createEl();
+
+    dom.addClass(el, 'vjs-context-menu-ui');
+
+    if (this.options_.position) {
+      const { left, top } = this.options_.position;
+      this.setPosition(left, top);
+    }
+
+    return el;
+  }
+}
+
+export default ContextMenu;

package/src/plugins/context-menu/context-menu.scss

@@ -0,0 +1,30 @@
+.vjs-context-menu-ui {
+  position: absolute;
+  z-index: 2;
+
+  .vjs-menu-content {
+    background: rgba(0,0,0,.6);
+    border-radius: 0.2em;
+    padding: 0;
+  }
+
+  .vjs-menu-item {
+    // Override video.js styles for menus
+    font-size: 1em;
+    line-height: 1em;
+    text-transform: none;
+
+    cursor: pointer;
+    margin: 0;
+    padding: 0.8em 1.4em;
+
+    &:active, &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  .player-version {
+    font-size: 80%;
+    opacity: .7;
+  }
+}

package/src/plugins/context-menu/contextMenuContent.js

@@ -0,0 +1,53 @@
+const contextMenuContent = (player) => {
+
+  const isLooping = player.loop();
+  const isPaused = player.paused();
+  const isMuted = player.muted();
+  const isFullscreen = player.isFullscreen();
+
+  const aboutMenuItem = {
+    label: '<span class="player-version">Cloudinary Player v' + VERSION + '</span>'
+  };
+
+  if (!player.controls()) {
+    return [aboutMenuItem];
+  }
+
+  return [
+    {
+      label: isLooping ? 'Unloop' : 'Loop',
+      listener: () => {
+        player.loop(!isLooping);
+      }
+    },
+    {
+      label: isPaused ? 'Play' : 'Pause',
+      listener: () => {
+        if (isPaused) {
+          player.play();
+        } else {
+          player.pause();
+        }
+      }
+    },
+    {
+      label: isMuted ? 'Unmute' : 'Mute',
+      listener: () => {
+        player.muted(!isMuted);
+      }
+    },
+    {
+      label: isFullscreen ? 'Exit Fullscreen' : 'Fullscreen',
+      listener: () => {
+        if (isFullscreen) {
+          player.exitFullscreen();
+        } else {
+          player.requestFullscreen();
+        }
+      }
+    },
+    aboutMenuItem
+  ];
+};
+
+export default contextMenuContent;

package/src/plugins/context-menu/index.js

@@ -0,0 +1,134 @@
+import videojs from 'video.js';
+import './context-menu.scss';
+import 'videojs-contextmenu';
+import ContextMenu from './components/context-menu';
+import { getPointerPosition } from 'utils/positioning';
+import { sliceProperties } from 'utils/slicing';
+import { assign } from 'utils/assign';
+import { isFunction } from '../../utils/type-inference';
+
+const defaults = {
+  showNativeOnRecurringEvent: false
+};
+
+class ContextMenuPlugin {
+
+  constructor(player, initOpts) {
+    if (!Array.isArray(initOpts.content) && !isFunction(initOpts.content)) {
+      throw new Error('"content" required');
+    }
+
+    const opts = assign({}, defaults, initOpts);
+
+    this.player = player;
+    const _options = sliceProperties(opts, 'content', 'showNativeOnRecurringEvent');
+
+    this.init = () => {
+      // If we are not already providing "vjs-contextmenu" events, do so.
+      this.player.contextmenu();
+      this.player.on('vjs-contextmenu', onContextMenu);
+      this.player.ready(() => this.player.addClass('vjs-context-menu'));
+    };
+
+    const getMenuPosition = (e) => {
+    // Calc menu size
+      const menuEl = this.menu.el();
+
+      // Must append to element to get bounding rect
+      menuEl.style.visibility = 'hidden';
+      this.player.el().appendChild(menuEl);
+      const menuSize = menuEl.getBoundingClientRect();
+      this.player.el().removeChild(menuEl);
+      menuEl.style.visibility = 'visible';
+
+      const ptrPosition = getPointerPosition(this.player.el(), e);
+      const playerSize = this.player.el().getBoundingClientRect();
+
+      let ptrTop = playerSize.height - (playerSize.height * ptrPosition.y) + 1;
+      let ptrLeft = Math.round(playerSize.width * ptrPosition.x) + 1;
+
+      let top = ptrTop;
+      let left = ptrLeft;
+
+      // Correct top when menu can't fit fully height-wise when pointer is at it's top left corner
+      if (ptrTop + menuSize.height > playerSize.height) {
+        let difference = ptrTop + menuSize.height - playerSize.height;
+        top = difference > menuSize.height / 2 ? ptrTop - menuSize.height - 1 : playerSize.height - menuSize.height;
+      }
+
+      // Correct left where menu can't fit fully width-wise when pointer is at it's top left corner
+      if (ptrLeft + menuSize.width > playerSize.width) {
+        let difference = ptrLeft + menuSize.width - playerSize.width;
+        left = difference > menuSize.width / 2 ? ptrLeft - menuSize.width - 1 : playerSize.width - menuSize.width;
+      }
+
+      // Correct top and left in cases that menu is positioned on the pointer
+      if (top < ptrTop && left < ptrLeft) {
+        top = ptrTop - menuSize.height - 1;
+        left = ptrLeft - menuSize.width - 1;
+      }
+
+      // Make sure that we're still in bounds after the corrections.
+      top = Math.max(0, top);
+      left = Math.max(0, left);
+
+      return { left, top };
+    };
+
+    const onContextMenu = (e) => {
+      if (this.menu) {
+        this.menu.dispose();
+        if (_options.showNativeOnRecurringEvent) {
+        // If this event happens while the custom menu is open, close it and do
+        // nothing else. This will cause native contextmenu events to be intercepted
+        // once again; so, the next time a contextmenu event is encountered, we'll
+        // open the custom menu.
+          return;
+        }
+      }
+
+      // Stop canceling the native contextmenu event until further notice.
+      if (_options.showNativeOnRecurringEvent) {
+        this.player.contextmenu.options.cancel = false;
+      }
+
+      e.preventDefault();
+
+      // Allow dynamically setting the menu labels based on player
+      let content = _options.content;
+
+      if (isFunction(content)) {
+        content = content(this.player);
+      }
+
+      this.menu = new ContextMenu(this.player, { content });
+
+      const { left, top } = getMenuPosition(e);
+      this.menu.setPosition(left, top);
+
+      // This is to handle a bug where firefox triggers both 'contextmenu' and 'click'
+      // events on rightclick, causing menu to open and then immediately close.
+      const clickHandler = (_e) => {
+        if (!(_e.type === 'click' && (_e.which === 3 || _e.button === 2))) {
+          this.menu.dispose();
+        }
+      };
+
+      this.menu.on('dispose', () => {
+      // Begin canceling contextmenu events again, so subsequent events will
+      // cause the custom menu to be displayed again.
+        this.player.contextmenu.options.cancel = true;
+        this.player.removeChild(this.menu);
+        videojs.off(document, ['click', 'tap'], clickHandler);
+        delete this.menu;
+      });
+
+      this.player.addChild(this.menu);
+      videojs.on(document, ['click', 'tap'], clickHandler);
+    };
+  }
+}
+
+export default function(opts = {}) {
+  new ContextMenuPlugin(this, opts).init();
+}

package/src/plugins/dash/index.js

@@ -0,0 +1,26 @@
+import videojs from 'video.js';
+import djs from 'dashjs';
+// eslint-disable-next-line no-unused-vars
+import Html5DashJS from 'plugins/dash/videojs-dash';
+
+export default function dashPlugin() {
+
+  const dashInit = (player, mediaPlayer) => {
+    // eslint-disable-next-line new-cap
+    mediaPlayer = djs.MediaPlayer().create();
+    let settings = {
+      streaming: {
+        liveDelayFragmentCount: null
+      }
+    };
+    mediaPlayer.updateSettings(settings);
+    mediaPlayer.on(djs.MediaPlayer.events.PLAYBACK_STALLED, (a) => {
+      console.log(a);
+      console.log('stalled');
+    });
+  };
+
+  // Triggered on 'beforeinitialize'
+  videojs.Html5DashJS.hook('beforeinitialize', dashInit);
+
+}