apps/Player/components/Video.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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