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/collectionPage/output.ts

@@ -17,6 +17,11 @@ import {
   shortcutsSchema,
 } from "../schemas/blocks/shortcuts"
 import { uspGridRefsSchema, uspGridSchema } from "../schemas/blocks/uspGrid"
+import { videoBlockRefsSchema, videoBlockSchema } from "../schemas/blocks/video"
+import {
+  videoCardRefsSchema,
+  videoCardSchema,
+} from "../schemas/blocks/videoCard"
 import {
   linkAndTitleSchema,
   linkConnectionRefs,
@@ -52,11 +57,25 @@ export const collectionPageDynamicContent = z
   })
   .merge(blockDynamicContentSchema)
 
+export const collectionPageVideoCard = z
+  .object({
+    __typename: z.literal(CollectionPageEnum.ContentStack.blocks.VideoCard),
+  })
+  .merge(videoCardSchema)
+
+export const collectionPageVideo = z
+  .object({
+    __typename: z.literal(CollectionPageEnum.ContentStack.blocks.Video),
+  })
+  .merge(videoBlockSchema)
+
 export const blocksSchema = z.discriminatedUnion("__typename", [
   collectionPageCards,
   collectionPageDynamicContent,
   collectionPageShortcuts,
   collectionPageUspGrid,
+  collectionPageVideoCard,
+  collectionPageVideo,
 ])
 
 const navigationLinksSchema = z
@@ -125,7 +144,7 @@ const collectionPageUspGridRefs = z
   })
   .merge(uspGridRefsSchema)
 
-const contentPageDynamicContentRefs = z
+const collectionPageDynamicContentRefs = z
   .object({
     __typename: z.literal(
       CollectionPageEnum.ContentStack.blocks.DynamicContent
@@ -133,11 +152,25 @@ const contentPageDynamicContentRefs = z
   })
   .merge(dynamicContentRefsSchema)
 
+const collectionPageVideoCardRefs = z
+  .object({
+    __typename: z.literal(CollectionPageEnum.ContentStack.blocks.VideoCard),
+  })
+  .merge(videoCardRefsSchema)
+
+const collectionPageVideoRefs = z
+  .object({
+    __typename: z.literal(CollectionPageEnum.ContentStack.blocks.Video),
+  })
+  .merge(videoBlockRefsSchema)
+
 const collectionPageBlockRefsItem = z.discriminatedUnion("__typename", [
   collectionPageShortcutsRefs,
-  contentPageDynamicContentRefs,
+  collectionPageDynamicContentRefs,
   collectionPageCardsRefs,
   collectionPageUspGridRefs,
+  collectionPageVideoCardRefs,
+  collectionPageVideoRefs,
 ])
 
 const collectionPageHeaderRefs = z.object({

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

@@ -18,7 +18,7 @@ import { collectionPageRefsSchema } from "./output"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
 
-import type { System } from "../schemas/system"
+import type { AssetSystem, System } from "../schemas/system"
 
 export async function fetchCollectionPageRefs(lang: Lang, uid: string) {
   const getCollectionPageRefsCounter = createCounter(
@@ -83,35 +83,81 @@ 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.collection_page.system.uid),
   ].flat()
 }
 
-export function getConnections({ collection_page }: CollectionPageRefs) {
-  const connections: System["system"][] = [collection_page.system]
+export function getConnectionsFromAssets({
+  collection_page,
+}: CollectionPageRefs) {
+  const connections: AssetSystem["system"][] = []
+
+  if (collection_page.hero_video?.sourceConnection.edges[0]) {
+    connections.push(
+      collection_page.hero_video.sourceConnection.edges[0].node.system
+    )
+  }
+
   if (collection_page.blocks) {
     collection_page.blocks.forEach((block) => {
       switch (block.__typename) {
-        case CollectionPageEnum.ContentStack.blocks.Shortcuts: {
-          if (block.shortcuts.shortcuts.length) {
-            connections.push(...block.shortcuts.shortcuts.filter((c) => !!c))
+        case CollectionPageEnum.ContentStack.blocks.VideoCard:
+          if (block.video_card?.video.sourceConnection.edges[0]) {
+            connections.push(
+              block.video_card.video.sourceConnection.edges[0].node.system
+            )
           }
           break
-        }
-        case CollectionPageEnum.ContentStack.blocks.CardsGrid: {
-          if (block.cards_grid.length) {
-            connections.push(...block.cards_grid)
+        case CollectionPageEnum.ContentStack.blocks.Video:
+          if (block.video?.sourceConnection.edges[0]) {
+            connections.push(block.video.sourceConnection.edges[0].node.system)
           }
           break
-        }
-        case CollectionPageEnum.ContentStack.blocks.UspGrid: {
-          if (block.usp_grid.length) {
-            connections.push(...block.usp_grid.filter((c) => !!c))
-          }
-        }
+        default:
+          break
+      }
+    })
+  }
+
+  return connections
+}
+
+export function getConnections({ collection_page }: CollectionPageRefs) {
+  const connections: System["system"][] = [collection_page.system]
+  if (collection_page.blocks) {
+    collection_page.blocks.forEach((block) => {
+      const typeName = block.__typename
+      switch (typeName) {
+        case CollectionPageEnum.ContentStack.blocks.Shortcuts:
+          if (block.shortcuts.shortcuts.length) {
+            connections.push(...block.shortcuts.shortcuts.filter((c) => !!c))
+          }
+          break
+        case CollectionPageEnum.ContentStack.blocks.CardsGrid:
+          if (block.cards_grid.length) {
+            connections.push(...block.cards_grid)
+          }
+          break
+        case CollectionPageEnum.ContentStack.blocks.UspGrid:
+          if (block.usp_grid.length) {
+            connections.push(...block.usp_grid.filter((c) => !!c))
+          }
+          break
+        case CollectionPageEnum.ContentStack.blocks.VideoCard:
+          if (block.video_card?.system) {
+            connections.push(block.video_card.system)
+          }
+          break
+        case CollectionPageEnum.ContentStack.blocks.DynamicContent:
+        case CollectionPageEnum.ContentStack.blocks.Video:
+          break
+        default:
+          const _exhaustiveCheck: never = typeName
+          break
       }
     })
   }