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

Comparing version 0.7.0 to 0.7.1

CHANGELOG.md

@@ -7,2 +7,7 @@ # @u-wave/react-youtube change log
 
+## 0.7.1 - 2020-04-01
+ * Set `sideEffects: false` in package.json.
+ * Add `style` pass-through property to set CSS properties on the container element. (@Authchirion in #90)
+ * Document that the `showInfo` prop is deprecated.
+
 ## 0.7.0 - 2019-06-12
@@ -9,0 +14,0 @@ * Add typescript definitions.

dist/react-youtube.es.js

@@ -54,5 +54,3 @@ import { createElement, Component } from 'react';
 
-var YouTube =
-/*#__PURE__*/
-function (_React$Component) {
+var YouTube = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(YouTube, _React$Component);
@@ -152,4 +150,2 @@
 
-      default: // Nothing
-
     }
@@ -271,4 +267,2 @@ }
 
-          default: // Nothing
-
         }
@@ -323,6 +317,8 @@ });
         id = _this$props3.id,
-        className = _this$props3.className;
-    return createElement("div", {
+        className = _this$props3.className,
+        style = _this$props3.style;
+    return /*#__PURE__*/createElement("div", {
       id: id,
       className: className,
+      style: style,
       ref: this.refContainer
@@ -353,2 +349,8 @@ });
     /**
+     * Inline style for container element.
+     */
+    style: PropTypes.object,
+    // eslint-disable-line react/forbid-prop-types
+
+    /**
      * Width of the player element.
@@ -459,2 +461,4 @@ */
      *
+     * **This parameter has been deprecated and has no effect.**
+     *
      * https://developers.google.com/youtube/player_parameters#showinfo
@@ -461,0 +465,0 @@ */

dist/react-youtube.js

@@ -60,5 +60,3 @@ 'use strict';
 
-var YouTube =
-/*#__PURE__*/
-function (_React$Component) {
+var YouTube = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(YouTube, _React$Component);
@@ -158,4 +156,2 @@
 
-      default: // Nothing
-
     }
@@ -277,4 +273,2 @@ }
 
-          default: // Nothing
-
         }
@@ -329,6 +323,8 @@ });
         id = _this$props3.id,
-        className = _this$props3.className;
-    return React.createElement("div", {
+        className = _this$props3.className,
+        style = _this$props3.style;
+    return /*#__PURE__*/React.createElement("div", {
       id: id,
       className: className,
+      style: style,
       ref: this.refContainer
@@ -359,2 +355,8 @@ });
     /**
+     * Inline style for container element.
+     */
+    style: PropTypes.object,
+    // eslint-disable-line react/forbid-prop-types
+
+    /**
      * Width of the player element.
@@ -465,2 +467,4 @@ */
      *
+     * **This parameter has been deprecated and has no effect.**
+     *
      * https://developers.google.com/youtube/player_parameters#showinfo
@@ -467,0 +471,0 @@ */

index.d.ts

@@ -18,2 +18,6 @@ /// <reference types="youtube" />
   /**
+  * Inline style for container element.
+  */
+  style?: React.CSSProperties;
+  /**
    * Width of the player element.
@@ -20,0 +24,0 @@ */

index.test-d.ts

@@ -10,3 +10,3 @@ import * as React from 'react'
   let onCued = (event: YT.OnStateChangeEvent) => {
-    event.data === 5
+    if (event.data === 5) {}
   }
@@ -13,0 +13,0 @@ React.createElement(YouTube, { onCued })

package.json

 {
-  "name": "@u-wave/react-youtube",
-  "version": "0.7.0",
-  "description": "YouTube player component for React.",
-  "main": "dist/react-youtube.js",
-  "module": "dist/react-youtube.es.js",
-  "scripts": {
-    "prepare": "npm run build",
-    "build": "rollup -c",
-    "test:lint": "eslint --cache --fix .",
-    "test:types": "tsd",
-    "test:mocha": "cross-env NODE_ENV=test mocha",
-    "test": "npm run test:types && npm run test:mocha && npm run test:lint",
-    "docs": "node tools/generate-docs.js > generated-docs.md",
-    "example": "npm install && cd example && npm install"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/u-wave/react-youtube.git"
-  },
-  "keywords": [
-    "youtube",
-    "react",
-    "player",
-    "react-component",
-    "video"
-  ],
-  "author": "Renée Kooi <[e-mail]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/u-wave/react-youtube/issues"
-  },
-  "homepage": "https://github.com/u-wave/react-youtube#readme",
-  "dependencies": {
-    "@types/react": "^0.14.0 || ^15.0.0 || ^16.0.0",
-    "@types/youtube": "0.0.38",
-    "load-script2": "^1.0.1",
-    "prop-types": "^15.6.1"
-  },
-  "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
-  },
-  "devDependencies": {
-    "@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": "^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",
-    "min-react-env": "^1.0.0",
-    "mocha": "^6.0.0",
-    "proxyquire": "^2.0.1",
-    "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"
-  },
-  "greenkeeper": {
-    "ignore": [
-      "expect"
-    ]
-  }
+	"name": "@u-wave/react-youtube",
+	"description": "YouTube player component for React.",
+	"version": "0.7.1",
+	"author": "Renée Kooi <[e-mail]>",
+	"bugs": {
+		"url": "https://github.com/u-wave/react-youtube/issues"
+	},
+	"dependencies": {
+		"@types/react": "^16.9.17",
+		"@types/youtube": "0.0.38",
+		"load-script2": "^1.0.1",
+		"prop-types": "^15.7.2"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.8.3",
+		"@babel/plugin-transform-modules-commonjs": "^7.8.3",
+		"@babel/preset-env": "^7.8.3",
+		"@babel/preset-react": "^7.8.3",
+		"@babel/register": "^7.8.3",
+		"cross-env": "^7.0.0",
+		"doctrine": "^3.0.0",
+		"eslint": "^6.8.0",
+		"eslint-config-airbnb": "^18.0.1",
+		"eslint-plugin-import": "^2.20.0",
+		"eslint-plugin-jsx-a11y": "^6.2.3",
+		"eslint-plugin-react": "^7.17.0",
+		"eslint-plugin-react-hooks": "^2.3.0",
+		"expect": "^1.20.2",
+		"min-react-env": "^1.0.1",
+		"mocha": "^7.0.0",
+		"proxyquire": "^2.1.3",
+		"react": "^16.12.0",
+		"react-docgen": "^5.1.0",
+		"react-dom": "^16.12.0",
+		"react-test-renderer": "^16.12.0",
+		"rollup": "^2.0.2",
+		"rollup-plugin-babel": "^4.3.3",
+		"tsd": "^0.11.0"
+	},
+	"homepage": "https://github.com/u-wave/react-youtube#readme",
+	"keywords": [
+		"player",
+		"react",
+		"react-component",
+		"video",
+		"youtube"
+	],
+	"license": "MIT",
+	"main": "dist/react-youtube.js",
+	"module": "dist/react-youtube.es.js",
+	"peerDependencies": {
+		"react": "^0.14.0 || ^15.0.0 || ^16.0.0"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/u-wave/react-youtube.git"
+	},
+	"scripts": {
+		"build": "rollup -c",
+		"docs": "node tools/generate-docs.js > generated-docs.md",
+		"example": "npm install && cd example && npm install",
+		"prepare": "npm run build",
+		"test": "npm run test:types && npm run test:mocha && npm run test:lint",
+		"test:lint": "eslint --cache --fix .",
+		"test:mocha": "cross-env NODE_ENV=test mocha",
+		"test:types": "tsd"
+	},
+	"sideEffects": false
 }

