Fix: design & UpdateRadio & Fullscreen back & Wrong titles && Add: co…

…nfirm
sawyerf · Dec 26, 2024 · 992a7b6 · 992a7b6
1 parent 3162013
commit 992a7b6
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 110 deletions.
diff --git a/app/components/Header.js b/app/components/Header.js
@@ -2,8 +2,9 @@ import React from 'react'
 import { View, Text } from 'react-native'
 import { useNavigation } from '@react-navigation/native'
 import IconButton from '~/components/button/IconButton'
-import presStyles from '~/styles/pres'
+
 import { ThemeContext } from '~/contexts/theme'
+import mainStyles from '~/styles/main'
 
 const Header = ({ title }) => {
 	const navigation = useNavigation()
@@ -14,15 +15,16 @@ const Header = ({ title }) => {
 			style={{
 				flexDirection: 'row',
 				width: '100%',
+				alignItems: 'center',
 			}} >
 			<IconButton
 				icon="chevron-left"
 				size={23}
 				color={theme.primaryLight}
-				style={{ padding: 20, alignItems: 'center' }}
+				style={{ padding: 20, paddingEnd: 15, alignItems: 'center' }}
 				onPress={() => navigation.goBack()}
 			/>
-			<Text style={{ ...presStyles.title(theme), marginStart: 0, width: undefined }}>{title}</Text>
+			<Text style={{ ...mainStyles.mainTitle(theme), margin: undefined, marginTop: undefined }}>{title}</Text>
 		</View>
 	)
 }

diff --git a/app/components/lists/VerticalPlaylist.js b/app/components/lists/VerticalPlaylist.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, Image, TouchableOpacity } from 'react-native';
+import { Text, View, Image, TouchableOpacity, Alert, Platform } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
@@ -83,7 +83,20 @@ const VerticalPlaylist = ({ config, playlists }) => {
 						name: 'Delete Playlist',
 						icon: 'trash',
 						onPress: () => {
-							deletePlaylist(playlists[indexOption].id)
+							if (Platform.OS === 'web') {
+								const result = window.confirm(`Are you sure you want to delete playlist: '${playlists[indexOption].name}' ?`)
+								if (result) deletePlaylist(playlists[indexOption].id)
+								else setIndexOption(-1)
+							} else {
+								Alert.alert(
+									'Delete Playlist',
+									`Are you sure you want to delete playlist: '${playlists[indexOption].name}' ?`,
+									[
+										{ text: 'Cancel', onPress: () => setIndexOption(-1), style: 'cancel' },
+										{ text: 'OK', onPress: () => deletePlaylist(playlists[indexOption].id) }
+									]
+								)
+							}
 						}
 					}
 				]}

