Add StarButton to player

ui/src/audioplayer/Player.js

@@ -16,6 +16,7 @@ import {
 import themes from '../themes'
 import { makeStyles } from '@material-ui/core/styles'
 import config from '../config'
+import PlayerToolbar from './PlayerToolbar'
 import Hotkeys from 'react-hot-keys'
 
 const useStyle = makeStyles((theme) => ({
@@ -98,6 +99,7 @@ const Player = () => {
   const dispatch = useDispatch()
   const queue = useSelector((state) => state.queue)
   const { authenticated } = useAuthState()
+  const current = queue.current || {}
 
   const options = useMemo(() => {
     return {
@@ -106,9 +108,10 @@ const Player = () => {
       autoPlay: queue.clear || queue.playIndex === 0,
       playIndex: queue.playIndex,
       audioLists: queue.queue.map((item) => item),
+      extendsContent: <PlayerToolbar id={current.trackId} />,
       defaultVolume: queue.volume,
     }
-  }, [queue.clear, queue.queue, queue.volume, queue.playIndex, defaultOptions])
+  }, [queue.clear, queue.queue, queue.volume, queue.playIndex, current, defaultOptions])
 
   const OnAudioListsChange = useCallback(
     (currentPlayIndex, audioLists) => {

ui/src/audioplayer/PlayerToolbar.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom'
+import { useGetOne } from 'react-admin'
+import IconButton from '@material-ui/core/IconButton'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
+import { StarButton } from '../common'
+
+const Placeholder = () => (
+  <IconButton>
+    <StarBorderIcon disabled={true} />
+  </IconButton>
+)
+
+const Toolbar = ({ id }) => {
+  const location = useLocation()
+  const resource = location.pathname.startsWith('/song') ? 'song' : 'albumSong'
+  const { data, loading } = useGetOne(resource, id)
+
+  if (loading) {
+    return <Placeholder />
+  }
+
+  return <StarButton record={data} resource={resource} />
+}
+
+const PlayerToolbar = ({ id }) => (
+  <>{id ? <Toolbar id={id} /> : <Placeholder />} </>
+)
+
+export default PlayerToolbar

ui/src/common/StarButton.js

@@ -71,6 +71,7 @@ StarButton.defaultProps = {
   record: {},
   visible: true,
   size: 'small',
+  color: 'inherit',
 }
 
 export default StarButton