add support for embed blocks, with some styling for youtube

web/src/components/blocks/Blocks.tsx

@@ -4,6 +4,7 @@ import { ImageSliderBlock } from "./ImageSliderBlock";
 import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
 import { FeaturedBlock } from "./FeaturedBlock";
 import { AccordionBlock } from "./AccordionBlock";
+import { EmbedBlock } from "./EmbedBlock";
 import { FactBoxBlock } from "./FactBoxBlock";
 import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
@@ -14,17 +15,20 @@ import { OpeningHoursSectionBlock } from "./OpeningHoursSectionBlock";
 
 export const Blocks = ({ blocks }: any) => {
   const sections = blocks.filter(
-    (block: any) => block.__typename === "PageSectionBlock"
+    (block: any) => block?.__typename === "PageSectionBlock"
   );
 
   return blocks.map((block: any) => {
-    switch (block.blockType) {
+    switch (block?.blockType) {
       case "RichTextBlock":
         return <RichTextBlock block={block} />;
         break;
       case "ImageWithTextBlock":
         return <ImageWithTextBlock block={block} />;
         break;
+        case "EmbedBlock":
+          return <EmbedBlock block={block} />;
+          break;
       case "ImageSliderBlock":
         return <ImageSliderBlock block={block} />;
         break;
@@ -65,8 +69,8 @@ export const Blocks = ({ blocks }: any) => {
         return <OpeningHoursSectionBlock />;
         break;
       default:
-        return <div>Unsupported block type {block.blockType}</div>;
         console.log("unsupported block", block);
+        return <div>Unsupported block type {block?.blockType}</div>;
     }
   });
 };

web/src/components/blocks/EmbedBlock.tsx

@@ -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>
+  );
+};

web/src/components/blocks/embedBlock.module.scss

@@ -0,0 +1,9 @@
+.embed {
+  &[data-type="video"] {
+    iframe {
+      width: 100%;
+      height: auto;
+      aspect-ratio: var(--aspect-ratio)
+    }
+  }
+}