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

@@ -19,6 +19,11 @@ import {
   joinScandicFriendsBlockRefsSchema,
   joinScandicFriendsBlockSchema,
 } from "../schemas/blocks/joinScandicFriends"
+import { videoBlockRefsSchema, videoBlockSchema } from "../schemas/blocks/video"
+import {
+  videoCardRefsSchema,
+  videoCardSchema,
+} from "../schemas/blocks/videoCard"
 import { systemSchema } from "../schemas/system"
 import { StartPageEnum } from "./utils"
 
@@ -46,11 +51,25 @@ const startPageJoinScandicFriends = z
   })
   .merge(joinScandicFriendsBlockSchema)
 
+const startPageVideoCard = z
+  .object({
+    __typename: z.literal(StartPageEnum.ContentStack.blocks.VideoCard),
+  })
+  .merge(videoCardSchema)
+
+const startPageVideo = z
+  .object({
+    __typename: z.literal(StartPageEnum.ContentStack.blocks.Video),
+  })
+  .merge(videoBlockSchema)
+
 export const blocksSchema = z.discriminatedUnion("__typename", [
   startPageCards,
   startPageFullWidthCampaign,
   startPageCarouselCards,
   startPageJoinScandicFriends,
+  startPageVideoCard,
+  startPageVideo,
 ])
 
 export const startPageSchema = z.object({
@@ -100,11 +119,25 @@ const startPageJoinScandicFriendsRef = z
   })
   .merge(joinScandicFriendsBlockRefsSchema)
 
+const startPageVideoCardRef = z
+  .object({
+    __typename: z.literal(StartPageEnum.ContentStack.blocks.VideoCard),
+  })
+  .merge(videoCardRefsSchema)
+
+const startPageVideoRef = z
+  .object({
+    __typename: z.literal(StartPageEnum.ContentStack.blocks.Video),
+  })
+  .merge(videoBlockRefsSchema)
+
 const startPageBlockRefsItem = z.discriminatedUnion("__typename", [
   startPageCardsRefs,
   startPageFullWidthCampaignRef,
   startPageCarouselCardsRef,
   startPageJoinScandicFriendsRef,
+  startPageVideoCardRef,
+  startPageVideoRef,
 ])
 
 export const startPageRefsSchema = z.object({

packages/trpc/lib/routers/contentstack/startPage/query.ts

@@ -11,10 +11,11 @@ import { contentstackExtendedProcedureUID } from "../../../procedures"
 import {
   generateRefsResponseTag,
   generateTag,
+  generateTagsFromAssetSystem,
   generateTagsFromSystem,
 } from "../../../utils/generateTag"
 import { startPageRefsSchema, startPageSchema } from "./output"
-import { getConnections } from "./utils"
+import { getConnections, getConnectionsFromAssets } from "./utils"
 
 import type { z } from "zod"
 
@@ -73,9 +74,11 @@ export const startPageQueryRouter = router({
     metricsGetStartPage.start()
 
     const connections = getConnections(validatedRefsData.data)
+    const assetConnections = getConnectionsFromAssets(validatedRefsData.data)
 
     const tags = [
       generateTagsFromSystem(lang, connections),
+      generateTagsFromAssetSystem(assetConnections),
       generateTag(lang, validatedRefsData.data.start_page.system.uid),
     ].flat()
 

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

@@ -1,6 +1,6 @@
 import type { z } from "zod"
 
-import type { System } from "../schemas/system"
+import type { AssetSystem, System } from "../schemas/system"
 import type { startPageRefsSchema } from "./output"
 
 export namespace StartPageEnum {
@@ -10,12 +10,40 @@ export namespace StartPageEnum {
       CarouselCards = "StartPageBlocksCarouselCards",
       FullWidthCampaign = "StartPageBlocksFullWidthCampaign",
       JoinScandicFriends = "StartPageBlocksJoinScandicFriends",
+      VideoCard = "StartPageBlocksVideoCard",
+      Video = "StartPageBlocksVideo",
     }
   }
 }
 
 export interface StartPageRefs extends z.output<typeof startPageRefsSchema> {}
 
+export function getConnectionsFromAssets({ start_page }: StartPageRefs) {
+  const connections: AssetSystem["system"][] = []
+
+  if (start_page.blocks) {
+    start_page.blocks.forEach((block) => {
+      switch (block.__typename) {
+        case StartPageEnum.ContentStack.blocks.VideoCard:
+          if (block.video_card?.video.sourceConnection.edges[0]) {
+            connections.push(
+              block.video_card.video.sourceConnection.edges[0].node.system
+            )
+          }
+          break
+        case StartPageEnum.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({ start_page }: StartPageRefs) {
   const connections: System["system"][] = [start_page.system]
 
@@ -23,7 +51,7 @@ export function getConnections({ start_page }: StartPageRefs) {
     start_page.blocks.forEach((block) => {
       const typeName = block.__typename
       switch (typeName) {
-        case StartPageEnum.ContentStack.blocks.FullWidthCampaign: {
+        case StartPageEnum.ContentStack.blocks.FullWidthCampaign:
           block.full_width_campaign.full_width_campaignConnection.edges.forEach(
             ({ node }) => {
               if (node.system) {
@@ -32,31 +60,34 @@ export function getConnections({ start_page }: StartPageRefs) {
             }
           )
           break
-        }
-        case StartPageEnum.ContentStack.blocks.CardsGrid: {
+        case StartPageEnum.ContentStack.blocks.CardsGrid:
           block.cards_grid.forEach((card) => {
             connections.push(card)
           })
           break
-        }
-        case StartPageEnum.ContentStack.blocks.CarouselCards: {
+        case StartPageEnum.ContentStack.blocks.CarouselCards:
           block.carousel_cards.card_groups.forEach((group) => {
             group.cardConnection.edges.forEach((node) => {
               connections.push(node.node.system)
             })
           })
           break
-        }
-        case StartPageEnum.ContentStack.blocks.JoinScandicFriends: {
+        case StartPageEnum.ContentStack.blocks.JoinScandicFriends:
           if (block.join_scandic_friends.primary_button) {
             connections.push(block.join_scandic_friends.primary_button)
           }
           break
-        }
-        default: {
-          const _exhaustiveCheck: never = typeName
+        case StartPageEnum.ContentStack.blocks.VideoCard: {
+          if (block.video_card?.system) {
+            connections.push(block.video_card.system)
+          }
           break
         }
+        case StartPageEnum.ContentStack.blocks.Video:
+          break
+        default:
+          const _exhaustiveCheck: never = typeName
+          break
       }
     })
   }