Improvement of the project structure 🎨
continuous-integration/drone/push Build is passing
Details
@ -1,7 +1,7 @@
|
||||
export default class Artist {
|
||||
private id: string;
|
||||
private name: string;
|
||||
private _url: string; // Image.source
|
||||
private _url: string;
|
||||
|
||||
constructor(id: string, name: string, url: string) {
|
||||
this.id = id;
|
||||
@ -1,6 +1,6 @@
|
||||
import Music from "../Music";
|
||||
|
||||
export default class MusicFactory {
|
||||
export default class MusicMapper {
|
||||
static mapFromSpotifyTrack(jsonMusic: any): Music {
|
||||
const music = new Music(
|
||||
jsonMusic.id,
|
||||
@ -1,6 +1,6 @@
|
||||
import { User } from "../User";
|
||||
|
||||
export class UserFactory {
|
||||
export class UserMapper {
|
||||
|
||||
public static JsonToModel( jsonUser :any ) : User{
|
||||
return new User(jsonUser.idFlad, jsonUser.idSpotify, jsonUser.email, jsonUser.createdAt, jsonUser.name, jsonUser.imageUrl);
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
const Icons = {
|
||||
discovery: require('./images/icon_discovery.png'),
|
||||
like: require('./images/icon_like.png'),
|
||||
dislike: require('./images/icon_dislike.png'),
|
||||
bookmark : require('./images/icon_bookmark.svg'),
|
||||
share : require('./images/Vector.png'),
|
||||
|
||||
// riveLike : require('./light_like.riv'),
|
||||
}
|
||||
|
||||
export default Icons;
|
||||
|
Before Width: | Height: | Size: 757 B |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 715 B |
|
Before Width: | Height: | Size: 835 B |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
@ -1,12 +0,0 @@
|
||||
|
||||
const Icons = {
|
||||
discovery: require('./icon_discovery.png'),
|
||||
like: require('./icon_like.png'),
|
||||
dislike: require('./icon_dislike.png'),
|
||||
bookmark : require('./icon_bookmark.svg'),
|
||||
share : require('./Vector.png'),
|
||||
|
||||
// riveLike : require('./light_like.riv'),
|
||||
}
|
||||
|
||||
export default Icons;
|
||||
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 284 KiB After Width: | Height: | Size: 284 KiB |
|
Before Width: | Height: | Size: 590 KiB After Width: | Height: | Size: 590 KiB |
|
Before Width: | Height: | Size: 489 KiB After Width: | Height: | Size: 489 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 557 B After Width: | Height: | Size: 557 B |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 677 B After Width: | Height: | Size: 677 B |
|
Before Width: | Height: | Size: 674 B After Width: | Height: | Size: 674 B |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 1.9 MiB After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 766 KiB After Width: | Height: | Size: 766 KiB |
|
Before Width: | Height: | Size: 760 KiB After Width: | Height: | Size: 760 KiB |
|
Before Width: | Height: | Size: 218 KiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 756 KiB After Width: | Height: | Size: 756 KiB |
|
Before Width: | Height: | Size: 4.1 MiB After Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 778 KiB After Width: | Height: | Size: 778 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 834 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 963 B After Width: | Height: | Size: 963 B |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 579 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
@ -1,3 +0,0 @@
|
||||
export default function Messaging() {
|
||||
|
||||
}
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
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';
|
||||
import normalize from './Normalize';
|
||||
import { colorsDark } from '../constants/colorsDark';
|
||||
import { colorsLight } from '../constants/colorsLight';
|
||||
|
||||
// @ts-ignore
|
||||
export default function Onboarding({ item }) {
|
||||
const style = useColorScheme() == 'light' ? GraphicalCharterLight : GraphicalCharterDark;
|
||||
export default function OnboardingComponent({ item }) {
|
||||
const style = useColorScheme() == 'light' ? colorsLight : colorsDark;
|
||||
const { width, height } = useWindowDimensions();
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
@ -1,4 +1,4 @@
|
||||
export const GraphicalCharterDark = {
|
||||
export const colorsDark = {
|
||||
"body": "#141414",
|
||||
"Text": "white",
|
||||
"Card": "#232123",
|
||||
@ -1,4 +1,4 @@
|
||||
export const GraphicalCharterLight = {
|
||||
export const colorsLight = {
|
||||
"body": "#f2f2f6",
|
||||
"Text": "black",
|
||||
"Card": "#fff",
|
||||
@ -1 +1 @@
|
||||
export const API_URL = "https://flad-api-production.up.railway.app"
|
||||
export const API_URL = "https://flad-api-production.up.railway.app"
|
||||
@ -1,142 +0,0 @@
|
||||
import { View, Text, StyleSheet, Button, TouchableOpacity, SafeAreaView } from "react-native";
|
||||
import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
|
||||
import { Audio } from 'expo-av';
|
||||
import { useEffect, useState } from "react";
|
||||
import { theService } from "../App";
|
||||
|
||||
const halfPi = Math.PI / 2;
|
||||
|
||||
//@ts-ignore
|
||||
const SpotDetailsPage = ({ route }) => {
|
||||
console.log(route);
|
||||
|
||||
const spot: { name: string, sourceUrl: string, index: number } = route.params.spot;
|
||||
const [currentspot] = 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 trackPreviewUrl = 'https://p.scdn.co/mp3-preview/08ef3b9d6dbd6bab233f5e9ca564091902767f71?cid=774b29d4f13844c495f206cafdad9c86';
|
||||
|
||||
|
||||
const handlePlaySound = async () => {
|
||||
if (sound === null) {
|
||||
const { sound: newSound } = await Audio.Sound.createAsync(
|
||||
{ uri: trackPreviewUrl },
|
||||
{ shouldPlay: true }
|
||||
);
|
||||
setSound(newSound);
|
||||
|
||||
} else {
|
||||
//@ts-ignore
|
||||
await sound.playAsync();
|
||||
}
|
||||
};
|
||||
|
||||
const handleStopSound = async () => {
|
||||
if (sound !== null) {
|
||||
//@ts-ignore
|
||||
await sound.stopAsync();
|
||||
}
|
||||
else {
|
||||
setIsPlaying(true);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
return sound ? () => {
|
||||
//@ts-ignore
|
||||
sound.unloadAsync();
|
||||
}
|
||||
: undefined;
|
||||
}, [sound]);
|
||||
|
||||
const sensor = useAnimatedSensor(SensorType.ROTATION);
|
||||
const styleAniamatedImage = useAnimatedStyle(() => {
|
||||
const { 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 id = '0cFS3AMF9Lhj3CNoFvwjvY'
|
||||
|
||||
const getCurrentTrack = async () => {
|
||||
theService.getMusicById(id);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.mainSafeArea}>
|
||||
<View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
|
||||
<View style={{ borderWidth: 1, borderColor: 'red' }}>
|
||||
|
||||
<Animated.Image
|
||||
source={{
|
||||
uri: currentspot.sourceUrl,
|
||||
}}
|
||||
style={[
|
||||
{
|
||||
|
||||
width: 370,
|
||||
height: 370,
|
||||
borderRadius: 24,
|
||||
resizeMode: 'stretch',
|
||||
}, styleAniamatedImage
|
||||
|
||||
]}
|
||||
/>
|
||||
<Button title="Current Track"
|
||||
onPress={() => {
|
||||
getCurrentTrack()
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<Animated.View>
|
||||
<TouchableOpacity style={{
|
||||
backgroundColor: '#1DB954',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 24,
|
||||
borderRadius: 24,
|
||||
}} onPressIn={handlePlaySound}
|
||||
onPressOut={handleStopSound}
|
||||
onLongPress={handlePlaySound}
|
||||
delayLongPress={1000}>
|
||||
|
||||
<Text style={{
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
}}>
|
||||
{isPlaying ? 'Playing...' : 'Play'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default SpotDetailsPage;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
mainSafeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: "#141414",
|
||||
}
|
||||
})
|
||||
@ -1,205 +1,205 @@
|
||||
import { View, Text, Dimensions, StyleSheet, ImageBackground, Image, Pressable, TouchableOpacity, SafeAreaView } from 'react-native'
|
||||
import React, { useCallback,useEffect, useRef, 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 { cards as cardArray, spotArray2 } from '../data/data'
|
||||
import AdjustSize from '../components/AdjustSize';
|
||||
import normalize from '../components/Normalize';
|
||||
import LottieView from 'lottie-react-native'
|
||||
import Lotties from '../assets/lottie/Lottie';
|
||||
import FladLoading from '../components/FladLoadingScreen';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import Music from '../Model/Music';
|
||||
import { addFavoritesMusic } from '../redux/actions/appActions';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Spot } from '../Model/Spot';
|
||||
import { removeFromSpotList, setSpotList } from '../redux/actions/spotActions';
|
||||
|
||||
export default function SpotPage() {
|
||||
//@ts-ignore
|
||||
const spotReducer = useSelector(state => state.appReducer.spot)
|
||||
const [cards, setCards] = useState<Spot[]>(spotReducer);
|
||||
|
||||
const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]);
|
||||
useEffect(() => {
|
||||
setCards(spotReducer);
|
||||
setcurrentCard(spotReducer[spotReducer.length - 1]);
|
||||
}, [spotReducer]);
|
||||
|
||||
const onSwipe = (direction: 'left' | 'right' | 'down') => {
|
||||
|
||||
if (direction === 'right') {
|
||||
// Swiped right
|
||||
addLike(currentCard);
|
||||
} else if (direction === 'left') {
|
||||
// Swiped left
|
||||
console.log('Swiped left');
|
||||
removeSpots(currentCard);
|
||||
}
|
||||
else if (direction === 'down') {
|
||||
// Swiped down
|
||||
addMockSpots();
|
||||
console.log('Swiped down');
|
||||
}
|
||||
};
|
||||
|
||||
const likeButtonref = useRef<LottieView>(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(spotArray2))
|
||||
}
|
||||
|
||||
|
||||
|
||||
const navigator = useNavigation();
|
||||
|
||||
const { width: wWidht } = Dimensions.get("window");
|
||||
const hapti = (card: Spot) => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
|
||||
// @ts-ignore
|
||||
navigator.navigate("DetailsSpot", { "music": card.music })
|
||||
};
|
||||
return (
|
||||
|
||||
<View style={{
|
||||
flex: 1,
|
||||
}}>
|
||||
{cards.length > 0 ? (
|
||||
<>
|
||||
<ImageBackground blurRadius={7}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
source={{
|
||||
uri: currentCard.music.image,
|
||||
}}
|
||||
></ImageBackground>
|
||||
<SafeAreaView style={styles.mainSafeArea}>
|
||||
<LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%', 'rgba(0, 0, 0, 0) 100.56%']} style={styles.gradient}>
|
||||
<Text
|
||||
style={{
|
||||
fontStyle: 'normal',
|
||||
left: wWidht / 9,
|
||||
top: normalize(87),
|
||||
color: "#FFFFFF",
|
||||
fontSize: normalize(AdjustSize(currentCard.music.title)),
|
||||
fontWeight: "800",
|
||||
}}>{currentCard.music.title}</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontStyle: 'normal',
|
||||
left: wWidht / 9,
|
||||
top: normalize(87),
|
||||
color: "#FFFFFF",
|
||||
fontSize: normalize(20),
|
||||
}}>{currentCard.music.bio}</Text>
|
||||
</LinearGradient>
|
||||
</SafeAreaView>
|
||||
<View style={{ flex: 8.35 }}>
|
||||
|
||||
<View style={{ flex: 1.83, justifyContent: 'center', alignItems: 'center' }}>
|
||||
|
||||
{cards.map((card) => (
|
||||
<View key={card.userSpotifyId} style={{ position: 'absolute' }} >
|
||||
<Pressable onLongPress={() => { hapti(card) }} >
|
||||
<Card
|
||||
title={card.music.title}
|
||||
image={card.music.image}
|
||||
onSwipe={(direction) => { onSwipe(direction) }}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
|
||||
<View style={{ flex: 1, flexDirection: 'row', alignItems: "flex-start", justifyContent: 'center' }}>
|
||||
<Animated.View style={{ flexDirection: 'row', width: '92%', alignItems: "center", justifyContent: 'space-evenly' }}>
|
||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('left')}>
|
||||
<Image source={require("../assets/icons/icons/icon_dislike_no_text.png")} style={{width: '45%', height: '40%'}}/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('down')}>
|
||||
<Image source={require("../assets/icons/icons/icon_discovery_no_text.png")} style={{width: '58%', height: '50%', marginLeft: '7%'}}/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('right')}>
|
||||
<LottieView autoPlay={false} loop={false} ref={likeButtonref} speed={2} source={Lotties.likeAnimation} style={styles.lottie} />
|
||||
</TouchableOpacity>
|
||||
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
: (<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: "#141414" }}>
|
||||
<View style={{ position: "absolute" }}>
|
||||
<FladLoading />
|
||||
</View>
|
||||
<Text style={{ color: "grey", fontWeight: "400", textAlign: "center", top: 100 }}>Vous avez explorer toutes les spot autour de vous.
|
||||
{"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées sur vos gouts musicaux.</Text>
|
||||
</View>)
|
||||
}
|
||||
</View>
|
||||
|
||||
);
|
||||
};
|
||||
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,
|
||||
},
|
||||
})
|
||||
|
||||
import { View, Text, Dimensions, StyleSheet, ImageBackground, Image, Pressable, TouchableOpacity, SafeAreaView } from 'react-native'
|
||||
import React, { useCallback,useEffect, useRef, 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 { cards as cardArray, spotArray2 } from '../data/data'
|
||||
import AdjustSize from '../components/AdjustSize';
|
||||
import normalize from '../components/Normalize';
|
||||
import LottieView from 'lottie-react-native'
|
||||
import Lotties from '../assets/lottie/Lottie';
|
||||
import FladLoading from '../components/FladLoadingScreen';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import Music from '../model/Music';
|
||||
import { addFavoritesMusic } from '../redux/actions/appActions';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Spot } from '../model/Spot';
|
||||
import { removeFromSpotList, setSpotList } from '../redux/actions/spotActions';
|
||||
|
||||
export default function SpotScreen() {
|
||||
//@ts-ignore
|
||||
const spotReducer = useSelector(state => state.appReducer.spot)
|
||||
const [cards, setCards] = useState<Spot[]>(spotReducer);
|
||||
|
||||
const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]);
|
||||
useEffect(() => {
|
||||
setCards(spotReducer);
|
||||
setcurrentCard(spotReducer[spotReducer.length - 1]);
|
||||
}, [spotReducer]);
|
||||
|
||||
const onSwipe = (direction: 'left' | 'right' | 'down') => {
|
||||
|
||||
if (direction === 'right') {
|
||||
// Swiped right
|
||||
addLike(currentCard);
|
||||
} else if (direction === 'left') {
|
||||
// Swiped left
|
||||
console.log('Swiped left');
|
||||
removeSpots(currentCard);
|
||||
}
|
||||
else if (direction === 'down') {
|
||||
// Swiped down
|
||||
addMockSpots();
|
||||
console.log('Swiped down');
|
||||
}
|
||||
};
|
||||
|
||||
const likeButtonref = useRef<LottieView>(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(spotArray2))
|
||||
}
|
||||
|
||||
|
||||
|
||||
const navigator = useNavigation();
|
||||
|
||||
const { width: wWidht } = Dimensions.get("window");
|
||||
const hapti = (card: Spot) => {
|
||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
|
||||
// @ts-ignore
|
||||
navigator.navigate("DetailsSpot", { "music": card.music })
|
||||
};
|
||||
return (
|
||||
|
||||
<View style={{
|
||||
flex: 1,
|
||||
}}>
|
||||
{cards.length > 0 ? (
|
||||
<>
|
||||
<ImageBackground blurRadius={7}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
source={{
|
||||
uri: currentCard.music.image,
|
||||
}}
|
||||
></ImageBackground>
|
||||
<SafeAreaView style={styles.mainSafeArea}>
|
||||
<LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%', 'rgba(0, 0, 0, 0) 100.56%']} style={styles.gradient}>
|
||||
<Text
|
||||
style={{
|
||||
fontStyle: 'normal',
|
||||
left: wWidht / 9,
|
||||
top: normalize(87),
|
||||
color: "#FFFFFF",
|
||||
fontSize: normalize(AdjustSize(currentCard.music.title)),
|
||||
fontWeight: "800",
|
||||
}}>{currentCard.music.title}</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontStyle: 'normal',
|
||||
left: wWidht / 9,
|
||||
top: normalize(87),
|
||||
color: "#FFFFFF",
|
||||
fontSize: normalize(20),
|
||||
}}>{currentCard.music.bio}</Text>
|
||||
</LinearGradient>
|
||||
</SafeAreaView>
|
||||
<View style={{ flex: 8.35 }}>
|
||||
|
||||
<View style={{ flex: 1.83, justifyContent: 'center', alignItems: 'center' }}>
|
||||
|
||||
{cards.map((card) => (
|
||||
<View key={card.userSpotifyId} style={{ position: 'absolute' }} >
|
||||
<Pressable onLongPress={() => { hapti(card) }} >
|
||||
<Card
|
||||
title={card.music.title}
|
||||
image={card.music.image}
|
||||
onSwipe={(direction) => { onSwipe(direction) }}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
))
|
||||
}
|
||||
</View>
|
||||
|
||||
<View style={{ flex: 1, flexDirection: 'row', alignItems: "flex-start", justifyContent: 'center' }}>
|
||||
<Animated.View style={{ flexDirection: 'row', width: '92%', alignItems: "center", justifyContent: 'space-evenly' }}>
|
||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('left')}>
|
||||
<Image source={require("../assets/images/dislike_icon_no_text.png")} style={{width: '45%', height: '40%'}}/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('down')}>
|
||||
<Image source={require("../assets/images/discovery_icon_no_text.png")} style={{width: '58%', height: '50%', marginLeft: '7%'}}/>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('right')}>
|
||||
<LottieView autoPlay={false} loop={false} ref={likeButtonref} speed={2} source={Lotties.likeAnimation} style={styles.lottie} />
|
||||
</TouchableOpacity>
|
||||
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
: (<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: "#141414" }}>
|
||||
<View style={{ position: "absolute" }}>
|
||||
<FladLoading />
|
||||
</View>
|
||||
<Text style={{ color: "grey", fontWeight: "400", textAlign: "center", top: 100 }}>Vous avez explorer toutes les spot autour de vous.
|
||||
{"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées sur vos gouts musicaux.</Text>
|
||||
</View>)
|
||||
}
|
||||
</View>
|
||||
|
||||
);
|
||||
};
|
||||
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,
|
||||
},
|
||||
})
|
||||
|
||||