add radio app

2 files changed, 46 insertions, 7 deletions

diff --git a/apps/Player/components/App.js b/apps/Player/components/App.js
index 2ace63c..552ae52 100644
--- a/apps/Player/components/App.js
+++ b/apps/Player/components/App.js
@@ -7,7 +7,7 @@ import Video from './Video'
 import Buttons from './Buttons'
 import { Splash } from 'components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faList, faTrashAlt, faCaretSquareRight, faInfinity, faAlignJustify, faVideo, faMusic } from '@fortawesome/free-solid-svg-icons'
+import { faList, faTrashAlt, faCaretSquareRight, faInfinity, faAlignJustify, faVideo, faMusic, faPodcast } from '@fortawesome/free-solid-svg-icons'
 
 const App = ({ list }) => {
   const { t } = useSettings()
@@ -78,6 +78,15 @@ const App = ({ list }) => {
     smallDevice && details && details.show && setShowPlaylist(false)
   }, [details && details.show])
 
+  const iconType = type => {
+    switch (type) {
+      case 'yt_video': return faCaretSquareRight
+      case 'yt_live': return faInfinity
+      case 'radio': return faPodcast
+      default: return faCaretSquareRight
+    }
+  }
+
   const remove = (e, i) => {
     e.stopPropagation()
     if (current === i) {
@@ -144,9 +153,7 @@ const App = ({ list }) => {
                         key={item.id}
                       >
                         <FontAwesomeIcon
-                          icon={item.type.split('_')[1] === 'live'
-                            ? faInfinity
-                            : faCaretSquareRight}
+                          icon={iconType(item.type)}
                         />
                         <span>{(i + 1) + '.'}</span>
                         <span>{item.title}</span>
diff --git a/apps/Player/components/Video.js b/apps/Player/components/Video.js
index de00761..2167ee0 100644
--- a/apps/Player/components/Video.js
+++ b/apps/Player/components/Video.js
@@ -1,9 +1,13 @@
 import { useState, useEffect, useRef } from 'react'
 import Image from 'next/image'
 import Splash from 'components/Splash'
+import usePopup from 'hooks/usePopup'
+import useSettings from 'hooks/useSettings'
 import fetchJson from 'helpers/fetchJson'
 
 const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails }) => {
+  const { t } = useSettings()
+  const { setPopup } = usePopup()
   const [data, setData] = useState(null)
   const [loading, setLoading] = useState(null)
   const videoEl = useRef()
@@ -40,9 +44,37 @@ const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails })
               description: v.videoDetails.description
             }))
           })
-          .catch(() => console.log('error fetching video'))
+          .catch(() => {
+            setData({
+              // thumbnail: v.videoDetails.thumbnails[0].url,
+              formats: []
+            })
+            setDetails(d => ({
+              ...d,
+              title: 'Error',
+              description: 'Item did not load correctly'
+            }))
+            setPopup({
+              content: t('player_youtube_fetching_error'),
+              time: 2000,
+              error: true
+            })
+          })
           .finally(() => setLoading(false))
-        break
+      break
+      case 'radio':
+        const { url, mimeType, thumbnail, title } = playlist[current];
+        setData({
+          thumbnail,
+          formats: [{ url, mimeType }]
+        })
+        setDetails(d => ({
+          ...d,
+          title: 'Gra radio ' + title,
+          description: ''
+        }))
+        setLoading(false)
+      break
       default:
     }
   }, [playlist && playlist[current].id, audioOnly])
@@ -67,7 +99,7 @@ const Video = ({ playlist, current, setCurrent, audioOnly = false, setDetails })
             }
             Your browser does not support the video tag.
           </video>
-          {audioOnly && (
+          {(audioOnly || playlist[current].type === 'radio') && (
             <>
               <div />
               <span style={{ backgroundImage: `url(${data.thumbnail})` }} />