Radio app fixes

4 files changed, 64 insertions, 27 deletions

diff --git a/apps/Radio/components/List.js b/apps/Radio/components/List.js
index 73e1523..6f24df6 100644
--- a/apps/Radio/components/List.js
+++ b/apps/Radio/components/List.js
@@ -2,6 +2,7 @@ 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) => {
@@ -23,23 +24,28 @@ const List = ({ results, enqueue }) => {
   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>)}
+        {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>
-            </div>
-          ))
-        )}
+                ))
+              )}
+          </>
+        }
       </div>
     </div>
   )
diff --git a/apps/Radio/components/Search.js b/apps/Radio/components/Search.js
index 363a37c..2bb3371 100644
--- a/apps/Radio/components/Search.js
+++ b/apps/Radio/components/Search.js
@@ -1,8 +1,10 @@
 import { useState } from 'react'
-import styles from '../styles/Radio.module.scss'
+import useSettings from 'hooks/useSettings'
 import fetchJson from 'helpers/fetchJson'
+import styles from '../styles/Radio.module.scss'
 
 const searchQuery = async (query, setResults) => {
+  setResults('loading')
   const results = await fetchJson('/api/radio/stations', {
     method: 'POST',
     body: JSON.stringify({ query })
@@ -14,17 +16,31 @@ const searchQuery = async (query, setResults) => {
 const Search = ({ setResults }) => {
   const [query, setQuery] = useState('')
   const changeQuery = e => setQuery(e.target.value)
+  const { t } = useSettings()
+
+  const onSubmit = e => {
+    e.preventDefault()
+    searchQuery(query, setResults)
+  }
 
   return (
-    <div className={styles.search}>
-      <input type="text" onChange={changeQuery} value={query} />
+    <form
+      className={styles.search}
+      onSubmit={onSubmit}
+    >
+      <input
+        type="text"
+        onChange={changeQuery}
+        placeholder={t('radio_search_placeholder')}
+        value={query}
+      />
       <span
         className="window__button"
-        onClick={() => searchQuery(query, setResults)}
+        onClick={onSubmit}
       >
-        Search
+        {t('radio_search')}
       </span>
-    </div>
+    </form>
   )
 }
 
diff --git a/configs/translations.js b/configs/translations.js
index 0473ecb..617ce16 100644
--- a/configs/translations.js
+++ b/configs/translations.js
@@ -98,7 +98,10 @@ const translations = {
     yt_playlist: 'Playlists',
     yt_enqueue: 'Enqueue',
     yt_views: 'views',
-    yt_watching: 'watching'
+    yt_watching: 'watching',
+    radio_search: 'Search',
+    radio_no_result: 'No results',
+    radio_search_placeholder: 'Search by name, country, city, genere...',
   },
   pl: {
     register_user: 'Zarejestruj użytkownika',
@@ -184,6 +187,7 @@ const translations = {
     player_playlist_default: 'Domyślna lista',
     player_item_playing: 'Odtwarzanie w Odtwarzaczu',
     player_item_enqueued: 'Dodano do kolejki odtwarzania',
+    player_youtube_fetching_error: 'Błąd pobierania z Youtube',
     change_password_current: 'Obecne hasło',
     change_password_new: 'Nowe hasło',
     change_password_confirm: 'Powtórz nowe hasło',
@@ -198,7 +202,10 @@ const translations = {
     yt_playlist: 'Playlisty',
     yt_enqueue: 'Dodaj do listy',
     yt_views: 'wyświetleń',
-    yt_watching: 'oglądających'
+    yt_watching: 'oglądających',
+    radio_search: 'Szukaj',
+    radio_no_result: 'Brak pasujących wyników',
+    radio_search_placeholder: 'Szukaj po nazwie, kraju, mieście, gatunku...',
   },
   es: {
     register_user: 'Registrar al usuario',
@@ -284,6 +291,7 @@ const translations = {
     player_playlist_default: 'Lista predeterminada',
     player_item_playing: 'Jugar con el Jugador',
     player_item_enqueued: 'Añadido a la cola de reproducción',
+    player_youtube_fetching_error: 'Error de descarga de YouTube',
     change_password_current: 'Contraseña actual',
     change_password_new: 'Contraseña nueva',
     change_password_confirm: 'Repetir contraseña nueva',
@@ -298,7 +306,10 @@ const translations = {
     yt_playlist: 'Listas',
     yt_enqueue: 'Agregar',
     yt_views: 'visitas',
-    yt_watching: 'espectadores'
+    yt_watching: 'espectadores',
+    radio_search: 'Buscar',
+    radio_no_result: 'Sin resultados',
+    radio_search_placeholder: 'Busca por nombre, país, ciudad, genero...',
   },
   de: {
     register_user: 'Registrieren Sie den Benutzer',
@@ -384,6 +395,7 @@ const translations = {
     player_playlist_default: 'Standardliste',
     player_item_playing: 'Spiele auf dem Spieler',
     player_item_enqueued: 'Zur Play Queue hinzugefügt',
+    player_youtube_fetching_error: 'Fehler beim Herunterladen von YouTube',
     change_password_current: 'Aktuelles Passwort',
     change_password_new: 'Neues Passwort',
     change_password_confirm: 'Wiederhole neues Passwort',
@@ -398,7 +410,10 @@ const translations = {
     yt_playlist: 'Playlists',
     yt_enqueue: 'Hinzufügen',
     yt_views: 'Aufrufe',
-    yt_watching: 'Zuschauer'
+    yt_watching: 'Zuschauer',
+    radio_search: 'Suchen',
+    radio_no_result: 'Keine Ergebnisse',
+    radio_search_placeholder: 'Suche nach Name, Land, Stadt, Gattung...',
   }
 }
 
diff --git a/hooks/useSettings.js b/hooks/useSettings.js
index 74092b2..35a4fed 100644
--- a/hooks/useSettings.js
+++ b/hooks/useSettings.js
@@ -20,7 +20,7 @@ export const SettingsProvider = ({ children }) => {
     ? translations[data.language][key]
       ? translations[data.language][key]
       : translations.en[key]
-    : '...'
+    : `*${key}*`
 
   useEffect(() => {
     const loggedOutSettings = JSON.parse(localStorage.getItem('loggedOutSettings'))