diff --git a/src/components/Context/index.tsx b/src/components/Context/index.tsx index f211aae3..3b4d6514 100644 --- a/src/components/Context/index.tsx +++ b/src/components/Context/index.tsx @@ -12,7 +12,7 @@ import Icon from '../Global/components/icon' import { NativeStackNavigationProp } from '@react-navigation/native-stack' import { useQuery } from '@tanstack/react-query' import { QueryKeys } from '../../enums/query-keys' -import { fetchItem, fetchItems } from '../../api/queries/item' +import { fetchAlbumDiscs, fetchItem, fetchItems } from '../../api/queries/item' import { useJellifyContext } from '../../providers' import { getItemsApi } from '@jellyfin/sdk/lib/utils/api' import { useAddToQueueContext } from '../../providers/Player/queue' @@ -38,20 +38,10 @@ interface ContextProps { } export default function ItemContext({ item, stackNavigation }: ContextProps): React.JSX.Element { - const { api, user, library } = useJellifyContext() + const { api } = useJellifyContext() const { bottom } = useSafeAreaInsets() - const bottomMargin = useMemo(() => { - const isAndroid = Platform.OS === 'android' - - let finalMargin = bottom - - if (isAndroid) finalMargin += getTokenValue('$12') - - return finalMargin - }, [bottom]) - const isArtist = item.Type === BaseItemKind.MusicArtist const isAlbum = item.Type === BaseItemKind.MusicAlbum const isTrack = item.Type === BaseItemKind.Audio @@ -74,6 +64,13 @@ export default function ItemContext({ item, stackNavigation }: ContextProps): Re if (data.Items) return data.Items else return [] }), + enabled: isPlaylist, + }) + + const { data: discs } = useQuery({ + queryKey: [QueryKeys.ItemTracks, item.Id], + queryFn: () => fetchAlbumDiscs(api, item), + enabled: isAlbum, }) const renderAddToQueueRow = isTrack || (isAlbum && tracks) || (isPlaylist && tracks) @@ -84,10 +81,22 @@ export default function ItemContext({ item, stackNavigation }: ContextProps): Re return ( - + - {renderAddToQueueRow && } + {renderAddToQueueRow && ( + data.data) + : isPlaylist && tracks + ? tracks + : [] + } + /> + )} {renderAddToPlaylistRow && } @@ -100,7 +109,7 @@ export default function ItemContext({ item, stackNavigation }: ContextProps): Re {!isPlaylist && ( )} @@ -109,29 +118,6 @@ export default function ItemContext({ item, stackNavigation }: ContextProps): Re ) } -function ItemContextBackground({ item }: { item: BaseItemDto }): React.JSX.Element { - return ( - - - - - - ) -} - -function BackgroundBlur({ item }: { item: BaseItemDto }): React.JSX.Element { - const blurhash = getPrimaryBlurhashFromDto(item) - - return ( - - ) -} - function AddToPlaylistRow({ track }: { track: BaseItemDto }): React.JSX.Element { return ( fetchMediaInfo(api, user, getQualityParams(streamingQuality), props.item), staleTime: Infinity, // Don't refetch media info unless the user changes the quality - enabled: props.item.Type === 'Audio', + enabled: props.item.Type === BaseItemKind.Audio, }) + /** + * Fire query for a track's album + * + * Referenced later in the context sheet + */ useQuery({ queryKey: [QueryKeys.Album, props.item.AlbumId], queryFn: () => fetchItem(api, props.item.AlbumId!), enabled: props.item.Type === BaseItemKind.Audio && !!props.item.AlbumId, }) + /** + * Fire query for an album's tracks + * + * Referenced later in the context sheet + */ + useQuery({ + queryKey: [QueryKeys.ItemTracks, props.item.Id], + queryFn: () => fetchAlbumDiscs(api, props.item), + enabled: !!props.item.Id && props.item.Type === BaseItemKind.MusicAlbum, + }) + + /** + * Fire query for an playlist's tracks + * + * Referenced later in the context sheet + */ useQuery({ queryKey: [QueryKeys.ItemTracks, props.item.Id], queryFn: () => @@ -54,7 +75,7 @@ export function ItemCard(props: CardProps) { if (data.Items) return data.Items else return [] }), - enabled: !!props.item.Id && props.item.Type === BaseItemKind.MusicAlbum, + enabled: !!props.item.Id && props.item.Type === BaseItemKind.Playlist, }) return ( diff --git a/src/components/Global/components/item-row.tsx b/src/components/Global/components/item-row.tsx index f2f4c59a..baceb1c9 100644 --- a/src/components/Global/components/item-row.tsx +++ b/src/components/Global/components/item-row.tsx @@ -18,7 +18,7 @@ import { useStreamingQualityContext } from '../../../providers/Settings' import navigationRef from '../../../../navigation' import { NativeStackNavigationProp } from '@react-navigation/native-stack' import { BaseStackParamList } from '../../../screens/types' -import { fetchItem } from '../../../api/queries/item' +import { fetchAlbumDiscs, fetchItem } from '../../../api/queries/item' import { getItemsApi } from '@jellyfin/sdk/lib/utils/api' interface ItemRowProps { @@ -79,6 +79,17 @@ export default function ItemRow({ * * Referenced later in the context sheet */ + useQuery({ + queryKey: [QueryKeys.ItemTracks, item.Id], + queryFn: () => fetchAlbumDiscs(api, item), + enabled: !!item.Id && item.Type === BaseItemKind.MusicAlbum, + }) + + /** + * Fire query for an playlist's tracks + * + * Referenced later in the context sheet + */ useQuery({ queryKey: [QueryKeys.ItemTracks, item.Id], queryFn: () => @@ -88,7 +99,7 @@ export default function ItemRow({ if (data.Items) return data.Items else return [] }), - enabled: !!item.Id && item.Type === BaseItemKind.MusicAlbum, + enabled: !!item.Id && item.Type === BaseItemKind.Playlist, }) const gestureCallback = () => { diff --git a/src/components/Global/components/track.tsx b/src/components/Global/components/track.tsx index 4719f937..040257d9 100644 --- a/src/components/Global/components/track.tsx +++ b/src/components/Global/components/track.tsx @@ -129,7 +129,7 @@ export default function Track({ item: track, }) } - }, [onLongPress, navigation, track, isNested]) + }, [onLongPress, track, isNested]) const handleIconPress = useCallback(() => { if (showRemove) { @@ -139,7 +139,7 @@ export default function Track({ item: track, }) } - }, [showRemove, onRemove, navigation, track, isNested]) + }, [showRemove, onRemove, track, isNested]) // Only fetch media info if needed (for streaming) useQuery({ diff --git a/src/components/InstantMix/component.tsx b/src/components/InstantMix/component.tsx index 66c90ead..65ddd23e 100644 --- a/src/components/InstantMix/component.tsx +++ b/src/components/InstantMix/component.tsx @@ -1,19 +1,18 @@ import { InstantMixProps } from '../../screens/types' -import { FlatList } from 'react-native' import Track from '../Global/components/track' import { Separator } from 'tamagui' +import { FlashList } from '@shopify/flash-list' export default function InstantMix({ route, navigation }: InstantMixProps): React.JSX.Element { const { mix } = route.params return ( - } renderItem={({ item, index }) => ( - + navigationRef.goBack()} + > - + - + diff --git a/src/screens/Library/types.ts b/src/screens/Library/types.ts index 797010d6..4e21ea38 100644 --- a/src/screens/Library/types.ts +++ b/src/screens/Library/types.ts @@ -1,7 +1,6 @@ import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models' import { NativeStackScreenProps } from '@react-navigation/native-stack' import { BaseStackParamList } from '../types' -import { Queue } from '../../player/types/queue-item' import { NavigatorScreenParams } from '@react-navigation/native' type LibraryStackParamList = BaseStackParamList & {