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/App.js

@@ -14,6 +14,7 @@ import song from './song'
 import album from './album'
 import artist from './artist'
 import playlist from './playlist'
+import radio from './radio'
 import { Player } from './audioplayer'
 import customRoutes from './routes'
 import {
@@ -99,6 +100,10 @@ const Admin = (props) => {
         <Resource name="album" {...album} options={{ subMenu: 'albumList' }} />,
         <Resource name="artist" {...artist} />,
         <Resource name="song" {...song} />,
+        <Resource
+          name="radio"
+          {...(permissions === 'admin' ? radio.admin : radio.all)}
+        />,
         <Resource
           name="playlist"
           {...playlist}

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' }

ui/src/i18n/en.json

@@ -160,6 +160,24 @@
                 "duplicate_song": "Add duplicated songs",
                 "song_exist": "There are duplicates being added to the playlist. Would you like to add the duplicates or skip them?"
             }
+        },
+        "radio": {
+            "name": "Radio |||| Radios",
+            "fields": {
+                "name": "Name",
+                "streamUrl": "Stream URL",
+                "homePageUrl": "Home Page URL",
+                "updatedAt": "Updated at",
+                "createdAt": "Created at"
+            },
+            "notifications": {
+                "created": "Radio created",
+                "updated": "Radio updated",
+                "deleted": "Radio deleted"
+            },
+            "actions": {
+                "playNow": "Play Now"
+            }
         }
     },
     "ra": {
@@ -188,7 +206,8 @@
             "email": "Must be a valid email",
             "oneOf": "Must be one of: %{options}",
             "regex": "Must match a specific format (regexp): %{pattern}",
-            "unique": "Must be unique"
+            "unique": "Must be unique",
+            "url": "Must be a valid URL"
         },
         "action": {
             "add_filter": "Add filter",
@@ -310,6 +329,8 @@
         "noPlaylistsAvailable": "None available",
         "delete_user_title": "Delete user '%{name}'",
         "delete_user_content": "Are you sure you want to delete this user and all their data (including playlists and preferences)?",
+        "delete_radio_title": "Delete radio '%{name}'",
+        "delete_radio_content": "Are you sure you want to remove this radio?",
         "notifications_blocked": "You have blocked Notifications for this site in your browser's settings",
         "notifications_not_available": "This browser does not support desktop notifications or you are not accessing Navidrome over https",
         "lastfmLinkSuccess": "Last.fm successfully linked and scrobbling enabled",
@@ -402,4 +423,4 @@
             "toggle_love": "Add this track to favourites"
         }
     }
-}
+}

ui/src/radio/DeleteRadioButton.js

@@ -0,0 +1,76 @@
+import { fade, makeStyles } from '@material-ui/core'
+import DeleteIcon from '@material-ui/icons/Delete'
+import clsx from 'clsx'
+import React from 'react'
+import {
+  Button,
+  Confirm,
+  useDeleteWithConfirmController,
+  useNotify,
+  useRedirect,
+} from 'react-admin'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    deleteButton: {
+      color: theme.palette.error.main,
+      '&:hover': {
+        backgroundColor: fade(theme.palette.error.main, 0.12),
+        // Reset on mouse devices
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  }),
+  { name: 'RaDeleteWithConfirmButton' }
+)
+
+const DeleteRadioButton = (props) => {
+  const { resource, record, basePath, className, onClick, ...rest } = props
+
+  const notify = useNotify()
+  const redirect = useRedirect()
+
+  const onSuccess = () => {
+    notify('resources.radio.notifications.deleted')
+    redirect('/radio')
+  }
+
+  const { open, loading, handleDialogOpen, handleDialogClose, handleDelete } =
+    useDeleteWithConfirmController({
+      resource,
+      record,
+      basePath,
+      onClick,
+      onSuccess,
+    })
+
+  const classes = useStyles(props)
+  return (
+    <>
+      <Button
+        onClick={handleDialogOpen}
+        label="ra.action.delete"
+        key="button"
+        className={clsx('ra-delete-button', classes.deleteButton, className)}
+        {...rest}
+      >
+        <DeleteIcon />
+      </Button>
+      <Confirm
+        isOpen={open}
+        loading={loading}
+        title="message.delete_radio_title"
+        content="message.delete_radio_content"
+        translateOptions={{
+          name: record.name,
+        }}
+        onConfirm={handleDelete}
+        onClose={handleDialogClose}
+      />
+    </>
+  )
+}
+
+export default DeleteRadioButton

