From 17ab4d4941e9781045156969484541061cea07d9 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Mon, 24 Apr 2023 18:43:07 +0200
Subject: [PATCH 1/2] feat(components/atom/videoPlayer): add factory hook

---
 .../videoPlayer/src/components/Switcher.js    | 27 --------------
 .../videoPlayer/src/components/VimeoPlayer.js | 10 +++---
 .../src/components/YouTubePlayer.js           | 22 +++++++-----
 .../atom/videoPlayer/src/components/index.js  |  4 +++
 .../src/hooks/useDetectVideoType.js           | 15 --------
 .../videoPlayer/src/hooks/useVideoPlayer.js   | 35 +++++++++++++++++++
 components/atom/videoPlayer/src/index.js      | 21 ++++++-----
 7 files changed, 70 insertions(+), 64 deletions(-)
 delete mode 100644 components/atom/videoPlayer/src/components/Switcher.js
 create mode 100644 components/atom/videoPlayer/src/components/index.js
 delete mode 100644 components/atom/videoPlayer/src/hooks/useDetectVideoType.js
 create mode 100644 components/atom/videoPlayer/src/hooks/useVideoPlayer.js

diff --git a/components/atom/videoPlayer/src/components/Switcher.js b/components/atom/videoPlayer/src/components/Switcher.js
deleted file mode 100644
index 9fd486a7c..000000000
--- a/components/atom/videoPlayer/src/components/Switcher.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types'
-
-import useDetectVideoType from '../hooks/useDetectVideoType.js'
-import {VIMEO, YOUTUBE} from '../settings.js'
-import VimeoPlayer from './VimeoPlayer.js'
-import YouTubePlayer from './YouTubePlayer.js'
-
-const Switcher = ({src}) => {
-  const {detectVideoType} = useDetectVideoType()
-  const videoType = detectVideoType(src)
-  switch (videoType) {
-    case VIMEO.VIDEO_TYPE:
-      return <VimeoPlayer src={src} />
-
-    case YOUTUBE.VIDEO_TYPE:
-      return <YouTubePlayer src={src} />
-
-    default:
-      return <h1>Not supported media type</h1>
-  }
-}
-
-Switcher.propTypes = {
-  src: PropTypes.string
-}
-
-export default Switcher
diff --git a/components/atom/videoPlayer/src/components/VimeoPlayer.js b/components/atom/videoPlayer/src/components/VimeoPlayer.js
index e882b972f..8e520bd31 100644
--- a/components/atom/videoPlayer/src/components/VimeoPlayer.js
+++ b/components/atom/videoPlayer/src/components/VimeoPlayer.js
@@ -1,15 +1,16 @@
+import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
 import useVimeoProperties from '../hooks/useVimeoProperties.js'
 import {BASE_CLASS} from '../settings.js'
 
