Add video block to CMS and Frontend

starknet-io · Feb 15, 2024 · 1ecb22f · 1ecb22f
1 parent 53aa35a
commit 1ecb22f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -4,7 +4,6 @@
   height: 0;
   padding-bottom: 56.25%;
   overflow: hidden;
-  margin-bottom: 50px;
 }
 
 .youtubeContainer iframe {