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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import { useState, useEffect, useRef } from 'react'
import Splash from 'components/Splash'
import fetchJson from 'helpers/fetchJson'
const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails }) => {
const [data, setData] = useState(null)
const [loading, setLoading] = useState(null)
const videoEl = useRef()
const handleEnd = () => {
setCurrent(current === playlist.length - 1 ? null : current + 1)
}
useEffect(() => {
setLoading(true)
if (current === null) {
setData(null)
setDetails(d => ({ ...d, show: false }))
}
switch (playlist[current].type.split('_')[0]) {
case 'yt':
fetchJson('/api/youtube/video', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: playlist[current].id })
})
.then(v => {
setData({
id: v.videoDetails.videoId,
formats: v.formats
.filter(v => !v.isHLS && v.hasAudio && (audioOnly ? !v.hasVideo : v.hasVideo))
.sort((a, b) => audioOnly ? a.audioBitrate < b.audioBitrate : a.bitrate < b.bitrate)
})
setDetails(d => ({
...d,
title: v.videoDetails.title,
description: v.videoDetails.description
}))
})
.catch(() => console.log('error fetching video'))
.finally(() => setLoading(false))
break
default:
}
}, [playlist && playlist[current].id])
return (
data && !loading
? (
<video
onEnded={handleEnd}
ref={videoEl}
key={data.id}
controls
autoPlay
style={audioOnly ? { backgroundImage: 'url(' + playlist[current].thumbnail + ')' } : {}}
>
{
data.formats.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
|