ui/src/radio/RadioCreate.js

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react'
+import {
+  Create,
+  required,
+  SimpleForm,
+  TextInput,
+  useMutation,
+  useNotify,
+  useRedirect,
+  useTranslate,
+} from 'react-admin'
+import { Title } from '../common'
+
+const RadioCreate = (props) => {
+  const translate = useTranslate()
+  const [mutate] = useMutation()
+  const notify = useNotify()
+  const redirect = useRedirect()
+
+  const resourceName = translate('resources.radio.name', { smart_count: 1 })
+  const title = translate('ra.page.create', {
+    name: `${resourceName}`,
+  })
+
+  const save = useCallback(
+    async (values) => {
+      try {
+        await mutate(
+          {
+            type: 'create',
+            resource: 'radio',
+            payload: { data: values },
+          },
+          { returnPromise: true }
+        )
+        notify('resources.radio.notifications.created', 'info', {
+          smart_count: 1,
+        })
+        redirect('/radio')
+      } catch (error) {
+        if (error.body.errors) {
+          return error.body.errors
+        }
+      }
+    },
+    [mutate, notify, redirect]
+  )
+
+  return (
+    <Create title={<Title subTitle={title} />} {...props}>
+      <SimpleForm save={save} variant={'outlined'}>
+        <TextInput source="name" validate={[required()]} />
+        <TextInput type="url" source="streamUrl" validate={[required()]} />
+        <TextInput type="url" source="homepageUrl" />
+      </SimpleForm>
+    </Create>
+  )
+}
+
+export default RadioCreate

ui/src/radio/RadioEdit.js

@@ -0,0 +1,134 @@
+import { Card, makeStyles } from '@material-ui/core'
+import React, { useCallback } from 'react'
+import {
+  DateField,
+  EditContextProvider,
+  required,
+  SaveButton,
+  SimpleForm,
+  TextInput,
+  Toolbar,
+  useEditController,
+  useMutation,
+  useNotify,
+  useRedirect,
+} from 'react-admin'
+import DeleteRadioButton from './DeleteRadioButton'
+
+const useStyles = makeStyles({
+  toolbar: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+})
+
+function urlValidate(value) {
+  if (!value) {
+    return undefined
+  }
+
+  try {
+    new URL(value)
+    return undefined
+  } catch (_) {
+    return 'ra.validation.url'
+  }
+}
+
+const RadioToolbar = (props) => (
+  <Toolbar {...props} classes={useStyles()}>
+    <SaveButton disabled={props.pristine} />
+    <DeleteRadioButton />
+  </Toolbar>
+)
+
+const RadioEditLayout = ({
+  hasCreate,
+  hasShow,
+  hasEdit,
+  hasList,
+  ...props
+}) => {
+  const [mutate] = useMutation()
+  const notify = useNotify()
+  const redirect = useRedirect()
+
+  const { record } = props
+
+  const save = useCallback(
+    async (values) => {
+      try {
+        await mutate(
+          {
+            type: 'update',
+            resource: 'radio',
+            payload: {
+              id: values.id,
+              data: {
+                name: values.name,
+                streamUrl: values.streamUrl,
+                homePageUrl: values.homePageUrl,
+              },
+            },
+          },
+          { returnPromise: true }
+        )
+        notify('resources.radio.notifications.updated', 'info', {
+          smart_count: 1,
+        })
+        redirect('/radio')
+      } catch (error) {
+        if (error.body.errors) {
+          return error.body.errors
+        }
+      }
+    },
+    [mutate, notify, redirect]
+  )
+
+  if (!record) {
+    return null
+  }
+
+  return (
+    <>
+      {record && (
+        <Card>
+          <SimpleForm
+            variant="outlined"
+            save={save}
+            toolbar={<RadioToolbar />}
+            {...props}
+          >
+            <TextInput source="name" validate={[required()]} />
+            <TextInput
+              type="url"
+              source="streamUrl"
+              fullWidth
+              validate={[required(), urlValidate]}
+            />
+            <TextInput
+              type="url"
+              source="homePageUrl"
+              fullWidth
+              validate={[urlValidate]}
+            />
+            <DateField variant="body1" source="updatedAt" showTime />
+            <DateField variant="body1" source="createdAt" showTime />
+          </SimpleForm>
+        </Card>
+      )}
+    </>
+  )
+}
+
+const RadioEdit = (props) => {
+  const controllerProps = useEditController(props)
+  return (
+    <EditContextProvider value={controllerProps}>
+      <RadioEditLayout {...props} record={controllerProps.record} />
+    </EditContextProvider>
+  )
+}
+
+export default RadioEdit

