Add new Documentations (Maquettes, Images...), updating Spot Page and Navigation tabBar ✅

README.md

@@ -78,7 +78,16 @@ Maintenant vous pouvez à tout moment lancer l'application grâce à la commande
 
 - ### Comment s'inscrire sur l'application ? 
 
-Tout d'abord, il faut fournir votre *adresse e-mail* et votre *nom Spotify* aux **techniciens de l'application** (voir plus bas). Ils s'occuperont de vous ajouter définitivement à l'application. Une fois que cela est fait, inscrivez-vous via la **page d'inscription** de l'application en cliquant d'abord sur le bouton 'lier mon compte'. Vous serez normalement redirigé sur la page Spotify où vous devrez vous connecter. Une fois connecté, entrez votre nom, votre adresse e-mail et votre mot de passe en tant qu'utilisateur FLAD (n'oubliez pas ces informations car vous en aurez besoin pour vous connecter). Ensuite, cliquez sur le bouton 'suivant' et bienvenue sur l'application !
+Tout d'abord, il faut fournir votre *adresse e-mail* et votre *nom Spotify* aux **techniciens de l'application** (voir plus bas). Ils s'occuperont de vous ajouter définitivement à l'application. Une fois que cela est fait, inscrivez-vous via la **page d'inscription** de l'application en cliquant d'abord sur le bouton 'lier mon compte':
+
+<div align = center>
+
+<img src="doc/Images/Real_RegisterPage.jpg" width="250" >
+
+</div>
+
+
+Vous serez normalement redirigé sur la page Spotify où vous devrez vous connecter. Une fois connecté, entrez votre nom, votre adresse e-mail et votre mot de passe en tant qu'utilisateur FLAD (n'oubliez pas ces informations car vous en aurez besoin pour vous connecter). Ensuite, cliquez sur le bouton 'suivant' et bienvenue sur l'application !
 
 ## Environnement de Travail
 

src/FLAD/components/AnimatedParalax.tsx

