Fix artist image not caching on browser

ui/src/artist/ArtistShow.js

@@ -20,7 +20,6 @@ const ArtistDetails = (props) => {
   const biography =
     artistInfo?.biography?.replace(new RegExp('<.*>', 'g'), '') ||
     record.biography
-  const img = artistInfo?.largeImageUrl || record.largeImageUrl
 
   useEffect(() => {
     subsonic
@@ -40,7 +39,6 @@ const ArtistDetails = (props) => {
   return (
     <>
       {createElement(component, {
-        img,
         artistInfo,
         record,
         biography,

ui/src/artist/DesktopArtistDetails.js

@@ -12,6 +12,7 @@ import { AddToPlaylistDialog } from '../dialogs'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 import AlbumInfo from '../album/AlbumInfo'
 import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
+import subsonic from '../subsonic'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -70,9 +71,9 @@ const useStyles = makeStyles(
   { name: 'NDDesktopArtistDetails' }
 )
 
-const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
+const DesktopArtistDetails = ({ artistInfo, record, biography }) => {
   const [expanded, setExpanded] = useState(false)
-  const classes = useStyles({ img, expanded })
+  const classes = useStyles()
   const title = record.name
   const [isLightboxOpen, setLightboxOpen] = React.useState(false)
 
@@ -89,7 +90,7 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
           {artistInfo && (
             <CardMedia
               className={classes.cover}
-              image={artistInfo.mediumImageUrl}
+              image={subsonic.getCoverArtUrl(record, 300)}
               onClick={handleOpenLightbox}
               title={title}
             />
@@ -103,16 +104,15 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
               className={classes.artistName}
             >
               {title}
-              {config.enableFavourites && (
-                <ArtistContextMenu
-                  className={classes.contextMenu}
-                  record={record}
-                  resource={'artist'}
-                  size={'default'}
-                  aria-label="artist context menu"
-                  color="primary"
-                />
-              )}
+              <ArtistContextMenu
+                showLove={config.enableFavourites}
+                className={classes.contextMenu}
+                record={record}
+                resource={'artist'}
+                size={'default'}
+                aria-label="artist context menu"
+                color="primary"
+              />
             </Typography>
             {config.enableStarRating && (
               <div>
@@ -147,7 +147,7 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
             imagePadding={50}
             animationDuration={200}
             imageTitle={record.name}
-            mainSrc={artistInfo.largeImageUrl}
+            mainSrc={subsonic.getCoverArtUrl(record)}
             onCloseRequest={handleCloseLightbox}
           />
         )}

ui/src/artist/MobileArtistDetails.js

@@ -4,8 +4,9 @@ import { makeStyles } from '@material-ui/core/styles'
 import Card from '@material-ui/core/Card'
 import CardMedia from '@material-ui/core/CardMedia'
 import config from '../config'
-import { LoveButton, RatingField } from '../common'
+import { ArtistContextMenu, RatingField } from '../common'
 import Lightbox from 'react-image-lightbox'
+import subsonic from '../subsonic'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -74,7 +75,8 @@ const useStyles = makeStyles(
   { name: 'NDMobileArtistDetails' }
 )
 
-const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
+const MobileArtistDetails = ({ artistInfo, biography, record }) => {
+  const img = subsonic.getCoverArtUrl(record)
   const [expanded, setExpanded] = useState(false)
   const classes = useStyles({ img, expanded })
   const title = record.name
@@ -94,7 +96,7 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
             {artistInfo && (
               <CardMedia
                 className={classes.cover}
-                image={artistInfo.mediumImageUrl}
+                image={subsonic.getCoverArtUrl(record, 300)}
                 onClick={handleOpenLightbox}
                 title={title}
               />
@@ -107,16 +109,15 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
               className={classes.artistName}
             >
               {title}
-              {config.enableFavourites && (
-                <LoveButton
-                  className={classes.loveButton}
-                  record={record}
-                  resource={'artist'}
-                  size={'small'}
-                  aria-label="love"
-                  color="primary"
-                />
-              )}
+              <ArtistContextMenu
+                showLove={config.enableFavourites}
+                className={classes.loveButton}
+                record={record}
+                resource={'artist'}
+                size={'small'}
+                aria-label="love"
+                color="primary"
+              />
             </Typography>
             {config.enableStarRating && (
               <RatingField
@@ -141,7 +142,7 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
           imagePadding={50}
           animationDuration={200}
           imageTitle={record.name}
-          mainSrc={artistInfo.largeImageUrl}
+          mainSrc={img}
           onCloseRequest={handleCloseLightbox}
         />
       )}

ui/src/subsonic/index.js

@@ -54,8 +54,10 @@ const getCoverArtUrl = (record, size) => {
   // TODO Move this logic to server. `song` and `album` should have a CoverArtID
   if (record.album) {
     return baseUrl(url('getCoverArt', 'mf-' + record.id, options))
-  } else {
+  } else if (record.artist) {
     return baseUrl(url('getCoverArt', 'al-' + record.id, options))
+  } else {
+    return baseUrl(url('getCoverArt', 'ar-' + record.id, options))
   }
 }