-const VimeoPlayer = ({src}) => {
+const VimeoPlayer = forwardRef(({className, src}, forwardedRef) => {
   const {getEmbeddableUrl} = useVimeoProperties()
   const videoSrc = getEmbeddableUrl(src)
 
   return (
     <>
-      <div className={`${BASE_CLASS}-vimeoPlayer`}>
+      <div className={className} ref={forwardedRef}>
         <iframe
           className={`${BASE_CLASS}-vimeoPlayerFrame`}
           title="VIMEO video player"
@@ -17,15 +18,16 @@ const VimeoPlayer = ({src}) => {
           frameBorder="0"
           allow="autoplay; fullscreen; picture-in-picture"
           allowFullScreen
-        ></iframe>
+        />
       </div>
       {/* Is this really needed? */}
       {/* <script src="https://player.vimeo.com/api/player.js"></script> */}
     </>
   )
-}
+})
 
 VimeoPlayer.propTypes = {
+  className: PropTypes.string,
   src: PropTypes.string
 }
 
diff --git a/components/atom/videoPlayer/src/components/YouTubePlayer.js b/components/atom/videoPlayer/src/components/YouTubePlayer.js
index ee4d9bea0..baafde133 100644
--- a/components/atom/videoPlayer/src/components/YouTubePlayer.js
+++ b/components/atom/videoPlayer/src/components/YouTubePlayer.js
@@ -1,24 +1,28 @@
+import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
 import useYouTubeProperties from '../hooks/useYouTubeProperties.js'
 
-const YouTubePlayer = ({src}) => {
+const YouTubePlayer = forwardRef(({src, className}, forwardedRef) => {
   const {getEmbeddableUrl} = useYouTubeProperties()
   const videoSrc = getEmbeddableUrl(src)
 
   // TODO: How to render the iframe with 100% width and height 👉🏾 https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
   return (
-    <iframe
-      src={videoSrc}
-      title="YouTube video player"
-      frameBorder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      allowFullScreen
-    ></iframe>
+    <div className={className} ref={forwardedRef}>
+      <iframe
+        src={videoSrc}
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      />
+    </div>
   )
-}
+})
 
 YouTubePlayer.propTypes = {
+  className: PropTypes.string,
   src: PropTypes.string
 }
 
diff --git a/components/atom/videoPlayer/src/components/index.js b/components/atom/videoPlayer/src/components/index.js
new file mode 100644
index 000000000..43bcd7061
--- /dev/null
+++ b/components/atom/videoPlayer/src/components/index.js
@@ -0,0 +1,4 @@
+import YouTubePlayer from './YouTubePlayer.js'
+import VimeoPlayer from './VimeoPlayer.js'
+
+export {YouTubePlayer, VimeoPlayer}
diff --git a/components/atom/videoPlayer/src/hooks/useDetectVideoType.js b/components/atom/videoPlayer/src/hooks/useDetectVideoType.js
deleted file mode 100644
index 91723a491..000000000
--- a/components/atom/videoPlayer/src/hooks/useDetectVideoType.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {UNKNOWN, VIMEO, YOUTUBE} from '../settings.js'
-
-const useDetectVideoType = () => {
-  const detectVideoType = src => {
-    if (src.includes(YOUTUBE.VIDEO_TYPE) || src.includes(YOUTUBE.SHORT_URL))
-      return YOUTUBE.VIDEO_TYPE
-
-    if (src.includes(VIMEO.VIDEO_TYPE)) return VIMEO.VIDEO_TYPE
-
-    return UNKNOWN
-  }
-  return {detectVideoType}
-}
-
-export default useDetectVideoType
diff --git a/components/atom/videoPlayer/src/hooks/useVideoPlayer.js b/components/atom/videoPlayer/src/hooks/useVideoPlayer.js
new file mode 100644
index 000000000..27bfcca6f
--- /dev/null
+++ b/components/atom/videoPlayer/src/hooks/useVideoPlayer.js
@@ -0,0 +1,35 @@
+import {VIMEO, YOUTUBE, BASE_CLASS} from '../settings.js'
+import {VimeoPlayer, YouTubePlayer} from '../components/index.js'
+
+const matcher = (arrayPattern, value) =>
+  arrayPattern.find(pattern => value.includes(pattern))
+
+const useVideoPlayer = ({
+  as: As = 'h1',
+  children = 'Not supported media type',
+  className,
+  src = '',
+  ...props
+} = {}) => {
+  if (matcher([YOUTUBE.VIDEO_TYPE, YOUTUBE.SHORT_URL], src)) {
+    return [
+      YouTubePlayer,
+      {
+        classNames: [BASE_CLASS, `${BASE_CLASS}-youtubePlayer`].join(' '),
+        src,
+        ...props
+      }
+    ]
+  } else if (matcher([VIMEO.VIDEO_TYPE], src)) {
+    return [
+      VimeoPlayer,
+      {
+        classNames: [BASE_CLASS, `${BASE_CLASS}-vimeoPlayer`].join(' '),
+        src,
+        ...props
+      }
+    ]
+  }
+  return [As, {children, ...props}]
+}
+export default useVideoPlayer
diff --git a/components/atom/videoPlayer/src/index.js b/components/atom/videoPlayer/src/index.js
index 9cad11677..8f11ccc71 100644
--- a/components/atom/videoPlayer/src/index.js
+++ b/components/atom/videoPlayer/src/index.js
@@ -1,16 +1,19 @@
+import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
-import Switcher from './components/Switcher.js'
-import {BASE_CLASS} from './settings.js'
-export default function AtomVideoPlayer({src = ''}) {
-  return (
-    <div className={BASE_CLASS}>
-      <Switcher src={src} />
-    </div>
-  )
-}
+import useVideoPlayer from './hooks/useVideoPlayer.js'
+
+const AtomVideoPlayer = forwardRef((props, forwardedRef) => {
+  const [Component, componentProps] = useVideoPlayer({
+    ref: forwardedRef,
+    ...props
+  })
+  return <Component {...componentProps} />
+})
 
 AtomVideoPlayer.displayName = 'AtomVideoPlayer'
 AtomVideoPlayer.propTypes = {
   src: PropTypes.string
 }
+
+export default AtomVideoPlayer

From 36f6cdcc0018500a78a7d3619ad3f056a98ec45a Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Mon, 24 Apr 2023 19:23:23 +0200
Subject: [PATCH 2/2] feat(components/atom/videoPlayer): reduces fwdRef
 drilling

---
 .../videoPlayer/src/components/VimeoPlayer.js | 32 ++++++++-----------
 .../src/components/YouTubePlayer.js           | 22 ++++++-------
 .../videoPlayer/src/hooks/useVideoPlayer.js   |  8 ++---
 components/atom/videoPlayer/src/index.js      | 15 ++++++---
 4 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/components/atom/videoPlayer/src/components/VimeoPlayer.js b/components/atom/videoPlayer/src/components/VimeoPlayer.js
index 8e520bd31..fa2315446 100644
--- a/components/atom/videoPlayer/src/components/VimeoPlayer.js
+++ b/components/atom/videoPlayer/src/components/VimeoPlayer.js
@@ -1,33 +1,27 @@
-import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
 import useVimeoProperties from '../hooks/useVimeoProperties.js'
-import {BASE_CLASS} from '../settings.js'
 
-const VimeoPlayer = forwardRef(({className, src}, forwardedRef) => {
+const VimeoPlayer = ({src}) => {
   const {getEmbeddableUrl} = useVimeoProperties()
   const videoSrc = getEmbeddableUrl(src)
 
   return (
-    <>
-      <div className={className} ref={forwardedRef}>
-        <iframe
-          className={`${BASE_CLASS}-vimeoPlayerFrame`}
-          title="VIMEO video player"
-          src={videoSrc}
-          frameBorder="0"
-          allow="autoplay; fullscreen; picture-in-picture"
-          allowFullScreen
-        />
-      </div>
-      {/* Is this really needed? */}
-      {/* <script src="https://player.vimeo.com/api/player.js"></script> */}
-    </>
+    <iframe
+      title="VIMEO video player"
+      src={videoSrc}
+      frameBorder="0"
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowFullScreen
+    />
   )
-})
+  /*
+   ** Is this really needed?
+   ** <script src="https://player.vimeo.com/api/player.js"></script>
+   * */
+}
 
 VimeoPlayer.propTypes = {
-  className: PropTypes.string,
   src: PropTypes.string
 }
 
diff --git a/components/atom/videoPlayer/src/components/YouTubePlayer.js b/components/atom/videoPlayer/src/components/YouTubePlayer.js
index baafde133..f442f1614 100644
--- a/components/atom/videoPlayer/src/components/YouTubePlayer.js
+++ b/components/atom/videoPlayer/src/components/YouTubePlayer.js
@@ -1,28 +1,24 @@
-import {forwardRef} from 'react'
 import PropTypes from 'prop-types'
 
 import useYouTubeProperties from '../hooks/useYouTubeProperties.js'
 
-const YouTubePlayer = forwardRef(({src, className}, forwardedRef) => {
+const YouTubePlayer = ({src}) => {
   const {getEmbeddableUrl} = useYouTubeProperties()
   const videoSrc = getEmbeddableUrl(src)
 
   // TODO: How to render the iframe with 100% width and height 👉🏾 https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
   return (
-    <div className={className} ref={forwardedRef}>
-      <iframe
-        src={videoSrc}
-        title="YouTube video player"
-        frameBorder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowFullScreen
-      />
-    </div>
+    <iframe
+      src={videoSrc}
+      title="YouTube video player"
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowFullScreen
+    />
   )
-})
+}
 
 YouTubePlayer.propTypes = {
-  className: PropTypes.string,
   src: PropTypes.string
 }
 
diff --git a/components/atom/videoPlayer/src/hooks/useVideoPlayer.js b/components/atom/videoPlayer/src/hooks/useVideoPlayer.js
index 27bfcca6f..cf58304d2 100644
--- a/components/atom/videoPlayer/src/hooks/useVideoPlayer.js
+++ b/components/atom/videoPlayer/src/hooks/useVideoPlayer.js
@@ -5,7 +5,7 @@ const matcher = (arrayPattern, value) =>
   arrayPattern.find(pattern => value.includes(pattern))
 
 const useVideoPlayer = ({
-  as: As = 'h1',
+  as: As = 'div',
   children = 'Not supported media type',
   className,
   src = '',
@@ -15,7 +15,7 @@ const useVideoPlayer = ({
     return [
       YouTubePlayer,
       {
-        classNames: [BASE_CLASS, `${BASE_CLASS}-youtubePlayer`].join(' '),
+        className: [BASE_CLASS, `${BASE_CLASS}-youtubePlayer`].join(' '),
         src,
         ...props
       }
@@ -24,12 +24,12 @@ const useVideoPlayer = ({
     return [
       VimeoPlayer,
       {
-        classNames: [BASE_CLASS, `${BASE_CLASS}-vimeoPlayer`].join(' '),
+        className: [BASE_CLASS, `${BASE_CLASS}-vimeoPlayer`].join(' '),
         src,
         ...props
       }
     ]
   }
-  return [As, {children, ...props}]
+  return ['h1', {className: BASE_CLASS, children, ...props}]
 }
 export default useVideoPlayer
diff --git a/components/atom/videoPlayer/src/index.js b/components/atom/videoPlayer/src/index.js
index 8f11ccc71..d72fdeb08 100644
--- a/components/atom/videoPlayer/src/index.js
+++ b/components/atom/videoPlayer/src/index.js
@@ -4,15 +4,20 @@ import PropTypes from 'prop-types'
 import useVideoPlayer from './hooks/useVideoPlayer.js'
 
 const AtomVideoPlayer = forwardRef((props, forwardedRef) => {
-  const [Component, componentProps] = useVideoPlayer({
-    ref: forwardedRef,
-    ...props
-  })
-  return <Component {...componentProps} />
+  const [Component, {className, as: As = 'div', ...componentProps}] =
+    useVideoPlayer(props)
+  return (
+    <As className={className} ref={forwardedRef}>
+      <Component {...componentProps} />
+    </As>
+  )
 })
 
 AtomVideoPlayer.displayName = 'AtomVideoPlayer'
 AtomVideoPlayer.propTypes = {
+  /* Render the passed value as the correspondent HTML tag or the component if a function is passed */
+  as: PropTypes.elementType,
+  // TODO: document
   src: PropTypes.string
 }