Add Internet Radio support (#2063)

* add internet radio support

* Add dynamic sidebar icon to Radios

* Fix typos

* Make URL suffix consistent

* Fix typo

* address feedback

* Don't need to preload when playing Internet Radios

* Reorder migration, or else it won't be applied

* Make Radio list view responsive

Also added filter by name, removed RadioActions and RadioContextMenu, and added a default radio icon, in case of favicon is not available.

* Simplify StreamField usage

* fix button, hide progress on mobile

* use js styles over index.css

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/audioplayer/AudioTitle.js

@@ -18,7 +18,14 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
   const qi = { suffix: song.suffix, bitRate: song.bitRate }
 
   return (
-    <Link to={`/album/${song.albumId}/show`} className={className}>
+    <Link
+      to={
+        audioInfo.isRadio
+          ? `/radio/${audioInfo.trackId}/show`
+          : `/album/${song.albumId}/show`
+      }
+      className={className}
+    >
       <span>
         <span className={clsx(classes.songTitle, 'songTitle')}>
           {song.title}

ui/src/audioplayer/Player.js

@@ -41,7 +41,9 @@ const Player = () => {
   )
   const { authenticated } = useAuthState()
   const visible = authenticated && playerState.queue.length > 0
+  const isRadio = playerState.current?.isRadio || false
   const classes = useStyle({
+    isRadio,
     visible,
     enableCoverAnimation: config.enableCoverAnimation,
   })
@@ -88,8 +90,11 @@ const Player = () => {
       playIndex: playerState.playIndex,
       autoPlay: playerState.clear || playerState.playIndex === 0,
       clearPriorAudioLists: playerState.clear,
-      extendsContent: <PlayerToolbar id={current.trackId} />,
+      extendsContent: (
+        <PlayerToolbar id={current.trackId} isRadio={current.isRadio} />
+      ),
       defaultVolume: isMobilePlayer ? 1 : playerState.volume,
+      showMediaSession: !current.isRadio,
     }
   }, [playerState, defaultOptions, isMobilePlayer])
 
@@ -116,6 +121,10 @@ const Player = () => {
         return
       }
 
+      if (info.isRadio) {
+        return
+      }
+
       if (!preloaded) {
         const next = nextSong()
         if (next != null) {
@@ -149,7 +158,9 @@ const Player = () => {
       if (info.duration) {
         const song = info.song
         document.title = `${song.title} - ${song.artist} - Navidrome`
-        subsonic.nowPlaying(info.trackId)
+        if (!info.isRadio) {
+          subsonic.nowPlaying(info.trackId)
+        }
         setPreload(false)
         if (config.gaTrackingId) {
           ReactGA.event({

ui/src/audioplayer/PlayerToolbar.js

@@ -29,6 +29,7 @@ const Toolbar = ({ id }) => {
   )
 }
 
-const PlayerToolbar = ({ id }) => (id ? <Toolbar id={id} /> : <Placeholder />)
+const PlayerToolbar = ({ id, isRadio }) =>
+  id && !isRadio ? <Toolbar id={id} /> : <Placeholder />
 
 export default PlayerToolbar

ui/src/audioplayer/styles.js

@@ -78,6 +78,17 @@ const useStyle = makeStyles(
         {
           display: 'none',
         },
+      '& .music-player-panel .panel-content .progress-bar-content section.audio-main':
+        {
+          display: (props) => {
+            return props.isRadio ? 'none' : 'inline-flex'
+          },
+        },
+      '& .react-jinke-music-player-mobile-progress': {
+        display: (props) => {
+          return props.isRadio ? 'none' : 'flex'
+        },
+      },
     },
   }),
   { name: 'NDAudioPlayer' }