From 20642f4225e292b03f69c8f9cd4dfc3907d413d2 Mon Sep 17 00:00:00 2001
From: Pranav Joglekar <pranav2000joglekar@gmail.com>
Date: Mon, 27 May 2024 18:07:39 +0530
Subject: [PATCH] feat preview: add support for youtube clips (#6942)

---
 shared/editor/embeds/YouTube.tsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/shared/editor/embeds/YouTube.tsx b/shared/editor/embeds/YouTube.tsx
index 00a8fdad2..96ac7415a 100644
--- a/shared/editor/embeds/YouTube.tsx
+++ b/shared/editor/embeds/YouTube.tsx
@@ -5,24 +5,30 @@ import { EmbedProps as Props } from ".";
 function YouTube({ matches, ...props }: Props) {
   const videoId = matches[1];
 
-  let start;
+  let src;
   try {
     const url = new URL(props.attrs.href);
     const searchParams = new URLSearchParams(url.search);
-    start = searchParams.get("t")?.replace(/s$/, "");
+    const start = searchParams.get("t")?.replace(/s$/, "");
+
+    // Youtube returns the url in a html encoded format where
+    // '&' is replaced by '&amp;'. So we also check if the search params
+    // contain html encoded query params.
+    const clip = (
+      searchParams.get("clip") || searchParams.get("amp;clip")
+    )?.replace(/s$/, "");
+    const clipt = (
+      searchParams.get("clipt") || searchParams.get("amp;clipt")
+    )?.replace(/s$/, "");
+
+    src = `https://www.youtube.com/embed/${videoId}?modestbranding=1${
+      start ? `&start=${start}` : ""
+    }${clip ? `&clip=${clip}` : ""}${clipt ? `&clipt=${clipt}` : ""}`;
   } catch (_e) {
     // noop
   }
 
-  return (
-    <Frame
-      {...props}
-      src={`https://www.youtube.com/embed/${videoId}?modestbranding=1${
-        start ? `&start=${start}` : ""
-      }`}
-      title={`YouTube (${videoId})`}
-    />
-  );
+  return <Frame {...props} src={src} title={`YouTube (${videoId})`} />;
 }
 
 export default YouTube;