From b59921b843e6da824f9f7779c66ab1ca5460332d Mon Sep 17 00:00:00 2001
From: TyxTang <90897955+TyxTang@users.noreply.github.com>
Date: Thu, 28 Nov 2024 05:17:48 +0800
Subject: [PATCH] fix: Fix Jellyseerr Avatar Loading Issue (#2197)

fix: Fix Jellyseerr Avatar Loading Issue
feat: Add Fallback Image.
---
 src/server/api/routers/media-request.ts            |  6 ++++--
 .../media-requests/MediaRequestListTile.tsx        | 14 +++++++++-----
 .../media-requests/MediaRequestStatsTile.tsx       |  5 ++++-
 src/widgets/media-requests/media-request-types.tsx |  2 ++
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/server/api/routers/media-request.ts b/src/server/api/routers/media-request.ts
index 43c6cf220..fe246c472 100644
--- a/src/server/api/routers/media-request.ts
+++ b/src/server/api/routers/media-request.ts
@@ -58,6 +58,7 @@ export const mediaRequestsRouter = createTRPCRouter({
                   name: genericItem.name,
                   userName: item.requestedBy.displayName,
                   userProfilePicture: constructAvatarUrl(appUrl, item.requestedBy.avatar),
+                  fallbackUserProfilePicture: constructAvatarUrl(appUrl, item.requestedBy.avatar,'avatarproxy'),
                   userLink: `${appUrl}/users/${item.requestedBy.id}`,
                   userRequestCount: item.requestedBy.requestCount,
                   airDate: genericItem.airDate,
@@ -119,6 +120,7 @@ export const mediaRequestsRouter = createTRPCRouter({
                   id: user.id,
                   userName: user.displayName,
                   userProfilePicture: constructAvatarUrl(appUrl, user.avatar),
+                  fallbackUserProfilePicture: constructAvatarUrl(appUrl, user.avatar,'avatarproxy'),
                   userLink: `${appUrl}/users/${user.id}`,
                   userRequestCount: user.requestCount,
                 };
@@ -137,14 +139,14 @@ export const mediaRequestsRouter = createTRPCRouter({
     }),
 });
 
-const constructAvatarUrl = (appUrl: string, avatar: string) => {
+const constructAvatarUrl = (appUrl: string, avatar: string, path?: string) => {
   const isAbsolute = avatar.startsWith('http://') || avatar.startsWith('https://');
 
   if (isAbsolute) {
     return avatar;
   }
 
-  return `${appUrl}/${avatar}`;
+  return `${appUrl}/${path?.concat("/") ?? "" }${avatar}`;
 };
 
 const retrieveDetailsForItem = async (
diff --git a/src/widgets/media-requests/MediaRequestListTile.tsx b/src/widgets/media-requests/MediaRequestListTile.tsx
index d83e625fc..4a99ad8e2 100644
--- a/src/widgets/media-requests/MediaRequestListTile.tsx
+++ b/src/widgets/media-requests/MediaRequestListTile.tsx
@@ -11,6 +11,7 @@ import {
   Stack,
   Text,
   Tooltip,
+  Avatar,
   useMantineTheme,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
@@ -170,14 +171,17 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
               </Flex>
               <Stack justify="center">
                 <Flex gap="xs">
-                  <Image
+                  <Avatar
                     src={item.userProfilePicture}
-                    width={25}
-                    height={25}
+                    size={25}
                     alt="requester avatar"
                     radius="xl"
-                    withPlaceholder
-                  />
+                  >
+                    <Image
+                      src={item.fallbackUserProfilePicture}
+                      alt="requester avatar"
+                    />
+                  </Avatar>
                   <Anchor
                     href={item.userLink}
                     target={widget.properties.openInNewTab ? '_blank' : '_self'}
diff --git a/src/widgets/media-requests/MediaRequestStatsTile.tsx b/src/widgets/media-requests/MediaRequestStatsTile.tsx
index 155eef8d0..4cb867a27 100644
--- a/src/widgets/media-requests/MediaRequestStatsTile.tsx
+++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx
@@ -7,6 +7,7 @@ import {
   Stack,
   Text,
   Tooltip,
+  Image,
   useMantineTheme,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
@@ -163,7 +164,9 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
                     />
                   </Tooltip.Floating>
                 )}
-                <Avatar radius="xl" size={45} src={user.userProfilePicture} alt="user avatar" />
+                <Avatar radius="xl" size={45} src={user.userProfilePicture} alt="user avatar" >
+                  <Image src={user.fallbackUserProfilePicture} alt="user avatar" />
+                </Avatar>
                 <Stack spacing={0} style={{ flex: 1 }}>
                   <Text>{user.userName}</Text>
                   <Text size="xs">
diff --git a/src/widgets/media-requests/media-request-types.tsx b/src/widgets/media-requests/media-request-types.tsx
index e15711bff..12d61e78e 100644
--- a/src/widgets/media-requests/media-request-types.tsx
+++ b/src/widgets/media-requests/media-request-types.tsx
@@ -7,6 +7,7 @@ export type MediaRequest = {
   name: string;
   userName: string;
   userProfilePicture: string;
+  fallbackUserProfilePicture: string;
   userLink: string;
   userRequestCount: number;
   airDate?: string;
@@ -22,6 +23,7 @@ export type Users = {
   id: number;
   userName: string;
   userProfilePicture: string;
+  fallbackUserProfilePicture: string;
   userLink: string;
   userRequestCount: number;
 };