Fix/BOOK-240 video fixes

* fix(BOOK-240): Added support for multiple sources and fixed issue with play/pause on mobile

* fix(BOOK-240): Pausing hero video when scrolling out of view


Approved-by: Christel Westerberg

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

@@ -1,82 +0,0 @@
-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

@@ -4,7 +4,7 @@ import { VideoWithCard } from '.'
 import { config } from './variants'
 
 const meta: Meta<typeof VideoWithCard> = {
-  title: 'Core Components/🚧 Video 🚧/VideoWithCard',
+  title: 'Core Components/Video/VideoWithCard',
   component: VideoWithCard,
   parameters: {
     docs: {
@@ -80,7 +80,7 @@ const meta: Meta<typeof VideoWithCard> = {
       table: {
         type: {
           summary:
-            '{ src: string; captions?: Caption[]; focalPoint?: FocalPoint}',
+            '{ sources: { src: string; type: string }[]; captions?: Caption[]; focalPoint?: FocalPoint}',
         },
       },
       description:
@@ -94,7 +94,16 @@ 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',
+  sources: [
+    {
+      src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltc3aa53ac9bf6798c/693ad4b65b0889d6348893f3/Test_video.mp4',
+      type: 'video/mp4',
+    },
+    {
+      src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/blt029be07ddd444eea/693c251c09e17b33c93c1dd6/hero-banner-1920-vp9.webm',
+      type: 'video/webm',
+    },
+  ],
 }
 
 const quoteCardProps = {

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

@@ -18,7 +18,7 @@ interface QuoteCardProps {
 
 type VideoWithCardProps = VariantProps<typeof variants> &
   (TextCardProps | QuoteCardProps) & {
-    video: Pick<VideoPlayerProps, 'src' | 'captions' | 'focalPoint'>
+    video: Pick<VideoPlayerProps, 'sources' | 'captions' | 'focalPoint'>
   }
 
 export function VideoWithCard(props: VideoWithCardProps) {