diff --git a/ui/src/common/ArtistLinkField.js b/ui/src/common/ArtistLinkField.js
index 5d1950b67..f0a0a8e54 100644
--- a/ui/src/common/ArtistLinkField.js
+++ b/ui/src/common/ArtistLinkField.js
@@ -14,25 +14,35 @@ export const useGetHandleArtistClick = (width) => {
}
}
-export const ArtistLinkField = withWidth()(({ record, className, width }) => {
- const artistLink = useGetHandleArtistClick(width)
+const songsFilteredByArtist = (artist) => {
+ return `/song?filter={"artist":"${artist}"}`
+}
- return (
- e.stopPropagation()}
- className={className}
- >
- {record.albumArtist}
-
- )
-})
+export const ArtistLinkField = withWidth()(
+ ({ record, className, width, source }) => {
+ const artistLink = useGetHandleArtistClick(width)
+
+ const id = record[source + 'Id']
+ const link = id ? artistLink(id) : songsFilteredByArtist(record[source])
+ return (
+ e.stopPropagation()}
+ className={className}
+ >
+ {record[source]}
+
+ )
+ }
+)
ArtistLinkField.propTypes = {
record: PropTypes.object,
className: PropTypes.string,
+ source: PropTypes.string,
}
ArtistLinkField.defaultProps = {
addLabel: true,
+ source: 'albumArtist',
}
diff --git a/ui/src/layout/Menu.js b/ui/src/layout/Menu.js
index db5b82472..e57defe85 100644
--- a/ui/src/layout/Menu.js
+++ b/ui/src/layout/Menu.js
@@ -68,7 +68,7 @@ const Menu = ({ dense = false }) => {
const renderResourceMenuItemLink = (resource) => (
}
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index 73ce2c019..086fb73f1 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/ui/src/playlist/PlaylistSongs.js
@@ -25,6 +25,7 @@ import {
useSelectedFields,
useResourceRefresh,
DateField,
+ ArtistLinkField,
} from '../common'
import { AddToPlaylistDialog } from '../dialogs'
import { AlbumLinkField } from '../song/AlbumLinkField'
@@ -134,7 +135,8 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
trackNumber: isDesktop && ,
title: ,
album: isDesktop && ,
- artist: isDesktop && ,
+ artist: isDesktop && ,
+ albumArtist: isDesktop && ,
duration: (
),
@@ -158,7 +160,14 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
const columns = useSelectedFields({
resource: 'playlistTrack',
columns: toggleableFields,
- defaultOff: ['channels', 'bpm', 'year', 'playCount', 'playDate'],
+ defaultOff: [
+ 'channels',
+ 'bpm',
+ 'year',
+ 'playCount',
+ 'playDate',
+ 'albumArtist',
+ ],
})
return (
diff --git a/ui/src/song/SongList.js b/ui/src/song/SongList.js
index 9f99f0940..5307dae84 100644
--- a/ui/src/song/SongList.js
+++ b/ui/src/song/SongList.js
@@ -23,6 +23,7 @@ import {
SongSimpleList,
RatingField,
useResourceRefresh,
+ ArtistLinkField,
} from '../common'
import { useDispatch } from 'react-redux'
import { makeStyles } from '@material-ui/core/styles'
@@ -107,8 +108,8 @@ const SongList = (props) => {
sortByOrder={'ASC'}
/>
),
- artist: ,
- albumArtist: ,
+ artist: ,
+ albumArtist: ,
trackNumber: isDesktop && ,
playCount: isDesktop && (