ui/src/radio/RadioList.js

@@ -0,0 +1,139 @@
+import { makeStyles, useMediaQuery } from '@material-ui/core'
+import React, { cloneElement } from 'react'
+import {
+  CreateButton,
+  Datagrid,
+  DateField,
+  Filter,
+  List,
+  sanitizeListRestProps,
+  SearchInput,
+  SimpleList,
+  TextField,
+  TopToolbar,
+  UrlField,
+  useTranslate,
+} from 'react-admin'
+import { ToggleFieldsMenu, useSelectedFields } from '../common'
+import { StreamField } from './StreamField'
+
+const useStyles = makeStyles({
+  row: {
+    '&:hover': {
+      '& $contextMenu': {
+        visibility: 'visible',
+      },
+    },
+  },
+  contextMenu: {
+    visibility: 'hidden',
+  },
+})
+
+const RadioFilter = (props) => (
+  <Filter {...props} variant={'outlined'}>
+    <SearchInput id="search" source="name" alwaysOn />
+  </Filter>
+)
+
+const RadioListActions = ({
+  className,
+  filters,
+  resource,
+  showFilter,
+  displayedFilters,
+  filterValues,
+  isAdmin,
+  ...rest
+}) => {
+  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
+  const translate = useTranslate()
+
+  return (
+    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      {isAdmin && (
+        <CreateButton basePath="/radio">
+          {translate('ra.action.create')}
+        </CreateButton>
+      )}
+      {filters &&
+        cloneElement(filters, {
+          resource,
+          showFilter,
+          displayedFilters,
+          filterValues,
+          context: 'button',
+        })}
+      {isNotSmall && <ToggleFieldsMenu resource="radio" />}
+    </TopToolbar>
+  )
+}
+
+const RadioList = ({ permissions, ...props }) => {
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+
+  const classes = useStyles()
+
+  const isAdmin = permissions === 'admin'
+
+  const toggleableFields = {
+    name: <TextField source="name" />,
+    homePageUrl: (
+      <UrlField
+        source="homePageUrl"
+        onClick={(e) => e.stopPropagation()}
+        target="_blank"
+        rel="noopener noreferrer"
+      />
+    ),
+    streamUrl: <StreamField source="streamUrl" />,
+    createdAt: <DateField source="createdAt" showTime />,
+    updatedAt: <DateField source="updatedAt" showTime />,
+  }
+
+  const columns = useSelectedFields({
+    resource: 'radio',
+    columns: toggleableFields,
+    defaultOff: ['updatedAt'],
+  })
+
+  return (
+    <List
+      {...props}
+      exporter={false}
+      bulkActionButtons={isAdmin ? undefined : false}
+      hasCreate={isAdmin}
+      actions={<RadioListActions isAdmin={isAdmin} />}
+      filters={<RadioFilter />}
+      perPage={isXsmall ? 25 : 10}
+    >
+      {isXsmall ? (
+        <SimpleList
+          linkType={isAdmin ? 'edit' : 'show'}
+          leftIcon={(r) => (
+            <StreamField
+              record={r}
+              source={'streamUrl'}
+              hideUrl
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+            />
+          )}
+          primaryText={(r) => r.name}
+          secondaryText={(r) => r.homePageUrl}
+        />
+      ) : (
+        <Datagrid
+          rowClick={isAdmin ? 'edit' : 'show'}
+          classes={{ row: classes.row }}
+        >
+          {columns}
+        </Datagrid>
+      )}
+    </List>
+  )
+}
+
+export default RadioList

ui/src/radio/RadioShow.js

