Adding Twitter and Video Embed block components

Author: dcooney

components/atoms/TwitterEmbed/TwitterEmbed.js

@@ -0,0 +1,58 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import styles from './TwitterEmbed.module.css'
+import {useEffect, useRef} from 'react'
+import RichText from '@/components/atoms/RichText'
+
+/**
+ * TwitterEmbed Block
+ *
+ * @author WebDevStudios
+ * @param {object} props           TwitterEmbed component props.
+ * @param {string} props.className Optional className.
+ * @param {string} props.caption   Optional caption.
+ * @param {string} props.url       The full URL to the video.
+ * @return {Element}               The TwitterEmbed component.
+ */
+export default function TwitterEmbed({className, caption, url}) {
+  const tweetRef = useRef(null)
+
+  useEffect(() => {
+    if (url === '') {
+      return
+    }
+    // @see https://stackoverflow.com/a/43268098/921927
+    const proxyUrl = 'https://cors-anywhere.herokuapp.com/',
+      targetUrl = `https://publish.twitter.com/oembed?url=${url}`
+    fetch(proxyUrl + targetUrl)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data && data.html) {
+          // @see https://stackoverflow.com/a/43268098/921927
+          // Create slot for executing a script file.
+          const slotHtml = document
+            .createRange()
+            .createContextualFragment(data.html) // Create a 'tiny' document and parse the html string.
+          tweetRef.current.innerHTML = '' // Clear the container.
+          tweetRef.current.appendChild(slotHtml) // Append the new content.
+        }
+      })
+  }, [])
+
+  return (
+    <div className={cn(styles.twitterEmbed, className)}>
+      <div ref={tweetRef}></div>
+      {!!caption && (
+        <div className={styles.caption}>
+          <RichText tag="span">{caption}</RichText>
+        </div>
+      )}
+    </div>
+  )
+}
+
+TwitterEmbed.propTypes = {
+  className: PropTypes.string,
+  caption: PropTypes.string,
+  url: PropTypes.string.isRequired
+}

components/atoms/TwitterEmbed/TwitterEmbed.module.css

@@ -0,0 +1,7 @@
+.twitterEmbed {
+  @apply block;
+
+  & .caption {
+    @apply text-center font-secondary text-xs pt-12;
+  }
+}

components/atoms/TwitterEmbed/TwitterEmbed.stories.mdx

@@ -0,0 +1,18 @@
+import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
+
+import TwitterEmbed from '.'
+
+<Meta title="Components/Atoms/TwitterEmbed" component={TwitterEmbed} />
+
+# Twitter Embed
+
+Use this to display a tweet from a timeline
+
+<Canvas>
+  <Story name="Component">
+    <TwitterEmbed
+      url="https://twitter.com/webdevstudios/status/1351167649418514432"
+      caption="This is an optional caption"
+    />
+  </Story>
+</Canvas>

components/atoms/TwitterEmbed/index.js

@@ -0,0 +1 @@
+export {default} from './TwitterEmbed'

components/atoms/VideoEmbed/VideoEmbed.js

@@ -0,0 +1,70 @@
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+import styles from './VideoEmbed.module.css'
+
+/**
+ * VideoEmbed Block
+ *
+ * @author WebDevStudios
+ * @param {object} props           VideoEmbed component props.
+ * @param {string} props.className Optional className.
+ * @param {string} props.url       The full URL to the video.
+ * @param {string} props.type      The type of video (youtube, vimeo).
+ * @param {string} props.caption   Optional caption.
+ * @return {Element}               The VideoEmbed component.
+ */
+export default function VideoEmbed({className, url, type, caption}) {
+  /**
+   * Create URL embed for YouTube or Vimeo videos.
+   *
+   * @param {string} url The video URL.
+   */
+  function createVideoUrl(url) {
+    if (!url) {
+      return false
+    }
+
+    let videoUrl, videoId
+
+    videoId = url.indexOf('v=') !== -1 ? url.split('v=') : url.split('/')
+    videoId = videoId[videoId.length - 1]
+
+    videoUrl = url.includes('vimeo')
+      ? `//player.vimeo.com/video/${videoId}`
+      : `//youtube.com/embed/${videoId}`
+
+    return videoUrl
+  }
+
+  return (
+    <div className={cn(styles.videoEmbed, className)}>
+      <div className={styles.wrapper}>
+        <iframe
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          frameBorder="0"
+          height="315"
+          loading="lazy"
+          src={createVideoUrl(url)}
+          width="560"
+          title={`Embedded content from ${type}`}
+          className={className}
+        ></iframe>
+      </div>
+      {!!caption && (
+        <div className={styles.caption}>
+          <RichText tag="span">{caption}</RichText>
+        </div>
+      )}
+    </div>
+  )
+}
+
+VideoEmbed.propTypes = {
+  className: PropTypes.string,
+  caption: PropTypes.string,
+  type: PropTypes.string,
+  url: PropTypes.string.isRequired
+}

