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)
2025-12-12 06:34:32 +00:00
parent 5770147af4
commit 0597b09c08
31 changed files with 1226 additions and 52 deletions
--- a/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx
+++ b/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: {
--- a/packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoCard.tsx
+++ b/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}
+    </>
+  )
+}
--- a/packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoWithCard.stories.tsx
+++ b/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} />,
+}
--- a/packages/design-system/lib/components/VideoPlayer/VideoWithCard/index.tsx
+++ b/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}
+    </>
+  )
+}
--- a/packages/design-system/lib/components/VideoPlayer/VideoWithCard/variants.ts
+++ b/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)
--- a/packages/design-system/lib/components/VideoPlayer/VideoWithCard/videoWithCard.module.css
+++ b/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;
+}
--- a/packages/design-system/lib/components/VideoPlayer/index.tsx
+++ b/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[]
--- a/packages/design-system/lib/components/VideoPlayer/videoPlayer.module.css
+++ b/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 {
--- a/packages/design-system/package.json
+++ b/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",
--- a/packages/trpc/lib/graphql/Fragments/Blocks/Video.graphql.ts
+++ b/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}
+`
--- a/packages/trpc/lib/graphql/Fragments/Blocks/VideoCard.graphql.ts
+++ b/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}
+`
--- a/packages/trpc/lib/graphql/Query/CollectionPage/CollectionPage.graphql.ts
+++ b/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`
--- a/packages/trpc/lib/graphql/Query/ContentPage/ContentPage.graphql.ts
+++ b/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`
--- a/packages/trpc/lib/graphql/Query/StartPage/StartPage.graphql.ts
+++ b/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`
--- a/packages/trpc/lib/routers/contentstack/collectionPage/output.ts
+++ b/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({
--- a/packages/trpc/lib/routers/contentstack/collectionPage/utils.ts
+++ b/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
      }
    })
  }
--- a/packages/trpc/lib/routers/contentstack/contentPage/output.ts
+++ b/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
--- a/packages/trpc/lib/routers/contentstack/contentPage/utils.ts
+++ b/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
      }
    })
--- a/packages/trpc/lib/routers/contentstack/schemas/blocks/video.ts
+++ b/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,
+})
--- a/packages/trpc/lib/routers/contentstack/schemas/blocks/videoCard.ts
+++ b/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
+    }),
+})
--- a/packages/trpc/lib/routers/contentstack/startPage/output.ts
+++ b/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({
--- a/packages/trpc/lib/routers/contentstack/startPage/query.ts
+++ b/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()

--- a/packages/trpc/lib/routers/contentstack/startPage/utils.ts
+++ b/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
      }
    })
  }
--- a/packages/trpc/lib/types/blocks.ts
+++ b/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> {}
--- a/packages/trpc/lib/types/blocksEnum.ts
+++ b/packages/trpc/lib/types/blocksEnum.ts
@@ -18,5 +18,7 @@ export namespace BlocksEnums {
    TextContent = "TextContent",
    UspGrid = "UspGrid",
    Essentials = "Essentials",
+    VideoCard = "VideoCard",
+    Video = "Video",
  }
 }
--- a/packages/trpc/lib/types/collectionPage.ts
+++ b/packages/trpc/lib/types/collectionPage.ts
@@ -26,6 +26,8 @@ export namespace CollectionPageEnum {
      DynamicContent = "CollectionPageBlocksDynamicContent",
      Shortcuts = "CollectionPageBlocksShortcuts",
      UspGrid = "CollectionPageBlocksUspGrid",
+      VideoCard = "CollectionPageBlocksVideoCard",
+      Video = "CollectionPageBlocksVideo",
    }
  }
 }
--- a/packages/trpc/lib/types/contentPage.ts
+++ b/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 {