From 40f63baa052e6bc2b68aa0190d81dc5d54d81714 Mon Sep 17 00:00:00 2001
From: G <148180653+GxqoRR@users.noreply.github.com>
Date: Sun, 22 Oct 2023 09:13:16 -0700
Subject: [PATCH] Embed Youtube videos in posts for valid Youtube URLs (#572)

* Render video if it's valid Youtube URL

* Fix lint
---
 components/text.js         | 29 ++++++++++++++++++++++++++++-
 components/text.module.css |  7 +++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/components/text.js b/components/text.js
index 86738395..fb8df83a 100644
--- a/components/text.js
+++ b/components/text.js
@@ -1,5 +1,6 @@
 import styles from './text.module.css'
 import ReactMarkdown from 'react-markdown'
+import YouTube from 'react-youtube'
 import gfm from 'remark-gfm'
 import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
 import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark'
@@ -105,6 +106,25 @@ export default memo(function Text ({ nofollow, imgproxyUrls, children, tab, ...o
     return <ZoomableImage srcSet={srcSet} tab={tab} src={src} {...props} {...outerProps} />
   }, [imgproxyUrls, outerProps, tab])
 
+  const renderYoutubeUrl = useCallback((url) => {
+    if (url) {
+      const regExp = /^https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=|embed\/)?([^&#?]+)/
+      const match = url.match(regExp)
+      if (match && match[4]) {
+        return (
+          <YouTube
+            videoId={match[4]} className={styles.videoContainer} opts={{
+              height: '100%',
+              width: '100%'
+            }}
+          />
+        )
+      }
+    }
+
+    return null
+  }, [])
+
   return (
     <div className={styles.text}>
       <ReactMarkdown
@@ -129,7 +149,14 @@ export default memo(function Text ({ nofollow, imgproxyUrls, children, tab, ...o
             // we don't render it as an image since it was probably a conscious choice to include text.
             const text = children[0]
             if (!!text && !/^https?:\/\//.test(text)) {
-              return <a target='_blank' rel={`noreferrer ${nofollow ? 'nofollow' : ''} noopener`} href={href}>{text}</a>
+              // Render video if it's a valid Youtube url, otherwise null
+              const video = renderYoutubeUrl(href)
+              return (
+                <>
+                  <a target='_blank' rel={`noreferrer ${nofollow ? 'nofollow' : ''} noopener`} href={href}>{text}</a>
+                  {video}
+                </>
+              )
             }
 
             // assume the link is an image which will fallback to link if it's not
diff --git a/components/text.module.css b/components/text.module.css
index 4c25742a..dbcb8ea8 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -148,4 +148,11 @@ img.fullScreen {
 
 .text h6 {
     font-size: .85rem;
+}
+
+.videoContainer {
+    aspect-ratio: 16/9;
+    margin-bottom: .5rem;
+    margin-top: .5rem;
+    max-width: 640px;
 }
\ No newline at end of file