@u-wave/react-youtube - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

lib/rollup.es.js

@@ -5,186 +5,36 @@ import React from 'react';
 
-var eventNames = {
-  ready: 'onReady',
-  stateChange: 'onStateChange',
-  playbackQualityChange: 'onPlaybackQualityChange',
-  playbackRateChange: 'onPlaybackRateChange',
-  error: 'onError',
-  apiChange: 'onApiChange'
-};
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-  return typeof obj;
-} : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+var _sPO = Object.setPrototypeOf || function _sPO(o, p) {
+  o.__proto__ = p;
+  return o;
 };
 
-
-
-
-
-var asyncGenerator = function () {
-  function AwaitValue(value) {
-    this.value = value;
-  }
-
-  function AsyncGenerator(gen) {
-    var front, back;
-
-    function send(key, arg) {
-      return new Promise(function (resolve, reject) {
-        var request = {
-          key: key,
-          arg: arg,
-          resolve: resolve,
-          reject: reject,
-          next: null
-        };
-
-        if (back) {
-          back = back.next = request;
-        } else {
-          front = back = request;
-          resume(key, arg);
-        }
-      });
-    }
-
-    function resume(key, arg) {
-      try {
-        var result = gen[key](arg);
-        var value = result.value;
-
-        if (value instanceof AwaitValue) {
-          Promise.resolve(value.value).then(function (arg) {
-            resume("next", arg);
-          }, function (arg) {
-            resume("throw", arg);
-          });
-        } else {
-          settle(result.done ? "return" : "normal", result.value);
-        }
-      } catch (err) {
-        settle("throw", err);
-      }
-    }
-
-    function settle(type, value) {
-      switch (type) {
-        case "return":
-          front.resolve({
-            value: value,
-            done: true
-          });
-          break;
-
-        case "throw":
-          front.reject(value);
-          break;
-
-        default:
-          front.resolve({
-            value: value,
-            done: false
-          });
-          break;
-      }
-
-      front = front.next;
-
-      if (front) {
-        resume(front.key, front.arg);
-      } else {
-        back = null;
-      }
-    }
-
-    this._invoke = send;
-
-    if (typeof gen.return !== "function") {
-      this.return = undefined;
-    }
-  }
-
-  if (typeof Symbol === "function" && Symbol.asyncIterator) {
-    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
-      return this;
-    };
-  }
-
-  AsyncGenerator.prototype.next = function (arg) {
-    return this._invoke("next", arg);
-  };
-
-  AsyncGenerator.prototype.throw = function (arg) {
-    return this._invoke("throw", arg);
-  };
-
-  AsyncGenerator.prototype.return = function (arg) {
-    return this._invoke("return", arg);
-  };
-
-  return {
-    wrap: function (fn) {
-      return function () {
-        return new AsyncGenerator(fn.apply(this, arguments));
-      };
-    },
-    await: function (value) {
-      return new AwaitValue(value);
-    }
-  };
-}();
-
-
-
-
-
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
+var _construct = typeof Reflect === "object" && Reflect.construct || function _construct(Parent, args, Class) {
+  var Constructor,
+      a = [null];
+  a.push.apply(a, args);
+  Constructor = Parent.bind.apply(Parent, a);
+  return _sPO(new Constructor(), Class.prototype);
 };
 
-
-
-
-
-
-
-
-
-
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
 
-  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;
-};
+  return self;
+}
 
-
-
-
-
-
-
-
-
-
-
-var possibleConstructorReturn = function (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;
+var eventNames = {
+  ready: 'onReady',
+  stateChange: 'onStateChange',
+  playbackQualityChange: 'onPlaybackQualityChange',
+  playbackRateChange: 'onPlaybackRateChange',
+  error: 'onError',
+  apiChange: 'onApiChange'
 };
@@ -195,3 +45,3 @@
   return new Promise(function (resolve, reject) {
-    if (_typeof(window.YT) === 'object' && typeof window.YT.ready === 'function') {
+    if (typeof window.YT === 'object' && typeof window.YT.ready === 'function') {
       // A YouTube SDK is already loaded, so reuse that
@@ -207,6 +57,7 @@ window.YT.ready(function () {
         reject(err);
+      } else {
+        window.YT.ready(function () {
+          resolve(window.YT);
+        });
       }
-      window.YT.ready(function () {
-        resolve(window.YT);
-      });
     });
@@ -221,67 +72,28 @@ });
   }
+
   return sdk;
 }
 
-var YouTube = function (_React$Component) {
-  inherits(YouTube, _React$Component);
+var YouTube =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(YouTube, _React$Component);
 
-  function YouTube() {
-    var _temp, _this, _ret;
+  function YouTube(props) {
+    var _this;
 
-    classCallCheck(this, YouTube);
+    _this = _React$Component.call(this, props) || this;
+    _this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_this));
+    _this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_this));
+    _this.refContainer = _this.refContainer.bind(_assertThisInitialized(_this));
+    return _this;
+  }
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var _proto = YouTube.prototype;
 
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.onPlayerReady = function (event) {
-      if (typeof _this.props.volume !== 'undefined') {
-        event.target.setVolume(_this.props.volume * 100);
-      }
-      if (typeof _this.props.muted !== 'undefined') {
-        if (_this.props.muted) {
-          event.target.mute();
-        } else {
-          event.target.unMute();
-        }
-      }
-      if (typeof _this.props.suggestedQuality !== 'undefined') {
-        event.target.setPlaybackQuality(_this.props.suggestedQuality);
-      }
-      if (typeof _this.props.playbackRate !== 'undefined') {
-        event.target.setPlaybackRate(_this.props.playbackRate);
-      }
-
-      _this.resolvePlayer(event.target);
-    }, _this.onPlayerStateChange = function (event) {
-      var State = YT.PlayerState; // eslint-disable-line no-undef
-      switch (event.data) {
-        case State.CUED:
-          _this.props.onCued(event);
-          break;
-        case State.BUFFERING:
-          _this.props.onBuffering(event);
-          break;
-        case State.PAUSED:
-          _this.props.onPause(event);
-          break;
-        case State.PLAYING:
-          _this.props.onPlaying(event);
-          break;
-        case State.ENDED:
-          _this.props.onEnd(event);
-          break;
-        default:
-        // Nothing
-      }
-    }, _this.refContainer = function (container) {
-      _this.container = container;
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
-
-  YouTube.prototype.componentDidMount = function componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     this.createPlayer();
   };
 
-  YouTube.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var _this2 = this;
@@ -292,7 +104,6 @@
     });
-
     this.updateProps(changes);
   };
 
