From f472ccf5737ed557adaadfba8108d9a1480affaa Mon Sep 17 00:00:00 2001
From: Violet Caulfield <42452695+anultravioletaurora@users.noreply.github.com>
Date: Thu, 12 Mar 2026 19:17:12 -0500
Subject: [PATCH] shuffle fixes

query client fixes

player fixes in dev mode
---
 .../Player/components/blurred-background.tsx     |  7 +++----
 src/components/Player/index.tsx                  | 16 +++++++++-------
 src/constants/query-client.ts                    | 10 ++++------
 src/hooks/player/functions/shuffle.ts            | 12 +++---------
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/components/Player/components/blurred-background.tsx b/src/components/Player/components/blurred-background.tsx
index 09a7ff38..b5d13ac8 100644
--- a/src/components/Player/components/blurred-background.tsx
+++ b/src/components/Player/components/blurred-background.tsx
@@ -21,7 +21,7 @@ export default function BlurredBackground(): React.JSX.Element {
 	const blurhash = item && getBlurhashFromDto(item)
 
 	// Use theme colors so the gradient follows the active color preset
-	const darkGradientColors = [theme.black.val, theme.black25.val]
+	const darkGradientColors = [theme.black.val, theme.black75.val, theme.black25.val]
 	const darkGradientColors2 = [
 		theme.black25.val,
 		theme.black75.val,
@@ -61,7 +61,7 @@ export default function BlurredBackground(): React.JSX.Element {
 	}
 
 	return (
-		<ZStack inset={0} position='absolute'>
+		<ZStack width={width} height={height}>
 			{blurhash && <Blurhash blurhash={blurhash} style={blurhashStyle} />}
 
 			{isLightMode ? (
@@ -75,9 +75,8 @@ export default function BlurredBackground(): React.JSX.Element {
 					style={backgroundStyle}
 				/>
 			) : (
-				<YStack inset={0} position='absolute'>
+				<YStack fullscreen>
 					<LinearGradient colors={darkGradientColors} style={gradientStyle} />
-
 					<LinearGradient colors={darkGradientColors2} style={gradientStyle2} />
 				</YStack>
 			)}
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
index a970071e..a4e01eeb 100644
--- a/src/components/Player/index.tsx
+++ b/src/components/Player/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { YStack, ZStack, useWindowDimensions, View } from 'tamagui'
 import Scrubber from './components/scrubber'
 import Controls from './components/controls'
@@ -22,6 +22,8 @@ export default function PlayerScreen(): React.JSX.Element {
 
 	const { width, height } = useWindowDimensions()
 
+	const { height: safeAreaHeight } = useSafeAreaFrame()
+
 	const { bottom } = useSafeAreaInsets()
 
 	// Shared animated value controlled by the large swipe area
@@ -67,7 +69,7 @@ export default function PlayerScreen(): React.JSX.Element {
 		})
 
 	return nowPlaying ? (
-		<ZStack inset={0} position='absolute'>
+		<ZStack width={width} height={height}>
 			<BlurredBackground />
 
 			{/* Central large swipe area overlay (captures swipe like big album art) */}
@@ -85,12 +87,12 @@ export default function PlayerScreen(): React.JSX.Element {
 			</GestureDetector>
 
 			<YStack
-				justifyContent='center'
-				inset={0}
-				position='absolute'
-				marginHorizontal={'$5'}
-				marginTop={'$2'}
+				inset={'$4'}
+				bottom={bottom}
+				position='fixed'
 				marginBottom={bottom}
+				paddingBottom={bottom}
+				justifyContent='center'
 			>
 				{/* flexGrow 1 */}
 				<PlayerHeader />
diff --git a/src/constants/query-client.ts b/src/constants/query-client.ts
index 41c044fb..954095f8 100644
--- a/src/constants/query-client.ts
+++ b/src/constants/query-client.ts
@@ -18,17 +18,15 @@ export const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
 			/**
-			 * Unused queries are garbage collected after 1 hour to save memory
+			 * This needs to be set equal to or higher than the `maxAge` set in `../App.tsx`
 			 *
-			 * Data persists to AsyncStorage regardless via maxAge: Infinity,
-			 * so removing unused data from memory doesn't lose it.
+			 * Because we want to preserve hybrid network functionality, the `maxAge` is set to `Infinity`
 			 *
-			 * Queries can be accessed during their staleTime window or refetched
-			 * after, keeping memory footprint minimal while maintaining persistence.
+			 * Therefore, this also needs to be set to `Infinity`
 			 *
 			 * @see https://tanstack.com/query/latest/docs/framework/react/plugins/persistQueryClient#how-it-works
 			 */
-			gcTime: ONE_HOUR,
+			gcTime: Infinity,
 
 			/**
 			 * Refetch data after 4 hours as a default
diff --git a/src/hooks/player/functions/shuffle.ts b/src/hooks/player/functions/shuffle.ts
index 0eb38a5b..bb9bf9df 100644
--- a/src/hooks/player/functions/shuffle.ts
+++ b/src/hooks/player/functions/shuffle.ts
@@ -276,17 +276,11 @@ export async function handleShuffle(
 	// Save off unshuffledQueue
 	usePlayerQueueStore.getState().setUnshuffledQueue([...playQueue])
 
-	// Only shuffle tracks AFTER the current position. Tracks before it have already
-	// played and must stay in the native playlist prefix so ExoPlayer's window index
-	// keeps pointing at the right item — removing them would cause the next skip to
-	// jump to the wrong track.
-	const tracksAfterCurrent = playQueue.filter((_, i) => i > currentIndex)
-	const { shuffled: newShuffledQueue } = shuffleJellifyTracks(tracksAfterCurrent)
+	const otherTracks = playQueue.filter((_, i) => i !== currentIndex)
+	const { shuffled: newShuffledQueue } = shuffleJellifyTracks(otherTracks)
 
 	if (keepCurrentTrack) {
-		tracksAfterCurrent.forEach((track) =>
-			PlayerQueue.removeTrackFromPlaylist(playlistId!, track.id),
-		)
+		otherTracks.forEach((track) => PlayerQueue.removeTrackFromPlaylist(playlistId!, track.id))
 
 		// Insert the shuffled upcoming tracks right after the current track.
 		// Must use currentIndex + 1 (not a hardcoded 1) so the insert position is