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/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
+  }
+}