diff --git a/app/components/player/FullScreenPlayer.js b/app/components/player/FullScreenPlayer.js
@@ -81,6 +81,7 @@ const FullScreenPlayer = ({ fullscreen, time }) => {
 	return (
 		<Modal
 			statusBarTranslucent={true}
+			onRequestClose={() => fullscreen.set(false)}
 		>
 			<View
 				style={{

diff --git a/app/components/settings/ButtonText.js b/app/components/settings/ButtonText.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import { View, Text, Pressable } from 'react-native'
+
+import { ThemeContext } from '~/contexts/theme'
+
+const ButtonText = ({ text, onPress, disabled = false }) => {
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <View style={styles.main}>
+      <Pressable
+        style={styles.button}
+        onPress={onPress}
+        disabled={disabled}
+      >
+        <Text style={styles.text(theme)}>{text}</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = {
+  main: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: '100%',
+    marginBottom: 20
+  },
+  button: ({ pressed }) => ({
+    opacity: pressed ? 0.5 : 1,
+    width: '100%',
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+  }),
+  text: theme => ({
+    color: theme.primaryTouch,
+    fontSize: 17
+  })
+}
+
+export default ButtonText
diff --git a/app/screens/Genre.js b/app/screens/Genre.js
@@ -55,12 +55,12 @@ const Genre = ({ route }) => {
 
 	return (
 		<ScrollView
+			contentContainerStyle={mainStyles.contentMainContainer(insets)}
 			vertical={true}
 			style={{
 				...mainStyles.mainContainer(insets, theme),
 				paddingTop: 0,
-			}}
-			contentContainerStyle={mainStyles.contentMainContainer(insets)}>
+			}}>
 			<BackButton />
 			<View
 				style={styles.cover}

diff --git a/app/screens/Settings/Connect.js b/app/screens/Settings/Connect.js
@@ -14,6 +14,7 @@ import mainStyles from '~/styles/main';
 import OptionInput from '~/components/settings/OptionInput';
 import OptionsPopup from '~/components/popup/OptionsPopup';
 import settingStyles from '~/styles/settings';
+import ButtonText from '~/components/settings/ButtonText';
 
 const Connect = ({ navigation }) => {
 	const insets = useSafeAreaInsets()
@@ -26,7 +27,7 @@ const Connect = ({ navigation }) => {
 	const setConfig = React.useContext(SetConfigContext)
 	const settings = React.useContext(SettingsContext)
 	const setSettings = React.useContext(SetSettingsContext)
-  const theme = React.useContext(ThemeContext)
+	const theme = React.useContext(ThemeContext)
 	const [serverOption, setServerOption] = React.useState(null)
 
 	React.useEffect(() => {
@@ -88,15 +89,13 @@ const Connect = ({ navigation }) => {
 				</View>
 				<View style={settingStyles.optionsContainer(theme)}>
 					<OptionInput
-						style={mainStyles.inputSetting(theme)}
 						title="Name"
 						placeholder="Name"
 						value={name}
 						placeholderTextColor={theme.primaryLight}
 						onChangeText={name => setName(name)}
 					/>
 					<OptionInput
-						style={mainStyles.inputSetting(theme)}
 						title="Url"
 						placeholder="Server Url"
 						value={url}
@@ -105,7 +104,6 @@ const Connect = ({ navigation }) => {
 						onChangeText={url => setUrl(url)}
 					/>
 					<OptionInput
-						style={mainStyles.inputSetting(theme)}
 						title="Username"
 						placeholder="Username"
 						value={username}
@@ -115,7 +113,6 @@ const Connect = ({ navigation }) => {
 						autoComplete="username"
 					/>
 					<OptionInput
-						style={mainStyles.inputSetting(theme)}
 						title="Password"
 						placeholder="Password"
 						value={password}
@@ -127,15 +124,10 @@ const Connect = ({ navigation }) => {
 						isLast={true}
 					/>
 				</View>
-				<View style={{ flexDirection: 'row', justifyContent: 'center', width: '100%', marginBottom: 20 }}>
-					<TouchableOpacity
-						style={styles.loginBtn}
-						onPress={connect}
-					>
-						<Text style={{ color: theme.primaryTouch, fontSize: 17 }}>Connect</Text>
-					</TouchableOpacity>
-				</View>
-
+				<ButtonText
+					text="Connect"
+					onPress={connect}
+				/>
 				<Text style={settingStyles.titleContainer(theme)}>List of servers</Text>
 				<View style={settingStyles.optionsContainer(theme)}>
 					{

diff --git a/app/screens/Settings/Playlists.js b/app/screens/Settings/Playlists.js
@@ -48,7 +48,7 @@ const CacheSettings = () => {
 
 	return (
 		<View style={{ ...mainStyles.mainContainer(insets, theme), flexDirection: 'column', alignItems: 'center', width: '100%' }}>
-			<Header title="Cache" />
+			<Header title="Playlists" />
 			<View style={{ ...settingStyles.contentMainContainer(insets), marginTop: 30 }}>
 				<Text style={settingStyles.titleContainer(theme)}>Preview Favorited</Text >
 				<View style={{ ...settingStyles.optionsContainer(theme), marginBottom: 5}}>

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

diff --git a/app/screens/UpdateRadio.js b/app/screens/UpdateRadio.js
@@ -2,15 +2,17 @@ import React from 'react';
 import { Text, View, TextInput, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import mainStyles from '~/styles/main';
-import presStyles from '~/styles/pres';
 import { ConfigContext } from '~/contexts/config';
-import IconButton from '~/components/button/IconButton';
 import { getApi } from '~/utils/api';
 import { ThemeContext } from '~/contexts/theme';
+import OptionInput from '~/components/settings/OptionInput';
+import Header from '~/components/Header';
+import mainStyles from '~/styles/main';
+import settingStyles from '~/styles/settings';
+import ButtonText from '~/components/settings/ButtonText';
 
 const UpdateRadio = ({ navigation, route }) => {
-  const theme = React.useContext(ThemeContext)
+	const theme = React.useContext(ThemeContext)
 	const insets = useSafeAreaInsets();
 	const config = React.useContext(ConfigContext)
 	const [name, setName] = React.useState('');
@@ -49,72 +51,55 @@ const UpdateRadio = ({ navigation, route }) => {
 
 	return (
 		<View style={mainStyles.mainContainer(insets, theme)} >
-			<View
-				style={{
-					flexDirection: 'row',
-					width: '100%',
-				}} >
-				<IconButton
-					icon="chevron-left"
-					size={23}
-					color={theme.primaryLight}
-					style={{ padding: 20, alignItems: 'center' }}
-					onPress={() => navigation.goBack()}
-				/>
-				<Text style={{ ...presStyles.title(theme), marginStart: 0, width: undefined }}>Update Radio</Text>
-			</View>
-			<View style={{
-				maxWidth: 500,
-				width: '100%',
-				paddingHorizontal: 20,
-				paddingTop: 20,
-				alignSelf: 'center',
-				flexDirection: 'column',
-				alignItems: 'center',
-				justifyContent: 'center',
-			}}
-			>
-				<Text style={{ color: theme.primaryTouch, paddingBottom: 20 }} color={theme.primaryLight}>{error}</Text>
-				{/* {name && <Text style={styles.textInput} >Name</Text>} */}
-				<TextInput
-					style={mainStyles.inputSetting(theme)}
-					placeholder="Name"
-					placeholderTextColor="#888"
-					value={name}
-					onChangeText={setName}
-					autoCorrect={false}
-					autoFocus={true}
-				/>
-				{/* {streamUrl && <Text style={styles.textInput} >Url Stream</Text>} */}
-				<TextInput
-					style={mainStyles.inputSetting(theme)}
-					placeholder="URL Stream"
-					placeholderTextColor="#888"
-					value={streamUrl}
-					onChangeText={setStreamUrl}
-					inputMode="url"
-					autoCorrect={false}
-				/>
-				{/* {homePageUrl && <Text style={styles.textInput} >Url Home page</Text>} */}
-				<TextInput
-					style={mainStyles.inputSetting(theme)}
-					placeholder="URL Home page"
-					placeholderTextColor="#888"
-					value={homePageUrl}
-					onChangeText={setHomePageUrl}
-					inputMode="url"
-					autoCorrect={false}
-					onSubmitEditing={updateRadio}
-				/>
-				<TouchableOpacity
-					style={{ ...mainStyles.button, flex: undefined, width: '100%' }}
-					disabled={!name || !streamUrl}
-					onPress={updateRadio}
+			<Header title={route.params?.id ? 'Update Radio' : 'Create Radio'} />
+			<View style={settingStyles.contentMainContainer(insets)}>
+				<View
+					style={{
+						flexDirection: 'row',
+						justifyContent: 'center',
+						width: '100%',
+						minHeight: 60,
+						alignItems: 'center',
+					}}
 				>
-					<Text style={{
-						color: (name && streamUrl) ? theme.primaryTouch : theme.secondaryLight,
-					}}>{route.params?.id ? 'Update' : 'Create'}</Text>
-				</TouchableOpacity>
+					<Text style={{ color: theme.primaryTouch, paddingBottom: 20 }} color={theme.primaryLight}>{error}</Text>
+				</View>
+				<View style={settingStyles.optionsContainer(theme)}>
+					<OptionInput
+						title="Name"
+						placeholder="Name"
+						placeholderTextColor="#888"
+						value={name}
+						onChangeText={setName}
+						autoCorrect={false}
+						autoFocus={true}
+					/>
+					<OptionInput
+						title="Stream url"
+						placeholder="Stream url"
+						placeholderTextColor="#888"
+						value={streamUrl}
+						onChangeText={setStreamUrl}
+						inputMode="url"
+						autoCorrect={false}
+					/>
+					<OptionInput
+						title="Home page url"
+						placeholder="Home page url"
+						placeholderTextColor="#888"
+						value={homePageUrl}
+						onChangeText={setHomePageUrl}
+						inputMode="url"
+						autoCorrect={false}
+						onSubmitEditing={updateRadio}
+						isLast={true}
+					/>
+				</View>
+				<ButtonText
+					text={route.params?.id ? 'Update' : 'Create'}
+					onPress={updateRadio}
+					disabled={!name || !streamUrl}
+				/>
 			</View>
 		</View>
 	)

diff --git a/app/screens/tabs/Playlists.js b/app/screens/tabs/Playlists.js
@@ -112,7 +112,7 @@ const Playlists = ({ navigation }) => {
 					/>
 				</Animated.View>
 			</View>
-			<TouchableOpacity style={styles.subTitleParent} onPress={() => navigation.navigate('Favorited', { favorited })}>
+			<TouchableOpacity style={{ ...styles.subTitleParent, marginTop: undefined }} onPress={() => navigation.navigate('Favorited', { favorited })}>
 				<Icon name="heart" size={23} color={theme.primaryTouch} style={{ marginEnd: 10 }} />
 				<Text style={{ ...mainStyles.subTitle(theme), flex: 1 }}>Favorited</Text>
 				<Text style={{ color: theme.secondaryLight, fontWeight: 'bold', fontSize: 15 }}>
@@ -132,7 +132,6 @@ const Playlists = ({ navigation }) => {
 									borderWidth: 1,
 									borderRadius: 6,
 									color: theme.primaryLight,
-									// marginEnd: 10,
 									flex: 1,
 									paddingHorizontal: 10
 								}}
@@ -150,7 +149,7 @@ const Playlists = ({ navigation }) => {
 								icon={newPlaylist?.length > 0 ? 'plus' : 'times'}
 								size={20}
 								color={theme.secondaryLight}
-								style={{ padding: 10}}
+								style={{ padding: 10 }}
 								onPress={() => newPlaylist?.length > 0 ? addPlaylist() : setNewPlaylist(null)} />
 						</> :
 						<>