scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat/BOOK-257 videoplayer with card

Browse Source 
* 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)
This commit is contained in:
Erik Tiekstra
2025-12-12 06:34:32 +00:00
parent 5770147af4
commit 0597b09c08
31 changed files with 1226 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/trpc/lib/routers/contentstack/collectionPage/output.ts
View File

@@ -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({

80
packages/trpc/lib/routers/contentstack/collectionPage/utils.ts
View File

@@ -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
}
})
}

33
packages/trpc/lib/routers/contentstack/contentPage/output.ts
View File

@@ -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

75
packages/trpc/lib/routers/contentstack/contentPage/utils.ts
View File

@@ -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
}
})

14
packages/trpc/lib/routers/contentstack/schemas/blocks/video.ts Normal file
View File

@@ -0,0 +1,14 @@
import { z } from "zod"
import { BlocksEnums } from "../../../../types/blocksEnum"
import { transformedVideoSchema, videoRefSchema } from "../video"
export const videoBlockSchema = z.object({
typename: z.literal(BlocksEnums.block.Video).default(BlocksEnums.block.Video),
video: transformedVideoSchema,
})
export const videoBlockRefsSchema = z.object({
typename: z.literal(BlocksEnums.block.Video).default(BlocksEnums.block.Video),
video: videoRefSchema,
})

117
packages/trpc/lib/routers/contentstack/schemas/blocks/videoCard.ts Normal file
View File

@@ -0,0 +1,117 @@
import { z } from "zod"
import { logger } from "@scandic-hotels/common/logger"
import { BlocksEnums } from "../../../../types/blocksEnum"
import { systemSchema } from "../system"
import { transformedVideoSchema, videoRefSchema } from "../video"
const cardStyleSchema = z
.string()
.transform((val): "primary-1" | "primary-2" => {
if (val === "primary-1" || val === "primary-2") {
return val
}
return "primary-1"
})
export const videoQuoteCardSchema = z.object({
__typename: z.literal("VideoQuoteCard"),
video: transformedVideoSchema,
style: cardStyleSchema,
quote: z.string(),
author: z.string(),
author_description: z.string().nullish(),
})
export const videoTextCardSchema = z.object({
__typename: z.literal("VideoTextCard"),
video: transformedVideoSchema,
style: cardStyleSchema,
heading: z.string(),
text: z.string().nullish(),
})
export const videoCardSchema = z.object({
typename: z
.literal(BlocksEnums.block.VideoCard)
.default(BlocksEnums.block.VideoCard),
video_card: z
.object({
video_cardConnection: z.object({
edges: z.array(
z.object({
node: z.discriminatedUnion("__typename", [
videoQuoteCardSchema,
videoTextCardSchema,
]),
})
),
}),
})
.transform((data) => {
const videoCard = data.video_cardConnection.edges[0]?.node
if (!videoCard?.video) {
return null
}
const { __typename, style, video } = videoCard
switch (__typename) {
case "VideoTextCard": {
const { heading, text } = videoCard
return {
variant: "text" as const,
style,
video,
heading,
text: text || undefined,
}
}
case "VideoQuoteCard": {
const { quote, author, author_description } = videoCard
return {
variant: "quote" as const,
style,
video,
quote,
author,
authorDescription: author_description || undefined,
}
}
default:
const type: never = __typename
logger.error(`Unsupported content type given: ${type}`)
return null
}
}),
})
const videoCardRefSchema = z.object({
video: videoRefSchema,
system: systemSchema,
})
export const videoCardRefsSchema = z.object({
typename: z
.literal(BlocksEnums.block.VideoCard)
.default(BlocksEnums.block.VideoCard),
video_card: z
.object({
video_cardConnection: z.object({
edges: z.array(
z.object({
node: videoCardRefSchema,
})
),
}),
})
.transform((data) => {
const videoCard = data.video_cardConnection.edges[0]?.node
if (!videoCard?.video) {
return null
}
return videoCard
}),
})

33
packages/trpc/lib/routers/contentstack/startPage/output.ts
View File

@@ -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({

5
packages/trpc/lib/routers/contentstack/startPage/query.ts
View File

@@ -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()

53
packages/trpc/lib/routers/contentstack/startPage/utils.ts
View File

@@ -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
}
})
}