Feat/BOOK-257 videoplayer with card

* feat(BOOK-257): Added VideoPlayer with card component
* feat(BOOK-257): Added queries and component for VideoCard block to Content and Collection pages
* fix(BOOK-257): Only setting object-fit: cover on the video if it is not fullscreen
* feat(BOOK-257): Added queries and component for VideoCard block to Startpage
* feat(BOOK-257): Added queries and component for Video block to content/collection/start page

Approved-by: Chuma Mcphoy (We Ahead)

packages/trpc/lib/routers/contentstack/contentPage/output.ts

@@ -28,6 +28,11 @@ import {
 import { tableSchema } from "../schemas/blocks/table"
 import { textColsRefsSchema, textColsSchema } from "../schemas/blocks/textCols"
 import { uspGridRefsSchema, uspGridSchema } from "../schemas/blocks/uspGrid"
+import { videoBlockRefsSchema, videoBlockSchema } from "../schemas/blocks/video"
+import {
+  videoCardRefsSchema,
+  videoCardSchema,
+} from "../schemas/blocks/videoCard"
 import {
   dynamicContentRefsSchema as headerDynamicContentRefsSchema,
   dynamicContentSchema as headerDynamicContentSchema,
@@ -116,6 +121,18 @@ export const contentPageHotelListing = z
   })
   .merge(contentPageHotelListingSchema)
 
+export const contentPageVideoCard = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.blocks.VideoCard),
+  })
+  .merge(videoCardSchema)
+
+export const contentPageVideo = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.blocks.Video),
+  })
+  .merge(videoBlockSchema)
+
 export const blocksSchema = z.discriminatedUnion("__typename", [
   contentPageAccordion,
   contentPageCards,
@@ -126,6 +143,8 @@ export const blocksSchema = z.discriminatedUnion("__typename", [
   contentPageTextCols,
   contentPageUspGrid,
   contentPageHotelListing,
+  contentPageVideoCard,
+  contentPageVideo,
 ])
 
 export const contentPageSidebarContent = z
@@ -267,6 +286,18 @@ const contentPageAccordionRefs = z
   })
   .merge(accordionRefsSchema)
 
