Merge pull request #95 from casper-network/section-block-video-support

ADDED: video support in section block
casper-network · Jul 26, 2024 · 60db79a · 60db79a
2 parents 876f2fc + d18565b
commit 60db79a
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 6 deletions.
diff --git a/src/components/blocks/TextTeaser.vue b/src/components/blocks/TextTeaser.vue
@@ -7,6 +7,13 @@
       <div>
         <h1 v-if="setAsH1" class="h1" v-html="boxTitle" :data-slug="slugged" />
         <h2 v-else class="h1" v-html="boxTitle" :data-slug="slugged" />
+        <VideoPlayer
+          v-if="mergeVideo && hasVideo"
+          class=""
+          :thumb="video.thumbnail"
+          :provider="video.service"
+          :video-id="video.id"
+        />
         <p v-html="boxContent"></p>
         <Button class="primary" v-if="hasButton">
           <router-link v-if="button.type === 'int'" :to="`/${$i18n.locale}${button.url}`">
@@ -24,8 +31,15 @@
         </Button>
 
       </div>
-      <div>
-        <MediaImage v-if="image" :asset="image" />
+      <div v-if="!mergeVideo && (image || hasVideo)" :class="{ video: hasVideo }">
+        <div v-if="hasVideo" class="video-wrapper">
+          <VideoPlayer
+            :thumb="video.thumbnail"
+            :provider="video.service"
+            :video-id="video.id"
+          />
+        </div>
+        <MediaImage v-else-if="image" :asset="image" />
       </div>
     </div>
   </div>
@@ -83,6 +97,10 @@ export default {
       type: Array,
       default: null,
     },
+    video: {
+      type: Object,
+      default: null,
+    },
     variation: {
       type: String,
       default: 'text-left',
@@ -139,6 +157,10 @@ export default {
       }
       return null;
     },
+    hasVideo() {
+      const { id } = this.video || {};
+      return !!id;
+    },
     hasFile() {
       const { file } = this;
       return file && file.id && file.text;
@@ -151,6 +173,9 @@ export default {
       const title = (this.boxTitle || '').replace(/<\/?[^>]+(>|$)/g, '');
       return slugify(title, { lower: true, strict: true });
     },
+    mergeVideo() {
+      return (this.hasVideo && this.$d.clientWidth <= 1241);
+    },
   },
   //---------------------------------------------------
   //
@@ -242,9 +267,39 @@ export default {
         max-width: 400px;
         height: auto;
       }
+
+      &.video {
+        align-self: flex-start;
+        & > .video-wrapper {
+          position: relative;
+          margin-top: 25px;
+          width: 100%;
+          height: auto;
+          aspect-ratio: 16/9;
+
+          & > .video-container {
+            padding: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 25vw;
+            min-width: 440px;
+          }
+        }
+      }
     }
 
-    @include breakpoint('sm') {
+    & > div:only-child {
+      display: block;
+      width: 100%;
+      margin: 0 auto;
+
+      .video-container {
+        padding: 5px 0;
+      }
+    }
+
+    @include breakpoint('m') {
       flex-direction: column;
       padding-top: 45px;
       // padding-bottom: 45px;
@@ -336,9 +391,39 @@ export default {
           max-width: 400px;
           height: auto;
         }
+
+        &.video {
+          align-self: flex-start;
+          & > .video-wrapper {
+            position: relative;
+            width: 100%;
+            height: auto;
+            aspect-ratio: 16/9;
+
+            & > .video-container {
+              position: absolute;
+              padding: 0;
+              top: 0;
+              left: auto;
+              right: 0;
+              width: 25vw;
+              min-width: 440px;
+            }
+          }
+        }
       }
 
-      @include breakpoint('sm') {
+      & > div:only-child {
+        display: block;
+        width: 100%;
+        margin: 0 auto;
+
+        .video-container {
+          padding: 5px 0;
+        }
+      }
+
+      @include breakpoint('m') {
         flex-direction: column;
         padding-top: 45px;
 

diff --git a/src/components/blocks/VideoPlayer.vue b/src/components/blocks/VideoPlayer.vue
@@ -258,8 +258,9 @@ div[data-vimeo-initialized="true"] {
     display: block;
     left: 50%;
     top: 50%;
-    width: 120px;
-    height: 120px;
+    width: 15%;
+    height: auto;
+    max-width: 120px;
     z-index: 2000;
     cursor: pointer;
     backface-visibility: hidden;

diff --git a/src/views/PageFactory.vue b/src/views/PageFactory.vue
@@ -28,6 +28,7 @@
         :text-color="block.txtcolor"
         :link-color="block.linkcolor"
         :media="block.media"
+        :video="block.video"
         :variation="block.variation"
       />
       <Codeblock