adjust image calls to make them more consistent and concise

This commit is contained in:
Violet Caulfield
2025-02-08 23:25:54 -06:00
parent 6b1e0f30c8
commit 8ad67b0132
2 changed files with 11 additions and 5 deletions

View File

@@ -4,7 +4,7 @@ import _ from "lodash"
import Client from "../../../api/client"
import { Dirs, FileSystem } from 'react-native-file-access'
export function fetchItemImage(itemId: string, imageType: ImageType = ImageType.Primary, width: number = 150, height: number = 150) {
export function fetchItemImage(itemId: string, imageType: ImageType = ImageType.Primary, width: number, height: number) {
return new Promise<string>(async (resolve, reject) => {
@@ -21,8 +21,8 @@ export function fetchItemImage(itemId: string, imageType: ImageType = ImageType.
.getItemImage({
itemId,
imageType,
width: Math.ceil(width) * 2,
height: Math.ceil(width) * 2,
width: Math.ceil(width / 100) * 100 * 2, // Round to the nearest 100 for simplicity and to avoid
height: Math.ceil(height / 100) * 100 * 2, // redundant images in storage, then double it to make sure it's crispy
format: ImageFormat.Png
},
{

View File

@@ -3,8 +3,14 @@ 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, height?: number) => useQuery({
queryKey: [QueryKeys.ItemImage, itemId, imageType, width, height],
export const useItemImage = (itemId: string, imageType?: ImageType, width: number = 150, height: number = 150) => useQuery({
queryKey: [
QueryKeys.ItemImage,
itemId,
imageType,
Math.ceil(width / 100) * 100, // Images are fetched at a higher, generic resolution
Math.ceil(height / 100) * 100 // So these keys need to match
],
queryFn: () => fetchItemImage(itemId, imageType, width, height),
staleTime: 1000 * 60, // One minute, these are stored on disk anyways
gcTime: 1000 * 60 * 60 // One hour, could be less maybe?