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

Comparing version 1.0.0-alpha.0 to 1.0.0-alpha.1

CHANGELOG.md

@@ -7,2 +7,6 @@ # @u-wave/react-youtube change log
 
+## 1.0.0-alpha.1 - 2022-04-20
+ * Improve typings.
+ * Remove duplicate `defaultProps`.
+
 ## 1.0.0-alpha.0 - 2021-12-01
@@ -13,2 +17,6 @@ * Use hooks internally.
 
+## 0.7.3 - 2022-04-04
+ * Allow React 18 in peerDependency range.
+ * Test with React 16, 17, and 18 on CI.
+
 ## 0.7.2 - 2020-10-21
@@ -15,0 +23,0 @@ * Allow React 17 in peerDependency range.

dist/react-youtube.js

@@ -59,4 +59,6 @@ 'use strict';
 /**
+ * Attach an event listener to a YouTube player.
+ *
  * @template {keyof YT.Events} K
- * @param {YT.Player} player
+ * @param {YT.Player|null} player
  * @param {K} event
@@ -107,3 +109,2 @@ * @param {YT.Events[K]} handler
     showRelatedVideos = true,
-    showInfo = true,
     onReady,
@@ -129,24 +130,22 @@ onError,
   /** @type {YT.Player | null} */
-  null);
-  /** @type {YT.PlayerVars} */
-
-  const playerVars = {
-    autoplay: autoplay ? 1 : 0,
-    cc_load_policy: showCaptions ? 1 : 0,
-    controls: controls ? 1 : 0,
-    disablekb: disableKeyboard ? 1 : 0,
-    fs: allowFullscreen ? 1 : 0,
-    hl: lang,
-    iv_load_policy: annotations ? 1 : 3,
-    start: startSeconds,
-    end: endSeconds,
-    modestbranding: modestBranding ? 1 : 0,
-    playsinline: playsInline ? 1 : 0,
-    rel: showRelatedVideos ? 1 : 0,
-    showinfo: showInfo ? 1 : 0
-  }; // Stick the player initialisation in a ref so it has the most recent props values
+  null); // Stick the player initialisation in a ref so it has the most recent props values
   // when it gets instantiated.
 
   if (!player) {
-    // eslint-disable-next-line no-undef
+    /** @type {YT.PlayerVars} */
+    const playerVars = {
+      autoplay: autoplay ? 1 : 0,
+      cc_load_policy: showCaptions ? 1 : 0,
+      controls: controls ? 1 : 0,
+      disablekb: disableKeyboard ? 1 : 0,
+      fs: allowFullscreen ? 1 : 0,
+      hl: lang,
+      iv_load_policy: annotations ? 1 : 3,
+      start: startSeconds,
+      end: endSeconds,
+      modestbranding: modestBranding ? 1 : 0,
+      playsinline: playsInline ? 1 : 0,
+      rel: showRelatedVideos ? 1 : 0
+    };
+
     createPlayer.current = () => new YT.Player(container.current, {
@@ -167,3 +166,3 @@ videoId: video,
   const handlePlayerStateChange = useCallback(event => {
-    const State = YT.PlayerState; // eslint-disable-line no-undef
+    const State = YT.PlayerState;
 
@@ -217,3 +216,3 @@ switch (event.data) {
     if (player) {
-      player.getIframe().width = width;
+      player.getIframe().width = String(width);
     }
@@ -223,3 +222,3 @@ }, [player, width]);
     if (player) {
-      player.getIframe().height = height;
+      player.getIframe().height = String(height);
     }
@@ -416,12 +415,2 @@ }, [player, height]);
     /**
-     * Whether to show video information (uploader, title, etc) before the video
-     * starts.
-     *
-     * **This parameter has been deprecated and has no effect.**
-     *
-     * https://developers.google.com/youtube/player_parameters#showinfo
-     */
-    showInfo: PropTypes__default["default"].bool,
-
-    /**
      * The playback volume, **as a number between 0 and 1**.
@@ -491,21 +480,3 @@ */
 
-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: () => {}
-};
-
 exports["default"] = YouTube;
 //# sourceMappingURL=react-youtube.js.map

index.d.ts

@@ -111,6 +111,3 @@ /// <reference types="youtube" />
   /**
-   * Whether to show video information (uploader, title, etc) before the video
-   * starts.
-   *
-   * https://developers.google.com/youtube/player_parameters#showinfo
+   * @deprecated This property was removed from the YouTube API.
    */
@@ -134,3 +131,3 @@ showInfo?: boolean;
    */
-  suggestedQuality?: string;
+  suggestedQuality?: YT.SuggestedVideoQuality;
   /**
@@ -137,0 +134,0 @@ * Playback speed.

package.json

 {
   "name": "@u-wave/react-youtube",
   "description": "YouTube player component for React.",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "author": "Renée Kooi <[e-mail]>",
@@ -21,2 +21,3 @@ "bugs": {
     "@rollup/plugin-babel": "^5.0.4",
+    "@u-wave/react-youtube-example": "file:example",
     "eslint": "^8.2.0",
@@ -34,7 +35,6 @@ "eslint-config-airbnb": "^19.0.0",
     "proxyquire": "^2.1.3",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-test-renderer": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rollup": "^2.0.2",
-    "tsd": "^0.19.0"
+    "tsd": "^0.20.0"
   },
@@ -60,3 +60,3 @@ "homepage": "https://github.com/u-wave/react-youtube#readme",
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0-0"
+    "react": "^17.0.0 || ^18.0.0"
   },
@@ -70,3 +70,3 @@ "repository": {
     "docs": "prop-types-table src/index.js | md-insert README.md --header Props -i",
-    "example": "npm run -w example build && npm run -w example start",
+    "example": "npm run --prefix example build && npm run --prefix example start",
     "prepare": "npm run build",
@@ -79,9 +79,3 @@ "browserslist": "npx browserslist --mobile-to-desktop '> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11' > .browserslistrc",
   },
-  "workspaces": {
-    "packages": [
-      ".",
-      "./example"
-    ]
-  },
   "sideEffects": false
 }

README.md

 # @u-wave/react-youtube
-
 YouTube player component for React.
@@ -8,9 +7,7 @@
 ## Install
-
 ```
-npm install --save @u-wave/react-youtube
+npm install @u-wave/react-youtube
 ```
 
 ## Usage
-
 [Demo][] - [Demo source code][]
@@ -49,3 +46,2 @@
 | 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>**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**. |
@@ -66,5 +62,3 @@ | muted | bool |  | Whether the video's sound should be muted. |
 
-
 ## Related
-
  - [react-dailymotion][] - A Dailymotion component with a similar declarative API.
@@ -75,3 +69,2 @@ - [@u-wave/react-vimeo][] - A Vimeo component with a similar declarative API.
 ## License
-
 [MIT][]
@@ -78,0 +71,0 @@

src/index.js

 // @ts-check
+/* global YT */
 import React from 'react';
@@ -14,4 +15,6 @@ import PropTypes from 'prop-types';
 /**
+ * Attach an event listener to a YouTube player.
+ *
  * @template {keyof YT.Events} K
- * @param {YT.Player} player
+ * @param {YT.Player|null} player
  * @param {K} event
@@ -58,3 +61,2 @@ * @param {YT.Events[K]} handler
   showRelatedVideos = true,
-  showInfo = true,
   onReady,
@@ -78,23 +80,21 @@ onError,
 
-  /** @type {YT.PlayerVars} */
-  const playerVars = {
-    autoplay: autoplay ? 1 : 0,
-    cc_load_policy: showCaptions ? 1 : 0,
-    controls: controls ? 1 : 0,
-    disablekb: disableKeyboard ? 1 : 0,
-    fs: allowFullscreen ? 1 : 0,
-    hl: lang,
-    iv_load_policy: annotations ? 1 : 3,
-    start: startSeconds,
-    end: endSeconds,
-    modestbranding: modestBranding ? 1 : 0,
-    playsinline: playsInline ? 1 : 0,
-    rel: showRelatedVideos ? 1 : 0,
-    showinfo: showInfo ? 1 : 0,
-  };
-
   // Stick the player initialisation in a ref so it has the most recent props values
   // when it gets instantiated.
   if (!player) {
-    // eslint-disable-next-line no-undef
+    /** @type {YT.PlayerVars} */
+    const playerVars = {
+      autoplay: autoplay ? 1 : 0,
+      cc_load_policy: showCaptions ? 1 : 0,
+      controls: controls ? 1 : 0,
+      disablekb: disableKeyboard ? 1 : 0,
+      fs: allowFullscreen ? 1 : 0,
+      hl: lang,
+      iv_load_policy: annotations ? 1 : 3,
+      start: startSeconds,
+      end: endSeconds,
+      modestbranding: modestBranding ? 1 : 0,
+      playsinline: playsInline ? 1 : 0,
+      rel: showRelatedVideos ? 1 : 0,
+    };
+
     createPlayer.current = () => new YT.Player(container.current, {
@@ -115,3 +115,3 @@ videoId: video,
   const handlePlayerStateChange = useCallback((event) => {
-    const State = YT.PlayerState; // eslint-disable-line no-undef
+    const State = YT.PlayerState;
     switch (event.data) {
@@ -164,3 +164,3 @@ case State.CUED:
     if (player) {
-      player.getIframe().width = width;
+      player.getIframe().width = String(width);
     }
@@ -171,3 +171,3 @@ }, [player, width]);
     if (player) {
-      player.getIframe().height = height;
+      player.getIframe().height = String(height);
     }
@@ -358,11 +358,2 @@ }, [player, height]);
     showRelatedVideos: PropTypes.bool,
-    /**
-     * Whether to show video information (uploader, title, etc) before the video
-     * starts.
-     *
-     * **This parameter has been deprecated and has no effect.**
-     *
-     * https://developers.google.com/youtube/player_parameters#showinfo
-     */
-    showInfo: PropTypes.bool,
 
@@ -428,20 +419,2 @@ /**
 
-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;

test/test.js

@@ -1,21 +0,5 @@
-import React from 'react';
-import { createRenderer } from 'react-test-renderer/shallow';
 import expect from 'expect';
 import render from './util/render';
-import createYouTube from './util/createYouTube';
 
 describe('YouTube', () => {
-  it('should render a div with an ID and className', () => {
-    const { YouTube } = createYouTube();
-    const renderer = createRenderer();
-    renderer.render(<YouTube id="myId" className="myClassName" />);
-    expect(renderer.getRenderOutput()).toMatch({
-      type: 'div',
-      props: {
-        id: 'myId',
-        className: 'myClassName',
-      },
-    });
-  });
-
   it('should create a YouTube player when mounted', async () => {
@@ -133,3 +117,3 @@ const { sdkMock } = await render({
     expect(playerMock.getIframe().setWidth).toHaveBeenCalledWith('100%');
-    expect(playerMock.getIframe().setHeight).toHaveBeenCalledWith(800);
+    expect(playerMock.getIframe().setHeight).toHaveBeenCalledWith('800');
   });
@@ -136,0 +120,0 @@

test/util/render.js

@@ -48,8 +48,21 @@ /**
   const div = env.document.createElement('div');
+  let root;
+  if (ReactDOM.version.startsWith('18')) {
+    const { createRoot } = await import('react-dom/client');
+    root = createRoot(div);
+  } else {
+    root = {
+      render(element) {
+        ReactDOM.render(element, div);
+      },
+      unmount() {
+        ReactDOM.unmountComponentAtNode(div);
+      },
+    };
+  }
+
   const container = new Promise((resolve) => {
-    if (ReactDOM.version.startsWith('18')) {
-      ReactDOM.createRoot(div).render(<Container {...initialProps} ref={resolve} />);
-    } else {
-      ReactDOM.render(<Container {...initialProps} ref={resolve} />, div);
-    }
+    act(() => {
+      root.render(<Container {...initialProps} ref={resolve} />);
+    });
   });
@@ -66,6 +79,2 @@ await readyPromise;
 
-  function unmount() {
-    ReactDOM.unmountComponentAtNode(div);
-  }
-
   return {
@@ -75,3 +84,5 @@ sdkMock,
     rerender,
-    unmount,
+    unmount() {
+      root.unmount();
+    },
   };
@@ -78,0 +89,0 @@ }

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

Number of low supply chain risk alerts

3

decreased by-25%

Worsened metrics

Total package byte prevSize

111776

decreased by-13.04%

Number of package files

26

decreased by-3.7%

Lines of code

1769

decreased by-23.85%

Number of lines in readme file

77

decreased by-8.33%

No dependency changes