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

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),
+}

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

@@ -2,38 +2,44 @@
 
 import { Button as ButtonRAC } from 'react-aria-components'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
-import styles from './button.module.css'
-
-interface VideoPlayerButtonProps {
-  onPress: () => void
-  iconName: 'play_arrow' | 'pause' | 'volume_up' | 'volume_off'
-  ariaLabel: string
-  className?: string
-}
+import { VideoPlayerButtonProps } from './types'
+import { variants } from './variants'
+import styles from './videoPlayerButton.module.css'
 
 export function VideoPlayerButton({
-  onPress,
-  ariaLabel,
   iconName,
+  size,
   className,
+  ...props
 }: VideoPlayerButtonProps) {
+  const classNames = variants({
+    size,
+    className,
+  })
+
   return (
-    <div className={className}>
-      <ButtonRAC
-        className={styles.videoPlayerButton}
-        onPress={onPress}
-        aria-label={ariaLabel}
-      >
-        <span className={styles.transparentBackground} />
-        <span className={styles.iconWrapper}>
-          <MaterialIcon
-            icon={iconName}
-            size={32}
-            color="CurrentColor"
-            isFilled
-          />
-        </span>
-      </ButtonRAC>
-    </div>
+    <ButtonRAC className={classNames} {...props}>
+      <span className={styles.transparentBackground} />
+      <span className={styles.iconWrapper}>
+        <MaterialIcon
+          icon={iconName}
+          size={getIconSize(size)}
+          color="CurrentColor"
+          isFilled
+        />
+      </span>
+    </ButtonRAC>
   )
 }
+
+function getIconSize(size: VideoPlayerButtonProps['size']) {
+  switch (size) {
+    case 'sm':
+      return 28
+    case 'lg':
+      return 40
+    case 'md':
+    default:
+      return 32
+  }
+}

packages/design-system/lib/components/VideoPlayer/Button/types.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from 'class-variance-authority'
+import { Button as ButtonRAC } from 'react-aria-components'
+
+import { ComponentProps } from 'react'
+import type { SymbolCodepoints } from '../../Icons/MaterialIcon/MaterialSymbol/types'
+import type { variants } from './variants'
+
+export const videoPlayerButtonIconNames = [
+  'play_arrow',
+  'pause',
+  'volume_up',
+  'volume_off',
+] satisfies SymbolCodepoints[]
+
+type VideoPlayerButtonIconName = (typeof videoPlayerButtonIconNames)[number]
+
+export interface VideoPlayerButtonProps
+  extends
+    Omit<ComponentProps<typeof ButtonRAC>, 'children'>,
+    VariantProps<typeof variants> {
+  iconName: VideoPlayerButtonIconName
+}

packages/design-system/lib/components/VideoPlayer/Button/variants.ts

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './videoPlayerButton.module.css'
+
+export const config = {
+  variants: {
+    size: {
+      sm: styles['size-sm'],
+      md: styles['size-md'],
+      lg: styles['size-lg'],
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+} as const
+
+export const variants = cva(styles.videoPlayerButton, config)

packages/design-system/lib/components/VideoPlayer/Button/videoPlayerButton.module.css

@@ -7,7 +7,6 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  overflow: hidden;
   cursor: pointer;
   z-index: 0;
   border-width: 0;
@@ -29,11 +28,45 @@
   }
 
   &:focus-visible {
-    border-width: 2px;
     outline: 2px solid var(--Border-Inverted);
+    outline-offset: 2px;
 
-    .transparentBackground {
-      background-color: var(--Base-Border-Subtle);
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -2px;
+      border: 2px solid var(--Border-Interactive-Focus);
+      border-radius: inherit;
+      pointer-events: none;
+    }
+  }
+
+  &.size-sm {
+    height: 52px;
+    width: 52px;
+
+    .iconWrapper {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &.size-md {
+    height: 56px;
+    width: 56px;
+
+    .iconWrapper {
+      width: 43px;
+      height: 43px;
+    }
+  }
+  &.size-lg {
+    height: 72px;
+    width: 72px;
+
+    .iconWrapper {
+      width: 56px;
+      height: 56px;
     }
   }
 }
@@ -54,5 +87,4 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--Space-x05);
 }