mirror of
https://github.com/austinried/subtracks.git
synced 2026-02-10 15:02:42 +01:00
real settings view impl
server management mostly working changing active server needs work
This commit is contained in:
austinried
@@ -29,7 +29,6 @@ import dimensions from '@app/styles/dimensions'
|
||||
import { NativeStackScreenProps } from 'react-native-screens/native-stack'
|
||||
import { useFocusEffect } from '@react-navigation/native'
|
||||
|
||||
// eslint-disable-next-line no-spaced-func
|
||||
const NowPlayingHeader = React.memo<{
|
||||
backHandler: () => void
|
||||
}>(({ backHandler }) => {
|
||||
|
||||
201
app/screens/ServerView.tsx
Normal file
201
app/screens/ServerView.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import Button from '@app/components/Button'
|
||||
import GradientScrollView from '@app/components/GradientScrollView'
|
||||
import SettingsItem from '@app/components/SettingsItem'
|
||||
import { Server } from '@app/models/settings'
|
||||
import { activeServerAtom, serversAtom } from '@app/state/settings'
|
||||
import colors from '@app/styles/colors'
|
||||
import font from '@app/styles/font'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { useAtom } from 'jotai'
|
||||
import md5 from 'md5'
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { StyleSheet, Text, TextInput, View } from 'react-native'
|
||||
import { Switch } from 'react-native-gesture-handler'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
|
||||
function replaceIndex<T>(array: T[], index: number, replacement: T): T[] {
|
||||
const start = array.slice(0, index)
|
||||
const end = array.slice(index + 1)
|
||||
return [...start, replacement, ...end]
|
||||
}
|
||||
|
||||
const ServerView: React.FC<{
|
||||
id?: string
|
||||
}> = ({ id }) => {
|
||||
const navigation = useNavigation()
|
||||
const [activeServer, setActiveServer] = useAtom(activeServerAtom)
|
||||
const [servers, setServers] = useAtom(serversAtom)
|
||||
const server = id ? servers.find(s => s.id === id) : undefined
|
||||
|
||||
const [address, setAddress] = useState(server?.address || '')
|
||||
const [username, setUsername] = useState(server?.username || '')
|
||||
const [password, setPassword] = useState(server?.token ? 'password' : '')
|
||||
|
||||
const validate = useCallback(() => {
|
||||
return !!address && !!username && !!password
|
||||
}, [address, username, password])
|
||||
|
||||
const canRemove = useCallback(() => {
|
||||
return id && servers.length > 1 && activeServer?.id !== id
|
||||
}, [id, servers, activeServer])
|
||||
|
||||
const exit = useCallback(() => {
|
||||
if (navigation.canGoBack()) {
|
||||
navigation.goBack()
|
||||
} else {
|
||||
navigation.navigate('main')
|
||||
}
|
||||
}, [navigation])
|
||||
|
||||
const save = () => {
|
||||
if (!validate()) {
|
||||
return
|
||||
}
|
||||
|
||||
const salt = server?.salt || uuidv4()
|
||||
let token: string
|
||||
if (password === 'password' && server?.token) {
|
||||
token = server.token
|
||||
} else {
|
||||
token = md5(password + salt)
|
||||
}
|
||||
|
||||
const update: Server = {
|
||||
id: server?.id || uuidv4(),
|
||||
address,
|
||||
username,
|
||||
salt,
|
||||
token,
|
||||
}
|
||||
|
||||
if (server) {
|
||||
setServers(
|
||||
replaceIndex(
|
||||
servers,
|
||||
servers.findIndex(s => s.id === id),
|
||||
update,
|
||||
),
|
||||
)
|
||||
} else {
|
||||
setServers([...servers, update])
|
||||
}
|
||||
|
||||
if (!activeServer) {
|
||||
setActiveServer(update.id)
|
||||
}
|
||||
|
||||
exit()
|
||||
}
|
||||
|
||||
const remove = useCallback(() => {
|
||||
if (!canRemove()) {
|
||||
return
|
||||
}
|
||||
|
||||
const update = [...servers]
|
||||
update.splice(
|
||||
update.findIndex(s => s.id === id),
|
||||
1,
|
||||
)
|
||||
|
||||
setServers(update)
|
||||
exit()
|
||||
}, [canRemove, exit, id, servers, setServers])
|
||||
|
||||
return (
|
||||
<GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
|
||||
<View style={styles.content}>
|
||||
<Text style={styles.inputTitle}>Address</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor="grey"
|
||||
selectionColor={colors.text.secondary}
|
||||
textContentType="URL"
|
||||
placeholder="Address"
|
||||
value={address}
|
||||
onChangeText={setAddress}
|
||||
/>
|
||||
<Text style={styles.inputTitle}>Username</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor="grey"
|
||||
selectionColor={colors.text.secondary}
|
||||
textContentType="username"
|
||||
autoCompleteType="username"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
/>
|
||||
<Text style={styles.inputTitle}>Password</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholderTextColor="grey"
|
||||
selectionColor={colors.text.secondary}
|
||||
textContentType="password"
|
||||
autoCompleteType="password"
|
||||
secureTextEntry={true}
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
/>
|
||||
<SettingsItem title="Scrobble" subtitle="Don't scrobble play history">
|
||||
<Switch
|
||||
trackColor={{
|
||||
false: colors.accentLow,
|
||||
true: colors.accent,
|
||||
}}
|
||||
thumbColor={colors.text.primary}
|
||||
value={false}
|
||||
/>
|
||||
</SettingsItem>
|
||||
<Button
|
||||
disabled={!validate()}
|
||||
style={styles.button}
|
||||
title="Test Connection"
|
||||
buttonStyle="hollow"
|
||||
onPress={() => {}}
|
||||
/>
|
||||
<Button
|
||||
style={[styles.button, styles.delete, { display: canRemove() ? 'flex' : 'none' }]}
|
||||
title="Delete"
|
||||
onPress={remove}
|
||||
/>
|
||||
<Button disabled={!validate()} style={styles.button} title="Save" onPress={save} />
|
||||
</View>
|
||||
</GradientScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scroll: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContentContainer: {
|
||||
// paddingTop: StatusBar.currentHeight,
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
inputTitle: {
|
||||
fontFamily: font.semiBold,
|
||||
fontSize: 16,
|
||||
color: colors.text.primary,
|
||||
marginTop: 10,
|
||||
},
|
||||
input: {
|
||||
borderBottomWidth: 1.5,
|
||||
borderColor: colors.text.primary,
|
||||
fontFamily: font.regular,
|
||||
fontSize: 16,
|
||||
color: colors.text.primary,
|
||||
marginBottom: 26,
|
||||
},
|
||||
button: {
|
||||
marginTop: 16,
|
||||
},
|
||||
delete: {
|
||||
backgroundColor: 'red',
|
||||
},
|
||||
})
|
||||
|
||||
export default ServerView
|
||||
@@ -1,82 +1,93 @@
|
||||
import Button from '@app/components/Button'
|
||||
import GradientScrollView from '@app/components/GradientScrollView'
|
||||
import Header from '@app/components/Header'
|
||||
import PressableOpacity from '@app/components/PressableOpacity'
|
||||
import SettingsItem from '@app/components/SettingsItem'
|
||||
import { Server } from '@app/models/settings'
|
||||
import { activeServerAtom, appSettingsAtom } from '@app/state/settings'
|
||||
import colors from '@app/styles/colors'
|
||||
import { useNavigation } from '@react-navigation/core'
|
||||
import { useAtom } from 'jotai'
|
||||
import md5 from 'md5'
|
||||
import React from 'react'
|
||||
import { Button, StyleSheet, Text, View } from 'react-native'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { appSettingsAtom } from '@app/state/settings'
|
||||
import { getAllKeys, multiRemove } from '@app/storage/asyncstorage'
|
||||
import { useAtomValue } from 'jotai/utils'
|
||||
import React, { useCallback } from 'react'
|
||||
import { StatusBar, StyleSheet, View } from 'react-native'
|
||||
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
|
||||
|
||||
const TestControls = () => {
|
||||
const ServerItem = React.memo<{
|
||||
server: Server
|
||||
}>(({ server }) => {
|
||||
const [activeServer, setActiveServer] = useAtom(activeServerAtom)
|
||||
const navigation = useNavigation()
|
||||
|
||||
const removeAllKeys = async () => {
|
||||
const allKeys = await getAllKeys()
|
||||
await multiRemove(allKeys)
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Button title="Remove all keys" onPress={removeAllKeys} />
|
||||
<Button title="Now Playing" onPress={() => navigation.navigate('now-playing')} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ServerSettingsView = () => {
|
||||
const [appSettings, setAppSettings] = useAtom(appSettingsAtom)
|
||||
|
||||
const bootstrapServer = () => {
|
||||
if (appSettings.servers.length !== 0) {
|
||||
const setActive = useCallback(() => {
|
||||
if (activeServer?.id === server.id) {
|
||||
return
|
||||
}
|
||||
|
||||
const id = uuidv4()
|
||||
const salt = uuidv4()
|
||||
const address = 'http://demo.subsonic.org'
|
||||
|
||||
setAppSettings({
|
||||
...appSettings,
|
||||
servers: [
|
||||
...appSettings.servers,
|
||||
{
|
||||
id,
|
||||
salt,
|
||||
address,
|
||||
username: 'guest',
|
||||
token: md5('guest' + salt),
|
||||
},
|
||||
],
|
||||
activeServer: id,
|
||||
})
|
||||
}
|
||||
setActiveServer(server.id)
|
||||
}, [activeServer?.id, server.id, setActiveServer])
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Button title="Add default server" onPress={bootstrapServer} />
|
||||
{appSettings.servers.map(s => (
|
||||
<View key={s.id}>
|
||||
<Text style={styles.text}>{s.address}</Text>
|
||||
<Text style={styles.text}>{s.username}</Text>
|
||||
</View>
|
||||
<SettingsItem
|
||||
title={server.address}
|
||||
subtitle={server.username}
|
||||
onPress={() => navigation.navigate('server', { id: server.id })}>
|
||||
<PressableOpacity style={styles.serverActive} onPress={setActive}>
|
||||
{activeServer && activeServer.id === server.id ? (
|
||||
<Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
|
||||
) : (
|
||||
<Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
|
||||
)}
|
||||
</PressableOpacity>
|
||||
</SettingsItem>
|
||||
)
|
||||
})
|
||||
|
||||
const SettingsContent = React.memo(() => {
|
||||
const settings = useAtomValue(appSettingsAtom)
|
||||
const navigation = useNavigation()
|
||||
|
||||
return (
|
||||
<View style={styles.content}>
|
||||
<Header>Servers</Header>
|
||||
{settings.servers.map(s => (
|
||||
<ServerItem key={s.id} server={s} />
|
||||
))}
|
||||
<Button title="Add Server" onPress={() => navigation.navigate('server')} buttonStyle="hollow" />
|
||||
<Header>Network</Header>
|
||||
<SettingsItem title="Max bitrate (Wi-Fi)" subtitle="Unlimited" />
|
||||
<SettingsItem title="Max bitrate (mobile)" subtitle="192kbps" />
|
||||
<Header>Reset</Header>
|
||||
<Button title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
|
||||
<React.Suspense fallback={() => <></>}>
|
||||
<SettingsContent />
|
||||
</React.Suspense>
|
||||
</GradientScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
const SettingsView = () => (
|
||||
<View>
|
||||
<TestControls />
|
||||
<React.Suspense fallback={<Text>Loading...</Text>}>
|
||||
<ServerSettingsView />
|
||||
</React.Suspense>
|
||||
</View>
|
||||
)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scroll: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContentContainer: {
|
||||
paddingTop: StatusBar.currentHeight,
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
text: {
|
||||
color: 'white',
|
||||
},
|
||||
serverActive: {
|
||||
paddingLeft: 12,
|
||||
},
|
||||
})
|
||||
|
||||
export default SettingsView
|
||||
export default Settings
|
||||
|
||||
Reference in New Issue
Block a user