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)

apps/scandic-web/components/Blocks/Video/index.tsx

@@ -0,0 +1,13 @@
+import { VideoPlayer } from "@scandic-hotels/design-system/VideoPlayer"
+
+import type { VideoBlock } from "@scandic-hotels/trpc/types/blocks"
+
+interface VideoBlockProps extends Pick<VideoBlock, "video"> {}
+
+export function VideoBlock({ video }: VideoBlockProps) {
+  if (!video) {
+    return null
+  }
+
+  return <VideoPlayer {...video} />
+}

apps/scandic-web/components/Blocks/VideoCard/index.tsx

@@ -0,0 +1,13 @@
+import { VideoWithCard } from "@scandic-hotels/design-system/VideoWithCard"
+
+import type { VideoCard } from "@scandic-hotels/trpc/types/blocks"
+
+interface VideoCardBlockProps extends Pick<VideoCard, "video_card"> {}
+
+export function VideoCardBlock({ video_card }: VideoCardBlockProps) {
+  if (!video_card) {
+    return null
+  }
+
+  return <VideoWithCard {...video_card} />
+}

apps/scandic-web/components/Blocks/index.tsx

@@ -7,6 +7,8 @@ import DynamicContent from "@/components/Blocks/DynamicContent"
 import ShortcutsList from "@/components/Blocks/ShortcutsList"
 import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
+import { VideoBlock } from "@/components/Blocks/Video"
+import { VideoCardBlock } from "@/components/Blocks/VideoCard"
 
 import AccordionSection from "./Accordion"
 import CardGallery from "./CardGallery"
@@ -105,6 +107,17 @@ export default function Blocks({ blocks }: BlocksProps) {
         return <UspGrid usp_grid={block.usp_grid} />
       case BlocksEnums.block.Essentials:
         return <Essentials content={block.essentials} />
+      case BlocksEnums.block.VideoCard:
+        return (
+          <VideoCardBlock
+            video_card={block.video_card}
+            key={`${block.typename}-${idx}`}
+          />
+        )
+      case BlocksEnums.block.Video:
+        return (
+          <VideoBlock video={block.video} key={`${block.typename}-${idx}`} />
+        )
       default:
         return null
     }

apps/scandic-web/components/ContentType/StartPage/Blocks/index.tsx

@@ -6,6 +6,8 @@ import CardsGrid from "@/components/Blocks/CardsGrid"
 import CarouselCards from "@/components/Blocks/CarouselCards"
 import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
 import JoinScandicFriends from "@/components/Blocks/JoinScandicFriends"
+import { VideoBlock } from "@/components/Blocks/Video"
+import { VideoCardBlock } from "@/components/Blocks/VideoCard"
 
 import styles from "./blocks.module.css"
 
@@ -55,6 +57,21 @@ export function Blocks({ blocks }: BlocksProps) {
             </div>
           </Suspense>
         )
+      case BlocksEnums.block.VideoCard:
+        return (
+          <div key={`${block.typename}-${idx}`} className={styles.block}>
+            <VideoCardBlock
+              key={`${block.typename}-${idx}`}
+              video_card={block.video_card}
+            />
+          </div>
+        )
+      case BlocksEnums.block.Video:
+        return (
+          <div key={`${block.typename}-${idx}`} className={styles.block}>
+            <VideoBlock key={`${block.typename}-${idx}`} video={block.video} />
+          </div>
+        )
       default:
         return null
     }

packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -5,7 +5,7 @@ import { VideoPlayer } from '.'
 import { config as videoPlayerConfig } from './variants'
 
 const meta: Meta<typeof VideoPlayer> = {
-  title: 'Core Components/🚧 VideoPlayer 🚧',
+  title: 'Core Components//🚧 Video 🚧/VideoPlayer',
   component: VideoPlayer,
 
   parameters: {

packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoCard.tsx

@@ -0,0 +1,82 @@
+import { VariantProps } from 'class-variance-authority'
+import { Typography } from '../../Typography'
+import { variants } from './variants'
+
+import { VideoPlayer, VideoPlayerProps } from '..'
+import styles from './videoWithCard.module.css'
+
+interface TextCardProps {
+  variant: 'text'
+  heading: string
+  text?: string
+}
+interface QuoteCardProps {
+  variant: 'quote'
+  quote: string
+  author: string
+  authorDescription?: string
+}
+
+type VideoWithCardProps = VariantProps<typeof variants> &
+  (TextCardProps | QuoteCardProps) & {
+    video: Pick<VideoPlayerProps, 'src' | 'captions' | 'focalPoint'>
+  }
+
+export function VideoWithCard(props: VideoWithCardProps) {
+  const { variant, style, video } = props
+  const classNames = variants({
+    variant,
+    style,
+  })
+
+  return (
+    <div className={styles.videoWithCardWrapper}>
+      <div className={styles.videoWithCard}>
+        <VideoPlayer variant="inline" {...video} />
+        <article className={classNames}>
+          <CardContent {...props} />
+        </article>
+      </div>
+    </div>
+  )
+}
+
+function CardContent(props: VideoWithCardProps) {
+  if (props.variant === 'quote') {
+    const { quote, author, authorDescription } = props
+
+    return (
+      <>
+        <Typography variant="Title/smLowCase">
+          <blockquote className={styles.blockquote}>{quote}</blockquote>
+        </Typography>
+
+        <cite className={styles.cite}>
+          <Typography variant="Body/Paragraph/mdBold">
+            <span>{author}</span>
+          </Typography>
+          {authorDescription ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span>{authorDescription}</span>
+            </Typography>
+          ) : null}
+        </cite>
+      </>
+    )
+  }
+
+  const { heading, text } = props
+
+  return (
+    <>
+      <Typography variant="Title/smLowCase">
+        <h3 className={styles.heading}>{heading}</h3>
+      </Typography>
+      {text ? (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{text}</p>
+        </Typography>
+      ) : null}
+    </>
+  )
+}

packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoWithCard.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { VideoWithCard } from '.'
+import { config } from './variants'
+
+const meta: Meta<typeof VideoWithCard> = {
+  title: 'Core Components//🚧 Video 🚧//VideoWithCard',
+  component: VideoWithCard,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A component to display a VideoPlayer and content inside a card connected to the video. The size and gaps are determined by the parent container.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: Object.keys(config.variants.variant),
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.variant,
+        },
+        type: {
+          summary: Object.keys(config.variants.variant).join(' | '),
+        },
+      },
+      description:
+        'The variant of the card, which determines its style of the text and what content is shown.',
+    },
+    style: {
+      control: 'select',
+      options: Object.keys(config.variants.style),
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.style,
+        },
+        type: {
+          summary: Object.keys(config.variants.style).join(' | '),
+        },
+      },
+      description:
+        'This decides the background color and text color of the card.',
+    },
+    heading: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'The heading text. Only applicable for the text variant.',
+    },
+    text: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'The body text. Only applicable for the text variant.',
+    },
+    quote: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'The quote text. Only applicable for the quote variant.',
+    },
+    author: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description:
+        'The author of the quote. Only applicable for the quote variant.',
+    },
+    authorDescription: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description:
+        'The description of the author. Only applicable for the quote variant.',
+    },
+    video: {
+      control: false,
+      table: {
+        type: {
+          summary:
+            '{ src: string; captions?: Caption[]; focalPoint?: FocalPoint}',
+        },
+      },
+      description:
+        'The video props including source URL, captions and focal point. Please note that not all props from the VideoPlayer component are supported in this wrapper component.',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof VideoWithCard>
+
+const videoProps = {
+  src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltad0fe3c2ce340947/68eced6c14e5a8150ebba18c/Scandic_EB_Master.mp4',
+}
+
+const quoteCardProps = {
+  variant: 'quote' as const,
+  quote: 'Download our membership App for smoother & richer experience',
+  author: 'Hans Christian Andersen',
+  authorDescription: 'The famed Danish storyteller.',
+  video: videoProps,
+}
+
+const textCardProps = {
+  variant: 'text' as const,
+  heading: 'Download our membership App now',
+  text: 'Hans Christian Andersen, the famed Danish storyteller, spent many years of his life in Nyhavn, drawing inspiration from its lively atmosphere and picturesque setting.',
+  video: videoProps,
+}
+
+const smallDecorator = (Story: React.FC) => (
+  <div
+    style={{
+      width: '792px',
+      paddingRight: '2rem',
+    }}
+  >
+    <Story />
+  </div>
+)
+
+const largeDecorator = (Story: React.FC) => (
+  <div
+    style={{
+      width: '1200px',
+      paddingRight: '2rem',
+    }}
+  >
+    <Story />
+  </div>
+)
+
+export const QuotePrimary1Small: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-1',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const QuotePrimary2Small: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-2',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary1Small: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-1',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary2Small: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-2',
+  },
+  decorators: [smallDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const QuotePrimary1Large: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-1',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const QuotePrimary2Large: Story = {
+  args: {
+    ...quoteCardProps,
+    style: 'primary-2',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary1Large: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-1',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}
+
+export const TextPrimary2Large: Story = {
+  args: {
+    ...textCardProps,
+    style: 'primary-2',
+  },
+  decorators: [largeDecorator],
+  render: (args) => <VideoWithCard {...args} />,
+}

packages/design-system/lib/components/VideoPlayer/VideoWithCard/index.tsx

@@ -0,0 +1,81 @@
+import { VariantProps } from 'class-variance-authority'
+import { Typography } from '../../Typography'
+import { variants } from './variants'
+
+import { VideoPlayer, VideoPlayerProps } from '..'
+import styles from './videoWithCard.module.css'
+interface TextCardProps {
+  variant: 'text'
+  heading: string
+  text?: string
+}
+interface QuoteCardProps {
+  variant: 'quote'
+  quote: string
+  author: string
+  authorDescription?: string
+}
+
+type VideoWithCardProps = VariantProps<typeof variants> &
+  (TextCardProps | QuoteCardProps) & {
+    video: Pick<VideoPlayerProps, 'src' | 'captions' | 'focalPoint'>
+  }
+
+export function VideoWithCard(props: VideoWithCardProps) {
+  const { variant, style, video } = props
+  const classNames = variants({
+    variant,
+    style,
+  })
+
+  return (
+    <div className={styles.videoWithCardWrapper}>
+      <div className={styles.videoWithCard}>
+        <VideoPlayer variant="inline" {...video} />
+        <article className={classNames}>
+          <CardContent {...props} />
+        </article>
+      </div>
+    </div>
+  )
+}
+
+function CardContent(props: VideoWithCardProps) {
+  if (props.variant === 'quote') {
+    const { quote, author, authorDescription } = props
+
+    return (
+      <>
+        <Typography variant="Title/smLowCase">
+          <blockquote className={styles.blockquote}>{quote}</blockquote>
+        </Typography>
+
+        <cite className={styles.cite}>
+          <Typography variant="Body/Paragraph/mdBold">
+            <span>{author}</span>
+          </Typography>
+          {authorDescription ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span>{authorDescription}</span>
+            </Typography>
+          ) : null}
+        </cite>
+      </>
+    )
+  }
+
+  const { heading, text } = props
+
+  return (
+    <>
+      <Typography variant="Title/smLowCase">
+        <h3 className={styles.heading}>{heading}</h3>
+      </Typography>
+      {text ? (
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{text}</p>
+        </Typography>
+      ) : null}
+    </>
+  )
+}

packages/design-system/lib/components/VideoPlayer/VideoWithCard/variants.ts

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './videoWithCard.module.css'
+
+export const config = {
+  variants: {
+    variant: {
+      text: styles['variant-text'],
+      quote: styles['variant-quote'],
+    },
+    style: {
+      'primary-1': styles['style-primary-1'],
+      'primary-2': styles['style-primary-2'],
+    },
+  },
+  defaultVariants: {
+    style: 'primary-1',
+    variant: 'text',
+  },
+} as const
+
+export const variants = cva(styles.card, config)

packages/design-system/lib/components/VideoPlayer/VideoWithCard/videoWithCard.module.css

@@ -0,0 +1,84 @@
+.videoWithCardWrapper {
+  width: 100%;
+  container-type: inline-size;
+  container-name: videoWithCardWrapper;
+
+  @media screen and (min-width: 768px) {
+    .videoWithCard {
+      grid-template-columns: 1fr auto;
+      min-height: 261px;
+      gap: var(--Space-x1);
+
+      .card {
+        width: 320px;
+      }
+    }
+
+    @container videoWithCardWrapper (min-width: 793px) {
+      .videoWithCard {
+        min-height: 445px;
+        gap: var(--Space-x2);
+
+        .card {
+          width: 391px;
+        }
+      }
+    }
+  }
+}
+
+.videoWithCard {
+  display: grid;
+  width: 100%;
+  gap: var(--Space-x025);
+}
+
+.card {
+  display: grid;
+  min-height: 200px;
+  height: 100%;
+  width: 100%;
+  padding: var(--Space-x3) var(--Space-x4);
+  align-content: center;
+  border-radius: var(--Corner-radius-lg);
+
+  &.style-primary-1 {
+    background: var(--Surface-Brand-Primary-1-Default);
+    color: var(--Text-Brand-OnPrimary-1-Heading);
+  }
+
+  &.style-primary-2 {
+    background: var(--Surface-Brand-Primary-2-Default);
+    color: var(--Text-Brand-OnPrimary-2-Default);
+
+    .heading {
+      color: var(--Text-Brand-OnPrimary-2-Heading);
+    }
+  }
+
+  &.variant-quote {
+    gap: var(--Space-x3);
+
+    @media screen and (min-width: 768px) {
+      gap: var(--Space-x4);
+    }
+  }
+
+  &.variant-text {
+    gap: var(--Space-x2);
+  }
+}
+
+.blockquote {
+  &::before {
+    content: '“';
+  }
+  &::after {
+    content: '”';
+  }
+}
+
+.cite {
+  font-style: normal;
+  display: grid;
+}

packages/design-system/lib/components/VideoPlayer/index.tsx

@@ -16,7 +16,7 @@ interface Caption {
   isDefault: boolean
 }
 
-interface VideoPlayerProps extends VariantProps<typeof variants> {
+export interface VideoPlayerProps extends VariantProps<typeof variants> {
   src: string
   className?: string
   captions?: Caption[]

packages/design-system/lib/components/VideoPlayer/videoPlayer.module.css

@@ -40,7 +40,10 @@
 .video {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+
+  &:not(:fullscreen) {
+    object-fit: cover;
+  }
 }
 
 .playButton {

packages/design-system/package.json

@@ -189,6 +189,7 @@
     "./TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx",
     "./Typography": "./lib/components/Typography/index.tsx",
     "./VideoPlayer": "./lib/components/VideoPlayer/index.tsx",
+    "./VideoWithCard": "./lib/components/VideoPlayer/VideoWithCard/index.tsx",
     "./base.css": "./lib/base.css",
     "./design-system-new-deprecated.css": "./lib/design-system-new-deprecated.css",
     "./downtown-camper.css": "./lib/styles/downtown-camper.css",

packages/trpc/lib/graphql/Fragments/Blocks/Video.graphql.ts

@@ -0,0 +1,63 @@
+import { gql } from "graphql-tag"
+
+import { Video, VideoRef } from "../Video.graphql"
+
+export const Video_ContentPage = gql`
+  fragment Video_ContentPage on ContentPageBlocksVideo {
+    __typename
+    video {
+      ...Video
+    }
+  }
+  ${Video}
+`
+
+export const Video_CollectionPage = gql`
+  fragment Video_CollectionPage on CollectionPageBlocksVideo {
+    __typename
+    video {
+      ...Video
+    }
+  }
+  ${Video}
+`
+
+export const Video_StartPage = gql`
+  fragment Video_StartPage on StartPageBlocksVideo {
+    __typename
+    video {
+      ...Video
+    }
+  }
+  ${Video}
+`
+
+export const Video_ContentPageRefs = gql`
+  fragment Video_ContentPageRefs on ContentPageBlocksVideo {
+    __typename
+    video {
+      ...VideoRef
+    }
+  }
+  ${VideoRef}
+`
+
+export const Video_CollectionPageRefs = gql`
+  fragment Video_CollectionPageRefs on CollectionPageBlocksVideo {
+    __typename
+    video {
+      ...VideoRef
+    }
+  }
+  ${VideoRef}
+`
+
+export const Video_StartPageRefs = gql`
+  fragment Video_StartPageRefs on StartPageBlocksVideo {
+    __typename
+    video {
+      ...VideoRef
+    }
+  }
+  ${VideoRef}
+`

packages/trpc/lib/graphql/Fragments/Blocks/VideoCard.graphql.ts

@@ -0,0 +1,166 @@
+import { gql } from "graphql-tag"
+
+import { System } from "../System.graphql"
+import { Video, VideoRef } from "../Video.graphql"
+
+export const VideoQuoteCard = gql`
+  fragment VideoQuoteCard on VideoQuoteCard {
+    video {
+      ...Video
+    }
+    style
+    quote
+    author
+    author_description
+  }
+  ${Video}
+`
+
+export const VideoTextCard = gql`
+  fragment VideoTextCard on VideoTextCard {
+    video {
+      ...Video
+    }
+    style
+    heading
+    text
+  }
+  ${Video}
+`
+
+export const VideoCard_ContentPage = gql`
+  fragment VideoCard_ContentPage on ContentPageBlocksVideoCard {
+    __typename
+    video_card {
+      video_cardConnection {
+        edges {
+          node {
+            __typename
+            ...VideoQuoteCard
+            ...VideoTextCard
+          }
+        }
+      }
+    }
+  }
+  ${VideoQuoteCard}
+  ${VideoTextCard}
+`
+
+export const VideoCard_CollectionPage = gql`
+  fragment VideoCard_CollectionPage on CollectionPageBlocksVideoCard {
+    __typename
+    video_card {
+      video_cardConnection {
+        edges {
+          node {
+            __typename
+            ...VideoQuoteCard
+            ...VideoTextCard
+          }
+        }
+      }
+    }
+  }
+  ${VideoQuoteCard}
+  ${VideoTextCard}
+`
+
+export const VideoCard_StartPage = gql`
+  fragment VideoCard_StartPage on StartPageBlocksVideoCard {
+    __typename
+    video_card {
+      video_cardConnection {
+        edges {
+          node {
+            __typename
+            ...VideoQuoteCard
+            ...VideoTextCard
+          }
+        }
+      }
+    }
+  }
+  ${VideoQuoteCard}
+  ${VideoTextCard}
+`
+
+export const VideoQuoteCardRef = gql`
+  fragment VideoQuoteCardRef on VideoQuoteCard {
+    video {
+      ...VideoRef
+    }
+    system {
+      ...System
+    }
+  }
+  ${VideoRef}
+  ${System}
+`
+
+export const VideoTextCardRef = gql`
+  fragment VideoTextCardRef on VideoTextCard {
+    video {
+      ...VideoRef
+    }
+    system {
+      ...System
+    }
+  }
+  ${VideoRef}
+  ${System}
+`
+
+export const VideoCard_ContentPageRefs = gql`
+  fragment VideoCard_ContentPageRefs on ContentPageBlocksVideoCard {
+    video_card {
+      video_cardConnection {
+        edges {
+          node {
+            __typename
+            ...VideoQuoteCardRef
+            ...VideoTextCardRef
+          }
+        }
+      }
+    }
+  }
+  ${VideoQuoteCardRef}
+  ${VideoTextCardRef}
+`
+
+export const VideoCard_CollectionPageRefs = gql`
+  fragment VideoCard_CollectionPageRefs on CollectionPageBlocksVideoCard {
+    video_card {
+      video_cardConnection {
+        edges {
+          node {
+            __typename
+            ...VideoQuoteCardRef
+            ...VideoTextCardRef
+          }
+        }
+      }
+    }
+  }
+  ${VideoQuoteCardRef}
+  ${VideoTextCardRef}
+`
+
+export const VideoCard_StartPageRefs = gql`
+  fragment VideoCard_StartPageRefs on StartPageBlocksVideoCard {
+    video_card {
+      video_cardConnection {
+        edges {
+          node {
+            __typename
+            ...VideoQuoteCardRef
+            ...VideoTextCardRef
+          }
+        }
+      }
+    }
+  }
+  ${VideoQuoteCardRef}
+  ${VideoTextCardRef}
+`

packages/trpc/lib/graphql/Query/CollectionPage/CollectionPage.graphql.ts

@@ -16,6 +16,14 @@ import {
   UspGrid_CollectionPage,
   UspGrid_CollectionPageRefs,
 } from "../../Fragments/Blocks/UspGrid.graphql"
+import {
+  Video_CollectionPage,
+  Video_CollectionPageRefs,
+} from "../../Fragments/Blocks/Video.graphql"
+import {
+  VideoCard_CollectionPage,
+  VideoCard_CollectionPageRefs,
+} from "../../Fragments/Blocks/VideoCard.graphql"
 import {
   NavigationLinks_CollectionPage,
   NavigationLinksRef_CollectionPage,
@@ -51,6 +59,8 @@ export const GetCollectionPage = gql`
         ...Shortcuts_CollectionPage
         ...UspGrid_CollectionPage
         ...DynamicContent_CollectionPage
+        ...VideoCard_CollectionPage
+        ...Video_CollectionPage
       }
       system {
         ...System
@@ -62,13 +72,16 @@ export const GetCollectionPage = gql`
       url
     }
   }
+  ${System}
   ${TopPrimaryButton_CollectionPage}
   ${NavigationLinks_CollectionPage}
   ${CardsGrid_CollectionPage}
   ${Shortcuts_CollectionPage}
   ${UspGrid_CollectionPage}
   ${DynamicContent_CollectionPage}
+  ${VideoCard_CollectionPage}
   ${Video}
+  ${Video_CollectionPage}
 `
 
 export const GetCollectionPageRefs = gql`
@@ -87,6 +100,8 @@ export const GetCollectionPageRefs = gql`
         ...Shortcuts_CollectionPageRefs
         ...UspGrid_CollectionPageRefs
         ...DynamicContent_CollectionPageRefs
+        ...VideoCard_CollectionPageRefs
+        ...Video_CollectionPageRefs
       }
       system {
         ...System
@@ -101,6 +116,8 @@ export const GetCollectionPageRefs = gql`
   ${UspGrid_CollectionPageRefs}
   ${DynamicContent_CollectionPageRefs}
   ${VideoRef}
+  ${VideoCard_CollectionPageRefs}
+  ${Video_CollectionPageRefs}
 `
 
 export const GetDaDeEnUrlsCollectionPage = gql`

packages/trpc/lib/graphql/Query/ContentPage/ContentPage.graphql.ts

@@ -30,6 +30,14 @@ import {
   UspGrid_ContentPage,
   UspGrid_ContentPageRefs,
 } from "../../Fragments/Blocks/UspGrid.graphql"
+import {
+  Video_ContentPage,
+  Video_ContentPageRefs,
+} from "../../Fragments/Blocks/Video.graphql"
+import {
+  VideoCard_ContentPage,
+  VideoCard_ContentPageRefs,
+} from "../../Fragments/Blocks/VideoCard.graphql"
 import {
   NavigationLinks_ContentPage,
   NavigationLinksRef_ContentPage,
@@ -126,6 +134,8 @@ export const GetContentPageBlocksBatch1 = gql`
         ...CardsGrid_ContentPage
         ...Content_ContentPage
         ...DynamicContent_ContentPage
+        ...VideoCard_ContentPage
+        ...Video_ContentPage
       }
     }
   }
@@ -133,6 +143,8 @@ export const GetContentPageBlocksBatch1 = gql`
   ${CardsGrid_ContentPage}
   ${Content_ContentPage}
   ${DynamicContent_ContentPage}
+  ${VideoCard_ContentPage}
+  ${Video_ContentPage}
 `
 
 export const GetContentPageBlocksBatch2 = gql`
@@ -204,6 +216,8 @@ export const GetContentPageBlocksRefs = gql`
         ...Shortcuts_ContentPageRefs
         ...TextCols_ContentPageRef
         ...UspGrid_ContentPageRefs
+        ...VideoCard_ContentPageRefs
+        ...Video_ContentPageRefs
       }
     }
   }
@@ -214,6 +228,8 @@ export const GetContentPageBlocksRefs = gql`
   ${Shortcuts_ContentPageRefs}
   ${TextCols_ContentPageRef}
   ${UspGrid_ContentPageRefs}
+  ${VideoCard_ContentPageRefs}
+  ${Video_ContentPageRefs}
 `
 
 export const GetDaDeEnUrlsContentPage = gql`

packages/trpc/lib/graphql/Query/StartPage/StartPage.graphql.ts

@@ -16,6 +16,14 @@ import {
   JoinScandicFriends_StartPage,
   JoinScandicFriends_StartPageRefs,
 } from "../../Fragments/Blocks/JoinScandicFriends.graphql"
+import {
+  Video_StartPage,
+  Video_StartPageRefs,
+} from "../../Fragments/Blocks/Video.graphql"
+import {
+  VideoCard_StartPage,
+  VideoCard_StartPageRefs,
+} from "../../Fragments/Blocks/VideoCard.graphql"
 import { System } from "../../Fragments/System.graphql"
 
 export const GetStartPage = gql`
@@ -44,6 +52,8 @@ export const GetStartPage = gql`
           }
         }
         ...JoinScandicFriends_StartPage
+        ...VideoCard_StartPage
+        ...Video_StartPage
       }
       system {
         ...System
@@ -60,6 +70,8 @@ export const GetStartPage = gql`
   ${FullWidthCampaign}
   ${CarouselCards_StartPage}
   ${JoinScandicFriends_StartPage}
+  ${VideoCard_StartPage}
+  ${Video_StartPage}
 `
 
 export const GetStartPageRefs = gql`
@@ -81,6 +93,8 @@ export const GetStartPageRefs = gql`
           }
         }
         ...JoinScandicFriends_StartPageRefs
