query client defaults

fix player artwork being stretched vertically on android

fix issue where nowplaying was incorrect after the queue was initialized from storage

src/api/queries/item.ts

@@ -122,7 +122,6 @@ export async function fetchAlbumDiscs(
 				const discs = data.Items
 					? Object.keys(groupBy(data.Items, (track) => track.ParentIndexNumber)).map(
 							(discNumber) => {
-								console.debug(discNumber)
 								return {
 									title: discNumber,
 									data: data.Items!.filter((track: BaseItemDto) =>

src/components/Context/index.tsx

@@ -84,13 +84,12 @@ export default function ItemContext({ item, stackNavigation }: ContextProps): Re
 				: []
 		: []
 
-	const itemTracks = isTrack
-		? [item]
-		: isAlbum && discs
-			? discs.flatMap((data) => data.data)
-			: isPlaylist && tracks
-				? tracks
-				: []
+	const itemTracks = useMemo(() => {
+		if (isTrack) return [item]
+		else if (isAlbum && discs) return discs.flatMap((data) => data.data)
+		else if (isPlaylist && tracks) return tracks
+		else return []
+	}, [isTrack, isAlbum, discs, isPlaylist, tracks])
 
 	useEffect(() => trigger('impactLight'), [item?.Id])
 

src/components/Player/components/header.tsx

@@ -1,6 +1,6 @@
 import { useNowPlayingContext } from '../../../providers/Player'
 import { useQueueRefContext } from '../../../providers/Player/queue'
-import { XStack, YStack, Spacer, useTheme, getTokenValue } from 'tamagui'
+import { XStack, YStack, Spacer, useTheme } from 'tamagui'
 import { Text } from '../../Global/helpers/text'
 import React, { useMemo } from 'react'
 import ItemImage from '../../Global/components/image'
@@ -10,8 +10,6 @@ import MaterialDesignIcons from '@react-native-vector-icons/material-design-icon
 import navigationRef from '../../../../navigation'
 
 export default function PlayerHeader(): React.JSX.Element {
-	const imageBounds = getTokenValue('$20') * 2
-
 	const nowPlaying = useNowPlayingContext()
 
 	const queueRef = useQueueRefContext()
@@ -55,6 +53,7 @@ export default function PlayerHeader(): React.JSX.Element {
 				paddingHorizontal={'$2'}
 				maxHeight={'70%'}
 				marginVertical={'auto'}
+				paddingVertical={Platform.OS === 'android' ? '$4' : '$2'}
 			>
 				<Animated.View
 					entering={FadeIn}

src/constants/query-client.ts

@@ -29,9 +29,10 @@ export const queryClient = new QueryClient({
 			gcTime: ONE_DAY,
 
 			/**
-			 * 1 hour as a default - reduced from 2 hours for better battery usage
+			 * Refetch data after 2 hours as a default
 			 */
-			staleTime: ONE_HOUR, // 1 hour
+			staleTime: ONE_HOUR * 2,
+
 			retry(failureCount: number, error: Error) {
 				if (failureCount > 2) return false
 

src/providers/Player/queue.tsx

@@ -720,7 +720,10 @@ const QueueContextInitailizer = () => {
 		if (playQueue.length > 0 && currentIndex > -1 && !initialized) {
 			TrackPlayer.setQueue(playQueue)
 			TrackPlayer.skip(currentIndex)
-			setInitialized(true)
+
+			// Set Initialized after a timeout to ignore events emitted
+			// while the queue is setting up
+			setTimeout(() => setInitialized(true), 500)
 		} else {
 			console.debug(`No queue to initialize from`)
 			setInitialized(true)