-  YouTube.prototype.componentWillUnmount = function componentWillUnmount() {
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.playerInstance) {
@@ -303,6 +114,60 @@ this.playerInstance.destroy();
 
+  _proto.onPlayerReady = function onPlayerReady(event) {
+    if (typeof this.props.volume !== 'undefined') {
+      event.target.setVolume(this.props.volume * 100);
+    }
+
+    if (typeof this.props.muted !== 'undefined') {
+      if (this.props.muted) {
+        event.target.mute();
+      } else {
+        event.target.unMute();
+      }
+    }
+
+    if (typeof this.props.suggestedQuality !== 'undefined') {
+      event.target.setPlaybackQuality(this.props.suggestedQuality);
+    }
+
+    if (typeof this.props.playbackRate !== 'undefined') {
+      event.target.setPlaybackRate(this.props.playbackRate);
+    }
+
+    this.resolvePlayer(event.target);
+  };
+
+  _proto.onPlayerStateChange = function onPlayerStateChange(event) {
+    var State = YT.PlayerState; // eslint-disable-line no-undef
+
+    switch (event.data) {
+      case State.CUED:
+        this.props.onCued(event);
+        break;
+
+      case State.BUFFERING:
+        this.props.onBuffering(event);
+        break;
+
+      case State.PAUSED:
+        this.props.onPause(event);
+        break;
+
+      case State.PLAYING:
+        this.props.onPlaying(event);
+        break;
+
+      case State.ENDED:
+        this.props.onEnd(event);
+        break;
+
+      default: // Nothing
+
+    }
+  };
   /**
    * @private
    */
-  YouTube.prototype.getPlayerParameters = function getPlayerParameters() {
+
+
+  _proto.getPlayerParameters = function getPlayerParameters() {
     return {
@@ -324,3 +189,2 @@ autoplay: this.props.autoplay,
   };
-
   /**
@@ -331,3 +195,3 @@ * @private
 
-  YouTube.prototype.getInitialOptions = function getInitialOptions() {
+  _proto.getInitialOptions = function getInitialOptions() {
     return {
@@ -344,3 +208,2 @@ videoId: this.props.video,
   };
-
   /**
@@ -351,3 +214,3 @@ * @private
 
-  YouTube.prototype.updateProps = function updateProps(propNames) {
+  _proto.updateProps = function updateProps(propNames) {
     var _this3 = this;
@@ -358,2 +221,3 @@
         var value = _this3.props[name];
+
         switch (name) {
@@ -366,9 +230,13 @@ case 'muted':
             }
+
             break;
+
           case 'suggestedQuality':
             player.setPlaybackQuality(value);
             break;
+
           case 'volume':
             player.setVolume(value * 100);
             break;
+
           case 'paused':
@@ -380,3 +248,5 @@ if (value && player.getPlayerState() !== 2) {
             }
+
             break;
+
           case 'id':
@@ -387,3 +257,5 @@ case 'className':
             player.getIframe()[name] = value; // eslint-disable-line no-param-reassign
+
             break;
+
           case 'video':
@@ -399,5 +271,7 @@ if (!value) {
             }
+
             break;
-          default:
-          // Nothing
+
+          default: // Nothing
+
         }
@@ -407,3 +281,2 @@ });
   };
-
   /**
@@ -414,3 +287,3 @@ * @private
 
-  YouTube.prototype.createPlayer = function createPlayer() {
+  _proto.createPlayer = function createPlayer() {
     var _this4 = this;
@@ -421,8 +294,6 @@
         _this4.resolvePlayer = resolve;
+        var player = new YT.Player(_this4.container, _this4.getInitialOptions()); // Store the instance directly so we can destroy it sync in
+        // `componentWilLUnmount`.
 
-        var player = new YT.Player(_this4.container, _this4.getInitialOptions());
-        // Store the instance directly so we can destroy it sync in
-        // `componentWilLUnmount`.
         _this4.playerInstance = player;
-
         Object.keys(eventNames).forEach(function (ytName) {
@@ -443,3 +314,2 @@ var reactName = eventNames[ytName];
   };
-
   /**
@@ -450,4 +320,8 @@ * @private
 
-  YouTube.prototype.render = function render() {
-    return React.createElement('div', {
+  _proto.refContainer = function refContainer(container) {
+    this.container = container;
+  };
+
+  _proto.render = function render() {
+    return React.createElement("div", {
       id: this.props.id,
@@ -462,2 +336,198 @@ className: this.props.className,
 
+if (process.env.NODE_ENV !== 'production') {
+  YouTube.propTypes = {
+    /**
+     * An 11-character string representing a YouTube video ID..
+     */
+    video: PropTypes.string,
+
+    /**
+     * DOM ID for the player element.
+     */
+    id: PropTypes.string,
+
+    /**
+     * CSS className for the player element.
+     */
+    className: PropTypes.string,
+
+    /**
+     * Width of the player element.
+     */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+    /**
+     * Height of the player element.
+     */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+    /**
+     * Pause the video.
+     */
+    paused: PropTypes.bool,
+    // eslint-disable-line react/no-unused-prop-types
+    // Player parameters
+
+    /**
+     * Whether the video should start playing automatically.
+     *
+     * https://developers.google.com/youtube/player_parameters#autoplay
+     */
+    autoplay: PropTypes.bool,
+
+    /**
+     * Whether to show captions below the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#cc_load_policy
+     */
+    showCaptions: PropTypes.bool,
+
+    /**
+     * Whether to show video controls.
+     *
+     * https://developers.google.com/youtube/player_parameters#controls
+     */
+    controls: PropTypes.bool,
+
+    /**
+     * Ignore keyboard controls.
+     *
+     * https://developers.google.com/youtube/player_parameters#disablekb
+     */
+    disableKeyboard: PropTypes.bool,
+
+    /**
+     * Whether to display the fullscreen button.
+     *
+     * https://developers.google.com/youtube/player_parameters#fs
+     */
+    allowFullscreen: PropTypes.bool,
+
+    /**
+     * The player's interface language. The parameter value is an ISO 639-1
+     * two-letter language code or a fully specified locale.
+     *
+     * https://developers.google.com/youtube/player_parameters#hl
+     */
+    lang: PropTypes.string,
+
+    /**
+     * Whether to show annotations on top of the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#iv_load_policy
+     */
+    annotations: PropTypes.bool,
+
+    /**
+     * Time in seconds at which to start playing the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#start
+     */
+    startSeconds: PropTypes.number,
+
+    /**
+     * Time in seconds at which to stop playing the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#end
+     */
+    endSeconds: PropTypes.number,
+
+    /**
+     * Remove most YouTube logos from the player.
+     *
+     * https://developers.google.com/youtube/player_parameters#modestbranding
+     */
+    modestBranding: PropTypes.bool,
+
+    /**
+     * Whether to play the video inline on iOS, instead of fullscreen.
+     *
+     * https://developers.google.com/youtube/player_parameters#playsinline
+     */
+    playsInline: PropTypes.bool,
+
+    /**
+     * Whether to show related videos after the video is over.
+     *
+     * https://developers.google.com/youtube/player_parameters#rel
+     */
+    showRelatedVideos: PropTypes.bool,
+
+    /**
+     * Whether to show video information (uploader, title, etc) before the video
+     * starts.
+     *
+     * https://developers.google.com/youtube/player_parameters#showinfo
+     */
+    showInfo: PropTypes.bool,
+
+    /**
+     * The playback volume, **as a number between 0 and 1**.
+     */
+    volume: PropTypes.number,
+
+    /**
+     * Whether the video's sound should be muted.
+     */
+    muted: PropTypes.bool,
+
+    /**
+     * The suggested playback quality.
+     *
+     * https://developers.google.com/youtube/iframe_api_reference#Playback_quality
+     */
+    suggestedQuality: PropTypes.string,
+
+    /**
+     * Playback speed.
+     *
+     * https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
+     */
+    playbackRate: PropTypes.number,
+    // Events
+
+    /* eslint-disable react/no-unused-prop-types */
+
+    /**
+     * Sent when the YouTube player API has loaded.
+     */
+    onReady: PropTypes.func,
+
+    /**
+     * Sent when the player triggers an error.
+     */
+    onError: PropTypes.func,
+
+    /**
+     * Sent when the video is cued and ready to play.
+     */
+    onCued: PropTypes.func,
+
+    /**
+     * Sent when the video is buffering.
+     */
+    onBuffering: PropTypes.func,
+
+    /**
+     * Sent when playback has been started or resumed.
+     */
+    onPlaying: PropTypes.func,
+
+    /**
+     * Sent when playback has been paused.
+     */
+    onPause: PropTypes.func,
+
+    /**
+     * Sent when playback has stopped.
+     */
+    onEnd: PropTypes.func,
+    onStateChange: PropTypes.func,
+    onPlaybackRateChange: PropTypes.func,
+    onPlaybackQualityChange: PropTypes.func
+    /* eslint-enable react/no-unused-prop-types */
+
+  };
+}
+
 YouTube.defaultProps = {
@@ -480,173 +550,3 @@ autoplay: false,
 };
-YouTube.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * An 11-character string representing a YouTube video ID..
-   */
-  video: PropTypes.string,
-  /**
-   * DOM ID for the player element.
-   */
-  id: PropTypes.string,
-  /**
-   * CSS className for the player element.
-   */
-  className: PropTypes.string,
-  /**
-   * Width of the player element.
-   */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Height of the player element.
-   */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /**
-   * Pause the video.
-   */
-  paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
-
-  // Player parameters
-
-  /**
-   * Whether the video should start playing automatically.
-   *
-   * https://developers.google.com/youtube/player_parameters#autoplay
-   */
-  autoplay: PropTypes.bool,
-  /**
-   * Whether to show captions below the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#cc_load_policy
-   */
-  showCaptions: PropTypes.bool,
-  /**
-   * Whether to show video controls.
-   *
-   * https://developers.google.com/youtube/player_parameters#controls
-   */
-  controls: PropTypes.bool,
-  /**
-   * Ignore keyboard controls.
-   *
-   * https://developers.google.com/youtube/player_parameters#disablekb
-   */
-  disableKeyboard: PropTypes.bool,
-  /**
-   * Whether to display the fullscreen button.
-   *
-   * https://developers.google.com/youtube/player_parameters#fs
-   */
-  allowFullscreen: PropTypes.bool,
-  /**
-   * The player's interface language. The parameter value is an ISO 639-1
-   * two-letter language code or a fully specified locale.
-   *
-   * https://developers.google.com/youtube/player_parameters#hl
-   */
-  lang: PropTypes.string,
-  /**
-   * Whether to show annotations on top of the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#iv_load_policy
-   */
-  annotations: PropTypes.bool,
-  /**
-   * Time in seconds at which to start playing the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#start
-   */
-  startSeconds: PropTypes.number,
-  /**
-   * Time in seconds at which to stop playing the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#end
-   */
-  endSeconds: PropTypes.number,
-  /**
-   * Remove most YouTube logos from the player.
-   *
-   * https://developers.google.com/youtube/player_parameters#modestbranding
-   */
-  modestBranding: PropTypes.bool,
-  /**
-   * Whether to play the video inline on iOS, instead of fullscreen.
-   *
-   * https://developers.google.com/youtube/player_parameters#playsinline
-   */
-  playsInline: PropTypes.bool,
-  /**
-   * Whether to show related videos after the video is over.
-   *
-   * https://developers.google.com/youtube/player_parameters#rel
-   */
-  showRelatedVideos: PropTypes.bool,
-  /**
-   * Whether to show video information (uploader, title, etc) before the video
-   * starts.
-   *
-   * https://developers.google.com/youtube/player_parameters#showinfo
-   */
-  showInfo: PropTypes.bool,
-
-  /**
-   * The playback volume, **as a number between 0 and 1**.
-   */
-  volume: PropTypes.number,
-
-  /**
-   * Whether the video's sound should be muted.
-   */
-  muted: PropTypes.bool,
-
-  /**
-   * The suggested playback quality.
-   *
-   * https://developers.google.com/youtube/iframe_api_reference#Playback_quality
-   */
-  suggestedQuality: PropTypes.string,
-  /**
-   * Playback speed.
-   *
-   * https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
-   */
-  playbackRate: PropTypes.number,
-
-  // Events
-  /* eslint-disable react/no-unused-prop-types */
-
-  /**
-   * Sent when the YouTube player API has loaded.
-   */
-  onReady: PropTypes.func,
-  /**
-   * Sent when the player triggers an error.
-   */
-  onError: PropTypes.func,
-  /**
-   * Sent when the video is cued and ready to play.
-   */
-  onCued: PropTypes.func,
-  /**
-   * Sent when the video is buffering.
-   */
-  onBuffering: PropTypes.func,
-  /**
-   * Sent when playback has been started or resumed.
-   */
-  onPlaying: PropTypes.func,
-  /**
-   * Sent when playback has been paused.
-   */
-  onPause: PropTypes.func,
-  /**
-   * Sent when playback has stopped.
-   */
-  onEnd: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onPlaybackRateChange: PropTypes.func,
-  onPlaybackQualityChange: PropTypes.func
-
-  /* eslint-enable react/no-unused-prop-types */
-} : {};
-
 export default YouTube;

