diff --git a/README.md b/README.md index 98fa2f3..e834043 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,10 @@ Notre environnement de travail se base sur plusieurs outils et langages :👇 --- -  ![React Native](https://img.shields.io/badge/React%20Native-000?style=for-the-badge&logo=react&logoColor=white&color=lightblue&textColor=white) +  ![Redux](https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white) +  ![Docker](https://img.shields.io/badge/Docker-2496ED.svg?style=for-the-badge&logo=Docker&logoColor=white) +  ![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) +  ![Spotify Api](https://img.shields.io/badge/Spotify-1ED760?&style=for-the-badge&logo=spotify&logoColor=white)   ![TypeScript](https://img.shields.io/badge/TypeScript-000?style=for-the-badge&logo=typescript&logoColor=white&color=blue)   ![JavaScript](https://img.shields.io/badge/JavaScript-000?style=for-the-badge&logo=javascript&logoColor=white&color=yellow) @@ -114,10 +117,19 @@ Notre environnement de travail se base sur plusieurs outils et langages :👇 La composition pour le projet se voit réaliser par deux élèves de l'IUT d'Aubière:
-⚙️ Emre KARTAL : emre.kartal@etu.uca.fr +Emre KARTAL : emre.kartal@etu.uca.fr
-⚙️ David D'ALMEIDA : david.d_almeida@etu.uca.fr +David D'ALMEIDA : david.d_almeida@etu.uca.fr + + + + + + +
© PM2 (Projet inspiré par nos très chers développeurs de la Dafl Team (S.O les Dafl dev))
+ + diff --git a/doc/Images/Real_LoginPage.JPG b/doc/Images/Real_LoginPage.JPG deleted file mode 100644 index bd37f63..0000000 Binary files a/doc/Images/Real_LoginPage.JPG and /dev/null differ diff --git a/doc/Images/Real_LoginPage.png b/doc/Images/Real_LoginPage.png new file mode 100644 index 0000000..b5a8dfe Binary files /dev/null and b/doc/Images/Real_LoginPage.png differ diff --git a/doc/Images/Real_RegisterPage.JPG b/doc/Images/Real_RegisterPage.JPG index 9c1611e..b73b267 100644 Binary files a/doc/Images/Real_RegisterPage.JPG and b/doc/Images/Real_RegisterPage.JPG differ diff --git a/flad/src/FLAD/components/Onboarding.tsx b/flad/src/FLAD/components/Onboarding.tsx deleted file mode 100644 index 0e14e61..0000000 --- a/flad/src/FLAD/components/Onboarding.tsx +++ /dev/null @@ -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 - - - } - 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/Model/Artist.tsx b/src/FLAD/Model/Artist.tsx index 32e4151..35c3a3e 100644 --- a/src/FLAD/Model/Artist.tsx +++ b/src/FLAD/Model/Artist.tsx @@ -1,12 +1,12 @@ export default class Artist { - private id : string; - private name : string; - private url : string; // Image.source - - constructor(id : string, name : string, url : string){ + private id: string; + private name: string; + private url: string; // Image.source + + constructor(id: string, name: string, url: string) { this.id = id; this.name = name; this.url = url; } - + } \ No newline at end of file diff --git a/src/FLAD/Model/Manager.tsx b/src/FLAD/Model/Manager.tsx index b1576d1..cd9d147 100644 --- a/src/FLAD/Model/Manager.tsx +++ b/src/FLAD/Model/Manager.tsx @@ -1,112 +1,112 @@ import { useState } from "react"; import SpotifyService from "../services/spotify/spotify.service"; -class Manager{ - - // injection de dépences - spotifyService = new SpotifyService(); - userService = new userService(); - - private currentUser = useState(null); - - constructor() { - } - - // spotify methods - apiAuthorization(url : string) { - this.spotifyService.apiAuthorization(url); - } - - getCompleteMusic = async (id : string) :Promise =>{ - // Map info = await spotifyService.getTrackInfo(id); - // return Music(id, info['name'], info['artist'], info['cover']); - } - - removeFromPlaylist(id : string) { - this.spotifyService.removeFromPlaylist(id); - } - - - addToPlaylist(id : string) { - this.spotifyService.addToPlaylist(id); - } - - playTrack(id : string) { - this.spotifyService.playTrack(id); - } - - - //////////////////////////////////////////// - - // private readonly getTaskById: RequestHandler = async ( - // req: Request, - // res: Response, - // next: NextFunction - // ): Promise => { - // try { - // const id = req.params.taskId; - // const userId = req.params.userId; - - // const data = await this.Taskservice.getTaskById(id, userId); - // res.status(201).send(data); - - // } - // catch(error){ - // next(new HttpException(400, 'Cannot create post')); - // } - - // } - - - // private delete = async ( - // req: Request, - // res: Response, - // next: NextFunction - // ): Promise => { - // try { - // const id = req.params.taskId; - // const userId = req.params.userId; - // await this.Taskservice.DeleteTask(id, userId); - // return res.status(200).send({ status: "Success", msg: "Data Removed" }); - // } catch (error) { - // next(new HttpException(400, 'Cannot create post')); - // } - // }; - - // private updateTask = async ( - // req: Request, - // res: Response, - // next: NextFunction - // ): Promise => { - // try { - - // const taskId = req.params.taskId; - // const userId = req.params.userId; - // const reqBody:CreateTaskReqBody = Object.assign({}, req.body); - - // const updatedTask = await this.Taskservice.UpdateTask( - // // req.auth!.uid, - // taskId, - // userId, - // // firebase.auth().currentUser.getIdToken() - // reqBody.nom, - // reqBody.description, - // reqBody.logo, - // reqBody.duration, - // reqBody.done, - // // reqBody.tags, - // reqBody.repepat, - // reqBody.deb, - // reqBody.fin - // ); - // // res.send('Success add'); - // // res.status(201).json({ task }); - // res.status(204).send(`Update a new contact: ${updatedTask}`); - // } catch (error) { - // console.log(error); - // next(new HttpException(403, 'Cannot create post')); - // } - // }; +class Manager { + + // injection de dépences + spotifyService = new SpotifyService(); + userService = new userService(); + + private currentUser = useState(null); + + constructor() { + } + + // spotify methods + apiAuthorization(url: string) { + this.spotifyService.apiAuthorization(url); + } + + getCompleteMusic = async (id: string): Promise => { + // Map info = await spotifyService.getTrackInfo(id); + // return Music(id, info['name'], info['artist'], info['cover']); + } + + removeFromPlaylist(id: string) { + this.spotifyService.removeFromPlaylist(id); + } + + + addToPlaylist(id: string) { + this.spotifyService.addToPlaylist(id); + } + + playTrack(id: string) { + this.spotifyService.playTrack(id); + } + + + //////////////////////////////////////////// + + // private readonly getTaskById: RequestHandler = async ( + // req: Request, + // res: Response, + // next: NextFunction + // ): Promise => { + // try { + // const id = req.params.taskId; + // const userId = req.params.userId; + + // const data = await this.Taskservice.getTaskById(id, userId); + // res.status(201).send(data); + + // } + // catch(error){ + // next(new HttpException(400, 'Cannot create post')); + // } + + // } + + + // private delete = async ( + // req: Request, + // res: Response, + // next: NextFunction + // ): Promise => { + // try { + // const id = req.params.taskId; + // const userId = req.params.userId; + // await this.Taskservice.DeleteTask(id, userId); + // return res.status(200).send({ status: "Success", msg: "Data Removed" }); + // } catch (error) { + // next(new HttpException(400, 'Cannot create post')); + // } + // }; + + // private updateTask = async ( + // req: Request, + // res: Response, + // next: NextFunction + // ): Promise => { + // try { + + // const taskId = req.params.taskId; + // const userId = req.params.userId; + // const reqBody:CreateTaskReqBody = Object.assign({}, req.body); + + // const updatedTask = await this.Taskservice.UpdateTask( + // // req.auth!.uid, + // taskId, + // userId, + // // firebase.auth().currentUser.getIdToken() + // reqBody.nom, + // reqBody.description, + // reqBody.logo, + // reqBody.duration, + // reqBody.done, + // // reqBody.tags, + // reqBody.repepat, + // reqBody.deb, + // reqBody.fin + // ); + // // res.send('Success add'); + // // res.status(201).json({ task }); + // res.status(204).send(`Update a new contact: ${updatedTask}`); + // } catch (error) { + // console.log(error); + // next(new HttpException(403, 'Cannot create post')); + // } + // }; } diff --git a/src/FLAD/Model/Spot.tsx b/src/FLAD/Model/Spot.tsx index 6212dca..714e99c 100644 --- a/src/FLAD/Model/Spot.tsx +++ b/src/FLAD/Model/Spot.tsx @@ -1,22 +1,22 @@ import Music from "./Music"; export class Spot { - private _userId : string; - private _music : Music; - constructor(userId : string, music : Music){ - this._userId = userId; - this._music = music; - } - get userSpotifyId(): string { - return this._userId; - } - set userSpotifyId(value: string) { - this._userId = value; - } - get music(): Music { - return this._music; - } - set music(value: Music) { - this._music = value; - } + private _userId: string; + private _music: Music; + constructor(userId: string, music: Music) { + this._userId = userId; + this._music = music; + } + get userSpotifyId(): string { + return this._userId; + } + set userSpotifyId(value: string) { + this._userId = value; + } + get music(): Music { + return this._music; + } + set music(value: Music) { + this._music = value; + } } \ No newline at end of file diff --git a/src/FLAD/Model/SpotifyToken.tsx b/src/FLAD/Model/SpotifyToken.tsx index d208ef5..ca6bfe6 100644 --- a/src/FLAD/Model/SpotifyToken.tsx +++ b/src/FLAD/Model/SpotifyToken.tsx @@ -1,34 +1,34 @@ -class TokenSpotify { +class TokenSpotify { String _accessToken; final String _refreshToken; late DateTime _tokenEnd; -// TokenSpotify(this._accessToken, this._refreshToken, int expiresIn) { -// _setTokenEnd(expiresIn); -// } + // TokenSpotify(this._accessToken, this._refreshToken, int expiresIn) { + // _setTokenEnd(expiresIn); + // } -// _setTokenEnd(int expiresIn) { -// _tokenEnd = DateTime.now().add(Duration(seconds: expiresIn)); -// } + // _setTokenEnd(int expiresIn) { + // _tokenEnd = DateTime.now().add(Duration(seconds: expiresIn)); + // } -// Future getAccessToken() async { -// if (DateTime.now().isAfter(_tokenEnd)) { -// await _actualiseToken(); -// } -// return _accessToken; -// } + // Future getAccessToken() async { + // if (DateTime.now().isAfter(_tokenEnd)) { + // await _actualiseToken(); + // } + // return _accessToken; + // } -// _actualiseToken() async { -// var urlToken = Uri.https('accounts.spotify.com', 'api/token', { -// 'grant_type': 'refresh_token', -// 'refresh_token': _refreshToken, -// 'client_id': ApiSpotifyIdentification.clientId -// }); -// setResponse(await http.post(urlToken, headers: { -// 'Content-Type': 'application/x-www-form-urlencoded' -// })); -// var decodedResponse = jsonDecode(utf8.decode(response.bodyBytes)) as Map; -// _accessToken = decodedResponse['access_token']; -// _setTokenEnd(decodedResponse['expires_in']); -// } + // _actualiseToken() async { + // var urlToken = Uri.https('accounts.spotify.com', 'api/token', { + // 'grant_type': 'refresh_token', + // 'refresh_token': _refreshToken, + // 'client_id': ApiSpotifyIdentification.clientId + // }); + // setResponse(await http.post(urlToken, headers: { + // 'Content-Type': 'application/x-www-form-urlencoded' + // })); + // var decodedResponse = jsonDecode(utf8.decode(response.bodyBytes)) as Map; + // _accessToken = decodedResponse['access_token']; + // _setTokenEnd(decodedResponse['expires_in']); + // } } \ No newline at end of file diff --git a/src/FLAD/Model/User.tsx b/src/FLAD/Model/User.tsx index d8e6438..57baf3b 100644 --- a/src/FLAD/Model/User.tsx +++ b/src/FLAD/Model/User.tsx @@ -1,42 +1,42 @@ export class User { - //attributes from DAFL - private _idFlad : string; - private _idSpotify : string; - private _email : string; - private _createdAt : Date; - private _name : string; - public image : string = require('../assets/images/jul.png'); - //constructors - constructor(idFlad : string, idSpotify : string, email : string, createdAt : Date, name : string, image : string){ - this._name = name; - this._idFlad = idFlad; - this._idSpotify = idSpotify; - this._createdAt = createdAt; - this._email = email; - this.image = image; - } + //attributes from DAFL + private _idFlad: string; + private _idSpotify: string; + private _email: string; + private _createdAt: Date; + private _name: string; + public image: string = require('../assets/images/jul.png'); + //constructors + constructor(idFlad: string, idSpotify: string, email: string, createdAt: Date, name: string, image: string) { + this._name = name; + this._idFlad = idFlad; + this._idSpotify = idSpotify; + this._createdAt = createdAt; + this._email = email; + this.image = image; + } - get idFlad(): string { - return this._idFlad; - } - get idSpotify(): string { - return this._idSpotify; - } - get email(): string { - return this._email; - } - get createAt(): Date { - return this._createdAt; - } - get name(): string { - return this._name; - } + get idFlad(): string { + return this._idFlad; + } + get idSpotify(): string { + return this._idSpotify; + } + get email(): string { + return this._email; + } + get createAt(): Date { + return this._createdAt; + } + get name(): string { + return this._name; + } - static empty() { - return new User('','','',new Date(),'',require('../assets/images/jul.png')); - } + static empty() { + return new User('', '', '', new Date(), '', require('../assets/images/jul.png')); + } - toString() { - return 'User : ' + this.idFlad + ', ' + this.name + ', ' + this.idSpotify; + toString() { + return 'User : ' + this.idFlad + ', ' + this.name + ', ' + this.idSpotify; } - } \ No newline at end of file +} \ No newline at end of file diff --git a/src/FLAD/assets/GraphicalCharterDark.tsx b/src/FLAD/assets/GraphicalCharterDark.tsx new file mode 100644 index 0000000..9095c3a --- /dev/null +++ b/src/FLAD/assets/GraphicalCharterDark.tsx @@ -0,0 +1,6 @@ +export const GraphicalCharterDark = { + "body": "#141414", + "Text": "white", + "Card": "#232123", + "Line": "#403F3F" +} \ No newline at end of file diff --git a/src/FLAD/assets/GraphicalCharterLight.tsx b/src/FLAD/assets/GraphicalCharterLight.tsx new file mode 100644 index 0000000..0d748b1 --- /dev/null +++ b/src/FLAD/assets/GraphicalCharterLight.tsx @@ -0,0 +1,6 @@ +export const GraphicalCharterLight = { + "body": "#f2f2f6", + "Text": "black", + "Card": "#fff", + "Line": "#e2e2e3" +} \ No newline at end of file diff --git a/src/FLAD/assets/images/Background.png b/src/FLAD/assets/images/Background.png index af7021a..66bbe21 100644 Binary files a/src/FLAD/assets/images/Background.png and b/src/FLAD/assets/images/Background.png differ diff --git a/src/FLAD/assets/images/Background_Start_Page.png b/src/FLAD/assets/images/Background_Start_Page.png index 5d3dd22..64f375c 100644 Binary files a/src/FLAD/assets/images/Background_Start_Page.png and b/src/FLAD/assets/images/Background_Start_Page.png differ diff --git a/src/FLAD/assets/images/Board_Image.png b/src/FLAD/assets/images/Board_Image.png index de93bdd..10532a6 100644 Binary files a/src/FLAD/assets/images/Board_Image.png and b/src/FLAD/assets/images/Board_Image.png differ diff --git a/src/FLAD/assets/images/FLADYCry.png b/src/FLAD/assets/images/FLADYCry.png new file mode 100644 index 0000000..e7079fb Binary files /dev/null and b/src/FLAD/assets/images/FLADYCry.png differ diff --git a/src/FLAD/assets/images/FLADYHate.png b/src/FLAD/assets/images/FLADYHate.png new file mode 100644 index 0000000..da322f7 Binary files /dev/null and b/src/FLAD/assets/images/FLADYHate.png differ diff --git a/src/FLAD/assets/images/FLADYLove.png b/src/FLAD/assets/images/FLADYLove.png new file mode 100644 index 0000000..c03e03d Binary files /dev/null and b/src/FLAD/assets/images/FLADYLove.png differ diff --git a/src/FLAD/assets/images/FLADYStar.png b/src/FLAD/assets/images/FLADYStar.png new file mode 100644 index 0000000..01dc134 Binary files /dev/null and b/src/FLAD/assets/images/FLADYStar.png differ diff --git a/src/FLAD/assets/sounds/Click.mp3 b/src/FLAD/assets/sounds/Click.mp3 new file mode 100644 index 0000000..42d254a Binary files /dev/null and b/src/FLAD/assets/sounds/Click.mp3 differ diff --git a/src/FLAD/components/AdjustSize.tsx b/src/FLAD/components/AdjustSize.tsx new file mode 100644 index 0000000..65142a6 --- /dev/null +++ b/src/FLAD/components/AdjustSize.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +export default function AdjustSize(Text: String) { + const titleLength = Text.length; + const minFontSize = 23; + const maxFontSize = 48; + const fontRatio = 1.1; + const fontSize = Math.max(minFontSize, maxFontSize - (titleLength * fontRatio)); + return fontSize; +} \ No newline at end of file diff --git a/src/FLAD/components/AnimatedParalax.tsx b/src/FLAD/components/AnimatedParalax.tsx index 6f761a4..8cf8304 100644 --- a/src/FLAD/components/AnimatedParalax.tsx +++ b/src/FLAD/components/AnimatedParalax.tsx @@ -2,45 +2,45 @@ import { View, useWindowDimensions } from "react-native"; import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, withTiming } from "react-native-reanimated"; interface SpotProps { - spot: { name: string, sourceUrl: string, index : number }; + spot: { name: string, sourceUrl: string, index: number }; } -const halfPi = Math.PI/2; +const halfPi = Math.PI / 2; -const AnimatedParalax = ({}) => { - const {width, height} = useWindowDimensions(); +const AnimatedParalax = ({ }) => { + const { width, height } = useWindowDimensions(); const sensor = useAnimatedSensor(SensorType.ROTATION); const styleAniamatedImage = useAnimatedStyle(() => { - const {yaw, pitch, roll} = sensor.sensor.value; - const verticalAxis =interpolate( + const { yaw, pitch, roll } = sensor.sensor.value; + const verticalAxis = interpolate( pitch, - [-halfPi,halfPi], + [-halfPi, halfPi], [-25, 25] ) - const horizontalAxis =interpolate( + const horizontalAxis = interpolate( roll, - [-halfPi*2,halfPi*2], + [-halfPi * 2, halfPi * 2], [-35, 35] ) return { - top : verticalAxis, - left : horizontalAxis, + top: verticalAxis, + left: horizontalAxis, }; - + }) return ( - + diff --git a/src/FLAD/components/Artist.tsx b/src/FLAD/components/Artist.tsx index 4c1d4b3..35b3540 100644 --- a/src/FLAD/components/Artist.tsx +++ b/src/FLAD/components/Artist.tsx @@ -1,10 +1,10 @@ import { View, StyleSheet, Dimensions, Image, TouchableOpacity } from "react-native"; import Animated, { - Layout, - ZoomIn, - ZoomOut, - } from "react-native-reanimated"; - + Layout, + ZoomIn, + ZoomOut, +} from "react-native-reanimated"; + const { width } = Dimensions.get("window"); const SIZE = width / 3; import { Feather as Icon } from "@expo/vector-icons"; @@ -14,68 +14,68 @@ import { useRef, useState } from "react"; interface ArtistProps { - artist: Music; - onPress: () => void; - } + artist: Music; + onPress: () => void; +} export const Artist = ({ artist, onPress }: ArtistProps) => { - const source = typeof artist.image === 'string' ? { uri: artist.image } : artist.image; - //@ts-ignore - const onSingleTapEvent = (event) => { - if (event.nativeEvent.state === State.ACTIVE) { - alert('Hey single tap!'); - } - }; - const doubleTapRef = useRef(null); - const [selected,setSeleted] = useState(false); - const onS = () => { - setSeleted(!selected); - onPress(); - }; - return ( - + const source = typeof artist.image === 'string' ? { uri: artist.image } : artist.image; + //@ts-ignore + const onSingleTapEvent = (event) => { + if (event.nativeEvent.state === State.ACTIVE) { + alert('Hey single tap!'); + } + }; + const doubleTapRef = useRef(null); + const [selected, setSeleted] = useState(false); + const onS = () => { + setSeleted(!selected); + onPress(); + }; + return ( + + > - { selected && ( + {selected && ( - + ) } - + - - ); - }; - const styles = StyleSheet.create({ - container: { - width: SIZE, - height: SIZE, - padding: 8, - }, - card: { - flex: 1, - padding: 8, - alignItems: "flex-end", - }, - image: { - borderRadius: 8, - ...StyleSheet.absoluteFillObject, - width: undefined, - height: undefined, - }, - cheked : { - backgroundColor : "white", - borderRadius : 100, - alignItems : "center", + + ); +}; +const styles = StyleSheet.create({ + container: { + width: SIZE, + height: SIZE, + padding: 8, + }, + card: { + flex: 1, + padding: 8, + alignItems: "flex-end", + }, + image: { + borderRadius: 8, + ...StyleSheet.absoluteFillObject, + width: undefined, + height: undefined, + }, + cheked: { + backgroundColor: "white", + borderRadius: 100, + alignItems: "center", - } - }); \ No newline at end of file + } +}); \ No newline at end of file diff --git a/src/FLAD/components/ArtistChip.tsx b/src/FLAD/components/ArtistChip.tsx index 5a7eb2f..3fe22e3 100644 --- a/src/FLAD/components/ArtistChip.tsx +++ b/src/FLAD/components/ArtistChip.tsx @@ -1,49 +1,49 @@ import { useCallback, useState } from 'react'; -import { View, StyleSheet ,Text,Image, Pressable, Linking, Alert} from 'react-native' +import { View, StyleSheet, Text, Image, Pressable, Linking, Alert } from 'react-native' interface ArtistChipProps { - backgroundColor : string; - artist : Artist; + backgroundColor: string; + artist: Artist; } - -const ArtistChip = ({artist} : ArtistChipProps) => { - const handlePress = useCallback(async () => { - // Checking if the link is supported for links with custom URL scheme. - const supported = await Linking.canOpenURL(artist.url); - - if (supported) { - // Opening the link with some app, if the URL scheme is "http" the web link should be opened - // by some browser in the mobile - await Linking.openURL(artist.url); - } else { - Alert.alert(`Don't know how to open this URL: ${artist.url}`); - } - }, [artist.url]); - - return ( + +const ArtistChip = ({ artist }: ArtistChipProps) => { + const handlePress = useCallback(async () => { + // Checking if the link is supported for links with custom URL scheme. + const supported = await Linking.canOpenURL(artist.url); + + if (supported) { + // Opening the link with some app, if the URL scheme is "http" the web link should be opened + // by some browser in the mobile + await Linking.openURL(artist.url); + } else { + Alert.alert(`Don't know how to open this URL: ${artist.url}`); + } + }, [artist.url]); + + return ( + + - - - - + + - - ii - - + + ii - ); - }; - + + + ); +}; + const styles = StyleSheet.create({ - input : { - justifyContent : 'center', - alignItems : 'center', - placeholder : "placeholde" + input: { + justifyContent: 'center', + alignItems: 'center', + placeholder: "placeholde" }, }) diff --git a/src/FLAD/components/Card.tsx b/src/FLAD/components/Card.tsx index 920a44f..f4d6410 100644 --- a/src/FLAD/components/Card.tsx +++ b/src/FLAD/components/Card.tsx @@ -1,7 +1,7 @@ -import { View, Image , Dimensions, StyleSheet } from 'react-native' +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 Animated, { Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'; +import normalize from '../components/Normalize'; import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; const SCREEN_WIDTH = Dimensions.get('window').width @@ -11,251 +11,257 @@ const SCREEN_HEIGHT = Dimensions.get('window').height // const height = wWidht * (465/264); // const borderRadius = 24; interface CardProps { - title: string; - image: any; - onSwipe: (direction: "left" | "right" | "down") => void; - } - type ContextType = { - translateX: number; - translateY: number; - }; - -const Card = ({ title, image, onSwipe } : CardProps) => { - - const translateX = useSharedValue(0); - const translateY = useSharedValue(0); - const scale = useSharedValue(1); - const onGestureEvent = useAnimatedGestureHandler< + title: string; + image: any; + onSwipe: (direction: "left" | "right" | "down") => void; +} +type ContextType = { + translateX: number; + translateY: number; +}; + +const Card = ({ title, image, onSwipe }: CardProps) => { + + const translateX = useSharedValue(0); + const translateY = useSharedValue(0); + const scale = useSharedValue(1); + const onGestureEvent = useAnimatedGestureHandler< PanGestureHandlerGestureEvent, ContextType >({ - onStart : (event, context) => { - context.translateX = translateX.value; - context.translateY = translateY.value; - }, - onActive : (event, context) => { - translateX.value = event.translationX + context.translateX; - translateY.value = event.translationY + context.translateY; - - }, - onEnd : (event, context) => { - console.log(translateX.value - translateY.value); - // console.log(translateY.value); - // translateX.value = withSpring(0); - // translateY.value = withSpring(snapPoint(translateY.value,velocityY, snapPoints )) - if (translateX.value > 160) { - console.log("translateX2"); - runOnJS(onSwipe)("right"); - } else if (translateX.value < -160) { - runOnJS(onSwipe)("left"); - // onSwipe("left"); - }else if (translateY.value > 250) { - runOnJS(onSwipe)("down"); - // onSwipe("left"); - } - - else { - translateX.value = withSpring(0); - translateY.value = withSpring(0); - } - - }, - }); - - -//better to have 2 listerner => 2 useAnimatedStyle ou faire une ftc qui retourne l'verse de une useAnimatedStyle - const opacLStyle = useAnimatedStyle(() => { - const opacityl = interpolate - ( translateX.value, + onStart: (event, context) => { + context.translateX = translateX.value; + context.translateY = translateY.value; + }, + onActive: (event, context) => { + translateX.value = event.translationX + context.translateX; + translateY.value = event.translationY + context.translateY; + + }, + onEnd: (event, context) => { + console.log(translateX.value - translateY.value); + // console.log(translateY.value); + // translateX.value = withSpring(0); + // translateY.value = withSpring(snapPoint(translateY.value,velocityY, snapPoints )) + if (translateX.value > 160) { + console.log("translateX2"); + runOnJS(onSwipe)("right"); + } else if (translateX.value < -160) { + runOnJS(onSwipe)("left"); + // onSwipe("left"); + } else if (translateY.value > 250) { + runOnJS(onSwipe)("down"); + // onSwipe("left"); + } + + else { + translateX.value = withSpring(0); + translateY.value = withSpring(0); + } + + }, + }); + + + //better to have 2 listerner => 2 useAnimatedStyle ou faire une ftc qui retourne l'verse de une useAnimatedStyle + const opacLStyle = useAnimatedStyle(() => { + const opacityl = interpolate + (translateX.value, [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 4], - [ 0,0, 1]); - return { - opacity : opacityl, - }; - }); - const opacRStyle = useAnimatedStyle(() => { - const opacityl = interpolate - ( translateX.value, - [-SCREEN_WIDTH / 4, 0, SCREEN_WIDTH / 2], - [1, 0, 0]); - return { - opacity : opacityl, - }; - }); - - const opacCStyle = useAnimatedStyle(() => { - const opacityl = interpolate - ( 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 - ( translateY.value, - [ 100, 300], - [ 0, 1]); - - return { - opacity : opacityl, - }; - }); - -const horizontalThreshold = SCREEN_WIDTH * 0.65; - - const rotateStyle = useAnimatedStyle(() => { - const rot = interpolate - ( translateX.value, - [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], - [30, 0, 30], - Extrapolate.CLAMP); - return { - transform: [{ rotate: `${rot}deg` },{ - translateX: withSpring(translateX.value), - } ], - - }; - }); - const styleCardsNew = useAnimatedStyle(() => { - const factor = 1; - const rot = interpolate - ( translateX.value, - [0, factor * horizontalThreshold], - [0, 15], - ); - - return { - transform: [ - { scale: scale.value }, - { translateX: translateX.value }, - { translateY: translateY.value }, - { rotateZ: `${rot}deg` }, - ] - - }; - }); - - - // Calculate the distance of the card from its starting position - - const rStyle = useAnimatedStyle(() => { - - return { - transform: [ - { - translateX: translateX.value, - }, - { - translateY: translateY.value, - }, - ], - }; - }); - console.log('==========================================',SCREEN_WIDTH/4 , "==============================="); - return ( - - - - - - - - - - <> - - + [0, 0, 1]); + return { + opacity: opacityl, + }; + }); + const opacRStyle = useAnimatedStyle(() => { + const opacityl = interpolate + (translateX.value, + [-SCREEN_WIDTH / 4, 0, SCREEN_WIDTH / 2], + [1, 0, 0]); + return { + opacity: opacityl, + }; + }); + + const opacCStyle = useAnimatedStyle(() => { + const opacityl = interpolate + (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 + (translateY.value, + [100, 300], + [0, 1]); + + return { + opacity: opacityl, + }; + }); + + const horizontalThreshold = SCREEN_WIDTH * 0.65; + + const rotateStyle = useAnimatedStyle(() => { + const rot = interpolate + (translateX.value, + [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2], + [30, 0, 30], + Extrapolate.CLAMP); + return { + transform: [{ rotate: `${rot}deg` }, { + translateX: withSpring(translateX.value), + }], + + }; + }); + const styleCardsNew = useAnimatedStyle(() => { + const factor = 1; + const rot = interpolate + (translateX.value, + [0, factor * horizontalThreshold], + [0, 15], + ); + + return { + transform: [ + { scale: scale.value }, + { translateX: translateX.value }, + { translateY: translateY.value }, + { rotateZ: `${rot}deg` }, + ] + + }; + }); + + + // Calculate the distance of the card from its starting position + + const rStyle = useAnimatedStyle(() => { + + return { + transform: [ + { + translateX: translateX.value, + }, + { + translateY: translateY.value, + }, + ], + }; + }); + console.log('==========================================', SCREEN_WIDTH / 4, "==============================="); + return ( + + + + + + + + + + <> + + - + style={[{ + width: '100%', + height: '100%', + position: "absolute", + justifyContent: "center", + alignContent: "center", + zIndex: 1000, + elevation: 100, + }, opacLStyle]} + > + - + style={[{ + width: '100%', + height: '100%', + position: "absolute", + justifyContent: "center", + alignContent: "center", + elevation: 100, + zIndex: 1000, + }, opacDStyle]} + > + - - - - - - ); - }; - + + + + + + ); +}; + const styles = StyleSheet.create({ - card : { - justifyContent : 'center', - alignItems : 'center', + card: { + justifyContent: 'center', + alignItems: 'center', }, - image : { - borderRadius : 24, + image: { + borderRadius: 24, resizeMode: 'stretch', - height: 362, - width: 362, -}, -container: { - flex: 1, - width: '100%', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', -} + height: normalize(420), + width: normalize(420), + }, + container: { + flex: 1, + width: '100%', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + } }) export default Card; diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index 89b1602..c46f577 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/src/FLAD/components/CardMusic.tsx @@ -1,75 +1,78 @@ import React from 'react'; -import { StyleSheet, Text, View , Image } from 'react-native'; +import { StyleSheet, Text, View, Image } from 'react-native'; import { SharedElement } from 'react-navigation-shared-element'; import { useSelector } from 'react-redux'; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; import normalize from '../components/Normalize'; type CustomCardMusic = { //Props - image: string; - title: string; - description: string; - id : string; + image: string; + title: string; + description: string; + id: string; } export default function CardMusic(CBP: CustomCardMusic) { - -const currentMusic = useSelector(state => state.appReducer.currentMusic); + const isDark = useSelector(state => state.userReducer.dark); + const style = isDark ? GraphicalCharterLight : GraphicalCharterDark; + const currentMusic = useSelector(state => state.appReducer.currentMusic); const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image; + const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: 15 + }, + imageContainer: { + width: normalize(92), + height: normalize(92), + alignItems: 'center', + justifyContent: 'center', + marginRight: 20, + marginLeft: 20 + }, + image: { + width: '100%', + height: '100%', + borderRadius: 10 + + }, + textContainer: { + flex: 1, + alignItems: 'flex-start', + justifyContent: 'center', + }, + title: { + fontWeight: 'bold', + color: style.Text, + fontSize: normalize(23), + marginBottom: 10 + }, + description: { + color: style.Text, + fontSize: normalize(18) + }, + currentMusic: { + color: 'red' + } + }); return ( - - - - - {/* currentMusic.id === CBP.id && styles.currentMusic */} - {CBP.title} - {CBP.description} - + + + + + {/* currentMusic.id === CBP.id && styles.currentMusic */} + {CBP.title} + {CBP.description} + ); } -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: 15 - }, - imageContainer: { - width: normalize(92), - height: normalize(92), - alignItems: 'center', - justifyContent: 'center', - marginRight: 20, - marginLeft: 20 - }, - image: { - width: '100%', - height: '100%', - borderRadius: 10 - - }, - textContainer: { - flex: 1, - alignItems: 'flex-start', - justifyContent: 'center', - }, - title: { - fontWeight: 'bold', - color: 'white', - fontSize: normalize(23), - marginBottom: 10 - }, - description: { - color: 'white', - fontSize: normalize(18) - }, - currentMusic: { - color: 'red' - } -}); \ No newline at end of file diff --git a/src/FLAD/components/CircularProgressBar.tsx b/src/FLAD/components/CircularProgressBar.tsx index fbe7296..e703147 100644 --- a/src/FLAD/components/CircularProgressBar.tsx +++ b/src/FLAD/components/CircularProgressBar.tsx @@ -1,75 +1,75 @@ import { useState } from 'react'; -import { View, Text, Image ,PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native' +import { View, Text, Image, PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native' import Animated, { interpolate, lessThan, multiply, useAnimatedStyle } from 'react-native-reanimated'; import HalfCirlce from './HalfCircle'; interface CircularProps { - background : string, - foreground : string, - progress : Animated.Value, - radius : number; + background: string, + foreground: string, + progress: Animated.Value, + radius: number; } -const PI= Math.PI; -const FladInput = ({background, foreground, progress} : CircularProps) => { - const [focused, setFocused] = useState(false); - const theta = multiply(progress,2*PI); - const rotateTop = theta; - const opacity = lessThan(theta, PI); +const PI = Math.PI; +const FladInput = ({ background, foreground, progress }: CircularProps) => { + const [focused, setFocused] = useState(false); + const theta = multiply(progress, 2 * PI); + const rotateTop = theta; + const opacity = lessThan(theta, PI); - const rotateAnimation = useAnimatedStyle(() => { - const rotate = interpolate - ( theta, - [PI, 2*PI], - [0,PI]); + const rotateAnimation = useAnimatedStyle(() => { + const rotate = interpolate + (theta, + [PI, 2 * PI], + [0, PI]); + + return { + ...StyleSheet.absoluteFillObject, + transform: [ + { rotate: rotate }, + { translateX: RADUIS / 2 }, + { translateY: RADUIS / 2 } + ], + }; + }); + const rotateAnimation2 = useAnimatedStyle(() => { + const rotate = interpolate + (theta, + [PI, 2 * PI], + [0, PI]); + + return { + ...StyleSheet.absoluteFillObject, + transform: [ + { rotate: theta }, + { translateX: RADUIS / 2 }, + { translateY: RADUIS / 2 } + ], + }; + }); + return ( + <> + + + + + + + + + + + + + ); +}; - return { - ...StyleSheet.absoluteFillObject, - transform: [ - {rotate: rotate}, - {translateX: RADUIS/2}, - {translateY: RADUIS/2} - ], - }; - }); - const rotateAnimation2 = useAnimatedStyle(() => { - const rotate = interpolate - ( theta, - [PI, 2*PI], - [0,PI]); - - return { - ...StyleSheet.absoluteFillObject, - transform: [ - {rotate: theta}, - {translateX: RADUIS/2}, - {translateY: RADUIS/2} - ], - }; - }); - return ( - <> - - - - - - - - - - - - - ); - }; - const styles = StyleSheet.create({ - input : { - justifyContent : 'center', - alignItems : 'center', - placeholder : "placeholde" + input: { + justifyContent: 'center', + alignItems: 'center', + placeholder: "placeholde" }, }) diff --git a/src/FLAD/components/CurrentMusic.tsx b/src/FLAD/components/CurrentMusic.tsx index 09e2ac3..730c0c8 100644 --- a/src/FLAD/components/CurrentMusic.tsx +++ b/src/FLAD/components/CurrentMusic.tsx @@ -91,7 +91,7 @@ import React, { useEffect, useRef } from 'react'; -import { StyleSheet, Text, View , Image } from 'react-native'; +import { StyleSheet, Text, View, Image } from 'react-native'; import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from 'react-native-reanimated'; import { SharedElement } from 'react-navigation-shared-element'; import { useSelector } from 'react-redux'; @@ -110,6 +110,20 @@ export default function CurrentMusic() { return ( + - + }, { overflow: 'hidden' }]}> - + ); } diff --git a/src/FLAD/components/FladLoadingScreen.tsx b/src/FLAD/components/FladLoadingScreen.tsx index 482d73c..629be52 100644 --- a/src/FLAD/components/FladLoadingScreen.tsx +++ b/src/FLAD/components/FladLoadingScreen.tsx @@ -1,113 +1,113 @@ -import { View, Text, Image , Dimensions, StyleSheet } from 'react-native' +import { View, Text, Image, Dimensions, StyleSheet } from 'react-native' import React, { useEffect, useRef, useState } from 'react' -import Animated,{ Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withRepeat, withSpring, withTiming } from 'react-native-reanimated'; +import Animated, { Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withRepeat, withSpring, withTiming } 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 { 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); // const borderRadius = 24; - const size= 100 +const size = 100 const FladLoading = () => { - - const progresse = useSharedValue(1); - - - useEffect(() => { - // withTiming, withSpring - progresse.value =withRepeat( withTiming(0.01,{duration : 750}), -1,true); - }, [progresse]); - - const breatheStyle = useAnimatedStyle(() => { - const borderRange = interpolate - ( progresse.value, - [0, 1], - [(0*size) / 2,(1*size)/2], - ); - return { - justifyContent : 'center', - alignItems : 'center', - width : size, - height : size, - shadowColor : "#DA1D1D", - shadowOffset : {width : 0, height : 0}, - shadowOpacity : 1, - shadowRadius :borderRange, - }; - }); - const breatheStyle2 = useAnimatedStyle(() => { - const borderRange = interpolate - ( progresse.value, - [0, 1], - [(0*size) / 2,(1*size)/2], - ); - return { - - borderRadius : borderRange, - - }; - }); - - const breatheStyleSquare = useAnimatedStyle(() => { - const borderRange = interpolate - ( progresse.value, - [0, 1], - [(size+20),(size)], - ); - return { - - width : borderRange, - height : borderRange, - borderRadius : borderRange/2, - borderWidth : size/10, - borderColor : "#F80404", - shadowColor : "#F40C1C", - shadowOffset : {width : 0, height : 0}, - shadowOpacity : 1, - shadowRadius :10, - }; - }); - - - - return ( - - - - - - {/* + + const progresse = useSharedValue(1); + + + useEffect(() => { + // withTiming, withSpring + progresse.value = withRepeat(withTiming(0.01, { duration: 750 }), -1, true); + }, [progresse]); + + const breatheStyle = useAnimatedStyle(() => { + const borderRange = interpolate + (progresse.value, + [0, 1], + [(0 * size) / 2, (1 * size) / 2], + ); + return { + justifyContent: 'center', + alignItems: 'center', + width: size, + height: size, + shadowColor: "#DA1D1D", + shadowOffset: { width: 0, height: 0 }, + shadowOpacity: 1, + shadowRadius: borderRange, + }; + }); + const breatheStyle2 = useAnimatedStyle(() => { + const borderRange = interpolate + (progresse.value, + [0, 1], + [(0 * size) / 2, (1 * size) / 2], + ); + return { + + borderRadius: borderRange, + + }; + }); + + const breatheStyleSquare = useAnimatedStyle(() => { + const borderRange = interpolate + (progresse.value, + [0, 1], + [(size + 20), (size)], + ); + return { + + width: borderRange, + height: borderRange, + borderRadius: borderRange / 2, + borderWidth: size / 10, + borderColor: "#F80404", + shadowColor: "#F40C1C", + shadowOffset: { width: 0, height: 0 }, + shadowOpacity: 1, + shadowRadius: 10, + }; + }); + + + + return ( + + + + + + {/* */} - - {/* */} - - ); - }; - + {/* */} + + + ); +}; + const styles = StyleSheet.create({ - card : { - justifyContent : 'center', - alignItems : 'center', + card: { + justifyContent: 'center', + alignItems: 'center', }, - image : { - borderRadius : 24, + image: { + borderRadius: 24, resizeMode: 'stretch', - -}, -container: { + + }, + container: { flex: 1, width: '100%', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', -} + } }) export default FladLoading; diff --git a/src/FLAD/components/FladyComponent.tsx b/src/FLAD/components/FladyComponent.tsx new file mode 100644 index 0000000..4dee542 --- /dev/null +++ b/src/FLAD/components/FladyComponent.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { View, Image, StyleSheet } from 'react-native'; +import normalize from './Normalize'; + +type Flady = { + image: string | object; +}; + +export default function FladyComponent(monFlady: Flady) { + const source = typeof monFlady.image === 'string' ? { uri: monFlady.image } : monFlady.image; + return ( + + + + ) +} + +const styles = StyleSheet.create({ + container: { + width: normalize(152), + height: normalize(152), + borderRadius: 90, + marginHorizontal: normalize(15), + overflow: 'hidden', + }, + image: { + width: normalize(220), + height: normalize(220), + marginLeft: -1 + } +}) \ No newline at end of file diff --git a/src/FLAD/components/Genre.tsx b/src/FLAD/components/Genre.tsx index 22f231d..5a8a79d 100644 --- a/src/FLAD/components/Genre.tsx +++ b/src/FLAD/components/Genre.tsx @@ -5,52 +5,52 @@ import { Artist } from "./Artist"; import { StyleSheet } from "react-native"; export const ArtistLayout = () => { - const MUSIC_LIST : Music[] = [ - new Music("La pharmacie", "Jul",require("../assets/images/jul.png")), - new Music("Deux frères", "PNL", require("../assets/images/pnl.png")), - new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"), - new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"), - new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"), - new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"), - new Music("Blanka", "PNL", require("../assets/images/pnl.png")), - new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"), - ] - const [artists, setArtists] = useState(MUSIC_LIST); - const [selectedArtists, setSelectedArtists] = useState ([]); - - return ( - - {artists.map((artist, i) => ( - { - // artists.splice(i, 1); - // // 2 implementation - const tmppArtist = new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"); - - // const existingObjIndex = selectedArtists.findIndex(obj => obj.title === tmppArtist.title); - // if (existingObjIndex === -1) { - // selectedArtists.push(tmppArtist); - // } else { - // selectedArtists.splice(existingObjIndex, 1); - // } - // setSelectedArtists([...selectedArtists]); - // 1 implementation - // setSelectedArtists(selectedArtists.findIndex(obj => obj.title === tmppArtist.title) === -1 - // ? [...selectedArtists, tmppArtist] - // : selectedArtists.filter(obj => obj.title !== tmppArtist.title)) - // 3 implementations - // use the selectedProps of the Artist Component - // then when we need to finish - // onPress{ () => setSelectedArtists([...selectedArtists,artists.filter(artist => artist.selected)])} - - artists.push(tmppArtist); - setArtists([...artists]); - }} - /> - ))} - {/* (MUSIC_LIST); + const [selectedArtists, setSelectedArtists] = useState([]); + + return ( + + {artists.map((artist, i) => ( + { + // artists.splice(i, 1); + // // 2 implementation + const tmppArtist = new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"); + + // const existingObjIndex = selectedArtists.findIndex(obj => obj.title === tmppArtist.title); + // if (existingObjIndex === -1) { + // selectedArtists.push(tmppArtist); + // } else { + // selectedArtists.splice(existingObjIndex, 1); + // } + // setSelectedArtists([...selectedArtists]); + // 1 implementation + // setSelectedArtists(selectedArtists.findIndex(obj => obj.title === tmppArtist.title) === -1 + // ? [...selectedArtists, tmppArtist] + // : selectedArtists.filter(obj => obj.title !== tmppArtist.title)) + // 3 implementations + // use the selectedProps of the Artist Component + // then when we need to finish + // onPress{ () => setSelectedArtists([...selectedArtists,artists.filter(artist => artist.selected)])} + + artists.push(tmppArtist); + setArtists([...artists]); + }} + /> + ))} + {/* { // ListEmptyComponent = {} /> */} - + + + ); +}; - ); - }; - - const styles = StyleSheet.create({ - container: { - flexDirection: "row", - flexWrap: "wrap", - }, - }); \ No newline at end of file +const styles = StyleSheet.create({ + container: { + flexDirection: "row", + flexWrap: "wrap", + }, +}); \ No newline at end of file diff --git a/src/FLAD/components/HalfCircle.tsx b/src/FLAD/components/HalfCircle.tsx index 4058747..e5fd7bc 100644 --- a/src/FLAD/components/HalfCircle.tsx +++ b/src/FLAD/components/HalfCircle.tsx @@ -2,31 +2,31 @@ import { useState } from 'react'; import { View, StyleSheet } from 'react-native' interface HalfCirlceProps { - backgroundColor : string; + backgroundColor: string; } - -const HalfCirlce = ({backgroundColor} : HalfCirlceProps) => { - const [focused, setFocused] = useState(false); - return ( - { + const [focused, setFocused] = useState(false); - }}> - + return ( + + + + + + ); +}; - - - ); - }; - const styles = StyleSheet.create({ - input : { - justifyContent : 'center', - alignItems : 'center', - placeholder : "placeholde" + input: { + justifyContent: 'center', + alignItems: 'center', + placeholder: "placeholde" }, }) diff --git a/src/FLAD/components/HorizontalFlatList.tsx b/src/FLAD/components/HorizontalFlatList.tsx index f701e38..b4ddfba 100644 --- a/src/FLAD/components/HorizontalFlatList.tsx +++ b/src/FLAD/components/HorizontalFlatList.tsx @@ -1,11 +1,11 @@ -import { View, StyleSheet, Dimensions,Text, Image, Pressable, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight, FlatList } from "react-native"; +import { View, StyleSheet, Dimensions, Text, Image, Pressable, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight, FlatList } from "react-native"; import Animated, { - Layout, - Transition, - ZoomIn, - ZoomOut, - } from "react-native-reanimated"; - + Layout, + Transition, + ZoomIn, + ZoomOut, +} from "react-native-reanimated"; + const { width } = Dimensions.get("window"); const SIZE = width / 3; import { Feather as Icon } from "@expo/vector-icons"; @@ -16,35 +16,35 @@ import { RenderCellProps } from "./littleCard"; interface HorizontalFlatListProps { - // React.ReactNode; - children:(props: RenderCellProps) => React.ReactElement - title : string; - data : any[]; - } -export const HorizontalFlatList = ({ title, data, children : RenderCell }: HorizontalFlatListProps) => { - + // React.ReactNode; + children: (props: RenderCellProps) => React.ReactElement + title: string; + data: any[]; +} +export const HorizontalFlatList = ({ title, data, children: RenderCell }: HorizontalFlatListProps) => { - return ( - - {title} - item.id} - renderItem={({ item }) => RenderCell(item)}/> - ); - }; - const styles = StyleSheet.create({ - similarSection: { - paddingTop: 16 - }, - similarTitle: { - color: "#FFF", - paddingLeft: 8, - fontSize: 24, - fontWeight: "600", - paddingBottom: 16 - } - }); \ No newline at end of file + return ( + + {title} + item.id} + renderItem={({ item }) => RenderCell(item)} /> + ); +}; +const styles = StyleSheet.create({ + similarSection: { + paddingTop: 16 + }, + similarTitle: { + color: "#FFF", + paddingLeft: 8, + fontSize: 24, + fontWeight: "600", + paddingBottom: 16 + } + +}); \ No newline at end of file diff --git a/src/FLAD/components/NextButton.tsx b/src/FLAD/components/NextButton.tsx index 47b5bd6..3090ef7 100644 --- a/src/FLAD/components/NextButton.tsx +++ b/src/FLAD/components/NextButton.tsx @@ -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; @@ -40,7 +43,7 @@ export default function NextButton({ percentage, scrollTo }) { }); } - }, + }, // @ts-ignore [percentage] @@ -56,11 +59,11 @@ export default function NextButton({ percentage, scrollTo }) { - + { - if(currentIndex < slides.length - 1) { + if (currentIndex < slides.length - 1) { // @ts-ignore slidesRef.current.scrollToIndex({ index: currentIndex + 1 }); } else { @@ -34,13 +36,119 @@ export default function Onboarding() { } }; + const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: style.body + }, + 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: '#DA1D1D', + borderRadius: 11, + borderColor: '#F40C1C', + 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) + } + }) + + return ( // @ts-ignore - } + } horizontal showsHorizontalScrollIndicator={false} pagingEnabled @@ -50,12 +158,12 @@ export default function Onboarding() { useNativeDriver: false, })} scrollEventThrottle={32} - onViewableItemsChanged={viewableItemsChanged} + onViewableItemsChanged={viewableItemsChanged} viewabilityConfig={viewConfig} ref={slidesRef} - /> - - + /> + + @@ -66,23 +174,24 @@ export default function Onboarding() { - + - - {handleModal(); - // @ts-ignore - navigation.navigate('Login'); - }}> + + { + handleModal(); + // @ts-ignore + navigation.navigate('Login'); + }}> CONTINUER AVEC SPOTIFY - {handleModal(); navigation.navigate('Register');}}> + { handleModal(); navigation.navigate('Register'); }}> S’INSCRIRE MAINTENANT - - {handleModal(); navigation.navigate('Login');}}> + + { handleModal(); navigation.navigate('Login'); }}> SE CONNECTER @@ -92,108 +201,3 @@ export default function Onboarding() { ); } - -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: '#DA1D1D', - borderRadius: 11, - borderColor: '#F40C1C', - 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/OnboardingItem.tsx b/src/FLAD/components/OnboardingItem.tsx index 0846358..9feb16f 100644 --- a/src/FLAD/components/OnboardingItem.tsx +++ b/src/FLAD/components/OnboardingItem.tsx @@ -1,11 +1,43 @@ 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(); - + const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: normalize(60), + backgroundColor: style.body + }, + image: { + width: '100%', + height: '100%', + justifyContent: 'center' + }, + title: { + fontWeight: '800', + fontSize: normalize(32), + marginBottom: 10, + color: style.Text, + textAlign: 'left', + paddingRight: 30, + paddingLeft: 20, + marginTop: normalize(30) + }, + description: { + fontWeight: '300', + color: style.Text, + fontSize: normalize(16), + textAlign: 'left', + paddingRight: 30, + paddingLeft: 20 + } + }) return ( @@ -17,33 +49,3 @@ export default function Onboarding({ item }) { ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - marginTop: normalize(60), - backgroundColor: '#141414' - }, - image: { - width: '100%', - height: '100%', - justifyContent: 'center' - }, - title: { - fontWeight: '800', - fontSize: normalize(32), - marginBottom: 10, - color: 'white', - textAlign: 'left', - paddingRight: 30, - paddingLeft: 20, - marginTop: normalize(30) - }, - description: { - fontWeight: '300', - color: 'white', - fontSize: normalize(16), - textAlign: 'left', - paddingRight: 30, - paddingLeft: 20 - } -}) diff --git a/src/FLAD/components/Paginator.tsx b/src/FLAD/components/Paginator.tsx index a5d69cb..8252a6e 100644 --- a/src/FLAD/components/Paginator.tsx +++ b/src/FLAD/components/Paginator.tsx @@ -7,7 +7,7 @@ export default function Paginator({ data, scrollX }) { const { width } = useWindowDimensions(); return ( - + {data.map((_, i) => { const inputRange = [(i - 1) * width, i * width, (i + 1) * width]; @@ -23,14 +23,14 @@ export default function Paginator({ data, scrollX }) { extrapolate: 'clamp' }) - return })} diff --git a/src/FLAD/components/SelectedCard.tsx b/src/FLAD/components/SelectedCard.tsx index 8a05ce5..2c74ce6 100644 --- a/src/FLAD/components/SelectedCard.tsx +++ b/src/FLAD/components/SelectedCard.tsx @@ -1,11 +1,11 @@ import { View, StyleSheet, Dimensions, Image, Pressable, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight } from "react-native"; import Animated, { - Layout, - Transition, - ZoomIn, - ZoomOut, - } from "react-native-reanimated"; - + Layout, + Transition, + ZoomIn, + ZoomOut, +} from "react-native-reanimated"; + const { width } = Dimensions.get("window"); const SIZE = width / 3; import { Feather as Icon } from "@expo/vector-icons"; @@ -15,60 +15,60 @@ import { useRef, useState } from "react"; interface SelectedCardProps { - artist: Music; - onPress: () => void; - // cheepPosition: string ;(direction: "left" | "right" | "down") - } -export const SelectedCard = ({ artist, onPress }: SelectedCardProps) => { - const [selected,setSeleted] = useState(false); - const onS = () => { - setSeleted(!selected); - onPress(); - }; + artist: Music; + onPress: () => void; + // cheepPosition: string ;(direction: "left" | "right" | "down") +} +export const SelectedCard = ({ artist, onPress }: SelectedCardProps) => { + const [selected, setSeleted] = useState(false); + const onS = () => { + setSeleted(!selected); + onPress(); + }; - return ( - - + return ( + + - { selected && ( + {selected && ( - + - )} - + )} + - - ); - }; - const styles = StyleSheet.create({ - container: { - width: SIZE, - height: SIZE, - padding: 8, - }, - card: { - flex: 1, - padding: 8, - alignItems: "flex-end", - }, - image: { - borderRadius: 8, - ...StyleSheet.absoluteFillObject, - width: undefined, - height: undefined, - }, - cheked : { - backgroundColor : "white", - borderRadius : 100, - alignItems : "center", + + ); +}; +const styles = StyleSheet.create({ + container: { + width: SIZE, + height: SIZE, + padding: 8, + }, + card: { + flex: 1, + padding: 8, + alignItems: "flex-end", + }, + image: { + borderRadius: 8, + ...StyleSheet.absoluteFillObject, + width: undefined, + height: undefined, + }, + cheked: { + backgroundColor: "white", + borderRadius: 100, + alignItems: "center", - } - }); \ No newline at end of file + } +}); \ No newline at end of file diff --git a/src/FLAD/components/input.tsx b/src/FLAD/components/input.tsx index 3de3b78..4f95757 100644 --- a/src/FLAD/components/input.tsx +++ b/src/FLAD/components/input.tsx @@ -1,29 +1,29 @@ import { useState } from 'react'; -import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native' +import { View, Text, Image, Animated, PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native' interface InputProps { - name : string; - placeholder : string; + name: string; + placeholder: string; } - -const FladInput = ({name, placeholder} : InputProps) => { - const [focused, setFocused] = useState(false); - return ( - - - +const FladInput = ({ name, placeholder }: InputProps) => { + const [focused, setFocused] = useState(false); + + return ( + + + + + + + ); +}; - - - ); - }; - const styles = StyleSheet.create({ - input : { - justifyContent : 'center', - alignItems : 'center', - placeholder : "placeholde" + input: { + justifyContent: 'center', + alignItems: 'center', + placeholder: "placeholde" }, }) diff --git a/src/FLAD/components/littleCard.tsx b/src/FLAD/components/littleCard.tsx index 0b0e0d3..730e777 100644 --- a/src/FLAD/components/littleCard.tsx +++ b/src/FLAD/components/littleCard.tsx @@ -1,17 +1,17 @@ -import {TouchableOpacity, ScrollView, View, Text, StyleSheet, Image, SafeAreaView, FlatList, Animated} from 'react-native'; +import { TouchableOpacity, ScrollView, View, Text, StyleSheet, Image, SafeAreaView, FlatList, Animated } from 'react-native'; export interface RenderCellProps { image: string; title: string; - } -export const LittleCard = (props : RenderCellProps)=>{ - console.log('==============='+ props.image + props.title+ '==ok============'); +} +export const LittleCard = (props: RenderCellProps) => { + console.log('===============' + props.image + props.title + '==ok============'); return ( - - - {props.title} - - + + + {props.title} + + ) } diff --git a/src/FLAD/data/data.ts b/src/FLAD/data/data.ts index bc3ee42..1902083 100644 --- a/src/FLAD/data/data.ts +++ b/src/FLAD/data/data.ts @@ -1,46 +1,46 @@ import Music from "../Model/Music"; import { Spot } from "../Model/Spot"; -export const cards= [{ - name : "blue", - sourceUrl : "https://th.bing.com/th/id/R.dbf87f0d8cbfd078ab6a589a5d921994?rik=1%2f6KliMpOAeh8A&pid=ImgRaw&r=0", - index : 4 +export const cards = [{ + name: "blue", + sourceUrl: "https://th.bing.com/th/id/R.dbf87f0d8cbfd078ab6a589a5d921994?rik=1%2f6KliMpOAeh8A&pid=ImgRaw&r=0", + index: 4 }, { - musicName : "Breathin", - name : "Ariana Grande", - sourceUrl : "https://i.ebayimg.com/images/g/rY0AAOSw97djEo2C/s-l500.jpg", - index : 9 + 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: "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 + musicName: "Bambina", + name: "PNL", + sourceUrl: "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png", + index: 10 }, { - 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: "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: "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 + musicName: "Lakehouse", + name: "Stratos", + sourceUrl: "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png", + index: 89 }, ] diff --git a/src/FLAD/data/slides.tsx b/src/FLAD/data/slides.tsx index 1659da4..610d95e 100644 --- a/src/FLAD/data/slides.tsx +++ b/src/FLAD/data/slides.tsx @@ -1,20 +1,20 @@ export default [ { - id: '1', - title: 'Bienvenue sur Flad', - description: 'L\'application pour découvrir de nouvelles musiques et vous faire de nouveaux amis', - image: require('../assets/images/Board_Image.png') + id: '1', + title: 'Bienvenue sur Flad', + description: 'L\'application pour découvrir de nouvelles musiques et vous faire de nouveaux amis', + image: require('../assets/images/Board_Image.png') }, { - id: '2', - title: 'Tous les jours de nouvelles musiques qui peuvent vous plaire', - description: 'L\'application apprends de vous et de vos amis pour vous suggérer des albums et des musics', - image: require('../assets/images/Board_Image2.png') + id: '2', + title: 'Tous les jours de nouvelles musiques qui peuvent vous plaire', + description: 'L\'application apprends de vous et de vos amis pour vous suggérer des albums et des musics', + image: require('../assets/images/Board_Image2.png') }, { - id: '3', - title: 'La musique ça se partage', - description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques', - image: require('../assets/images/Board_Image3.png') + id: '3', + title: 'La musique ça se partage', + description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques', + image: require('../assets/images/Board_Image3.png') } ] \ No newline at end of file diff --git a/src/FLAD/model/Music.ts b/src/FLAD/model/Music.ts index 2d21e6a..92f9042 100644 --- a/src/FLAD/model/Music.ts +++ b/src/FLAD/model/Music.ts @@ -1,11 +1,11 @@ export default class Music { - private _id : string; + private _id: string; private _title: string; private _bio: string; private _image: string; - private _trackPreviewUrl : string; + private _trackPreviewUrl: string; - constructor(id : string,title: string, bio: string, image: string, trackPreviewUrl: string) { + constructor(id: string, title: string, bio: string, image: string, trackPreviewUrl: string) { this._title = title; this._bio = bio; this._image = image; diff --git a/src/FLAD/navigation/AuthNavigation.tsx b/src/FLAD/navigation/AuthNavigation.tsx index ee8d9ee..8c220dd 100644 --- a/src/FLAD/navigation/AuthNavigation.tsx +++ b/src/FLAD/navigation/AuthNavigation.tsx @@ -1,5 +1,5 @@ import Navigation from './Navigation'; -import { StyleSheet,SafeAreaView } from 'react-native'; +import { StyleSheet, SafeAreaView } from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import StartNavigation from './StartNavigation'; import { Provider, useDispatch, useSelector } from 'react-redux'; @@ -13,10 +13,12 @@ import * as Location from 'expo-location'; // const LOCATION_TASK_NAME = 'flad-background-location-task'; export default function AuthNavigation() { - //@ts-ignore - const tokenProcesed : boolean = useSelector(state => state.userReducer.loading); //@ts-ignore - const isLogin : boolean = useSelector(state => state.userReducer.isLogedIn); + const tokenProcesed: boolean = useSelector(state => state.userReducer.loading); + // //@ts-ignore + // const appIsReady: boolean = useSelector(state => state.userReducer.loading); + //@ts-ignore + const isLogin: boolean = useSelector(state => state.userReducer.isLogedIn); // const userToken : string = useSelector(state => state.userReducer.userFladToken); const [appIsReady, setAppIsReady] = useState(false); const dispatch = useDispatch(); @@ -25,18 +27,18 @@ export default function AuthNavigation() { const [errorMsg, setErrorMsg] = useState(''); -// // seems background task but not optimized -// TaskManager.defineTask(LOCATION_TASK_NAME, async ({ data, error }) => { -// if (error) { -// console.log(error); -// return; -// } -// if (data) { -// const { locations } = data; -// // send location updates to server -// console.log(locations); -// } -// }); + // // seems background task but not optimized + // TaskManager.defineTask(LOCATION_TASK_NAME, async ({ data, error }) => { + // if (error) { + // console.log(error); + // return; + // } + // if (data) { + // const { locations } = data; + // // send location updates to server + // console.log(locations); + // } + // }); // const startLocationUpdates = async () => { // try { // await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, { @@ -62,17 +64,17 @@ export default function AuthNavigation() { useEffect(() => { async function prepare() { - //@ts-ignore + //@ts-ignore await dispatch(getRefreshToken()) - if (tokenProcesed && appIsReady ) { + if (tokenProcesed && appIsReady) { await SplashScreen.hideAsync(); } // await SplashScreen.hideAsync(); } prepare(); - }, [appIsReady,tokenProcesed]); + }, [appIsReady, tokenProcesed]); // const onStackRootView = useCallback(async () => { - + // }, [appIsReady]); // useEffect(() => { // const sendLocationUpdate = async () => { @@ -89,7 +91,7 @@ export default function AuthNavigation() { // // send location to server // console.log(locationresp); // if(locationresp !=location ){ - + // } // console.log(location); // } @@ -113,21 +115,16 @@ export default function AuthNavigation() { } // console.log(userToken, "k9 AuthNav") - return ( - <> - {isLogin ? ( - /* {userToken != null ? ( */ - // should set the reference to the function in Navigation to realy perform an on ready - // test purpose - setAppIsReady(true)}> - - - - ) : - setAppIsReady(true)}> - - - } - - ) - } + return ( + setAppIsReady(true)}> + {isLogin ? ( + /* {userToken != null ? ( */ + // should set the reference to the function in Navigation to realy perform an on ready + // test purpose + + ) : + + } + + ) +} diff --git a/src/FLAD/navigation/FavoriteNavigation.tsx b/src/FLAD/navigation/FavoriteNavigation.tsx index deaac9b..7cd3f53 100644 --- a/src/FLAD/navigation/FavoriteNavigation.tsx +++ b/src/FLAD/navigation/FavoriteNavigation.tsx @@ -9,22 +9,22 @@ import CurrentMusic from '../components/CurrentMusic'; const Stack = createSharedElementStackNavigator(); export default function MusicNavigation() { - return ( - - - {return [route.params.music.id]}} - /> - - - ) - } \ No newline at end of file + return ( + + + { return [route.params.music.id] }} + /> + + + ) +} \ No newline at end of file diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx index eba9bb6..a5d3b55 100644 --- a/src/FLAD/navigation/Navigation.tsx +++ b/src/FLAD/navigation/Navigation.tsx @@ -13,88 +13,100 @@ import Login from '../screens/login'; import FladLoading from '../components/FladLoadingScreen'; import { useDispatch, useSelector } from 'react-redux'; import { getFavoritesMusic } from '../redux/actions/appActions'; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; +import { getCurrentUserMusic } from '../redux/thunk/spotThunk'; +import SpotifyService from '../services/spotify/spotify.service'; // import { fetchFavoritesMusic } from '../redux/thunk/spotThunk'; export default function Navigation() { + const isDark = useSelector(state => state.userReducer.dark); + const style = isDark ? GraphicalCharterLight : GraphicalCharterDark; const BottomTabNavigator = createBottomTabNavigator(); const MyTheme = { dark: false, colors: { primary: 'rgb(255, 45, 85)', - card: 'rgb(35, 33, 35)', - border: 'rgb(35, 33, 35)', + card: style.Card, + border: style.Card, text: 'rgb(138, 138, 138)', } }; //@ts-ignore - const favoritesMusicLength : number = useSelector(state => state.appReducer.favoriteMusic.length); - // const dispatch = useDispatch(); + const favoritesMusicLength: number = useSelector(state => state.appReducer.favoriteMusic.length); + const dispatch = useDispatch(); // useEffect(() => { // const loadFavoritesMusics = async () => { // await dispatch(fetchFavoritesMusic()); // }; // loadFavoritesMusics(); // }, [dispatch]); - return ( - // @ts-ignore - - { + const service = new SpotifyService(token) + dispatch(getCurrentUserMusic(service)) + } - }}> - , - }}/> - { + sheet() + }, []); + return ( + // @ts-ignore + + , - }}/> - , - }}/> - , - }}/> - - + }}> + , + }} /> + , + }} /> + , + }} /> + , + }} /> + + ) } function TabBarIcon(props: { - name: React.ComponentProps['name']; - color: string; + name: React.ComponentProps['name']; + color: string; }) { - return ; + return ; } const styles = StyleSheet.create({ tabBar: { - height: 60, - position: 'absolute', - bottom: normalize(50), - borderRadius: 30, + height: 60, + position: 'absolute', + bottom: normalize(50), + borderRadius: 30, marginHorizontal: 25 }, IconContainer: { - position: 'absolute', - top: 5, + position: 'absolute', + top: 5, } }) \ No newline at end of file diff --git a/src/FLAD/navigation/SettingNavigation.tsx b/src/FLAD/navigation/SettingNavigation.tsx index 30142d0..e7a27c8 100644 --- a/src/FLAD/navigation/SettingNavigation.tsx +++ b/src/FLAD/navigation/SettingNavigation.tsx @@ -4,19 +4,19 @@ import SettingProfil from '../screens/SettingProfil'; import { createStackNavigator } from '@react-navigation/stack'; export default function SettingNavigation() { - const Stack = createStackNavigator(); - return ( - - - - - ) - } \ No newline at end of file + const Stack = createStackNavigator(); + return ( + + + + + ) +} \ No newline at end of file diff --git a/src/FLAD/navigation/SpotNavigation.tsx b/src/FLAD/navigation/SpotNavigation.tsx index 645c644..c3c6863 100644 --- a/src/FLAD/navigation/SpotNavigation.tsx +++ b/src/FLAD/navigation/SpotNavigation.tsx @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import FavoritePage from '../screens/favorite'; import { createStackNavigator } from '@react-navigation/stack'; import SpotPage from '../screens/spot' @@ -8,32 +8,32 @@ import MusicDetail from '../screens/MusicDetail'; export default function SpotNavigation() { - // const Stack = createSharedElementStackNavigator(); - const Stack = createStackNavigator(); + // const Stack = createSharedElementStackNavigator(); + const Stack = createStackNavigator(); - return ( - - - - {/* + + + {/* { return [route.params.spot.name] }} /> */} - - ) - } \ No newline at end of file + + ) +} \ No newline at end of file diff --git a/src/FLAD/navigation/StartNavigation.tsx b/src/FLAD/navigation/StartNavigation.tsx index 99cc641..8770e9d 100644 --- a/src/FLAD/navigation/StartNavigation.tsx +++ b/src/FLAD/navigation/StartNavigation.tsx @@ -4,7 +4,7 @@ import Register from '../screens/Register'; import Onboarding from '../components/Onboarding'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; -import {useDispatch, useSelector} from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import * as SplashScreen from 'expo-splash-screen'; import { getRefreshToken } from '../redux/thunk/authThunk'; import { ArtistLayout } from '../components/Genre'; @@ -31,27 +31,27 @@ export default function StartNavigation() { // if (!appIsReady) { // return null; // } - const Stack = createStackNavigator(); - return ( - - - - - - - + const Stack = createStackNavigator(); + return ( + + + + + + + - ) - } \ No newline at end of file + ) +} \ No newline at end of file diff --git a/src/FLAD/redux/actions/userActions.tsx b/src/FLAD/redux/actions/userActions.tsx index 2d43cc5..7164c60 100644 --- a/src/FLAD/redux/actions/userActions.tsx +++ b/src/FLAD/redux/actions/userActions.tsx @@ -44,4 +44,9 @@ export const userSignUp = (user : User) => { type: userTypes.USER_LOGOUT, }; } - \ No newline at end of file + + export const userChangeMode = () => { + return { + type: userTypes.CHANGE_MODE, + }; + } \ No newline at end of file diff --git a/src/FLAD/redux/reducers/appReducer.tsx b/src/FLAD/redux/reducers/appReducer.tsx index 1be550f..bf53a69 100644 --- a/src/FLAD/redux/reducers/appReducer.tsx +++ b/src/FLAD/redux/reducers/appReducer.tsx @@ -5,32 +5,32 @@ import { favoritesTypes } from "../types/favoritesTypes"; import { spotifyTypes } from "../types/spotifyTypes"; import { spotTypes } from "../types/spotTypes"; let tmpMusic: Music[] = [ - new Music("03o8WSqd2K5rkGvn9IsLy2","Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg","https://p.scdn.co/mp3-preview/c55f95de81b8c3d0df04148da1b03bd38db56e8f?cid=774b29d4f13844c495f206cafdad9c86"), - new Music("6DPrYPPGYK218iVIZDix3i","Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png","https://p.scdn.co/mp3-preview/a9f9cb19ac1fe6db0d06b67decf8edbb25895a33?cid=774b29d4f13844c495f206cafdad9c86"), - new Music("5GFHFEASZeJF0gyWuDDjGE","Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","https://p.scdn.co/mp3-preview/9e854f4905c1228482e390169eb76d8520076b8f?cid=774b29d4f13844c495f206cafdad9c86"), + new Music("03o8WSqd2K5rkGvn9IsLy2", "Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg", "https://p.scdn.co/mp3-preview/c55f95de81b8c3d0df04148da1b03bd38db56e8f?cid=774b29d4f13844c495f206cafdad9c86"), + new Music("6DPrYPPGYK218iVIZDix3i", "Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png", "https://p.scdn.co/mp3-preview/a9f9cb19ac1fe6db0d06b67decf8edbb25895a33?cid=774b29d4f13844c495f206cafdad9c86"), + new Music("5GFHFEASZeJF0gyWuDDjGE", "Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png", "https://p.scdn.co/mp3-preview/9e854f4905c1228482e390169eb76d8520076b8f?cid=774b29d4f13844c495f206cafdad9c86"), ]; const initialState = { spot: [] as Spot[], favoriteMusic: tmpMusic, - userCurrentMusic : null + userCurrentMusic: null } -const appReducer = (state = initialState, action : any) => { +const appReducer = (state = initialState, action: any) => { switch (action.type) { - case favoritesTypes.GET_FAVORITE_MUSICS: - return {...state, favoriteMusic: action.playload}; - case favoritesTypes.ADD_FAVORITE_MUSICS: - return {...state, favoriteMusic: [action.playload, ...state.favoriteMusic]}; - case favoritesTypes.REMOVE_FAVORITE_MUSICS: - return {...state, favoriteMusic: state.favoriteMusic}; - case spotTypes.FETCH_SPOT: - return {...state, spot: action.payload}; - case discoveriesTypes.FETCH_DISCOVERIES: - return; - case spotifyTypes.GET_USER_CURRENT_MUSIC: - return {...state, userCurrentMusic: action.payload}; - default: - return state; + case favoritesTypes.GET_FAVORITE_MUSICS: + return { ...state, favoriteMusic: action.playload }; + case favoritesTypes.ADD_FAVORITE_MUSICS: + return { ...state, favoriteMusic: [action.playload, ...state.favoriteMusic] }; + case favoritesTypes.REMOVE_FAVORITE_MUSICS: + return { ...state, favoriteMusic: state.favoriteMusic }; + case spotTypes.FETCH_SPOT: + return { ...state, spot: action.payload }; + case discoveriesTypes.FETCH_DISCOVERIES: + return; + case spotifyTypes.GET_USER_CURRENT_MUSIC: + return { ...state, userCurrentMusic: action.playload }; + default: + return state; } } diff --git a/src/FLAD/redux/reducers/spotifyAuthReducer.tsx b/src/FLAD/redux/reducers/spotifyAuthReducer.tsx deleted file mode 100644 index dc241e7..0000000 --- a/src/FLAD/redux/reducers/spotifyAuthReducer.tsx +++ /dev/null @@ -1,18 +0,0 @@ - -Uri getApiUrlAuthorize() => _api.identification.urlAuthorize; - -String getApiRedirectUrl() => _api.identification.redirectUri; - -String getIdSpotify() => _currentUser.idSpotify; - -String getIdFlad() => _currentUser.idFlad; - - -case getCompleteMusic - -playTrack(String id) - - case addToPlaylist: - return {...state, spot: action.payload} - - case removeFromPlaylist: diff --git a/src/FLAD/redux/reducers/userReducer.tsx b/src/FLAD/redux/reducers/userReducer.tsx index 64b2212..908bef2 100644 --- a/src/FLAD/redux/reducers/userReducer.tsx +++ b/src/FLAD/redux/reducers/userReducer.tsx @@ -4,56 +4,60 @@ const initialState = { loading: false, user: User, // for user object userFladToken: "", // for storing the JWT - userSpotifyToken : null, + userSpotifyToken: null, error: null, isLogedIn: false, - } - - const userReducer = (state = initialState, action : any) => { - switch (action.type) { - // just for the navigation and speciafly use - // and - case userTypes.RESTORE_TOKEN: - const resp = (action.playload == "" ? false : true) - console.log(resp, "si il ya le tokennen ou passssssssssss") - return { - ...state, - userFladToken : action.playload, - loading: true, - isLogedIn: resp, - }; - case userTypes.LOGIN: - console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); - console.log(action.playload, "LOOGGIIINN"); - console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); - return { - ...state, - user :action.playload, - isLogedIn: true - }; - case userTypes.SIGNUP: - console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); + dark: false, +} - console.log(action.playload, "LOOGGIIINN"); - console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); +const userReducer = (state = initialState, action: any) => { + switch (action.type) { + // just for the navigation and speciafly use + // and + case userTypes.RESTORE_TOKEN: + const resp = (action.playload == "" ? false : true) + console.log(resp, "si il ya le tokennen ou passssssssssss") + return { + ...state, + userFladToken: action.playload, + loading: true, + isLogedIn: resp, + }; + case userTypes.LOGIN: + console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); + console.log(action.playload, "LOOGGIIINN"); + console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); + return { + ...state, + user: action.playload, + isLogedIn: true + }; + case userTypes.SIGNUP: + console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); + + console.log(action.playload, "LOOGGIIINN"); + console.log("++++++++++++++++++++++++++++++++++++++userRducer+++++++++++++++++++++++++++++3"); + return { + ...state, + user: action.playload, + isLogedIn: true + }; + case userTypes.USER_LOGOUT: + return { + ...state, + user: null, + isLogedIn: false + } + case userTypes.SAVE_SPOTIFY: return { ...state, - user :action.playload, - isLogedIn: true + userSpotifyToken: action.playload, }; - case userTypes.USER_LOGOUT: - return {...state, - user :null, - isLogedIn: false } - case userTypes.SAVE_SPOTIFY: - return { - ...state, - userSpotifyToken : action.playload, - }; - default: - return state; - } + case userTypes.CHANGE_MODE: + return { ...state, dark: !state.dark } + default: + return state; } - export default userReducer +} +export default userReducer - \ No newline at end of file diff --git a/src/FLAD/redux/store.tsx b/src/FLAD/redux/store.tsx index 79b0b19..2d1d04e 100644 --- a/src/FLAD/redux/store.tsx +++ b/src/FLAD/redux/store.tsx @@ -1,4 +1,4 @@ -import {configureStore} from '@reduxjs/toolkit' +import { configureStore } from '@reduxjs/toolkit' import appReducer from './reducers/appReducer'; import userReducer from './reducers/userReducer'; @@ -9,7 +9,7 @@ const reducer = { } const store = configureStore({ - reducer : reducer, + reducer: reducer, },); export default store; \ No newline at end of file diff --git a/src/FLAD/redux/thunk/authThunk.tsx b/src/FLAD/redux/thunk/authThunk.tsx index 1e51f32..f6931e1 100644 --- a/src/FLAD/redux/thunk/authThunk.tsx +++ b/src/FLAD/redux/thunk/authThunk.tsx @@ -4,145 +4,168 @@ import axios from "axios"; import { json } from "express"; import { useEffect } from "react"; import { API_URL } from "../../fladConfig"; -import { Credentials, CredentialsRegister, restoreToken, setLoginState, userSignUp } from "../actions/userActions"; +import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout, userChangeMode, userSignUp } from "../actions/userActions"; import * as SecureStore from 'expo-secure-store'; import { User } from "../../Model/User"; import { UserFactory } from "../../Model/factory/UserFactory"; const key = 'userToken'; - + export const registerUser = ( resgisterCredential : CredentialsRegister) => { - //@ts-ignore - return async dispatch => { - try { - console.log(resgisterCredential); + //@ts-ignore + return async dispatch => { + try { + console.log(resgisterCredential); - const config = { - headers: { - 'Content-Type': 'application/json', - }, - } - const resp = await axios.post( - `${API_URL}/api/users/register`, - resgisterCredential, - config - ) - - if (resp.data.token) { - console.log(resp.data.token); - const token = resp.data.token; - // await SecureStore.setItemAsync(key, token); - const headers = { - 'Authorization': 'Bearer ' + token}; - const user = await axios.get( - "https://flad-api-production.up.railway.app/api/users", - {headers} - ) - dispatch(userSignUp( UserFactory.JsonToModel(user.data) )); // our action is called here - // console.log(user.data); - // dispatch(setLoginState(user.data) ); // our action is called here - } else { - console.log('Login Failed', 'Username or Password is incorrect'); - } - - - // if (resp.data.msg === 'success') { // response success checking logic could differ - // await SecureStore.setItemAsync(key, resp.data.token); - // dispatch(setLoginState(resp.data.user) ); // our action is called here - // } else { - // console.log('Login Failed', 'Username or Password is incorrect'); - // } - - } catch (error) { - console.log('Error---------', error); + const config = { + headers: { + 'Content-Type': 'application/json', + }, } + const resp = await axios.post( + `${API_URL}/api/users/register`, + resgisterCredential, + config + ) + + if (resp.data.token) { + console.log(resp.data.token); + const token = resp.data.token; + // await SecureStore.setItemAsync(key, token); + const headers = { + 'Authorization': 'Bearer ' + token}; + const user = await axios.get( + "https://flad-api-production.up.railway.app/api/users", + {headers} + ) + dispatch(userSignUp( UserFactory.JsonToModel(user.data) )); // our action is called here + // console.log(user.data); + // dispatch(setLoginState(user.data) ); // our action is called here + } else { + console.log('Login Failed', 'Username or Password is incorrect'); + } + + + // if (resp.data.msg === 'success') { // response success checking logic could differ + // await SecureStore.setItemAsync(key, resp.data.token); + // dispatch(setLoginState(resp.data.user) ); // our action is called here + // } else { + // console.log('Login Failed', 'Username or Password is incorrect'); + // } + + } catch (error) { + console.log('Error---------', error); } } -export const userLogin = ( loginCredential : Credentials) => { -//@ts-ignore -return async dispatch => { +} + +export const userLogin = (loginCredential: Credentials) => { + //@ts-ignore + return async dispatch => { try { console.log(loginCredential); - const config = { + const config = { headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'application/json', }, - } - // const resppp = await axios.get(`${API_URL}/toto`); - // console.log(resppp.data, "sddsd"); - - const resp = await axios.post( - "https://flad-api-production.up.railway.app/api/users/login", + } + // const resppp = await axios.get(`${API_URL}/toto`); + // console.log(resppp.data, "sddsd"); + + const resp = await axios.post( + "https://flad-api-production.up.railway.app/api/users/login", loginCredential, config - ) - console.log("====================================================================================") - console.log(resp.data) - console.log("====================================================================================") - if (resp.data.token) { - console.log(resp.data.token); - const token = resp.data.token; + ) + console.log("====================================================================================") + console.log(resp.data) + console.log("====================================================================================") + if (resp.data.token) { + console.log(resp.data.token); + 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} - ) + { headers } + ) // dispatch(setLoginState(resp.data.user) ); // our action is called here - console.log(user.data); - dispatch(setLoginState(user.data) ); // our action is called here - } else { + console.log(user.data); + dispatch(setLoginState(user.data)); // our action is called here + } else { console.log('Login Failed', 'Username or Password is incorrect'); - } + } } catch (error) { - console.log('Error---------', error); + console.log('Error---------', error); } + } } -} - + export const getRefreshToken = () => { - //@ts-ignore - return async dispatch => { - try { - let userToken : string | null = await SecureStore.getItemAsync('key'); - - if (userToken) { - console.log("==========key2 =================="); - console.log(userToken); - console.log("==========key =================="); - console.log("==========on devrais être laaaa =================="); - - dispatch(restoreToken(userToken) ); - - } else { - console.log("==========OOOOOORRRRRRRRHHHHHHHHHH =================="); - const empty = ""; - dispatch(restoreToken(empty) ); - - console.log("merddee"); - } - } catch (e) { - console.log('Error---------', e); - } + //@ts-ignore + return async dispatch => { + try { + let userToken: string | null = await SecureStore.getItemAsync(key); + + if (userToken) { + console.log("==========key2 =================="); + console.log(userToken); + console.log("==========key =================="); + console.log("==========on devrais être laaaa =================="); + + dispatch(restoreToken(userToken)); + + } else { + console.log("==========OOOOOORRRRRRRRHHHHHHHHHH =================="); + const empty = ""; + dispatch(restoreToken(empty)); + + console.log("merddee"); + } + } catch (e) { + console.log('Error---------', e); } + } } - - // const logIn = (email, password) => { - // const action = (dispatch) => { - // if (email === user.email && password === user.password) { - // dispatch(setLoggedInState(true)); - // return true; - // } - // dispatch(setLoggedInState(false)); - // return false; - // }; - // return action; - // }; - // better - async function save(key : string, value : string) { - await SecureStore.setItemAsync(key, value); - } \ No newline at end of file + + +export const DeleteToken = () => { + //@ts-ignore + return async dispatch => { + try { + await SecureStore.deleteItemAsync(key); + dispatch(UserLogout()); + } catch (e) { + console.log('Error deleting token', e); + } + } +} + +export const ChangeMode = () => { + //@ts-ignore + return async dispatch => { + dispatch(userChangeMode()); + await SecureStore.deleteItemAsync(key); + } +} + +// const logIn = (email, password) => { +// const action = (dispatch) => { +// if (email === user.email && password === user.password) { +// dispatch(setLoggedInState(true)); +// return true; +// } +// dispatch(setLoggedInState(false)); +// return false; +// }; +// return action; +// }; +// better +async function save(key: string, value: string) { + await SecureStore.setItemAsync(key, value); +} \ No newline at end of file diff --git a/src/FLAD/redux/thunk/spotThunk.tsx b/src/FLAD/redux/thunk/spotThunk.tsx index 051d19d..1e4862b 100644 --- a/src/FLAD/redux/thunk/spotThunk.tsx +++ b/src/FLAD/redux/thunk/spotThunk.tsx @@ -91,7 +91,7 @@ export const getCurrentUserMusic = (resuestHandler : SpotifyService)=> { catch (error) { console.log('Error---------', error); } -} + } } export const searchMusic = async (resuestHandler : SpotifyService,search: string) => { // diff --git a/src/FLAD/redux/types/userTypes.tsx b/src/FLAD/redux/types/userTypes.tsx index 081682f..12d45ad 100644 --- a/src/FLAD/redux/types/userTypes.tsx +++ b/src/FLAD/redux/types/userTypes.tsx @@ -1,10 +1,10 @@ - export const userTypes = { LOGIN: 'LOGIN', SIGNUP: 'SIGNUP', - SAVE_SPOTIFY :'SAVE_SPOTIFY', + SAVE_SPOTIFY: 'SAVE_SPOTIFY', UPDATE_USER: 'UPDATE_USER', UPDATE_PROFILE_PICTURE: 'UPDATE_PROFILE_PICTURE', - USER_LOGOUT : 'USER_LOGOUT', - RESTORE_TOKEN : "RESTORE_TOKEN" - } \ No newline at end of file + USER_LOGOUT: 'USER_LOGOUT', + RESTORE_TOKEN: "RESTORE_TOKEN", + CHANGE_MODE: "CHANGE_MODE" +} \ No newline at end of file diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx index b540926..a9e11d7 100644 --- a/src/FLAD/screens/Favorite.tsx +++ b/src/FLAD/screens/Favorite.tsx @@ -1,26 +1,38 @@ -import React, { useEffect, useState} from 'react'; -import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native'; +import React, { useEffect, useState } from 'react'; +import { Image, StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native'; import CardMusic from '../components/CardMusic'; import normalize from '../components/Normalize'; import Music from '../Model/Music' -import {useNavigation} from "@react-navigation/native"; +import FladyComponent from '../components/FladyComponent'; +import { useNavigation } from "@react-navigation/native"; import { useDispatch, useSelector } from 'react-redux'; import { getFavoritesMusic } from '../redux/actions/appActions'; import { SharedElement } from 'react-navigation-shared-element'; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; export default function favoritePage() { + //Dark Mode + const isDark = useSelector(state => state.userReducer.dark); + const style = isDark ? GraphicalCharterLight : GraphicalCharterDark; + const navigation = useNavigation(); //@ts-ignore const favoritesMusic = useSelector(state => state.appReducer.favoriteMusic); const dispatch = useDispatch(); - - const navigueToDetail = (music : any) => { - navigation.navigate("MusicDetail", {"music": music}) + const images = [ + { id: 1, source: require('../assets/images/FLADYLove.png') }, + { id: 2, 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 }) }; - // to do - const [filteredDataSource, setFilteredDataSource] = useState([]); - const [search, setSearch] = useState(''); - const searchMusic = (text: string) => { + // to do + const [filteredDataSource, setFilteredDataSource] = useState([]); + const [search, setSearch] = useState(''); + const searchMusic = (text: string) => { if (text) { const newData = favoritesMusic.filter(function (item: Music) { const search = item.title @@ -36,86 +48,90 @@ export default function favoritePage() { } }; + const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: style.body, + }, + titleContainer: { + marginTop: 30, + marginLeft: 20, + }, + title: { + fontSize: normalize(28), + fontWeight: 'bold', + color: style.Text, + }, + description: { + marginTop: 10, + fontSize: normalize(20), + color: '#787878', + marginBottom: 20 + }, + button: { + marginTop: '10%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + backgroundColor: 'white', + width: normalize(100), + height: normalize(100), + borderRadius: 21 + }, + buttonImage: { + width: normalize(46), + height: normalize(46), + }, + shadow: { + shadowColor: '#000', + shadowOffset: { + width: 2, + height: 3, + }, + shadowOpacity: 0.50, + shadowRadius: 3.84, + } + }); + return ( - - + Favoris Retrouvez ici vos musiques favorites - ( - {navigueToDetail(item)}}> + { navigueToDetail(item) }}> - + )} - keyExtractor={(item: Music) => item.title } + keyExtractor={(item: Music) => item.title} /> - navigation.navigate('Genre')}> - - - - - + What's your mood? + item.id.toString()} + horizontal + showsHorizontalScrollIndicator={false} + renderItem={({ item }) => ( + + )} + /> + navigation.navigate('Genre')}> + + + + ); -}; - -const styles = StyleSheet.create({ - mainSafeArea: { - flex: 1, - backgroundColor: "#141414", - }, - body: { - flex: 1, - justifyContent: 'center', - backgroundColor: "#141414", - }, - titleContainer: { - marginTop: 30, - marginLeft: 20, - }, - title: { - fontSize: normalize(28), - fontWeight: 'bold', - color: 'white', - }, - description: { - marginTop: 10, - fontSize: normalize(20), - color: '#787878', - marginBottom: 20 - }, - button: { - marginTop: '10%', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'center', - backgroundColor: 'white', - width: normalize(100), - height: normalize(100), - borderRadius: 21 - }, - buttonImage: { - width: normalize(46), - height: normalize(46), - }, - shadow: { - shadowColor: '#000', - shadowOffset: { - width: 2, - height: 3, - }, - shadowOpacity: 0.50, - shadowRadius: 3.84, - } -}); +}; \ No newline at end of file diff --git a/src/FLAD/screens/LoginPage.tsx b/src/FLAD/screens/LoginPage.tsx index 7268dd9..617f1fb 100644 --- a/src/FLAD/screens/LoginPage.tsx +++ b/src/FLAD/screens/LoginPage.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react'; import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; -import {useNavigation} from "@react-navigation/native"; +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,22 +15,33 @@ const DismissKeyboard = ({ children }) => ( ) export default function loginPage() { + const [sound, setSound] = useState(); 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 = () => { const credentials: Credentials = { email: username, password: password - }; + }; //@ts-ignore dispatch(userLogin(credentials)) - } + playSound() + } const toggleRememberMe = () => { setRememberMe(!rememberMe); @@ -42,19 +54,19 @@ export default function loginPage() { v2.0 - + SE CONNECTER + value={username} + onChangeText={setUsername} style={[styles.input, styles.shadow]} /> + value={password} + onChangeText={setPassword} + secureTextEntry style={[styles.input, styles.shadow]} /> @@ -62,15 +74,15 @@ export default function loginPage() { SE SOUVENIR DE MOI - + - Tu n'as pas de compte? - Tu n'as pas de compte? + navigation.navigate('Register')} > - S'inscrire + S'inscrire @@ -81,9 +93,9 @@ export default function loginPage() { -const styles = StyleSheet.create ({ +const styles = StyleSheet.create({ container: { - flex: 1, + flex: 1, }, image: { flex: 1, @@ -110,14 +122,14 @@ const styles = StyleSheet.create ({ width: normalize(46), height: normalize(46), }, - iconUser : { + iconUser: { position: 'absolute', width: 20, height: 20, left: normalize(80), bottom: '50%' }, - iconLock : { + iconLock: { position: 'absolute', width: 20, height: 20, @@ -133,7 +145,7 @@ const styles = StyleSheet.create ({ alignSelf: 'center', marginBottom: 20, paddingLeft: 50, - paddingRight: 20 + paddingRight: 20 }, text: { fontWeight: 'bold', @@ -145,8 +157,8 @@ const styles = StyleSheet.create ({ shadow: { shadowColor: 'black', shadowOffset: { - width: 2, - height: 3, + width: 2, + height: 3, }, shadowOpacity: 0.50, shadowRadius: 3.84, @@ -184,8 +196,8 @@ const styles = StyleSheet.create ({ backgroundColor: 'white' }, inscriptionText: { - flexDirection: 'row', - alignSelf: 'center', + flexDirection: 'row', + alignSelf: 'center', bottom: normalize(-98) } }) \ No newline at end of file diff --git a/src/FLAD/screens/MusicDetail.tsx b/src/FLAD/screens/MusicDetail.tsx index 6fad95e..9d8eef4 100644 --- a/src/FLAD/screens/MusicDetail.tsx +++ b/src/FLAD/screens/MusicDetail.tsx @@ -1,5 +1,5 @@ import { NavigationProp, RouteProp, useNavigation } from "@react-navigation/native"; -import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity, ScrollView, Pressable } from "react-native"; +import { View, Text, Image, StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity, ScrollView, Pressable } 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"; @@ -7,6 +7,7 @@ import axios from "axios"; import { Buffer } from 'buffer'; import { Audio } from 'expo-av'; import { useEffect, useState } from "react"; +import normalize from '../components/Normalize'; import { State, TapGestureHandler } from "react-native-gesture-handler"; import { RequestHandler } from "../services/spotify/spotifyRequestHandler/utils"; import { FetchRequest } from "expo-auth-session/build/Fetch"; @@ -20,34 +21,33 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome'; import { Feather as Icon } from "@expo/vector-icons"; import { HorizontalFlatList } from "../components/HorizontalFlatList"; import { LittleCard } from "../components/littleCard"; -import normalize from "../components/Normalize"; import { Circle } from "react-native-svg"; import { AntDesign } from '@expo/vector-icons'; import * as SecureStore from 'expo-secure-store'; -const halfPi = Math.PI/2; +const halfPi = Math.PI / 2; //@ts-ignore -const MusicDetail = ({ route }) => { - const music : Music = route.params.music; +const MusicDetail = ({ route }) => { + const music: Music = route.params.music; const [currentspot, setCurrentSpot] = useState(music); const [simularMusic, setSimularMusic] = useState([]); const [isPlaying, setIsPlaying] = useState(false); const [sound, setSound] = useState(null); - + const navigator = useNavigation(); - + const [testtoken, setTesttoken] = useState('') const sheet = async () => { - SecureStore.getItemAsync('MySecureAuthStateKey').then(result => { setTesttoken(result)}); - + SecureStore.getItemAsync('MySecureAuthStateKey').then(result => { setTesttoken(result) }); + } - - useEffect(() => { - sheet(); + + useEffect(() => { + sheet(); getSimilarTrack(); }, [testtoken]); @@ -56,14 +56,14 @@ const MusicDetail = ({ route }) => { // const simularMusic = await service.getSimilarTrack(currentspot.id, 5, 'FR'); // console.log("suggesstd", simularMusic) // setSimularMusic(simularMusic); - + // } - const getSimilarTrack = async () => { + const getSimilarTrack = async () => { try { - const service = new SpotifyService(testtoken); + const service = new SpotifyService(testtoken); const simularMusic = await service.getSimilarTrack(currentspot.id, 5, 'FR'); - console.log("suggesstd", simularMusic); - setSimularMusic(simularMusic); + console.log("suggesstd", simularMusic); + setSimularMusic(simularMusic); } catch (error) { console.error('Error ================ in getSimilarTrack', error); // Handle the error here. @@ -72,61 +72,61 @@ const MusicDetail = ({ route }) => { const handlePlaySound = async () => { if (sound === null) { - const { sound: newSound } = await Audio.Sound.createAsync( - { uri: music.trackPreviewUrl }, - { shouldPlay: true } - ); - setSound(newSound); - setIsPlaying(true); - + const { sound: newSound } = await Audio.Sound.createAsync( + { uri: music.trackPreviewUrl }, + { shouldPlay: true } + ); + setSound(newSound); + setIsPlaying(true); + } else { setIsPlaying(true); //@ts-ignore - await sound.playAsync(); + await sound.playAsync(); } - }; - - const handleStopSound = async () => { + }; + + const handleStopSound = async () => { if (sound !== null) { setIsPlaying(false); - + //@ts-ignore - await sound.stopAsync(); + await sound.stopAsync(); } - else{ + else { } - }; - useEffect(() => { + }; + useEffect(() => { return sound ? () => { - console.log('Unloading Sound'); - //@ts-ignore - sound.unloadAsync(); - } + console.log('Unloading Sound'); + //@ts-ignore + sound.unloadAsync(); + } : undefined; - }, [sound]); - - const sensor = useAnimatedSensor(SensorType.ROTATION); - const styleAniamatedImage = useAnimatedStyle(() => { - const {yaw, pitch, roll} = sensor.sensor.value; - const verticalAxis =interpolate( - pitch, - [-halfPi*2,halfPi*2], - [-45, 45] - ) - const horizontalAxis =interpolate( - roll, - [-halfPi*2,halfPi*2], - [-45, 45] - ) - return { - top : withSpring( verticalAxis), - left : withSpring(horizontalAxis), - }; - - }) + }, [sound]); + + const sensor = useAnimatedSensor(SensorType.ROTATION); + const styleAniamatedImage = useAnimatedStyle(() => { + const { yaw, pitch, roll } = sensor.sensor.value; + const verticalAxis = interpolate( + pitch, + [-halfPi * 2, halfPi * 2], + [-45, 45] + ) + const horizontalAxis = interpolate( + roll, + [-halfPi * 2, halfPi * 2], + [-45, 45] + ) + return { + top: withSpring(verticalAxis), + left: withSpring(horizontalAxis), + }; + + }) return ( - + { /> */} + colors={['rgba(56,56,56,0)', 'rgba(14,14,14,1)']}> - - - - - - - {/* */} - - - - - - + - - - - - - - - - - - - - - - Dans ma collection - - - - {/* */} - Partagedr cette music - - {/* + + + + {/* */} + + + + + + + + + + + + + + + + + + + + + + + Dans ma collection + + + + {/* */} + Partagedr cette music + + {/* Dans ma collection 2 */} - - {simularMusic.length !== 0 && ( - - {(props) => ( - { navigator.navigate("MusicDetail", {"music": props}) }} > - - - )} - - )} - - + + {simularMusic.length !== 0 && ( + + {(props) => ( + { navigator.navigate("MusicDetail", { "music": props }) }} > + + + )} + + )} + + ); @@ -227,7 +231,7 @@ const MusicDetail = ({ route }) => { export default MusicDetail; -const styles = StyleSheet.create ({ +const styles = StyleSheet.create({ mainSafeArea: { flex: 1, backgroundColor: "#141414", diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx index 3e5b988..e543f5f 100644 --- a/src/FLAD/screens/Register.tsx +++ b/src/FLAD/screens/Register.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native'; -import {useNavigation} from "@react-navigation/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'; @@ -8,15 +8,16 @@ 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'; import SpotifyService from '../services/spotify/spotify.service'; // @ts-ignore const DismissKeyboard = ({ children }) => ( - Keyboard.dismiss()}> - {children} - + Keyboard.dismiss()}> + {children} + ) export const MY_SECURE_AUTH_STATE_KEY = 'MySecureAuthStateKey'; @@ -25,347 +26,359 @@ WebBrowser.maybeCompleteAuthSession(); // Endpoint const discovery = { -authorizationEndpoint: 'https://accounts.spotify.com/authorize', -tokenEndpoint: 'https://accounts.spotify.com/api/token', + authorizationEndpoint: 'https://accounts.spotify.com/authorize', + tokenEndpoint: 'https://accounts.spotify.com/api/token', }; // save the spotifyToken -async function save(key : string, value : string) { -await SecureStore.setItemAsync(key, value); +async function save(key: string, value: string) { + await SecureStore.setItemAsync(key, value); } export default function InscriptionPage() { - const [rememberMe, setRememberMe] = useState(false); - const navigation = useNavigation(); - const [spotifyToken, setSpotifyToken] = useState(''); - const [spotifyID, setSpotifyIds] = useState('') + const [sound, setSound] = useState(); + 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); - const [username, setUsername] = useState(''); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const toggleRememberMe = () => { - setRememberMe(!rememberMe); - } - -//spotify auth - const [request, response, promptAsync] = useAuthRequest( - { - responseType: AuthSession.ResponseType.Token, - clientId: '1f1e34e4b6ba48b388469dba80202b10', - scopes: ['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'], - redirectUri: makeRedirectUri({ - scheme: 'flad' - }), - }, - discovery - ); - useEffect(() => { - if (response && response.type === 'success') { - const auth = response.params.access_token; - const storageValue = JSON.stringify(auth); - - if (Platform.OS !== 'web') { - // Securely store the auth on your device - save(MY_SECURE_AUTH_STATE_KEY, storageValue); - } - } - }, [response]); + console.log('Playing Sound'); + await sound.playAsync(); + } - const dispatch = useDispatch(); + const [username, setUsername] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const toggleRememberMe = () => { + setRememberMe(!rememberMe); + } + + //spotify auth + const [request, response, promptAsync] = useAuthRequest( + { + responseType: AuthSession.ResponseType.Token, + clientId: '1f1e34e4b6ba48b388469dba80202b10', + scopes: ['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'], + redirectUri: makeRedirectUri({ + scheme: 'flad' + }), + }, + discovery + ); + useEffect(() => { + if (response && response.type === 'success') { + const auth = response.params.access_token; + const storageValue = JSON.stringify(auth); - const submitForm = () => { - const credentials: CredentialsRegister = { - email: email, - password: password, - idSpotify : spotifyToken, - name : username, - idFlad : "3030" - }; - //@ts-ignore - dispatch(registerUser(credentials)) + if (Platform.OS !== 'web') { + // Securely store the auth on your device + save(MY_SECURE_AUTH_STATE_KEY, storageValue); } - 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(' '); - //work so use this for my implementation - const getAuthorizationCode = async () => { - try { - const redirectUrl = "https://auth.expo.io/@anonymous/FLAD-7eafd441-fd6b-4fb6-924c-ec2b0ed5ce6d"; //this will be something like https://auth.expo.io/@your-username/your-app-slug - const result = await AuthSession.startAsync({ - authUrl: - 'https://accounts.spotify.com/authorize' + - '?response_type=code' + - '&client_id=' + - "1f1e34e4b6ba48b388469dba80202b10" + - (scopes ? '&scope=' + encodeURIComponent(scopes) : '') + - '&redirect_uri=' + - encodeURIComponent(redirectUrl), - }) - console.log("=================grant code ==============<"); + } + }, [response]); - console.log(result); - console.log("=================grant code ==============<"); + const dispatch = useDispatch(); - return result.params.code; - } catch (err) { - console.error(err) - } + const submitForm = () => { + const credentials: CredentialsRegister = { + email: email, + password: password, + idSpotify: spotifyToken, + name: username, + idFlad: "3030" + }; + //@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(' '); + //work so use this for my implementation + const getAuthorizationCode = async () => { + try { + const redirectUrl = "https://auth.expo.io/@anonymous/FLAD-7eafd441-fd6b-4fb6-924c-ec2b0ed5ce6d"; //this will be something like https://auth.expo.io/@your-username/your-app-slug + const result = await AuthSession.startAsync({ + authUrl: + 'https://accounts.spotify.com/authorize' + + '?response_type=code' + + '&client_id=' + + "1f1e34e4b6ba48b388469dba80202b10" + + (scopes ? '&scope=' + encodeURIComponent(scopes) : '') + + '&redirect_uri=' + + encodeURIComponent(redirectUrl), + }) + console.log("=================grant code ==============<"); + + console.log(result); + console.log("=================grant code ==============<"); + + return result.params.code; + } catch (err) { + console.error(err) } - const getAuthorizationCode2 = async () => { - try { - const result = await AuthSession.startAsync({ - authUrl:'https://flad-api-production.up.railway.app/api/spotify/exchange' - }) - console.log("=================grant code ==============<"); + } + const getAuthorizationCode2 = async () => { + try { + const result = await AuthSession.startAsync({ + authUrl: 'https://flad-api-production.up.railway.app/api/spotify/exchange' + }) + console.log("=================grant code ==============<"); - console.log(result); - console.log("=================grant code ==============<"); + console.log(result); + console.log("=================grant code ==============<"); - return result.params.code; - } catch (err) { - console.error(err) - } + return result.params.code; + } catch (err) { + console.error(err) } - const getTokens2 = async () => { - try { - const authorizationCode = await getAuthorizationCode2() //we wrote this function above - console.log(authorizationCode, "shhhhhhhhhhhhhheeeeeeeeeeeeeeeetttttttttttt"); - const response = await fetch('https://flad-api-production.up.railway.app/api/spotify/callback'); - const responseJson = await response.json(); - console.log(responseJson, "okkkkkkkkkkkkkkk") ; - // destructure the response and rename the properties to be in camelCase to satisfy my linter ;) - const { - access_token: accessToken, - refresh_token: refreshToken, - expires_in: expiresIn, - } = responseJson; - - await setSpotifyToken(accessToken); + } + const getTokens2 = async () => { + try { + const authorizationCode = await getAuthorizationCode2() //we wrote this function above + console.log(authorizationCode, "shhhhhhhhhhhhhheeeeeeeeeeeeeeeetttttttttttt"); + const response = await fetch('https://flad-api-production.up.railway.app/api/spotify/callback'); + const responseJson = await response.json(); + console.log(responseJson, "okkkkkkkkkkkkkkk"); + // destructure the response and rename the properties to be in camelCase to satisfy my linter ;) + const { + access_token: accessToken, + refresh_token: refreshToken, + expires_in: expiresIn, + } = responseJson; - console.log(spotifyToken); - } catch (err) { - console.error(err); - } + await setSpotifyToken(accessToken); + + console.log(spotifyToken); + } catch (err) { + console.error(err); } - const getTokens = async () => { - try { - const authorizationCode = await getAuthorizationCode() //we wrote this function above - console.log(authorizationCode, "shhhhhhhhhhhhhheeeeeeeeeeeeeeeetttttttttttt"); - const response = await fetch('https://accounts.spotify.com/api/token', { - method: 'POST', - headers: { - Authorization: 'Basic ' + (Buffer.from('1f1e34e4b6ba48b388469dba80202b10' + ':' + '779371c6d4994a68b8dd6e84b0873c82').toString('base64')), - 'Content-Type': 'application/x-www-form-urlencoded', - }, - body: `grant_type=authorization_code&code=${authorizationCode}&redirect_uri=https://auth.expo.io/@anonymous/FLAD-7eafd441-fd6b-4fb6-924c-ec2b0ed5ce6d`, - }); - const responseJson = await response.json(); - console.log(responseJson, "okkkkkkkkkkkkkkk") ; - // destructure the response and rename the properties to be in camelCase to satisfy my linter ;) - const { - access_token: accessToken, - refresh_token: refreshToken, - expires_in: expiresIn, - } = responseJson; - await setSpotifyToken(accessToken); - save(MY_SECURE_AUTH_STATE_KEY, accessToken); - testService(accessToken); - console.log(spotifyToken); - } catch (err) { - console.error(err); - } + } + const getTokens = async () => { + try { + const authorizationCode = await getAuthorizationCode() //we wrote this function above + console.log(authorizationCode, "shhhhhhhhhhhhhheeeeeeeeeeeeeeeetttttttttttt"); + const response = await fetch('https://accounts.spotify.com/api/token', { + method: 'POST', + headers: { + Authorization: 'Basic ' + (Buffer.from('1f1e34e4b6ba48b388469dba80202b10' + ':' + '779371c6d4994a68b8dd6e84b0873c82').toString('base64')), + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: `grant_type=authorization_code&code=${authorizationCode}&redirect_uri=https://auth.expo.io/@anonymous/FLAD-7eafd441-fd6b-4fb6-924c-ec2b0ed5ce6d`, + }); + const responseJson = await response.json(); + console.log(responseJson, "okkkkkkkkkkkkkkk"); + // destructure the response and rename the properties to be in camelCase to satisfy my linter ;) + const { + access_token: accessToken, + refresh_token: refreshToken, + expires_in: expiresIn, + } = responseJson; + await setSpotifyToken(accessToken); + save(MY_SECURE_AUTH_STATE_KEY, accessToken); + testService(accessToken); + console.log(spotifyToken); + } catch (err) { + console.error(err); } + } - const testService = async (token : string) =>{ - try { - const serviceTest = new SpotifyService(token); - console.log("==============Test Service 1 ============"); - const respSearch = await serviceTest.searchMusic("Parapluie Tiakola"); - console.log("===================repoonce========================="); - console.log(respSearch); - console.log("============================================"); - console.log("==============Test Service 2 ============"); - const respFull = await serviceTest.getMusicById(respSearch[0].id); - console.log("===================repoonce========================="); - console.log(respFull); - console.log("============================================"); - console.log("==============Test Service 3 ============"); - const respSimilar = await serviceTest.getSimilarTrack(respSearch[0].id); - console.log("===================repoonce========================="); - console.log(respSimilar); - console.log("============================================"); - console.log("==============Test Service 4 ============"); - const respCurrent= await serviceTest.getUserCurrentMusic(); - console.log("===================repoonce========================="); - console.log(respCurrent); - console.log("============================================"); - console.log("==============Test Service 5 ============"); - const respRecently= await serviceTest.getUserRecentlyPlayedMusic(); - console.log("===================repoonce========================="); - console.log(respRecently); - console.log("============================================"); - - } catch (error) { - console.log("==============Test Service Error============"); - console.error(error); - console.log("============================================"); + const testService = async (token: string) => { + try { + const serviceTest = new SpotifyService(token); + console.log("==============Test Service 1 ============"); + const respSearch = await serviceTest.searchMusic("Parapluie Tiakola"); + console.log("===================repoonce========================="); + console.log(respSearch); + console.log("============================================"); + console.log("==============Test Service 2 ============"); + const respFull = await serviceTest.getMusicById(respSearch[0].id); + console.log("===================repoonce========================="); + console.log(respFull); + console.log("============================================"); + console.log("==============Test Service 3 ============"); + const respSimilar = await serviceTest.getSimilarTrack(respSearch[0].id); + console.log("===================repoonce========================="); + console.log(respSimilar); + console.log("============================================"); + console.log("==============Test Service 4 ============"); + const respCurrent = await serviceTest.getUserCurrentMusic(); + console.log("===================repoonce========================="); + console.log(respCurrent); + console.log("============================================"); + console.log("==============Test Service 5 ============"); + const respRecently = await serviceTest.getUserRecentlyPlayedMusic(); + console.log("===================repoonce========================="); + console.log(respRecently); + console.log("============================================"); - } + } catch (error) { + console.log("==============Test Service Error============"); + console.error(error); + console.log("============================================"); } - + + } + - return ( - - - - - v2.0 - - - S'INSCRIRE - - - - - - - - - - - - - { - await getTokens(); - }} style={[styles.buttonSpotify, styles.shadow]}> - Lier compte - - - - submitForm()}> - - - - Tu as déjà un compte? - navigation.navigate('Login')} - > - Se connecter - - - - - - ) + return ( + + + + + v2.0 + + + S'INSCRIRE + + + + + + + + + + + + + { + await getTokens(); + }} style={[styles.buttonSpotify, styles.shadow]}> + Lier compte + + + + submitForm()}> + + + + Tu as déjà un compte? + navigation.navigate('Login')} + > + Se connecter + + + + + + ) } -const styles = StyleSheet.create ({ - container: { - flex: 1 - }, - image: { - flex: 1, - justifyContent: 'center', - }, - imageLogo: { - width: normalize(324), - height: normalize(162), - alignSelf: 'center', - marginBottom: normalize(58), - marginTop: -20 - }, - button: { - marginTop: '10%', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'center', - backgroundColor: 'white', - width: normalize(100), - height: normalize(100), - borderRadius: 21 - }, - buttonImage: { - width: normalize(46), - height: normalize(46), - }, - versionText: { - position: 'absolute', - top: 40, - right: 20, - color: 'gray', - fontWeight: 'bold', - fontSize: normalize(17) - }, - text: { - fontWeight: 'bold', - fontSize: normalize(29), - alignSelf: 'center', - color: 'white', - marginBottom: 15 - }, - textIntoButton: { - fontWeight: 'bold', - fontSize: normalize(17), - color: 'white', - marginRight: 10 +const styles = StyleSheet.create({ + container: { + flex: 1 + }, + image: { + flex: 1, + justifyContent: 'center', + }, + imageLogo: { + width: normalize(324), + height: normalize(162), + alignSelf: 'center', + marginBottom: normalize(58), + marginTop: -20 + }, + button: { + marginTop: '10%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + backgroundColor: 'white', + width: normalize(100), + height: normalize(100), + borderRadius: 21 + }, + buttonImage: { + width: normalize(46), + height: normalize(46), + }, + versionText: { + position: 'absolute', + top: 40, + right: 20, + color: 'gray', + fontWeight: 'bold', + fontSize: normalize(17) + }, + text: { + fontWeight: 'bold', + fontSize: normalize(29), + alignSelf: 'center', + color: 'white', + marginBottom: 15 + }, + textIntoButton: { + fontWeight: 'bold', + fontSize: normalize(17), + color: 'white', + marginRight: 10 + }, + shadow: { + shadowColor: '#000', + shadowOffset: { + width: 2, + height: 3, }, - shadow: { - shadowColor: '#000', - shadowOffset: { - width: 2, - height: 3, - }, - shadowOpacity: 0.50, - shadowRadius: 3.84, - }, - input: { - width: normalize(350), - height: normalize(50), - borderRadius: 30, - color: 'black', - backgroundColor: 'white', - alignSelf: 'center', - marginBottom: 20, - paddingLeft: 50, - paddingRight: 20 - }, - iconUser : { - position: 'absolute', - width: 20, - height: 20, - left: normalize(80), - bottom: '50%' - }, - iconLock : { - position: 'absolute', - width: 20, - height: 20, - left: normalize(80), - bottom: '50%' - }, - connectionText: { - flexDirection: 'row', - alignSelf: 'center', - bottom: normalize(-98) - }, - buttonSpotify: { - width: normalize(350), - height: normalize(50), - backgroundColor: '#24CF5F', - justifyContent: 'center', - alignItems: 'center', - alignSelf: 'center', - borderRadius: 30, - flexDirection: 'row' - } + shadowOpacity: 0.50, + shadowRadius: 3.84, + }, + input: { + width: normalize(350), + height: normalize(50), + borderRadius: 30, + color: 'black', + backgroundColor: 'white', + alignSelf: 'center', + marginBottom: 20, + paddingLeft: 50, + paddingRight: 20 + }, + iconUser: { + position: 'absolute', + width: 20, + height: 20, + left: normalize(80), + bottom: '50%' + }, + iconLock: { + position: 'absolute', + width: 20, + height: 20, + left: normalize(80), + bottom: '50%' + }, + connectionText: { + flexDirection: 'row', + alignSelf: 'center', + bottom: normalize(-98) + }, + buttonSpotify: { + width: normalize(350), + height: normalize(50), + backgroundColor: '#24CF5F', + justifyContent: 'center', + alignItems: 'center', + alignSelf: 'center', + borderRadius: 30, + flexDirection: 'row' + } }) diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx index 559b9ba..33049e1 100644 --- a/src/FLAD/screens/Setting.tsx +++ b/src/FLAD/screens/Setting.tsx @@ -1,11 +1,17 @@ -import React, { useRef, useState } from 'react'; +import React, { useEffect, 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 { 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 { ChangeMode, DeleteToken } from '../redux/thunk/authThunk'; +import { useSelector } from 'react-redux'; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; +import SpotifyService from '../services/spotify/spotify.service'; +import { getCurrentUserMusic } from '../redux/thunk/spotThunk'; // @ts-ignore const DismissKeyboard = ({ children }) => ( @@ -16,31 +22,222 @@ const DismissKeyboard = ({ children }) => ( export default function Setting() { const textInputRef = useRef(null); + const dispatch = useDispatch(); const navigation = useNavigation(); const handleSvgPress = () => { - //@ts-ignore - textInputRef.current?.focus(); + //@ts-ignore + textInputRef.current?.focus(); }; + const currentMusic = useSelector(state => state.appReducer.userCurrentMusic); + //Dark Mode - const[isCheckedDarkMode, setIsCheckedDarkMode] = useState(false); - - const toggleDarkMode = - () => setIsCheckedDarkMode(value => !value); + const isDark = useSelector(state => state.userReducer.dark); + const style = isDark ? GraphicalCharterLight : GraphicalCharterDark; + const ChangeDarkMode = () => { + dispatch(ChangeMode()) + } //Notification - const[isCheckedNotif, setIsCheckedNotif] = useState(false); + const [isCheckedNotif, setIsCheckedNotif] = useState(false); - const toggleNotif = + const toggleNotif = () => setIsCheckedNotif(value => !value); - + //Deconnection + const Deconnection = () => { + //@ts-ignore + dispatch(DeleteToken()) + } //Localisation - const[isCheckedLocalisation, setIsCheckedLocalisation] = useState(false); + const [isCheckedLocalisation, setIsCheckedLocalisation] = useState(false); - const toggleLocalisation = + const toggleLocalisation = () => setIsCheckedLocalisation(value => !value); + + //Style + + + const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: style.body, + }, + container: { + marginTop: 30, + marginHorizontal: normalize(25), + paddingBottom: normalize(400), + flex: 1, + backgroundColor: style.body, + }, + title: { + fontSize: normalize(30), + fontWeight: 'bold', + color: style.Text, + alignItems: 'center', + }, + search: { + paddingVertical: 9, + backgroundColor: style.Card, + borderRadius: 13, + flexDirection: 'row', + marginTop: 9, + marginBottom: 22 + }, + inputSearch: { + placeholderTextColor: 'red', + color: 'white', + width: normalize(350), + }, + profil: { + paddingVertical: 9, + backgroundColor: style.Card, + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + marginBottom: normalize(45) + }, + imageProfil: { + marginLeft: 15, + marginRight: 7, + width: 50, + height: 50 + }, + NameProfil: { + fontWeight: 'bold', + color: style.Text, + fontSize: normalize(22) + }, + description: { + color: style.Text, + fontSize: normalize(15) + }, + profilContainer: { + flex: 1, + marginLeft: 9, + alignItems: 'flex-start', + justifyContent: 'center', + }, + buttonSetting: { + width: normalize(17), + height: normalize(17), + marginRight: 22 + }, + body: { + paddingTop: normalize(10), + backgroundColor: style.Card, + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45), + paddingLeft: normalize(10), + }, + view: { + backgroundColor: '#fe9500', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + Option: { + flexDirection: 'row', + alignItems: 'center', + }, + secondOption: { + marginTop: normalize(11), + flexDirection: 'row', + alignItems: 'center', + }, + textOption: { + fontSize: normalize(18), + color: style.Text, + fontWeight: 'bold', + marginBottom: normalize(8) + }, + firstOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: style.Line + }, + deconnectedOption: { + paddingVertical: 9, + paddingLeft: 5, + backgroundColor: style.Card, + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + }, + buttonDeconectedOption: { + backgroundColor: '#DF0404', + padding: 5, + borderRadius: 10, + marginLeft: 15 + }, + textDeconnectionOption: { + fontSize: normalize(18), + color: '#F80404', + fontWeight: 'bold', + marginLeft: 12 + }, + notification: { + backgroundColor: '#fe3c30', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + secondOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: style.Line + }, + lastOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center' + }, + localisation: { + backgroundColor: '#0835A7', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + lastOption: { + marginTop: normalize(11), + flexDirection: 'row', + alignItems: 'center', + }, + musicActually: { + paddingTop: normalize(17), + backgroundColor: style.Card, + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + titleMusic: { + flexDirection: 'row', + marginBottom: 5 + }, + mascot: { + width: normalize(90), + height: normalize(90), + position: 'absolute', + right: normalize(0), + top: normalize(10) + } + + }) return ( @@ -49,91 +246,91 @@ export default function Setting() { Réglages - - + + - - + + navigation.navigate('SettingProfil')}> - + Emre KARTAL id. Spotify, mail et mot de passe - + - + - - - - + + + + Dark Mode - + - - - + + + Notification - + - + Localisation - + - - - - - + + + + + - En cours d’écoute... + En cours d’écoute... - - + + - - + + - console.log("Tkt t deconnecter")}> + Deconnection()}> Se deconnecter @@ -143,182 +340,3 @@ export default function Setting() { ); }; - -const styles = StyleSheet.create({ - mainSafeArea: { - flex: 1, - backgroundColor: "#141414", - }, - container: { - marginTop: 30, - marginHorizontal: normalize(25), - flex: 1, - backgroundColor: '#141414', - }, - title: { - fontSize: normalize(30), - fontWeight: 'bold', - color: 'white', - alignItems: 'center', - }, - search: { - paddingVertical: 9, - backgroundColor: "#232123", - borderRadius: 13, - flexDirection: 'row', - marginTop: 9, - marginBottom: 22 - }, - inputSearch: { - placeholderTextColor:'red', - color: 'white', - width: normalize(350), - }, - profil: { - paddingVertical: 9, - backgroundColor: "#232123", - borderRadius: 13, - flexDirection: 'row', - alignItems: 'center', - marginBottom: normalize(45) - }, - imageProfil: { - marginLeft: 15, - marginRight: 7, - width: 50, - height: 50 - }, - NameProfil: { - fontWeight: 'bold', - color: 'white', - fontSize: normalize(22) - }, - description: { - color: 'white', - fontSize: normalize(15) - }, - profilContainer: { - flex: 1, - marginLeft: 9, - alignItems: 'flex-start', - justifyContent: 'center', - }, - buttonSetting: { - width: normalize(17), - height: normalize(17), - marginRight: 22 - }, - body: { - paddingTop: normalize(10), - backgroundColor: "#232123", - borderRadius: 13, - alignItems: 'flex-start', - marginBottom: normalize(45), - paddingLeft: normalize(10), - }, - view: { - backgroundColor: '#fe9500', - padding: 5, - borderRadius: 10, - marginLeft: 15, - marginBottom: normalize(11) - }, - Option: { - flexDirection: 'row', - alignItems: 'center', - }, - secondOption: { - marginTop: normalize(11), - flexDirection: 'row', - alignItems: 'center', - }, - textOption: { - fontSize: normalize(18), - color: 'white', - fontWeight: 'bold', - marginBottom: normalize(8) - }, - firstOptionView: { - flex: 1, - marginLeft: 15, - justifyContent: 'space-between', - flexDirection: 'row', - alignItems: 'center', - borderBottomWidth: 1, - borderColor: '#403F3F' - }, - deconnectedOption: { - paddingVertical: 9, - paddingLeft: 5, - backgroundColor: "#232123", - borderRadius: 13, - flexDirection: 'row', - alignItems: 'center', - }, - buttonDeconectedOption: { - backgroundColor: '#DF0404', - padding: 5, - borderRadius: 10, - marginLeft: 15 - }, - textDeconnectionOption: { - fontSize: normalize(18), - color: '#F80404', - fontWeight: 'bold', - marginLeft: 12 - }, - notification: { - backgroundColor: '#fe3c30', - padding: 5, - borderRadius: 10, - marginLeft: 15, - marginBottom: normalize(11) - }, - secondOptionView: { - flex: 1, - marginLeft: 15, - justifyContent: 'space-between', - flexDirection: 'row', - alignItems: 'center', - borderBottomWidth: 1, - borderColor: '#403F3F' - }, - lastOptionView: { - flex: 1, - marginLeft: 15, - justifyContent: 'space-between', - flexDirection: 'row', - alignItems: 'center' - }, - localisation: { - backgroundColor: '#0835A7', - padding: 5, - borderRadius: 10, - marginLeft: 15, - marginBottom: normalize(11) - }, - lastOption: { - marginTop: normalize(11), - flexDirection: 'row', - alignItems: 'center', - }, - musicActually: { - paddingTop: normalize(17), - backgroundColor: "#232123", - borderRadius: 13, - alignItems: 'flex-start', - marginBottom: normalize(45) - }, - titleMusic: { - flexDirection: 'row', - marginBottom: 5 - }, - mascot: { - width: normalize(90), - height: normalize(90), - position: 'absolute', - right: normalize(0), - top: normalize(10) - } - -}) \ No newline at end of file diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx index bf239b1..66dff37 100644 --- a/src/FLAD/screens/SettingProfil.tsx +++ b/src/FLAD/screens/SettingProfil.tsx @@ -1,13 +1,16 @@ import React, { useState, useRef } from 'react'; -import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView, Image } from 'react-native'; +import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView, Image } from 'react-native'; import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'; import { Svg, Path } from 'react-native-svg'; import Modal from "react-native-modal"; -import {useNavigation} from "@react-navigation/native"; +import { useNavigation } from "@react-navigation/native"; +import { useSelector } from 'react-redux'; import normalize from '../components/Normalize'; import * as ImagePicker from 'expo-image-picker'; import { SafeAreaView } from 'react-native-safe-area-context'; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; // @ts-ignore const DismissKeyboard = ({ children }) => ( @@ -18,6 +21,10 @@ const DismissKeyboard = ({ children }) => ( export default function SettingProfil() { + //Dark Mode + const isDark = useSelector(state => state.userReducer.dark); + const style = isDark ? GraphicalCharterLight : GraphicalCharterDark; + const [image, setImage] = useState(null); const navigation = useNavigation(); const [currentIndex, setCurrentIndex] = useState(0); @@ -32,19 +39,231 @@ export default function SettingProfil() { const pickImage = async () => { // No permissions request is necessary for launching the image library let result = await ImagePicker.launchImageLibraryAsync({ - mediaTypes: ImagePicker.MediaTypeOptions.All, - allowsEditing: true, - aspect: [4, 3], - quality: 1, + mediaTypes: ImagePicker.MediaTypeOptions.All, + allowsEditing: true, + aspect: [4, 3], + quality: 1, }); console.log(result); if (!result.canceled) { - setImage(result.assets[0].uri); + setImage(result.assets[0].uri); } }; + const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: style.body, + }, + container: { + marginTop: 20, + marginHorizontal: normalize(25), + flex: 1, + backgroundColor: style.body, + }, + buttonSetting: { + width: normalize(17), + height: normalize(17), + marginRight: 5 + }, + modalContent: { + position: 'absolute', + top: '5%', + left: '-5%', + right: '-5%', + height: '100%', + backgroundColor: style.body, + borderRadius: 12 + }, + modalView: { + flexDirection: 'row', + marginTop: 20, + marginLeft: 30, + marginBottom: normalize(45) + }, + exit: { + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center' + }, + textExit: { + fontSize: normalize(20), + color: '#454545', + fontWeight: 'bold' + }, + profilHead: { + alignItems: 'center', + }, + title: { + fontSize: normalize(30), + fontWeight: 'bold', + color: style.Text, + }, + imageWrapper: { + width: 126, + height: 126, + borderRadius: 63, + borderWidth: 3, + borderColor: style.Text, + overflow: 'hidden', + marginVertical: 20, + alignItems: 'center', + justifyContent: 'center', + }, + imageProfil: { + width: 120, + height: 120, + }, + editButton: { + width: 50, + height: 50, + borderRadius: 25, + backgroundColor: '#7C7C7C', + alignItems: 'center', + justifyContent: 'center' + }, + body: { + paddingVertical: 9, + paddingLeft: normalize(10), + backgroundColor: style.Card, + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + textOption: { + fontSize: normalize(18), + color: style.Text, + fontWeight: 'bold', + marginLeft: 12 + }, + deleteOption: { + paddingVertical: 9, + paddingLeft: 5, + backgroundColor: style.Card, + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + }, + textOptionPassword: { + fontSize: normalize(18), + color: '#1c77fb', + marginLeft: 12 + }, + buttonDeleteOption: { + backgroundColor: '#DF0404', + padding: 5, + borderRadius: 10, + marginLeft: 15 + }, + textDeleteOption: { + fontSize: normalize(18), + color: '#F80404', + marginLeft: 12 + }, + optionId: { + flexDirection: 'row', + marginBottom: 20, + }, + optionMail: { + flexDirection: 'row', + }, + textInputId: { + marginLeft: 50, + width: '57%', + color: 'white', + fontSize: normalize(18), + }, + textInputMail: { + marginLeft: 100, + color: 'white', + width: '57%', + fontSize: normalize(18) + }, + passwordOption: { + paddingVertical: 9, + paddingLeft: normalize(10), + backgroundColor: style.Card, + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + passwordIcon: { + backgroundColor: '#8e8d92', + padding: 5, + paddingHorizontal: 8, + borderRadius: 10, + marginLeft: 10 + }, + optionView: { + flexDirection: 'row', + marginTop: 5 + }, + cancelText: { + fontSize: normalize(20), + color: '#1c77fb' + }, + updateText: { + marginLeft: 60, + fontSize: normalize(20), + color: '#404040' + }, + titlePassword: { + fontSize: normalize(22), + color: style.Text, + marginLeft: 50 + }, + warning: { + color: '#98989f', + fontSize: normalize(15) + }, + warningView: { + marginTop: 10, + paddingHorizontal: 40 + }, + bodyModal: { + paddingVertical: 12, + paddingLeft: 30, + marginHorizontal: normalize(25), + backgroundColor: style.Card, + borderRadius: 13, + alignItems: 'flex-start' + }, + optionModalWithUnderline: { + flexDirection: 'row', + borderBottomWidth: 1, + borderColor: style.Line, + paddingBottom: 10, + marginBottom: 10 + }, + optionModal: { + flexDirection: 'row' + }, + textOptionModal: { + fontSize: normalize(18), + color: style.Text, + fontWeight: 'bold', + }, + textInputNewModal: { + marginLeft: 40, + color: style.Text, + width: '67.5%', + fontSize: normalize(18) + }, + textInputConfirmModal: { + marginLeft: 30, + color: style.Text, + fontSize: normalize(18) + }, + textInputOldModal: { + marginLeft: 55, + color: style.Text, + width: '67.5%', + fontSize: normalize(18) + } + }) + return ( @@ -52,8 +271,8 @@ export default function SettingProfil() { navigation.navigate('Setting')}> - - Exit + + Exit @@ -64,27 +283,27 @@ export default function SettingProfil() { - + source={require('../assets/icons/icons/edit.png')} style={{ resizeMode: "stretch", height: '85%', aspectRatio: 1 }} + /> + Identifiant - + Mail - + - + - + @@ -96,12 +315,12 @@ export default function SettingProfil() { - - - - - - + + + + + + console.log("Tkt t deconnecter")}> @@ -121,20 +340,20 @@ export default function SettingProfil() { Modifier - + Ancien - + Nouveau - + Confirmer - + @@ -147,216 +366,4 @@ export default function SettingProfil() { ); -}; - -const styles = StyleSheet.create({ - mainSafeArea: { - flex: 1, - backgroundColor: "#141414", - }, - container: { - marginTop: 20, - marginHorizontal: normalize(25), - flex: 1, - backgroundColor: '#141414', - }, - buttonSetting: { - width: normalize(17), - height: normalize(17), - marginRight: 5 - }, - modalContent: { - position: 'absolute', - top: '5%', - left: '-5%', - right: '-5%', - height: '100%', - backgroundColor: '#141414', - borderRadius: 12 - }, - modalView: { - flexDirection: 'row', - marginTop: 20, - marginLeft: 30, - marginBottom: normalize(45) - }, - exit: { - flexDirection: 'row', - justifyContent: 'flex-start', - alignItems: 'center' - }, - textExit: { - fontSize: normalize(20), - color: '#454545', - fontWeight: 'bold' - }, - profilHead: { - alignItems: 'center', - }, - title: { - fontSize: normalize(30), - fontWeight: 'bold', - color: 'white', - }, - imageWrapper: { - width: 126, - height: 126, - borderRadius: 63, - borderWidth: 3, - borderColor: 'white', - overflow: 'hidden', - marginVertical: 20, - alignItems: 'center', - justifyContent: 'center', - }, - imageProfil: { - width: 120, - height: 120, - }, - editButton: { - width: 50, - height: 50, - borderRadius: 25, - backgroundColor: '#7C7C7C', - alignItems: 'center', - justifyContent: 'center' - }, - body: { - paddingVertical: 9, - paddingLeft: normalize(10), - backgroundColor: "#232123", - borderRadius: 13, - alignItems: 'flex-start', - marginBottom: normalize(45) - }, - textOption: { - fontSize: normalize(18), - color: 'white', - fontWeight: 'bold', - marginLeft: 12 - }, - deleteOption: { - paddingVertical: 9, - paddingLeft: 5, - backgroundColor: "#232123", - borderRadius: 13, - flexDirection: 'row', - alignItems: 'center', - }, - textOptionPassword: { - fontSize: normalize(18), - color: '#1c77fb', - marginLeft: 12 - }, - buttonDeleteOption: { - backgroundColor: '#DF0404', - padding: 5, - borderRadius: 10, - marginLeft: 15 - }, - textDeleteOption: { - fontSize: normalize(18), - color: '#F80404', - marginLeft: 12 - }, - optionId: { - flexDirection:'row', - marginBottom: 20, - }, - optionMail: { - flexDirection:'row', - }, - textInputId: { - marginLeft: 50, - width: '57%', - color: 'white', - fontSize: normalize(18), - }, - textInputMail: { - marginLeft: 100, - color: 'white', - width: '57%', - fontSize: normalize(18) - }, - passwordOption: { - paddingVertical: 9, - paddingLeft: normalize(10), - backgroundColor: "#232123", - borderRadius: 13, - alignItems: 'flex-start', - marginBottom: normalize(45) - }, - passwordIcon: { - backgroundColor: '#8e8d92', - padding: 5, - paddingHorizontal: 8, - borderRadius: 10, - marginLeft: 10 - }, - optionView: { - flexDirection: 'row', - marginTop: 5 - }, - cancelText: { - fontSize: normalize(20), - color: '#1c77fb' - }, - updateText: { - marginLeft: 60, - fontSize: normalize(20), - color: '#404040' - }, - titlePassword: { - fontSize: normalize(22), - color: 'white', - marginLeft: 50 - }, - warning: { - color: '#98989f', - fontSize: normalize(15) - }, - warningView: { - marginTop: 10, - paddingHorizontal: 40 - }, - bodyModal: { - paddingVertical: 12, - paddingLeft: 30, - marginHorizontal: normalize(25), - backgroundColor: "#232123", - borderRadius: 13, - alignItems: 'flex-start' - }, - optionModalWithUnderline: { - flexDirection: 'row', - borderBottomWidth: 1, - borderColor: '#403F3F', - paddingBottom: 10, - marginBottom: 10 - }, - optionModal: { - flexDirection: 'row' - }, - textOptionModal: { - fontSize: normalize(18), - color: 'white', - fontWeight: 'bold', - }, - textInputNewModal: { - marginLeft: 40, - color: 'white', - width: '67.5%', - fontSize: normalize(18) - }, - textInputConfirmModal: { - marginLeft: 30, - color: 'white', - fontSize: normalize(18) - }, - textInputOldModal: { - marginLeft: 55, - color: 'white', - width: '67.5%', - fontSize: normalize(18) - } -}) \ No newline at end of file +}; \ No newline at end of file diff --git a/src/FLAD/screens/SpotDetailsPage.tsx b/src/FLAD/screens/SpotDetailsPage.tsx index 2dd10b8..337285e 100644 --- a/src/FLAD/screens/SpotDetailsPage.tsx +++ b/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, SafeAreaView } 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"; @@ -13,71 +13,71 @@ import { RequestHandler } from "../services/spotify/spotifyRequestHandler/utils" import { FetchRequest } from "expo-auth-session/build/Fetch"; interface SpotProps { - spot: { name: string, sourceUrl: string, index : number }; + spot: { name: string, sourceUrl: string, index: number }; } -const halfPi = Math.PI/2; +const halfPi = Math.PI / 2; // const {width : wWidht} = Dimensions.get("window"); //@ts-ignore const SpotDetailsPage = ({ route }) => { - const {width, height} = useWindowDimensions(); - console.log(route); - - const spot : { name: string, sourceUrl: string, index : number } = route.params.spot; - const [currentspot, setCurrentspot] = useState(spot); - const [sound, setSound] = useState(null); - - const [isPlaying, setIsPlaying] = useState(false); - const loader = useSharedValue(0); - useEffect(() => { - loader.value = isPlaying ? 1 : 0 - }, [isPlaying,loader ]); - - const transition = useDerivedValue(()=>{ - return withTiming(loader.value, {duration : 1000}) - } - ) + const { width, height } = useWindowDimensions(); + console.log(route); + + const spot: { name: string, sourceUrl: string, index: number } = route.params.spot; + const [currentspot, setCurrentspot] = useState(spot); + const [sound, setSound] = useState(null); + + const [isPlaying, setIsPlaying] = useState(false); + const loader = useSharedValue(0); + useEffect(() => { + loader.value = isPlaying ? 1 : 0 + }, [isPlaying, loader]); + + const transition = useDerivedValue(() => { + return withTiming(loader.value, { duration: 1000 }) + } + ) - // const styleAniamatedButton = useAnimatedStyle(() => { - // const verticalAxis =interpolate( - // transition.value, - // [0,1], - // [circumference, 0] - // ) - - // return { - // top : withSpring( verticalAxis), - // left : withSpring(horizontalAxis), - // }; - - // }) + // const styleAniamatedButton = useAnimatedStyle(() => { + // const verticalAxis =interpolate( + // transition.value, + // [0,1], + // [circumference, 0] + // ) + // return { + // top : withSpring( verticalAxis), + // left : withSpring(horizontalAxis), + // }; - const trackPreviewUrl = 'https://p.scdn.co/mp3-preview/08ef3b9d6dbd6bab233f5e9ca564091902767f71?cid=774b29d4f13844c495f206cafdad9c86'; - const playTrackPreview = async () => { + // }) + + + const trackPreviewUrl = 'https://p.scdn.co/mp3-preview/08ef3b9d6dbd6bab233f5e9ca564091902767f71?cid=774b29d4f13844c495f206cafdad9c86'; + const playTrackPreview = async () => { console.log("==============================================================================================================="); - console.log('get in Sound'); - - const { sound } = await Audio.Sound.createAsync({uri :trackPreviewUrl}); - //@ts-ignore - setSound(sound); - console.log('Playing Sound'); - await sound.playAsync(); - setIsPlaying(true); - - - // const soundObject = new Audio.Sound(); - // try { - // await soundObject.loadAsync({ uri: trackPreviewUrl }); - // await soundObject.playAsync(); - // setIsPlaying(true); - // } catch (error) { - // console.log('Error loading sound:', error); - // } - }; - + console.log('get in Sound'); + + const { sound } = await Audio.Sound.createAsync({ uri: trackPreviewUrl }); + //@ts-ignore + setSound(sound); + console.log('Playing Sound'); + await sound.playAsync(); + setIsPlaying(true); + + + // const soundObject = new Audio.Sound(); + // try { + // await soundObject.loadAsync({ uri: trackPreviewUrl }); + // await soundObject.playAsync(); + // setIsPlaying(true); + // } catch (error) { + // console.log('Error loading sound:', error); + // } + }; + const handlePlaySound = async () => { if (sound === null) { const { sound: newSound } = await Audio.Sound.createAsync( @@ -85,193 +85,194 @@ const SpotDetailsPage = ({ route }) => { { shouldPlay: true } ); setSound(newSound); - + } else { - //@ts-ignore + //@ts-ignore await sound.playAsync(); } }; const handleStopSound = async () => { if (sound !== null) { - //@ts-ignore + //@ts-ignore await sound.stopAsync(); } - else{ - setIsPlaying(true); + else { + setIsPlaying(true); } }; - useEffect(() => { + useEffect(() => { return sound ? () => { - console.log('Unloading Sound'); - //@ts-ignore - sound.unloadAsync(); - } - : undefined; - }, [sound]); - // useEffect(() => { - // if(isPlaying){ - - // } - // }) - - console.log(spot); - const sensor = useAnimatedSensor(SensorType.ROTATION); - const styleAniamatedImage = useAnimatedStyle(() => { - const {yaw, pitch, roll} = sensor.sensor.value; - const verticalAxis =interpolate( - pitch, - [-halfPi,halfPi], - [-45, 45] - ) - const horizontalAxis =interpolate( - roll, - [-halfPi*2,halfPi*2], - [-45, 45] - ) - return { - top : withSpring( verticalAxis), - left : withSpring(horizontalAxis), - }; - - }) - const CLIENT_ID = "1f1e34e4b6ba48b388469dba80202b10"; - const CLIENT_SECRET = "779371c6d4994a68b8dd6e84b0873c82"; - const spotify = "BQA2IAFZ-7ta4-_4_Uqdcdrqi_peE6Hlf1jwxFqjXTbwes0z8xgVGx0rE3zv4cQlusd1ILJhRwkxzPsL1YakzSvCxaTI1P7kOzBrrMqlkDgk4vlFvzLjScB0hBLULbpZyn3ylgx4RyZBEWfmc24wZPQOsrJU58AYCveA52UxYVSIc_Frr7LZyRmwjzGB68MPZeBD" - var authOptions = { - method: 'GET', - url: 'https://api.spotify.com/v1/me/player/currently-playing', - - headers: { - 'Authorization': 'Bearer ' + spotify, - 'Content-Type' : 'application/json', - 'market' : 'FR', - }, - json: true - }; - - var id = '0cFS3AMF9Lhj3CNoFvwjvY' - const requestor = new RequestHandler() - - const getCurrentTrack = async () => { - try { - const opt : FetchRequest ={headers : Record} - requestor.spotifyFetch(`tracks${id}`,) - - // var GetTrackOptions = { - // method: 'GET', - // url: 'https://api.spotify.com/v1/tracks/'+id, - - // headers: { - // 'Authorization': 'Bearer ' + spotify, - // 'Content-Type' : 'application/json', - // 'market' : 'FR', - // }, - // json: true - // }; - // const resp = await axios(GetTrackOptions) - // console.log("============"); - // console.log(resp.data.href); - // console.log("================================"+resp.data.album.images[0].url+ "================================"); - // var tmp = currentspot; - - // tmp.sourceUrl = resp.data.album.images[0].url; - // setCurrentspot(tmp); - // await axios(authOptions).then(async (response) =>{ - // console.log(response.data.item.preview_url); - // const id = response.data.item.id; - // var GetTrackOptions = { - // method: 'GET', - // url: 'https://api.spotify.com/v1/tracks/'+id, - - // headers: { - // 'Authorization': 'Bearer ' + spotify, - // 'Content-Type' : 'application/json', - // 'market' : 'FR', - // }, - // json: true - // }; - // console.log("============"); - // const music = await axios(GetTrackOptions); - // console.log("================================"+music.data+ "================================"); - // currentspot.sourceUrl = music.data.images[0]; - // setCurrentspot(currentspot); - // }) - - // const response = await fetch('https://api.spotify.com/v1/me', { - // method: 'GET', - // headers: { - // Authorization: 'Bearer ' + spotify, - // 'Content-Type': 'application/json', - // }, - // }); - // response.json() - - // destructure the response and rename the properties to be in camelCase to satisfy my linter ;) - - } catch (err) { - console.error(err); - } - } - const animationState = new Value(State.UNDETERMINED); - - - return ( - - + console.log('Unloading Sound'); + //@ts-ignore + sound.unloadAsync(); + } + : undefined; + }, [sound]); + // useEffect(() => { + // if(isPlaying){ + + // } + // }) + + console.log(spot); + const sensor = useAnimatedSensor(SensorType.ROTATION); + const styleAniamatedImage = useAnimatedStyle(() => { + const { yaw, pitch, roll } = sensor.sensor.value; + const verticalAxis = interpolate( + pitch, + [-halfPi, halfPi], + [-45, 45] + ) + const horizontalAxis = interpolate( + roll, + [-halfPi * 2, halfPi * 2], + [-45, 45] + ) + return { + top: withSpring(verticalAxis), + left: withSpring(horizontalAxis), + }; + + }) + const CLIENT_ID = "1f1e34e4b6ba48b388469dba80202b10"; + const CLIENT_SECRET = "779371c6d4994a68b8dd6e84b0873c82"; + const spotify = "BQA2IAFZ-7ta4-_4_Uqdcdrqi_peE6Hlf1jwxFqjXTbwes0z8xgVGx0rE3zv4cQlusd1ILJhRwkxzPsL1YakzSvCxaTI1P7kOzBrrMqlkDgk4vlFvzLjScB0hBLULbpZyn3ylgx4RyZBEWfmc24wZPQOsrJU58AYCveA52UxYVSIc_Frr7LZyRmwjzGB68MPZeBD" + var authOptions = { + method: 'GET', + url: 'https://api.spotify.com/v1/me/player/currently-playing', + + headers: { + 'Authorization': 'Bearer ' + spotify, + 'Content-Type': 'application/json', + 'market': 'FR', + }, + json: true + }; + + var id = '0cFS3AMF9Lhj3CNoFvwjvY' + const requestor = new RequestHandler() + + const getCurrentTrack = async () => { + try { + const opt: FetchRequest = { headers: Record } + requestor.spotifyFetch(`tracks${id}`,) + + // var GetTrackOptions = { + // method: 'GET', + // url: 'https://api.spotify.com/v1/tracks/'+id, + + // headers: { + // 'Authorization': 'Bearer ' + spotify, + // 'Content-Type' : 'application/json', + // 'market' : 'FR', + // }, + // json: true + // }; + // const resp = await axios(GetTrackOptions) + // console.log("============"); + // console.log(resp.data.href); + // console.log("================================"+resp.data.album.images[0].url+ "================================"); + // var tmp = currentspot; + + // tmp.sourceUrl = resp.data.album.images[0].url; + // setCurrentspot(tmp); + // await axios(authOptions).then(async (response) =>{ + // console.log(response.data.item.preview_url); + // const id = response.data.item.id; + // var GetTrackOptions = { + // method: 'GET', + // url: 'https://api.spotify.com/v1/tracks/'+id, + + // headers: { + // 'Authorization': 'Bearer ' + spotify, + // 'Content-Type' : 'application/json', + // 'market' : 'FR', + // }, + // json: true + // }; + // console.log("============"); + // const music = await axios(GetTrackOptions); + // console.log("================================"+music.data+ "================================"); + // currentspot.sourceUrl = music.data.images[0]; + // setCurrentspot(currentspot); + // }) + + // const response = await fetch('https://api.spotify.com/v1/me', { + // method: 'GET', + // headers: { + // Authorization: 'Bearer ' + spotify, + // 'Content-Type': 'application/json', + // }, + // }); + // response.json() + + // destructure the response and rename the properties to be in camelCase to satisfy my linter ;) + + } catch (err) { + console.error(err); + } + } + const animationState = new Value(State.UNDETERMINED); + + + return ( + + {/* */} - - - -