feat(BOOK-257): Added VideoPlayer component

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

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

@@ -0,0 +1,53 @@
+.videoPlayerButton {
+  border-radius: var(--Corner-radius-Rounded);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  height: 56px;
+  width: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 0;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--Base-Border-Subtle);
+  background-color: transparent;
+  color: var(--Component-Button-Inverted-On-fill-Default);
+
+  @media (hover: hover) {
+    &:hover .iconWrapper {
+      background-color: var(--Component-Button-Inverted-Fill-Hover);
+      color: var(--Component-Button-Inverted-On-fill-Hover);
+    }
+  }
+
+  &:focus-visible {
+    border-width: 2px;
+    outline: 2px solid var(--Border-Inverted);
+
+    .transparentBackground {
+      background-color: var(--Base-Border-Subtle);
+    }
+  }
+}
+
+.transparentBackground {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  opacity: 0.5;
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+
+.iconWrapper {
+  background: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Rounded);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--Space-x05);
+}

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

@@ -0,0 +1,39 @@
+'use client'
+
+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
+}
+
+export function VideoPlayerButton({
+  onPress,
+  ariaLabel,
+  iconName,
+  className,
+}: VideoPlayerButtonProps) {
+  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>
+  )
+}