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 && (