web/packages/design-system/lib/components/VideoPlayer/useVideoDimensions.ts

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