README.md

@@ -33,4 +33,4 @@ # @u-wave/react-youtube
 | className | string |  | CSS className for the player element. |
-| width | union |  | Width of the player element. |
-| height | union |  | Height of the player element. |
+| width | number, string |  | Width of the player element. |
+| height | number, string |  | Height of the player element. |
 | paused | bool |  | Pause the video. |
@@ -49,3 +49,3 @@ | autoplay | bool | false | Whether the video should start playing automatically.<br>https://developers.google.com/youtube/player_parameters#autoplay |
 | showRelatedVideos | bool | true | Whether to show related videos after the video is over.<br>https://developers.google.com/youtube/player_parameters#rel |
-| showInfo | bool | true | Whether to show video information (uploader, title, etc) before the video starts.<br>https://developers.google.com/youtube/player_parameters#showinfo |
+| showInfo | bool | true | Whether to show video information (uploader, title, etc) before the video starts.<br>**This parameter has been deprecated and has no effect.**<br>https://developers.google.com/youtube/player_parameters#showinfo |
 | volume | number |  | The playback volume, **as a number between 0 and 1**. |
@@ -70,6 +70,7 @@ | muted | bool |  | Whether the video's sound should be muted. |
  - [@u-wave/react-vimeo][] - A Vimeo component with a similar declarative API.
+ - [react-youtube][] - A widely-used YouTube component. Its API matches the YouTube iframe API more closely, and it doesn't support prop-based volume/quality/playback changes.
 
 ## License
 
-[MIT]
+[MIT][]
 
@@ -84,1 +85,2 @@ [Install]: #install
 [@u-wave/react-vimeo]: https://github.com/u-wave/react-vimeo
+[react-youtube]: https://github.com/tjallingt/react-youtube

src/index.js

@@ -21,3 +21,3 @@ import * as React from 'react';
     // eslint-disable-next-line react/destructuring-assignment
-    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]);
 
@@ -198,3 +198,3 @@ this.updateProps(changes);
 
-    this.player = loadSdk().then(YT => new Promise((resolve) => {
+    this.player = loadSdk().then((YT) => new Promise((resolve) => {
       this.resolvePlayer = resolve;
@@ -231,3 +231,3 @@
   render() {
-    const { id, className } = this.props;
+    const { id, className, style } = this.props;
 
@@ -238,2 +238,3 @@ return (
         className={className}
+        style={style}
         ref={this.refContainer}
@@ -260,2 +261,6 @@ />
     /**
+     * Inline style for container element.
+     */
+    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    /**
      * Width of the player element.
@@ -359,2 +364,4 @@ */
      *
+     * **This parameter has been deprecated and has no effect.**
+     *
      * https://developers.google.com/youtube/player_parameters#showinfo
@@ -361,0 +368,0 @@ */

test/util/render.js

@@ -43,3 +43,3 @@ /**
   function rerender(newProps) {
-    return container.then(wrapper => new Promise((resolve) => {
+    return container.then((wrapper) => new Promise((resolve) => {
       wrapper.setState({ props: newProps }, () => {
@@ -46,0 +46,0 @@ Promise.resolve().then(resolve);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67641

increased by2.53%

Number of package files

24

increased by4.35%

Lines of code

1896

increased by1.61%

Number of lines in readme file

83

increased by2.47%

Worsened metrics

Dev dependency count

24

increased by4.35%

Dependency changes

• Updated@types/react@^16.9.17

• Updatedprop-types@^15.7.2