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

Comparing version 0.5.0 to 0.6.0

.eslintrc.json

@@ -6,4 +6,11 @@ {
     "react/require-default-props": "off",
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "jsx-a11y/label-has-for": ["error", {
+      "components": [],
+      "required": {
+        "some": ["nesting", "id"]
+      },
+      "allowChildren": false
+    }]
   }
 }

CHANGELOG.md

@@ -7,4 +7,8 @@ # @u-wave/react-youtube change log
 
+## 0.6.0 - 2018-06-11
+ * Cue instead of load video when autoplay is disabled, see [#24](https://github.com/u-wave/react-youtube/issues/24).
+ * Fix event passthrough, see [#26](https://github.com/u-wave/react-youtube/issues/26).
+
 ## 0.5.0 - 2018-05-24
 * Update demo URL.
 * Change the build paths from `lib/rollup.js` to `dist/react-youtube.js`, for consistency with other modules under the `u-wave` org.

dist/react-youtube.es.js

@@ -6,3 +6,4 @@ import loadScript from 'load-script2';
 function _inheritsLoose(subClass, superClass) {
-  subClass.prototype.__proto__ = superClass && superClass.prototype;
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
   subClass.__proto__ = superClass;
@@ -19,10 +20,3 @@ }
 
-var eventNames = {
-  ready: 'onReady',
-  stateChange: 'onStateChange',
-  playbackQualityChange: 'onPlaybackQualityChange',
-  playbackRateChange: 'onPlaybackRateChange',
-  error: 'onError',
-  apiChange: 'onApiChange'
-};
+var eventNames = ['onReady', 'onStateChange', 'onPlaybackQualityChange', 'onPlaybackRateChange', 'onError', 'onApiChange'];
 
@@ -65,2 +59,4 @@ /* global window */
 function (_React$Component) {
+  _inheritsLoose(YouTube, _React$Component);
+
   function YouTube(props) {
@@ -239,7 +235,13 @@ var _this;
             } else {
-              player.loadVideoById({
+              var opts = {
                 videoId: value,
                 startSeconds: _this3.props.startSeconds || 0,
                 endSeconds: _this3.props.endSeconds
-              });
+              };
+
+              if (_this3.props.autoplay) {
+                player.loadVideoById(opts);
+              } else {
+                player.cueVideoById(opts);
+              }
             }
@@ -270,7 +272,6 @@
         _this4.playerInstance = player;
-        Object.keys(eventNames).forEach(function (ytName) {
-          var reactName = eventNames[ytName];
-          player.addEventListener(ytName, function (event) {
-            if (_this4.props[reactName]) {
-              _this4.props[reactName](event);
+        eventNames.forEach(function (name) {
+          player.addEventListener(name, function (event) {
+            if (_this4.props[name]) {
+              _this4.props[name](event);
             }
@@ -303,4 +304,2 @@ });
 
-  _inheritsLoose(YouTube, _React$Component);
-
   return YouTube;
@@ -307,0 +306,0 @@ }(React.Component);

dist/react-youtube.js

@@ -12,3 +12,4 @@ 'use strict';
 function _inheritsLoose(subClass, superClass) {
-  subClass.prototype.__proto__ = superClass && superClass.prototype;
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
   subClass.__proto__ = superClass;
@@ -25,10 +26,3 @@ }
 
-var eventNames = {
-  ready: 'onReady',
-  stateChange: 'onStateChange',
-  playbackQualityChange: 'onPlaybackQualityChange',
-  playbackRateChange: 'onPlaybackRateChange',
-  error: 'onError',
-  apiChange: 'onApiChange'
-};
+var eventNames = ['onReady', 'onStateChange', 'onPlaybackQualityChange', 'onPlaybackRateChange', 'onError', 'onApiChange'];
 
@@ -71,2 +65,4 @@ /* global window */
 function (_React$Component) {
+  _inheritsLoose(YouTube, _React$Component);
+
   function YouTube(props) {
@@ -245,7 +241,13 @@ var _this;
             } else {
-              player.loadVideoById({
+              var opts = {
                 videoId: value,
                 startSeconds: _this3.props.startSeconds || 0,
                 endSeconds: _this3.props.endSeconds
-              });
+              };
+
+              if (_this3.props.autoplay) {
+                player.loadVideoById(opts);
+              } else {
+                player.cueVideoById(opts);
+              }
             }
@@ -276,7 +278,6 @@
         _this4.playerInstance = player;
-        Object.keys(eventNames).forEach(function (ytName) {
-          var reactName = eventNames[ytName];
-          player.addEventListener(ytName, function (event) {
-            if (_this4.props[reactName]) {
-              _this4.props[reactName](event);
+        eventNames.forEach(function (name) {
+          player.addEventListener(name, function (event) {
+            if (_this4.props[name]) {
+              _this4.props[name](event);
             }
@@ -309,4 +310,2 @@ });
 
-  _inheritsLoose(YouTube, _React$Component);
-
   return YouTube;
@@ -313,0 +312,0 @@ }(React.Component);

package.json

 {
   "name": "@u-wave/react-youtube",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "YouTube player component for React.",
@@ -40,7 +40,7 @@ "main": "dist/react-youtube.js",
   "devDependencies": {
-    "@babel/core": "7.0.0-beta.47",
-    "@babel/plugin-transform-modules-commonjs": "7.0.0-beta.47",
-    "@babel/preset-env": "7.0.0-beta.47",
-    "@babel/preset-react": "7.0.0-beta.47",
-    "@babel/register": "7.0.0-beta.47",
+    "@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",
     "cross-env": "^5.1.6",
@@ -61,3 +61,3 @@ "doctrine": "^2.0.0",
     "react-test-renderer": "^16.4.0",
-    "rollup": "^0.59.2",
+    "rollup": "^0.60.0",
     "rollup-plugin-babel": "^4.0.0-beta.4"
@@ -64,0 +64,0 @@ },

src/eventNames.js

@@ -1,8 +0,8 @@
-export default {
-  ready: 'onReady',
-  stateChange: 'onStateChange',
-  playbackQualityChange: 'onPlaybackQualityChange',
-  playbackRateChange: 'onPlaybackRateChange',
-  error: 'onError',
-  apiChange: 'onApiChange',
-};
+export default [
+  'onReady',
+  'onStateChange',
+  'onPlaybackQualityChange',
+  'onPlaybackRateChange',
+  'onError',
+  'onApiChange',
+];

src/index.js

@@ -150,7 +150,12 @@ import React from 'react';
             } else {
-              player.loadVideoById({
+              const opts = {
                 videoId: value,
                 startSeconds: this.props.startSeconds || 0,
                 endSeconds: this.props.endSeconds,
-              });
+              };
+              if (this.props.autoplay) {
+                player.loadVideoById(opts);
+              } else {
+                player.cueVideoById(opts);
+              }
             }
@@ -178,7 +183,6 @@ break;
 
-        Object.keys(eventNames).forEach((ytName) => {
-          const reactName = eventNames[ytName];
-          player.addEventListener(ytName, (event) => {
-            if (this.props[reactName]) {
-              this.props[reactName](event);
+        eventNames.forEach((name) => {
+          player.addEventListener(name, (event) => {
+            if (this.props[name]) {
+              this.props[name](event);
             }
@@ -185,0 +189,0 @@ });

test/test.js

@@ -40,4 +40,4 @@ import React from 'react';
 
-    expect(playerMock.loadVideoById).toHaveBeenCalled();
-    expect(playerMock.loadVideoById.calls[0].arguments[0]).toMatch({
+    expect(playerMock.cueVideoById).toHaveBeenCalled();
+    expect(playerMock.cueVideoById.calls[0].arguments[0]).toMatch({
       videoId: 'x3pn5cb',
@@ -58,3 +58,3 @@ });
     await rerender({ video: 'ld8ugY47cps' });
-    expect(playerMock.loadVideoById).toHaveBeenCalled();
+    expect(playerMock.cueVideoById).toHaveBeenCalled();
   });
@@ -159,4 +159,4 @@
 
-    expect(playerMock.loadVideoById).toHaveBeenCalled();
-    expect(playerMock.loadVideoById.calls[0].arguments[0]).toMatch({
+    expect(playerMock.cueVideoById).toHaveBeenCalled();
+    expect(playerMock.cueVideoById.calls[0].arguments[0]).toMatch({
       videoId: 'hlk7o5T56iw',
@@ -167,2 +167,22 @@ startSeconds: 40,
   });
+
+  it('should only call loadVideoById when autoplay is enabled', async () => {
+    const { playerMock, rerender } = await render({
+      video: 'x2y5kyu',
+    });
+    await rerender({ video: 'x3pn5cb' });
+
+    expect(playerMock.cueVideoById).toHaveBeenCalled();
+    expect(playerMock.loadVideoById).toNotHaveBeenCalled();
+
+    playerMock.cueVideoById.reset();
+
+    await rerender({
+      autoplay: true,
+      video: 'r6534246435',
+    });
+
+    expect(playerMock.cueVideoById).toNotHaveBeenCalled();
+    expect(playerMock.loadVideoById).toHaveBeenCalled();
+  });
 });

test/util/createYouTube.js

@@ -36,2 +36,3 @@ import { createSpy } from 'expect';
     loadVideoById: createSpy(),
+    cueVideoById: createSpy(),
     playVideo: createSpy().andCall(() => {
@@ -38,0 +39,0 @@ isPaused = false;

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57195

increased by1.3%

Lines of code

1592

increased by1.47%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes