Feature/1672 Video Block autoplay option

.changeset/spotty-rockets-sit.md

@@ -0,0 +1,5 @@
+---
+"@explorer-1/vue": patch
+---
+
+Adding option to autoplay/loop video.

packages/vue/src/components/BaseVideo/BaseVideo.vue

@@ -14,7 +14,7 @@
         :muted="autoplay"
         :playsinline="autoplay"
         :autoplay="autoplay"
-        :controls="!autoplay"
+        controls
       >
         <template v-if="data.fileWebm">
           <source

packages/vue/src/components/BlockVideo/BlockVideo.stories.js

@@ -13,7 +13,8 @@ export const BlockVideoData = {
     blockType: 'VideoBlock',
     video: BaseVideoData,
     caption: 'Lorem ipsum dolor sit amet consectatur',
-    credit: 'Credit'
+    credit: 'Credit',
+    autoplay: false
   }
 }
 

packages/vue/src/components/BlockVideo/BlockVideo.vue

@@ -5,7 +5,7 @@
   >
     <BaseVideo
       :data="data.video"
-      :autoplay="autoplay"
+      :autoplay="data.autoplay"
     />
 
     <div

packages/vue/src/components/HeroMedia/HeroMedia.vue

@@ -78,11 +78,11 @@ export default defineComponent({
     // image object includes the image caption and credit
     image: {
       type: Object,
-      required: false
+      default: undefined
     },
     video: {
       type: Object,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -92,11 +92,11 @@ export default defineComponent({
     // for video heroes that pass separate caption and credit data
     caption: {
       type: String,
-      required: false
+      default: undefined
     },
     credit: {
       type: String,
-      required: false
+      default: undefined
     }
   },
   data() {

packages/vue/src/components/MixinVideoBg/MixinVideoBg.stories.js

@@ -4,7 +4,14 @@ import MixinVideoBg from './MixinVideoBg.vue'
 export default {
   title: 'Mixins/MixinVideoBg',
   component: MixinVideoBg,
-  excludeStories: /.*Data$/
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component: 'This mix-in will always autoplay and loop a video.'
+      }
+    }
+  }
 }
 
 export const BaseStory = {

packages/vue/src/components/MixinVideoBg/MixinVideoBg.vue

@@ -5,6 +5,7 @@
     muted
     playsinline
     autoplay
+    controls
     preload="auto"
     class="object-cover w-full h-full"
   >
@@ -32,7 +33,11 @@ export default defineComponent({
   props: {
     video: {
       type: Object,
-      required: false
+      default: undefined
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
     }
   }
 })

packages/vue/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -22,6 +22,7 @@
       class="md:mb-12 lg:mb-18 mb-10"
       :image="data.hero[0].image"
       :video="data.hero[0].video"
+      :autoplay="data.hero[0].autoplay"
       :display-caption="data.hero[0].displayCaption"
       :caption="data.hero[0].caption"
       :credit="data.hero[0].credit"