Show indicator on current playing song. Fixes #128

ui/src/common/SongTitleField.js

@@ -0,0 +1,79 @@
+import { makeStyles } from '@material-ui/core/styles'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { FunctionField } from 'react-admin'
+import get from 'lodash.get'
+import { useTheme } from '@material-ui/core/styles'
+import PlayingLight from '../icons/playing-light.gif'
+import PlayingDark from '../icons/playing-dark.gif'
+import PausedLight from '../icons/paused-light.png'
+import PausedDark from '../icons/paused-dark.png'
+
+const useStyles = makeStyles({
+  icon: {
+    width: '32px',
+    height: '32px',
+    verticalAlign: 'text-top',
+    marginLeft: '-8px',
+    marginTop: '-7px',
+    paddingRight: '3px',
+  },
+  text: {
+    verticalAlign: 'text-top',
+  },
+})
+
+const SongTitleField = ({ showTrackNumbers, ...props }) => {
+  const theme = useTheme()
+  const classes = useStyles()
+  const { record } = props
+  const currentTrack = useSelector((state) => get(state, 'queue.current', {}))
+  const currentId = currentTrack.trackId
+  const paused = currentTrack.paused
+  const isCurrent =
+    currentId && (currentId === record.id || currentId === record.mediaFileId)
+
+  const trackName = (r) => {
+    const name = r.title
+    if (r.trackNumber && showTrackNumbers) {
+      return r.trackNumber.toString().padStart(2, '0') + ' ' + name
+    }
+    return name
+  }
+
+  const Icon = () => {
+    let icon
+    if (paused) {
+      icon = theme.palette.type === 'light' ? PausedLight : PausedDark
+    } else {
+      icon = theme.palette.type === 'light' ? PlayingLight : PlayingDark
+    }
+    return (
+      <img
+        src={icon}
+        className={classes.icon}
+        alt={paused ? 'paused' : 'playing'}
+      />
+    )
+  }
+
+  return (
+    <>
+      {isCurrent && <Icon />}
+      <FunctionField
+        {...props}
+        source="title"
+        render={trackName}
+        className={classes.text}
+      />
+    </>
+  )
+}
+
+SongTitleField.propTypes = {
+  record: PropTypes.object,
+  showTrackNumbers: PropTypes.bool,
+}
+
+export default SongTitleField

ui/src/common/index.js

@@ -12,6 +12,7 @@ import DocLink from './DocLink'
 import List from './List'
 import { SongDatagrid, SongDatagridRow } from './SongDatagrid'
 import SongContextMenu from './SongContextMenu'
+import SongTitleField from './SongTitleField'
 import QuickFilter from './QuickFilter'
 import useAlbumsPerPage from './useAlbumsPerPage'
 
@@ -28,6 +29,7 @@ export {
   SongDetails,
   SongDatagrid,
   SongDatagridRow,
+  SongTitleField,
   DocLink,
   formatRange,
   ArtistLinkField,