Merge pull request #915 from Shinsina/related-videos-leaders

Allow use of Base Videos in Featured Videos section of Leaders Data card when `featureYoutubeVideos` is false
parameter1 · May 22, 2024 · 4b544b2 · 4b544b2
2 parents b5f397c + 474bf8c
commit 4b544b2
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 2 deletions.
diff --git a/packages/leaders-program/src/components/card/index.vue b/packages/leaders-program/src/components/card/index.vue
@@ -54,7 +54,12 @@
           />
         </template>
       </content-deck>
-      <content-deck :value="videos" :limit="3" :item-modifiers="['video']">
+      <content-deck
+        v-if="featureYoutubeVideos"
+        :value="videos"
+        :limit="3"
+        :item-modifiers="['video']"
+      >
         <template #header-left>
           Featured Videos
         </template>
@@ -76,6 +81,33 @@
           />
         </template>
       </content-deck>
+      <content-deck
+        v-else
+        :value="relatedVideos"
+        :limit="3"
+        :item-modifiers="['video']"
+      >
+        <template #header-left>
+          Featured Videos
+        </template>
+        <template #header-right>
+          <view-more
+            label="videos"
+            :href="profileHref"
+            target="_blank"
+            @click="handleAllVideosClick"
+          />
+        </template>
+        <template #default="{ item }">
+          <video-card
+            :video-id="convertToString(item.id)"
+            :title="item.name"
+            :href="item.canonicalPath"
+            :image-src="get(item, 'primaryImage.src')"
+            @click="handleVideoClick"
+          />
+        </template>
+      </content-deck>
     </div>
   </div>
 </template>
@@ -116,6 +148,10 @@ export default {
       type: String,
       default: 'Featured Products',
     },
+    featureYoutubeVideos: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   computed: {
@@ -137,11 +173,14 @@ export default {
     promotions() {
       return getEdgeNodes(this.company, 'promotions');
     },
+    relatedVideos() {
+      return getEdgeNodes(this.company, 'relatedVideos');
+    },
     videos() {
       return getEdgeNodes(this.company, 'videos');
     },
     displayBody() {
-      return Boolean(this.promotions.length || this.videos.length);
+      return Boolean(this.promotions.length || this.videos.length || this.relatedVideos.length);
     },
     displayRightHeader() {
       return this.displayRightTopHeader || this.displayRightBottomHeader;
@@ -168,6 +207,9 @@ export default {
   },
 
   methods: {
+    convertToString(value) {
+      return String(value);
+    },
     get(obj, path) {
       return get(obj, path);
     },

diff --git a/packages/leaders-program/src/components/containers/section-wrapper.vue b/packages/leaders-program/src/components/containers/section-wrapper.vue
@@ -27,6 +27,7 @@
             :promotion-limit="promotionLimit"
             :video-limit="videoLimit"
             :featured-product-label="featuredProductLabel"
+            :feature-youtube-videos="featureYoutubeVideos"
             :icon-style="iconStyle"
             @action="emitAction"
           />
@@ -117,6 +118,10 @@ export default {
       type: String,
       default: 'Featured Products',
     },
+    featureYoutubeVideos: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   computed: {

diff --git a/packages/leaders-program/src/components/containers/section.vue b/packages/leaders-program/src/components/containers/section.vue
@@ -37,6 +37,7 @@
             :company="item"
             :is-active="isActive"
             :featured-product-label="featuredProductLabel"
+            :feature-youtube-videos="featureYoutubeVideos"
             @action="emitAction"
           />
         </template>
@@ -114,6 +115,10 @@ export default {
       type: String,
       default: 'Featured Products',
     },
+    featureYoutubeVideos: {
+      type: Boolean,
+      default: true,
+    },
     iconStyle: {
       type: String,
       default: 'plus-minus',

diff --git a/packages/leaders-program/src/components/leaders.vue b/packages/leaders-program/src/components/leaders.vue
@@ -36,6 +36,7 @@
         :promotion-limit="promotionLimit"
         :video-limit="videoLimit"
         :featured-product-label="featuredProductLabel"
+        :feature-youtube-videos="featureYoutubeVideos"
         :icon-style="iconStyle"
         @action="emitAction"
       />
@@ -188,6 +189,10 @@ export default {
       type: String,
       default: 'Featured Products',
     },
+    featureYoutubeVideos: {
+      type: Boolean,
+      default: true,
+    },
     iconStyle: {
       type: String,
       default: 'plus-minus',

diff --git a/packages/leaders-program/src/graphql/queries/content-for-section.js b/packages/leaders-program/src/graphql/queries/content-for-section.js
@@ -117,6 +117,34 @@ query ContentForLeadersSection(
               }
             }
           }
+          relatedVideos: relatedContent(input: {
+            withSite: false,
+            queryTypes: [company],
+            includeContentTypes: [Video],
+            pagination: { limit: $videoLimit },
+            requiresImage: true,
+          }) {
+            edges {
+              node {
+                id
+                name
+                primaryImage{
+                  id
+                  src(input: {
+                    options: {
+                      auto: "format",
+                      fit: "crop",
+                      h: 180,
+                      w: 240,
+                    }
+                  })
+                  alt
+                  isLogo
+                }
+                canonicalPath
+              }
+            }
+          }
         }
       }
     }