fix youtube playlist embed

cypress/e2e/embeds.cy.ts

@@ -65,4 +65,15 @@ describe("Embeds", () => {
         });
     });
   });
+
+  describe("youtube", () => {
+    it("should embed playlists", () => {
+      cy.visit(
+        "#/n/nevent1qqs8w6e63smpr5ccmz4l0w5pvnkp6r7z2fxaadjwu2g74y95pl9xv0cpzpmhxue69uhkummnw3ezuamfdejszrthwden5te0dehhxtnvdakqqkgf54"
+      );
+
+      cy.findByTitle(/youtube video player/i).should("be.visible");
+      cy.findByTitle(/youtube video player/i).should("have.attr", "src");
+    });
+  });
 });

src/components/embed-types/youtube.tsx

@@ -1,4 +1,4 @@
-import { AspectRatio } from "@chakra-ui/react";
+import { AspectRatio, list } from "@chakra-ui/react";
 import appSettings from "../../services/app-settings";
 
 // copied from https://github.com/SimonBrazell/privacy-redirect/blob/master/src/assets/javascripts/helpers/youtube.js
@@ -21,21 +21,42 @@ export function renderYoutubeUrl(match: URL) {
 
   const { youtubeRedirect } = appSettings.value;
 
-  var videoId = match.searchParams.get("v");
+  if (match.pathname.startsWith("/playlist")) {
-  if (match.hostname === "youtu.be") videoId = match.pathname.split("/")[1];
+    const listId = match.searchParams.get("list");
-  if (!videoId) throw new Error("cant find video id");
+    if (!listId) throw new Error("missing list id");
-  const embedUrl = new URL(`/embed/${videoId}`, youtubeRedirect || "https://youtube.com");
 
-  return (
+    const embedUrl = new URL(`embed/videoseries`, youtubeRedirect || "https://www.youtube-nocookie.com");
-    <AspectRatio ratio={16 / 10} maxWidth="40rem">
+    embedUrl.searchParams.set("list", listId);
-      <iframe
+
-        src={embedUrl.toString()}
+    return (
-        title="YouTube video player"
+      <AspectRatio ratio={560 / 315} maxWidth="40rem">
-        frameBorder="0"
+        <iframe
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          src={embedUrl.toString()}
-        allowFullScreen
+          title="YouTube video player"
-        width="100%"
+          frameBorder="0"
-      ></iframe>
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    </AspectRatio>
+          allowFullScreen
-  );
+          width="100%"
+        ></iframe>
+      </AspectRatio>
+    );
+  } else {
+    var videoId = match.searchParams.get("v");
+    if (match.hostname === "youtu.be") videoId = match.pathname.split("/")[1];
+    if (!videoId) throw new Error("cant find video id");
+    const embedUrl = new URL(`/embed/${videoId}`, youtubeRedirect || "https://www.youtube-nocookie.com");
+
+    return (
+      <AspectRatio ratio={16 / 10} maxWidth="40rem">
+        <iframe
+          src={embedUrl.toString()}
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          width="100%"
+        ></iframe>
+      </AspectRatio>
+    );
+  }
 }

src/helpers/embeds.ts

@@ -43,8 +43,10 @@ export function embedUrls(content: EmbedableContent, handlers: LinkEmbedHandler[
       try {
         const url = new URL(match[0]);
         for (const handler of handlers) {
-          const content = handler(url);
+          try {
-          if (content) return content;
+            const content = handler(url);
+            if (content) return content;
+          } catch (e) {}
         }
       } catch (e) {
         if (e instanceof Error) {