Merge pull request #6 from sawyerf/cache

Add: api cache (android)
sawyerf · Dec 28, 2024 · f60d899 · f60d899
2 parents 863fa19 + 00838fd
commit f60d899
Show file tree

Hide file tree

Showing 17 changed files with 165 additions and 92 deletions.
diff --git a/android/gradle.properties b/android/gradle.properties
@@ -0,0 +1 @@
+AsyncStorage_db_size_in_MB=50
diff --git a/app.json b/app.json
@@ -3,7 +3,7 @@
     "name": "Castafiore",
     "slug": "Castafiore",
     "description": "Mobile app for navidrome",
-    "version": "2024.12.27",
+    "version": "2024.12.29",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

diff --git a/app/components/bar/BottomBar.js b/app/components/bar/BottomBar.js
@@ -12,70 +12,68 @@ const BottomBar = ({ state, descriptors, navigation }) => {
   const theme = React.useContext(ThemeContext)
 
   return (
-    <View>
-      <View style={{
-        flexDirection: 'row',
-        backgroundColor: theme.secondaryDark,
-        borderTopColor: theme.secondaryDark,
-        borderTopWidth: 1,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-      >
-        {state.routes.map((route, index) => {
-          const { options } = descriptors[route.key];
-          const isFocused = state.index === index;
+    <View style={{
+      flexDirection: 'row',
+      backgroundColor: theme.secondaryDark,
+      borderTopColor: theme.secondaryDark,
+      borderTopWidth: 1,
+      paddingLeft: insets.left,
+      paddingRight: insets.right,
+    }}
+    >
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
 
-          const onPress = () => {
-            const event = navigation.emit({
-              type: 'tabPress',
-              target: route.key,
-              canPreventDefault: true,
-            });
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
 
-            if (!isFocused && !event.defaultPrevented) {
-              navigation.navigate(route.name, route.params);
-            }
-          };
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
 
-          const onLongPress = () => {
-            navigation.emit({
-              type: 'tabLongPress',
-              target: route.key,
-            });
-          };
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
 
-          const getColor = () => {
-            if (isFocused) return theme.primaryTouch
-            if (!config.query && route.name !== 'Settings') return theme.secondaryLight
-            return theme.primaryLight
-          }
+        const getColor = () => {
+          if (isFocused) return theme.primaryTouch
+          if (!config.query && route.name !== 'Settings') return theme.secondaryLight
+          return theme.primaryLight
+        }
 
-          return (
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessibilityState={isFocused ? { selected: true } : {}}
-              accessibilityLabel={options.tabBarAccessibilityLabel}
-              testID={options.tabBarTestID}
-              onPress={onPress}
-              onLongPress={onLongPress}
-              style={{
-                flex: 1,
-                paddingBottom: insets.bottom ? insets.bottom : 10,
-                paddingTop: 10,
-              }}
-              key={index}
-              disabled={(!config.query && route.name !== 'Settings')}
-            >
-              <Icon name={options.icon} size={20} color={getColor()} style={{ alignSelf: 'center', marginBottom: 5 }} />
-              <Text style={{ color: getColor(), textAlign: 'center' }}>
-                {options.title}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View >
+        return (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={{
+              flex: 1,
+              paddingBottom: insets.bottom ? insets.bottom : 10,
+              paddingTop: 10,
+            }}
+            key={index}
+            disabled={(!config.query && route.name !== 'Settings')}
+          >
+            <Icon name={options.icon} size={20} color={getColor()} style={{ alignSelf: 'center', marginBottom: 5 }} />
+            <Text style={{ color: getColor(), textAlign: 'center' }}>
+              {options.title}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
   )
 }
 

diff --git a/app/components/bar/TabBar.js b/app/components/bar/TabBar.js
@@ -19,7 +19,7 @@ const TabBar = ({ state, descriptors, navigation }) => {
   }, [config.query])
 
   return (
-    <View>
+    <>
       {
         !isFullScreen ?
           settings.isDesktop ?
@@ -28,7 +28,7 @@ const TabBar = ({ state, descriptors, navigation }) => {
           : null
       }
       <Player state={state} fullscreen={{ value: isFullScreen, set: setIsFullScreen }} />
-    </View >
+    </>
   );
 }
 

diff --git a/app/components/lists/CustomScroll.js b/app/components/lists/CustomScroll.js
@@ -23,7 +23,7 @@ const CustomScroll = ({ children, data, renderItem, style = { width: '100%' }, c
   }
 
   return (
-    <View>
+    <>
       {settings?.scrollHelper && <View
         style={{
           position: 'absolute',
@@ -66,7 +66,7 @@ const CustomScroll = ({ children, data, renderItem, style = { width: '100%' }, c
         ref={refScroll}
       />
       {children}
-    </View>
+    </>
   )
 }
 

diff --git a/app/components/lists/HorizontalList.js b/app/components/lists/HorizontalList.js
@@ -27,7 +27,7 @@ const HorizontalList = ({ config, title, type, query, refresh, enable }) => {
 		if (config.query) {
 			getList()
 		}
-	}, [config, type, query, enable])
+	}, [config, type, query, enable, settings.listenBrainzUser])
 
 	const getPath = () => {
 		if (type === 'album') return 'getAlbumList'
@@ -60,14 +60,14 @@ const HorizontalList = ({ config, title, type, query, refresh, enable }) => {
 	if (!enable) return null
 	if (!list) return null
 	return (
-		<View>
+		<>
 			<Text style={mainStyles.titleSection(theme)}>{title}</Text>
 			{type === 'album' && <HorizontalAlbums config={config} albums={list} />}
 			{type === 'artist' && <HorizontalArtists config={config} artists={list} />}
 			{type === 'genre' && <HorizontalGenres config={config} genres={list} />}
 			{type === 'radio' && <RadioList config={config} radios={list} />}
 			{type === 'listenbrainz' && <HorizontalLBStat config={config} stats={list} /> }
-		</View>
+		</>
 	)
 }
 

diff --git a/app/components/lists/SongsList.js b/app/components/lists/SongsList.js
@@ -2,13 +2,12 @@ import React from 'react';
 import { Text, View, Image, TouchableOpacity, Platform } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
-import { ConfigContext } from '~/contexts/config';
 import { getCache } from '~/utils/cache';
 import { playSong } from '~/utils/player';
 import { SettingsContext } from '~/contexts/settings';
 import { SongContext } from '~/contexts/song';
 import { ThemeContext } from '~/contexts/theme';
-import { urlCover, getApi } from '~/utils/api';
+import { urlCover, getApi, getApiNetworkFirst } from '~/utils/api';
 import { urlStream } from '~/utils/api';
 import { useNavigation } from '@react-navigation/native';
 import ErrorPopup from '~/components/popup/ErrorPopup';
@@ -114,7 +113,7 @@ const SongsList = ({ config, songs, isIndex = false, listToPlay = null, isMargin
 						name: 'Play similar songs',
 						icon: 'play',
 						onPress: () => {
-							getApi(config, 'getSimilarSongs', `id=${songs[indexOptions].id}&count=50`)
+							getApiNetworkFirst(config, 'getSimilarSongs', `id=${songs[indexOptions].id}&count=50`)
 								.then((json) => {
 									if (!json.similarSongs?.song) {
 										setError('No similar songs found')

diff --git a/app/screens/Artist.js b/app/screens/Artist.js
@@ -6,7 +6,7 @@ import { SongContext } from '~/contexts/song';
 import { ConfigContext } from '~/contexts/config';
 import { ThemeContext } from '~/contexts/theme';
 import { playSong } from '~/utils/player';
-import { getApi, urlCover, useCachedAndApi } from '~/utils/api';
+import { getApi, urlCover, useCachedAndApi, getApiNetworkFirst, getApiCacheFirst } from '~/utils/api';
 import { shuffle } from '~/utils/tools';
 import mainStyles from '~/styles/main';
 import presStyles from '~/styles/pres';
@@ -35,7 +35,7 @@ const Artist = ({ route }) => {
 		if (!artist.album) return
 		if (!allSongs.current.length) {
 			const songsPending = artist.album.map(async album => {
-				return await getApi(config, 'getAlbum', `id=${album.id}`)
+				return await getApiNetworkFirst(config, 'getAlbum', `id=${album.id}`)
 					.then((json) => {
 						return json.album.song
 					})
@@ -47,7 +47,7 @@ const Artist = ({ route }) => {
 	}
 
 	const getSimilarSongs = () => {
-		getApi(config, 'getSimilarSongs', `id=${route.params.artist.id}&count=50`)
+		getApiCacheFirst(config, 'getSimilarSongs', `id=${route.params.artist.id}&count=50`)
 			.then((json) => {
 				const songs = json.similarSongs.song
 				playSong(config, songDispatch, songs, 0)
@@ -56,7 +56,7 @@ const Artist = ({ route }) => {
 	}
 
 	const getTopSongs = () => {
-		getApi(config, 'getTopSongs', { artist: route.params.artist.name, count: 50 })
+		getApiNetworkFirst(config, 'getTopSongs', { artist: route.params.artist.name, count: 50 })
 			.then((json) => {
 				const songs = json.topSongs?.song
 				if (!songs) return

diff --git a/app/screens/Genre.js b/app/screens/Genre.js
@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 import { ConfigContext } from '~/contexts/config';
-import { getApi } from '~/utils/api';
+import { getApiNetworkFirst } from '~/utils/api';
 import { useCachedAndApi } from '~/utils/api';
 import { playSong } from '~/utils/player';
 import { SongContext } from '~/contexts/song';
@@ -31,7 +31,7 @@ const Genre = ({ route }) => {
 	})
 
 	const getRandomSongs = () => {
-		getApi(config, 'getRandomSongs', { genre: route.params.genre.value, count: 50 })
+		getApiNetworkFirst(config, 'getRandomSongs', { genre: route.params.genre.value, count: 50 })
 			.then((json) => {
 				const songs = json.randomSongs?.song
 				if (!songs) return

diff --git a/app/screens/tabs/Home.js b/app/screens/tabs/Home.js
@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SongContext } from '~/contexts/song';
 import { ConfigContext } from '~/contexts/config';
 
-import { getApi } from '~/utils/api';
+import { getApi, getApiNetworkFirst } from '~/utils/api';
 import { playSong } from '~/utils/player';
 import { SettingsContext } from '~/contexts/settings';
 import { ThemeContext } from '~/contexts/theme';
@@ -32,7 +32,7 @@ const Home = () => {
 	};
 
 	const clickRandomSong = () => {
-		getApi(config, 'getRandomSongs', `count=50`)
+		getApiNetworkFirst(config, 'getRandomSongs', `count=50`)
 			.then((json) => {
 				playSong(config, songDispatch, json.randomSongs.song, 0)
 			})

diff --git a/app/screens/tabs/Search.js b/app/screens/tabs/Search.js
@@ -5,7 +5,7 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { ConfigContext } from '~/contexts/config';
-import { getApi } from '~/utils/api';
+import { getApiNetworkFirst } from '~/utils/api';
 import { ThemeContext } from '~/contexts/theme';
 import HorizontalAlbums from '~/components/lists/HorizontalAlbums';
 import HorizontalArtists from '~/components/lists/HorizontalArtists';
@@ -57,7 +57,7 @@ const Search = () => {
 	}
 
 	const getSearch = () => {
-		getApi(config, 'search2', { query })
+		getApiNetworkFirst(config, 'search2', { query })
 			.then((json) => {
 				setResults(json.searchResult2)
 			})
@@ -122,7 +122,7 @@ const Search = () => {
 					}}>No results</Text>
 				) : null}
 				{query.length && results ? (
-					<View>
+					<>
 						{
 							results.artist &&
 							<>
@@ -144,7 +144,7 @@ const Search = () => {
 								<SongsList songs={results.song} config={config} />
 							</>
 						}
-					</View>) : null
+					</>) : null
 				}
 			</ScrollView >
 		</View >

diff --git a/app/services/serviceWorker.js b/app/services/serviceWorker.js
@@ -33,7 +33,7 @@ registerRoute(
 
 registerRoute(
 	({ url }) => {
-		return url.pathname.match(/\/rest\/(getAlbum|getAlbum|getPlaylists|getTopSongs|getRandomSongs|search2)$/)
+		return url.pathname.match(/\/rest\/(getAlbumList|getAlbum|favorited|getAlbum|getStarred|getPlaylists|getArtist|getPlaylist|getTopSongs|getArtistInfo|getRandomSongs|search2)$/)
 	},
 	new NetworkFirst({
 		cacheName: "api",