From 1ecb22ffb9865dbb6fd533aa1e813565f707de5b Mon Sep 17 00:00:00 2001
From: Igal Steklov <igal@webiya.co.il>
Date: Thu, 15 Feb 2024 14:54:28 +0200
Subject: [PATCH] Add video block to CMS and Frontend

---
 workspaces/cms-config/src/blocks.ts                | 14 +++++++++++++-
 workspaces/cms-data/src/pages.ts                   |  6 ++++++
 workspaces/website/src/blocks/Block.tsx            |  3 +++
 .../src/components/YoutubePlayer/YoutubePlayer.css |  1 -
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts
index 7735dedaa7..993bd65ec8 100644
--- a/workspaces/cms-config/src/blocks.ts
+++ b/workspaces/cms-config/src/blocks.ts
@@ -438,6 +438,18 @@ export const blocks = [
       }
     ],
   },
+  {
+    name: "youtube",
+    label: "Youtube",
+    widget: "object",
+    fields: [
+      {
+        name: "videoId",
+        widget: "string",
+        crowdin: true
+      }
+    ]
+  },
   {
     name: "ambassadors_list",
     label: "Ambassadors list",
@@ -825,7 +837,7 @@ const flexLayout = {
       default: [],
     },
   ],
-} satisfies CmsField; 
+} satisfies CmsField;
 
 export const topLevelBlocks = [
   {
diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts
index 3efe2ab66d..e156a25d72 100644
--- a/workspaces/cms-data/src/pages.ts
+++ b/workspaces/cms-data/src/pages.ts
@@ -40,6 +40,11 @@ export interface ImageIconLinkCardBlock {
     | "grey";
 }
 
+export interface YoutubeBlock {
+  readonly type: "youtube";
+  readonly videoId: string;
+}
+
 export interface ListCardItems {
   title: string;
   description: string;
@@ -175,6 +180,7 @@ export type Block =
   | CommunityEventsBlock
   | BasicCardBlock
   | ImageIconLinkCardBlock
+  | YoutubeBlock
   | HeroBlock
   | HomeHeroBlock
   | LinkListBlock
diff --git a/workspaces/website/src/blocks/Block.tsx b/workspaces/website/src/blocks/Block.tsx
index 6b6a19e0bf..e15714634a 100644
--- a/workspaces/website/src/blocks/Block.tsx
+++ b/workspaces/website/src/blocks/Block.tsx
@@ -20,6 +20,7 @@ import { usePageContext } from "src/renderer/PageContextProvider";
 import { HeadingContainer } from "./HeadingContainer";
 import VideoSectionBlock from "./VideoSectionBlock";
 import { NewsletterCard } from "@ui/Card/NewsletterCard";
+import { YoutubePlayer } from "@ui/YoutubePlayer/YoutubePlayer";
 
 interface Props {
   disallowH1?: boolean;
@@ -48,6 +49,8 @@ export function Block({ disallowH1, block, env, locale }: Props): JSX.Element |
     );
   } else if (block.type === "image_icon_link_card") {
     return <ImageIconCard {...block} locale={locale} />;
+  } else if (block.type === "youtube") {
+    return <YoutubePlayer videoId={block.videoId} />
   } else if (block.type === "newsletter_popup") {
     return <NewsletterCard {...block} env={env} locale={locale} />;
   } else if (block.type === "markdown") {
diff --git a/workspaces/website/src/components/YoutubePlayer/YoutubePlayer.css b/workspaces/website/src/components/YoutubePlayer/YoutubePlayer.css
index 21cfd3fb52..62cfd20826 100644
--- a/workspaces/website/src/components/YoutubePlayer/YoutubePlayer.css
+++ b/workspaces/website/src/components/YoutubePlayer/YoutubePlayer.css
@@ -4,7 +4,6 @@
   height: 0;
   padding-bottom: 56.25%;
   overflow: hidden;
-  margin-bottom: 50px;
 }
 
 .youtubeContainer iframe {