Feature/strapi video component (#49)

* fix (strapi): add video section with title to partner and product page * feat (video section): connect strapi component with frontend * feat (strapi): video with text section component * feat (video with text section): strapi & frontend
adfinis · Jan 9, 2025 · 363859a · 363859a
1 parent de97e74
commit 363859a
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 2 deletions.
diff --git a/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx b/nextjs/src/app/[locale]/(partners-products)/partners-products.tsx
@@ -14,6 +14,9 @@ import ButtonGroup from "@/components/button-group"
 import NavBar from "@/components/nav-bar/nav-bar"
 import { LinkedLocale } from "@/components/nav-bar/linked-locales-provider"
 import { notFound } from "next/navigation"
+import ExternalScript from "@/components/external-script"
+import SectionCardWide from "@/components/sections/section-card-wide"
+import { youtubeSection } from "@/app/[locale]/theme/texts"
 
 export default async function PartnersProducts({
   activeLocale,
@@ -175,6 +178,42 @@ function dynamicSection(section: any, index: number) {
           </SectionGroup>
         </Container>
       )
+    case "sections.video-section":
+      return (
+        <Container
+          key={`section_video-section_${index}`}
+          background={section.props.background}
+          padding={section.props.padding}
+        >
+          <SectionGroup title={section.section_title}>
+            <ExternalScript
+              html={section.embed_html}
+              className="w-full h-auto"
+            />
+          </SectionGroup>
+        </Container>
+      )
+    case "sections.video-with-text-section":
+      return (
+        <Container
+          key={`section_video-section_${index}`}
+          background={section.props.background}
+          padding={section.props.padding}
+        >
+          <SectionGroup title={section.section_title}>
+            <SectionCardWide
+              childrenWide={
+                <ExternalScript
+                  html={section.embed_html}
+                  className="w-full h-auto"
+                />
+              }
+            >
+              <Text markdown={section.body} />
+            </SectionCardWide>
+          </SectionGroup>
+        </Container>
+      )
     default:
       return <p key={`section_${index}`}>Unknown section</p>
   }

diff --git a/strapi/src/api/page-partner-and-product/content-types/page-partner-and-product/schema.json b/strapi/src/api/page-partner-and-product/content-types/page-partner-and-product/schema.json
@@ -4,7 +4,8 @@
   "info": {
     "singularName": "page-partner-and-product",
     "pluralName": "page-partner-and-products",
-    "displayName": "Page Partner & Product"
+    "displayName": "Page Partner & Product",
+    "description": ""
   },
   "options": {
     "draftAndPublish": true
@@ -73,7 +74,9 @@
         "sections.heading-with-link-container",
         "relations.white-paper-section",
         "relations.quotes-relation",
-        "relations.calendly-section"
+        "relations.calendly-section",
+        "sections.video-section",
+        "sections.video-with-text-section"
       ]
     }
   }

diff --git a/strapi/src/api/page-partner-and-product/middlewares/populate-partner-and-products.ts b/strapi/src/api/page-partner-and-product/middlewares/populate-partner-and-products.ts
@@ -43,6 +43,12 @@ const populate = {
           },
         },
       },
+      'sections.video-section': {
+        populate: '*',
+      },
+      'sections.video-with-text-section': {
+        populate: '*',
+      },
     },
   }
 };

diff --git a/strapi/src/components/sections/video-section.json b/strapi/src/components/sections/video-section.json
@@ -0,0 +1,26 @@
+{
+  "collectionName": "components_sections_video_sections",
+  "info": {
+    "displayName": "Video Section",
+    "icon": "play",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "section_title": {
+      "type": "string",
+      "required": true
+    },
+    "embed_html": {
+      "type": "text",
+      "required": true,
+      "default": "use this tool to embed video https://embedresponsively.com/"
+    },
+    "props": {
+      "type": "component",
+      "repeatable": false,
+      "component": "sections.section-props",
+      "required": true
+    }
+  }
+}
diff --git a/strapi/src/components/sections/video-with-text-section.json b/strapi/src/components/sections/video-with-text-section.json
@@ -0,0 +1,28 @@
+{
+  "collectionName": "components_sections_video_with_text_sections",
+  "info": {
+    "displayName": "Video With Text Section",
+    "icon": "play"
+  },
+  "options": {},
+  "attributes": {
+    "props": {
+      "type": "component",
+      "repeatable": false,
+      "component": "sections.section-props",
+      "required": true
+    },
+    "section_title": {
+      "type": "string",
+      "required": true
+    },
+    "embed_html": {
+      "type": "text",
+      "required": true
+    },
+    "body": {
+      "type": "richtext",
+      "required": true
+    }
+  }
+}
diff --git a/strapi/types/generated/components.d.ts b/strapi/types/generated/components.d.ts
@@ -734,6 +734,38 @@ export interface SectionsTwoColumnSection extends Struct.ComponentSchema {
   };
 }
 
+export interface SectionsVideoSection extends Struct.ComponentSchema {
+  collectionName: 'components_sections_video_sections';
+  info: {
+    description: '';
+    displayName: 'Video Section';
+    icon: 'play';
+  };
+  attributes: {
+    embed_html: Schema.Attribute.Text &
+      Schema.Attribute.Required &
+      Schema.Attribute.DefaultTo<'use this tool to embed video https://embedresponsively.com/'>;
+    props: Schema.Attribute.Component<'sections.section-props', false> &
+      Schema.Attribute.Required;
+    section_title: Schema.Attribute.String & Schema.Attribute.Required;
+  };
+}
+
+export interface SectionsVideoWithTextSection extends Struct.ComponentSchema {
+  collectionName: 'components_sections_video_with_text_sections';
+  info: {
+    displayName: 'Video With Text Section';
+    icon: 'play';
+  };
+  attributes: {
+    body: Schema.Attribute.RichText & Schema.Attribute.Required;
+    embed_html: Schema.Attribute.Text & Schema.Attribute.Required;
+    props: Schema.Attribute.Component<'sections.section-props', false> &
+      Schema.Attribute.Required;
+    section_title: Schema.Attribute.String & Schema.Attribute.Required;
+  };
+}
+
 declare module '@strapi/strapi' {
   export module Public {
     export interface ComponentSchemas {
@@ -778,6 +810,8 @@ declare module '@strapi/strapi' {
       'sections.section-with-richt-heading-intro-and-cta': SectionsSectionWithRichtHeadingIntroAndCta;
       'sections.text-section-with-cta': SectionsTextSectionWithCta;
       'sections.two-column-section': SectionsTwoColumnSection;
+      'sections.video-section': SectionsVideoSection;
+      'sections.video-with-text-section': SectionsVideoWithTextSection;
     }
   }
 }
diff --git a/strapi/types/generated/contentTypes.d.ts b/strapi/types/generated/contentTypes.d.ts
@@ -969,6 +969,7 @@ export interface ApiPagePartnerAndProductPagePartnerAndProduct
   extends Struct.CollectionTypeSchema {
   collectionName: 'page_partner_and_products';
   info: {
+    description: '';
     displayName: 'Page Partner & Product';
     pluralName: 'page-partner-and-products';
     singularName: 'page-partner-and-product';
@@ -1021,6 +1022,8 @@ export interface ApiPagePartnerAndProductPagePartnerAndProduct
         'relations.white-paper-section',
         'relations.quotes-relation',
         'relations.calendly-section',
+        'sections.video-section',
+        'sections.video-with-text-section',
       ]
     > &
       Schema.Attribute.SetPluginOptions<{