@@ -1,6 +1,4 @@
-import { SharedElement } from "react-navigation-shared-element";
-import { NavigationProp, RouteProp } from "@react-navigation/native";
-import { View,Image,StyleSheet, Dimensions, useWindowDimensions } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, withTiming } from "react-native-reanimated";
 
 interface SpotProps {

src/FLAD/components/Artist.tsx

@@ -1,7 +1,6 @@
-import { View, StyleSheet, Dimensions, Image, Pressable, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight } from "react-native";
+import { View, StyleSheet, Dimensions, Image, TouchableOpacity } from "react-native";
 import Animated, {
     Layout,
-    Transition,
     ZoomIn,
     ZoomOut,
   } from "react-native-reanimated";

src/FLAD/components/Card.tsx

@@ -1,12 +1,9 @@
-import { View, Text, Image , Dimensions, StyleSheet } from 'react-native'
-import React, { useRef, useState } from 'react'
+import { View, Image , Dimensions, StyleSheet } from 'react-native'
+import React from 'react'
 import Animated,{ Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 
 import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
-import * as Haptics from 'expo-haptics';
 
-const {width : wWidht} = Dimensions.get("window");
-const SCREEN_HEIGHT = Dimensions.get('window').height
 const SCREEN_WIDTH = Dimensions.get('window').width
 // const width = wWidht *0.75;
 // const height = wWidht * (465/264);

src/FLAD/components/FladLoadingScreen.tsx

@@ -76,7 +76,7 @@ const FladLoading = () => {
 
     
     return (
-      <View style={{flex : 1, justifyContent : 'center', alignItems :'center'}}>
+      <View style={{ justifyContent : 'center', alignItems :'center'}}>
     
         <Animated.View style={[{backgroundColor : '#B40404', justifyContent : 'center', alignItems : 'center'}, breatheStyleSquare]}>
             <Animated.Image source={require('../assets/icons/icon.png')} style={[{height: size, width : size, borderColor : '#fff',borderRadius : size/2}]}/>

src/FLAD/components/HalfCircle.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 
 interface HalfCirlceProps {
     backgroundColor : string;

src/FLAD/components/Onboarding.tsx

@@ -180,20 +180,20 @@ const styles = StyleSheet.create({
     },
     button2Connection: {
         width: '100%',
-        height: 80,
+        height: normalize(92),
         backgroundColor: '#232123',
         borderTopColor: '#3C3C3C',
         borderTopWidth: 1,
         justifyContent: 'center',
         alignItems: 'center',
         position: 'absolute',
-        bottom: normalize(46)
+        bottom: normalize(0)
     },
     mascot: {
         width: normalize(130),
         height: normalize(130),
         position: 'absolute',
-        bottom: normalize(140),
+        bottom: normalize(90),
         right: normalize(0)
     }
 })

src/FLAD/data/data.ts

@@ -1,34 +1,41 @@
 export const cards = [{
-  name : "blue",
+  musicName : "Je bibi",
+  name : "Kaaris",
   sourceUrl : "https://th.bing.com/th/id/R.dbf87f0d8cbfd078ab6a589a5d921994?rik=1%2f6KliMpOAeh8A&pid=ImgRaw&r=0",
   index : 4
 },
 {
-  name : "her",
+  musicName : "Breathin",
+  name : "Ariana Grande",
   sourceUrl : "https://i.ebayimg.com/images/g/rY0AAOSw97djEo2C/s-l500.jpg",
   index : 9
 },
 {
+  musicName : "Zombies",
   name : "gambino",
   sourceUrl : "https://th.bing.com/th/id/R.0b2d1a59bfda9b1a49ecb561e08535a8?rik=Xyc35OZU%2f6VOVw&pid=ImgRaw&r=0",
   index : 3
 },
 {
+  musicName : "Bambina",
   name : "PNL",
   sourceUrl : "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png",
   index : 10
 },
 {
-  name : "Freeze Raël",
+  musicName : "Freeze Raël",
+  name : "Freeze Corleone",
   sourceUrl : "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png",
   index : 23
 },
 {
+  musicName : "Autobahn",
   name : "Sch",
   sourceUrl : "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg",
   index : 44
 },
 {
+  musicName : "Lakehouse",
   name : "Stratos",
   sourceUrl : "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png",
   index : 89

src/FLAD/navigation/AuthNavigation.tsx

@@ -47,9 +47,9 @@ export default function AuthNavigation() {
         <>
                  {isLogin ? (
          /* {userToken != null ? ( */
-        <SafeAreaView style={styles.mainSafeArea} >
+        <SafeAreaProvider>
             <Navigation/>
-        </SafeAreaView>
+        </SafeAreaProvider>
     
         ) : 
         <SafeAreaProvider >
@@ -59,9 +59,3 @@ export default function AuthNavigation() {
     </>
     )
   }
-  const styles = StyleSheet.create({
-    mainSafeArea: {
-      flex: 1,
-      backgroundColor: "#141414",
-    }
-  });

src/FLAD/navigation/Navigation.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import FavoriteNavigation from './FavoriteNavigation';
 import SettingNavigation from './SettingNavigation';
-import Spot from '../screens/spot';
 
+import normalize from '../components/Normalize';
 // @ts-ignore
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import SpotNavigation from './SpotNavigation';
@@ -29,14 +30,17 @@ export default function Navigation() {
             initialRouteName="Spots" 
             screenOptions={{
               //tabBarShowLabel: false, //to remove the titles under the icons
-              tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 30, marginHorizontal: 25},
-              tabBarLabelStyle: { bottom: 5 }
+              tabBarStyle: styles.tabBar,
+              ...(Platform.OS === 'android' 
+              ? { tabBarLabelStyle: { bottom: normalize(10) } }
+              : { tabBarLabelStyle: { bottom: normalize(-22) } }
+            ),
 
             }}>
               <BottomTabNavigator.Screen name="Spots" component={SpotNavigation}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="music" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="music" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Favorites" component={FavoriteNavigation}
                         options={{
@@ -45,17 +49,17 @@ export default function Navigation() {
                           tabBarBadge : 2,
                           tabBarBadgeStyle : {backgroundColor : 'yellow'}, 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="heart" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Messages" component={Login}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="comment" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="comment" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Setting" component={SettingNavigation}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="cog" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="cog" color={color}/></View>,
                          }}/>
           </BottomTabNavigator.Navigator>
       </NavigationContainer>
@@ -68,3 +72,17 @@ function TabBarIcon(props: {
 }) {
     return <FontAwesome size={30} {...props} />;
 }
+
+const styles = StyleSheet.create({
+  tabBar: {
+    height: 60, 
+    position: 'absolute', 
+    bottom: normalize(50), 
+    borderRadius: 30, 
+    marginHorizontal: 25
+  },
+  IconContainer: {
+    position: 'absolute', 
+    top: 5, 
+  }
+})

src/FLAD/screens/Favorite.tsx

@@ -1,5 +1,5 @@
 import React, { useState} from 'react';
-import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity } from 'react-native';
+import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, SafeAreaView } from 'react-native';
 import CardMusic from '../components/CardMusic';
 import normalize from '../components/Normalize';
 import Music from '../Model/Music'
@@ -39,6 +39,7 @@ export default function favoritePage() {
 
     return (
         <View style={styles.body}>
+            <SafeAreaView style={styles.mainSafeArea}>
                 <View style={styles.titleContainer}>
                     <Text style={styles.title}>Favoris</Text>
                     <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
@@ -61,11 +62,16 @@ export default function favoritePage() {
                             <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
                         </TouchableOpacity>
                 </ScrollView>
+            </SafeAreaView>
         </View>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     body: {
         flex: 1,
         justifyContent: 'center',

src/FLAD/screens/Register.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native';
+import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native';
 import {useNavigation} from "@react-navigation/native";
 import normalize from '../components/Normalize';
 import * as SecureStore from 'expo-secure-store';
 import * as AuthSession from 'expo-auth-session';
-import axios from 'axios';
 import * as WebBrowser from 'expo-web-browser';
 import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
 import { registerUser } from '../redux/thunk/authThunk';

src/FLAD/screens/Setting.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, TouchableHighlight } from 'react-native';
+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";
 
@@ -43,6 +43,7 @@ export default function Setting() {
         () => setIsCheckedLocalisation(value => !value);
     return (
         <DismissKeyboard>
+            <SafeAreaView style={styles.mainSafeArea}>
                 <ScrollView>
                     <View style={styles.container}>
                         <Text style={styles.title}>Réglages</Text>
@@ -138,11 +139,16 @@ export default function Setting() {
                         </View>
                     </View>
                 </ScrollView>
+            </SafeAreaView>
         </DismissKeyboard>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     container: {
         marginTop: 30,
         marginHorizontal: normalize(25),

src/FLAD/screens/SettingProfil.tsx

@@ -7,6 +7,7 @@ import {useNavigation} from "@react-navigation/native";
 
 import normalize from '../components/Normalize';
 import * as ImagePicker from 'expo-image-picker';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // @ts-ignore
 const DismissKeyboard = ({ children }) => (
@@ -46,6 +47,7 @@ export default function SettingProfil() {
 
     return (
         <DismissKeyboard>
+            <SafeAreaView style={styles.mainSafeArea}>
                 <ScrollView>
                     <View style={styles.container}>
                         <TouchableOpacity onPress={() => navigation.navigate('Setting')}>
@@ -142,11 +144,16 @@ export default function SettingProfil() {
                         </Modal>
                     </View>
                 </ScrollView>
+            </SafeAreaView>
         </DismissKeyboard>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     container: {
         marginTop: 20,
         marginHorizontal: normalize(25),

src/FLAD/screens/SpotDetailsPage.tsx

@@ -1,6 +1,6 @@
 import { SharedElement } from "react-navigation-shared-element";
 import { NavigationProp, RouteProp } from "@react-navigation/native";
-import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity } from "react-native";
+import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity, SafeAreaView } from "react-native";
 import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, useDerivedValue, useSharedValue, Value, withSpring, withTiming } from "react-native-reanimated";
 import { BlurView } from 'expo-blur';
 import qs from "qs";
@@ -217,6 +217,7 @@ const SpotDetailsPage = ({ route }) => {
 
     
     return (
+      <SafeAreaView style={styles.mainSafeArea}>
 <View style={{ flex: 1, justifyContent : 'flex-start', alignItems : 'center' }}>
         {/* <SharedElement  id={spot.name} style={{ flex: 1 }}>                 */}
         <View style={{borderWidth : 1, borderColor : 'red'}}>
@@ -287,8 +288,16 @@ const SpotDetailsPage = ({ route }) => {
         </View> */}
         {/* </SharedElement> */}
         </View>
+      </SafeAreaView>
 
     );
 };
 
 export default SpotDetailsPage;
+
+const styles = StyleSheet.create ({
+  mainSafeArea: {
+    flex: 1,
+    backgroundColor: "#141414",
+  }
+})

src/FLAD/screens/spot.tsx

@@ -204,35 +204,32 @@ export default function Spot() {
                                  height: "100%",
                                  justifyContent: "center",
                                  alignItems: "center",
-                                 opacity: 0.48
                              }}
                              source={{
                                  uri:currentCard.sourceUrl ,
                              }}
       ></ImageBackground>
-
-      <View style={{flex : 1.65}}>
-      <LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%','rgba(0, 0, 0, 0) 90.56%']}style={styles.gradient}>
+        <SafeAreaView style={styles.mainSafeArea}>
+            <LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%','rgba(0, 0, 0, 0) 100.56%']}style={styles.gradient}>
               <Text
               style={{
                 fontStyle : 'normal',
                 left: wWidht/9 ,
-        top: 65,
+                top: 75,
                 color: "#FFFFFF",
-        fontSize: 20,
+                fontSize: 30,
                 fontWeight: "800",
-      }}>LOST FOREST</Text>
+              }}>{currentCard.musicName}</Text>
               <Text
               style={{
                 fontStyle : 'normal',
                 left: wWidht/9 ,
-        top: 65,
+                top: 75,
                 color: "#FFFFFF",
                 fontSize: 18,
-        fontWeight: "800",
-      }}>Laylow</Text>
+              }}>{currentCard.name}</Text>
             </LinearGradient>
-      </View>
+        </SafeAreaView>
       <View style={{flex : 8.35}}>
       
       <View style={{flex : 1.83, justifyContent: 'center', alignItems: 'center' }}>
@@ -272,16 +269,12 @@ export default function Spot() {
       </View>
       </>
       )
-      : (<View style={{justifyContent : 'center', alignItems : 'center', flex : 1}}>
-        <View style={{flex:7}}>
-
-                        <FladLoading></FladLoading>
+      : (<View style={{justifyContent : 'center', alignItems : 'center', flex : 1, backgroundColor: "#141414"}}>
+          <View style={{position: "absolute"}}>
+            <FladLoading/>
           </View>               
-        <View style={{flex : 3 , justifyContent: 'flex-start'}}>
-        <Text style={{color: "grey", fontWeight: "400", textAlign: "center"}}>Vous avez explorer toutes les spot autour de vous.
+            <Text style={{color: "grey", fontWeight: "400", textAlign: "center", top: 100}}>Vous avez explorer toutes les spot autour de vous.
                               {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées dur vos gouts musicaux.</Text>               
-        </View>
-                                            
         </View>)
     }
     </View>
@@ -289,6 +282,9 @@ export default function Spot() {
   );
 };
   const styles = StyleSheet.create({
+    mainSafeArea: {
+      flex: 1,
+    },
     spot : {
       flex: 1,
       alignItems: 'center',
@@ -320,9 +316,5 @@ export default function Spot() {
       right : 0,
       height : 209,
     },
-
-      mainSafeArea: {
-        flex: 1,
-      }
   })