+const contentPageVideoCardRefs = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.blocks.VideoCard),
+  })
+  .merge(videoCardRefsSchema)
+
+const contentPageVideoRefs = z
+  .object({
+    __typename: z.literal(ContentPageEnum.ContentStack.blocks.Video),
+  })
+  .merge(videoBlockRefsSchema)
+
 const contentPageBlockRefsItem = z.discriminatedUnion("__typename", [
   contentPageAccordionRefs,
   contentPageBlockContentRefs,
@@ -275,6 +306,8 @@ const contentPageBlockRefsItem = z.discriminatedUnion("__typename", [
   contentPageDynamicContentRefs,
   contentPageTextColsRefs,
   contentPageUspGridRefs,
+  contentPageVideoCardRefs,
+  contentPageVideoRefs,
 ])
 
 const contentPageSidebarContentRef = z

packages/trpc/lib/routers/contentstack/contentPage/utils.ts

@@ -21,7 +21,7 @@ import type {
   ContentPageRefs,
   GetContentPageRefsSchema,
 } from "../../../types/contentPage"
-import type { System } from "../schemas/system"
+import type { AssetSystem, System } from "../schemas/system"
 
 export async function fetchContentPageRefs(lang: Lang, uid: string) {
   const getContentPageRefsCounter = createCounter(
@@ -74,25 +74,58 @@ export function generatePageTags(
   lang: Lang
 ): string[] {
   const connections = getConnections(validatedData)
+  const assetConnections = getConnectionsFromAssets(validatedData)
   return [
     generateTagsFromSystem(lang, connections),
-    generateTagsFromAssetSystem(connections),
+    generateTagsFromAssetSystem(assetConnections),
     generateTag(lang, validatedData.content_page.system.uid),
   ].flat()
 }
 
+export function getConnectionsFromAssets({ content_page }: ContentPageRefs) {
+  const connections: AssetSystem["system"][] = []
+
+  if (content_page.hero_video?.sourceConnection.edges[0]) {
+    connections.push(
+      content_page.hero_video.sourceConnection.edges[0].node.system
+    )
+  }
+
+  if (content_page.blocks) {
+    content_page.blocks.forEach((block) => {
+      switch (block.__typename) {
+        case ContentPageEnum.ContentStack.blocks.VideoCard:
+          if (block.video_card?.video.sourceConnection.edges[0]) {
+            connections.push(
+              block.video_card.video.sourceConnection.edges[0].node.system
+            )
+          }
+          break
+        case ContentPageEnum.ContentStack.blocks.Video:
+          if (block.video?.sourceConnection.edges[0]) {
+            connections.push(block.video.sourceConnection.edges[0].node.system)
+          }
+          break
+        default:
+          break
+      }
+    })
+  }
+  return connections
+}
+
 export function getConnections({ content_page }: ContentPageRefs) {
   const connections: System["system"][] = [content_page.system]
 
   if (content_page.blocks) {
     content_page.blocks.forEach((block) => {
-      switch (block.__typename) {
-        case ContentPageEnum.ContentStack.blocks.Accordion: {
+      const typeName = block.__typename
+      switch (typeName) {
+        case ContentPageEnum.ContentStack.blocks.Accordion:
           if (block.accordion.length) {
             connections.push(...block.accordion.filter((c) => !!c))
           }
           break
-        }
         case ContentPageEnum.ContentStack.blocks.Content:
           {
             if (block?.content?.length) {
@@ -100,51 +133,56 @@ export function getConnections({ content_page }: ContentPageRefs) {
             }
           }
           break
-        case ContentPageEnum.ContentStack.blocks.CardsGrid: {
+        case ContentPageEnum.ContentStack.blocks.CardsGrid:
           if (block.cards_grid.length) {
             connections.push(...block.cards_grid)
           }
           break
-        }
-        case ContentPageEnum.ContentStack.blocks.DynamicContent: {
+        case ContentPageEnum.ContentStack.blocks.DynamicContent:
           if (block.dynamic_content.link) {
             connections.push(block.dynamic_content.link)
           }
           break
-        }
-        case ContentPageEnum.ContentStack.blocks.Shortcuts: {
+        case ContentPageEnum.ContentStack.blocks.Shortcuts:
           if (block.shortcuts.shortcuts.length) {
             connections.push(...block.shortcuts.shortcuts.filter((c) => !!c))
           }
           break
-        }
-        case ContentPageEnum.ContentStack.blocks.TextCols: {
+        case ContentPageEnum.ContentStack.blocks.TextCols:
           if (block.text_cols.length) {
             connections.push(...block.text_cols)
           }
           break
-        }
-        case ContentPageEnum.ContentStack.blocks.UspGrid: {
+        case ContentPageEnum.ContentStack.blocks.UspGrid:
           if (block.usp_grid.length) {
             connections.push(...block.usp_grid.filter((c) => !!c))
           }
           break
-        }
-        case ContentPageEnum.ContentStack.blocks.CardsGrid: {
+        case ContentPageEnum.ContentStack.blocks.CardsGrid:
           if (block.cards_grid.length) {
             block.cards_grid.forEach((card) => {
               connections.push(card)
             })
           }
           break
-        }
+        case ContentPageEnum.ContentStack.blocks.VideoCard:
+          if (block.video_card) {
+            connections.push(block.video_card.system)
+          }
+          break
+        case ContentPageEnum.ContentStack.blocks.Video:
+          break
+        default:
+          const _exhaustiveCheck: never = typeName
+          break
       }
     })
   }
 
   if (content_page.sidebar) {
     content_page.sidebar.forEach((block) => {
-      switch (block.__typename) {
+      const typeName = block.__typename
+      switch (typeName) {
         case ContentPageEnum.ContentStack.sidebar.Content:
           if (block.content.length) {
             connections.push(...block.content.filter((c) => !!c))
@@ -171,6 +209,7 @@ export function getConnections({ content_page }: ContentPageRefs) {
           }
           break
         default:
+          const _exhaustiveCheck: never = typeName
           break
       }
     })