context sheet prefetching

unit tests

update rn screens

Author: anultravioletaurora

App.tsx

@@ -24,6 +24,7 @@ import OTAUpdateScreen from './src/components/OtaUpdates'
 import { usePerformanceMonitor } from './src/hooks/use-performance-monitor'
 import { SettingsProvider, useThemeSettingContext } from './src/providers/Settings'
 import navigationRef from './navigation'
+import { PROGRESS_UPDATE_EVENT_INTERVAL } from './src/player/config'
 
 export default function App(): React.JSX.Element {
 	// Add performance monitoring to track app-level re-renders
@@ -59,7 +60,7 @@ export default function App(): React.JSX.Element {
 				capabilities: CAPABILITIES,
 				notificationCapabilities: CAPABILITIES,
 				// Reduced interval for smoother progress tracking and earlier prefetch detection
-				progressUpdateEventInterval: 5,
+				progressUpdateEventInterval: PROGRESS_UPDATE_EVENT_INTERVAL,
 			}),
 		)
 		.finally(() => {

ios/Podfile.lock

@@ -2719,7 +2719,7 @@ PODS:
     - RNWorklets
     - SocketRocket
     - Yoga
-  - RNScreens (4.14.1):
+  - RNScreens (4.15.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2746,10 +2746,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.14.1)
+    - RNScreens/common (= 4.15.0)
     - SocketRocket
     - Yoga
-  - RNScreens/common (4.14.1):
+  - RNScreens/common (4.15.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -3306,7 +3306,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 3a73f098d74712952870e948b3d9cf7b6cae9961
   RNReactNativeHapticFeedback: be4f1b4bf0398c30b59b76ed92ecb0a2ff3a69c6
   RNReanimated: ee96d03fe3713993a30cc205522792b4cb08e4f9
-  RNScreens: 6ced6ae8a526512a6eef6e28c2286e1fc2d378c3
+  RNScreens: 48bbaca97a5f9aedc3e52bd48673efd2b6aac4f6
   RNSentry: 95e1ed0ede28a4af58aaafedeac9fcfaba0e89ce
   RNWorklets: e8335dff9d27004709f58316985769040cd1e8f2
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d

jest/functional/Player-Handlers.test.ts

@@ -0,0 +1,28 @@
+import { Progress } from 'react-native-track-player'
+import { shouldMarkPlaybackFinished } from '../../src/providers/Player/utils/handlers'
+
+describe('Playback Event Handlers', () => {
+	it('should determine that the track has finished', () => {
+		const progress: Progress = {
+			position: 95.23423453,
+			duration: 98.23557854,
+			buffered: 98.2345568679345,
+		}
+
+		const playbackFinished = shouldMarkPlaybackFinished(progress)
+
+		expect(playbackFinished).toBeTruthy()
+	})
+
+	it('should determine the track is still playing', () => {
+		const progress: Progress = {
+			position: 85.23423453,
+			duration: 98.23557854,
+			buffered: 98.2345568679345,
+		}
+
+		const playbackFinished = shouldMarkPlaybackFinished(progress)
+
+		expect(playbackFinished).toBeFalsy()
+	})
+})

package.json

@@ -82,7 +82,7 @@
     "react-native-pager-view": "^7.0.0",
     "react-native-reanimated": "4.0.2",
     "react-native-safe-area-context": "^5.6.0",
-    "react-native-screens": "4.14.1",
+    "react-native-screens": "4.15.0",
     "react-native-swipeable-item": "^2.0.9",
     "react-native-text-ticker": "^1.15.0",
     "react-native-toast-message": "^2.3.3",

src/api/queries/media.ts

@@ -1,6 +1,6 @@
 import { Api } from '@jellyfin/sdk'
-import { BaseItemDto, PlaybackInfoResponse } from '@jellyfin/sdk/lib/generated-client/models'
-import { getAudioApi, getMediaInfoApi } from '@jellyfin/sdk/lib/utils/api'
+import { PlaybackInfoResponse } from '@jellyfin/sdk/lib/generated-client/models'
+import { getMediaInfoApi } from '@jellyfin/sdk/lib/utils/api'
 import { isUndefined } from 'lodash'
 import { JellifyUser } from '../../types/JellifyUser'
 import { AudioQuality } from '../../types/AudioQuality'
@@ -9,7 +9,7 @@ export async function fetchMediaInfo(
 	api: Api | undefined,
 	user: JellifyUser | undefined,
 	bitrate: AudioQuality | undefined,
-	item: BaseItemDto,
+	itemId: string,
 ): Promise<PlaybackInfoResponse> {
 	console.debug(`Fetching media info of quality ${JSON.stringify(bitrate)}`)
 
@@ -19,7 +19,7 @@ export async function fetchMediaInfo(
 
 		getMediaInfoApi(api)
 			.getPostedPlaybackInfo({
-				itemId: item.Id!,
+				itemId: itemId!,
 				userId: user.id,
 				playbackInfoDto: {
 					MaxAudioChannels: bitrate?.MaxAudioBitDepth

src/api/queries/suggestions.ts

@@ -1,4 +1,4 @@
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api'
+import { getArtistsApi, getItemsApi } from '@jellyfin/sdk/lib/utils/api'
 import { BaseItemDto, BaseItemKind, ItemFields } from '@jellyfin/sdk/lib/generated-client/models'
 import { Api } from '@jellyfin/sdk'
 import { isUndefined } from 'lodash'
@@ -54,14 +54,12 @@ export async function fetchArtistSuggestions(
 		if (isUndefined(user)) return reject('User has not been set')
 		if (isUndefined(libraryId)) return reject('Library has not been set')
 
-		getItemsApi(api)
-			.getItems({
+		getArtistsApi(api)
+			.getAlbumArtists({
 				parentId: libraryId,
 				userId: user.id,
-				recursive: true,
 				limit: 50,
 				startIndex: page * 50,
-				includeItemTypes: [BaseItemKind.MusicArtist],
 				fields: [ItemFields.ChildCount, ItemFields.SortName],
 				sortBy: ['Random'],
 			})

src/components/AddToPlaylist/index.tsx

@@ -120,11 +120,13 @@ export default function AddToPlaylist({ track }: { track: BaseItemDto }): React.
 	return (
 		<ScrollView>
 			<XStack gap={'$2'} margin={'$4'}>
-				<ItemImage item={track} />
+				<ItemImage item={track} width={'$12'} height={'$12'} />
 
 				<YStack gap={'$2'} margin={'$2'}>
 					<TextTicker {...TextTickerConfig}>
-						<Text bold>{getItemName(track)}</Text>
+						<Text bold fontSize={'$6'}>
+							{getItemName(track)}
+						</Text>
 					</TextTicker>
 
 					<TextTicker {...TextTickerConfig}>

src/components/Context/index.tsx

@@ -79,6 +79,14 @@ export default function ItemContext({ item, stackNavigation }: ContextProps): Re
 
 	const renderViewAlbumRow = useMemo(() => isAlbum || (isTrack && album), [album, item])
 
+	const artistIds = !isPlaylist
+		? isArtist
+			? [item.Id]
+			: item.ArtistItems
+				? item.ArtistItems.map((item) => item.Id)
+				: []
+		: []
+
 	return (
 		<ScrollView>
 			<YGroup unstyled marginBottom={bottom}>
@@ -108,10 +116,7 @@ export default function ItemContext({ item, stackNavigation }: ContextProps): Re
 				)}
 
 				{!isPlaylist && (
-					<ViewArtistMenuRow
-						artists={isArtist ? [item] : itemArtists}
-						stackNavigation={stackNavigation}
-					/>
+					<ArtistMenuRows artistIds={artistIds} stackNavigation={stackNavigation} />
 				)}
 			</YGroup>
 		</ScrollView>
@@ -210,13 +215,37 @@ function ViewAlbumMenuRow({ album: album, stackNavigation }: MenuRowProps): Reac
 	)
 }
 
+function ArtistMenuRows({
+	artistIds,
+	stackNavigation,
+}: {
+	artistIds: (string | null | undefined)[]
+	stackNavigation: StackNavigation | undefined
+}): React.JSX.Element {
+	return (
+		<View>
+			{artistIds.map((id) => (
+				<ViewArtistMenuRow artistId={id} key={id} stackNavigation={stackNavigation} />
+			))}
+		</View>
+	)
+}
+
 function ViewArtistMenuRow({
-	artists,
+	artistId,
 	stackNavigation,
 }: {
-	artists: BaseItemDto[]
+	artistId: string | null | undefined
 	stackNavigation: StackNavigation | undefined
 }): React.JSX.Element {
+	const { api } = useJellifyContext()
+
+	const { data: artist } = useQuery({
+		queryKey: [QueryKeys.ArtistById, artistId],
+		queryFn: () => fetchItem(api, artistId!),
+		enabled: !!artistId,
+	})
+
 	const goToArtist = useCallback(
 		(artist: BaseItemDto) => {
 			if (stackNavigation) stackNavigation.navigate('Artist', { artist })
@@ -225,23 +254,20 @@ function ViewArtistMenuRow({
 		[stackNavigation, navigationRef],
 	)
 
-	return (
-		<View>
-			{artists.map((artist, index) => (
-				<ListItem
-					animation={'quick'}
-					backgroundColor={'transparent'}
-					gap={'$3'}
-					justifyContent='flex-start'
-					key={index}
-					onPress={() => goToArtist(artist)}
-					pressStyle={{ opacity: 0.5 }}
-				>
-					<ItemImage circular item={artist} height={'$10'} width={'$10'} />
-
-					<Text bold>{`Go to ${getItemName(artist)}`}</Text>
-				</ListItem>
-			))}
-		</View>
+	return artist ? (
+		<ListItem
+			animation={'quick'}
+			backgroundColor={'transparent'}
+			gap={'$3'}
+			justifyContent='flex-start'
+			onPress={() => goToArtist(artist)}
+			pressStyle={{ opacity: 0.5 }}
+		>
+			<ItemImage circular item={artist} height={'$10'} width={'$10'} />
+
+			<Text bold>{`Go to ${getItemName(artist)}`}</Text>
+		</ListItem>
+	) : (
+		<></>
 	)
 }

src/components/Context/utils/navigation.ts

@@ -6,10 +6,17 @@ import { InteractionManager } from 'react-native'
 export function goToAlbumFromContextSheet(album: BaseItemDto | undefined) {
 	if (!navigationRef.isReady() || !album) return
 
-	// Pop Context Sheet and Player Modal
-	navigationRef.dispatch(StackActions.popTo('Tabs'))
+	// Pop Context Sheet
+	navigationRef.dispatch(StackActions.pop())
 
-	const route = navigationRef.current?.getCurrentRoute()
+	let route = navigationRef.current?.getCurrentRoute()
+
+	// If we've popped into the player, pop that as well
+	if (route?.name.includes('Player')) {
+		navigationRef.dispatch(StackActions.pop())
+
+		route = navigationRef.current?.getCurrentRoute()
+	}
 
 	if (route?.name.includes('Settings')) {
 		navigationRef.dispatch(TabActions.jumpTo('LibraryTab'))
@@ -22,10 +29,17 @@ export function goToAlbumFromContextSheet(album: BaseItemDto | undefined) {
 export function goToArtistFromContextSheet(artist: BaseItemDto | undefined) {
 	if (!navigationRef.isReady() || !artist) return
 
-	// Pop Context Sheet and Player Modal
-	navigationRef.dispatch(StackActions.popTo('Tabs'))
+	// Pop Context Sheet
+	navigationRef.dispatch(StackActions.pop())
+
+	let route = navigationRef.current?.getCurrentRoute()
+
+	// If we've popped into the player, pop that as well
+	if (route?.name.includes('Player')) {
+		navigationRef.dispatch(StackActions.pop())
 
-	const route = navigationRef.current?.getCurrentRoute()
+		route = navigationRef.current?.getCurrentRoute()
+	}
 
 	if (route?.name.includes('Settings')) {
 		navigationRef.dispatch(TabActions.jumpTo('LibraryTab'))

src/components/Global/components/image.tsx

@@ -83,10 +83,7 @@ function getBorderRadius(circular: boolean | undefined, width: Token | number |
 	if (circular) {
 		borderRadius = width ? (typeof width === 'number' ? width : getTokenValue(width)) : '100%'
 	} else if (!isUndefined(width)) {
-		borderRadius =
-			typeof width === 'number'
-				? width / 25
-				: getTokenValue(width) / (getTokenValue(width) / 6)
+		borderRadius = typeof width === 'number' ? width / 25 : getTokenValue(width) / 15
 	} else borderRadius = '5%'
 
 	return borderRadius