lib/rollup.js

@@ -11,186 +11,36 @@ 'use strict';
 
-var eventNames = {
-  ready: 'onReady',
-  stateChange: 'onStateChange',
-  playbackQualityChange: 'onPlaybackQualityChange',
-  playbackRateChange: 'onPlaybackRateChange',
-  error: 'onError',
-  apiChange: 'onApiChange'
-};
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  subClass.__proto__ = superClass;
+}
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
-  return typeof obj;
-} : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+var _sPO = Object.setPrototypeOf || function _sPO(o, p) {
+  o.__proto__ = p;
+  return o;
 };
 
-
-
-
-
-var asyncGenerator = function () {
-  function AwaitValue(value) {
-    this.value = value;
-  }
-
-  function AsyncGenerator(gen) {
-    var front, back;
-
-    function send(key, arg) {
-      return new Promise(function (resolve, reject) {
-        var request = {
-          key: key,
-          arg: arg,
-          resolve: resolve,
-          reject: reject,
-          next: null
-        };
-
-        if (back) {
-          back = back.next = request;
-        } else {
-          front = back = request;
-          resume(key, arg);
-        }
-      });
-    }
-
-    function resume(key, arg) {
-      try {
-        var result = gen[key](arg);
-        var value = result.value;
-
-        if (value instanceof AwaitValue) {
-          Promise.resolve(value.value).then(function (arg) {
-            resume("next", arg);
-          }, function (arg) {
-            resume("throw", arg);
-          });
-        } else {
-          settle(result.done ? "return" : "normal", result.value);
-        }
-      } catch (err) {
-        settle("throw", err);
-      }
-    }
-
-    function settle(type, value) {
-      switch (type) {
-        case "return":
-          front.resolve({
-            value: value,
-            done: true
-          });
-          break;
-
-        case "throw":
-          front.reject(value);
-          break;
-
-        default:
-          front.resolve({
-            value: value,
-            done: false
-          });
-          break;
-      }
-
-      front = front.next;
-
-      if (front) {
-        resume(front.key, front.arg);
-      } else {
-        back = null;
-      }
-    }
-
-    this._invoke = send;
-
-    if (typeof gen.return !== "function") {
-      this.return = undefined;
-    }
-  }
-
-  if (typeof Symbol === "function" && Symbol.asyncIterator) {
-    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
-      return this;
-    };
-  }
-
-  AsyncGenerator.prototype.next = function (arg) {
-    return this._invoke("next", arg);
-  };
-
-  AsyncGenerator.prototype.throw = function (arg) {
-    return this._invoke("throw", arg);
-  };
-
-  AsyncGenerator.prototype.return = function (arg) {
-    return this._invoke("return", arg);
-  };
-
-  return {
-    wrap: function (fn) {
-      return function () {
-        return new AsyncGenerator(fn.apply(this, arguments));
-      };
-    },
-    await: function (value) {
-      return new AwaitValue(value);
-    }
-  };
-}();
-
-
-
-
-
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
+var _construct = typeof Reflect === "object" && Reflect.construct || function _construct(Parent, args, Class) {
+  var Constructor,
+      a = [null];
+  a.push.apply(a, args);
+  Constructor = Parent.bind.apply(Parent, a);
+  return _sPO(new Constructor(), Class.prototype);
 };
 
