Skip to content

Commit

Permalink
Finished the settings
Browse files Browse the repository at this point in the history
  • Loading branch information
Infinite-Null committed Mar 20, 2024
1 parent 1f0fab2 commit e36614e
Show file tree
Hide file tree
Showing 7 changed files with 248 additions and 45 deletions.
5 changes: 2 additions & 3 deletions Component/Discover/EachLanguageCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,12 @@ export const EachLanguageCard = ({language}) => {
navigation.navigate("LanguageDetail",{language:language.toLowerCase()})
}} style={{
backgroundColor:"rgb(42,41,41)",
maxWidth:100,
padding:10,
padding:15,
borderRadius:10,
alignItems:"center",
justifyContent:"center",
}}>
<PlainText text={language}/>
<PlainText text={language} style={{paddingRight:0}}/>
</Pressable>
);
};
2 changes: 1 addition & 1 deletion Component/Discover/EachMomentsandGenres.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ export const EachMomentsandGenres = ({text, color}) => {
navigation.navigate("ShowPlaylistofType",{Searchtext:text.toLowerCase()})
}} style={{
backgroundColor:"rgb(42,41,41)",
maxWidth:100,
borderRadius:10,
paddingRight:10,
alignItems:"center",
justifyContent:"flex-start",
flexDirection:'row',
Expand Down
70 changes: 70 additions & 0 deletions Route/Home/ChangeName.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { MainWrapper } from "../../Layout/MainWrapper";
import { Dimensions, Pressable, TextInput, ToastAndroid, View } from "react-native";
import Animated, { FadeInDown } from "react-native-reanimated";
import FastImage from "react-native-fast-image";
import { Heading } from "../../Component/Global/Heading";
import { useState } from "react";
import { SetUserNameValue } from "../../LocalStorage/StoreUserName";
import { useTheme } from "@react-navigation/native";
import { PlainText } from "../../Component/Global/PlainText";
import { Spacer } from "../../Component/Global/Spacer";

export const ChangeName = ({navigation}) => {
const width = Dimensions.get("window").width
const theme = useTheme()
const [Name, setName] = useState("");
async function OnConfirm(name){
if (name === ""){
// eslint-disable-next-line no-alert
alert("Please Enter name!")
} else {
await SetUserNameValue(name.trim())
navigation.pop()
ToastAndroid.showWithGravity(
`Please restart the app`,
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
}
}
return (
<MainWrapper>
<View style={{
alignItems:"center",
justifyContent:"center",
flex:1,
}}>
<Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/GiveName.gif")} style={{
height:200,
width:200,
borderRadius:100,
}}/></Animated.View>
<Animated.View entering={FadeInDown.delay(500)}><Heading text={"What should I call you?"} nospace={true} style={{marginTop:10}}/></Animated.View>
<TextInput placeholderTextColor={theme.colors.text} value={Name} onChangeText={(text)=>{
setName(text)
}} textAlign={'center'} placeholder={"Enter your name"} style={{
borderWidth:2,
backgroundColor:"rgb(53,58,70)",
borderRadius:10,
padding:10,
width:width * 0.5,
color:theme.colors.text,
}}/>
<Spacer/>
<Pressable onPress={()=>{
OnConfirm(Name)
}} style={{
padding:10,
alignItems:"center",
justifyContent:'center',
backgroundColor:theme.colors.primary,
borderRadius:10,
}}>
<PlainText text={"Change Name"} style={{
color:"black",
}}/>
</Pressable>
</View>
</MainWrapper>
);
};
4 changes: 4 additions & 0 deletions Route/Home/HomeRoute.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { Album } from "../Album";
import { LikedSongPage } from "../Library/LikedSongPage";
import { LikedPlaylistPage } from "../Library/LikedPlaylistPage";
import { SettingsPage } from "./SettingsPage";
import { ChangeName } from "./ChangeName";
import { SelectLanguages } from "./SelectLanguages";
const Stack = createNativeStackNavigator();
export const HomeRoute = () => {
return (
Expand All @@ -18,6 +20,8 @@ export const HomeRoute = () => {
<Stack.Screen name={"LikedSongs"} component={LikedSongPage}/>
<Stack.Screen name={"LikedPlaylists"} component={LikedPlaylistPage}/>
<Stack.Screen name={"Settings"} component={SettingsPage}/>
<Stack.Screen name={"ChangeName"} component={ChangeName}/>
<Stack.Screen name={"SelectLanguages"} component={SelectLanguages}/>
</Stack.Navigator>
);
};
108 changes: 108 additions & 0 deletions Route/Home/SelectLanguages.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import { MainWrapper } from "../../Layout/MainWrapper";
import { Pressable, ToastAndroid, View } from "react-native";
import Animated, { FadeInDown } from "react-native-reanimated";
import FastImage from "react-native-fast-image";
import { PlainText } from "../../Component/Global/PlainText";
import { EachCheckBox } from "../../Component/RouteOnboarding/EachCheckBox";
import { useState } from "react";
import { SetLanguageValue } from "../../LocalStorage/Languages";
import { useTheme } from "@react-navigation/native";
import { Spacer } from "../../Component/Global/Spacer";

export const SelectLanguages = ({navigation}) => {
const [Languages, setLanguages] = useState([]);
const theme = useTheme()
async function onConfirmPress(language){
if (language.length < 2){
// eslint-disable-next-line no-alert
alert("Please select atleast 2 language")
} else {
const Lang = language.join(",")
await SetLanguageValue(Lang)
navigation.pop()
ToastAndroid.showWithGravity(
`Please restart the app`,
ToastAndroid.SHORT,
ToastAndroid.CENTER,
);
}
}
return (
<MainWrapper>
<View style={{
alignItems:"center",
marginTop:10
}}>
<Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/selectLanguage.gif")} style={{
height:150,
width:150,
borderRadius:100,
}}/></Animated.View>
<Spacer/>
<Animated.View entering={FadeInDown.delay(750)}><PlainText text={"select atleast 2 language"}/></Animated.View>
</View>
<View style={{
flex:1,
alignItems:"center",
justifyContent:'flex-start',
marginTop:10,
}}>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(()=>data)
}} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{
setLanguages(()=>data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Telugu"} checkbox2={"Marathi"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Bhojpuri"} checkbox2={"Bengali"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Kannada"} checkbox2={"Gujarati"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Malayalam"} checkbox2={"Urdu"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Kannada"} checkbox2={"Rajasthani"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Odia"} checkbox2={"Assamese"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<Spacer/>
<Pressable onPress={()=>{
onConfirmPress((Languages))
}} style={{
padding:15,
alignItems:"center",
justifyContent:'center',
backgroundColor:theme.colors.primary,
borderRadius:10,
}}>
<PlainText text={"Confirm"} style={{
color:"black",
paddingRight:0,
}}/>
</Pressable>
</View>
</MainWrapper>
);
};
18 changes: 12 additions & 6 deletions Route/Home/SettingsPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
import { useEffect, useState } from "react";
import { SmallText } from "../../Component/Global/SmallText";

