Merge pull request #2771 from owid/video-autoplay

Video autoplay
owid · Oct 16, 2023 · b5ccd01 · b5ccd01
2 parents db8f0c3 + 77209cd
commit b5ccd01
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}

diff --git 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;
 }