feat(components/atom/videoPlayer): add factory hook

components/atom/videoPlayer/src/components/VimeoPlayer.js

@@ -1,28 +1,24 @@
 import PropTypes from 'prop-types'
 
 import useVimeoProperties from '../hooks/useVimeoProperties.js'
-import {BASE_CLASS} from '../settings.js'
 
 const VimeoPlayer = ({src}) => {
   const {getEmbeddableUrl} = useVimeoProperties()
   const videoSrc = getEmbeddableUrl(src)
 
   return (
-    <>
-      <div className={`${BASE_CLASS}-vimeoPlayer`}>
-        <iframe
-          className={`${BASE_CLASS}-vimeoPlayerFrame`}
-          title="VIMEO video player"
-          src={videoSrc}
-          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> */}
-    </>
+    <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 = {

components/atom/videoPlayer/src/components/YouTubePlayer.js

@@ -14,7 +14,7 @@ const YouTubePlayer = ({src}) => {
       frameBorder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       allowFullScreen
-    ></iframe>
+    />
   )
 }
 

components/atom/videoPlayer/src/components/index.js

@@ -0,0 +1,4 @@
+import YouTubePlayer from './YouTubePlayer.js'
+import VimeoPlayer from './VimeoPlayer.js'
+
+export {YouTubePlayer, VimeoPlayer}

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 = 'div',
+  children = 'Not supported media type',
+  className,
+  src = '',
+  ...props
+} = {}) => {
+  if (matcher([YOUTUBE.VIDEO_TYPE, YOUTUBE.SHORT_URL], src)) {
+    return [
+      YouTubePlayer,
+      {
+        className: [BASE_CLASS, `${BASE_CLASS}-youtubePlayer`].join(' '),
+        src,
+        ...props
+      }
+    ]
+  } else if (matcher([VIMEO.VIDEO_TYPE], src)) {
+    return [
+      VimeoPlayer,
+      {
+        className: [BASE_CLASS, `${BASE_CLASS}-vimeoPlayer`].join(' '),
+        src,
+        ...props
+      }
+    ]
+  }
+  return ['h1', {className: BASE_CLASS, children, ...props}]
+}
+export default useVideoPlayer

components/atom/videoPlayer/src/index.js

@@ -1,16 +1,24 @@
+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 = ''}) {
+import useVideoPlayer from './hooks/useVideoPlayer.js'
+
+const AtomVideoPlayer = forwardRef((props, forwardedRef) => {
+  const [Component, {className, as: As = 'div', ...componentProps}] =
+    useVideoPlayer(props)
   return (
-    <div className={BASE_CLASS}>
-      <Switcher src={src} />
-    </div>
+    <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
 }
+
+export default AtomVideoPlayer