Add: Header to setting Connect

sawyerf · Dec 28, 2024 · 863fa19 · 863fa19
1 parent 76ab7ee
commit 863fa19
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 45 deletions.
diff --git a/app/components/Header.js b/app/components/Header.js
@@ -4,39 +4,42 @@ import { useNavigation } from '@react-navigation/native'
 import Icon from 'react-native-vector-icons/FontAwesome'
 
 import { ThemeContext } from '~/contexts/theme'
+import IconButton from '~/components/button/IconButton'
 
 const Header = ({ title }) => {
 	const navigation = useNavigation()
 	const theme = React.useContext(ThemeContext)
 
 	return (
-		<View style={{ width: '100%' }}>
-			<Pressable
-				style={({ pressed }) => ({
-					opacity: pressed ? 0.5 : 1,
-					flexDirection: 'row',
-					alignItems: 'center',
-					width: 'min-content',
-					padding: 20,
-				})}
+		<View style={{
+			width: '100%',
+			flexDirection: 'row',
+			alignItems: 'center',
+			height: 70
+		}}>
+			<Text numberOfLines={1}
+				style={{
+					color: theme.primaryLight,
+					fontSize: 20,
+					fontWeight: 'bold',
+					flex: 1,
+					textAlign: 'center',
+				}} >
+				{title}
+			</Text>
+			<IconButton
+				icon="angle-left"
+				size={34}
+				color={theme.primaryLight}
+				style={{
+					position: 'absolute',
+					left: 0,
+					top: 0,
+					paddingHorizontal: 20,
+					height: 70,
+				}}
 				onPress={() => navigation.goBack()}
-			>
-				<Icon
-					name="angle-left"
-					size={34}
-					color={theme.primaryLight}
-					style={{ paddingEnd: 10 }}
-				/>
-				<Text numberOfLines={1}
-					style={{
-						color: theme.primaryLight,
-						fontSize: 24,
-						fontWeight: 'bold',
-						lineHeight: 0,
-					}} >
-					{title}
-				</Text>
-			</Pressable>
+			/>
 		</View >
 	)
 }

diff --git a/app/contexts/theme.js b/app/contexts/theme.js
@@ -106,11 +106,13 @@ export const themes = {
 		playerButton: '#FFFFFF'
 	},
 	lightMode: {
-		primaryDark: '#f6f6ef',
-		secondaryDark: '#eaeae1',
+		primaryDark: '#fdfcfe',
+		secondaryDark: '#f6f2f8',
 		tertiaryDark: '#dcdcd4',
-		primaryLight: '#1c1c1c',
-		secondaryLight: '#848484',
+
+		primaryLight: '#040208',
+		secondaryLight: '#a09fa0',
+
 		primaryTouch: '#cd1921',
 		secondaryTouch: '#891116',
 		innerTouch: '#f6f6ef',

diff --git a/app/screens/Settings/Cache.js b/app/screens/Settings/Cache.js
@@ -47,7 +47,7 @@ const CacheSettings = () => {
 	}, [cacheNextSong])
 
 	return (
-		<ScrollView style={{ ...mainStyles.mainContainer(insets, theme) }}>
+		<ScrollView style={mainStyles.mainContainer(insets, theme)}>
 			<Header title="Cache" />
 			<View style={{ ...settingStyles.contentMainContainer(insets), marginTop: 30 }}>
 				<Text style={settingStyles.titleContainer(theme)}>Auto Cache</Text >

diff --git a/app/screens/Settings/Connect.js b/app/screens/Settings/Connect.js
@@ -30,6 +30,7 @@ const Connect = ({ navigation }) => {
 	const setSettings = React.useContext(SetSettingsContext)
 	const theme = React.useContext(ThemeContext)
 	const [serverOption, setServerOption] = React.useState(null)
+	const [info, setInfo] = React.useState(null)
 
 	React.useEffect(() => {
 		if (config?.name?.length) setName(config.name)
@@ -44,6 +45,16 @@ const Connect = ({ navigation }) => {
 		setConfig(conf)
 	}
 
+	React.useEffect(() => {
+		if (!config?.url) return
+		setError('')
+		getApi({ url: config.url, query: config.query }, 'ping.view')
+			.then((json) => {
+				if (json?.status == 'ok') setInfo(json)
+			})
+			.catch((error) => { })
+	}, [config])
+
 	const connect = () => {
 		const uri = url.replace(/\/$/, '')
 		setUrl(uri)
@@ -57,6 +68,7 @@ const Connect = ({ navigation }) => {
 		getApi({ url: uri, query }, 'ping.view')
 			.then((json) => {
 				if (json?.status == 'ok') {
+					setInfo(json)
 					const conf = { name, url: uri, username, query }
 					upConfig(conf)
 					setError('')
@@ -76,19 +88,33 @@ const Connect = ({ navigation }) => {
 	return (
 		<ScrollView style={mainStyles.mainContainer(insets, theme)} >
 			<Header title="Connect" />
-			<View style={settingStyles.contentMainContainer(insets)}>
-				<View
-					style={{
-						flexDirection: 'row',
-						justifyContent: 'center',
-						width: '100%',
-						minHeight: 60,
-						alignItems: 'center',
-					}}
-				>
-					<Text style={{ color: theme.primaryTouch, paddingBottom: 20 }} color={theme.primaryLight}>{error}</Text>
-				</View>
+			<View style={{...settingStyles.contentMainContainer(insets), marginTop: 30}}>
 				<View style={settingStyles.optionsContainer(theme)}>
+					<View style={{ flexDirection: 'column', alignItems: 'center', width: '100%', minHeight: 60, marginTop: 20, paddingBottom: 20 }}>
+						<View
+							style={{
+								aspectRatio: 1,
+								backgroundColor: theme.primaryTouch,
+								borderRadius: 5,
+								alignItems: 'center',
+								justifyContent: 'center',
+								padding: 10,
+							}}>
+							<Icon name="server" size={30} color={theme.innerTouch} />
+						</View>
+						<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 10 }}>
+							{!error.length && <Icon name="circle" size={10} color={info ? 'green' : 'red'} />}
+							<Text style={{ color: error.length ? theme.primaryTouch : theme.primaryLight, fontSize: 16, marginStart: 5 }}>
+								{(() => {
+									if (error.length) return error
+									else if (info) return `${info.type.charAt(0).toUpperCase()}${info.type.slice(1)} ${info.serverVersion}`
+									else return 'Not connected'
+								})()}
+							</Text>
+						</View>
+					</View>
+				</View>
+				<View style={{...settingStyles.optionsContainer(theme), marginBottom: 10}}>
 					<OptionInput
 						title="Name"
 						placeholder="Name"

diff --git a/app/screens/Settings/Theme.js b/app/screens/Settings/Theme.js
@@ -22,7 +22,7 @@ const Theme = ({ navigation }) => {
 	return (
 		<ScrollView style={mainStyles.mainContainer(insets, theme)} >
 			<Header title="Theme" />
-			<View style={settingStyles.contentMainContainer(insets)}>
+			<View style={{ ...settingStyles.contentMainContainer(insets), marginTop: 30 }}>
 				<Text style={settingStyles.titleContainer(theme)}>Theme</Text>
 				<View style={settingStyles.optionsContainer(theme)}>
 					{

diff --git a/app/styles/settings.js b/app/styles/settings.js
@@ -45,5 +45,4 @@ export default {
 		borderBottomWidth: isLast ? 0 : .5,
 		flexDirection: 'row',
 	}),
-
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,5 +45,4 @@ export default { @@
     		borderBottomWidth: isLast ? 0 : .5,
     		flexDirection: 'row',
     	}),
     }