maybe if I define an image?

This commit is contained in:
Violet Caulfield
2025-01-22 06:52:05 -06:00
parent 6e2627fe4d
commit b740253b4d
4 changed files with 11 additions and 8 deletions

View File

@@ -2,14 +2,17 @@ import { ImageFormat, ImageType } from "@jellyfin/sdk/lib/generated-client/model
import { getImageApi } from "@jellyfin/sdk/lib/utils/api"
import _ from "lodash"
import Client from "../../../api/client"
import { queryConfig } from "../query.config";
export function fetchItemImage(itemId: string, imageType?: ImageType, width?: number) {
export function fetchItemImage(itemId: string, imageType?: ImageType, size?: number) {
return getImageApi(Client.api!)
.getItemImage({
itemId,
imageType: imageType ? imageType : ImageType.Primary,
format: ImageFormat.Jpg
format: ImageFormat.Jpg,
height: size ?? queryConfig.images.height,
width: size ?? queryConfig.images.width
}, {
responseType: 'blob'
})

View File

@@ -3,7 +3,7 @@ import { QueryKeys } from "../../enums/query-keys";
import { fetchItemImage } from "./functions/images";
import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
export const useItemImage = (itemId: string, imageType?: ImageType, width?: number) => useQuery({
queryKey: [QueryKeys.ItemImage, itemId, imageType, width],
queryFn: () => fetchItemImage(itemId, imageType, width)
export const useItemImage = (itemId: string, imageType?: ImageType, size?: number) => useQuery({
queryKey: [QueryKeys.ItemImage, itemId, imageType, size],
queryFn: () => fetchItemImage(itemId, imageType, size)
});

View File

@@ -5,8 +5,8 @@ export const queryConfig = {
recents: 50 // TODO: Adjust this when we add a list navigator to the end of the recents
},
images: {
fillHeight: 300,
fillWidth: 300,
height: 300,
width: 300,
format: ImageFormat.Jpg
},
banners: {

View File

@@ -11,7 +11,7 @@ interface BlurhashLoadingProps {
export default function BlurhashedImage({ item, size, type }: { item: BaseItemDto, size: number, type?: ImageType }) : React.JSX.Element {
const { data: image, isSuccess } = useItemImage(item.Id!, type);
const { data: image, isSuccess } = useItemImage(item.Id!, type, size);
const blurhash = !isEmpty(item.ImageBlurHashes)
&& !isEmpty(item.ImageBlurHashes.Primary)