diff --git a/flad/src/FLAD/components/Onboarding.tsx b/flad/src/FLAD/components/Onboarding.tsx new file mode 100644 index 0000000..0e14e61 --- /dev/null +++ b/flad/src/FLAD/components/Onboarding.tsx @@ -0,0 +1,199 @@ +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 + + + } + 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} + /> + + + + + + + + + v2.0 + + + + + + + + {handleModal(); + // @ts-ignore + navigation.navigate('Login'); + }}> + CONTINUER AVEC SPOTIFY + + {handleModal(); navigation.navigate('Register');}}> + S’INSCRIRE MAINTENANT + + + {handleModal(); navigation.navigate('Login');}}> + SE CONNECTER + + + + + + + ); +} + +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) + } +}) diff --git a/src/FLAD/components/Card.tsx b/src/FLAD/components/Card.tsx index 1e70aa7..920a44f 100644 --- a/src/FLAD/components/Card.tsx +++ b/src/FLAD/components/Card.tsx @@ -5,6 +5,8 @@ import Animated,{ Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; const SCREEN_WIDTH = Dimensions.get('window').width +const SCREEN_HEIGHT = Dimensions.get('window').height + // const width = wWidht *0.75; // const height = wWidht * (465/264); // const borderRadius = 24; @@ -86,11 +88,23 @@ const Card = ({ title, image, onSwipe } : CardProps) => { ( translateX.value, [-SCREEN_WIDTH / 4, 0, SCREEN_WIDTH / 4], [0.35, 0, 0.35]); + return { opacity : opacityl, }; }); + const opacCStyle2 = useAnimatedStyle(() => { + const opacityl = interpolate + ( translateY.value, + [0,SCREEN_HEIGHT/4], + [0,0.35]); + + + return { + opacity : opacityl, + }; + }); const opacDStyle = useAnimatedStyle(() => { const opacityl = interpolate @@ -99,7 +113,6 @@ const Card = ({ title, image, onSwipe } : CardProps) => { [ 0, 1]); return { - backgroundColor : 'red', opacity : opacityl, }; }); @@ -161,9 +174,13 @@ const horizontalThreshold = SCREEN_WIDTH * 0.65; + + <> {return [route.params.music.id]}} /> - {/* */} + component={MusicDetail} + /> {/* item.title } /> - - - ( - // navigation.navigate("")}> - - // - )} - keyExtractor={(item: Music) => item.title } - /> - navigation.navigate('Genre')}> diff --git a/src/FLAD/screens/MusicDetail.tsx b/src/FLAD/screens/MusicDetail.tsx index dc77d51..6bd9abd 100644 --- a/src/FLAD/screens/MusicDetail.tsx +++ b/src/FLAD/screens/MusicDetail.tsx @@ -13,6 +13,7 @@ import { FetchRequest } from "expo-auth-session/build/Fetch"; import Music from "../Model/Music"; import SpotifyService from "../services/spotify/spotify.service"; import { SharedElement } from "react-navigation-shared-element"; +import { SafeAreaView } from "react-native-safe-area-context"; const halfPi = Math.PI/2; @@ -219,9 +220,11 @@ const MusicDetail = ({ route }) => { } return ( + + {/* */} - + { }} style={[ { - + width: 370, height: 370, borderRadius : 24, @@ -276,8 +279,16 @@ const MusicDetail = ({ route }) => { {/* Button */} {/* */} + ); }; -export default MusicDetail; \ No newline at end of file +export default MusicDetail; + +const styles = StyleSheet.create ({ + mainSafeArea: { + flex: 1, + backgroundColor: "#141414", + } +}) \ No newline at end of file diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx index fa1cfae..9a9bddc 100644 --- a/src/FLAD/screens/Register.tsx +++ b/src/FLAD/screens/Register.tsx @@ -99,7 +99,11 @@ const scopes = scopesArr.join(' '); '&redirect_uri=' + encodeURIComponent(redirectUrl), }) + console.log("=================grant code ==============<"); + console.log(result); + console.log("=================grant code ==============<"); + return result.params.code; } catch (err) { console.error(err) diff --git a/src/FLAD/screens/spot.tsx b/src/FLAD/screens/spot.tsx index 15f9434..ddafb91 100644 --- a/src/FLAD/screens/spot.tsx +++ b/src/FLAD/screens/spot.tsx @@ -24,9 +24,8 @@ import { useNavigation } from '@react-navigation/native'; import Music from '../Model/Music'; import { addFavoritesMusic } from '../redux/actions/appActions'; import { useDispatch } from 'react-redux'; -interface SpotProps { +import { Spot } from '../Model/Spot'; -} type LocationData = { latitude: number; longitude: number; @@ -92,7 +91,7 @@ async function getValueFor(key:string) :Promise { return result; } -export default function Spot() { +export default function SpotPage() { const [cards, setCards] = useState(spotArray2); const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]); const onSwipe = (index: number, direction: 'left' | 'right' | 'down') => { @@ -198,9 +197,9 @@ export default function Spot() { const navigator = useNavigation(); const {width : wWidht} = Dimensions.get("window"); - const hapti = (card : any) => { + const hapti = (card : Spot) => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy) - navigator.navigate("DetailsSpot", {"spot": card}) + navigator.navigate("DetailsSpot", {"music": card.music}) // Haptics.NotificationFeedbackType.Success }; return ( @@ -231,7 +230,7 @@ export default function Spot() { color: "#FFFFFF", fontSize: 30, fontWeight: "800", - }}>{currentCard.musicName} + }}>{currentCard.music.title} {currentCard.name} + }}>{currentCard.music.bio}