-
-
-
-
-
-
-
-
-
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
 
-  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;
-};
+  return self;
+}
 
-
-
-
-
-
-
-
-
-
-
-var possibleConstructorReturn = function (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;
+var eventNames = {
+  ready: 'onReady',
+  stateChange: 'onStateChange',
+  playbackQualityChange: 'onPlaybackQualityChange',
+  playbackRateChange: 'onPlaybackRateChange',
+  error: 'onError',
+  apiChange: 'onApiChange'
 };
@@ -201,3 +51,3 @@
   return new Promise(function (resolve, reject) {
-    if (_typeof(window.YT) === 'object' && typeof window.YT.ready === 'function') {
+    if (typeof window.YT === 'object' && typeof window.YT.ready === 'function') {
       // A YouTube SDK is already loaded, so reuse that
@@ -213,6 +63,7 @@ window.YT.ready(function () {
         reject(err);
+      } else {
+        window.YT.ready(function () {
+          resolve(window.YT);
+        });
       }
-      window.YT.ready(function () {
-        resolve(window.YT);
-      });
     });
@@ -227,67 +78,28 @@ });
   }
+
   return sdk;
 }
 
-var YouTube = function (_React$Component) {
-  inherits(YouTube, _React$Component);
+var YouTube =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(YouTube, _React$Component);
 
-  function YouTube() {
-    var _temp, _this, _ret;
+  function YouTube(props) {
+    var _this;
 
-    classCallCheck(this, YouTube);
+    _this = _React$Component.call(this, props) || this;
+    _this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_this));
+    _this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_this));
+    _this.refContainer = _this.refContainer.bind(_assertThisInitialized(_this));
+    return _this;
+  }
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var _proto = YouTube.prototype;
 
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.onPlayerReady = function (event) {
-      if (typeof _this.props.volume !== 'undefined') {
-        event.target.setVolume(_this.props.volume * 100);
-      }
-      if (typeof _this.props.muted !== 'undefined') {
-        if (_this.props.muted) {
-          event.target.mute();
-        } else {
-          event.target.unMute();
-        }
-      }
-      if (typeof _this.props.suggestedQuality !== 'undefined') {
-        event.target.setPlaybackQuality(_this.props.suggestedQuality);
-      }
-      if (typeof _this.props.playbackRate !== 'undefined') {
-        event.target.setPlaybackRate(_this.props.playbackRate);
-      }
-
-      _this.resolvePlayer(event.target);
-    }, _this.onPlayerStateChange = function (event) {
-      var State = YT.PlayerState; // eslint-disable-line no-undef
-      switch (event.data) {
-        case State.CUED:
-          _this.props.onCued(event);
-          break;
-        case State.BUFFERING:
-          _this.props.onBuffering(event);
-          break;
-        case State.PAUSED:
-          _this.props.onPause(event);
-          break;
-        case State.PLAYING:
-          _this.props.onPlaying(event);
-          break;
-        case State.ENDED:
-          _this.props.onEnd(event);
-          break;
-        default:
-        // Nothing
-      }
-    }, _this.refContainer = function (container) {
-      _this.container = container;
-    }, _temp), possibleConstructorReturn(_this, _ret);
-  }
-
-  YouTube.prototype.componentDidMount = function componentDidMount() {
+  _proto.componentDidMount = function componentDidMount() {
     this.createPlayer();
   };
 
-  YouTube.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var _this2 = this;
@@ -298,7 +110,6 @@
     });
-
     this.updateProps(changes);
   };
 
