From 492d979cf9746ab032230c832756516170693744 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 14 Oct 2024 18:09:20 +0200
Subject: [PATCH] feat(embed): add support to youtube playlists

---
 src/components/embed/embed.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/embed/embed.tsx b/src/components/embed/embed.tsx
index 9ae3234f..3885a89d 100644
--- a/src/components/embed/embed.tsx
+++ b/src/components/embed/embed.tsx
@@ -49,23 +49,34 @@ interface EmbedComponentProps {
 const youtubeHosts = new Set<string>(['youtube.com', 'www.youtube.com', 'youtu.be', 'www.youtu.be', 'm.youtube.com', 'music.youtube.com']);
 
 const YoutubeEmbed = ({ parsedUrl }: EmbedComponentProps) => {
-  let youtubeId = parsedUrl.searchParams.get('v');
+  let embedSrc = '';
 
-  if (!youtubeId && parsedUrl.host.includes('youtu.be')) {
-    youtubeId = parsedUrl.pathname.substring(1);
+  if (parsedUrl.searchParams.has('list')) {
+    const playlistId = parsedUrl.searchParams.get('list');
+    embedSrc = `https://www.youtube.com/embed/videoseries?list=${playlistId}`;
+  } else {
+    let videoId = parsedUrl.searchParams.get('v');
+
+    if (!videoId && parsedUrl.host.includes('youtu.be')) {
+      videoId = parsedUrl.pathname.substring(1);
+    }
+
+    if (videoId) {
+      embedSrc = `https://www.youtube.com/embed/${videoId}`;
+    }
   }
 
-  if (youtubeId) {
+  if (embedSrc) {
     return (
       <iframe
         className={styles.videoEmbed}
         height='100%'
         width='100%'
         referrerPolicy='origin'
-        allow='accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share'
+        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
         allowFullScreen
         title={parsedUrl.href}
-        src={`https://www.youtube.com/embed/${youtubeId}`}
+        src={embedSrc}
       />
     );
   }