From 0f8a9e91c532040175eb6570b53c7bfdc3f48aa5 Mon Sep 17 00:00:00 2001 From: Violet Caulfield Date: Tue, 2 Dec 2025 01:20:08 -0600 Subject: [PATCH] home screen animation and indicator improvements --- .../Home/helpers/frequent-artists.tsx | 20 ++- .../Home/helpers/frequent-tracks.tsx | 22 ++- .../Home/helpers/recent-artists.tsx | 18 ++- .../Home/helpers/recently-played.tsx | 126 +++++++++--------- src/components/Home/index.tsx | 11 +- 5 files changed, 119 insertions(+), 78 deletions(-) diff --git a/src/components/Home/helpers/frequent-artists.tsx b/src/components/Home/helpers/frequent-artists.tsx index 811b3052..a8b1410e 100644 --- a/src/components/Home/helpers/frequent-artists.tsx +++ b/src/components/Home/helpers/frequent-artists.tsx @@ -2,7 +2,7 @@ import HorizontalCardList from '../../../components/Global/components/horizontal import { NativeStackNavigationProp } from '@react-navigation/native-stack' import React, { useCallback } from 'react' import { ItemCard } from '../../../components/Global/components/item-card' -import { H5, View, XStack } from 'tamagui' +import { H5, XStack } from 'tamagui' import Icon from '../../Global/components/icon' import { useDisplayContext } from '../../../providers/Display/display-provider' import { useNavigation } from '@react-navigation/native' @@ -11,6 +11,7 @@ import { RootStackParamList } from '../../../screens/types' import { useFrequentlyPlayedArtists } from '../../../api/queries/frequents' import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client' import { pickFirstGenre } from '../../../utils/genre-formatting' +import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated' export default function FrequentArtists(): React.JSX.Element { const navigation = useNavigation>() @@ -42,8 +43,15 @@ export default function FrequentArtists(): React.JSX.Element { [], ) - return ( - + return frequentArtistsInfiniteQuery.data ? ( + { @@ -57,9 +65,11 @@ export default function FrequentArtists(): React.JSX.Element { - + + ) : ( + <> ) } diff --git a/src/components/Home/helpers/frequent-tracks.tsx b/src/components/Home/helpers/frequent-tracks.tsx index 680daa3d..851072a9 100644 --- a/src/components/Home/helpers/frequent-tracks.tsx +++ b/src/components/Home/helpers/frequent-tracks.tsx @@ -1,5 +1,5 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack' -import { H5, View, XStack } from 'tamagui' +import { H5, XStack } from 'tamagui' import HorizontalCardList from '../../../components/Global/components/horizontal-list' import { ItemCard } from '../../../components/Global/components/item-card' import { QueuingType } from '../../../enums/queuing-type' @@ -13,6 +13,7 @@ import { useNetworkStatus } from '../../../stores/network' import useStreamingDeviceProfile from '../../../stores/device-profile' import { useFrequentlyPlayedTracks } from '../../../api/queries/frequents' import { useApi } from '../../../stores' +import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated' export default function FrequentlyPlayedTracks(): React.JSX.Element { const api = useApi() @@ -30,8 +31,15 @@ export default function FrequentlyPlayedTracks(): React.JSX.Element { const loadNewQueue = useLoadNewQueue() const { horizontalItems } = useDisplayContext() - return ( - + return tracksInfiniteQuery.data ? ( + { @@ -46,8 +54,8 @@ export default function FrequentlyPlayedTracks(): React.JSX.Element { horizontalItems) - ? tracksInfiniteQuery.data?.slice(0, horizontalItems) + tracksInfiniteQuery.data.length > horizontalItems + ? tracksInfiniteQuery.data.slice(0, horizontalItems) : tracksInfiniteQuery.data } renderItem={({ item: track, index }) => ( @@ -81,6 +89,8 @@ export default function FrequentlyPlayedTracks(): React.JSX.Element { /> )} /> - + + ) : ( + <> ) } diff --git a/src/components/Home/helpers/recent-artists.tsx b/src/components/Home/helpers/recent-artists.tsx index 69dff96f..1d9fbbac 100644 --- a/src/components/Home/helpers/recent-artists.tsx +++ b/src/components/Home/helpers/recent-artists.tsx @@ -11,6 +11,7 @@ import HomeStackParamList from '../../../screens/Home/types' import { useRecentArtists } from '../../../api/queries/recents' import { pickFirstGenre } from '../../../utils/genre-formatting' import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto' +import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated' export default function RecentArtists(): React.JSX.Element { const recentArtistsInfiniteQuery = useRecentArtists() @@ -50,17 +51,26 @@ export default function RecentArtists(): React.JSX.Element { [navigation, rootNavigation], ) - return ( - + return recentArtistsInfiniteQuery.data ? ( +
Recent Artists
 - + + ) : ( + <> ) } diff --git a/src/components/Home/helpers/recently-played.tsx b/src/components/Home/helpers/recently-played.tsx index f2ea49b3..7da08dda 100644 --- a/src/components/Home/helpers/recently-played.tsx +++ b/src/components/Home/helpers/recently-played.tsx @@ -1,5 +1,5 @@ -import React, { useMemo } from 'react' -import { H5, View, XStack } from 'tamagui' +import React from 'react' +import { H5, XStack } from 'tamagui' import { ItemCard } from '../../Global/components/item-card' import { RootStackParamList } from '../../../screens/types' import { NativeStackNavigationProp } from '@react-navigation/native-stack' @@ -13,8 +13,8 @@ import HomeStackParamList from '../../../screens/Home/types' import { useNetworkStatus } from '../../../stores/network' import useStreamingDeviceProfile from '../../../stores/device-profile' import { useRecentlyPlayedTracks } from '../../../api/queries/recents' -import { useCurrentTrack } from '../../../stores/player/queue' import { useApi } from '../../../stores' +import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated' export default function RecentlyPlayed(): React.JSX.Element { const api = useApi() @@ -23,8 +23,6 @@ export default function RecentlyPlayed(): React.JSX.Element { const deviceProfile = useStreamingDeviceProfile() - const nowPlaying = useCurrentTrack() - const navigation = useNavigation>() const rootNavigation = useNavigation>() @@ -33,60 +31,68 @@ export default function RecentlyPlayed(): React.JSX.Element { const tracksInfiniteQuery = useRecentlyPlayedTracks() const { horizontalItems } = useDisplayContext() - return useMemo(() => { - return ( - - { - navigation.navigate('RecentTracks', { - tracksInfiniteQuery, - }) - }} - > -
