FLAD_Dev
/
FLAD
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Song, disconnect option and Beginning DarkMode
continuous-integration/drone/push Build is passing Details

Browse Source
pull/13/head
Emre KARTAL 2 years ago
parent 11f938c17e
commit 02f024c64e
21 changed files with 456 additions and 590 deletions
Show Stats Download Patch File Download Diff File

199
flad/src/FLAD/components/Onboarding.tsx
Unescape View File

@ -1,199 +0,0 @@
import React, { useState, useRef } from 'react';
import { Modal, View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBackground, Image } from 'react-native';
// import Modal from "react-native-modal";
import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
import OnboardingItem from './OnboardingItem';
import Paginator from './Paginator';
import NextButton from './NextButton';
import slides from '../data/slides';
export default function Onboarding() {
const [currentIndex, setCurrentIndex] = useState(0);
const scrollX = useRef(new Animated.Value(0)).current;
const slidesRef = useRef(null);
const navigation = useNavigation();
const [isModalVisible, setIsModalVisible] = React.useState(false);
const handleModal = () => setIsModalVisible(() => !isModalVisible);
// @ts-ignore
const viewableItemsChanged = useRef(({ viewableItems }) => {
setCurrentIndex(viewableItems[0].index);
}).current;
const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
const scrollTo = () => {
if(currentIndex < slides.length - 1) {
// @ts-ignore
slidesRef.current.scrollToIndex({ index: currentIndex + 1 });
} else {
setIsModalVisible(() => !isModalVisible);
}
};
return (
// @ts-ignore
<View style={styles.container}>
<View style={styles.balise}>
<FlatList
data={slides}
renderItem={({item}) => <OnboardingItem item={item} />}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
bounces={false}
keyExtractor={(item) => item.id}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
useNativeDriver: false,
})}
scrollEventThrottle={32}
onViewableItemsChanged={viewableItemsChanged}
viewabilityConfig={viewConfig}
ref={slidesRef}
/>
<Paginator data={slides} scrollX={scrollX}/>
<NextButton scrollTo={scrollTo} percentage={(currentIndex + 1) * (100 / slides.length)} />
</View>
<Modal animationType="slide" visible={isModalVisible} transparent={true} presentationStyle={'pageSheet'}>
<View style={styles.modalContent}>
<ImageBackground source={require("../assets/images/Background_Start_Page.png")} style={styles.backgroundImage}>
<View style={styles.modalView}>
<Text style={styles.versionText}>
v2.0
</Text>
<TouchableOpacity onPress={handleModal} style={styles.closeButtonCircle}>
<View>
<Image source={require("../assets/icons/icons/croix.png")} style={styles.imageButton}/>
</View>
</TouchableOpacity>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<TouchableOpacity
style={styles.buttonConnection}
onPress={() => {handleModal();
// @ts-ignore
navigation.navigate('Login');
}}>
<Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Register');}}>
<Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
</TouchableOpacity>
<Image source={require("../assets/images/Flady.gif")} style={styles.mascot}/>
<TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
<Text style={styles.text}>SE CONNECTER</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#141414'
},
imageLogo: {
width: normalize(324),
height: normalize(162),
marginBottom: '25%'
},
balise: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginBottom: normalize(110)
},
closeButtonCircle: {
backgroundColor: 'gray',
opacity: 0.4,
width: 40,
height: 40,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 10,
right: 10
},
modalContent: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
backgroundImage: {
flex: 1,
width: '100%',
height: '100%',
},
imageButton: {
width: 20,
height: 20
},
versionText: {
position: 'absolute',
top: 50,
right: 10,
color: 'gray',
fontWeight: 'bold',
fontSize: normalize(17)
},
buttonConnection: {
width: 262,
height: 57,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#24CF5F',
borderRadius: 11,
borderColor: '#68F097',
borderWidth: 1,
marginBottom: 12
},
buttonInscription: {
width: 262,
height: 57,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#951DDE',
borderRadius: 11,
borderColor: '#C656ED',
borderWidth: 1,
marginBottom: 220
},
text: {
fontWeight: 'bold',
color: 'white',
fontSize: normalize(18)
},
button2Connection: {
width: '100%',
height: normalize(92),
backgroundColor: '#232123',
borderTopColor: '#3C3C3C',
borderTopWidth: 1,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
bottom: normalize(0)
},
mascot: {
width: normalize(130),
height: normalize(130),
position: 'absolute',
bottom: normalize(90),
right: normalize(0)
}
})

