Add link to album from player's song title. Fixes #324

model/mediafile.go

@@ -14,7 +14,7 @@ type MediaFile struct {
 	Album                string    `json:"album"`
 	ArtistID             string    `json:"artistId"      orm:"pk;column(artist_id)"`
 	Artist               string    `json:"artist"`
-	AlbumArtistID        string    `json:"albumArtistId"`
+	AlbumArtistID        string    `json:"albumArtistId" orm:"pk;column(album_artist_id)"`
 	AlbumArtist          string    `json:"albumArtist"`
 	AlbumID              string    `json:"albumId"       orm:"pk;column(album_id)"`
 	HasCoverArt          bool      `json:"hasCoverArt"`

ui/src/audioplayer/Player.js

@@ -1,18 +1,37 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
 import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
 import subsonic from '../subsonic'
 import { scrobble, syncQueue } from './queue'
 import themes from '../themes'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyle = makeStyles((theme) => ({
+  audioTitle: {
+    textDecoration: 'none',
+    color: theme.palette.primary.light,
+  },
+}))
 
 const Player = () => {
+  const classes = useStyle()
   const translate = useTranslate()
   const currentTheme = useSelector((state) => state.theme)
   const theme = themes[currentTheme] || themes.DarkTheme
   const playerTheme = (theme.player && theme.player.theme) || 'dark'
 
+  const audioTitle = (audioInfo) => (
+    <Link
+      to={`/album/${audioInfo.albumId}/show`}
+      className={classes.audioTitle}
+    >
+      {`${audioInfo.name} - ${audioInfo.singer}`}
+    </Link>
+  )
+
   const defaultOptions = {
     theme: playerTheme,
     bounds: 'body',
@@ -48,6 +67,7 @@ const Player = () => {
       destroyText: translate('player.destroyText'),
       downloadText: translate('player.downloadText'),
       removeAudioListsText: translate('player.removeAudioListsText'),
+      audioTitle: audioTitle,
       clickToDeleteText: (name) =>
         translate('player.clickToDeleteText', { name }),
       emptyLyricText: translate('player.emptyLyricText'),

ui/src/audioplayer/queue.js

@@ -14,6 +14,8 @@ const mapToAudioLists = (item) => {
     trackId: id,
     name: item.title,
     singer: item.artist,
+    albumId: item.albumId,
+    artistId: item.albumArtistId,
     duration: item.duration,
     cover: subsonic.url('getCoverArt', id, { size: 300 }),
     musicSrc: subsonic.url('stream', id, { ts: true }),

ui/src/common/ArtistLinkField.js

@@ -26,12 +26,12 @@ const ArtistLinkField = ({ record, className, width }) => {
 }
 
 ArtistLinkField.propTypes = {
+  record: PropTypes.object,
+  width: PropTypes.number,
   className: PropTypes.string,
-  source: PropTypes.string,
 }
 
 ArtistLinkField.defaultProps = {
-  source: 'artistId',
   addLabel: true,
 }