videojs-sprite-thumbnails/dist/videojs-sprite-thumbnails.es.js

Plugin to display thumbnails from a sprite image when hovering over the progress bar.

/*! @name videojs-sprite-thumbnails @version 0.5.2 @license MIT */
import videojs from 'video.js';

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

/**
 * Set up sprite thumbnails for a player.
 *
 * @function spriteThumbs
 * @param {Player} player
 *        The current player instance.
 * @param {Object} options
 *        Configuration options.
 */

function spriteThumbs(player, options) {
  var url = options.url;
  var height = options.height;
  var width = options.width;
  var responsive = options.responsive;
  var dom = videojs.dom || videojs;
  var controls = player.controlBar;
  var progress = controls.progressControl;
  var seekBar = progress.seekBar;
  var mouseTimeDisplay = seekBar.mouseTimeDisplay;

  if (url && height && width && mouseTimeDisplay) {
    var img = dom.createEl('img', {
      src: url
    });

    var tooltipStyle = function tooltipStyle(obj) {
      Object.keys(obj).forEach(function (key) {
        var val = obj[key];
        var ttstyle = mouseTimeDisplay.timeTooltip.el_.style;

        if (val !== '') {
          ttstyle.setProperty(key, val);
        } else {
          ttstyle.removeProperty(key);
        }
      });
    };

    var hijackMouseTooltip = function hijackMouseTooltip() {
      var imgWidth = img.naturalWidth;
      var imgHeight = img.naturalHeight;

      if (imgWidth && imgHeight) {
        var seekBarEl = seekBar.el_;
        var hoverPosition = parseFloat(mouseTimeDisplay.el_.style.left);
        hoverPosition = player.duration() * (hoverPosition / seekBarEl.clientWidth);

        if (!isNaN(hoverPosition)) {
          hoverPosition = hoverPosition / options.interval;
          var playerWidth = player.el_.clientWidth;
          var scaleFactor = responsive && playerWidth < responsive ? playerWidth / responsive : 1;
          var columns = imgWidth / width;
          var scaledWidth = width * scaleFactor;
          var scaledHeight = height * scaleFactor;
          var cleft = Math.floor(hoverPosition % columns) * -scaledWidth;
          var ctop = Math.floor(hoverPosition / columns) * -scaledHeight;
          var bgSize = imgWidth * scaleFactor + 'px ' + imgHeight * scaleFactor + 'px';
          var controlsTop = dom.getBoundingClientRect(controls.el_).top;
          var seekBarTop = dom.getBoundingClientRect(seekBarEl).top; // top of seekBar is 0 position

          var topOffset = -scaledHeight - Math.max(0, seekBarTop - controlsTop);
          tooltipStyle({
            'width': scaledWidth + 'px',
            'height': scaledHeight + 'px',
            'background-image': 'url(' + url + ')',
            'background-repeat': 'no-repeat',
            'background-position': cleft + 'px ' + ctop + 'px',
            'background-size': bgSize,
            'top': topOffset + 'px',
            'color': '#fff',
            'text-shadow': '1px 1px #000',
            'border': '1px solid #000',
            'margin': '0 1px'
          });
        }
      }
    };

    tooltipStyle({
      'width': '',
      'height': '',
      'background-image': '',
      'background-repeat': '',
      'background-position': '',
      'background-size': '',
      'top': '',
      'color': '',
      'text-shadow': '',
      'border': '',
      'margin': ''
    });
    progress.on('mousemove', hijackMouseTooltip);
    progress.on('touchmove', hijackMouseTooltip);
    player.addClass('vjs-sprite-thumbnails');
  }
}

var version = "0.5.2";

var Plugin = videojs.getPlugin('plugin');
/**
 * Default plugin options
 *
 * @param {String} url
 *        Sprite location. Must be set by user.
 * @param {Integer} width
 *        Width in pixels of a thumbnail. Must be set by user.
 * @param {Integer} height
 *        Height in pixels of a thumbnail. Must be set by user.
 * @param {Number} interval
 *        Interval between thumbnail frames in seconds. Default: 1.
 * @param {Integer} responsive
 *        Width of player below which thumbnails are reponsive. Default: 600.
 */

var defaults = {
  url: '',
  width: 0,
  height: 0,
  interval: 1,
  responsive: 600
};
/**
 * An advanced Video.js plugin. For more information on the API
 *
 * See: https://blog.videojs.com/feature-spotlight-advanced-plugins/
 */

var SpriteThumbnails =
/*#__PURE__*/
function (_Plugin) {
  _inheritsLoose(SpriteThumbnails, _Plugin);

  /**
   * Create a SpriteThumbnails plugin instance.
   *
   * @param  {Player} player
   *         A Video.js Player instance.
   *
   * @param  {Object} [options]
   *         An optional options object.
   */
  function SpriteThumbnails(player, options) {
    var _this;

    // the parent class will add player under this.player
    _this = _Plugin.call(this, player) || this;
    _this.options = videojs.mergeOptions(defaults, options);

    _this.player.ready(function () {
      spriteThumbs(_this.player, _this.options);
    });

    return _this;
  }

  return SpriteThumbnails;
}(Plugin); // Define default values for the plugin's `state` object here.


SpriteThumbnails.defaultState = {}; // Include the version number.

SpriteThumbnails.VERSION = version; // Register the plugin with video.js.

videojs.registerPlugin('spriteThumbnails', SpriteThumbnails);

export default SpriteThumbnails;