upgrade to react-youtube v10 and rename props

CodingTrain · Dec 7, 2022 · b8245a9 · b8245a9
1 parent 41ad773
commit b8245a9
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.7.1",
     "react-select": "^5.7.0",
-    "react-youtube": "^7.14.0",
+    "react-youtube": "^10.1.0",
     "remark-gfm": "^1.0.0",
     "yup": "^0.32.11"
   },

diff --git a/src/components/Question.js b/src/components/Question.js
@@ -67,8 +67,8 @@ const Question = ({ variant, slug, question, answer, currentHash }) => {
           )}
           {answer.video && (
             <YouTubeVideo
-              containerClassName={css.videoContainer}
-              className={css.video}
+              className={css.videoContainer}
+              iframeClassName={css.video}
               videoId={answer.video.id}
               listId={answer.video.list}
             />

diff --git a/src/components/YouTubeVideo.js b/src/components/YouTubeVideo.js
@@ -7,8 +7,8 @@ import cn from 'classnames';
 import * as css from './YouTubeVideo.module.css';
 
 const YouTubeVideo = ({
-  containerClassName,
   className,
+  iframeClassName,
   videoId,
   listId,
   timestamp
@@ -35,8 +35,8 @@ const YouTubeVideo = ({
   return (
     <div key={videoId}>
       <YouTube
-        containerClassName={cn(css.container, containerClassName)}
-        className={cn(css.video, className)}
+        className={cn(css.container, className)}
+        iframeClassName={cn(css.video, iframeClassName)}
         ref={youTubeVideo}
         videoId={videoId}
         opts={opts}

diff --git a/src/components/challenges/VideoSection.js b/src/components/challenges/VideoSection.js
@@ -101,7 +101,7 @@ const VideoSection = ({ challenge }) => {
         <div className={css.videoContainer}>
           <div className={css.video} ref={youTubeVideoRef}>
             <YouTubeVideo
-              containerClassName={css.videoWrapper}
+              className={css.videoWrapper}
               videoId={videoId}
               timestamp={timestamp}
             />

diff --git a/src/components/tracks/VideoSection.js b/src/components/tracks/VideoSection.js
@@ -111,7 +111,7 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
         <div className={css.videoContainer}>
           <div className={css.video} ref={youTubeVideoRef}>
             <YouTubeVideo
-              containerClassName={css.videoWrapper}
+              className={css.videoWrapper}
               videoId={videoId}
               timestamp={timestamp}
             />

diff --git a/src/templates/guide.js b/src/templates/guide.js
@@ -142,7 +142,7 @@ const components = (localImages) => ({
   ),
   Video: (props) => (
     <div className={css.video}>
-      <YouTubeVideo containerClassName={css.videoContainer} {...props} />
+      <YouTubeVideo className={css.videoContainer} {...props} />
     </div>
   ),
   PassengerShowcaseForm: (props) => <PassengerShowcaseForm {...props} />