diff --git a/client/src/components/Artist/ArtistTrackGroup.tsx b/client/src/components/Artist/ArtistTrackGroup.tsx index 5fd150b1c..81440a3f1 100644 --- a/client/src/components/Artist/ArtistTrackGroup.tsx +++ b/client/src/components/Artist/ArtistTrackGroup.tsx @@ -1,9 +1,9 @@ import { css } from "@emotion/css"; import React from "react"; import ClickToPlay from "../common/ClickToPlay"; -import { Link } from "react-router-dom"; +import { Link, matchPath } from "react-router-dom"; import { bp } from "../../constants"; -import { getArtistUrl, getReleaseUrl } from "utils/artist"; +import { getArtistUrl, getReleasesUrl, getReleaseUrl } from "utils/artist"; import styled from "@emotion/styled"; import { useTranslation } from "react-i18next"; @@ -50,18 +50,20 @@ export const TrackGroupInfo = styled.div` a { text-decoration: none; } - a:first-of-type { + + a:hover { + text-decoration: underline; + } + + .track-group-name { font-weight: normal; margin-bottom: 0.2rem; } - a:last-of-type { + + .track-group-artist { font-size: var(--mi-font-size-xsmall); color: var(--mi-light-foreground-color); } - - a:hover { - text-decoration: underline; - } `; const ArtistTrackGroup: React.FC<{ @@ -98,16 +100,13 @@ const ArtistTrackGroup: React.FC<{ color: var(--mi-light-foreground-color); font-style: italic; ` + + " track-group-name" } > {trackGroup.title.length ? trackGroup.title : t("untitled")} )} - {trackGroup.artist && ( - - {trackGroup.artist?.name} - - )} + {}
= ({ artist }) => { + if (!artist) { return null; } + + const artistUrl = getReleasesUrl(artist); + return ( + !!matchPath({ path: artistUrl }, window.location.pathname) + ? {artist.name} + : {artist.name} + ) +} + export default ArtistTrackGroup; diff --git a/client/src/utils/artist.ts b/client/src/utils/artist.ts index 505fcea7a..fa6ea91af 100644 --- a/client/src/utils/artist.ts +++ b/client/src/utils/artist.ts @@ -22,6 +22,10 @@ export const getArtistUrl = (artist: { urlSlug?: string; id?: number }) => { return `/${getArtistUrlReference(artist)}`; }; +export const getReleasesUrl = (artist: { urlSlug?: string; id?: number }) => { + return `${getArtistUrl(artist)}/releases`; +} + export const getArtistManageUrl = (artistId: number) => { return `/manage/artists/${artistId}`; };