Fix: HomeSetting scroll & tuktuktuk sideBar & Clear cache & CustomFla…

…t ViewOffset
sawyerf · Feb 7, 2025 · cea263d · cea263d
1 parent 5e7efee
commit cea263d
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 30 deletions.
diff --git a/app/components/bar/SideBar.js b/app/components/bar/SideBar.js
@@ -5,7 +5,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ConfigContext } from '~/contexts/config'
 import { ThemeContext } from '~/contexts/theme'
-import Player from '~/utils/player'
 import pkg from '~/../package.json'
 import size from '~/styles/size'
 import mainStyles from '~/styles/main'
@@ -17,8 +16,7 @@ const SideBar = ({ state, descriptors, navigation }) => {
 
 	return (
 		<View style={styles.container(insets, theme)}>
-			<Pressable
-				onPress={Player.tuktuktuk}
+			<View
 				style={{
 					flexDirection: 'row',
 					alignItems: 'center',
@@ -35,7 +33,7 @@ const SideBar = ({ state, descriptors, navigation }) => {
 					<Text style={{ color: theme.primaryLight, fontSize: size.text.large, marginBottom: 0 }}>Castafiore</Text>
 					<Text style={{ color: theme.secondaryLight, fontSize: size.text.small }}>Version {pkg.version}</Text>
 				</View>
-			</Pressable>
+			</View>
 			{state.routes.map((route, index) => {
 				const options = React.useMemo(() => descriptors[route.key].options, [])
 				const isFocused = React.useMemo(() => state.index === index, [state.index, index])

diff --git a/app/components/lists/CustomFlat.js b/app/components/lists/CustomFlat.js
@@ -15,13 +15,13 @@ const CustomScroll = ({ data, renderItem, style = { width: '100%' }, contentCont
 	const goRight = () => {
 		if (indexScroll.current + 3 >= data.length) indexScroll.current = data.length - 1
 		else indexScroll.current = indexScroll.current + 3
-		refScroll.current.scrollToIndex({ index: indexScroll.current, animated: true, viewOffset: 10 })
+		refScroll.current.scrollToIndex({ index: indexScroll.current, animated: true, viewOffset: 20 })
 	}
 
 	const goLeft = () => {
 		if (indexScroll.current < 3) indexScroll.current = 0
 		else indexScroll.current = indexScroll.current - 3
-		refScroll.current.scrollToIndex({ index: indexScroll.current, animated: true, viewOffset: 10 })
+		refScroll.current.scrollToIndex({ index: indexScroll.current, animated: true, viewOffset: 20 })
 	}
 
 	// View is necessary to show the scroll helper
@@ -35,7 +35,7 @@ const CustomScroll = ({ data, renderItem, style = { width: '100%' }, contentCont
 			<FlatList
 				ref={refScroll}
 				data={data}
-				keyExtractor={(_, index) => index}
+				keyExtractor={(item, index) => `${item.id}-${index}`}
 				renderItem={renderItem}
 				horizontal={true}
 				style={style}

diff --git a/app/components/lists/HorizontalAlbums.js b/app/components/lists/HorizontalAlbums.js
@@ -24,7 +24,6 @@ const HorizontalAlbums = ({ albums, year = false, onPress = () => { } }) => {
 				renderItem={({ item, index }) => (
 					<Pressable
 						style={({ pressed }) => ([mainStyles.opacity({ pressed }), styles.album])}
-						key={item.id}
 						onLongPress={() => setIndexOptions(index)}
 						delayLongPress={200}
 						onPress={() => {

diff --git a/app/components/lists/HorizontalArtists.js b/app/components/lists/HorizontalArtists.js
@@ -24,7 +24,6 @@ const HorizontalArtists = ({ artists, onPress = () => { } }) => {
 				data={artists}
 				renderItem={({ item, index }) => (
 					<Pressable
-						key={item.id}
 						style={({ pressed }) => ([mainStyles.opacity({ pressed }), styles.artist])}
 						onPress={() => {
 							onPress(item)

diff --git a/app/components/lists/HorizontalGenres.js b/app/components/lists/HorizontalGenres.js
@@ -19,7 +19,6 @@ const HorizontalGenres = ({ genres }) => {
 			renderItem={({ item }) => (
 				<Pressable
 					style={({ pressed }) => ([mainStyles.opacity({ pressed }), styles.genreBox(theme)])}
-					key={item?.value}
 					onPress={() => navigation.navigate('Genre', { genre: item })}>
 					<Text numberOfLines={1} style={styles.genreText(theme)}>{item.value}</Text>
 				</Pressable>

diff --git a/app/components/settings/HomeOrder.js b/app/components/settings/HomeOrder.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, PanResponder, Animated } from 'react-native';
+import { View, Text, PanResponder, Animated, Pressable } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 import { SettingsContext, SetSettingsContext } from '~/contexts/settings';
@@ -72,22 +72,32 @@ const HomeOrder = () => {
 									transform: [{ translateY: position }]
 								}
 							]}
-							{...panResponder.panHandlers}
 						>
-							<Icon
-								name={value.icon}
-								size={18}
-								color={value.enable ? theme.primaryTouch : theme.secondaryLight}
-								style={{ marginEnd: 10 }}
-							/>
-							<Text key={index} style={{ color: value.enable ? theme.primaryTouch : theme.secondaryLight, flex: 1 }}>{value.title}</Text>
-							<Icon
-								name="bars"
-								size={18}
-								color={theme.secondaryLight}
-								style={{ marginEnd: 10 }}
-							/>
-						</Animated.View>
+							<Pressable
+								onPress={() => onPressHomeOrder(index)}
+								style={{ flex: 1, height: '100%', flexDirection: 'row', alignItems: 'center' }}
+							>
+								<View style={{ width: 22, marginEnd: 10, alignItems: 'center' }}>
+									<Icon
+										name={value.icon}
+										size={18}
+										color={value.enable ? theme.primaryTouch : theme.secondaryLight}
+									/>
+								</View>
+								<Text key={index} style={{ color: value.enable ? theme.primaryTouch : theme.secondaryLight, flex: 1 }}>{value.title}</Text>
+							</Pressable>
+							<View
+								style={{ height: '100%', justifyContent: 'center' }}
+								{...panResponder.panHandlers}
+							>
+								<Icon
+									name="bars"
+									size={18}
+									color={theme.secondaryLight}
+									style={{ marginEnd: 10 }}
+								/>
+							</View>
+						</Animated.View >
 					)
 				})
 			}

diff --git a/app/screens/Settings/Informations.js b/app/screens/Settings/Informations.js
@@ -92,7 +92,7 @@ const InformationsSettings = () => {
 						value={convertDate(scan.lastScan)}
 					/>
 					<TableItem
-						title={'Folder Scanned'}
+						title={'Folders Scanned'}
 						value={scan.folderCount}
 					/>
 					<TableItem

diff --git a/app/screens/tabs/Settings.js b/app/screens/tabs/Settings.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import pkg from '~/../package.json';
-import { Text, View, Image, ScrollView, Pressable } from 'react-native';
+import { Text, View, Image, ScrollView, Pressable, Linking } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ConfigContext } from '~/contexts/config';
@@ -103,6 +103,11 @@ const Settings = ({ navigation }) => {
 					title="Informations"
 					icon="info"
 					onPress={() => navigation.navigate('Settings/Informations')}
+				/>
+				<ButtonMenu
+					title="Github"
+					icon="github"
+					onPress={() => Linking.openURL('https://github.com/sawyerf/Castafiore')}
 					isLast={true}
 				/>
 			</View>
@@ -115,12 +120,16 @@ const Settings = ({ navigation }) => {
 						confirmAlert(
 							'Reset Settings',
 							'Are you sure you want to reset all settings?',
-							() => setSettings(defaultSettings)
+							() => setSettings({
+								...defaultSettings,
+								servers: setting.servers
+							})
 						)
 					}}
 					isLast={true}
 				/>
 			</View>
+
 		</ScrollView>
 	)
 }

diff --git a/app/utils/cache.web.js b/app/utils/cache.web.js
@@ -5,7 +5,13 @@ export const getCache = async (cacheName, key) => {
 }
 
 export const clearCache = async () => {
-	const keys = await window.caches.keys()
+	const keys = [
+		'api',
+		'coverArt',
+		'images',
+		'lyrics',
+		'song',
+	]
 	keys.forEach(async (key) => {
 		await window.caches.delete(key)
 	})