-  YouTube.prototype.componentWillUnmount = function componentWillUnmount() {
+  _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.playerInstance) {
@@ -309,6 +120,60 @@ this.playerInstance.destroy();
 
+  _proto.onPlayerReady = function onPlayerReady(event) {
+    if (typeof this.props.volume !== 'undefined') {
+      event.target.setVolume(this.props.volume * 100);
+    }
+
+    if (typeof this.props.muted !== 'undefined') {
+      if (this.props.muted) {
+        event.target.mute();
+      } else {
+        event.target.unMute();
+      }
+    }
+
+    if (typeof this.props.suggestedQuality !== 'undefined') {
+      event.target.setPlaybackQuality(this.props.suggestedQuality);
+    }
+
+    if (typeof this.props.playbackRate !== 'undefined') {
+      event.target.setPlaybackRate(this.props.playbackRate);
+    }
+
+    this.resolvePlayer(event.target);
+  };
+
+  _proto.onPlayerStateChange = function onPlayerStateChange(event) {
+    var State = YT.PlayerState; // eslint-disable-line no-undef
+
+    switch (event.data) {
+      case State.CUED:
+        this.props.onCued(event);
+        break;
+
+      case State.BUFFERING:
+        this.props.onBuffering(event);
+        break;
+
+      case State.PAUSED:
+        this.props.onPause(event);
+        break;
+
+      case State.PLAYING:
+        this.props.onPlaying(event);
+        break;
+
+      case State.ENDED:
+        this.props.onEnd(event);
+        break;
+
+      default: // Nothing
+
+    }
+  };
   /**
    * @private
    */
-  YouTube.prototype.getPlayerParameters = function getPlayerParameters() {
+
+
+  _proto.getPlayerParameters = function getPlayerParameters() {
     return {
@@ -330,3 +195,2 @@ autoplay: this.props.autoplay,
   };
-
   /**
@@ -337,3 +201,3 @@ * @private
 
-  YouTube.prototype.getInitialOptions = function getInitialOptions() {
+  _proto.getInitialOptions = function getInitialOptions() {
     return {
@@ -350,3 +214,2 @@ videoId: this.props.video,
   };
-
   /**
@@ -357,3 +220,3 @@ * @private
 
-  YouTube.prototype.updateProps = function updateProps(propNames) {
+  _proto.updateProps = function updateProps(propNames) {
     var _this3 = this;
@@ -364,2 +227,3 @@
         var value = _this3.props[name];
+
         switch (name) {
@@ -372,9 +236,13 @@ case 'muted':
             }
+
             break;
+
           case 'suggestedQuality':
             player.setPlaybackQuality(value);
             break;
+
           case 'volume':
             player.setVolume(value * 100);
             break;
+
           case 'paused':
@@ -386,3 +254,5 @@ if (value && player.getPlayerState() !== 2) {
             }
+
             break;
+
           case 'id':
@@ -393,3 +263,5 @@ case 'className':
             player.getIframe()[name] = value; // eslint-disable-line no-param-reassign
+
             break;
+
           case 'video':
@@ -405,5 +277,7 @@ if (!value) {
             }
+
             break;
-          default:
-          // Nothing
+
+          default: // Nothing
+
         }
@@ -413,3 +287,2 @@ });
   };
-
   /**
@@ -420,3 +293,3 @@ * @private
 
-  YouTube.prototype.createPlayer = function createPlayer() {
+  _proto.createPlayer = function createPlayer() {
     var _this4 = this;
@@ -427,8 +300,6 @@
         _this4.resolvePlayer = resolve;
+        var player = new YT.Player(_this4.container, _this4.getInitialOptions()); // Store the instance directly so we can destroy it sync in
+        // `componentWilLUnmount`.
 
-        var player = new YT.Player(_this4.container, _this4.getInitialOptions());
-        // Store the instance directly so we can destroy it sync in
-        // `componentWilLUnmount`.
         _this4.playerInstance = player;
-
         Object.keys(eventNames).forEach(function (ytName) {
@@ -449,3 +320,2 @@ var reactName = eventNames[ytName];
   };
-
   /**
@@ -456,4 +326,8 @@ * @private
 
-  YouTube.prototype.render = function render() {
-    return React.createElement('div', {
+  _proto.refContainer = function refContainer(container) {
+    this.container = container;
+  };
+
+  _proto.render = function render() {
+    return React.createElement("div", {
       id: this.props.id,
@@ -468,2 +342,198 @@ className: this.props.className,
 
+if (process.env.NODE_ENV !== 'production') {
+  YouTube.propTypes = {
+    /**
+     * An 11-character string representing a YouTube video ID..
+     */
+    video: PropTypes.string,
+
+    /**
+     * DOM ID for the player element.
+     */
+    id: PropTypes.string,
+
+    /**
+     * CSS className for the player element.
+     */
+    className: PropTypes.string,
+
+    /**
+     * Width of the player element.
+     */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+    /**
+     * Height of the player element.
+     */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+    /**
+     * Pause the video.
+     */
+    paused: PropTypes.bool,
+    // eslint-disable-line react/no-unused-prop-types
+    // Player parameters
+
+    /**
+     * Whether the video should start playing automatically.
+     *
+     * https://developers.google.com/youtube/player_parameters#autoplay
+     */
+    autoplay: PropTypes.bool,
+
+    /**
+     * Whether to show captions below the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#cc_load_policy
+     */
+    showCaptions: PropTypes.bool,
+
+    /**
+     * Whether to show video controls.
+     *
+     * https://developers.google.com/youtube/player_parameters#controls
+     */
+    controls: PropTypes.bool,
+
+    /**
+     * Ignore keyboard controls.
+     *
+     * https://developers.google.com/youtube/player_parameters#disablekb
+     */
+    disableKeyboard: PropTypes.bool,
+
+    /**
+     * Whether to display the fullscreen button.
+     *
+     * https://developers.google.com/youtube/player_parameters#fs
+     */
+    allowFullscreen: PropTypes.bool,
+
+    /**
+     * The player's interface language. The parameter value is an ISO 639-1
+     * two-letter language code or a fully specified locale.
+     *
+     * https://developers.google.com/youtube/player_parameters#hl
+     */
+    lang: PropTypes.string,
+
+    /**
+     * Whether to show annotations on top of the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#iv_load_policy
+     */
+    annotations: PropTypes.bool,
+
+    /**
+     * Time in seconds at which to start playing the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#start
+     */
+    startSeconds: PropTypes.number,
+
+    /**
+     * Time in seconds at which to stop playing the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#end
+     */
+    endSeconds: PropTypes.number,
+
+    /**
+     * Remove most YouTube logos from the player.
+     *
+     * https://developers.google.com/youtube/player_parameters#modestbranding
+     */
+    modestBranding: PropTypes.bool,
+
+    /**
+     * Whether to play the video inline on iOS, instead of fullscreen.
+     *
+     * https://developers.google.com/youtube/player_parameters#playsinline
+     */
+    playsInline: PropTypes.bool,
+
+    /**
+     * Whether to show related videos after the video is over.
+     *
+     * https://developers.google.com/youtube/player_parameters#rel
+     */
+    showRelatedVideos: PropTypes.bool,
+
+    /**
+     * Whether to show video information (uploader, title, etc) before the video
+     * starts.
+     *
+     * https://developers.google.com/youtube/player_parameters#showinfo
+     */
+    showInfo: PropTypes.bool,
+
+    /**
+     * The playback volume, **as a number between 0 and 1**.
+     */
+    volume: PropTypes.number,
+
+    /**
+     * Whether the video's sound should be muted.
+     */
+    muted: PropTypes.bool,
+
+    /**
+     * The suggested playback quality.
+     *
+     * https://developers.google.com/youtube/iframe_api_reference#Playback_quality
+     */
+    suggestedQuality: PropTypes.string,
+
+    /**
+     * Playback speed.
+     *
+     * https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
+     */
+    playbackRate: PropTypes.number,
+    // Events
+
+    /* eslint-disable react/no-unused-prop-types */
+
+    /**
+     * Sent when the YouTube player API has loaded.
+     */
+    onReady: PropTypes.func,
+
+    /**
+     * Sent when the player triggers an error.
+     */
+    onError: PropTypes.func,
+
+    /**
+     * Sent when the video is cued and ready to play.
+     */
+    onCued: PropTypes.func,
+
+    /**
+     * Sent when the video is buffering.
+     */
+    onBuffering: PropTypes.func,
+
+    /**
+     * Sent when playback has been started or resumed.
+     */
+    onPlaying: PropTypes.func,
+
+    /**
+     * Sent when playback has been paused.
+     */
+    onPause: PropTypes.func,
+
+    /**
+     * Sent when playback has stopped.
+     */
+    onEnd: PropTypes.func,
+    onStateChange: PropTypes.func,
+    onPlaybackRateChange: PropTypes.func,
+    onPlaybackQualityChange: PropTypes.func
+    /* eslint-enable react/no-unused-prop-types */
+
+  };
+}
+
 YouTube.defaultProps = {
@@ -486,173 +556,3 @@ autoplay: false,
 };
-YouTube.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * An 11-character string representing a YouTube video ID..
-   */
-  video: PropTypes.string,
-  /**
-   * DOM ID for the player element.
-   */
-  id: PropTypes.string,
-  /**
-   * CSS className for the player element.
-   */
-  className: PropTypes.string,
-  /**
-   * Width of the player element.
-   */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Height of the player element.
-   */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
-  /**
-   * Pause the video.
-   */
-  paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
-
-  // Player parameters
-
-  /**
-   * Whether the video should start playing automatically.
-   *
-   * https://developers.google.com/youtube/player_parameters#autoplay
-   */
-  autoplay: PropTypes.bool,
-  /**
-   * Whether to show captions below the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#cc_load_policy
-   */
-  showCaptions: PropTypes.bool,
-  /**
-   * Whether to show video controls.
-   *
-   * https://developers.google.com/youtube/player_parameters#controls
-   */
-  controls: PropTypes.bool,
-  /**
-   * Ignore keyboard controls.
-   *
-   * https://developers.google.com/youtube/player_parameters#disablekb
-   */
-  disableKeyboard: PropTypes.bool,
-  /**
-   * Whether to display the fullscreen button.
-   *
-   * https://developers.google.com/youtube/player_parameters#fs
-   */
-  allowFullscreen: PropTypes.bool,
-  /**
-   * The player's interface language. The parameter value is an ISO 639-1
-   * two-letter language code or a fully specified locale.
-   *
-   * https://developers.google.com/youtube/player_parameters#hl
-   */
-  lang: PropTypes.string,
-  /**
-   * Whether to show annotations on top of the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#iv_load_policy
-   */
-  annotations: PropTypes.bool,
-  /**
-   * Time in seconds at which to start playing the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#start
-   */
-  startSeconds: PropTypes.number,
-  /**
-   * Time in seconds at which to stop playing the video.
-   *
-   * https://developers.google.com/youtube/player_parameters#end
-   */
-  endSeconds: PropTypes.number,
-  /**
-   * Remove most YouTube logos from the player.
-   *
-   * https://developers.google.com/youtube/player_parameters#modestbranding
-   */
-  modestBranding: PropTypes.bool,
-  /**
-   * Whether to play the video inline on iOS, instead of fullscreen.
-   *
-   * https://developers.google.com/youtube/player_parameters#playsinline
-   */
-  playsInline: PropTypes.bool,
-  /**
-   * Whether to show related videos after the video is over.
-   *
-   * https://developers.google.com/youtube/player_parameters#rel
-   */
-  showRelatedVideos: PropTypes.bool,
-  /**
-   * Whether to show video information (uploader, title, etc) before the video
-   * starts.
-   *
-   * https://developers.google.com/youtube/player_parameters#showinfo
-   */
-  showInfo: PropTypes.bool,
-
-  /**
-   * The playback volume, **as a number between 0 and 1**.
-   */
-  volume: PropTypes.number,
-
-  /**
-   * Whether the video's sound should be muted.
-   */
-  muted: PropTypes.bool,
-
-  /**
-   * The suggested playback quality.
-   *
-   * https://developers.google.com/youtube/iframe_api_reference#Playback_quality
-   */
-  suggestedQuality: PropTypes.string,
-  /**
-   * Playback speed.
-   *
-   * https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
-   */
-  playbackRate: PropTypes.number,
-
-  // Events
-  /* eslint-disable react/no-unused-prop-types */
-
-  /**
-   * Sent when the YouTube player API has loaded.
-   */
-  onReady: PropTypes.func,
-  /**
-   * Sent when the player triggers an error.
-   */
-  onError: PropTypes.func,
-  /**
-   * Sent when the video is cued and ready to play.
-   */
-  onCued: PropTypes.func,
-  /**
-   * Sent when the video is buffering.
-   */
-  onBuffering: PropTypes.func,
-  /**
-   * Sent when playback has been started or resumed.
-   */
-  onPlaying: PropTypes.func,
-  /**
-   * Sent when playback has been paused.
-   */
-  onPause: PropTypes.func,
-  /**
-   * Sent when playback has stopped.
-   */
-  onEnd: PropTypes.func,
-  onStateChange: PropTypes.func,
-  onPlaybackRateChange: PropTypes.func,
-  onPlaybackQualityChange: PropTypes.func
-
-  /* eslint-enable react/no-unused-prop-types */
-} : {};
-
 exports['default'] = YouTube;

