styling changes and config changes

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
         })
 }

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<BaseItemDto[]> {
 
@@ -12,7 +13,7 @@ export function fetchRecentlyPlayed(api: Api, libraryId: string): Promise<BaseIt
             includeItemTypes: [
                 BaseItemKind.Audio
             ],
-            limit: 100,
+            limit: queryConfig.limits.recents,
             parentId: libraryId, 
             recursive: true,
             sortBy: [ 

api/queries/image.ts

@@ -2,8 +2,9 @@ import { useQuery } from "@tanstack/react-query";
 import { QueryKeys } from "../../enums/query-keys";
 import { Api } from "@jellyfin/sdk";
 import { fetchItemImage } from "./functions/images";
+import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
 
-export const useItemImage = (api: Api, itemId: string) => 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)
 });

api/queries/query.config.ts

@@ -0,0 +1,6 @@
+
+export const queryConfig = {
+    limits: {
+        recents: 50
+    }
+}

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 (
       <TamaguiCard 
@@ -27,6 +24,7 @@ export function Card(props: CardProps) {
         animation="bouncy"
         hoverStyle={{ scale: 0.925 }}
         pressStyle={{ scale: 0.875 }}
+        {...cardDimensions}
         {...props}
     >
         <TamaguiCard.Header padded>

components/Global/component.config.ts

@@ -0,0 +1,4 @@
+export const cardDimensions = {
+    width: 300,
+    height: 300
+}