From 065e70810c4903ac70db907210ab46fac2ea71dd Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Mon, 16 Oct 2023 09:34:42 -0400
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20add=20shouldAutoplay=20prop=20t?=
 =?UTF-8?q?o=20videos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 db/model/Gdoc/exampleEnrichedBlocks.ts          |  1 +
 db/model/Gdoc/rawToEnriched.ts                  | 15 +++++++++++++++
 packages/@ourworldindata/utils/src/owidTypes.ts |  2 ++
 site/gdocs/ArticleBlock.tsx                     |  1 +
 site/gdocs/Video.tsx                            | 12 ++++++++++--
 5 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/db/model/Gdoc/exampleEnrichedBlocks.ts b/db/model/Gdoc/exampleEnrichedBlocks.ts
index 193ef903482..e63c8169da4 100644
--- a/db/model/Gdoc/exampleEnrichedBlocks.ts
+++ b/db/model/Gdoc/exampleEnrichedBlocks.ts
@@ -160,6 +160,7 @@ export const enrichedBlockExamples: Record<
         filename: "https://ourworldindata.org/assets/images/example-poster.jpg",
         caption: boldLinkExampleText,
         shouldLoop: true,
+        shouldAutoplay: false,
         parseErrors: [],
     },
     list: {
diff --git a/db/model/Gdoc/rawToEnriched.ts b/db/model/Gdoc/rawToEnriched.ts
index 25bfacf8eda..2814c4c34db 100644
--- a/db/model/Gdoc/rawToEnriched.ts
+++ b/db/model/Gdoc/rawToEnriched.ts
@@ -557,12 +557,14 @@ const parseVideo = (raw: RawBlockVideo): EnrichedBlockVideo => {
         url: string = "",
         filename: string = "",
         shouldLoop: boolean = false,
+        shouldAutoplay: boolean = false,
         caption?: Span[]
     ): EnrichedBlockVideo => ({
         type: "video",
         url,
         filename,
         shouldLoop,
+        shouldAutoplay,
         caption,
         parseErrors: [error],
     })
@@ -594,6 +596,18 @@ const parseVideo = (raw: RawBlockVideo): EnrichedBlockVideo => {
         })
     }
 
+    const shouldAutoplay = raw.value.shouldAutoplay
+    if (
+        !!shouldAutoplay &&
+        shouldAutoplay !== "true" &&
+        shouldAutoplay !== "false"
+    ) {
+        return createError({
+            message:
+                "If specified, shouldAutoplay property must be true or false",
+        })
+    }
+
     const caption = raw.value.caption
         ? htmlToSpans(raw.value.caption)
         : undefined
@@ -604,6 +618,7 @@ const parseVideo = (raw: RawBlockVideo): EnrichedBlockVideo => {
         filename,
         caption,
         shouldLoop: shouldLoop === "true",
+        shouldAutoplay: shouldAutoplay === "true",
         parseErrors: [],
     }
 }
diff --git a/packages/@ourworldindata/utils/src/owidTypes.ts b/packages/@ourworldindata/utils/src/owidTypes.ts
index c70f60dfb8a..a2a88d4d904 100644
--- a/packages/@ourworldindata/utils/src/owidTypes.ts
+++ b/packages/@ourworldindata/utils/src/owidTypes.ts
@@ -688,6 +688,7 @@ export type RawBlockVideo = {
         url?: string
         caption?: string
         shouldLoop?: string
+        shouldAutoplay?: string
         filename?: string
     }
 }
@@ -696,6 +697,7 @@ export type EnrichedBlockVideo = {
     type: "video"
     url: string
     shouldLoop: boolean
+    shouldAutoplay: boolean
     filename: string
     caption?: Span[]
 } & EnrichedBlockWithParseErrors
diff --git a/site/gdocs/ArticleBlock.tsx b/site/gdocs/ArticleBlock.tsx
index 1ff60cba899..36b156e1b63 100644
--- a/site/gdocs/ArticleBlock.tsx
+++ b/site/gdocs/ArticleBlock.tsx
@@ -240,6 +240,7 @@ export default function ArticleBlock({
                 className={getLayout("video", containerType)}
                 url={block.url}
                 shouldLoop={block.shouldLoop}
+                shouldAutoplay={block.shouldAutoplay}
                 caption={block.caption}
                 filename={block.filename}
             />
diff --git a/site/gdocs/Video.tsx b/site/gdocs/Video.tsx
index 0d9bc8838af..2f77d02e09a 100644
--- a/site/gdocs/Video.tsx
+++ b/site/gdocs/Video.tsx
@@ -13,18 +13,26 @@ interface VideoProps {
     caption?: Span[]
     className?: string
     shouldLoop?: boolean
+    shouldAutoplay?: boolean
     filename: string
 }
 
 export default function Video(props: VideoProps) {
-    const { url, caption, className, shouldLoop, filename } = props
+    const { url, caption, className, shouldLoop, shouldAutoplay, filename } =
+        props
     const { isPreviewing } = useContext(DocumentContext)
     const posterSrc = isPreviewing
         ? `${IMAGE_HOSTING_CDN_URL}/${IMAGE_HOSTING_BUCKET_SUBFOLDER_PATH}/${filename}`
         : `${IMAGES_DIRECTORY}${filename}`
     return (
         <figure className={cx(className)}>
-            <video controls preload="none" loop={shouldLoop} poster={posterSrc}>
+            <video
+                controls
+                autoPlay={shouldAutoplay}
+                preload={shouldAutoplay ? "auto" : "none"}
+                loop={shouldLoop}
+                poster={posterSrc}
+            >
                 <source src={url} type="video/mp4" />
             </video>
             {caption ? <figcaption>{renderSpans(caption)}</figcaption> : null}

From 77209cd604a09311180b2f17d9cceb4c1de3822e Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Mon, 16 Oct 2023 09:34:55 -0400
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20harmonize=20image=20and=20video?=
 =?UTF-8?q?=20caption=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/gdocs/centered-article.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/gdocs/centered-article.scss b/site/gdocs/centered-article.scss
index c7b3f70cc94..584d0d51b86 100644
--- a/site/gdocs/centered-article.scss
+++ b/site/gdocs/centered-article.scss
@@ -130,6 +130,9 @@ h3.article-block__heading {
 
 .article-block__video {
     margin: 24px 0 32px 0;
+    @include body-3-medium-italic;
+    color: $blue-60;
+    text-align: center;
     a {
         @include owid-link-90;
     }
@@ -150,6 +153,7 @@ h3.article-block__heading {
 
 .article-block__image-caption {
     @include body-3-medium-italic;
+    color: $blue-60;
     text-align: center;
 }