Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2026-02-10 23:02:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

React Query refactor (#91)

Browse Source 
* initial react-query experiments

* use queries for item screens

send the data we do have over routing to prepopulate (album/playlist)
use number for starred because sending Date freaks out react-navigation

* add in equiv. song cover art fix

* reorg, switch artistview over

start mapping song cover art when any are available

* refactor useStar to queries

fix caching for starred items and album cover art

* add hook to reset queries on server change

* refactor search to use query

* fix song cover art setting

* use query for artistInfo

* remove last bits of library state

* cleanup

* use query key factory

already fixed one wrong key...

* require coverart size

* let's try no promise queues on these for now

* image cache uses query

* perf fix for playlist parsing

also use placeholder data so we don't have to deal with staleness

* drill that disabled

also list controls doesn't need its own songs hook/copy

* switch to react-native-blob-util for downloads

slightly slower but allows us to use DownloadManager, which backgrounds downloads so they are no longer corrupted when the app suspends

* add a fake "top songs" based on artist search

then sorted by play count/ratings
artistview should load now even if topSongs fails

* try not to swap between topSongs/search on refetch

set queueContext by song list so the index isn't off if the list changes

* add content type validation for file fetching

also try to speed up existing file return by limiting fs ops

* if the HEAD fails, don't queue the download

* clean up params

* reimpl clear image cache

* precompute contextId

prevents wrong "is playing" when any mismatch between queue and list

* clear images from all servers

use external files dir instead of cache

* fix pressable disabled flicker

don't retry topsongs on failure
try to optimize setqueue and fixcoverart a bit

* wait for queries during clear

* break out fetchExistingFile from fetchFile

allows to tell if file is coming from disk or not
only show placeholder/loading spinner if actually fetching image

* forgot these wouldn't do anything with objects

* remove query cache when switching servers

* add content-disposition extension gathering

add support for progress hook (needs native support still)

* added custom RNBU pkg with progress changes

* fully unmount tabs when server changes

prevents unwanted requests, gives fresh start on switch
fix fixCoverArt not re-rendering in certain cases on search

* use serverId from fetch deps

* fix lint

* update licenses

* just use the whole lodash package

* make using cache buster optional
This commit is contained in:
austinried
2022-04-11 09:40:51 +09:00
committed by GitHub
parent cbd88d0f13
commit 8196704ccd
48 changed files with 2206 additions and 1801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/navigation/BottomTabNavigator.tsx
View File

@@ -1,4 +1,5 @@
import { useFirstRun } from '@app/hooks/settings'
import { Album, Playlist } from '@app/models/library'
import BottomTabBar from '@app/navigation/BottomTabBar'
import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
import ArtistView from '@app/screens/ArtistView'
@@ -9,6 +10,7 @@ import ServerView from '@app/screens/ServerView'
import SettingsView from '@app/screens/Settings'
import SongListView from '@app/screens/SongListView'
import WebViewScreen from '@app/screens/WebViewScreen'
import { useStore } from '@app/state/store'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
@@ -19,9 +21,9 @@ import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-nat
type TabStackParamList = {
main: undefined
album: { id: string; title: string }
album: { id: string; title: string; album?: Album }
artist: { id: string; title: string }
playlist: { id: string; title: string }
playlist: { id: string; title: string; playlist?: Playlist }
results: { query: string; type: 'album' | 'song' | 'artist' }
}
@@ -32,9 +34,7 @@ type AlbumScreenProps = {
navigation: AlbumScreenNavigationProp
}
const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
<SongListView id={route.params.id} title={route.params.title} type="album" />
)
const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => <SongListView {...route.params} type="album" />
type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'artist'>
type ArtistScreenRouteProp = RouteProp<TabStackParamList, 'artist'>
@@ -43,9 +43,7 @@ type ArtistScreenProps = {
navigation: ArtistScreenNavigationProp
}
const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
<ArtistView id={route.params.id} title={route.params.title} />
)
const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => <ArtistView {...route.params} />
type PlaylistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'playlist'>
type PlaylistScreenRouteProp = RouteProp<TabStackParamList, 'playlist'>
@@ -54,9 +52,7 @@ type PlaylistScreenProps = {
navigation: PlaylistScreenNavigationProp
}
const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
<SongListView id={route.params.id} title={route.params.title} type="playlist" />
)
const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => <SongListView {...route.params} type="playlist" />
type ResultsScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'results'>
type ResultsScreenRouteProp = RouteProp<TabStackParamList, 'results'>
@@ -65,9 +61,7 @@ type ResultsScreenProps = {
navigation: ResultsScreenNavigationProp
}
const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => (
<SearchResultsView query={route.params.query} type={route.params.type} />
)
const ResultsScreen: React.FC<ResultsScreenProps> = ({ route }) => <SearchResultsView {...route.params} />
const styles = StyleSheet.create({
stackheaderStyle: {
@@ -177,12 +171,19 @@ const Tab = createBottomTabNavigator()
const BottomTabNavigator = () => {
const firstRun = useFirstRun()
const resetServer = useStore(store => store.resetServer)
return (
<Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>
<Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
<Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
<Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />
{resetServer ? (
<></>
) : (
<>
<Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
<Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
<Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />
</>
)}
<Tab.Screen name="settings" component={SettingsTab} options={{ tabBarLabel: 'Settings' }} />
</Tab.Navigator>
)