Merge pull request #3167 from metabrainz/cover-art-front-image

LB-1103: Only show front cover art in ListenCards
metabrainz · Feb 10, 2025 · 9525dd5 · 9525dd5
2 parents 0f092df + 8c1258f
commit 9525dd5
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/frontend/js/src/utils/utils.tsx b/frontend/js/src/utils/utils.tsx
@@ -716,7 +716,8 @@ export type CAAThumbnailSizes = 250 | 500 | 1200 | "small" | "large";
 
 const getThumbnailFromCAAResponse = (
   body: CoverArtArchiveResponse,
-  size: CAAThumbnailSizes = 250
+  size: CAAThumbnailSizes = 250,
+  frontOnly = false
 ): string | undefined => {
   if (!body.images?.length) {
     return undefined;
@@ -735,6 +736,14 @@ const getThumbnailFromCAAResponse = (
     const { id } = frontImage;
     return generateAlbumArtThumbnailLink(id, releaseMBID);
   }
+  if (frontImage) {
+    const { thumbnails, image } = frontImage;
+    return thumbnails[size] ?? thumbnails.small ?? image;
+  }
+  if (frontOnly) {
+    // We don't have a front image in the response, and are expecting a front image only, so return
+    return undefined;
+  }
 
   // No front image? Fallback to whatever the first image is
   const { thumbnails, image } = body.images[0];
@@ -772,7 +781,7 @@ const getAlbumArtFromReleaseGroupMBID = async (
     );
     if (CAAResponse.ok) {
       const body: CoverArtArchiveResponse = await CAAResponse.json();
-      const coverArt = getThumbnailFromCAAResponse(body, optionalSize);
+      const coverArt = getThumbnailFromCAAResponse(body, optionalSize, true);
       if (coverArt) {
         // Cache the successful result
         await setCoverArtCache(cacheKey, coverArt);
@@ -793,7 +802,8 @@ const getAlbumArtFromReleaseMBID = async (
   userSubmittedReleaseMBID: string,
   useReleaseGroupFallback: boolean | string = false,
   APIService?: APIServiceClass,
-  optionalSize?: CAAThumbnailSizes
+  optionalSize?: CAAThumbnailSizes,
+  frontOnly?: boolean
 ): Promise<string | undefined> => {
   try {
     // Check cache first
@@ -809,15 +819,20 @@ const getAlbumArtFromReleaseMBID = async (
     );
     if (CAAResponse.ok) {
       const body: CoverArtArchiveResponse = await CAAResponse.json();
-      const coverArt = getThumbnailFromCAAResponse(body, optionalSize);
+      const coverArt = getThumbnailFromCAAResponse(
+        body,
+        optionalSize,
+        frontOnly
+      );
+      // Here, make sure there is a front image, otherwise discard the hit.
       if (coverArt) {
         // Cache the successful result
         await setCoverArtCache(cacheKey, coverArt);
       }
       return coverArt;
     }
 
-    if (CAAResponse.status === 404 && useReleaseGroupFallback) {
+    if (useReleaseGroupFallback) {
       let releaseGroupMBID = useReleaseGroupFallback;
       if (!_.isString(useReleaseGroupFallback) && APIService) {
         const releaseGroupResponse = (await APIService.lookupMBRelease(
@@ -933,7 +948,9 @@ const getAlbumArtFromListenMetadata = async (
     const userSubmittedReleaseAlbumArt = await getAlbumArtFromReleaseMBID(
       userSubmittedReleaseMBID,
       Boolean(caaReleaseMbid) && userSubmittedReleaseMBID !== caaReleaseMbid,
-      APIService
+      APIService,
+      undefined,
+      true // we only want front images, otherwise skip
     );
     if (userSubmittedReleaseAlbumArt) {
       return userSubmittedReleaseAlbumArt;