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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import styles from '../styles/Player.module.scss'
import { useState, useEffect } from 'react'
import useSettings from 'hooks/useSettings'
import Video from './Video'
import Buttons from './Buttons'
import { Splash } from 'components'
const App = ({ list }) => {
const { t } = useSettings()
const [current, setCurrent] = useState(null)
const [playlist, setPlaylist] = useState(null)
const [showPlaylist, setShowPlaylist] = useState(false)
useEffect(() => {
if (list) {
const { items, enqueue } = list
setPlaylist(
p => enqueue && p
? p.some(x => items.some(y => x.id === y.id))
? p
: [...p, ...items]
: items
)
if (enqueue) {
setShowPlaylist(true)
}
} else {
if (typeof window !== 'undefined') {
try {
setPlaylist(JSON.parse(window.localStorage.getItem('playlist')))
} catch (e) {
setPlaylist([])
window.localStorage.setItem('playlist', JSON.stringify([]))
}
}
}
}, [list])
useEffect(() => {
if (playlist) {
const { items, enqueue } = playlist
if (typeof window !== 'undefined' && playlist && playlist.length > 0) {
window.localStorage.setItem('playlist', JSON.stringify(enqueue ? [...playlist, ...items] : items))
setShowPlaylist(true)
}
if (current === null && list) {
setCurrent(
enqueue
? playlist && playlist.length > 1
? playlist.length - 1
: 0
: 0
)
}
}
}, [playlist])
if (!playlist) return <Splash />
return (
<>
<div className='window__submenu'>
<div>
<div
onClick={() => { setShowPlaylist(p => !p) }}
className={current ? 'active' : null}
>
{t('player_playlist_default')}
</div>
<div onClick={() => {}}>+</div>
<Buttons current={current} setCurrent={setCurrent} playlist={playlist} />
</div>
</div>
<div className={styles.player}>
<div>
{current !== null && (
<Video playlist={playlist} current={current} setCurrent={setCurrent} />
)}
</div>
<div style={showPlaylist ? {} : { transform: 'translateX(-110%)' }}>
<ul>
{
playlist && playlist.length > 0
? (
playlist.map((item, i) => (
<li
onClick={() => { setCurrent(i) }}
className={current === i ? styles.activeItem : ''}
key={item.id}
>
<span>{(i + 1) + '.'}</span>
{item.title}
</li>
))
)
: (
<li>{t('player_playlist_empty')}</li>
)
}
</ul>
<div onClick={() => setShowPlaylist(false)}><</div>
</div>
</div>
</>
)
}
export default App
|