4
src/FLAD/assets/GraphicalCharterDark.tsx
Unescape View File

@ -0,0 +1,4 @@
export const GraphicalCharterDark = {
"body": "#141414",
"Text": "white",
}

4
src/FLAD/assets/GraphicalCharterLight.tsx
Unescape View File

@ -0,0 +1,4 @@
export const GraphicalCharterLight = {
"body": "#E7E7E7",
"Text": "black",
}

BIN
src/FLAD/assets/images/Board_Image.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 569 KiB

After

Width:  |  Height:  |  Size: 590 KiB

BIN
src/FLAD/assets/images/FLADYCry.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 760 KiB

BIN
src/FLAD/assets/images/FLADYHate.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 KiB

BIN
src/FLAD/assets/sounds/Click.mp3
View File

Binary file not shown.

1
src/FLAD/components/AdjustSize.tsx
Unescape View File

@ -1,6 +1,5 @@
import React from 'react';
// @ts-ignore
export default function AdjustSize(Text: String) {
const titleLength = Text.length;
const minFontSize = 23;

8
src/FLAD/components/FladyComponent.tsx
Unescape View File

@ -17,15 +17,15 @@ export default function FladyComponent(monFlady: Flady) {
const styles = StyleSheet.create({
container: {
alignItems: "flex-start",
width: normalize(152),
height: normalize(152),
borderRadius: 90,
backgroundColor: "white",
marginHorizontal: normalize(15),
overflow: 'hidden',
},
image: {
width: normalize(200),
height: normalize(200),
width: normalize(220),
height: normalize(220),
marginLeft: -1
}
})

11
src/FLAD/components/NextButton.tsx
Unescape View File

@ -1,12 +1,15 @@
import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native';
import { View, StyleSheet, TouchableOpacity , Animated, useColorScheme } from 'react-native';
import Svg, { G, Circle } from 'react-native-svg';
import { AntDesign } from '@expo/vector-icons';
import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
import normalize from '../components/Normalize';
// @ts-ignore
export default function NextButton({ percentage, scrollTo }) {
const style = useColorScheme() == 'light' ? GraphicalCharterLight : GraphicalCharterDark;
const size = normalize(148);
const strokeWidth = 2;
const center = size / 2;
@ -56,11 +59,11 @@ export default function NextButton({ percentage, scrollTo }) {
<View style={styles.container}>
<Svg width={size} height={size}>
<G rotation="-90" origin={center}>
<Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
<Circle stroke={style.Text} cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
<Circle
ref={progressRef}
stroke="#F80404"
fill="#141414"
fill={style.body}
cx={center}
cy={center}
r={radius}

128
src/FLAD/components/Onboarding.tsx
Unescape View File

@ -1,15 +1,17 @@
import React, { useState, useRef } from 'react';
import { Modal, View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBackground, Image } from 'react-native';
import { Modal, View, StyleSheet, useColorScheme, Text, FlatList, Animated, TouchableOpacity, ImageBackground, Image } from 'react-native';
// import Modal from "react-native-modal";
import { useNavigation } from "@react-navigation/native";
import normalize from '../components/Normalize';
import OnboardingItem from './OnboardingItem';
import Paginator from './Paginator';
import NextButton from './NextButton';
import slides from '../data/slides';
import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
export default function Onboarding() {
const style = useColorScheme() == 'light' ? GraphicalCharterLight : GraphicalCharterDark;
const [currentIndex, setCurrentIndex] = useState(0);
const scrollX = useRef(new Animated.Value(0)).current;
const slidesRef = useRef(null);
@ -34,71 +36,12 @@ export default function Onboarding() {
}
};
return (
// @ts-ignore
<View style={styles.container}>
<View style={styles.balise}>
<FlatList
data={slides}
renderItem={({item}) => <OnboardingItem item={item} />}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
bounces={false}
keyExtractor={(item) => item.id}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
useNativeDriver: false,
})}
scrollEventThrottle={32}
onViewableItemsChanged={viewableItemsChanged}
viewabilityConfig={viewConfig}
ref={slidesRef}
/>
<Paginator data={slides} scrollX={scrollX}/>
<NextButton scrollTo={scrollTo} percentage={(currentIndex + 1) * (100 / slides.length)} />
</View>
<Modal animationType="slide" visible={isModalVisible} transparent={true} presentationStyle={'pageSheet'}>
<View style={styles.modalContent}>
<ImageBackground source={require("../assets/images/Background_Start_Page.png")} style={styles.backgroundImage}>
<View style={styles.modalView}>
<Text style={styles.versionText}>
v2.0
</Text>
<TouchableOpacity onPress={handleModal} style={styles.closeButtonCircle}>
<View>
<Image source={require("../assets/icons/icons/croix.png")} style={styles.imageButton}/>
</View>
</TouchableOpacity>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<TouchableOpacity
style={styles.buttonConnection}
onPress={() => {handleModal();
// @ts-ignore
navigation.navigate('Login');
}}>
<Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Register');}}>
<Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
</TouchableOpacity>
<Image source={require("../assets/images/Flady.gif")} style={styles.mascot}/>
<TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
<Text style={styles.text}>SE CONNECTER</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#141414'
backgroundColor: style.body
},
imageLogo: {
width: normalize(324),
@ -197,3 +140,64 @@ const styles = StyleSheet.create({
right: normalize(0)
}
})
return (
// @ts-ignore
<View style={styles.container}>
<View style={styles.balise}>
<FlatList
data={slides}
renderItem={({ item }) => <OnboardingItem item={item} />}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
bounces={false}
keyExtractor={(item) => item.id}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
useNativeDriver: false,
})}
scrollEventThrottle={32}
onViewableItemsChanged={viewableItemsChanged}
viewabilityConfig={viewConfig}
ref={slidesRef}
/>
<Paginator data={slides} scrollX={scrollX} />
<NextButton scrollTo={scrollTo} percentage={(currentIndex + 1) * (100 / slides.length)} />
</View>
<Modal animationType="slide" visible={isModalVisible} transparent={true} presentationStyle={'pageSheet'}>
<View style={styles.modalContent}>
<ImageBackground source={require("../assets/images/Background_Start_Page.png")} style={styles.backgroundImage}>
<View style={styles.modalView}>
<Text style={styles.versionText}>
v2.0
</Text>
<TouchableOpacity onPress={handleModal} style={styles.closeButtonCircle}>
<View>
<Image source={require("../assets/icons/icons/croix.png")} style={styles.imageButton} />
</View>
</TouchableOpacity>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo} />
<TouchableOpacity
style={styles.buttonConnection}
onPress={() => {
handleModal();
// @ts-ignore
navigation.navigate('Login');
}}>
<Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonInscription} onPress={() => { handleModal(); navigation.navigate('Register'); }}>
<Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
</TouchableOpacity>
<Image source={require("../assets/images/Flady.gif")} style={styles.mascot} />
<TouchableOpacity style={styles.button2Connection} onPress={() => { handleModal(); navigation.navigate('Login'); }}>
<Text style={styles.text}>SE CONNECTER</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</Modal>
</View>
);
}

