diff --git a/api/queries/functions/images.ts b/api/queries/functions/images.ts index d989184d..596a9ccd 100644 --- a/api/queries/functions/images.ts +++ b/api/queries/functions/images.ts @@ -2,11 +2,12 @@ import { Api } from "@jellyfin/sdk/lib/api" import { ImageType } from "@jellyfin/sdk/lib/generated-client/models" import { getImageApi } from "@jellyfin/sdk/lib/utils/api" -export function fetchItemImage(api: Api, itemId: string, imageType?: ImageType) { +export function fetchItemImage(api: Api, itemId: string, imageType?: ImageType, width?: number) { return getImageApi(api) .getItemImage({ imageType: imageType ? imageType : ImageType.Primary, - itemId + itemId, + width: width }) } \ No newline at end of file diff --git a/api/queries/functions/recents.ts b/api/queries/functions/recents.ts index e2736356..3ff83640 100644 --- a/api/queries/functions/recents.ts +++ b/api/queries/functions/recents.ts @@ -1,6 +1,7 @@ import { Api } from "@jellyfin/sdk/lib/api"; import { BaseItemDto, BaseItemKind, ItemSortBy, SortOrder } from "@jellyfin/sdk/lib/generated-client/models"; import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api"; +import { queryConfig } from "../query.config"; export function fetchRecentlyPlayed(api: Api, libraryId: string): Promise { @@ -12,7 +13,7 @@ export function fetchRecentlyPlayed(api: Api, libraryId: string): Promise useQuery({ - queryKey: [QueryKeys.ItemImage, api, itemId], - queryFn: ({ queryKey }) => fetchItemImage(queryKey[1] as Api, queryKey[2] as string) +export const useItemImage = (api: Api, itemId: string, imageType?: ImageType, width?: number) => useQuery({ + queryKey: [QueryKeys.ItemImage, api, itemId, imageType, width], + queryFn: ({ queryKey }) => fetchItemImage(queryKey[1] as Api, queryKey[2] as string, imageType, width) }); \ No newline at end of file diff --git a/api/queries/query.config.ts b/api/queries/query.config.ts new file mode 100644 index 00000000..086bb3e2 --- /dev/null +++ b/api/queries/query.config.ts @@ -0,0 +1,6 @@ + +export const queryConfig = { + limits: { + recents: 50 + } +} \ No newline at end of file diff --git a/components/Global/card.tsx b/components/Global/card.tsx index 774ec527..61377f4d 100644 --- a/components/Global/card.tsx +++ b/components/Global/card.tsx @@ -3,11 +3,8 @@ import type { CardProps as TamaguiCardProps } from "tamagui" import { H2, Image, Paragraph, Card as TamaguiCard } from "tamagui"; import { useItemImage } from "../../api/queries/image"; import { useApiClientContext } from "../jellyfin-api-provider"; - -const cardDimensions = { - width: 300, - height: 300 -} +import { ImageType } from "@jellyfin/sdk/lib/generated-client/models"; +import { cardDimensions } from "./component.config"; interface CardProps extends TamaguiCardProps { children?: string; @@ -18,7 +15,7 @@ interface CardProps extends TamaguiCardProps { export function Card(props: CardProps) { const { apiClient } = useApiClientContext(); - const { data, isPending } = useItemImage(apiClient!, props.itemId) + const { data, isPending } = useItemImage(apiClient!, props.itemId, ImageType.Primary, cardDimensions.width) return ( diff --git a/components/Global/component.config.ts b/components/Global/component.config.ts new file mode 100644 index 00000000..1fd4146b --- /dev/null +++ b/components/Global/component.config.ts @@ -0,0 +1,4 @@ +export const cardDimensions = { + width: 300, + height: 300 +} \ No newline at end of file