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

Comparing version 0.6.0 to 0.7.0-alpha.0

dist/react-youtube.es.js

@@ -0,4 +1,4 @@
+import { createElement, Component } from 'react';
+import PropTypes from 'prop-types';
 import loadScript from 'load-script2';
-import React from 'react';
-import PropTypes from 'prop-types';
 
@@ -63,5 +63,5 @@ function _inheritsLoose(subClass, superClass) {
     _this = _React$Component.call(this, props) || this;
-    _this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.refContainer = _this.refContainer.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_this));
+    _this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_this));
+    _this.refContainer = _this.refContainer.bind(_assertThisInitialized(_this));
     return _this;
@@ -79,2 +79,3 @@ }
 
+    // eslint-disable-next-line react/destructuring-assignment
     var changes = Object.keys(this.props).filter(function (name) {
@@ -93,8 +94,14 @@ return _this2.props[name] !== prevProps[name];
   _proto.onPlayerReady = function onPlayerReady(event) {
-    if (typeof this.props.volume !== 'undefined') {
-      event.target.setVolume(this.props.volume * 100);
+    var _this$props = this.props,
+        volume = _this$props.volume,
+        muted = _this$props.muted,
+        suggestedQuality = _this$props.suggestedQuality,
+        playbackRate = _this$props.playbackRate;
+
+    if (typeof volume !== 'undefined') {
+      event.target.setVolume(volume * 100);
     }
 
-    if (typeof this.props.muted !== 'undefined') {
-      if (this.props.muted) {
+    if (typeof muted !== 'undefined') {
+      if (muted) {
         event.target.mute();
@@ -106,8 +113,8 @@ } else {
 
-    if (typeof this.props.suggestedQuality !== 'undefined') {
-      event.target.setPlaybackQuality(this.props.suggestedQuality);
+    if (typeof suggestedQuality !== 'undefined') {
+      event.target.setPlaybackQuality(suggestedQuality);
     }
 
-    if (typeof this.props.playbackRate !== 'undefined') {
-      event.target.setPlaybackRate(this.props.playbackRate);
+    if (typeof playbackRate !== 'undefined') {
+      event.target.setPlaybackRate(playbackRate);
     }
@@ -119,2 +126,8 @@
   _proto.onPlayerStateChange = function onPlayerStateChange(event) {
+    var _this$props2 = this.props,
+        onCued = _this$props2.onCued,
+        onBuffering = _this$props2.onBuffering,
+        onPause = _this$props2.onPause,
+        onPlaying = _this$props2.onPlaying,
+        onEnd = _this$props2.onEnd;
     var State = YT.PlayerState; // eslint-disable-line no-undef
@@ -124,19 +137,19 @@
       case State.CUED:
-        this.props.onCued(event);
+        onCued(event);
         break;
 
       case State.BUFFERING:
-        this.props.onBuffering(event);
+        onBuffering(event);
         break;
 
       case State.PAUSED:
-        this.props.onPause(event);
+        onPause(event);
         break;
 
       case State.PLAYING:
-        this.props.onPlaying(event);
+        onPlaying(event);
         break;
 
       case State.ENDED:
-        this.props.onEnd(event);
+        onEnd(event);
         break;
@@ -147,9 +160,10 @@
     }
-  };
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.getPlayerParameters = function getPlayerParameters() {
+    /* eslint-disable react/destructuring-assignment */
     return {
@@ -170,9 +184,11 @@ autoplay: this.props.autoplay,
     };
-  };
+    /* eslint-enable react/destructuring-assignment */
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.getInitialOptions = function getInitialOptions() {
+    /* eslint-disable react/destructuring-assignment */
     return {
@@ -188,8 +204,9 @@ videoId: this.props.video,
     };
-  };
+    /* eslint-enable react/destructuring-assignment */
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.updateProps = function updateProps(propNames) {
@@ -200,2 +217,3 @@ var _this3 = this;
       propNames.forEach(function (name) {
+        // eslint-disable-next-line react/destructuring-assignment
         var value = _this3.props[name];
@@ -242,9 +260,13 @@
             } else {
+              var _this3$props = _this3.props,
+                  startSeconds = _this3$props.startSeconds,
+                  endSeconds = _this3$props.endSeconds,
+                  autoplay = _this3$props.autoplay;
               var opts = {
                 videoId: value,
-                startSeconds: _this3.props.startSeconds || 0,
-                endSeconds: _this3.props.endSeconds
+                startSeconds: startSeconds || 0,
+                endSeconds: endSeconds
               };
 
-              if (_this3.props.autoplay) {
+              if (autoplay) {
                 player.loadVideoById(opts);
@@ -263,11 +285,12 @@ } else {
     });
-  };
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.createPlayer = function createPlayer() {
     var _this4 = this;
 
+    var volume = this.props.volume;
     this.player = getSdk().then(function (YT) {
@@ -277,3 +300,3 @@ return new Promise(function (resolve) {
         var player = new YT.Player(_this4.container, _this4.getInitialOptions()); // Store the instance directly so we can destroy it sync in
-        // `componentWilLUnmount`.
+        // `componentWillUnmount`.
 
@@ -283,4 +306,7 @@ _this4.playerInstance = player;
           player.addEventListener(name, function (event) {
-            if (_this4.props[name]) {
-              _this4.props[name](event);
+            // eslint-disable-next-line react/destructuring-assignment
+            var handler = _this4.props[name];
+
+            if (handler) {
+              handler(event);
             }
@@ -292,11 +318,11 @@ });
 
-    if (typeof this.props.volume === 'number') {
+    if (typeof volume === 'number') {
       this.updateProps(['volume']);
     }
-  };
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.refContainer = function refContainer(container) {
@@ -307,5 +333,8 @@ this.container = container;
   _proto.render = function render() {
-    return React.createElement("div", {
-      id: this.props.id,
-      className: this.props.className,
+    var _this$props3 = this.props,
+        id = _this$props3.id,
+        className = _this$props3.className;
+    return createElement("div", {
+      id: id,
+      className: className,
       ref: this.refContainer
@@ -316,3 +345,3 @@ });
   return YouTube;
-}(React.Component);
+}(Component);
 
@@ -319,0 +348,0 @@ if (process.env.NODE_ENV !== 'production') {

dist/react-youtube.js

@@ -7,5 +7,5 @@ 'use strict';
 
+var React = require('react');
+var PropTypes = _interopDefault(require('prop-types'));
 var loadScript = _interopDefault(require('load-script2'));
-var React = _interopDefault(require('react'));
-var PropTypes = _interopDefault(require('prop-types'));
 
@@ -70,5 +70,5 @@ function _inheritsLoose(subClass, superClass) {
     _this = _React$Component.call(this, props) || this;
-    _this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.refContainer = _this.refContainer.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.onPlayerReady = _this.onPlayerReady.bind(_assertThisInitialized(_this));
+    _this.onPlayerStateChange = _this.onPlayerStateChange.bind(_assertThisInitialized(_this));
+    _this.refContainer = _this.refContainer.bind(_assertThisInitialized(_this));
     return _this;
@@ -86,2 +86,3 @@ }
 
+    // eslint-disable-next-line react/destructuring-assignment
     var changes = Object.keys(this.props).filter(function (name) {
@@ -100,8 +101,14 @@ return _this2.props[name] !== prevProps[name];
   _proto.onPlayerReady = function onPlayerReady(event) {
-    if (typeof this.props.volume !== 'undefined') {
-      event.target.setVolume(this.props.volume * 100);
+    var _this$props = this.props,
+        volume = _this$props.volume,
+        muted = _this$props.muted,
+        suggestedQuality = _this$props.suggestedQuality,
+        playbackRate = _this$props.playbackRate;
+
+    if (typeof volume !== 'undefined') {
+      event.target.setVolume(volume * 100);
     }
 
-    if (typeof this.props.muted !== 'undefined') {
-      if (this.props.muted) {
+    if (typeof muted !== 'undefined') {
+      if (muted) {
         event.target.mute();
@@ -113,8 +120,8 @@ } else {
 
-    if (typeof this.props.suggestedQuality !== 'undefined') {
-      event.target.setPlaybackQuality(this.props.suggestedQuality);
+    if (typeof suggestedQuality !== 'undefined') {
+      event.target.setPlaybackQuality(suggestedQuality);
     }
 
-    if (typeof this.props.playbackRate !== 'undefined') {
-      event.target.setPlaybackRate(this.props.playbackRate);
+    if (typeof playbackRate !== 'undefined') {
+      event.target.setPlaybackRate(playbackRate);
     }
@@ -126,2 +133,8 @@
   _proto.onPlayerStateChange = function onPlayerStateChange(event) {
+    var _this$props2 = this.props,
+        onCued = _this$props2.onCued,
+        onBuffering = _this$props2.onBuffering,
+        onPause = _this$props2.onPause,
+        onPlaying = _this$props2.onPlaying,
+        onEnd = _this$props2.onEnd;
     var State = YT.PlayerState; // eslint-disable-line no-undef
@@ -131,19 +144,19 @@
       case State.CUED:
-        this.props.onCued(event);
+        onCued(event);
         break;
 
       case State.BUFFERING:
-        this.props.onBuffering(event);
+        onBuffering(event);
         break;
 
       case State.PAUSED:
-        this.props.onPause(event);
+        onPause(event);
         break;
 
       case State.PLAYING:
-        this.props.onPlaying(event);
+        onPlaying(event);
         break;
 
       case State.ENDED:
-        this.props.onEnd(event);
+        onEnd(event);
         break;
@@ -154,9 +167,10 @@
     }
-  };
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.getPlayerParameters = function getPlayerParameters() {
+    /* eslint-disable react/destructuring-assignment */
     return {
@@ -177,9 +191,11 @@ autoplay: this.props.autoplay,
     };
-  };
+    /* eslint-enable react/destructuring-assignment */
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.getInitialOptions = function getInitialOptions() {
+    /* eslint-disable react/destructuring-assignment */
     return {
@@ -195,8 +211,9 @@ videoId: this.props.video,
     };
-  };
+    /* eslint-enable react/destructuring-assignment */
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.updateProps = function updateProps(propNames) {
@@ -207,2 +224,3 @@ var _this3 = this;
       propNames.forEach(function (name) {
+        // eslint-disable-next-line react/destructuring-assignment
         var value = _this3.props[name];
@@ -249,9 +267,13 @@
             } else {
+              var _this3$props = _this3.props,
+                  startSeconds = _this3$props.startSeconds,
+                  endSeconds = _this3$props.endSeconds,
+                  autoplay = _this3$props.autoplay;
               var opts = {
                 videoId: value,
-                startSeconds: _this3.props.startSeconds || 0,
-                endSeconds: _this3.props.endSeconds
+                startSeconds: startSeconds || 0,
+                endSeconds: endSeconds
               };
 
-              if (_this3.props.autoplay) {
+              if (autoplay) {
                 player.loadVideoById(opts);
@@ -270,11 +292,12 @@ } else {
     });
-  };
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.createPlayer = function createPlayer() {
     var _this4 = this;
 
+    var volume = this.props.volume;
     this.player = getSdk().then(function (YT) {
@@ -284,3 +307,3 @@ return new Promise(function (resolve) {
         var player = new YT.Player(_this4.container, _this4.getInitialOptions()); // Store the instance directly so we can destroy it sync in
-        // `componentWilLUnmount`.
+        // `componentWillUnmount`.
 
@@ -290,4 +313,7 @@ _this4.playerInstance = player;
           player.addEventListener(name, function (event) {
-            if (_this4.props[name]) {
-              _this4.props[name](event);
+            // eslint-disable-next-line react/destructuring-assignment
+            var handler = _this4.props[name];
+
+            if (handler) {
+              handler(event);
             }
@@ -299,11 +325,11 @@ });
 
-    if (typeof this.props.volume === 'number') {
+    if (typeof volume === 'number') {
       this.updateProps(['volume']);
     }
-  };
+  }
   /**
    * @private
    */
+  ;
 
-
   _proto.refContainer = function refContainer(container) {
@@ -314,5 +340,8 @@ this.container = container;
   _proto.render = function render() {
+    var _this$props3 = this.props,
+        id = _this$props3.id,
+        className = _this$props3.className;
     return React.createElement("div", {
-      id: this.props.id,
-      className: this.props.className,
+      id: id,
+      className: className,
       ref: this.refContainer
@@ -319,0 +348,0 @@ });

package.json

 {
   "name": "@u-wave/react-youtube",
-  "version": "0.6.0",
+  "version": "0.7.0-alpha.0",
   "description": "YouTube player component for React.",
@@ -8,3 +8,3 @@ "main": "dist/react-youtube.js",
   "scripts": {
-    "prepublish": "npm run build",
+    "prepare": "npm run build",
     "build": "rollup -c",
@@ -34,2 +34,4 @@ "lint": "eslint --cache --fix .",
   "dependencies": {
+    "@types/react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+    "@types/youtube": "0.0.38",
     "load-script2": "^1.0.1",
@@ -39,27 +41,28 @@ "prop-types": "^15.6.1"
   "peerDependencies": {
-    "react": "^0.14.0 || >= 15.0.0"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0-beta.49",
-    "@babel/plugin-transform-modules-commonjs": "7.0.0-beta.49",
-    "@babel/preset-env": "7.0.0-beta.49",
-    "@babel/preset-react": "7.0.0-beta.49",
-    "@babel/register": "7.0.0-beta.49",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
     "cross-env": "^5.1.6",
-    "doctrine": "^2.0.0",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.8.2",
+    "doctrine": "^3.0.0",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.0",
     "expect": "^1.20.2",
-    "global": "^4.3.1",
-    "mocha": "^5.2.0",
+    "min-react-env": "^1.0.0",
+    "mocha": "^6.0.0",
     "proxyquire": "^2.0.1",
-    "react": "^16.4.0",
-    "react-docgen": "^2.20.1",
-    "react-dom": "^16.4.0",
-    "react-test-renderer": "^16.4.0",
-    "rollup": "^0.60.0",
-    "rollup-plugin-babel": "^4.0.0-beta.4"
+    "react": "^16.5.0",
+    "react-docgen": "^4.0.0",
+    "react-dom": "^16.5.0",
+    "react-test-renderer": "^16.5.0",
+    "rollup": "^1.0.0",
+    "rollup-plugin-babel": "^4.0.2",
+    "tsd": "^0.7.3"
   },
@@ -66,0 +69,0 @@ "greenkeeper": {

src/index.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -20,2 +20,3 @@ import eventNames from './eventNames';
   componentDidUpdate(prevProps) {
+    // eslint-disable-next-line react/destructuring-assignment
     const changes = Object.keys(this.props).filter(name => this.props[name] !== prevProps[name]);
@@ -33,7 +34,14 @@
   onPlayerReady(event) {
-    if (typeof this.props.volume !== 'undefined') {
-      event.target.setVolume(this.props.volume * 100);
+    const {
+      volume,
+      muted,
+      suggestedQuality,
+      playbackRate,
+    } = this.props;
+
+    if (typeof volume !== 'undefined') {
+      event.target.setVolume(volume * 100);
     }
-    if (typeof this.props.muted !== 'undefined') {
-      if (this.props.muted) {
+    if (typeof muted !== 'undefined') {
+      if (muted) {
         event.target.mute();
@@ -44,7 +52,7 @@ } else {
     }
-    if (typeof this.props.suggestedQuality !== 'undefined') {
-      event.target.setPlaybackQuality(this.props.suggestedQuality);
+    if (typeof suggestedQuality !== 'undefined') {
+      event.target.setPlaybackQuality(suggestedQuality);
     }
-    if (typeof this.props.playbackRate !== 'undefined') {
-      event.target.setPlaybackRate(this.props.playbackRate);
+    if (typeof playbackRate !== 'undefined') {
+      event.target.setPlaybackRate(playbackRate);
     }
@@ -56,18 +64,26 @@
   onPlayerStateChange(event) {
+    const {
+      onCued,
+      onBuffering,
+      onPause,
+      onPlaying,
+      onEnd,
+    } = this.props;
+
     const State = YT.PlayerState; // eslint-disable-line no-undef
     switch (event.data) {
       case State.CUED:
-        this.props.onCued(event);
+        onCued(event);
         break;
       case State.BUFFERING:
-        this.props.onBuffering(event);
+        onBuffering(event);
         break;
       case State.PAUSED:
-        this.props.onPause(event);
+        onPause(event);
         break;
       case State.PLAYING:
-        this.props.onPlaying(event);
+        onPlaying(event);
         break;
       case State.ENDED:
-        this.props.onEnd(event);
+        onEnd(event);
         break;
@@ -83,2 +99,3 @@ default:
   getPlayerParameters() {
+    /* eslint-disable react/destructuring-assignment */
     return {
@@ -99,2 +116,3 @@ autoplay: this.props.autoplay,
     };
+    /* eslint-enable react/destructuring-assignment */
   }
@@ -106,2 +124,3 @@
   getInitialOptions() {
+    /* eslint-disable react/destructuring-assignment */
     return {
@@ -117,2 +136,3 @@ videoId: this.props.video,
     };
+    /* eslint-enable react/destructuring-assignment */
   }
@@ -126,2 +146,3 @@
       propNames.forEach((name) => {
+        // eslint-disable-next-line react/destructuring-assignment
         const value = this.props[name];
@@ -159,8 +180,9 @@ switch (name) {
             } else {
+              const { startSeconds, endSeconds, autoplay } = this.props;
               const opts = {
                 videoId: value,
-                startSeconds: this.props.startSeconds || 0,
-                endSeconds: this.props.endSeconds,
+                startSeconds: startSeconds || 0,
+                endSeconds,
               };
-              if (this.props.autoplay) {
+              if (autoplay) {
                 player.loadVideoById(opts);
@@ -183,21 +205,24 @@ } else {
   createPlayer() {
-    this.player = loadSdk().then(YT =>
-      new Promise((resolve) => {
-        this.resolvePlayer = resolve;
+    const { volume } = this.props;
 
-        const player = new YT.Player(this.container, this.getInitialOptions());
-        // Store the instance directly so we can destroy it sync in
-        // `componentWilLUnmount`.
-        this.playerInstance = player;
+    this.player = loadSdk().then(YT => new Promise((resolve) => {
+      this.resolvePlayer = resolve;
 
-        eventNames.forEach((name) => {
-          player.addEventListener(name, (event) => {
-            if (this.props[name]) {
-              this.props[name](event);
-            }
-          });
+      const player = new YT.Player(this.container, this.getInitialOptions());
+      // Store the instance directly so we can destroy it sync in
+      // `componentWillUnmount`.
+      this.playerInstance = player;
+
+      eventNames.forEach((name) => {
+        player.addEventListener(name, (event) => {
+          // eslint-disable-next-line react/destructuring-assignment
+          const handler = this.props[name];
+          if (handler) {
+            handler(event);
+          }
         });
-      }));
+      });
+    }));
 
-    if (typeof this.props.volume === 'number') {
+    if (typeof volume === 'number') {
       this.updateProps(['volume']);
@@ -215,6 +240,8 @@ }
   render() {
+    const { id, className } = this.props;
+
     return (
       <div
-        id={this.props.id}
-        className={this.props.className}
+        id={id}
+        className={className}
         ref={this.refContainer}
@@ -221,0 +248,0 @@ />

test/util/render.js

@@ -8,9 +8,8 @@ /**
 import ReactDOM from 'react-dom';
-import document from 'global/document';
+import env from 'min-react-env';
 import createYouTube from './createYouTube';
 
-global.window = { document };
-global.document = document;
+Object.assign(global, env);
 
-const render = (props) => {
+const render = (initialProps) => {
   const { YouTube, sdkMock, playerMock } = createYouTube();
@@ -24,10 +23,12 @@
 
-      this.state = ytProps;
+      this.state = { props: ytProps };
     }
 
     render() {
+      const { props } = this.state;
+
       return (
         <YouTube
           ref={(youtube) => { component = youtube; }}
-          {...this.state}
+          {...props}
         />
@@ -38,14 +39,13 @@ );
 
-  const div = document.createElement('div');
+  const div = env.document.createElement('div');
   const container = new Promise((resolve) => {
-    ReactDOM.render(<Container {...props} ref={resolve} />, div);
+    ReactDOM.render(<Container {...initialProps} ref={resolve} />, div);
   });
 
   function rerender(newProps) {
-    return container.then(wrapper =>
-      new Promise((resolve) => {
-        wrapper.setState(newProps, () => {
-          Promise.resolve().then(resolve);
-        });
-      }));
+    return container.then(wrapper => new Promise((resolve) => {
+      wrapper.setState({ props: newProps }, () => {
+        Promise.resolve().then(resolve);
+      });
+    }));
   }
@@ -52,0 +52,0 @@

No alert changes

Improved metrics

Total package byte prevSize

65831

increased by15.1%

Number of package files

23

increased by9.52%

Lines of code

1866

increased by17.21%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

23

increased by4.55%

Dependency changes

• + Added@types/react@^0.14.0 || ^15.0.0 || ^16.0.0

• + Added@types/youtube@0.0.38

• + Added@types/prop-types@15.7.12(transitive)

• + Added@types/react@16.14.60(transitive)

• + Added@types/scheduler@0.16.8(transitive)

• + Added@types/youtube@0.0.38(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedreact@16.14.0(transitive)

• - Removedreact@18.3.1(transitive)