package.json

 {
   "name": "@u-wave/react-youtube",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "YouTube player component for React.",
@@ -11,3 +11,3 @@ "main": "lib/rollup.js",
     "lint": "eslint --cache --fix .",
-    "test": "npm run lint && cross-env BABEL_ENV=test mocha",
+    "test": "npm run lint && cross-env NODE_ENV=test mocha",
     "docs": "node tools/generate-docs.js > generated-docs.md",
@@ -38,34 +38,31 @@ "example": "npm install && cd example && npm install"
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
+    "react": "^0.14.0 || >= 15.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^7.2.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.23.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-register": "^6.26.0",
-    "cross-env": "^5.0.5",
+    "@babel/core": "^7.0.0-beta.31",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0-beta.31",
+    "@babel/preset-env": "^7.0.0-beta.31",
+    "@babel/preset-react": "^7.0.0-beta.31",
+    "@babel/register": "^7.0.0-beta.31",
+    "babel-eslint": "^8.0.2",
+    "cross-env": "^5.1.1",
     "doctrine": "^2.0.0",
-    "eslint": "^4.7.2",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint": "^4.10.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
     "expect": "^1.20.2",
     "global": "^4.3.1",
-    "mocha": "^3.5.3",
+    "mocha": "^4.0.1",
     "proxyquire": "^1.7.11",
-    "react": "^16.0.0",
-    "react-docgen": "^2.18.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0",
+    "react": "^16.1.0",
+    "react-docgen": "^2.20.0",
+    "react-dom": "^16.1.0",
+    "react-test-renderer": "^16.1.0",
     "regenerator-runtime": "^0.11.0",
-    "rollup": "^0.50.0",
-    "rollup-plugin-babel": "^3.0.2",
+    "rollup": "^0.51.2",
+    "rollup-plugin-babel": "^4.0.0-beta.0",
     "through2": "^2.0.3"
   }
 }