export const SettingsPage = () => {
export const SettingsPage = ({navigation}) => {
const [Font, setFont] = useState("");
const [Playback, setPlayback] = useState("");
const [Download, setDownload] = useState("");
Expand Down Expand Up @@ -81,8 +81,12 @@ export const SettingsPage = () => {
<PaddingConatiner>
<Heading text={"SETTINGS"}/>
<ScrollView>
<EachSettingsButton text={"Change Name"}/>
<EachSettingsButton text={"Select Languages"}/>
<EachSettingsButton text={"Change Name"} OnPress={()=>{
navigation.navigate("ChangeName")
}}/>
<EachSettingsButton text={"Select Languages"} OnPress={()=>{
navigation.navigate("SelectLanguages")
}}/>
<EachDropDownWithLabel data={FontSize} text={"Font size"} placeholder={Font} OnChange={SetFont}/>
<EachDropDownWithLabel data={PlaybackQuality} text={"Playback quality"} placeholder={Playback} OnChange={SetPlayBack}/>
<EachDropDownWithLabel data={DownloadPath} text={"Download Path"} placeholder={Download} OnChange={SetDownLoad}/>
Expand All @@ -93,8 +97,8 @@ export const SettingsPage = () => {
);
};

function EachSettingsButton({text}) {
return <Pressable style={{
function EachSettingsButton({text, OnPress}) {
return <Pressable onPress={OnPress} style={{
backgroundColor:"rgb(43,45,55)",
padding:20,
borderRadius:10,
Expand All @@ -117,7 +121,9 @@ function EachDropDownWithLabel({data, text, placeholder, OnChange}){
marginBottom:10,
}}>
<PlainText text={text}/>
<Dropdown placeholder={placeholder} itemTextStyle={{
<Dropdown placeholder={placeholder} placeholderStyle={{
color:"white",
}} itemTextStyle={{
color:"rgb(26,26,26)",
}} containerStyle={{
backgroundColor:"rgb(236,236,236)",
Expand Down
86 changes: 51 additions & 35 deletions Route/OnboardingScreen/Slide2.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { MainWrapper } from "../../Layout/MainWrapper";
import { ScrollView, View } from "react-native";
import { View } from "react-native";
import Animated, { FadeInDown } from "react-native-reanimated";
import FastImage from "react-native-fast-image";
import { Heading } from "../../Component/Global/Heading";
import { PlainText } from "../../Component/Global/PlainText";
import { BottomNextAndPrevious } from "../../Component/RouteOnboarding/BottomNextAndPrevious";
import { EachCheckBox } from "../../Component/RouteOnboarding/EachCheckBox";
import { useState } from "react";
import { GetLanguageValue, SetLanguageValue } from "../../LocalStorage/Languages";
import { SetLanguageValue } from "../../LocalStorage/Languages";

export const Slide2 = ({navigation}) => {
const [Languages, setLanguages] = useState([]);
Expand All @@ -25,8 +25,7 @@ export const Slide2 = ({navigation}) => {
<MainWrapper>
<View style={{
alignItems:"center",
justifyContent:"center",
flex:1,
marginTop:10
}}>
<Animated.View entering={FadeInDown.duration(500)}><FastImage source={require("../../Images/selectLanguage.gif")} style={{
height:200,
Expand All @@ -36,37 +35,54 @@ export const Slide2 = ({navigation}) => {
<Animated.View entering={FadeInDown.delay(500)}><Heading text={"What's Your Music Taste?"} nospace={true} style={{marginTop:10}}/></Animated.View>
<Animated.View entering={FadeInDown.delay(750)}><PlainText text={"select atleast 2 language"}/></Animated.View>
</View>
<View style={{
flex:1,
alignItems:"center",
justifyContent:'flex-start',
}}>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(()=>data)
}} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{
setLanguages(()=>data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Telugu"} checkbox2={"Bhojpuri"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Bengali"} checkbox2={"Marathi"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Haryanvi"} checkbox2={"Rajasthani"} onCheck2={(data)=>{
setLanguages(data)
}}/>
</View>
<View style={{
flex:1,
alignItems:"center",
justifyContent:'flex-start',
marginTop:10,
}}>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(()=>data)
}} checkbox1={"English"} checkbox2={"Hindi"} onCheck2={(data)=>{
setLanguages(()=>data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Punjabi"} checkbox2={"Tamil"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Telugu"} checkbox2={"Marathi"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Bhojpuri"} checkbox2={"Bengali"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Kannada"} checkbox2={"Gujarati"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Malayalam"} checkbox2={"Urdu"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Kannada"} checkbox2={"Rajasthani"} onCheck2={(data)=>{
setLanguages(data)
}}/>
<EachCheckBox data={Languages} onCheck1={(data)=>{
setLanguages(data)
}} checkbox1={"Odia"} checkbox2={"Assamese"} onCheck2={(data)=>{
setLanguages(data)
}}/>

</View>
<BottomNextAndPrevious delay={100} showPrevious={true} onNextPress={()=>{
onNextPress(Languages)
}} onPreviousPress={()=>{
Expand Down

0 comments on commit e36614e

Please sign in to comment.