Merge pull request #345 from tjallingt/canary

chore: release
tjallingt · Apr 14, 2022 · 62832b1 · 62832b1
2 parents 3080fe2 + f35e444
commit 62832b1
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 36 deletions.
diff --git a/packages/example/index.html b/packages/example/index.html
@@ -7,6 +7,6 @@
   <body>
     <div id="app"></div>
 
-    <script type="module" src="src/index.jsx"></script>
+    <script type="module" src="src/index.tsx"></script>
   </body>
 </html>
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -13,8 +13,11 @@
     "react-youtube": "1.0.0"
   },
   "devDependencies": {
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
     "parcel": "2.4.1",
-    "process": "0.11.10"
+    "process": "0.11.10",
+    "typescript": "4.6.3"
   },
   "keywords": [
     "javascript",

diff --git a/packages/example/src/index.jsx → packages/example/src/index.tsx b/packages/example/src/index.jsx → packages/example/src/index.tsx
@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import YouTube from 'react-youtube';
+import YouTube, { YouTubePlayer } from 'react-youtube';
 
 import './styles.css';
 
 const VIDEOS = ['XxVg_s8xAms', '-DX3vJiqxm4'];
 
 function YouTubeComponentExample() {
-  const [player, setPlayer] = useState(0);
+  const [player, setPlayer] = useState<YouTubePlayer>();
   const [videoIndex, setVideoIndex] = useState(0);
   const [width, setWidth] = useState(600);
   const [hidden, setHidden] = useState(false);
@@ -16,7 +16,7 @@ function YouTubeComponentExample() {
   return (
     <div className="App">
       <div style={{ display: 'flex', marginBottom: '1em' }}>
-        <button type="button" onClick={() => player.seekTo(120)}>
+        <button type="button" onClick={() => player?.seekTo(120, true)}>
           Seek to 2 minutes
         </button>
         <button type="button" onClick={() => setVideoIndex((videoIndex + 1) % VIDEOS.length)}>
@@ -28,15 +28,15 @@ function YouTubeComponentExample() {
             min="300"
             max="1080"
             value={width}
-            onChange={(event) => setWidth(event.currentTarget.value)}
+            onChange={(event) => setWidth(event.currentTarget.valueAsNumber)}
           />
           Width ({width}px)
         </label>
         <button type="button" onClick={() => setHidden(!hidden)}>
           {hidden ? 'Show' : 'Hide'}
         </button>
         <label>
-          <input type="checkbox" value={autoplay} onChange={(event) => setAutoplay(event.currentTarget.checked)} />
+          <input type="checkbox" checked={autoplay} onChange={(event) => setAutoplay(event.currentTarget.checked)} />
           Autoplaying
         </label>
       </div>
@@ -46,9 +46,13 @@ function YouTubeComponentExample() {
       ) : (
         <YouTube
           videoId={VIDEOS[videoIndex]}
-          autoplay={autoplay}
-          width={width}
-          height={width * (9 / 16)}
+          opts={{
+            width,
+            height: width * (9 / 16),
+            playerVars: {
+              autoplay: autoplay ? 1 : 0,
+            },
+          }}
           className="container"
           onReady={(event) => setPlayer(event.target)}
         />

diff --git a/packages/react-youtube/package.json b/packages/react-youtube/package.json
@@ -35,6 +35,8 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.4",
     "@types/jest": "27.4.1",
+    "@types/react": "17.0.20",
+    "@types/react-dom": "17.0.9",
     "@types/youtube-player": "5.5.6",
     "jest": "27.5.1",
     "react": "17.0.2",

diff --git a/packages/react-youtube/src/YouTube.tsx b/packages/react-youtube/src/YouTube.tsx
@@ -65,6 +65,13 @@ function shouldUpdatePlayer(prevProps: YouTubeProps, props: YouTubeProps) {
   );
 }
 
+export { YouTubePlayer };
+
+export type YouTubeEvent<T = any> = {
+  data: T;
+  target: YouTubePlayer;
+};
+
 export type YouTubeProps = {
   /**
    * The YouTube video ID.
@@ -108,39 +115,39 @@ export type YouTubeProps = {
    * This event fires whenever a player has finished loading and is ready to begin receiving API calls.
    * {@link https://developers.google.com/youtube/iframe_api_reference#onReady}
    */
-  onReady?: (event: CustomEvent) => void;
+  onReady?: (event: YouTubeEvent) => void;
   /**
    * This event fires if an error occurs in the player.
    * {@link https://developers.google.com/youtube/iframe_api_reference#onError}
    */
-  onError?: (event: CustomEvent) => void;
+  onError?: (event: YouTubeEvent<number>) => void;
   /**
    * This event fires when the layer's state changes to PlayerState.PLAYING.
    */
-  onPlay?: (event: CustomEvent) => void;
+  onPlay?: (event: YouTubeEvent<number>) => void;
   /**
    * This event fires when the layer's state changes to PlayerState.PAUSED.
    */
-  onPause?: (event: CustomEvent) => void;
+  onPause?: (event: YouTubeEvent<number>) => void;
   /**
    * This event fires when the layer's state changes to PlayerState.ENDED.
    */
-  onEnd?: (event: CustomEvent) => void;
+  onEnd?: (event: YouTubeEvent<number>) => void;
   /**
    * This event fires whenever the player's state changes.
    * {@link https://developers.google.com/youtube/iframe_api_reference#onStateChange}
    */
-  onStateChange?: (event: CustomEvent) => void;
+  onStateChange?: (event: YouTubeEvent<number>) => void;
   /**
    * This event fires whenever the video playback quality changes.
    * {@link https://developers.google.com/youtube/iframe_api_reference#onPlaybackRateChange}
    */
-  onPlaybackRateChange?: (event: CustomEvent) => void;
+  onPlaybackRateChange?: (event: YouTubeEvent<number>) => void;
   /**
    * This event fires whenever the video playback rate changes.
    * {@link https://developers.google.com/youtube/iframe_api_reference#onPlaybackQualityChange}
    */
-  onPlaybackQualityChange?: (event: CustomEvent) => void;
+  onPlaybackQualityChange?: (event: YouTubeEvent<string>) => void;
 } & typeof defaultProps;
 
 const defaultProps = {
@@ -151,14 +158,14 @@ const defaultProps = {
   opts: {},
   containerClassName: '',
   containerStyle: {},
-  onReady: () => {},
-  onError: () => {},
-  onPlay: () => {},
-  onPause: () => {},
-  onEnd: () => {},
-  onStateChange: () => {},
-  onPlaybackRateChange: () => {},
-  onPlaybackQualityChange: () => {},
+  onReady: (event: YouTubeEvent) => {},
+  onError: (event: YouTubeEvent<number>) => {},
+  onPlay: (event: YouTubeEvent<number>) => {},
+  onPause: (event: YouTubeEvent<number>) => {},
+  onEnd: (event: YouTubeEvent<number>) => {},
+  onStateChange: (event: YouTubeEvent<number>) => {},
+  onPlaybackRateChange: (event: YouTubeEvent<number>) => {},
+  onPlaybackQualityChange: (event: YouTubeEvent<string>) => {},
   title: '',
 };
 
@@ -241,19 +248,19 @@ class YouTube extends React.Component<YouTubeProps> {
    * This event fires whenever a player has finished loading and is ready to begin receiving API calls.
    * https://developers.google.com/youtube/iframe_api_reference#onReady
    */
-  onPlayerReady = (event: CustomEvent) => this.props.onReady?.(event);
+  onPlayerReady = (event: YouTubeEvent) => this.props.onReady?.(event);
 
   /**
    * This event fires if an error occurs in the player.
    * https://developers.google.com/youtube/iframe_api_reference#onError
    */
-  onPlayerError = (event: CustomEvent) => this.props.onError?.(event);
+  onPlayerError = (event: YouTubeEvent<number>) => this.props.onError?.(event);
 
   /**
    * This event fires whenever the video playback quality changes.
    * https://developers.google.com/youtube/iframe_api_reference#onStateChange
    */
-  onPlayerStateChange = (event: CustomEvent) => {
+  onPlayerStateChange = (event: YouTubeEvent<number>) => {
     this.props.onStateChange?.(event);
     // @ts-ignore
     switch (event.data) {
@@ -277,13 +284,13 @@ class YouTube extends React.Component<YouTubeProps> {
    * This event fires whenever the video playback quality changes.
    * https://developers.google.com/youtube/iframe_api_reference#onPlaybackRateChange
    */
-  onPlayerPlaybackRateChange = (event: CustomEvent) => this.props.onPlaybackRateChange?.(event);
+  onPlayerPlaybackRateChange = (event: YouTubeEvent<number>) => this.props.onPlaybackRateChange?.(event);
 
   /**
    * This event fires whenever the video playback rate changes.
    * https://developers.google.com/youtube/iframe_api_reference#onPlaybackQualityChange
    */
-  onPlayerPlaybackQualityChange = (event: CustomEvent) => this.props.onPlaybackQualityChange?.(event);
+  onPlayerPlaybackQualityChange = (event: YouTubeEvent<string>) => this.props.onPlaybackQualityChange?.(event);
 
   /**
    * Initialize the YouTube Player API on the container and attach event handlers
@@ -299,11 +306,11 @@ class YouTube extends React.Component<YouTubeProps> {
     };
     this.internalPlayer = youTubePlayer(this.container!, playerOpts);
     // attach event handlers
-    this.internalPlayer.on('ready', this.onPlayerReady);
-    this.internalPlayer.on('error', this.onPlayerError);
-    this.internalPlayer.on('stateChange', this.onPlayerStateChange);
-    this.internalPlayer.on('playbackRateChange', this.onPlayerPlaybackRateChange);
-    this.internalPlayer.on('playbackQualityChange', this.onPlayerPlaybackQualityChange);
+    this.internalPlayer.on('ready', this.onPlayerReady as any);
+    this.internalPlayer.on('error', this.onPlayerError as any);
+    this.internalPlayer.on('stateChange', this.onPlayerStateChange as any);
+    this.internalPlayer.on('playbackRateChange', this.onPlayerPlaybackRateChange as any);
+    this.internalPlayer.on('playbackQualityChange', this.onPlayerPlaybackQualityChange as any);
   };
 
   /**

diff --git a/yarn.lock b/yarn.lock
@@ -2774,6 +2774,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/[email protected]":
+  version "17.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
+  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.0.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.3.tgz#baefa397561372015b9f8ba5bc83bc3f84ae8fcb"
@@ -2783,6 +2790,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/[email protected]":
+  version "17.0.20"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.20.tgz#a4284b184d47975c71658cd69e759b6bd37c3b8c"
+  integrity sha512-wWZrPlihslrPpcKyCSlmIlruakxr57/buQN1RjlIeaaTWDLtJkTtRW429MoQJergvVKc4IWBpRhWw7YNh/7GVA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/retry@^0.12.0":
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"