Play it again
- - - horizontalItems) - ? tracksInfiniteQuery.data?.slice(0, horizontalItems) - : tracksInfiniteQuery.data - } - renderItem={({ index, item: recentlyPlayedTrack }) => ( - { - loadNewQueue({ - api, - deviceProfile, - networkStatus, - track: recentlyPlayedTrack, - index: index, - tracklist: tracksInfiniteQuery.data ?? [recentlyPlayedTrack], - queue: 'Recently Played', - queuingType: QueuingType.FromSelection, - startPlayback: true, - }) - }} - onLongPress={() => { - rootNavigation.navigate('Context', { - item: recentlyPlayedTrack, - navigation, - }) - }} - marginHorizontal={'$1'} - captionAlign='left' - /> - )} - /> - - ) - }, [tracksInfiniteQuery.data, nowPlaying]) + return tracksInfiniteQuery.data ? ( + + { + navigation.navigate('RecentTracks', { + tracksInfiniteQuery, + }) + }} + > +
Play it again
+ + + + horizontalItems) + ? tracksInfiniteQuery.data.slice(0, horizontalItems) + : tracksInfiniteQuery.data + } + renderItem={({ index, item: recentlyPlayedTrack }) => ( + { + loadNewQueue({ + api, + deviceProfile, + networkStatus, + track: recentlyPlayedTrack, + index: index, + tracklist: tracksInfiniteQuery.data ?? [recentlyPlayedTrack], + queue: 'Recently Played', + queuingType: QueuingType.FromSelection, + startPlayback: true, + }) + }} + onLongPress={() => { + rootNavigation.navigate('Context', { + item: recentlyPlayedTrack, + navigation, + }) + }} + marginHorizontal={'$1'} + captionAlign='left' + /> + )} + /> + + ) : ( + <> + ) } diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index 7e497e9b..5c127de9 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -7,6 +7,8 @@ import FrequentlyPlayedTracks from './helpers/frequent-tracks' import { usePreventRemove } from '@react-navigation/native' import useHomeQueries from '../../api/mutations/home' import { usePerformanceMonitor } from '../../hooks/use-performance-monitor' +import { useIsRestoring } from '@tanstack/react-query' +import { useRecentlyPlayedTracks } from '../../api/queries/recents' const COMPONENT_NAME = 'Home' @@ -17,18 +19,21 @@ export function Home(): React.JSX.Element { usePerformanceMonitor(COMPONENT_NAME, 5) - const { isPending: refreshing, mutate: refresh } = useHomeQueries() + const { isPending: refreshing, mutateAsync: refresh } = useHomeQueries() + + const { isPending: loadingInitialData } = useRecentlyPlayedTracks() + + const isRestoring = useIsRestoring() return (