small performance fixes

api/queries/functions/images.ts

@@ -3,7 +3,7 @@ import { getImageApi } from "@jellyfin/sdk/lib/utils/api"
 import _ from "lodash"
 import Client from "../../../api/client"
 
-export function fetchItemImage(itemId: string, imageType: ImageType) {
+export function fetchItemImage(itemId: string, imageType: ImageType, width: number, height: number) {
     
     return new Promise<string>(async (resolve, reject) => {
 
@@ -12,13 +12,13 @@ export function fetchItemImage(itemId: string, imageType: ImageType) {
         if (!!!Client.api) 
             return reject("Client instance not set")
         else
-            getImageApi(Client.api!)
+            getImageApi(Client.api)
                 .getItemImage({
                     itemId,
                     imageType,
-                    width: 1000, // We just care about one big nice image 
-                    height: 1000, // to keep in cache to use for all instants of
-                    format: ImageFormat.Png // the image
+                    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
                 },
                 {
                     responseType: 'blob',

components/Global/components/blurhashed-image.tsx

@@ -23,13 +23,17 @@ export default function BlurhashedImage({
     borderRadius
 } : BlurhashLoadingProps) : React.JSX.Element {
 
+    console.debug(`Rendering image`);
+
     const { data: image, isSuccess } = useQuery({
         queryKey: [
             QueryKeys.ItemImage, 
             item.AlbumId ? item.AlbumId : item.Id!, 
             type ?? ImageType.Primary, 
+            Math.ceil(width / 100) * 100, // Images are fetched at a higher, generic resolution
+            Math.ceil(height ?? width / 100) * 100 // So these keys need to match
         ],
-        queryFn: () => fetchItemImage(item.AlbumId ? item.AlbumId : item.Id!, type ?? ImageType.Primary),
+        queryFn: () => fetchItemImage(item.AlbumId ? item.AlbumId : item.Id!, type ?? ImageType.Primary, width, height ?? width),
     });
 
     const blurhash = !isEmpty(item.ImageBlurHashes) 

components/Player/screens/index.tsx

@@ -273,12 +273,16 @@ export default function PlayerScreen({
                         )}
                     </XStack>
 
-                    { useMemo(() => {
-                        return (
 
                         <XStack marginHorizontal={20} marginTop={"$3"} marginBottom={"$2"}>
                         <XStack flex={1} justifyContent="flex-start">
-                            <RunTimeSeconds>{Math.floor(progressState / ProgressMultiplier)}</RunTimeSeconds>
+                            { useMemo(() => {
+                                return (
+                                    <RunTimeSeconds>{Math.floor(progressState / ProgressMultiplier)}</RunTimeSeconds>
+                                )
+                            }, [
+                                progressState,
+                            ])}
                         </XStack>
 
                         <XStack flex={1} justifyContent="space-between">
@@ -301,11 +305,6 @@ export default function PlayerScreen({
                             </RunTimeSeconds>
                         </XStack>
                     </XStack>
-                        )
-                    }, [
-                        progressState,
-                        progress?.duration
-                    ])}
 
                     { useMemo(() => {
                         return (