Merged in fix/BOOK-257-video-player (pull request #3373)

Fix/BOOK-257 video player * fix(BOOK-257): Fixes to VideoPlayerButton and added stories * fix(BOOK-257): Hiding mute button when the user has interacted with it * fix(BOOK-257): Added support for poster image * fix(BOOK-257): add crossOrigin attr to videoplayer * fix(BOOK-257): comment Approved-by: Anton Gunnarsson
2025-12-19 12:41:00 +00:00
parent 3f632e6031
commit c21aa2dc73
15 changed files with 436 additions and 117 deletions
--- a/packages/design-system/lib/components/VideoPlayer/Button/VideoPlayerButton.stories.tsx
+++ b/packages/design-system/lib/components/VideoPlayer/Button/VideoPlayerButton.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { fn } from 'storybook/test'
+import { VideoPlayerButton } from '.'
+import { videoPlayerButtonIconNames } from './types'
+import { config } from './variants'
+
+const meta: Meta<typeof VideoPlayerButton> = {
+  title: 'Core Components/Video/VideoPlayerButton',
+  component: VideoPlayerButton,
+  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: {
+    onPress: {
+      table: {
+        type: { summary: 'function' },
+      },
+      defaultValue: { summary: 'undefined' },
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(config.variants.size),
+      table: {
+        defaultValue: {
+          summary: config.defaultVariants.size,
+        },
+        type: {
+          summary: Object.keys(config.variants.size).join(' | '),
+        },
+      },
+      description: 'The size of the button.',
+    },
+    iconName: {
+      control: 'select',
+      options: videoPlayerButtonIconNames,
+      table: {
+        defaultValue: {
+          summary: 'undefined',
+        },
+        type: {
+          summary: videoPlayerButtonIconNames.join(' | '),
+        },
+      },
+      description:
+        'This decides the background color and text color of the card.',
+    },
+  },
+}
+
+export default meta
+
+function renderAllIcons(args: Story['args']) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      {videoPlayerButtonIconNames.map((iconName) => (
+        <VideoPlayerButton key={iconName} {...args} iconName={iconName} />
+      ))}
+    </div>
+  )
+}
+
+type Story = StoryObj<typeof VideoPlayerButton>
+
+export const Default: Story = {
+  args: { iconName: 'play_arrow', onPress: fn() },
+}
+
+export const Small: Story = {
+  args: { ...Default.args, size: 'sm' },
+  render: (args) => renderAllIcons(args),
+}
+
+export const Medium: Story = {
+  args: { ...Default.args, size: 'md' },
+  render: (args) => renderAllIcons(args),
+}
+
+export const Large: Story = {
+  args: { ...Default.args, size: 'lg' },
+  render: (args) => renderAllIcons(args),
+}