components/atoms/VideoEmbed/VideoEmbed.module.css

@@ -0,0 +1,17 @@
+.videoEmbed {
+  @apply mb-24;
+
+  & .wrapper {
+    @apply w-full relative overflow-hidden;
+
+    padding-top: 56.25%;
+  }
+
+  & iframe {
+    @apply absolute w-full h-full inset-0;
+  }
+
+  & .caption {
+    @apply text-center font-secondary text-xs pt-12;
+  }
+}

components/molecules/VideoEmbed/VideoEmbed.stories.mdx renamed to components/atoms/VideoEmbed/VideoEmbed.stories.mdx

@@ -2,15 +2,18 @@ import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
 
 import VideoEmbed from '.'
 
-<Meta title="Design System/Organisms/VideoEmbed" component={VideoEmbed} />
+<Meta title="Components/Atoms/VideoEmbed" component={VideoEmbed} />
 
 # Video Embed
 
 Use this to display a video in iFrame, pass the YouTube video ID to the `VideoEmbed` component.
 
 <Canvas>
   <Story name="Component">
-    <VideoEmbed url="https://www.youtube.com/watch?v=ebQbQufIb0E" />
+    <VideoEmbed
+      url="https://www.youtube.com/watch?v=ebQbQufIb0E"
+      caption="This is an optional caption"
+    />
   </Story>
 </Canvas>
 

components/molecules/VideoEmbed/index.js renamed to components/atoms/VideoEmbed/index.js

@@ -1,42 +1,41 @@
-import VideoEmbed from '@/components/molecules/VideoEmbed'
+import TwitterEmbed from '@/components/atoms/TwitterEmbed'
+import VideoEmbed from '@/components/atoms/VideoEmbed'
 import PropTypes from 'prop-types'
-import React, {useState, useEffect} from 'react'
+import React from 'react'
 
 /**
  * Embed Block
  *
  * The core Embed block from Gutenberg.
  *
  * @author WebDevStudios
- * @param {string} className Optional classnames.
- * @param {string} align     Optional alignment style.
- * @param {string} anchor    Optional anchor/id.
- * @param {string} content   The content of the block.
- * @param {string} level     The heading level.
- * @return {Element}         The component to embed.
+ * @param {string} className        Optional classnames.
+ * @param {string} url              The URL of the video.
+ * @param {string} caption          Optional caption.
+ * @param {string} align            Block alignment caption.
+ * @param {string} providerNameSlug The type of embed.
+ * @return {Element}                The component to embed.
  */
 export default function BlockEmbed({
   className,
   url,
   caption,
   providerNameSlug
 }) {
-  if (providerNameSlug === 'twitter') {
-    fetch(
-      'https://publish.twitter.com/oembed?url=https://twitter.com/Interior/status/463440424141459456'
-    )
-      .then((response) => response.json())
-      .then((data) => console.log(data))
-  }
-
   return (
     <>
       {!!url && (
         <>
           {providerNameSlug === 'twitter' ? (
-            <div></div>
+            <TwitterEmbed className={className} url={url} caption={caption} />
           ) : (
-            <VideoEmbed className={className} url={url} caption={caption} />
+            // <div dangerouslySetInnerHTML={{__html: tweetContent}} />
+            <VideoEmbed
+              className={className}
+              url={url}
+              caption={caption}
+              type={providerNameSlug}
+            />
           )}
         </>
       )}