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
|
import { open } from 'helpers/windowActions'
import appList from 'configs/appList'
import useApps from 'hooks/useApps'
import fetchJson from 'helpers/fetchJson'
import { Splash } from 'components'
import styles from '../styles/Radio.module.scss'
const play = async (title, station, apps, setApps, enqueue) => {
const streamData = await fetchJson('/api/radio/stream', {
method: 'POST',
body: JSON.stringify({ station })
})
const items = [{ type: 'radio', title, ...streamData }]
apps && apps.length > 0 && apps.some(a => a && a.name === 'Player')
? setApps(prev => prev.map(a => a.name === 'Player' ? { ...a, props: { list: { items, enqueue } } } : a))
: open({ appName: 'Player', ...appList.Player }, setApps, { list: { items, enqueue } })
}
const List = ({ results, enqueue }) => {
const { apps, setApps } = useApps()
return (
<div className={styles.list}>
<div>
{results === 'loading'
? <Splash />
: <>
{results && results.length === 0 && <div>{t('radio_no_result')}</div>}
{results && results.length > 0 && (
results.map(({ title, url, logo, genres, locations }) => (
<div key={url} onClick={() => play(title, url, apps, setApps, enqueue)}>
<img width={75} height={75} src={logo} loading="lazy" alt="title" />
<div>
<span>{ title }</span>
<div>
<span>{locations.join(', ')}</span>
<div>
{genres.map(g => <span>{g}</span>)}
</div>
</div>
</div>
</div>
))
)}
</>
}
</div>
</div>
)
}
export default List
|
