From 3cdd2bf84dffaf56944f2e50196915756f02a16d Mon Sep 17 00:00:00 2001
From: sjoerdbeentjes <11621275+sjoerdbeentjes@users.noreply.github.com>
Date: Wed, 17 Apr 2024 14:50:34 +0200
Subject: [PATCH 1/2] Add video support to Page migration

---
 migrations/1713355135_addVideoToPage.ts | 32 +++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 migrations/1713355135_addVideoToPage.ts

diff --git a/migrations/1713355135_addVideoToPage.ts b/migrations/1713355135_addVideoToPage.ts
new file mode 100644
index 000000000..62c2de0ee
--- /dev/null
+++ b/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: [],
+      },
+    },
+  });
+}

From 3da48e116f77e67445ccbabc5cdbc9c6e154bc90 Mon Sep 17 00:00:00 2001
From: sjoerdbeentjes <11621275+sjoerdbeentjes@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:03:09 +0200
Subject: [PATCH 2/2] Add support for responsive video in structured text

---
 .../responsive-video/responsive-video.vue     |  1 +
 .../structured-text-block.vue                 | 16 ++++++++++++
 src/constants.mjs                             |  2 +-
 .../[language]/[...slug]/index.query.graphql  | 25 +++++++++++++++++--
 4 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/responsive-video/responsive-video.vue b/src/components/responsive-video/responsive-video.vue
index 185e8952d..aac6f1f40 100644
--- a/src/components/responsive-video/responsive-video.vue
+++ b/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')"
   >
diff --git a/src/components/structured-text-block/structured-text-block.vue b/src/components/structured-text-block/structured-text-block.vue
index 26800ad19..b3b644674 100644
--- a/src/components/structured-text-block/structured-text-block.vue
+++ b/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>
diff --git a/src/constants.mjs b/src/constants.mjs
index fff9898e9..368970213 100644
--- a/src/constants.mjs
+++ b/src/constants.mjs
@@ -1,2 +1,2 @@
-export const datocmsEnvironment = 'multilingual-blogs';
+export const datocmsEnvironment = 'video-captions';
 export const mastodonUrl = 'https://fosstodon.org/@devoorhoede';
diff --git a/src/pages/[language]/[...slug]/index.query.graphql b/src/pages/[language]/[...slug]/index.query.graphql
index d19de9e5d..20e9e0356 100644
--- a/src/pages/[language]/[...slug]/index.query.graphql
+++ b/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
             }