Add video to structured text in page model

migrations/1713355135_addVideoToPage.ts

@@ -0,0 +1,32 @@
+import { Client } from "@datocms/cli/lib/cma-client-node";
+
+export default async function (client: Client) {
+  console.log("Update existing fields/fieldsets");
+
+  console.log(
+    'Update Structured text field "Body" (`body`) in block model "Section Structured Text" (`section_structured_text`)'
+  );
+  await client.fields.update("10483125", {
+    validators: {
+      required: {},
+      structured_text_blocks: {
+        item_types: [
+          "41672",
+          "44361",
+          "1775016",
+          "1939441",
+          "1939442",
+          "2040400",
+          "2040401",
+          "2040408",
+        ],
+      },
+      structured_text_links: {
+        on_publish_with_unpublished_references_strategy: "fail",
+        on_reference_unpublish_strategy: "delete_references",
+        on_reference_delete_strategy: "delete_references",
+        item_types: [],
+      },
+    },
+  });
+}

src/components/responsive-video/responsive-video.vue

@@ -1,6 +1,7 @@
 <template>
   <vue-dato-video
     class="responsive-video"
+    :class="$attrs.class"
     v-bind="props"
     :play-icon-alt="$t('play_video')"
   >

src/components/structured-text-block/structured-text-block.vue

@@ -30,6 +30,7 @@
   import ImageWithCaption from '../image-with-caption/image-with-caption.vue'
   import StructuredTextBlock from './structured-text-block.vue'
   import TwoColumnBlock from '../two-column-block/two-column-block.vue';
+  import ResponsiveVideo from '../responsive-video/responsive-video.vue';
 
   const props = defineProps({
     content: {
@@ -156,6 +157,17 @@
           },
         })
       }
+      case 'ResponsiveVideoRecord': {
+        return h(ResponsiveVideo, {
+          class: 'structured-text__responsive-video',
+          key,
+          video: record.video,
+          gif: record.gif,
+          autoplay: record.autoplay,
+          loop: record.loop,
+          mute: record.mute,
+        })
+      }
       case 'StructuredTextImageRecord': {
         return h(ImageWithCaption, {
           class: {
@@ -352,4 +364,8 @@
     margin-top: var(--spacing-tiny);
     margin-bottom: 0;
   }
+
+  .structured-text__responsive-video {
+    margin: 0 auto;
+  }
 </style>

src/constants.mjs

@@ -1,2 +1,2 @@
-export const datocmsEnvironment = 'multilingual-blogs';
+export const datocmsEnvironment = 'video-captions';
 export const mastodonUrl = 'https://fosstodon.org/@devoorhoede';

src/pages/[language]/[...slug]/index.query.graphql

@@ -1,5 +1,5 @@
 query Page($locale: SiteLocale, $slug: String) {
-  page: page(locale: $locale, filter: {slug: {eq: $slug}}) {
+  page: page(locale: $locale, filter: { slug: { eq: $slug } }) {
     title
     slug
     social {
@@ -95,7 +95,7 @@ query Page($locale: SiteLocale, $slug: String) {
           ...link
         }
       }
-      ...on SectionStructuredTextRecord {
+      ... on SectionStructuredTextRecord {
         gridAlignment
         hasToc
         backgroundColor
@@ -144,6 +144,27 @@ query Page($locale: SiteLocale, $slug: String) {
               }
               captionPosition
             }
+            ... on ResponsiveVideoRecord {
+              id
+              mute
+              loop
+              autoplay
+              video {
+                url
+                title
+                height
+                width
+                provider
+                providerUid
+                thumbnailUrl
+              }
+              gif {
+                url
+                title
+                width
+                height
+              }
+            }
             ... on StructuredTextImageRecord {
               ...structuredTextImage
             }