Added some quality of life functions and brought the music page on par with the rest of the site

server/api/musicbrainz/poster.ts

@@ -1,5 +1,7 @@
 import type { mbRelease, mbReleaseGroup } from './interfaces';
-function getPosterFromMB(element: mbRelease | mbReleaseGroup): string {
+function getPosterFromMB(
+  element: mbRelease | mbReleaseGroup
+): string | undefined {
   return `https://coverartarchive.org/${element.media_type}/${element.id}/front-250.jpg`;
 }
 

server/interfaces/api/settingsInterfaces.ts

@@ -33,6 +33,7 @@ export interface PublicSettingsResponse {
   partialRequestsEnabled: boolean;
   cacheImages: boolean;
   vapidPublic: string;
+  fallbackImage: string;
   enablePushRegistration: boolean;
   locale: string;
   emailEnabled: boolean;

server/lib/settings.ts

@@ -91,6 +91,7 @@ interface Quota {
 }
 
 export interface MainSettings {
+  fallbackImage: string;
   apiKey: string;
   applicationTitle: string;
   applicationUrl: string;
@@ -128,6 +129,7 @@ interface FullPublicSettings extends PublicSettings {
   partialRequestsEnabled: boolean;
   cacheImages: boolean;
   vapidPublic: string;
+  fallbackImage: string;
   enablePushRegistration: boolean;
   locale: string;
   emailEnabled: boolean;
@@ -309,6 +311,7 @@ class Settings {
         trustProxy: false,
         partialRequestsEnabled: true,
         locale: 'en',
+        fallbackImage: '/images/overseerr_poster_not_found_logo_top.png',
       },
       plex: {
         name: '',
@@ -529,6 +532,9 @@ class Settings {
       locale: this.data.main.locale,
       emailEnabled: this.data.notifications.agents.email.enabled,
       newPlexLogin: this.data.main.newPlexLogin,
+      fallbackImage:
+        this.data.main.fallbackImage ??
+        '/images/overseerr_poster_not_found_logo_top.png',
     };
   }
 

src/components/Common/CachedImage/index.tsx

@@ -1,6 +1,7 @@
 import useSettings from '@app/hooks/useSettings';
 import type { ImageLoader, ImageProps } from 'next/image';
 import Image from 'next/image';
+import { useState } from 'react';
 
 const imageLoader: ImageLoader = ({ src }) => src;
 
@@ -10,18 +11,23 @@ const imageLoader: ImageLoader = ({ src }) => src;
  **/
 const CachedImage = ({ src, ...props }: ImageProps) => {
   const { currentSettings } = useSettings();
+  const [imageUrl, setImageUrl] = useState<string>(src as string);
+
+  const handleError = () => {
+    setImageUrl(currentSettings?.fallbackImage);
+  };
 
-  let imageUrl = src;
 
   if (typeof imageUrl === 'string' && imageUrl.startsWith('http')) {
     const parsedUrl = new URL(imageUrl);
 
     if (parsedUrl.host === 'image.tmdb.org' && currentSettings.cacheImages) {
-      imageUrl = imageUrl.replace('https://image.tmdb.org', '/imageproxy');
+      setImageUrl(imageUrl.replace('https://image.tmdb.org', '/imageproxy'));
     }
   }
 
-  return <Image unoptimized loader={imageLoader} src={imageUrl} {...props} />;
+
+  return <Image unoptimized loader={imageLoader} src={imageUrl} onError={handleError} {...props} />;
 };
 
 export default CachedImage;

src/components/TitleCard/index.tsx

@@ -75,11 +75,11 @@ const TitleCard = ({
       Permission.REQUEST,
       mediaType === 'movie' || mediaType === 'collection'
         ? Permission.REQUEST_MOVIE
-        : Permission.REQUEST_TV,
+        : (mediaType === 'tv' ? Permission.REQUEST_TV : Permission.REQUEST_MUSIC),
     ],
     { type: 'or' }
   );
-  const tmdbOrMbId: boolean = mediaType in ['movie', 'tv', 'collection'];
+  const tmdbOrMbId: boolean = ['movie', 'tv', 'collection'].includes(mediaType);
   return (
     <div
       className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}
@@ -90,13 +90,7 @@ const TitleCard = ({
         mbId={tmdbOrMbId ? "" : (id as string)}
         show={showRequestModal}
         type={
-          mediaType === 'movie'
-            ? 'movie'
-            : mediaType === 'collection'
-            ? 'collection'
-            : mediaType === 'tv'
-            ? 'tv'
-            : 'music'
+          tmdbOrMbId ? mediaType as ('collection' | 'movie' | 'tv') : 'music'
         }
         onComplete={requestComplete}
         onUpdating={requestUpdating}
@@ -108,9 +102,7 @@ const TitleCard = ({
             ? 'scale-105 shadow-lg ring-gray-500'
             : 'scale-100 shadow ring-gray-700'
         }`}
-        style={{
-          paddingBottom: '150%',
-        }}
+        style={tmdbOrMbId ?{paddingBottom : '150%'} : {aspectRatio: '1/1'}}
         onMouseEnter={() => {
           if (!isTouch) {
             setShowDetail(true);
@@ -132,7 +124,7 @@ const TitleCard = ({
             alt=""
             src={
               image
-                ? `https://image.tmdb.org/t/p/w300_and_h450_face${image}`
+                ? (tmdbOrMbId ? `https://image.tmdb.org/t/p/w300_and_h450_face${image}` : image)
                 : `/images/overseerr_poster_not_found_logo_top.png`
             }
             layout="fill"

src/context/SettingsContext.tsx

@@ -15,6 +15,7 @@ const defaultSettings = {
   localLogin: true,
   movie4kEnabled: false,
   series4kEnabled: false,
+  fallbackImage: '/images/overseerr_poster_not_found_logo_top.png',
   region: '',
   originalLanguage: '',
   partialRequestsEnabled: true,

src/pages/_app.tsx

@@ -186,6 +186,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     locale: 'en',
     emailEnabled: false,
     newPlexLogin: true,
+    fallbackImage: '/images/overseerr_poster_not_found_logo_top.png',
   };
 
   if (ctx.res) {