import { useRef } from 'react'
import Splash from 'components/Splash'

const Video = ({ playlist, current, setCurrent }) => {
  if (!playlist) return null

  const videoEl = useRef()
  const sources = playlist[current]?.sources

  const handleEnd = () => {
    setCurrent(current === playlist.length - 1 ? null : current + 1)
  }

  return (
    sources
      ? (
        <video onEnded={handleEnd} ref={videoEl} key={playlist[current]?.id} controls autoPlay>
          {
          sources.map(s => (
            <source src={s.url} type={s.mimeType} key={s.url} />
          ))
        }
          Your browser does not support the video tag.
        </video>
        )
      : (
        <Splash />
        )
  )
}

export default Video