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/index.tsx

@@ -1,68 +1,59 @@
 'use client'
 
-import { cx, VariantProps } from 'class-variance-authority'
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  VideoHTMLAttributes,
-} from 'react'
+import { cx } from 'class-variance-authority'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { Lang, languages } from '@scandic-hotels/common/constants/language'
-import { FocalPoint } from '@scandic-hotels/common/utils/imageVault'
+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'
 
-interface Caption {
-  src: string
-  srcLang: Lang
-  isDefault: boolean
-}
-
-export interface VideoPlayerProps extends VariantProps<typeof variants> {
-  sources: {
-    src: string
-    type: string
-  }[]
-  className?: string
-  captions?: Caption[]
-  focalPoint?: FocalPoint
-  autoPlay?: boolean
-  hasOverlay?: boolean
-}
-
 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 [isInteractedWith, setIsInteractedWith] = useState(false)
-  const [isPlaying, setIsPlaying] = useState(
+  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,
-    isInteractedWith,
-    autoPlay
+    hasManuallyPlayed,
+    shouldAutoPlay
   )
   const classNames = variants({
     className,
     variant,
   })
   const showPlayButton =
-    variant === 'hero' || (variant === 'inline' && !isInteractedWith)
-  const showMuteButton = variant === 'inline' && isInteractedWith
+    !hasError &&
+    (variant === 'hero' || (variant === 'inline' && !hasManuallyPlayed))
+  const showMuteButton =
+    !hasError && variant === 'inline' && hasManuallyPlayed && !hasToggledMute
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -89,7 +80,7 @@ export function VideoPlayer({
           videoElement.pause()
         }
       } else {
-        setIsInteractedWith(true)
+        setHasManuallyPlayed(true)
         videoElement.play()
       }
     }
@@ -101,6 +92,7 @@ export function VideoPlayer({
       const currentlyMuted = videoElement.muted
       videoElement.muted = !currentlyMuted
       setIsMuted(!currentlyMuted)
+      setHasToggledMute(true)
     }
   }
 
@@ -112,6 +104,11 @@ export function VideoPlayer({
     }
   }
 
+  function handlePlay() {
+    setShowPoster(false)
+    setIsPlaying(true)
+  }
+
   useEffect(() => {
     const videoElement = videoRef.current
 
@@ -143,18 +140,27 @@ export function VideoPlayer({
   })
 
   return (
-    <div className={cx(classNames, { [styles.hasOverlay]: hasOverlay })}>
+    <div
+      ref={containerRef}
+      className={cx(classNames, {
+        [styles.hasOverlay]: hasOverlay,
+        [styles.hasError]: hasError,
+      })}
+    >
       <video
         ref={videoRef}
         className={styles.video}
-        style={
-          focalPoint
-            ? { objectPosition: `${focalPoint.x}% ${focalPoint.y}%` }
-            : undefined
-        }
-        onPlay={() => setIsPlaying(true)}
+        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 }) => (
@@ -173,12 +179,28 @@ export function VideoPlayer({
             ))
           : 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'}
-          ariaLabel={
+          size={variant === 'hero' ? 'sm' : 'lg'}
+          aria-label={
             isPlaying
               ? intl.formatMessage({
                   id: 'videoPlayer.pause',
@@ -196,7 +218,8 @@ export function VideoPlayer({
           className={styles.muteButton}
           onPress={handleMuteToggle}
           iconName={isMuted ? 'volume_off' : 'volume_up'}
-          ariaLabel={
+          size="sm"
+          aria-label={
             isMuted
               ? intl.formatMessage({
                   id: 'videoPlayer.mute',
@@ -212,31 +235,3 @@ export function VideoPlayer({
     </div>
   )
 }
-
-function getVideoPropsByVariant(
-  variant: VideoPlayerProps['variant'],
-  isInteractedWith: boolean,
-  autoPlay?: boolean
-): VideoHTMLAttributes<HTMLVideoElement> {
-  switch (variant) {
-    case 'hero':
-      return {
-        controls: false,
-        controlsList: 'nodownload nofullscreen noremoteplayback',
-        autoPlay: autoPlay ?? true,
-        muted: true,
-        loop: true,
-        playsInline: true,
-      }
-    case 'inline':
-    default:
-      return {
-        controls: isInteractedWith,
-        controlsList: 'nodownload noremoteplayback',
-        autoPlay: autoPlay ?? isInteractedWith,
-        muted: true,
-        loop: false,
-        playsInline: true,
-      }
-  }
-}