Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 17:26:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fix Jellyseerr Avatar Loading Issue (#2197)

Browse Source 
fix: Fix Jellyseerr Avatar Loading Issue
feat: Add Fallback Image.
This commit is contained in:
TyxTang
2024-11-28 05:17:48 +08:00
committed by GitHub
parent 95c126f2c6
commit b59921b843
4 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/server/api/routers/media-request.ts
View File

@@ -58,6 +58,7 @@ export const mediaRequestsRouter = createTRPCRouter({
name: genericItem.name, name: genericItem.name,
userName: item.requestedBy.displayName, userName: item.requestedBy.displayName,
userProfilePicture: constructAvatarUrl(appUrl, item.requestedBy.avatar), userProfilePicture: constructAvatarUrl(appUrl, item.requestedBy.avatar),
fallbackUserProfilePicture: constructAvatarUrl(appUrl, item.requestedBy.avatar,'avatarproxy'),
userLink: `${appUrl}/users/${item.requestedBy.id}`, userLink: `${appUrl}/users/${item.requestedBy.id}`,
userRequestCount: item.requestedBy.requestCount, userRequestCount: item.requestedBy.requestCount,
airDate: genericItem.airDate, airDate: genericItem.airDate,
@@ -119,6 +120,7 @@ export const mediaRequestsRouter = createTRPCRouter({
id: user.id, id: user.id,
userName: user.displayName, userName: user.displayName,
userProfilePicture: constructAvatarUrl(appUrl, user.avatar), userProfilePicture: constructAvatarUrl(appUrl, user.avatar),
fallbackUserProfilePicture: constructAvatarUrl(appUrl, user.avatar,'avatarproxy'),
userLink: `${appUrl}/users/${user.id}`, userLink: `${appUrl}/users/${user.id}`,
userRequestCount: user.requestCount, 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://'); const isAbsolute = avatar.startsWith('http://') || avatar.startsWith('https://');
if (isAbsolute) { if (isAbsolute) {
return avatar; return avatar;
} }
return `${appUrl}/${avatar}`; return `${appUrl}/${path?.concat("/") ?? "" }${avatar}`;
}; };
const retrieveDetailsForItem = async ( const retrieveDetailsForItem = async (

14
src/widgets/media-requests/MediaRequestListTile.tsx
View File

@@ -11,6 +11,7 @@ import {
Stack, Stack,
Text, Text,
Tooltip, Tooltip,
Avatar,
useMantineTheme, useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { notifications } from '@mantine/notifications'; import { notifications } from '@mantine/notifications';
@@ -170,14 +171,17 @@ function MediaRequestListTile({ widget }: MediaRequestListWidgetProps) {
</Flex> </Flex>
<Stack justify="center"> <Stack justify="center">
<Flex gap="xs"> <Flex gap="xs">
<Image <Avatar
src={item.userProfilePicture} src={item.userProfilePicture}
width={25} size={25}
height={25}
alt="requester avatar" alt="requester avatar"
radius="xl" radius="xl"
withPlaceholder >
/> <Image
src={item.fallbackUserProfilePicture}
alt="requester avatar"
/>
</Avatar>
<Anchor <Anchor
href={item.userLink} href={item.userLink}
target={widget.properties.openInNewTab ? '_blank' : '_self'} target={widget.properties.openInNewTab ? '_blank' : '_self'}

5
src/widgets/media-requests/MediaRequestStatsTile.tsx
View File

@@ -7,6 +7,7 @@ import {
Stack, Stack,
Text, Text,
Tooltip, Tooltip,
Image,
useMantineTheme, useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { useElementSize } from '@mantine/hooks'; import { useElementSize } from '@mantine/hooks';
@@ -163,7 +164,9 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
/> />
</Tooltip.Floating> </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 }}> <Stack spacing={0} style={{ flex: 1 }}>
<Text>{user.userName}</Text> <Text>{user.userName}</Text>
<Text size="xs"> <Text size="xs">

2
src/widgets/media-requests/media-request-types.tsx
View File

@@ -7,6 +7,7 @@ export type MediaRequest = {
name: string; name: string;
userName: string; userName: string;
userProfilePicture: string; userProfilePicture: string;
fallbackUserProfilePicture: string;
userLink: string; userLink: string;
userRequestCount: number; userRequestCount: number;
airDate?: string; airDate?: string;
@@ -22,6 +23,7 @@ export type Users = {
id: number; id: number;
userName: string; userName: string;
userProfilePicture: string; userProfilePicture: string;
fallbackUserProfilePicture: string;
userLink: string; userLink: string;
userRequestCount: number; userRequestCount: number;
}; };