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
     }