diff --git a/doc/Images/Icon.png b/doc/Images/Icon.png deleted file mode 100644 index cc0dad0..0000000 Binary files a/doc/Images/Icon.png and /dev/null differ diff --git a/doc/Images/Real_ConversationPage.png b/doc/Images/Real_ConversationPage.png deleted file mode 100644 index 119225c..0000000 Binary files a/doc/Images/Real_ConversationPage.png and /dev/null differ diff --git a/doc/Images/Real_FavoritePage.png b/doc/Images/Real_FavoritePage.png deleted file mode 100644 index f2d1905..0000000 Binary files a/doc/Images/Real_FavoritePage.png and /dev/null differ diff --git a/doc/Images/Real_HomePage.png b/doc/Images/Real_HomePage.png deleted file mode 100644 index 1cafd36..0000000 Binary files a/doc/Images/Real_HomePage.png and /dev/null differ diff --git a/doc/Images/Real_LoginPage.png b/doc/Images/Real_LoginPage.png deleted file mode 100644 index b5a8dfe..0000000 Binary files a/doc/Images/Real_LoginPage.png and /dev/null differ diff --git a/doc/Images/Real_RegisterPage.png b/doc/Images/Real_RegisterPage.png deleted file mode 100644 index 8fc8b80..0000000 Binary files a/doc/Images/Real_RegisterPage.png and /dev/null differ diff --git a/doc/Images/Real_SettingPage.png b/doc/Images/Real_SettingPage.png deleted file mode 100644 index 28edc31..0000000 Binary files a/doc/Images/Real_SettingPage.png and /dev/null differ diff --git a/doc/Mascot/FLADYPerfect.png b/doc/Mascot/FLADYPerfect.png deleted file mode 100644 index 4eaaec4..0000000 Binary files a/doc/Mascot/FLADYPerfect.png and /dev/null differ diff --git a/doc/Mascot/FLADYPerfectRed.png b/doc/Mascot/FLADYPerfectRed.png deleted file mode 100644 index 33b82eb..0000000 Binary files a/doc/Mascot/FLADYPerfectRed.png and /dev/null differ diff --git a/doc/Mascot/FLADYPerfectShadow.png b/doc/Mascot/FLADYPerfectShadow.png deleted file mode 100644 index d834196..0000000 Binary files a/doc/Mascot/FLADYPerfectShadow.png and /dev/null differ diff --git a/doc/Mascot/Flady.png b/doc/Mascot/Flady.png new file mode 100644 index 0000000..bd520c2 Binary files /dev/null and b/doc/Mascot/Flady.png differ diff --git a/doc/Mascot/RedFlady.png b/doc/Mascot/RedFlady.png new file mode 100644 index 0000000..037e4f1 Binary files /dev/null and b/doc/Mascot/RedFlady.png differ diff --git a/src/Api/src/controllers/spotifyController.ts b/src/Api/src/controllers/spotifyController.ts index 9c91125..ddf7447 100644 --- a/src/Api/src/controllers/spotifyController.ts +++ b/src/Api/src/controllers/spotifyController.ts @@ -92,7 +92,7 @@ class SpotifyController implements IController { ): Promise => { let code = req.query.code; let storedRedirectUri = req.cookies ? req.cookies[this.clientRedirect] : null; - var authOptions = { + let authOptions = { method: 'POST', url: this.API_URL, data: qs.stringify({ diff --git a/src/Api/src/services/LocationService.ts b/src/Api/src/services/LocationService.ts index 936b3e9..fb3d23e 100644 --- a/src/Api/src/services/LocationService.ts +++ b/src/Api/src/services/LocationService.ts @@ -36,7 +36,7 @@ class LocationService { const radlat2 = Math.PI * lat2 / 180; const theta = lon1 - lon2; const radtheta = Math.PI * theta / 180; - var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); + let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); if (dist > 1) { dist = 1; diff --git a/src/Api/src/services/TokenService.ts b/src/Api/src/services/TokenService.ts index cee35b6..c43cbc2 100644 --- a/src/Api/src/services/TokenService.ts +++ b/src/Api/src/services/TokenService.ts @@ -4,7 +4,7 @@ import Token from '../models/Token'; export const createToken = (user: User): string => { return jwt.sign({ id: user._id }, process.env.SECRET_JWT as jwt.Secret, { - expiresIn: '1d', + expiresIn: '15d', }); }; diff --git a/src/FLAD/assets/images/like_icon_no_text.png b/src/FLAD/assets/images/like_icon_no_text.png new file mode 100644 index 0000000..95d8c84 Binary files /dev/null and b/src/FLAD/assets/images/like_icon_no_text.png differ diff --git a/src/FLAD/assets/lottie/Lottie.tsx b/src/FLAD/assets/lottie/Lottie.tsx index 30a1482..fc2616a 100644 --- a/src/FLAD/assets/lottie/Lottie.tsx +++ b/src/FLAD/assets/lottie/Lottie.tsx @@ -1,6 +1,5 @@ const Lotties = { likeAnimation: require('./spotify-like-interaction.json') - // riveLike : require('./light_like.riv'), } export default Lotties; \ No newline at end of file diff --git a/src/FLAD/components/Card.tsx b/src/FLAD/components/Card.tsx deleted file mode 100644 index 72523aa..0000000 --- a/src/FLAD/components/Card.tsx +++ /dev/null @@ -1,227 +0,0 @@ -import { View, Image, Dimensions, StyleSheet } from 'react-native' -import React from 'react' -import Animated, { 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 -const SCREEN_HEIGHT = Dimensions.get('window').height - -interface CardProps { - title: string; - image: any; - onSwipe: (direction: "left" | "right" | "down") => void; -} -type ContextType = { - translateX: number; - translateY: number; -}; - -const Card = ({ 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: () => { - - if (translateX.value > 160) { - console.log("translateX2"); - runOnJS(onSwipe)("right"); - } else if (translateX.value < -160) { - runOnJS(onSwipe)("left"); - } else if (translateY.value > 250) { - runOnJS(onSwipe)("down"); - } - - 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 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` }, - ] - - }; - }); - - return ( - - - - - - - - - <> - - - - - - - - - - - - - - - ); -}; - - -const styles = StyleSheet.create({ - card: { - justifyContent: 'center', - alignItems: 'center', - }, - image: { - borderRadius: 24, - resizeMode: 'stretch', - 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/CardComponent.tsx b/src/FLAD/components/CardComponent.tsx new file mode 100644 index 0000000..a567cf0 --- /dev/null +++ b/src/FLAD/components/CardComponent.tsx @@ -0,0 +1,212 @@ +import { View, Image, Dimensions, StyleSheet } from 'react-native' +import React from 'react' +import Animated, { interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'; +import normalize from './Normalize'; +import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; + +const SCREEN_WIDTH = Dimensions.get('window').width; +const SCREEN_HEIGHT = Dimensions.get('window').height; + +interface CardProps { + image: any; + onSwipe: (direction: "left" | "right" | "down") => void; +} + +type ContextType = { + translateX: number; + translateY: number; +}; + +export default function CardComponent(props: 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: () => { + + if (translateX.value > SCREEN_WIDTH / 2) { + runOnJS(props.onSwipe)("right"); + } else if (translateX.value < -SCREEN_WIDTH / 2) { + runOnJS(props.onSwipe)("left"); + } else if (translateY.value > SCREEN_HEIGHT / 2) { + runOnJS(props.onSwipe)("down"); + } else { + translateX.value = withSpring(0); + translateY.value = withSpring(0); + } + }, + }); + + const opacityRightIcon = useAnimatedStyle(() => { + const horizontal = interpolate + (translateX.value, + [-SCREEN_WIDTH / 4, 20, SCREEN_WIDTH / 4], + [0, 0, 1]); + + const vertical = interpolate + (translateY.value, + [20, SCREEN_HEIGHT / 4], + [1, 0.2]); + + return { + opacity: horizontal * vertical, + }; + }); + + const opacityLeftIcon = useAnimatedStyle(() => { + const horizontal = interpolate + (translateX.value, + [-SCREEN_WIDTH / 4, -20, SCREEN_WIDTH / 4], + [1, 0, 0]); + + const vertical = interpolate + (translateY.value, + [20, SCREEN_HEIGHT / 4], + [1, 0.2]); + + return { + opacity: horizontal * vertical, + }; + }); + + const opacityDownIcon = useAnimatedStyle(() => { + const vertical = interpolate + (translateY.value, + [20, SCREEN_HEIGHT / 2], + [0, 1]); + + const horizontal = interpolate + (translateX.value, + [-SCREEN_WIDTH / 4, 0, SCREEN_WIDTH / 4], + [0.5, 1, 0.5]); + + return { + opacity: vertical * horizontal, + }; + }); + + const opacityHorizontalBackground = useAnimatedStyle(() => { + const value = interpolate + (translateX.value, + [-SCREEN_WIDTH / 4, 0, SCREEN_WIDTH / 4], + [0.27, 0, 0.27]); + return { + opacity: value, + }; + }); + + const opacityDownBackground = useAnimatedStyle(() => { + const value = interpolate + (translateY.value, + [0, SCREEN_HEIGHT / 5], + [0, 0.28]); + return { + opacity: value, + }; + }); + + const horizontalThreshold = SCREEN_WIDTH * 0.65; + + 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` }, + ] + }; + }); + + return ( + + + + + + + + + + + + + + + + + + + ); +}; + + +const styles = StyleSheet.create({ + image: { + borderRadius: 24, + resizeMode: 'stretch', + height: normalize(420), + width: normalize(420), + }, + backgroundEffect: { + backgroundColor: 'black', + elevation: 100, + position: "absolute", + borderWidth: 8, + borderColor: '#FFF', + zIndex: 1 + }, + container: { + flex: 1, + width: '100%', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + shadowColor: "#000", + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.39, + shadowRadius: 8.30, + }, + iconContainer: { + width: '100%', + height: '100%', + position: "absolute", + justifyContent: "center", + alignContent: "center", + elevation: 100, + zIndex: 1 + }, + icon: { + alignSelf: "center", + width: 126.27, + height: 118.64, + } +}); \ No newline at end of file diff --git a/src/FLAD/components/CardMusicComponent.tsx b/src/FLAD/components/CardMusicComponent.tsx index 525d370..3426f8e 100644 --- a/src/FLAD/components/CardMusicComponent.tsx +++ b/src/FLAD/components/CardMusicComponent.tsx @@ -4,8 +4,8 @@ import { useSelector } from 'react-redux'; import { colorsDark } from '../constants/colorsDark'; import { colorsLight } from '../constants/colorsLight'; import normalize from './Normalize'; -import Music from '../model/Music'; -import Artist from '../model/Artist'; +import Music from '../models/Music'; +import Artist from '../models/Artist'; type CardMusicProps = { music: Music @@ -35,7 +35,6 @@ export default function CardMusic(props: CardMusicProps) { width: '100%', height: '100%', borderRadius: 10 - }, textContainer: { flex: 1, diff --git a/src/FLAD/components/LoadingComponent.tsx b/src/FLAD/components/LoadingComponent.tsx index 6341159..8da06d3 100644 --- a/src/FLAD/components/LoadingComponent.tsx +++ b/src/FLAD/components/LoadingComponent.tsx @@ -32,7 +32,7 @@ export default function Loading() { }); return ( - + diff --git a/src/FLAD/models/MusicServiceProvider.ts b/src/FLAD/models/MusicServiceProvider.ts index 9cfd902..20ca4a3 100644 --- a/src/FLAD/models/MusicServiceProvider.ts +++ b/src/FLAD/models/MusicServiceProvider.ts @@ -1,4 +1,4 @@ -import EmptyMusicService from "../services/EmptyMusicService"; +import EmptyMusicService from "../services/musics/EmptyMusicService"; import IMusicService from "../services/musics/interfaces/IMusicService"; import SpotifyService from "../services/musics/spotify/SpotifyService"; diff --git a/src/FLAD/package.json b/src/FLAD/package.json index 960a188..8af33ef 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -27,7 +27,6 @@ "expo-random": "~13.0.0", "expo-secure-store": "~12.0.0", "expo-splash-screen": "~0.17.5", - "lottie-react-native": "5.1.4", "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.8", diff --git a/src/FLAD/redux/actions/spotActions.tsx b/src/FLAD/redux/actions/spotActions.tsx index 0938c7c..9a064ca 100644 --- a/src/FLAD/redux/actions/spotActions.tsx +++ b/src/FLAD/redux/actions/spotActions.tsx @@ -1,6 +1,5 @@ import { Spot } from "../../models/Spot"; import { spotTypes } from "../types/spotTypes"; -import { userTypes } from "../types/userTypes"; export const setSpotList = (spotList: Spot[]) => { return { diff --git a/src/FLAD/redux/thunk/userThunk.tsx b/src/FLAD/redux/thunk/userThunk.tsx index bd48e74..4ded97f 100644 --- a/src/FLAD/redux/thunk/userThunk.tsx +++ b/src/FLAD/redux/thunk/userThunk.tsx @@ -1,6 +1,6 @@ import axios from "axios"; import configs from "../../constants/config"; -import { setDarkMode, setErrorNetwork, setErrorUpdateMessage, userLogin } from "../actions/userActions"; +import { setDarkMode, setErrorUpdateMessage, userLogin } from "../actions/userActions"; import * as SecureStore from 'expo-secure-store'; import { UserMapper } from "../../models/mapper/UserMapper"; diff --git a/src/FLAD/screens/LoginScreen.tsx b/src/FLAD/screens/LoginScreen.tsx index ca56920..5858fe2 100644 --- a/src/FLAD/screens/LoginScreen.tsx +++ b/src/FLAD/screens/LoginScreen.tsx @@ -15,7 +15,6 @@ const DismissKeyboard = ({ children }) => ( ) export default function LoginScreen() { - const [sound, setSound] = useState(); const [rememberMe, setRememberMe] = useState(false); const navigation = useNavigation(); // @ts-ignore @@ -30,7 +29,6 @@ export default function LoginScreen() { const { sound } = await Audio.Sound.createAsync( require('../assets/sounds/click.mp3') ); - setSound(sound); await sound.playAsync(); } diff --git a/src/FLAD/screens/RegisterScreen.tsx b/src/FLAD/screens/RegisterScreen.tsx index 0877e9b..228427d 100644 --- a/src/FLAD/screens/RegisterScreen.tsx +++ b/src/FLAD/screens/RegisterScreen.tsx @@ -17,7 +17,6 @@ const DismissKeyboard = ({ children }) => ( ) export default function RegisterScreen() { - const [sound, setSound] = useState(); const navigation = useNavigation(); const [spotifyToken, setSpotifyToken] = useState(); const [username, setUsername] = useState(''); @@ -33,7 +32,6 @@ export default function RegisterScreen() { const { sound } = await Audio.Sound.createAsync( require('../assets/sounds/click.mp3') ); - setSound(sound); await sound.playAsync(); } @@ -91,7 +89,6 @@ export default function RegisterScreen() { encodeURIComponent(redirectUri) }) const { - access_token: access_token, refresh_token: refresh_token, } = result.params setSpotifyToken(refresh_token) diff --git a/src/FLAD/screens/SpotScreen.tsx b/src/FLAD/screens/SpotScreen.tsx index cc9cf66..4c41fa0 100644 --- a/src/FLAD/screens/SpotScreen.tsx +++ b/src/FLAD/screens/SpotScreen.tsx @@ -1,197 +1,200 @@ import { View, Text, Dimensions, StyleSheet, ImageBackground, Image, Pressable, TouchableOpacity, SafeAreaView } from 'react-native' -import React, { useCallback, useEffect, useRef, useState } from 'react' +import React, { useEffect, useState } from 'react' import { LinearGradient } from 'expo-linear-gradient'; import * as Haptics from 'expo-haptics'; -import Animated from 'react-native-reanimated'; -import Card from '../components/Card'; +import Card from '../components/CardComponent'; import normalize from '../components/Normalize'; -import LottieView from 'lottie-react-native' -import Lotties from '../assets/lottie/Lottie'; import Loading from '../components/LoadingComponent'; import { useNavigation } from '@react-navigation/native'; import { useDispatch, useSelector } from 'react-redux'; import { Spot } from '../models/Spot'; -import { removeFromSpotList, setSpotList } from '../redux/actions/spotActions'; +import { removeFromSpotList } from '../redux/actions/spotActions'; import { MusicServiceProvider } from '../models/MusicServiceProvider'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import Artist from '../models/Artist'; export default function SpotScreen() { //@ts-ignore const spotReducer: Spot[] = useSelector(state => state.appReducer.spot) const [cards, setCards] = useState(spotReducer); - const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]); + const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]); + + const dispatch = useDispatch(); + useEffect(() => { setCards(spotReducer); setcurrentCard(spotReducer[spotReducer.length - 1]); }, [spotReducer]); const onSwipe = (direction: 'left' | 'right' | 'down') => { - if (direction === 'right') { - addLike(currentCard); + dispatch(removeFromSpotList(currentCard)); } else if (direction === 'left') { - console.log('Swiped left'); - removeSpots(currentCard); + dispatch(removeFromSpotList(currentCard)); } else if (direction === 'down') { MusicServiceProvider.musicService.addToPlaylist(currentCard.music.id); - removeSpots(currentCard); + dispatch(removeFromSpotList(currentCard)); } }; - const likeButtonref = useRef(null); - const onLike = useCallback(() => { - likeButtonref.current?.reset(); - likeButtonref.current?.play(0, 55); - likeButtonref.current?.play(55, 0); - }, []) - - const dispatch = useDispatch(); - - function addLike(spot: Spot) { - onLike(); - //dispatch(addFavoritesMusic(spot.music)) - dispatch(removeFromSpotList(spot)); - } - function removeSpots(spot: Spot) { - dispatch(removeFromSpotList(spot)); - } - - function addMockSpots() { - //@ts-ignore - dispatch(setSpotList(spotsData)) - } - const navigator = useNavigation(); - const { width: wWidht } = Dimensions.get("window"); + const { width: width } = Dimensions.get("window"); const hapti = (card: Spot) => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy) // @ts-ignore navigator.navigate("Detail", { "music": card.music }) }; - return ( + const insets = useSafeAreaInsets(); + + const styles = StyleSheet.create({ + background1: { + backgroundColor: 'black', + height: '100%', + width: '100%', + paddingTop: insets.top, + }, + background2: { + justifyContent: 'center', + alignItems: 'center', + flex: 1, + backgroundColor: "#141414", + paddingTop: insets.top + }, + posterBackground: { + width: "130%", + height: "130%", + justifyContent: "center", + alignItems: "center", + position: 'absolute', + left: "-40%", + top: "-20%" + }, + gradient: { + position: "absolute", + top: 0, + left: 0, + right: 0, + height: insets.top + 150, + }, + titleLabel: { + fontStyle: 'normal', + left: width / 9, + top: '5%', + color: "#FFFFFF", + fontSize: normalize(40), + fontWeight: "800", + }, + artistLabel: { + fontStyle: 'normal', + left: width / 9, + top: '5%', + color: "#FFFFFF", + fontSize: normalize(20), + }, + buttonSection: { + flexDirection: 'row', + justifyContent: "space-evenly", + paddingHorizontal: 30, + width: '100%', + position: "absolute", + top: "74%" + }, + button: { + alignItems: 'center', + borderRadius: 100, + justifyContent: 'center', + width: 61, + height: 61, + backgroundColor: '#24243A', + opacity: 0.8 + }, + dislikeIcon: { + resizeMode: "stretch", + height: '44%', + aspectRatio: 1.05, + }, + discoveryIcon: { + resizeMode: "stretch", + height: '50%', + aspectRatio: 1.5, + marginLeft: '7%' + }, + likeIcon: { + resizeMode: "stretch", + height: '50%', + aspectRatio: 1.1 + }, + loading: { + position: 'absolute', + paddingBottom: 50 + }, + explanation: { + color: "grey", + fontSize: 13, + fontWeight: "400", + textAlign: "center", + marginTop: 150 + } + }); + return ( <> {cards.length > 0 ? ( - <> - + - - - {currentCard.music.name} - + + {currentCard.music.name} + {currentCard.music.artists.map((artist: Artist) => artist.name).join(', ')} + + {cards.map((card, index) => ( + {currentCard.music.artists[0].name} - - - - - - - {cards.map((card) => ( - - { hapti(card) }} > - { onSwipe(direction) }} - /> - - - )) - } - - - - - onSwipe('left')}> - - - onSwipe('down')}> - - - onSwipe('right')}> - - - - - + position: 'absolute', + }} + > + hapti(card)}> + onSwipe(direction)} + /> + + + ))} + + + onSwipe('left')}> + + + onSwipe('down')}> + + + onSwipe('right')}> + + - + + ) - : ( - + : ( + - Vous avez explorer toutes les spot autour de vous. + Vous avez explorer toutes les spot autour de vous. {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées sur vos gouts musicaux. - ) + ) } ); }; - -const styles = StyleSheet.create({ - mainSafeArea: { - flex: 1, - }, - spot: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - alignContent: 'center', - flexDirection: 'column', - backgroundColor: '#000' - }, - lottie: { - width: '100%', - }, - button: { - setOpacityTo: 0.8, - alignItems: 'center', - borderRadius: 100, - justifyContent: 'center', - width: 61, - height: 61, - - backgroundColor: '#24243A', - opacity: 0.8, - shadowRadius: 2, - - }, - gradient: { - position: "absolute", - top: 0, - left: 0, - right: 0, - height: 209, - }, -}) - diff --git a/src/FLAD/services/EmptyMusicService.ts b/src/FLAD/services/musics/EmptyMusicService.ts similarity index 90% rename from src/FLAD/services/EmptyMusicService.ts rename to src/FLAD/services/musics/EmptyMusicService.ts index 1cee193..f7ecf74 100644 --- a/src/FLAD/services/EmptyMusicService.ts +++ b/src/FLAD/services/musics/EmptyMusicService.ts @@ -1,5 +1,5 @@ -import Music from "../models/Music"; -import IMusicService from "./musics/interfaces/IMusicService"; +import Music from "../../models/Music"; +import IMusicService from "./interfaces/IMusicService"; export default class EmptyMusicService implements IMusicService { getImageArtistWithId(idArtist: string): Promise { diff --git a/src/FLAD/services/musics/spotify/SpotifyService.ts b/src/FLAD/services/musics/spotify/SpotifyService.ts index e871dad..1d59404 100644 --- a/src/FLAD/services/musics/spotify/SpotifyService.ts +++ b/src/FLAD/services/musics/spotify/SpotifyService.ts @@ -61,7 +61,7 @@ export default class SpotifyService implements IMusicService { async getMusicsWithIds(ids: string[]): Promise { const access_token = await this._token.getAccessToken(); - var url = `${this.API_URL}/tracks?market=FR&ids=`; + let url = `${this.API_URL}/tracks?market=FR&ids=`; if (ids.length == 0) { return []; } @@ -122,7 +122,7 @@ export default class SpotifyService implements IMusicService { description: 'Retrouvez toutes vos découvertes faites sur FladMusic 🎵', public: true }; - var headers = { + const headers = { 'Authorization': `Bearer ${access_token}`, 'Content-Type': 'application/json', 'Accept': 'application/json' @@ -132,20 +132,20 @@ export default class SpotifyService implements IMusicService { return response.data.id; } - async _isInPlaylist(idTrack: string, idPlaylist: string): Promise { + async _isInPlaylist(idTrack: string, idPlaylist: string): Promise { const access_token = await this._token.getAccessToken(); const response = await axios.get(`${this.API_URL}/playlists/${idPlaylist}/tracks?limit=100`, { headers: { 'Authorization': `Bearer ${access_token}` }, }); - var nbTracks = response.data.items.filter((item: any) => item.track.id === idTrack).length; + const nbTracks = response.data.items.filter((item: any) => item.track.id === idTrack).length; return (nbTracks >= 1) ? true : false; } async addToPlaylist(idTrack: string): Promise { - var idPlaylist = await this._getPlaylistId(); + const idPlaylist = await this._getPlaylistId(); if (await this._isInPlaylist(idTrack, idPlaylist)) { return;