react-player/lib/ReactPlayer.js

A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo and Wistia

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _props2 = require('./props');

var _utils = require('./utils');

var _YouTube = require('./players/YouTube');

var _YouTube2 = _interopRequireDefault(_YouTube);

var _SoundCloud = require('./players/SoundCloud');

var _SoundCloud2 = _interopRequireDefault(_SoundCloud);

var _Vimeo = require('./players/Vimeo');

var _Vimeo2 = _interopRequireDefault(_Vimeo);

var _Facebook = require('./players/Facebook');

var _Facebook2 = _interopRequireDefault(_Facebook);

var _FilePlayer = require('./players/FilePlayer');

var _FilePlayer2 = _interopRequireDefault(_FilePlayer);

var _Streamable = require('./players/Streamable');

var _Streamable2 = _interopRequireDefault(_Streamable);

var _Vidme = require('./players/Vidme');

var _Vidme2 = _interopRequireDefault(_Vidme);

var _Wistia = require('./players/Wistia');

var _Wistia2 = _interopRequireDefault(_Wistia);

var _DailyMotion = require('./players/DailyMotion');

var _DailyMotion2 = _interopRequireDefault(_DailyMotion);

var _Twitch = require('./players/Twitch');

var _Twitch2 = _interopRequireDefault(_Twitch);

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 SUPPORTED_PROPS = Object.keys(_props2.propTypes);
var SUPPORTED_PLAYERS = [_YouTube2['default'], _SoundCloud2['default'], _Vimeo2['default'], _Facebook2['default'], _Streamable2['default'], _Vidme2['default'], _Wistia2['default'], _Twitch2['default'], _DailyMotion2['default']];

var ReactPlayer = function (_Component) {
  _inherits(ReactPlayer, _Component);

  function ReactPlayer() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, ReactPlayer);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ReactPlayer.__proto__ || Object.getPrototypeOf(ReactPlayer)).call.apply(_ref, [this].concat(args))), _this), _this.config = (0, _utils.getConfig)(_this.props, _props2.defaultProps, true), _this.seekTo = function (fraction) {
      if (!_this.player) return null;
      _this.player.seekTo(fraction);
    }, _this.getDuration = function () {
      if (!_this.player) return null;
      return _this.player.getDuration();
    }, _this.getCurrentTime = function () {
      if (!_this.player) return null;
      var duration = _this.player.getDuration();
      var fractionPlayed = _this.player.getFractionPlayed();
      if (duration === null || fractionPlayed === null) {
        return null;
      }
      return fractionPlayed * duration;
    }, _this.getInternalPlayer = function () {
      return _this.player.player;
    }, _this.progress = function () {
      if (_this.props.url && _this.player) {
        var loaded = _this.player.getFractionLoaded() || 0;
        var played = _this.player.getFractionPlayed() || 0;
        var duration = _this.player.getDuration();
        var progress = {};
        if (loaded !== _this.prevLoaded) {
          progress.loaded = loaded;
          if (duration) {
            progress.loadedSeconds = progress.loaded * duration;
          }
        }
        if (played !== _this.prevPlayed) {
          progress.played = played;
          if (duration) {
            progress.playedSeconds = progress.played * duration;
          }
        }
        if (progress.loaded || progress.played) {
          _this.props.onProgress(progress);
        }
        _this.prevLoaded = loaded;
        _this.prevPlayed = played;
      }
      _this.progressTimeout = setTimeout(_this.progress, _this.props.progressFrequency);
    }, _this.renderPlayer = function (Player) {
      return _react2['default'].createElement(Player, _extends({}, _this.props, {
        ref: _this.ref,
        key: Player.displayName,
        config: _this.config
      }));
    }, _this.ref = function (player) {
      _this.player = player;
    }, _this.renderPreloadPlayer = function (Player) {
      return _react2['default'].createElement(Player, {
        key: Player.displayName,
        config: _this.config
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(ReactPlayer, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.progress();
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      clearTimeout(this.progressTimeout);
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps) {
      return this.props.url !== nextProps.url || this.props.playing !== nextProps.playing || this.props.volume !== nextProps.volume || this.props.muted !== nextProps.muted || this.props.playbackRate !== nextProps.playbackRate || this.props.height !== nextProps.height || this.props.width !== nextProps.width || this.props.hidden !== nextProps.hidden;
    }
  }, {
    key: 'renderActivePlayer',
    value: function renderActivePlayer(url) {
      if (!url) return null;
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = SUPPORTED_PLAYERS[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var Player = _step.value;

          if (Player.canPlay(url)) {
            return this.renderPlayer(Player);
          }
        }
        // Fall back to FilePlayer if nothing else can play the URL
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator['return']) {
            _iterator['return']();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      return this.renderPlayer(_FilePlayer2['default']);
    }
  }, {
    key: 'renderPreloadPlayers',
    value: function renderPreloadPlayers(url) {
      if (!url) return null;
      // Render additional players if preload config is set
      var preloadPlayers = [];
      if (!_YouTube2['default'].canPlay(url) && this.config.youtube.preload) {
        preloadPlayers.push(_YouTube2['default']);
      }
      if (!_Vimeo2['default'].canPlay(url) && this.config.vimeo.preload) {
        preloadPlayers.push(_Vimeo2['default']);
      }
      if (!_DailyMotion2['default'].canPlay(url) && this.config.dailymotion.preload) {
        preloadPlayers.push(_DailyMotion2['default']);
      }
      return preloadPlayers.map(this.renderPreloadPlayer);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          url = _props.url,
          style = _props.style,
          width = _props.width,
          height = _props.height;

      var otherProps = (0, _utils.omit)(this.props, SUPPORTED_PROPS, _props2.DEPRECATED_CONFIG_PROPS);
      var activePlayer = this.renderActivePlayer(url);
      var preloadPlayers = this.renderPreloadPlayers(url);
      return _react2['default'].createElement(
        'div',
        _extends({ style: _extends({}, style, { width: width, height: height }) }, otherProps),
        activePlayer,
        preloadPlayers
      );
    }
  }]);

  return ReactPlayer;
}(_react.Component);

ReactPlayer.displayName = 'ReactPlayer';
ReactPlayer.propTypes = _props2.propTypes;
ReactPlayer.defaultProps = _props2.defaultProps;

ReactPlayer.canPlay = function (url) {
  var players = [].concat(SUPPORTED_PLAYERS, [_FilePlayer2['default']]);
  var _iteratorNormalCompletion2 = true;
  var _didIteratorError2 = false;
  var _iteratorError2 = undefined;

  try {
    for (var _iterator2 = players[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
      var Player = _step2.value;

      if (Player.canPlay(url)) {
        return true;
      }
    }
  } catch (err) {
    _didIteratorError2 = true;
    _iteratorError2 = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion2 && _iterator2['return']) {
        _iterator2['return']();
      }
    } finally {
      if (_didIteratorError2) {
        throw _iteratorError2;
      }
    }
  }

  return false;
};

exports['default'] = ReactPlayer;