React Query refactor (#91)

* 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

app/components/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import PressableOpacity from '@app/components/PressableOpacity'
-import { useStar } from '@app/hooks/library'
+import { useStar } from '@app/hooks/query'
 import { StarrableItemType, Song, Artist, Album } from '@app/models/library'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -22,6 +22,7 @@ type ContextMenuProps = {
   triggerTouchableStyle?: StyleProp<ViewStyle>
   onPress?: () => any
   triggerOnLongPress?: boolean
+  disabled?: boolean
 }
 
 type InternalContextMenuProps = ContextMenuProps & {
@@ -39,6 +40,7 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
   menuOptions,
   children,
   triggerOnLongPress,
+  disabled,
 }) => {
   menuStyle = menuStyle || { flex: 1 }
   triggerWrapperStyle = triggerWrapperStyle || { flex: 1 }
@@ -47,11 +49,12 @@ const ContextMenu: React.FC<InternalContextMenuProps> = ({
   return (
     <Menu renderer={SlideInMenu} style={menuStyle}>
       <MenuTrigger
+        disabled={disabled}
         triggerOnLongPress={triggerOnLongPress === undefined ? true : triggerOnLongPress}
         customStyles={{
           triggerOuterWrapper: triggerOuterWrapperStyle,
           triggerWrapper: triggerWrapperStyle,
-          triggerTouchable: { style: triggerTouchableStyle },
+          triggerTouchable: { style: triggerTouchableStyle, disabled },
           TriggerTouchableComponent: PressableOpacity,
         }}
         onAlternativeAction={onPress}>
@@ -117,9 +120,24 @@ const MenuHeader = React.memo<{
 }>(({ coverArt, artistId, title, subtitle }) => (
   <View style={styles.menuHeader}>
     {artistId ? (
-      <CoverArt type="artist" artistId={artistId} style={styles.coverArt} resizeMode={'cover'} round={true} />
+      <CoverArt
+        type="artist"
+        artistId={artistId}
+        style={styles.coverArt}
+        resizeMode="cover"
+        round={true}
+        size="thumbnail"
+        fadeDuration={0}
+      />
     ) : (
-      <CoverArt type="cover" coverArt={coverArt} style={styles.coverArt} resizeMode={'cover'} />
+      <CoverArt
+        type="cover"
+        coverArt={coverArt}
+        style={styles.coverArt}
+        resizeMode="cover"
+        size="thumbnail"
+        fadeDuration={0}
+      />
     )}
     <View style={styles.menuHeaderText}>
       <Text numberOfLines={1} style={styles.menuTitle}>
@@ -141,13 +159,13 @@ const OptionStar = React.memo<{
   type: StarrableItemType
   additionalText?: string
 }>(({ id, type, additionalText: text }) => {
-  const { starred, toggleStar } = useStar(id, type)
+  const { query, toggle } = useStar(id, type)
 
   return (
     <ContextMenuIconTextOption
-      IconComponentRaw={<Star starred={starred} size={26} />}
-      text={(starred ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
-      onSelect={toggleStar}
+      IconComponentRaw={<Star starred={!!query.data} size={26} />}
+      text={(query.data ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
+      onSelect={() => toggle.mutate()}
     />
   )
 })

app/components/CoverArt.tsx

@@ -1,5 +1,5 @@
-import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache'
-import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache'
+import { useQueryArtistArtPath, useQueryCoverArtPath } from '@app/hooks/query'
+import { CacheImageSize } from '@app/models/cache'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
 import {
@@ -18,7 +18,8 @@ type BaseProps = {
   imageStyle?: ImageStyle
   resizeMode?: ImageResizeMode
   round?: boolean
-  size?: CacheImageSize
+  size: CacheImageSize
+  fadeDuration?: number
 }
 
 type ArtistCoverArtProps = BaseProps & {
@@ -31,47 +32,54 @@ type CoverArtProps = BaseProps & {
   coverArt?: string
 }
 
-const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
-  ({ cache, style, imageStyle, resizeMode }) => {
+type ImageSourceProps = BaseProps & {
+  data?: string
+  isFetching: boolean
+  isExistingFetching: boolean
+}
+
+const ImageSource = React.memo<ImageSourceProps>(
+  ({ style, imageStyle, resizeMode, data, isFetching, isExistingFetching, fadeDuration }) => {
     const [error, setError] = useState(false)
 
     let source: ImageSourcePropType
-    if (!error && cache?.file && !cache?.request?.promise) {
-      source = { uri: `file://${cache.file.path}`, cache: 'reload' }
+    if (!error && data) {
+      source = { uri: `file://${data}` }
     } else {
       source = require('@res/fallback.png')
     }
 
     return (
       <>
-        <Image
-          source={source}
-          fadeDuration={150}
-          resizeMode={resizeMode || 'contain'}
-          style={[{ height: style?.height, width: style?.width }, imageStyle]}
-          onError={() => setError(true)}
-        />
-        <ActivityIndicator
-          animating={!!cache?.request?.promise}
-          size="large"
-          color={colors.accent}
-          style={styles.indicator}
-        />
+        {isExistingFetching ? (
+          <View style={{ height: style?.height, width: style?.width }} />
+        ) : (
+          <Image
+            source={source}
+            fadeDuration={fadeDuration === undefined ? 250 : fadeDuration}
+            resizeMode={resizeMode || 'contain'}
+            style={[{ height: style?.height, width: style?.width }, imageStyle]}
+            onError={() => setError(true)}
+          />
+        )}
+        {isFetching && (
+          <ActivityIndicator animating={true} size="large" color={colors.accent} style={styles.indicator} />
+        )}
       </>
     )
   },
 )
 
 const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
-  const cache = useArtistArtFile(props.artistId, props.size)
+  const { data, isFetching, isExistingFetching } = useQueryArtistArtPath(props.artistId, props.size)
 
-  return <ImageSource cache={cache} {...props} imageStyle={{ ...styles.artistImage, ...props.imageStyle }} />
+  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
 })
 
 const CoverArtImage = React.memo<CoverArtProps>(props => {
-  const cache = useCoverArtFile(props.coverArt, props.size)
+  const { data, isFetching, isExistingFetching } = useQueryCoverArtPath(props.coverArt, props.size)
 
-  return <ImageSource cache={cache} {...props} />
+  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
 })
 
 const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {

app/components/ListItem.tsx

@@ -54,7 +54,8 @@ const ListItem: React.FC<{
   listStyle?: 'big' | 'small'
   subtitle?: string
   style?: StyleProp<ViewStyle>
-}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style }) => {
+  disabled?: boolean
+}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle, style, disabled }) => {
   const navigation = useNavigation()
 
   showStar = showStar === undefined ? true : showStar
@@ -65,13 +66,13 @@ const ListItem: React.FC<{
   if (!onPress) {
     switch (item.itemType) {
       case 'album':
-        onPress = () => navigation.navigate('album', { id: item.id, title: item.name })
+        onPress = () => navigation.navigate('album', { id: item.id, title: item.name, album: item })
         break
       case 'artist':
         onPress = () => navigation.navigate('artist', { id: item.id, title: item.name })
         break
       case 'playlist':
-        onPress = () => navigation.navigate('playlist', { id: item.id, title: item.name })
+        onPress = () => navigation.navigate('playlist', { id: item.id, title: item.name, playlist: item })
         break
     }
   }
@@ -90,35 +91,43 @@ const ListItem: React.FC<{
 
   const itemPressable = useCallback(
     ({ children }) => (
-      <PressableOpacity onPress={onPress} style={styles.item}>
+      <PressableOpacity onPress={onPress} style={styles.item} disabled={disabled}>
         {children}
       </PressableOpacity>
     ),
-    [onPress],
+    [disabled, onPress],
   )
   const albumPressable = useCallback(
     ({ children }) => (
-      <AlbumContextPressable album={item as Album} onPress={onPress} triggerWrapperStyle={styles.item}>
+      <AlbumContextPressable
+        album={item as Album}
+        onPress={onPress}
+        triggerWrapperStyle={styles.item}
+        disabled={disabled}>
         {children}
       </AlbumContextPressable>
     ),
-    [item, onPress],
+    [disabled, item, onPress],
   )
   const songPressable = useCallback(
     ({ children }) => (
-      <SongContextPressable song={item as Song} onPress={onPress} triggerWrapperStyle={styles.item}>
+      <SongContextPressable song={item as Song} onPress={onPress} triggerWrapperStyle={styles.item} disabled={disabled}>
         {children}
       </SongContextPressable>
     ),
-    [item, onPress],
+    [disabled, item, onPress],
   )
   const artistPressable = useCallback(
     ({ children }) => (
-      <ArtistContextPressable artist={item as Artist} onPress={onPress} triggerWrapperStyle={styles.item}>
+      <ArtistContextPressable
+        artist={item as Artist}
+        onPress={onPress}
+        triggerWrapperStyle={styles.item}
+        disabled={disabled}>
         {children}
       </ArtistContextPressable>
     ),
-    [item, onPress],
+    [disabled, item, onPress],
   )
 
   let PressableComponent = itemPressable
@@ -180,7 +189,7 @@ const ListItem: React.FC<{
       </PressableComponent>
       <View style={styles.controls}>
         {showStar && item.itemType !== 'playlist' && (
-          <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} />
+          <PressableStar id={item.id} type={item.itemType} size={26} style={styles.controlItem} disabled={disabled} />
         )}
       </View>
     </View>

app/components/ListPlayerControls.tsx

@@ -1,7 +1,5 @@
 import Button from '@app/components/Button'
 import { Song } from '@app/models/library'
-import { QueueContextType } from '@app/models/trackplayer'
-import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
@@ -11,13 +9,12 @@ import IconMat from 'react-native-vector-icons/MaterialIcons'
 const ListPlayerControls = React.memo<{
   songs: Song[]
   typeName: string
-  queueName: string
-  queueContextType: QueueContextType
-  queueContextId: string
   style?: StyleProp<ViewStyle>
-}>(({ songs, typeName, queueName, queueContextType, queueContextId, style }) => {
+  play: () => void
+  shuffle: () => void
+  disabled?: boolean
+}>(({ typeName, style, play, shuffle, disabled }) => {
   const [downloaded, setDownloaded] = useState(false)
-  const setQueue = useStore(store => store.setQueue)
 
   return (
     <View style={[styles.controls, style]}>
@@ -34,16 +31,10 @@ const ListPlayerControls = React.memo<{
         </Button>
       </View>
       <View style={styles.controlsCenter}>
-        <Button
-          title={`Play ${typeName}`}
-          disabled={songs.length === 0}
-          onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, false)}
-        />
+        <Button title={`Play ${typeName}`} disabled={disabled} onPress={play} />
       </View>
       <View style={styles.controlsSide}>
-        <Button
-          disabled={songs.length === 0}
-          onPress={() => setQueue(songs, queueName, queueContextType, queueContextId, undefined, true)}>
+        <Button disabled={disabled} onPress={shuffle}>
           <Icon name="shuffle" size={26} color="white" />
         </Button>
       </View>

app/components/NowPlayingBar.tsx

@@ -93,6 +93,8 @@ const NowPlayingBar = React.memo(() => {
           type="cover"
           style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
           coverArt={coverArt}
+          size="thumbnail"
+          fadeDuration={0}
         />
         <View style={styles.detailsContainer}>
           <Text numberOfLines={1} style={styles.detailsTitle}>

app/components/PressableOpacity.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, ViewStyle, StyleSheet } from 'react-native'
+import React, { useCallback, useState } from 'react'
+import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, StyleSheet } from 'react-native'
 
 type PressableOpacityProps = PressableProps & {
   ripple?: boolean
@@ -9,13 +9,8 @@ type PressableOpacityProps = PressableProps & {
 
 const PressableOpacity: React.FC<PressableOpacityProps> = props => {
   const [opacity, setOpacity] = useState(1)
-  const [disabledStyle, setDisabledStyle] = useState<ViewStyle>({})
   const [dimensions, setDimensions] = useState<LayoutRectangle | undefined>(undefined)
 
-  useEffect(() => {
-    props.disabled === true ? setDisabledStyle({ opacity: 0.3 }) : setDisabledStyle({})
-  }, [props.disabled])
-
   props = {
     ...props,
     unstable_pressDelay: props.unstable_pressDelay === undefined ? 60 : props.unstable_pressDelay,
@@ -55,7 +50,8 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
   return (
     <Pressable
       {...props}
-      style={[styles.pressable, props.style as any, { opacity }, disabledStyle]}
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={[styles.pressable, props.style as any, { opacity }, props.disabled ? { opacity: 0.3 } : {}]}
       android_ripple={
         props.ripple
           ? {

app/components/Star.tsx

@@ -1,4 +1,4 @@
-import { useStar } from '@app/hooks/library'
+import { useStar } from '@app/hooks/query'
 import colors from '@app/styles/colors'
 import React from 'react'
 import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
@@ -19,12 +19,13 @@ export const PressableStar = React.memo<{
   type: 'album' | 'artist' | 'song'
   size: number
   style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined
-}>(({ id, type, size, style }) => {
-  const { starred, toggleStar } = useStar(id, type)
+  disabled?: boolean
+}>(({ id, type, size, style, disabled }) => {
+  const { query, toggle } = useStar(id, type)
 
   return (
-    <PressableOpacity onPress={toggleStar} style={style}>
-      <Star size={size} starred={starred} />
+    <PressableOpacity onPress={() => toggle.mutate()} style={style} disabled={disabled}>
+      <Star size={size} starred={!!query.data} />
     </PressableOpacity>
   )
 })