add support for embed blocks, with some styling for youtube

2024-07-15 00:24:28 +02:00
parent 55f8062f07
commit 55257f3bb4
14 changed files with 244 additions and 27 deletions
@@ -0,0 +1,39 @@
+import { EmbedBlock as EmbedBlockType } from "@/gql/graphql";
+import styles from "./embedBlock.module.scss";
+
+export const EmbedBlock = ({ block }: { block: EmbedBlockType }) => {
+  if (!block.embed) {
+    return <></>;
+  }
+
+  /* YouTube rawEmbed example
+  {
+    title: "EEEAAAOOO",
+    type: "video",
+    thumbnail_url: "https://i.ytimg.com/vi/v1K4EAXe2oo/hqdefault.jpg",
+    width: 200,
+    height: 113,
+    html: '<iframe width="200" height="113" src="https://www.youtube.com/embed/v1K4EAXe2oo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="EEEAAAOOO"></iframe>',
+  };
+  */
+  let embedData: any = {};
+  try {
+    embedData = JSON.parse(block.rawEmbed);
+  } catch (e) {
+    embedData = {};
+  }
+  const { width, height } = embedData;
+  const aspectRatio = width && height ? width / height : null;
+  return (
+    <div
+      className={styles.embed}
+      dangerouslySetInnerHTML={{ __html: block.embed }}
+      data-type={embedData?.type ?? ""}
+      style={
+        aspectRatio
+          ? ({ "--aspect-ratio": aspectRatio } as React.CSSProperties)
+          : {}
+      }
+    ></div>
+  );
+};