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/useVideoDimensions.ts

@@ -0,0 +1,39 @@
+import { useRef, useState } from 'react'
+
+/**
+ * Hook to measure container width for optimizing poster image sizes.
+ * Captures the container width when video metadata loads to pass to Image component.
+ */
+export function useVideoDimensions() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [containerWidth, setContainerWidth] = useState<number | null>(null)
+  const [hasError, setHasError] = useState(false)
+
+  function handleMetadataLoaded() {
+    const container = containerRef.current
+    if (!container || containerWidth) {
+      return
+    }
+
+    setContainerWidth(container.getBoundingClientRect().width)
+  }
+
+  function handleError() {
+    setHasError(true)
+
+    const container = containerRef.current
+    if (!container || containerWidth) {
+      return
+    }
+
+    setContainerWidth(container.getBoundingClientRect().width)
+  }
+
+  return {
+    containerRef,
+    handleMetadataLoaded,
+    containerWidth,
+    handleError,
+    hasError,
+  }
+}