Slightly lowered the quality and size of row images (#960)

Co-authored-by: StephenArg <stephen@vody.com>

src/components/AddToPlaylist/index.tsx

@@ -46,7 +46,12 @@ export default function AddToPlaylist({
 		<View flex={1}>
 			{(source ?? tracks[0]) && (
 				<XStack gap={'$2'} margin={'$4'}>
-					<ItemImage item={source ?? tracks[0]} width={'$12'} height={'$12'} />
+					<ItemImage
+						item={source ?? tracks[0]}
+						width={'$12'}
+						height={'$12'}
+						imageOptions={{ maxWidth: 85, maxHeight: 85, quality: 90 }}
+					/>
 
 					<YStack gap={'$2'}>
 						<TextTicker {...TextTickerConfig}>
@@ -154,7 +159,12 @@ function AddToPlaylistRow({
 				}
 			}}
 		>
-			<ItemImage item={playlist} height={'$11'} width={'$11'} />
+			<ItemImage
+				item={playlist}
+				height={'$11'}
+				width={'$11'}
+				imageOptions={{ maxWidth: 85, maxHeight: 85, quality: 90 }}
+			/>
 
 			<YStack alignItems='flex-start' flexGrow={1}>
 				<Text bold>{playlist.Name ?? 'Untitled Playlist'}</Text>

src/components/Context/index.tsx

@@ -307,7 +307,12 @@ function ViewAlbumMenuRow({ album: album, stackNavigation }: MenuRowProps): Reac
 			onPress={goToAlbum}
 			pressStyle={{ opacity: 0.5 }}
 		>
-			<ItemImage item={album} height={'$9'} width={'$9'} />
+			<ItemImage
+				item={album}
+				height={'$9'}
+				width={'$9'}
+				imageOptions={{ maxWidth: 140, maxHeight: 140, quality: 100 }}
+			/>
 
 			<TextTicker {...TextTickerConfig}>
 				<Text bold>{`Go to ${getItemName(album)}`}</Text>
@@ -361,7 +366,13 @@ function ViewArtistMenuRow({
 			onPress={() => goToArtist(artist)}
 			pressStyle={{ opacity: 0.5 }}
 		>
-			<ItemImage circular item={artist} height={'$9'} width={'$9'} />
+			<ItemImage
+				circular
+				item={artist}
+				height={'$9'}
+				width={'$9'}
+				imageOptions={{ maxWidth: 140, maxHeight: 140, quality: 100 }}
+			/>
 
 			<Text bold>{`Go to ${getItemName(artist)}`}</Text>
 		</ListItem>

src/components/Global/components/Track/content.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { getToken, Theme, XStack, YStack } from 'tamagui'
+import { Theme, XStack, YStack } from 'tamagui'
 import { Text } from '../../helpers/text'
 import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models'
 import Icon from '../icon'
@@ -119,7 +119,12 @@ export default function TrackRowContent({
 				>
 					{showArtwork ? (
 						<HideableArtwork>
-							<ItemImage item={track} width={'$12'} height={'$12'} />
+							<ItemImage
+								item={track}
+								width={'$12'}
+								height={'$12'}
+								imageOptions={{ maxWidth: 70, maxHeight: 70, quality: 90 }}
+							/>
 						</HideableArtwork>
 					) : (
 						<Text

src/components/Global/components/item-card.tsx

@@ -49,7 +49,11 @@ export default function ItemCard({
 
 	const background = (
 		<TamaguiCard.Background>
-			<ItemImage item={item} circular={!squared} />
+			<ItemImage
+				item={item}
+				circular={!squared}
+				imageOptions={{ maxWidth: 140, maxHeight: 140, quality: 100 }}
+			/>
 		</TamaguiCard.Background>
 	)
 

src/components/Global/components/item-row.tsx

@@ -301,6 +301,7 @@ function HideableArtwork({
 					height={'$12'}
 					width={'$12'}
 					circular={item.Type === 'MusicArtist' || circular}
+					imageOptions={{ maxWidth: 140, maxHeight: 140, quality: 90 }}
 				/>
 			</XStack>
 		</Animated.View>

src/components/Global/components/list-group.tsx

@@ -30,7 +30,11 @@ export default function ListGroup({
 					<YGroup.Item key={item.Id}>
 						<ListItem>
 							<XStack flex={1}>
-								<ItemImage item={item} circular={circularImages} />
+								<ItemImage
+									item={item}
+									circular={circularImages}
+									imageOptions={{ maxWidth: 85, maxHeight: 85, quality: 90 }}
+								/>
 								<Spacer />
 								<YStack justifyContent='center' flex={1}>
 									<XStack>

src/components/Player/mini-player.tsx

@@ -104,7 +104,7 @@ export default function Miniplayer(): React.JSX.Element {
 									item={nowPlaying!.item}
 									width={'$11'}
 									height={'$11'}
-									imageOptions={{ maxWidth: 200, maxHeight: 200 }}
+									imageOptions={{ maxWidth: 120, maxHeight: 120 }}
 								/>
 							</Animated.View>
 						</YStack>