Up: HomeOrder

sawyerf · Jan 24, 2025 · fefff7d · fefff7d
1 parent c435288
commit fefff7d
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 48 deletions.
diff --git a/app.json b/app.json
@@ -4,7 +4,7 @@
     "slug": "Castafiore",
     "description": "Mobile app for navidrome",
     "version": "2025.01.23",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "assetBundlePatterns": [

diff --git a/app/components/player/FullScreenHorizontalPlayer.js b/app/components/player/FullScreenHorizontalPlayer.js
@@ -51,13 +51,15 @@ const FullScreenHorizontalPlayer = ({ setFullScreen }) => {
 		<Modal
 			visible={true}
 			transparent={true}
+			onRequestClose={() => setFullScreen(false)}
 		>
 			<Image
 				source={{ uri: urlCover(config, song?.songInfo?.albumId) }}
 				style={styles.backgroundImage}
 				blurRadius={5}
 			/>
 			<View style={{
+				flex: 1,
 				width: '100%',
 				height: '100%',
 				backgroundColor: 'rgba(0, 0, 0, 0.6)',
@@ -248,11 +250,14 @@ const FullScreenHorizontalPlayer = ({ setFullScreen }) => {
 
 const styles = StyleSheet.create({
 	backgroundImage: {
+		flex: 1,
 		width: '100%',
 		height: '100%',
 		position: 'absolute',
 		top: 0,
 		left: 0,
+		bottom: 0,
+		right: 0,
 		zIndex: -1,
 		backgroundColor: '#000',
 	},

diff --git a/app/components/settings/HomeOrder.js b/app/components/settings/HomeOrder.js
@@ -1,73 +1,95 @@
 import React from 'react';
-import { Pressable, Text } from 'react-native';
+import { Text, PanResponder, Animated } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 import { SettingsContext, SetSettingsContext } from '~/contexts/settings';
 import { ThemeContext } from '~/contexts/theme';
-import IconButton from '~/components/button/IconButton';
-import mainStyles from '~/styles/main';
 import settingStyles from '~/styles/settings';
-import size from '~/styles/size';
 
 const HomeOrder = () => {
 	const settings = React.useContext(SettingsContext)
 	const setSettings = React.useContext(SetSettingsContext)
 	const theme = React.useContext(ThemeContext)
 
-	const moveTop = (index) => () => {
-		if (index == 0) return
+	const moveElement = (index, direction) => {
+		let newIndex = index + direction
+		if (newIndex < 0) newIndex = 0
+		if (newIndex >= settings.homeOrder.length) newIndex = settings.homeOrder.length - 1
+		if (index === newIndex) return
 		const newHomeOrder = [...settings.homeOrder]
-		const temp = newHomeOrder[index]
-		newHomeOrder[index] = newHomeOrder[index - 1]
-		newHomeOrder[index - 1] = temp
+		if (direction > 0) {
+			newHomeOrder.splice(newIndex + 1, 0, newHomeOrder[index])
+			newHomeOrder.splice(index, 1)
+		} else {
+			newHomeOrder.splice(index, 1)
+			newHomeOrder.splice(newIndex, 0, settings.homeOrder[index])
+		}
 		setSettings({ ...settings, homeOrder: newHomeOrder })
 	}
 
-	const moveBottom = (index) => () => {
-		if (index == settings.homeOrder.length - 1) return
-		const newHomeOrder = [...settings.homeOrder]
-		const temp = newHomeOrder[index]
-		newHomeOrder[index] = newHomeOrder[index + 1]
-		newHomeOrder[index + 1] = temp
-		setSettings({ ...settings, homeOrder: newHomeOrder })
-	}
-	const onPressHomeOrder = (index) => () => {
+
+	const onPressHomeOrder = (index) => {
 		const newHomeOrder = [...settings.homeOrder]
 		newHomeOrder[index].enable = !newHomeOrder[index].enable
 		setSettings({ ...settings, homeOrder: newHomeOrder })
 	}
+
 	return (
 		<>
 			{
-				settings.homeOrder.map((value, index) => (
-					<Pressable
-						key={index}
-						style={({ pressed }) => ([mainStyles.opacity({ pressed }), settingStyles.optionItem(theme, index == settings.homeOrder.length - 1)])}
-						onPress={onPressHomeOrder(index)}
-					>
-						<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>
-						<IconButton
-							icon="angle-up"
-							size={size.icon.large}
-							color={theme.primaryLight}
-							style={{ paddingHorizontal: 7 }}
-							onPress={moveTop(index)}
-						/>
-						<IconButton
-							icon="angle-down"
-							size={size.icon.large}
-							color={theme.primaryLight}
-							style={{ paddingHorizontal: 7 }}
-							onPress={moveBottom(index)}
-						/>
-					</Pressable>
-				))
+				settings.homeOrder.map((value, index) => {
+					const startMove = React.useRef(0)
+					const position = React.useRef(new Animated.Value(0)).current
+					const panResponder = PanResponder.create({
+						onStartShouldSetPanResponder: () => true,
+						onMoveShouldSetPanResponder: () => true,
+						onPanResponderGrant: (_, gestureState) => {
+							startMove.current = gestureState.y0
+							position.setValue(0)
+						},
+						onPanResponderMove: (_, gestureState) => {
+							const move = gestureState.moveY - startMove.current
+							position.setValue(move)
+						},
+						onPanResponderRelease: () => {
+							if (position._value === 0) {
+								onPressHomeOrder(index)
+							}
+							moveElement(index, Math.round(position._value / 50))
+							position.setValue(0)
+							startMove.current = 0
+						}
+					})
+
+					return (
+						<Animated.View
+							key={index}
+							style={[
+								settingStyles.optionItem(theme, index == settings.homeOrder.length - 1),
+								{
+									touchAction: 'none',
+									cursor: 'pointer',
+									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>
+					)
+				})
 			}
 		</>
 	)