+        ...VideoCard_StartPageRefs
+        ...Video_StartPageRefs
       }
       system {
         ...System
@@ -92,6 +106,8 @@ export const GetStartPageRefs = gql`
   ${FullWidthCampaignRefs}
   ${CarouselCards_StartPageRefs}
   ${JoinScandicFriends_StartPageRefs}
+  ${VideoCard_StartPageRefs}
+  ${Video_StartPageRefs}
 `
 
 export const GetDaDeEnUrlsStartPage = gql`

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) {
+export function getConnectionsFromAssets({
-  const connections: System["system"][] = [collection_page.system]
+  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: {
+        case CollectionPageEnum.ContentStack.blocks.VideoCard:
-          if (block.shortcuts.shortcuts.length) {
+          if (block.video_card?.video.sourceConnection.edges[0]) {
-            connections.push(...block.shortcuts.shortcuts.filter((c) => !!c))
+            connections.push(
+              block.video_card.video.sourceConnection.edges[0].node.system
+            )
           }
           break
-        }
+        case CollectionPageEnum.ContentStack.blocks.Video:
-        case CollectionPageEnum.ContentStack.blocks.CardsGrid: {
+          if (block.video?.sourceConnection.edges[0]) {
-          if (block.cards_grid.length) {
+            connections.push(block.video.sourceConnection.edges[0].node.system)
-            connections.push(...block.cards_grid)
           }
           break
-        }
+        default:
-        case CollectionPageEnum.ContentStack.blocks.UspGrid: {
+          break
-          if (block.usp_grid.length) {
+      }
-            connections.push(...block.usp_grid.filter((c) => !!c))
+    })
-          }
+  }
-        }
+
+  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
       }
     })
   }

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) {
+      const typeName = block.__typename
-        case ContentPageEnum.ContentStack.blocks.Accordion: {
+      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
       }
     })

packages/trpc/lib/routers/contentstack/schemas/blocks/video.ts

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

packages/trpc/lib/routers/contentstack/schemas/blocks/videoCard.ts

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

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
-        }
+        case StartPageEnum.ContentStack.blocks.VideoCard: {
-        default: {
+          if (block.video_card?.system) {
-          const _exhaustiveCheck: never = typeName
+            connections.push(block.video_card.system)
+          }
           break
         }
+        case StartPageEnum.ContentStack.blocks.Video:
+          break
+        default:
+          const _exhaustiveCheck: never = typeName
+          break
       }
     })
   }

packages/trpc/lib/types/blocks.ts

@@ -9,8 +9,11 @@ import type { shortcutsSchema } from "@scandic-hotels/trpc/routers/contentstack/
 import type { tableSchema } from "@scandic-hotels/trpc/routers/contentstack/schemas/blocks/table"
 import type { textColsSchema } from "@scandic-hotels/trpc/routers/contentstack/schemas/blocks/textCols"
 import type { uspGridSchema } from "@scandic-hotels/trpc/routers/contentstack/schemas/blocks/uspGrid"
+import type { videoCardSchema } from "@scandic-hotels/trpc/routers/contentstack/schemas/blocks/videoCard"
 import type { z } from "zod"
 
+import type { videoBlockSchema } from "../routers/contentstack/schemas/blocks/video"
+
 export interface TeaserCard extends z.output<typeof teaserCardBlockSchema> {}
 export interface CardsGrid extends z.output<typeof cardsGridSchema> {}
 export interface Content extends z.output<typeof contentSchema> {}
@@ -26,3 +29,5 @@ interface GetHotelListing
 export type HotelListing = GetHotelListing["hotel_listing"]
 export interface CarouselCards extends z.output<typeof carouselCardsSchema> {}
 export interface CardGallery extends z.output<typeof cardGallerySchema> {}
+export interface VideoCard extends z.output<typeof videoCardSchema> {}
+export interface VideoBlock extends z.output<typeof videoBlockSchema> {}

packages/trpc/lib/types/blocksEnum.ts

@@ -18,5 +18,7 @@ export namespace BlocksEnums {
     TextContent = "TextContent",
     UspGrid = "UspGrid",
     Essentials = "Essentials",
+    VideoCard = "VideoCard",
+    Video = "Video",
   }
 }

packages/trpc/lib/types/collectionPage.ts

@@ -26,6 +26,8 @@ export namespace CollectionPageEnum {
       DynamicContent = "CollectionPageBlocksDynamicContent",
       Shortcuts = "CollectionPageBlocksShortcuts",
       UspGrid = "CollectionPageBlocksUspGrid",
+      VideoCard = "CollectionPageBlocksVideoCard",
+      Video = "CollectionPageBlocksVideo",
     }
   }
 }

packages/trpc/lib/types/contentPage.ts

@@ -36,6 +36,8 @@ export namespace ContentPageEnum {
       UspGrid = "ContentPageBlocksUspGrid",
       Table = "ContentPageBlocksTable",
       HotelListing = "ContentPageBlocksHotelListing",
+      VideoCard = "ContentPageBlocksVideoCard",
+      Video = "ContentPageBlocksVideo",
     }
 
     export const enum sidebar {