Vimeo.js

'use strict';

exports.__esModule = true;

var _video = require('video.js');

var _video2 = _interopRequireDefault(_video);

var _player = require('@vimeo/player');

var _player2 = _interopRequireDefault(_player);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Component = _video2.default.getComponent('Component');
var Tech = _video2.default.getTech('Tech');
var cssInjected = false;

// Since the iframe can't be touched using Vimeo's way of embedding,
// let's add a new styling rule to have the same style as `vjs-tech`
function injectCss() {
  if (cssInjected) {
    return;
  }
  cssInjected = true;
  var css = '\n    .vjs-vimeo iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  ';
  var head = document.head || document.getElementsByTagName('head')[0];

  var style = document.createElement('style');

  style.type = 'text/css';

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);
}

/**
 * Vimeo - Wrapper for Video Player API
 *
 * @param {Object=} options Object of option names and values
 * @param {Function=} ready Ready callback function
 * @extends Tech
 * @class Vimeo
 */

var Vimeo = function (_Tech) {
  _inherits(Vimeo, _Tech);

  function Vimeo(options, ready) {
    _classCallCheck(this, Vimeo);

    var _this = _possibleConstructorReturn(this, _Tech.call(this, options, ready));

    injectCss();
    _this.setPoster(options.poster);
    _this.initVimeoPlayer();
    return _this;
  }

  Vimeo.prototype.initVimeoPlayer = function initVimeoPlayer() {
    var _this2 = this;

    var vimeoOptions = {
      url: this.options_.source.src,
      byline: false,
      portrait: false,
      title: false
    };

    if (this.options_.autoplay) {
      vimeoOptions.autoplay = true;
    }
    if (this.options_.height) {
      vimeoOptions.height = this.options_.height;
    }
    if (this.options_.width) {
      vimeoOptions.width = this.options_.width;
    }
    if (this.options_.maxheight) {
      vimeoOptions.maxheight = this.options_.maxheight;
    }
    if (this.options_.maxwidth) {
      vimeoOptions.maxwidth = this.options_.maxwidth;
    }
    if (this.options_.loop) {
      vimeoOptions.loop = this.options_.loop;
    }
    if (this.options_.color) {
      // vimeo is the only API on earth to reject hex color with leading #
      vimeoOptions.color = this.options_.color.replace(/^#/, '');
    }

    this._player = new _player2.default(this.el(), vimeoOptions);
    this.initVimeoState();

    this._player.on('loaded', function () {
      _this2.trigger('loadedmetadata');
    });

    ['play', 'pause', 'ended', 'timeupdate', 'progress', 'seeked'].forEach(function (e) {
      _this2._player.on(e, function (progress) {
        if (_this2._vimeoState.progress.duration !== progress.duration) {
          _this2.trigger('durationchange');
        }
        if (e === 'progress') {
          _this2._vimeoState.progress.buffered = progress.seconds;
          _this2._vimeoState.progress.duration = progress.duration;
        } else {
          _this2._vimeoState.progress.seconds = progress.seconds;
          _this2._vimeoState.progress.percent = progress.percent;
          _this2._vimeoState.progress.duration = progress.duration;
          if (progress.seconds > _this2._vimeoState.progress.buffered) {
            _this2._vimeoState.progress.buffered = progress.seconds;
          }
        }
        _this2.trigger(e);
      });
    });

    this._player.on('pause', function () {
      return _this2._vimeoState.playing = false;
    });
    this._player.on('play', function () {
      _this2._vimeoState.playing = true;
      _this2._vimeoState.ended = false;
    });
    this._player.on('ended', function () {
      _this2._vimeoState.playing = false;
      _this2._vimeoState.ended = true;
    });
    this._player.on('volumechange', function (v) {
      return _this2._vimeoState.volume = v;
    });
    this._player.on('error', function (e) {
      return _this2.trigger('error', e);
    });

    this.triggerReady();
  };

  Vimeo.prototype.initVimeoState = function initVimeoState() {
    var state = this._vimeoState = {
      ended: false,
      playing: false,
      volume: 0,
      progress: {
        seconds: 0,
        percent: 0,
        duration: 0,
        buffered: 0
      }
    };

    this._player.getCurrentTime().then(function (time) {
      return state.progress.seconds = time;
    });
    this._player.getDuration().then(function (time) {
      return state.progress.duration = time;
    });
    this._player.getPaused().then(function (paused) {
      return state.playing = !paused;
    });
    this._player.getVolume().then(function (volume) {
      return state.volume = volume;
    });
  };

  Vimeo.prototype.createEl = function createEl() {
    var div = _video2.default.createEl('div', {
      id: this.options_.techId
    });

    div.style.cssText = 'width:100%;height:100%;top:0;left:0;position:absolute';
    div.className = 'vjs-vimeo';

    return div;
  };

  Vimeo.prototype.controls = function controls() {
    return true;
  };

  Vimeo.prototype.supportsFullScreen = function supportsFullScreen() {
    return true;
  };

  Vimeo.prototype.src = function src() {
    // @note: Not sure why this is needed but videojs requires it
    return this.options_.source;
  };

  Vimeo.prototype.currentSrc = function currentSrc() {
    return this.options_.source.src;
  };

  // @note setSrc is used in other usecases (YouTube, Html) it doesn't seem required here
  // setSrc() {}

  Vimeo.prototype.currentTime = function currentTime() {
    return this._vimeoState.progress.seconds;
  };

  Vimeo.prototype.setCurrentTime = function setCurrentTime(time) {
    this._player.setCurrentTime(time);
  };

  Vimeo.prototype.volume = function volume() {
    return this._vimeoState.volume;
  };

  Vimeo.prototype.setVolume = function setVolume(volume) {
    return this._player.setVolume(volume);
  };

  Vimeo.prototype.duration = function duration() {
    return this._vimeoState.progress.duration;
  };

  Vimeo.prototype.buffered = function buffered() {
    var progress = this._vimeoState.progress;
    return _video2.default.createTimeRange(0, progress.buffered);
  };

  Vimeo.prototype.paused = function paused() {
    return !this._vimeoState.playing;
  };

  Vimeo.prototype.pause = function pause() {
    this._player.pause();
  };

  Vimeo.prototype.play = function play() {
    this._player.play();
  };

  Vimeo.prototype.muted = function muted() {
    return this._vimeoState.volume === 0;
  };

  Vimeo.prototype.ended = function ended() {
    return this._vimeoState.ended;
  };

  // Vimeo does has a mute API and native controls aren't being used,
  // so setMuted doesn't really make sense and shouldn't be called.
  // setMuted(mute) {}


  return Vimeo;
}(Tech);

Vimeo.prototype.featuresTimeupdateEvents = true;

Vimeo.isSupported = function () {
  return true;
};

// Add Source Handler pattern functions to this tech
Tech.withSourceHandlers(Vimeo);

Vimeo.nativeSourceHandler = {};

/**
 * Check if Vimeo can play the given videotype
 * @param  {String} type    The mimetype to check
 * @return {String}         'maybe', or '' (empty string)
 */
Vimeo.nativeSourceHandler.canPlayType = function (source) {
  if (source === 'video/vimeo') {
    return 'maybe';
  }

  return '';
};

/*
 * Check Vimeo can handle the source natively
 *
 * @param  {Object} source  The source object
 * @return {String}         'maybe', or '' (empty string)
 * @note: Copied over from YouTube — not sure this is relevant
 */
Vimeo.nativeSourceHandler.canHandleSource = function (source) {
  if (source.type) {
    return Vimeo.nativeSourceHandler.canPlayType(source.type);
  } else if (source.src) {
    return Vimeo.nativeSourceHandler.canPlayType(source.src);
  }

  return '';
};

// @note: Copied over from YouTube — not sure this is relevant
Vimeo.nativeSourceHandler.handleSource = function (source, tech) {
  tech.src(source.src);
};

// @note: Copied over from YouTube — not sure this is relevant
Vimeo.nativeSourceHandler.dispose = function () {};

Vimeo.registerSourceHandler(Vimeo.nativeSourceHandler);

if (typeof Tech.registerTech !== 'undefined') {
  Tech.registerTech('Vimeo', Vimeo);
} else {
  Component.registerComponent('Vimeo', Vimeo);
}

// Include the version number.
Vimeo.VERSION = '0.0.1';

exports.default = Vimeo;