From bc5ad54ca96edc8e8045e3e090e1fde5e97b12f2 Mon Sep 17 00:00:00 2001
From: en <enes@nostrdev.com>
Date: Mon, 24 Feb 2025 14:40:46 +0100
Subject: [PATCH] fix(notes): render youtube link preview

---
 src/components/Notes/NoteRender.tsx | 22 ++++++++++++++++-
 src/utils/url.ts                    | 37 +++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/components/Notes/NoteRender.tsx b/src/components/Notes/NoteRender.tsx
index ea1d393..94833f2 100644
--- a/src/components/Notes/NoteRender.tsx
+++ b/src/components/Notes/NoteRender.tsx
@@ -7,10 +7,12 @@ import { BlogPreview } from './internal/BlogPreview'
 import { ModPreview } from './internal/ModPreview'
 import { NoteWrapper } from './internal/NoteWrapper'
 import {
+  getIdFromYoutubeLink,
   isValidAudioUrl,
   isValidImageUrl,
   isValidUrl,
-  isValidVideoUrl
+  isValidVideoUrl,
+  isYoutubeLink
 } from 'utils'
 
 interface NoteRenderProps {
@@ -61,6 +63,24 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
               )
             } else if (isValidAudioUrl(href)) {
               return <audio key={key} src={href} controls />
+            } else if (isYoutubeLink(href)) {
+              // Youtube
+              const id = getIdFromYoutubeLink(href)
+              if (id) {
+                return (
+                  <iframe
+                    key={key}
+                    className='videoFeedRender'
+                    title='Video embed'
+                    width='560'
+                    height='315'
+                    src={`https://www.youtube.com/embed/${id}`}
+                    frameBorder='0'
+                    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                    allowFullScreen
+                  ></iframe>
+                )
+              }
             }
           }
 
diff --git a/src/utils/url.ts b/src/utils/url.ts
index afbea08..b96a194 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -70,6 +70,43 @@ export const isValidAudioUrl = (url: string) => {
   return regex.test(url)
 }
 
+export const isYoutubeLink = (url: string) => {
+  const _url = new URL(url)
+  return [
+    'm.youtube.com',
+    'youtube.com',
+    'www.youtube.com',
+    'youtube-nocookie.com',
+    'www.youtube-nocookie.com',
+    'youtu.be',
+    'music.youtube.com'
+  ].includes(_url.hostname)
+}
+
+const YOUTUBE_SIMPLE_REGEX =
+  /(?:youtube(?:-nocookie)?\.com|youtu\.be)\/(?:(watch|v|e|embed|shorts|live)\/)?(?:attribution_link\?a=.*watch(?:%3Fv%3D))?(?<id>[\w-]+)/
+export const getIdFromYoutubeLink = (url: string): string | null => {
+  if (!isYoutubeLink(url)) return null
+
+  const _url = new URL(url)
+
+  let id = _url.searchParams.get('v')
+
+  if (!id) {
+    // Handle oembed
+    const oembed = _url.searchParams.get('url')
+    if (oembed && isYoutubeLink(oembed)) {
+      id = getIdFromYoutubeLink(oembed)
+    } else if (YOUTUBE_SIMPLE_REGEX.test(url)) {
+      // Handle everything else
+      const matches = url.match(YOUTUBE_SIMPLE_REGEX)
+      if (matches?.groups?.id) id = matches?.groups.id
+    }
+  }
+
+  return id
+}
+
 export const isReachable = async (url: string) => {
   try {
     const response = await fetch(url, { method: 'HEAD' })