4 files changed, 123 insertions, 0 deletions
diff --git a/apps/Radio/components/App.js b/apps/Radio/components/App.js
new file mode 100644
index 0000000..bd306b4
--- /dev/null
+++ b/apps/Radio/components/App.js
@@ -0,0 +1,23 @@
+import { useState } from 'react'
+import styles from '../styles/Radio.module.scss'
+
+import Submenu from './Submenu'
+import Search from './Search'
+import List from './List'
+
+const App = () => {
+  const [enqueue, setEnqueue] = useState(false)
+  const [results, setResults] = useState()
+
+  return (
+    <>
+      <Submenu enqueue={enqueue} setEnqueue={setEnqueue} />
+      <div className={styles.radio}>
+        <Search setResults={setResults} />
+        <List results={results} enqueue={enqueue} />
+      </div>
+    </>
+  )
+}
+
+export default App
diff --git a/apps/Radio/components/List.js b/apps/Radio/components/List.js
new file mode 100644
index 0000000..73e1523
--- /dev/null
+++ b/apps/Radio/components/List.js
@@ -0,0 +1,48 @@
+import { open } from 'helpers/windowActions'
+import appList from 'configs/appList'
+import useApps from 'hooks/useApps'
+import fetchJson from 'helpers/fetchJson'
+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 && results.length === 0 && <div>No results</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
diff --git a/apps/Radio/components/Search.js b/apps/Radio/components/Search.js
new file mode 100644
index 0000000..363a37c
--- /dev/null
+++ b/apps/Radio/components/Search.js
@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import styles from '../styles/Radio.module.scss'
+import fetchJson from 'helpers/fetchJson'
+
+const searchQuery = async (query, setResults) => {
+  const results = await fetchJson('/api/radio/stations', {
+    method: 'POST',
+    body: JSON.stringify({ query })
+  })
+
+  setResults(results)
+}
+
+const Search = ({ setResults }) => {
+  const [query, setQuery] = useState('')
+  const changeQuery = e => setQuery(e.target.value)
+
+  return (
+    <div className={styles.search}>
+      <input type="text" onChange={changeQuery} value={query} />
+      <span
+        className="window__button"
+        onClick={() => searchQuery(query, setResults)}
+      >
+        Search
+      </span>
+    </div>
+  )
+}
+
+export default Search
diff --git a/apps/Radio/components/Submenu.js b/apps/Radio/components/Submenu.js
new file mode 100644
index 0000000..6b8724b
--- /dev/null
+++ b/apps/Radio/components/Submenu.js
@@ -0,0 +1,21 @@
+import useSettings from 'hooks/useSettings'
+
+const Submenu = ({ enqueue, setEnqueue }) => {
+  const { t } = useSettings()
+
+  return (
+    <div className='window__submenu'>
+      <div>
+        <span />
+        <div
+          className={enqueue ? '' : 'off'}
+          onClick={() => { setEnqueue(e => !e) }}
+        >
+          {t('yt_enqueue')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Submenu