@@ -0,0 +1,52 @@
+import { Card } from '@material-ui/core'
+import React from 'react'
+import {
+  DateField,
+  required,
+  ShowContextProvider,
+  SimpleShowLayout,
+  TextField,
+  UrlField,
+  useShowController,
+} from 'react-admin'
+import { StreamField } from './StreamField'
+
+const RadioShowLayout = ({ ...props }) => {
+  const { record } = props
+
+  if (!record) {
+    return null
+  }
+
+  return (
+    <>
+      {record && (
+        <Card>
+          <SimpleShowLayout>
+            <TextField source="name" validate={[required()]} />
+            <StreamField source="streamUrl" />
+            <UrlField
+              type="url"
+              source="homePageUrl"
+              rel="noreferrer noopener"
+              target="_blank"
+            />
+            <DateField variant="body1" source="updatedAt" showTime />
+            <DateField variant="body1" source="createdAt" showTime />
+          </SimpleShowLayout>
+        </Card>
+      )}
+    </>
+  )
+}
+
+const RadioShow = (props) => {
+  const controllerProps = useShowController(props)
+  return (
+    <ShowContextProvider value={controllerProps}>
+      <RadioShowLayout {...props} record={controllerProps.record} />
+    </ShowContextProvider>
+  )
+}
+
+export default RadioShow

ui/src/radio/StreamField.js

@@ -0,0 +1,50 @@
+import { Button, makeStyles } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import React, { useCallback } from 'react'
+import { useRecordContext } from 'react-admin'
+import { useDispatch } from 'react-redux'
+import { setTrack } from '../actions'
+import { songFromRadio } from './helper'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    padding: '5px 0px',
+    textTransform: 'none',
+    marginRight: theme.spacing(1.5),
+  },
+}))
+
+export const StreamField = ({ hideUrl, ...rest }) => {
+  const record = useRecordContext(rest)
+  const dispatch = useDispatch()
+  const classes = useStyles()
+
+  const playTrack = useCallback(
+    async (evt) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+      dispatch(setTrack(await songFromRadio(record)))
+    },
+    [dispatch, record]
+  )
+
+  return (
+    <Button className={classes.button} onClick={playTrack}>
+      <PlayArrowIcon />
+      {!hideUrl && record.streamUrl}
+    </Button>
+  )
+}
+
+StreamField.propTypes = {
+  label: PropTypes.string,
+  record: PropTypes.object,
+  source: PropTypes.string.isRequired,
+  hideUrl: PropTypes.bool,
+}
+
+StreamField.defaultProps = {
+  addLabel: true,
+  hideUrl: false,
+}

ui/src/radio/helper.js

@@ -0,0 +1,35 @@
+export async function songFromRadio(radio) {
+  if (!radio) {
+    return undefined
+  }
+
+  let cover = 'internet-radio-icon.svg'
+  try {
+    const url = new URL(radio.homePageUrl ?? radio.streamUrl)
+    url.pathname = '/favicon.ico'
+    await resourceExists(url)
+    cover = url.toString()
+  } catch {}
+
+  return {
+    ...radio,
+    title: radio.name,
+    album: radio.homePageUrl || radio.name,
+    artist: radio.name,
+    cover,
+    isRadio: true,
+  }
+}
+
+const resourceExists = (url) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = function () {
+      resolve(url)
+    }
+    img.onerror = function () {
+      reject('not found')
+    }
+    img.src = url
+  })
+}

ui/src/radio/index.js

@@ -0,0 +1,28 @@
+import RadioCreate from './RadioCreate'
+import RadioEdit from './RadioEdit'
+import RadioList from './RadioList'
+import RadioShow from './RadioShow'
+import DynamicMenuIcon from '../layout/DynamicMenuIcon'
+import RadioIcon from '@material-ui/icons/Radio'
+import RadioOutlinedIcon from '@material-ui/icons/RadioOutlined'
+import React from 'react'
+
+const all = {
+  list: RadioList,
+  icon: (
+    <DynamicMenuIcon
+      path={'radio'}
+      icon={RadioOutlinedIcon}
+      activeIcon={RadioIcon}
+    />
+  ),
+  show: RadioShow,
+}
+
+const admin = {
+  ...all,
+  create: RadioCreate,
+  edit: RadioEdit,
+}
+
+export default { all, admin }

ui/src/reducers/playerReducer.js

@@ -23,6 +23,19 @@ const initialState = {
 const mapToAudioLists = (item) => {
   // If item comes from a playlist, trackId is mediaFileId
   const trackId = item.mediaFileId || item.id
+
+  if (item.isRadio) {
+    return {
+      trackId,
+      uuid: uuidv4(),
+      name: item.name,
+      song: item,
+      musicSrc: item.streamUrl,
+      cover: item.cover,
+      isRadio: true,
+    }
+  }
+
   const { lyrics } = item
   const timestampRegex =
     /(\[([0-9]{1,2}:)?([0-9]{1,2}:)([0-9]{1,2})(\.[0-9]{1,2})?\])/g