Improvement of the project structure 🎨
continuous-integration/drone/push Build is passing
Details
@ -1,7 +1,7 @@
|
|||||||
export default class Artist {
|
export default class Artist {
|
||||||
private id: string;
|
private id: string;
|
||||||
private name: string;
|
private name: string;
|
||||||
private _url: string; // Image.source
|
private _url: string;
|
||||||
|
|
||||||
constructor(id: string, name: string, url: string) {
|
constructor(id: string, name: string, url: string) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import Music from "../Music";
|
import Music from "../Music";
|
||||||
|
|
||||||
export default class MusicFactory {
|
export default class MusicMapper {
|
||||||
static mapFromSpotifyTrack(jsonMusic: any): Music {
|
static mapFromSpotifyTrack(jsonMusic: any): Music {
|
||||||
const music = new Music(
|
const music = new Music(
|
||||||
jsonMusic.id,
|
jsonMusic.id,
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { User } from "../User";
|
import { User } from "../User";
|
||||||
|
|
||||||
export class UserFactory {
|
export class UserMapper {
|
||||||
|
|
||||||
public static JsonToModel( jsonUser :any ) : User{
|
public static JsonToModel( jsonUser :any ) : User{
|
||||||
return new User(jsonUser.idFlad, jsonUser.idSpotify, jsonUser.email, jsonUser.createdAt, jsonUser.name, jsonUser.imageUrl);
|
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 React from 'react';
|
||||||
import { View, StyleSheet, Text, Image, useWindowDimensions, useColorScheme } from 'react-native';
|
import { View, StyleSheet, Text, Image, useWindowDimensions, useColorScheme } from 'react-native';
|
||||||
import normalize from '../components/Normalize';
|
import normalize from './Normalize';
|
||||||
import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
|
import { colorsDark } from '../constants/colorsDark';
|
||||||
import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
|
import { colorsLight } from '../constants/colorsLight';
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export default function Onboarding({ item }) {
|
export default function OnboardingComponent({ item }) {
|
||||||
const style = useColorScheme() == 'light' ? GraphicalCharterLight : GraphicalCharterDark;
|
const style = useColorScheme() == 'light' ? colorsLight : colorsDark;
|
||||||
const { width, height } = useWindowDimensions();
|
const { width, height } = useWindowDimensions();
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export const GraphicalCharterDark = {
|
export const colorsDark = {
|
||||||
"body": "#141414",
|
"body": "#141414",
|
||||||
"Text": "white",
|
"Text": "white",
|
||||||
"Card": "#232123",
|
"Card": "#232123",
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export const GraphicalCharterLight = {
|
export const colorsLight = {
|
||||||
"body": "#f2f2f6",
|
"body": "#f2f2f6",
|
||||||
"Text": "black",
|
"Text": "black",
|
||||||
"Card": "#fff",
|
"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 { View, Text, Dimensions, StyleSheet, ImageBackground, Image, Pressable, TouchableOpacity, SafeAreaView } from 'react-native'
|
||||||
import React, { useCallback,useEffect, useRef, useState } from 'react'
|
import React, { useCallback,useEffect, useRef, useState } from 'react'
|
||||||
import { LinearGradient } from 'expo-linear-gradient';
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
import * as Haptics from 'expo-haptics';
|
import * as Haptics from 'expo-haptics';
|
||||||
import Animated from 'react-native-reanimated';
|
import Animated from 'react-native-reanimated';
|
||||||
import Card from '../components/Card';
|
import Card from '../components/Card';
|
||||||
import { cards as cardArray, spotArray2 } from '../data/data'
|
import { cards as cardArray, spotArray2 } from '../data/data'
|
||||||
import AdjustSize from '../components/AdjustSize';
|
import AdjustSize from '../components/AdjustSize';
|
||||||
import normalize from '../components/Normalize';
|
import normalize from '../components/Normalize';
|
||||||
import LottieView from 'lottie-react-native'
|
import LottieView from 'lottie-react-native'
|
||||||
import Lotties from '../assets/lottie/Lottie';
|
import Lotties from '../assets/lottie/Lottie';
|
||||||
import FladLoading from '../components/FladLoadingScreen';
|
import FladLoading from '../components/FladLoadingScreen';
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
import Music from '../Model/Music';
|
import Music from '../model/Music';
|
||||||
import { addFavoritesMusic } from '../redux/actions/appActions';
|
import { addFavoritesMusic } from '../redux/actions/appActions';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { Spot } from '../Model/Spot';
|
import { Spot } from '../model/Spot';
|
||||||
import { removeFromSpotList, setSpotList } from '../redux/actions/spotActions';
|
import { removeFromSpotList, setSpotList } from '../redux/actions/spotActions';
|
||||||
|
|
||||||
export default function SpotPage() {
|
export default function SpotScreen() {
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
const spotReducer = useSelector(state => state.appReducer.spot)
|
const spotReducer = useSelector(state => state.appReducer.spot)
|
||||||
const [cards, setCards] = useState<Spot[]>(spotReducer);
|
const [cards, setCards] = useState<Spot[]>(spotReducer);
|
||||||
|
|
||||||
const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]);
|
const [currentCard, setcurrentCard] = useState(cards[cards.length - 1]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCards(spotReducer);
|
setCards(spotReducer);
|
||||||
setcurrentCard(spotReducer[spotReducer.length - 1]);
|
setcurrentCard(spotReducer[spotReducer.length - 1]);
|
||||||
}, [spotReducer]);
|
}, [spotReducer]);
|
||||||
|
|
||||||
const onSwipe = (direction: 'left' | 'right' | 'down') => {
|
const onSwipe = (direction: 'left' | 'right' | 'down') => {
|
||||||
|
|
||||||
if (direction === 'right') {
|
if (direction === 'right') {
|
||||||
// Swiped right
|
// Swiped right
|
||||||
addLike(currentCard);
|
addLike(currentCard);
|
||||||
} else if (direction === 'left') {
|
} else if (direction === 'left') {
|
||||||
// Swiped left
|
// Swiped left
|
||||||
console.log('Swiped left');
|
console.log('Swiped left');
|
||||||
removeSpots(currentCard);
|
removeSpots(currentCard);
|
||||||
}
|
}
|
||||||
else if (direction === 'down') {
|
else if (direction === 'down') {
|
||||||
// Swiped down
|
// Swiped down
|
||||||
addMockSpots();
|
addMockSpots();
|
||||||
console.log('Swiped down');
|
console.log('Swiped down');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const likeButtonref = useRef<LottieView>(null);
|
const likeButtonref = useRef<LottieView>(null);
|
||||||
const onLike = useCallback(() => {
|
const onLike = useCallback(() => {
|
||||||
likeButtonref.current?.reset();
|
likeButtonref.current?.reset();
|
||||||
likeButtonref.current?.play(0, 55);
|
likeButtonref.current?.play(0, 55);
|
||||||
likeButtonref.current?.play(55, 0);
|
likeButtonref.current?.play(55, 0);
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
function addLike(spot: Spot) {
|
function addLike(spot: Spot) {
|
||||||
onLike();
|
onLike();
|
||||||
dispatch(addFavoritesMusic(spot.music))
|
dispatch(addFavoritesMusic(spot.music))
|
||||||
dispatch(removeFromSpotList(spot));
|
dispatch(removeFromSpotList(spot));
|
||||||
}
|
}
|
||||||
function removeSpots(spot: Spot) {
|
function removeSpots(spot: Spot) {
|
||||||
dispatch(removeFromSpotList(spot));
|
dispatch(removeFromSpotList(spot));
|
||||||
}
|
}
|
||||||
|
|
||||||
function addMockSpots() {
|
function addMockSpots() {
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
dispatch(setSpotList(spotArray2))
|
dispatch(setSpotList(spotArray2))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const navigator = useNavigation();
|
const navigator = useNavigation();
|
||||||
|
|
||||||
const { width: wWidht } = Dimensions.get("window");
|
const { width: wWidht } = Dimensions.get("window");
|
||||||
const hapti = (card: Spot) => {
|
const hapti = (card: Spot) => {
|
||||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
|
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
navigator.navigate("DetailsSpot", { "music": card.music })
|
navigator.navigate("DetailsSpot", { "music": card.music })
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<View style={{
|
<View style={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
}}>
|
}}>
|
||||||
{cards.length > 0 ? (
|
{cards.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
<ImageBackground blurRadius={7}
|
<ImageBackground blurRadius={7}
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
source={{
|
source={{
|
||||||
uri: currentCard.music.image,
|
uri: currentCard.music.image,
|
||||||
}}
|
}}
|
||||||
></ImageBackground>
|
></ImageBackground>
|
||||||
<SafeAreaView style={styles.mainSafeArea}>
|
<SafeAreaView style={styles.mainSafeArea}>
|
||||||
<LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%', 'rgba(0, 0, 0, 0) 100.56%']} style={styles.gradient}>
|
<LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%', 'rgba(0, 0, 0, 0) 100.56%']} style={styles.gradient}>
|
||||||
<Text
|
<Text
|
||||||
style={{
|
style={{
|
||||||
fontStyle: 'normal',
|
fontStyle: 'normal',
|
||||||
left: wWidht / 9,
|
left: wWidht / 9,
|
||||||
top: normalize(87),
|
top: normalize(87),
|
||||||
color: "#FFFFFF",
|
color: "#FFFFFF",
|
||||||
fontSize: normalize(AdjustSize(currentCard.music.title)),
|
fontSize: normalize(AdjustSize(currentCard.music.title)),
|
||||||
fontWeight: "800",
|
fontWeight: "800",
|
||||||
}}>{currentCard.music.title}</Text>
|
}}>{currentCard.music.title}</Text>
|
||||||
<Text
|
<Text
|
||||||
style={{
|
style={{
|
||||||
fontStyle: 'normal',
|
fontStyle: 'normal',
|
||||||
left: wWidht / 9,
|
left: wWidht / 9,
|
||||||
top: normalize(87),
|
top: normalize(87),
|
||||||
color: "#FFFFFF",
|
color: "#FFFFFF",
|
||||||
fontSize: normalize(20),
|
fontSize: normalize(20),
|
||||||
}}>{currentCard.music.bio}</Text>
|
}}>{currentCard.music.bio}</Text>
|
||||||
</LinearGradient>
|
</LinearGradient>
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
<View style={{ flex: 8.35 }}>
|
<View style={{ flex: 8.35 }}>
|
||||||
|
|
||||||
<View style={{ flex: 1.83, justifyContent: 'center', alignItems: 'center' }}>
|
<View style={{ flex: 1.83, justifyContent: 'center', alignItems: 'center' }}>
|
||||||
|
|
||||||
{cards.map((card) => (
|
{cards.map((card) => (
|
||||||
<View key={card.userSpotifyId} style={{ position: 'absolute' }} >
|
<View key={card.userSpotifyId} style={{ position: 'absolute' }} >
|
||||||
<Pressable onLongPress={() => { hapti(card) }} >
|
<Pressable onLongPress={() => { hapti(card) }} >
|
||||||
<Card
|
<Card
|
||||||
title={card.music.title}
|
title={card.music.title}
|
||||||
image={card.music.image}
|
image={card.music.image}
|
||||||
onSwipe={(direction) => { onSwipe(direction) }}
|
onSwipe={(direction) => { onSwipe(direction) }}
|
||||||
/>
|
/>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</View>
|
</View>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={{ flex: 1, flexDirection: 'row', alignItems: "flex-start", justifyContent: 'center' }}>
|
<View style={{ flex: 1, flexDirection: 'row', alignItems: "flex-start", justifyContent: 'center' }}>
|
||||||
<Animated.View style={{ flexDirection: 'row', width: '92%', alignItems: "center", justifyContent: 'space-evenly' }}>
|
<Animated.View style={{ flexDirection: 'row', width: '92%', alignItems: "center", justifyContent: 'space-evenly' }}>
|
||||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('left')}>
|
<TouchableOpacity style={styles.button} onPress={() => onSwipe('left')}>
|
||||||
<Image source={require("../assets/icons/icons/icon_dislike_no_text.png")} style={{width: '45%', height: '40%'}}/>
|
<Image source={require("../assets/images/dislike_icon_no_text.png")} style={{width: '45%', height: '40%'}}/>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('down')}>
|
<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%'}}/>
|
<Image source={require("../assets/images/discovery_icon_no_text.png")} style={{width: '58%', height: '50%', marginLeft: '7%'}}/>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity style={styles.button} onPress={() => onSwipe('right')}>
|
<TouchableOpacity style={styles.button} onPress={() => onSwipe('right')}>
|
||||||
<LottieView autoPlay={false} loop={false} ref={likeButtonref} speed={2} source={Lotties.likeAnimation} style={styles.lottie} />
|
<LottieView autoPlay={false} loop={false} ref={likeButtonref} speed={2} source={Lotties.likeAnimation} style={styles.lottie} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
</View>
|
</View>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
: (<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: "#141414" }}>
|
: (<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: "#141414" }}>
|
||||||
<View style={{ position: "absolute" }}>
|
<View style={{ position: "absolute" }}>
|
||||||
<FladLoading />
|
<FladLoading />
|
||||||
</View>
|
</View>
|
||||||
<Text style={{ color: "grey", fontWeight: "400", textAlign: "center", top: 100 }}>Vous avez explorer toutes les spot autour de vous.
|
<Text style={{ color: "grey", fontWeight: "400", textAlign: "center", top: 100 }}>Vous avez explorer toutes les spot autour de vous.
|
||||||
{"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées sur vos gouts musicaux.</Text>
|
{"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées sur vos gouts musicaux.</Text>
|
||||||
</View>)
|
</View>)
|
||||||
}
|
}
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
mainSafeArea: {
|
mainSafeArea: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
spot: {
|
spot: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignContent: 'center',
|
alignContent: 'center',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
backgroundColor: '#000'
|
backgroundColor: '#000'
|
||||||
},
|
},
|
||||||
lottie: {
|
lottie: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
setOpacityTo: 0.8,
|
setOpacityTo: 0.8,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
borderRadius: 100,
|
borderRadius: 100,
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
width: 61,
|
width: 61,
|
||||||
height: 61,
|
height: 61,
|
||||||
|
|
||||||
backgroundColor: '#24243A',
|
backgroundColor: '#24243A',
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
shadowRadius: 2,
|
shadowRadius: 2,
|
||||||
|
|
||||||
},
|
},
|
||||||
gradient: {
|
gradient: {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
height: 209,
|
height: 209,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||