rollup.config.js

@@ -5,9 +5,7 @@ import babel from 'rollup-plugin-babel';
 
-process.env.BABEL_ENV = 'rollup';
-
 export default {
-  entry: './src/index.js',
-  targets: [
-    { format: 'cjs', dest: meta.main, exports: 'named' },
-    { format: 'es', dest: meta.module },
+  input: './src/index.js',
+  output: [
+    { format: 'cjs', file: meta.main, exports: 'named' },
+    { format: 'es', file: meta.module },
   ],
@@ -14,0 +12,0 @@

src/index.js

@@ -7,197 +7,10 @@ import React from 'react';
 class YouTube extends React.Component {
-  static propTypes = {
-    /**
-     * An 11-character string representing a YouTube video ID..
-     */
-    video: PropTypes.string,
-    /**
-     * DOM ID for the player element.
-     */
-    id: PropTypes.string,
-    /**
-     * CSS className for the player element.
-     */
-    className: PropTypes.string,
-    /**
-     * Width of the player element.
-     */
-    width: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
-    /**
-     * Height of the player element.
-     */
-    height: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ]),
+  constructor(props) {
+    super(props);
 
-    /**
-     * Pause the video.
-     */
-    paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
+    this.onPlayerReady = this.onPlayerReady.bind(this);
+    this.onPlayerStateChange = this.onPlayerStateChange.bind(this);
+    this.refContainer = this.refContainer.bind(this);
+  }
 
-    // Player parameters
-
-    /**
-     * Whether the video should start playing automatically.
-     *
-     * https://developers.google.com/youtube/player_parameters#autoplay
-     */
-    autoplay: PropTypes.bool,
-    /**
-     * Whether to show captions below the video.
-     *
-     * https://developers.google.com/youtube/player_parameters#cc_load_policy
-     */
-    showCaptions: PropTypes.bool,
-    /**
-     * Whether to show video controls.
-     *
-     * https://developers.google.com/youtube/player_parameters#controls
-     */
-    controls: PropTypes.bool,
-    /**
-     * Ignore keyboard controls.
-     *
-     * https://developers.google.com/youtube/player_parameters#disablekb
-     */
-    disableKeyboard: PropTypes.bool,
-    /**
-     * Whether to display the fullscreen button.
-     *
-     * https://developers.google.com/youtube/player_parameters#fs
-     */
-    allowFullscreen: PropTypes.bool,
-    /**
-     * The player's interface language. The parameter value is an ISO 639-1
-     * two-letter language code or a fully specified locale.
-     *
-     * https://developers.google.com/youtube/player_parameters#hl
-     */
-    lang: PropTypes.string,
-    /**
-     * Whether to show annotations on top of the video.
-     *
-     * https://developers.google.com/youtube/player_parameters#iv_load_policy
-     */
-    annotations: PropTypes.bool,
-    /**
-     * Time in seconds at which to start playing the video.
-     *
-     * https://developers.google.com/youtube/player_parameters#start
-     */
-    startSeconds: PropTypes.number,
-    /**
-     * Time in seconds at which to stop playing the video.
-     *
-     * https://developers.google.com/youtube/player_parameters#end
-     */
-    endSeconds: PropTypes.number,
-    /**
-     * Remove most YouTube logos from the player.
-     *
-     * https://developers.google.com/youtube/player_parameters#modestbranding
-     */
-    modestBranding: PropTypes.bool,
-    /**
-     * Whether to play the video inline on iOS, instead of fullscreen.
-     *
-     * https://developers.google.com/youtube/player_parameters#playsinline
-     */
-    playsInline: PropTypes.bool,
-    /**
-     * Whether to show related videos after the video is over.
-     *
-     * https://developers.google.com/youtube/player_parameters#rel
-     */
-    showRelatedVideos: PropTypes.bool,
-    /**
-     * Whether to show video information (uploader, title, etc) before the video
-     * starts.
-     *
-     * https://developers.google.com/youtube/player_parameters#showinfo
-     */
-    showInfo: PropTypes.bool,
-
-    /**
-     * The playback volume, **as a number between 0 and 1**.
-     */
-    volume: PropTypes.number,
-
-    /**
-     * Whether the video's sound should be muted.
-     */
-    muted: PropTypes.bool,
-
-    /**
-     * The suggested playback quality.
-     *
-     * https://developers.google.com/youtube/iframe_api_reference#Playback_quality
-     */
-    suggestedQuality: PropTypes.string,
-    /**
-     * Playback speed.
-     *
-     * https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
-     */
-    playbackRate: PropTypes.number,
-
-    // Events
-    /* eslint-disable react/no-unused-prop-types */
-
-    /**
-     * Sent when the YouTube player API has loaded.
-     */
-    onReady: PropTypes.func,
-    /**
-     * Sent when the player triggers an error.
-     */
-    onError: PropTypes.func,
-    /**
-     * Sent when the video is cued and ready to play.
-     */
-    onCued: PropTypes.func,
-    /**
-     * Sent when the video is buffering.
-     */
-    onBuffering: PropTypes.func,
-    /**
-     * Sent when playback has been started or resumed.
-     */
-    onPlaying: PropTypes.func,
-    /**
-     * Sent when playback has been paused.
-     */
-    onPause: PropTypes.func,
-    /**
-     * Sent when playback has stopped.
-     */
-    onEnd: PropTypes.func,
-    onStateChange: PropTypes.func,
-    onPlaybackRateChange: PropTypes.func,
-    onPlaybackQualityChange: PropTypes.func,
-
-    /* eslint-enable react/no-unused-prop-types */
-  };
-
-  static defaultProps = {
-    autoplay: false,
-    showCaptions: false,
-    controls: true,
-    disableKeyboard: false,
-    allowFullscreen: true,
-    annotations: true,
-    modestBranding: false,
-    playsInline: false,
-    showRelatedVideos: true,
-    showInfo: true,
-    onCued: () => {},
-    onBuffering: () => {},
-    onPlaying: () => {},
-    onPause: () => {},
-    onEnd: () => {},
-  };
-
   componentDidMount() {
@@ -208,4 +21,3 @@ this.createPlayer();
   componentDidUpdate(prevProps) {
-    const changes = Object.keys(this.props).filter(
-      name => this.props[name] !== prevProps[name]);
+    const changes = Object.keys(this.props).filter(name => this.props[name] !== prevProps[name]);
 
@@ -221,3 +33,3 @@ this.updateProps(changes);
 
-  onPlayerReady = (event) => {
+  onPlayerReady(event) {
     if (typeof this.props.volume !== 'undefined') {
@@ -243,3 +55,3 @@ event.target.setVolume(this.props.volume * 100);
 
-  onPlayerStateChange = (event) => {
+  onPlayerStateChange(event) {
     const State = YT.PlayerState; // eslint-disable-line no-undef
@@ -377,4 +189,3 @@ switch (event.data) {
         });
-      }),
-    );
+      }));
 
@@ -389,3 +200,3 @@ if (typeof this.props.volume === 'number') {
    */
-  refContainer = (container) => {
+  refContainer(container) {
     this.container = container;
@@ -405,2 +216,199 @@ }
 
+if (process.env.NODE_ENV !== 'production') {
+  YouTube.propTypes = {
+    /**
+     * An 11-character string representing a YouTube video ID..
+     */
+    video: PropTypes.string,
+    /**
+     * DOM ID for the player element.
+     */
+    id: PropTypes.string,
+    /**
+     * CSS className for the player element.
+     */
+    className: PropTypes.string,
+    /**
+     * Width of the player element.
+     */
+    width: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+    /**
+     * Height of the player element.
+     */
+    height: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+
+    /**
+     * Pause the video.
+     */
+    paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
+
+    // Player parameters
+
+    /**
+     * Whether the video should start playing automatically.
+     *
+     * https://developers.google.com/youtube/player_parameters#autoplay
+     */
+    autoplay: PropTypes.bool,
+    /**
+     * Whether to show captions below the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#cc_load_policy
+     */
+    showCaptions: PropTypes.bool,
+    /**
+     * Whether to show video controls.
+     *
+     * https://developers.google.com/youtube/player_parameters#controls
+     */
+    controls: PropTypes.bool,
+    /**
+     * Ignore keyboard controls.
+     *
+     * https://developers.google.com/youtube/player_parameters#disablekb
+     */
+    disableKeyboard: PropTypes.bool,
+    /**
+     * Whether to display the fullscreen button.
+     *
+     * https://developers.google.com/youtube/player_parameters#fs
+     */
+    allowFullscreen: PropTypes.bool,
+    /**
+     * The player's interface language. The parameter value is an ISO 639-1
+     * two-letter language code or a fully specified locale.
+     *
+     * https://developers.google.com/youtube/player_parameters#hl
+     */
+    lang: PropTypes.string,
+    /**
+     * Whether to show annotations on top of the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#iv_load_policy
+     */
+    annotations: PropTypes.bool,
+    /**
+     * Time in seconds at which to start playing the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#start
+     */
+    startSeconds: PropTypes.number,
+    /**
+     * Time in seconds at which to stop playing the video.
+     *
+     * https://developers.google.com/youtube/player_parameters#end
+     */
+    endSeconds: PropTypes.number,
+    /**
+     * Remove most YouTube logos from the player.
+     *
+     * https://developers.google.com/youtube/player_parameters#modestbranding
+     */
+    modestBranding: PropTypes.bool,
+    /**
+     * Whether to play the video inline on iOS, instead of fullscreen.
+     *
+     * https://developers.google.com/youtube/player_parameters#playsinline
+     */
+    playsInline: PropTypes.bool,
+    /**
+     * Whether to show related videos after the video is over.
+     *
+     * https://developers.google.com/youtube/player_parameters#rel
+     */
+    showRelatedVideos: PropTypes.bool,
+    /**
+     * Whether to show video information (uploader, title, etc) before the video
+     * starts.
+     *
+     * https://developers.google.com/youtube/player_parameters#showinfo
+     */
+    showInfo: PropTypes.bool,
+
+    /**
+     * The playback volume, **as a number between 0 and 1**.
+     */
+    volume: PropTypes.number,
+
+    /**
+     * Whether the video's sound should be muted.
+     */
+    muted: PropTypes.bool,
+
+    /**
+     * The suggested playback quality.
+     *
+     * https://developers.google.com/youtube/iframe_api_reference#Playback_quality
+     */
+    suggestedQuality: PropTypes.string,
+    /**
+     * Playback speed.
+     *
+     * https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
+     */
+    playbackRate: PropTypes.number,
+
+    // Events
+    /* eslint-disable react/no-unused-prop-types */
+
+    /**
+     * Sent when the YouTube player API has loaded.
+     */
+    onReady: PropTypes.func,
+    /**
+     * Sent when the player triggers an error.
+     */
+    onError: PropTypes.func,
+    /**
+     * Sent when the video is cued and ready to play.
+     */
+    onCued: PropTypes.func,
+    /**
+     * Sent when the video is buffering.
+     */
+    onBuffering: PropTypes.func,
+    /**
+     * Sent when playback has been started or resumed.
+     */
+    onPlaying: PropTypes.func,
+    /**
+     * Sent when playback has been paused.
+     */
+    onPause: PropTypes.func,
+    /**
+     * Sent when playback has stopped.
+     */
+    onEnd: PropTypes.func,
+    onStateChange: PropTypes.func,
+    onPlaybackRateChange: PropTypes.func,
+    onPlaybackQualityChange: PropTypes.func,
+
+    /* eslint-enable react/no-unused-prop-types */
+  };
+}
+
+YouTube.defaultProps = {
+  autoplay: false,
+  showCaptions: false,
+  controls: true,
+  disableKeyboard: false,
+  allowFullscreen: true,
+  annotations: true,
+  modestBranding: false,
+  playsInline: false,
+  showRelatedVideos: true,
+  showInfo: true,
+  onCued: () => {},
+  onBuffering: () => {},
+  onPlaying: () => {},
+  onPause: () => {},
+  onEnd: () => {},
+};
+
 export default YouTube;

src/loadSdk.js

@@ -17,6 +17,7 @@ /* global window */
         reject(err);
+      } else {
+        window.YT.ready(() => {
+          resolve(window.YT);
+        });
       }
-      window.YT.ready(() => {
-        resolve(window.YT);
-      });
     });
@@ -23,0 +24,0 @@ });

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

25

decreased by-10.71%

Worsened metrics

Total package byte prevSize

56825

decreased by-7.94%

Number of package files

20

decreased by-4.76%

Lines of code

1591

decreased by-9.6%

No dependency changes