34
src/FLAD/components/OnboardingItem.tsx
Unescape View File

@ -1,27 +1,18 @@
import React from 'react';
import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native';
import { View, StyleSheet, Text, Image, useWindowDimensions, useColorScheme } from 'react-native';
import normalize from '../components/Normalize';
import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
// @ts-ignore
export default function Onboarding({ item }) {
const style = useColorScheme() == 'light' ? GraphicalCharterLight : GraphicalCharterDark;
const { width, height } = useWindowDimensions();
return (
<View style={[styles.container, { width, height }]}>
<View style={{ overflow: 'hidden', height: height * 0.5 }}>
<Image source={item.image} style={[styles.image]} resizeMode="stretch" />
</View>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: normalize(60),
backgroundColor: '#141414'
backgroundColor: style.body
},
image: {
width: '100%',
@ -32,7 +23,7 @@ const styles = StyleSheet.create({
fontWeight: '800',
fontSize: normalize(32),
marginBottom: 10,
color: 'white',
color: style.Text,
textAlign: 'left',
paddingRight: 30,
paddingLeft: 20,
@ -40,10 +31,21 @@ const styles = StyleSheet.create({
},
description: {
fontWeight: '300',
color: 'white',
color: style.Text,
fontSize: normalize(16),
textAlign: 'left',
paddingRight: 30,
paddingLeft: 20
}
})
return (
<View style={[styles.container, { width, height }]}>
<View style={{ overflow: 'hidden', height: height * 0.5 }}>
<Image source={item.image} style={[styles.image]} resizeMode="stretch" />
</View>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
</View>
);
}

6
src/FLAD/navigation/AuthNavigation.tsx
Unescape View File

@ -41,9 +41,13 @@ export default function AuthNavigation() {
return null;
}
return (
<SafeAreaProvider>
<SafeAreaProvider>
{isLogin ? (
<Navigation />
) :
<StartNavigation/>
}
</SafeAreaProvider>
)
}

20
src/FLAD/redux/thunk/authThunk.tsx
Unescape View File

@ -4,7 +4,7 @@ import axios from "axios";
import { json } from "express";
import { useEffect } from "react";
import { API_URL } from "../../fladConfig";
import { Credentials, CredentialsRegister, restoreToken, setLoginState } from "../actions/userActions";
import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout } from "../actions/userActions";
import * as SecureStore from 'expo-secure-store';
import { User } from "../../Model/User";
import { UserFactory } from "../../Model/factory/UserFactory";
@ -33,7 +33,8 @@ export const registerUser = ( resgisterCredential : CredentialsRegister) => {
const token = resp.data.token;
// await SecureStore.setItemAsync(key, token);
const headers = {
'Authorization': 'Bearer ' + token};
'Authorization': 'Bearer ' + token
};
const user = await axios.get(
"https://flad-api-production.up.railway.app/api/users",
{ headers }
@ -85,7 +86,8 @@ return async dispatch => {
const token = resp.data.token;
await SecureStore.setItemAsync(key, token);
const headers = {
'Authorization': 'Bearer ' + token};
'Authorization': 'Bearer ' + token
};
const user = await axios.get(
"https://flad-api-production.up.railway.app/api/users",
@ -133,6 +135,18 @@ export const getRefreshToken = () => {
}
}
export const DeleteToken = () => {
//@ts-ignore
return async dispatch => {
try {
await SecureStore.deleteItemAsync(key);
dispatch(UserLogout());
} catch (e) {
console.log('Error deleting token', e);
}
}
}
// const logIn = (email, password) => {
// const action = (dispatch) => {
// if (email === user.email && password === user.password) {

3
src/FLAD/screens/Favorite.tsx
Unescape View File

@ -17,7 +17,8 @@ export default function favoritePage() {
const images = [
{ id: 1, source: require('../assets/images/FLADYLove.png') },
{ id: 2, source: require('../assets/images/FLADYStar.png') },
{ id: 3, source: require('../assets/images/FLADYStar.png') },
{ id: 3, source: require('../assets/images/FLADYHate.png') },
{ id: 4, source: require('../assets/images/FLADYCry.png') },
];
const navigueToDetail = (music : any) => {
navigation.navigate("MusicDetail", {"music": music})

12
src/FLAD/screens/LoginPage.tsx
Unescape View File

@ -4,6 +4,7 @@ import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
import { userLogin } from '../redux/thunk/authThunk';
import { useDispatch } from 'react-redux';
import { Audio } from 'expo-av';
import { Credentials } from '../redux/actions/userActions';
// @ts-ignore
@ -14,12 +15,22 @@ const DismissKeyboard = ({ children }) => (
)
export default function loginPage() {
const [sound, setSound] = useState<Audio.Sound>();
const [rememberMe, setRememberMe] = useState(false);
const navigation = useNavigation();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
async function playSound() {
console.log('Loading Sound');
const { sound } = await Audio.Sound.createAsync(
require('../assets/sounds/Click.mp3')
);
setSound(sound);
console.log('Playing Sound');
await sound.playAsync();
}
const dispatch = useDispatch();
const submitForm = () => {
@ -29,6 +40,7 @@ export default function loginPage() {
};
//@ts-ignore
dispatch(userLogin(credentials))
playSound()
}
const toggleRememberMe = () => {

13
src/FLAD/screens/Register.tsx
Unescape View File

@ -8,6 +8,7 @@ import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
import { registerUser } from '../redux/thunk/authThunk';
import { useDispatch } from 'react-redux';
import { Audio } from 'expo-av';
import { CredentialsRegister } from '../redux/actions/userActions';
import { Buffer } from 'buffer';
@ -34,10 +35,21 @@ await SecureStore.setItemAsync(key, value);
export default function InscriptionPage() {
const [sound, setSound] = useState<Audio.Sound>();
const [rememberMe, setRememberMe] = useState(false);
const navigation = useNavigation();
const [spotifyToken, setSpotifyToken] = useState('');
const [spotifyID, setSpotifyIds] = useState('')
async function playSound() {
console.log('Loading Sound');
const { sound } = await Audio.Sound.createAsync(
require('../assets/sounds/Click.mp3')
);
setSound(sound);
console.log('Playing Sound');
await sound.playAsync();
}
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
@ -82,6 +94,7 @@ export default function InscriptionPage() {
};
//@ts-ignore
dispatch(registerUser(credentials))
playSound()
}
const scopesArr = ['user-read-private','user-read-email','user-read-playback-state','user-read-currently-playing','user-read-recently-played','playlist-modify-public','ugc-image-upload','user-modify-playback-state'];
const scopes = scopesArr.join(' ');

11
src/FLAD/screens/Setting.tsx
Unescape View File

@ -2,10 +2,11 @@ import React, { useRef, useState } from 'react';
import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, SafeAreaView } from 'react-native';
import { Svg, Path } from 'react-native-svg';
import { useNavigation } from "@react-navigation/native";
import { useDispatch } from 'react-redux';
import normalize from '../components/Normalize';
import { ScrollView, Switch, TextInput } from 'react-native-gesture-handler';
import CardMusic from '../components/CardMusic';
import { DeleteToken } from '../redux/thunk/authThunk';
// @ts-ignore
const DismissKeyboard = ({ children }) => (
@ -16,6 +17,7 @@ const DismissKeyboard = ({ children }) => (
export default function Setting() {
const textInputRef = useRef(null);
const dispatch = useDispatch();
const navigation = useNavigation();
const handleSvgPress = () => {
//@ts-ignore
@ -35,7 +37,10 @@ export default function Setting() {
const toggleNotif =
() => setIsCheckedNotif(value => !value);
//Deconnection
const Deconnection = () => {
dispatch(DeleteToken())
}
//Localisation
const [isCheckedLocalisation, setIsCheckedLocalisation] = useState(false);
@ -133,7 +138,7 @@ export default function Setting() {
<Path d="M5.09735 3.54297H13.1075C13.5153 3.54297 13.8357 3.86337 13.8357 4.27116V7.91213M5.09735 19.5632H13.1075C13.5153 19.5632 13.8357 19.2428 13.8357 18.835V15.1941M21.8458 11.5531H10.1947" stroke="white" stroke-linecap="round" />
</Svg>
</View>
<TouchableOpacity onPress={() => console.log("Tkt t deconnecter")}>
<TouchableOpacity onPress={() => Deconnection()}>
<Text style={styles.textDeconnectionOption}>Se deconnecter</Text>
</TouchableOpacity>
</View>

Write Preview
Loading…
Cancel
Save