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

"use client"

import { cx } from "class-variance-authority"
import { useCallback, useEffect, useRef, useState } from "react"

import { languages } from "@scandic-hotels/common/constants/language"
import { useIntl } from "react-intl"
import Image from "../Image"
import { VideoPlayerButton } from "./Button"
import { VideoPlayerProps } from "./types"
import { useVideoDimensions } from "./useVideoDimensions"
import { getVideoPropsByVariant } from "./utils"
import { variants } from "./variants"
import styles from "./videoPlayer.module.css"

export function VideoPlayer({
  sources,
  captions,
  focalPoint = { x: 50, y: 50 },
  className,
  variant = "inline",
  poster,
  autoPlay,
  hasOverlay,
}: VideoPlayerProps) {
  const intl = useIntl()
  const videoRef = useRef<HTMLVideoElement>(null)
  const shouldAutoPlay =
    (variant === "hero" && (autoPlay ?? true)) || !!autoPlay
  const [hasManuallyPlayed, setHasManuallyPlayed] = useState(false)
  const [hasToggledMute, setHasToggledMute] = useState(false)
  const [isPlaying, setIsPlaying] = useState(shouldAutoPlay)
  const [isMuted, setIsMuted] = useState(true)
  const [userPaused, setUserPaused] = useState(false)
  const [showPoster, setShowPoster] = useState(!shouldAutoPlay)
  const {
    containerRef,
    handleMetadataLoaded,
    containerWidth,
    hasError,
    handleError,
  } = useVideoDimensions()
  const defaultProps = getVideoPropsByVariant(
    variant,
    hasManuallyPlayed,
    shouldAutoPlay
  )
  const classNames = variants({
    className,
    variant,
  })
  const showPlayButton =
    !hasError &&
    (variant === "hero" || (variant === "inline" && !hasManuallyPlayed))
  const showMuteButton =
    !hasError && variant === "inline" && hasManuallyPlayed && !hasToggledMute

  const handleIntersection = useCallback(
    (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio >= 0.1 && !userPaused) {
          videoRef.current?.play()
        } else if (entry.intersectionRatio < 0.1) {
          videoRef.current?.pause()
        }
      })
    },
    [userPaused]
  )

  function togglePlay() {
    const videoElement = videoRef.current
    if (videoElement) {
      if (variant === "hero") {
        if (videoElement.paused) {
          setUserPaused(false)
          videoElement.play()
        } else {
          setUserPaused(true)
          videoElement.pause()
        }
      } else {
        setHasManuallyPlayed(true)
        videoElement.play()
      }
    }
  }

  function handleMuteToggle() {
    const videoElement = videoRef.current
    if (videoElement) {
      const currentlyMuted = videoElement.muted
      videoElement.muted = !currentlyMuted
      setIsMuted(!currentlyMuted)
      setHasToggledMute(true)
    }
  }

  function handleVolumeChangeEvent(event: React.UIEvent<HTMLVideoElement>) {
    if (event.currentTarget.muted && !isMuted) {
      setIsMuted(true)
    } else if (!event.currentTarget.muted && isMuted) {
      setIsMuted(false)
    }
  }

  function handlePlay() {
    setShowPoster(false)
    setIsPlaying(true)
  }

  useEffect(() => {
    const videoElement = videoRef.current

    if (!videoElement || variant !== "hero") {
      return
    }

    const observer = new IntersectionObserver(handleIntersection, {
      // Play video when at least 10% of it is visible
      threshold: [0, 0.1, 1],
    })

    observer.observe(videoElement)
    return () => {
      observer.disconnect()
    }
  }, [variant, handleIntersection])

  if (!sources.length) {
    return null
  }

  // Sort sources to prioritize WebM format for better compression
  const sortedSources = [...sources].sort((a, b) => {
    const aIsWebM = a.type.includes("webm")
    const bIsWebM = b.type.includes("webm")

    return aIsWebM === bIsWebM ? 0 : aIsWebM ? -1 : 1
  })

  return (
    <div
      ref={containerRef}
      className={cx(classNames, {
        [styles.hasOverlay]: hasOverlay,
        [styles.hasError]: hasError,
      })}
    >
      <video
        ref={videoRef}
        className={styles.video}
        style={{
          objectPosition: focalPoint
            ? `${focalPoint.x}% ${focalPoint.y}%`
            : undefined,
        }}
        onLoadedMetadata={handleMetadataLoaded}
        onPlay={handlePlay}
        onPause={() => setIsPlaying(false)}
        onVolumeChange={handleVolumeChangeEvent}
        onError={handleError}
        crossOrigin="anonymous"
        {...defaultProps}
      >
        {sortedSources.map(({ src, type }) => (
          <source key={src} src={src} type={type} />
        ))}
        {captions?.length
          ? captions.map(({ src, srcLang, isDefault }) => (
              <track
                key={src}
                src={src}
                kind="captions"
                srcLang={srcLang}
                label={languages[srcLang] || srcLang}
                default={isDefault}
              />
            ))
          : null}
      </video>
      {(showPoster || hasError) && poster ? (
        <Image
          src={poster.src}
          alt=""
          aria-hidden="true"
          focalPoint={focalPoint}
          dimensions={poster.dimensions}
          fill
          sizes={
            containerWidth
              ? `${containerWidth}px`
              : `(min-width: 1367px) ${variant === "inline" ? "700px" : "100vw"}, 100vw`
          }
        />
      ) : null}
      {showPlayButton ? (
        <VideoPlayerButton
          className={styles.playButton}
          onPress={togglePlay}
          iconName={isPlaying ? "pause" : "play_arrow"}
          size={variant === "hero" ? "sm" : "lg"}
          aria-label={
            isPlaying
              ? intl.formatMessage({
                  id: "videoPlayer.pause",
                  defaultMessage: "Pause video",
                })
              : intl.formatMessage({
                  id: "videoPlayer.play",
                  defaultMessage: "Play video",
                })
          }
        />
      ) : null}
      {showMuteButton ? (
        <VideoPlayerButton
          className={styles.muteButton}
          onPress={handleMuteToggle}
          iconName={isMuted ? "volume_off" : "volume_up"}
          size="sm"
          aria-label={
            isMuted
              ? intl.formatMessage({
                  id: "videoPlayer.mute",
                  defaultMessage: "Mute video",
                })
              : intl.formatMessage({
                  id: "videoPlayer.unmute",
                  defaultMessage: "Unmute video",
                })
          }
        />
      ) : null}
    </div>
  )
}