feat(BOOK-257): Added VideoPlayer component

Approved-by: Christel Westerberg
Approved-by: Bianca Widstam

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

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { Lang } from '@scandic-hotels/common/constants/language'
+import { VideoPlayer } from '.'
+import { config as videoPlayerConfig } from './variants'
+
+const meta: Meta<typeof VideoPlayer> = {
+  title: 'Components/🚧 VideoPlayer 🚧',
+  component: VideoPlayer,
+
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'This component is not ready for production use. It is still under development and may undergo significant changes.',
+      },
+    },
+  },
+
+  argTypes: {
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+    src: {
+      table: {
+        type: { summary: 'string' },
+      },
+      description: 'The source URL of the video.',
+    },
+    captions: {
+      table: {
+        type: {
+          summary: 'Caption[]',
+          detail: '{ src: string; srcLang: Lang; isDefault: boolean }[]',
+        },
+      },
+      description:
+        'An array of caption objects for the video. Since this functionality only works when the controls are visible, captions are only supported in the inline variant.',
+    },
+    variant: {
+      control: 'select',
+      options: Object.keys(videoPlayerConfig.variants.variant),
+      table: {
+        defaultValue: {
+          summary: videoPlayerConfig.defaultVariants.variant,
+        },
+        type: {
+          summary: 'string',
+          detail: Object.keys(videoPlayerConfig.variants.variant).join(' | '),
+        },
+      },
+      description:
+        'The variant of the video player, which determines its style and behavior. The hero variant is typically used for large, prominent video displays and defaults to autoplay and muted playback.',
+    },
+    focalPoint: {
+      table: {
+        type: { summary: 'FocalPoint', detail: '{ x: number; y: number }' },
+        defaultValue: { summary: '{ x: 50, y: 50 }' },
+      },
+      description: 'The focal point of the video thumbnail.',
+    },
+    autoPlay: {
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      description:
+        'Whether the video should autoplay. Note that autoplay might be ignored by browsers unless the video is muted, which is the default behavior for this component.',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof VideoPlayer>
+
+const defaultArgs = {
+  src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltad0fe3c2ce340947/68eced6c14e5a8150ebba18c/Scandic_EB_Master.mp4',
+  captions: [
+    {
+      src: './video/captions_en.vtt',
+      srcLang: Lang.en,
+      isDefault: false,
+    },
+    {
+      src: './video/captions_sv.vtt',
+      srcLang: Lang.sv,
+      isDefault: false,
+    },
+  ],
+}
+
+export const Default: Story = {
+  args: { ...defaultArgs },
+}
+
+export const Inline: Story = {
+  args: { ...Default.args, variant: 'inline' },
+}
+
+export const BareHero: Story = {
+  args: {
+    ...Default.args,
+    variant: 'hero',
+  },
+  name: 'Hero (barebones)',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The Hero variant is intended for use as a large video player, typically placed at the top of a page or section. It features autoplay and muted playback. It is pretty bare bones and requires a "wrapper" to override its size and aspect ratio. See the example below.',
+      },
+    },
+  },
+}
+
+export const Hero: Story = {
+  args: {
+    ...BareHero.args,
+  },
+  render: (args) => (
+    <div
+      style={{
+        width: 'min(100%, 1200px)',
+        height: 'max(20vh, 300px)',
+        borderRadius: 'var(--Corner-radius-lg)',
+        margin: 'auto',
+        overflow: 'hidden',
+      }}
+    >
+      <VideoPlayer {...args} />
+    </div>
+  ),
+}