|
|
|
|
@ -9,7 +9,7 @@ import {
|
|
|
|
|
Image,
|
|
|
|
|
ImageBackground,
|
|
|
|
|
SafeAreaView,
|
|
|
|
|
ActivityIndicator, FlatList, Animated, Easing
|
|
|
|
|
ActivityIndicator, FlatList
|
|
|
|
|
} from 'react-native';
|
|
|
|
|
import {RootStackScreenProps} from "../types";
|
|
|
|
|
import {useEffect, useRef, useState} from "react";
|
|
|
|
|
@ -19,6 +19,8 @@ import {useDispatch, useSelector} from 'react-redux';
|
|
|
|
|
import Movie from "../model/Movie";
|
|
|
|
|
import * as url from "url";
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import CardsSwipe from 'react-native-cards-swipe';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
@ -28,6 +30,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
const [hours, setHours] = useState(0);
|
|
|
|
|
const [minutes, setMinutes] = useState(0);
|
|
|
|
|
const [seconds, setSeconds] = useState(0);
|
|
|
|
|
const [displayIndex, setdisplayIndex] = useState(0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//console.log("liste [0]: ", trendingMovies[0]);
|
|
|
|
|
@ -35,24 +38,28 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
const insets = useSafeAreaInsets();
|
|
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
|
background: {
|
|
|
|
|
background1: {
|
|
|
|
|
backgroundColor: 'black',
|
|
|
|
|
height: '100%',
|
|
|
|
|
width: '100%',
|
|
|
|
|
paddingTop: insets.top,
|
|
|
|
|
},
|
|
|
|
|
background2: {
|
|
|
|
|
height: '100%',
|
|
|
|
|
width: '100%',
|
|
|
|
|
paddingTop: insets.top,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
container: {
|
|
|
|
|
flex: 1,
|
|
|
|
|
},
|
|
|
|
|
filmCard: {
|
|
|
|
|
width: '85%',
|
|
|
|
|
height: '68%',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
marginLeft: 'auto',
|
|
|
|
|
marginRight: 'auto',
|
|
|
|
|
borderRadius: 22,
|
|
|
|
|
marginTop: 15,
|
|
|
|
|
flex: 0.80,
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
shadowColor: "#000",
|
|
|
|
|
shadowOffset: {
|
|
|
|
|
@ -64,6 +71,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
|
|
|
|
|
alignSelf: 'center',
|
|
|
|
|
elevation: 13,
|
|
|
|
|
zIndex: 15
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
backgroundImage: {
|
|
|
|
|
@ -83,6 +91,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
marginHorizontal: 8
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -93,13 +102,10 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
const interval = setInterval(() => {
|
|
|
|
|
const today = moment();
|
|
|
|
|
|
|
|
|
|
// Définissez l'heure sur minuit
|
|
|
|
|
today.set({hour: 0, minute: 0, second: 0, millisecond: 0});
|
|
|
|
|
|
|
|
|
|
// Ajoutez un jour pour obtenir demain (ce soir à minuit)
|
|
|
|
|
const tonight = today.add(1, 'days');
|
|
|
|
|
|
|
|
|
|
// Obtenez le timestamp en millisecondes
|
|
|
|
|
const timestamp = tonight.valueOf();
|
|
|
|
|
const now = new Date();
|
|
|
|
|
const difference = timestamp - now.getTime();
|
|
|
|
|
@ -143,58 +149,103 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatTime(time: number) {
|
|
|
|
|
console.log(time);
|
|
|
|
|
const hours = Math.floor(time / 60);
|
|
|
|
|
const minutes = time % 60;
|
|
|
|
|
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let rotateValueHolder = new Animated.Value(0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
|
|
<>
|
|
|
|
|
{trendingMovies.length !== 0 && (
|
|
|
|
|
<SafeAreaView style={styles.background}>
|
|
|
|
|
<ImageBackground blurRadius={0}
|
|
|
|
|
style={{
|
|
|
|
|
width: "110%",
|
|
|
|
|
height: "110%",
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
opacity: 0.15,
|
|
|
|
|
position: "absolute",
|
|
|
|
|
zIndex: 0
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
source={require("../assets/images/background.png")
|
|
|
|
|
}
|
|
|
|
|
></ImageBackground>
|
|
|
|
|
{trendingMovies[displayIndex] !== undefined && (
|
|
|
|
|
<SafeAreaView style={styles.background1}>
|
|
|
|
|
|
|
|
|
|
<ImageBackground blurRadius={8}
|
|
|
|
|
style={{
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
width: "200%",
|
|
|
|
|
height: "200%",
|
|
|
|
|
width: "150%",
|
|
|
|
|
height: "150%",
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
opacity: 0.68
|
|
|
|
|
opacity: 0.48,
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
left: "-50%",
|
|
|
|
|
top: "-50%"
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
source={{
|
|
|
|
|
uri: trendingMovies[0].poster_path,
|
|
|
|
|
uri: trendingMovies[displayIndex].poster_path,
|
|
|
|
|
}}
|
|
|
|
|
></ImageBackground>
|
|
|
|
|
<View style={{flexDirection: 'column', alignSelf: 'center', paddingHorizontal: 30, width: '100%', alignItems: "center"}}>
|
|
|
|
|
<Text numberOfLines={1} style={{color: "white", fontSize: 30, fontWeight: "bold", paddingTop: 5, alignSelf: "center"}}>{trendingMovies[0].original_title}</Text>
|
|
|
|
|
<View style={{flexDirection: 'column', alignSelf: 'center', paddingHorizontal: 30, width: '100%', alignItems: "center", paddingTop: 10, flex: 0.07}}>
|
|
|
|
|
<Text numberOfLines={1} style={{color: "white", fontSize: 30, fontWeight: "bold", paddingTop: 5, alignSelf: "center"}}>{trendingMovies[displayIndex].original_title}</Text>
|
|
|
|
|
<View style={{flexDirection: 'row', justifyContent: "center", alignItems: "center", alignSelf: "center"}}>
|
|
|
|
|
<Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[0].release_date}`}</Text>
|
|
|
|
|
<Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[displayIndex].release_date}`}</Text>
|
|
|
|
|
<View style={styles.circle}/>
|
|
|
|
|
<Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[0].genres[0]}, ${trendingMovies[0].genres[1]}`}</Text>
|
|
|
|
|
<Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[displayIndex].genres[0]} ${trendingMovies[displayIndex].genres[1] !== undefined ? ", " + trendingMovies[0].genres[1] : ""}`}</Text>
|
|
|
|
|
<View style={styles.circle}/>
|
|
|
|
|
<Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${formatTime(trendingMovies[0].runtime)}`}</Text>
|
|
|
|
|
<Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${formatTime(trendingMovies[displayIndex].runtime)}`}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<Stars note={Math.round(trendingMovies[0].vote_average)}/>
|
|
|
|
|
<Stars note={trendingMovies[displayIndex].vote_average} size={110}/>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<CardsSwipe
|
|
|
|
|
containerStyle={{zIndex: 20}}
|
|
|
|
|
cards={trendingMovies}
|
|
|
|
|
onSwipedLeft={(index) => {
|
|
|
|
|
if (index + 1 < trendingMovies.length)
|
|
|
|
|
setdisplayIndex(index + 1)
|
|
|
|
|
else
|
|
|
|
|
setdisplayIndex(0)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
onSwipedRight={(index) => {
|
|
|
|
|
if (index + 1 < trendingMovies.length)
|
|
|
|
|
setdisplayIndex(index + 1)
|
|
|
|
|
else
|
|
|
|
|
setdisplayIndex(0)
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
|
|
renderCard={(card) => (
|
|
|
|
|
<Image
|
|
|
|
|
style={styles.filmCard}
|
|
|
|
|
source={{
|
|
|
|
|
uri: trendingMovies[0].poster_path,
|
|
|
|
|
uri: card.poster_path,
|
|
|
|
|
}}
|
|
|
|
|
/>)}
|
|
|
|
|
/>
|
|
|
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-end', justifyContent: "space-evenly", paddingHorizontal: 30, width: '100%', position: "absolute", top: "79%", zIndex: 30}}>
|
|
|
|
|
<TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-end', justifyContent: "space-evenly", paddingHorizontal: 30, width: '100%', position: "absolute", top: "74%", zIndex: 30}}>
|
|
|
|
|
<TouchableOpacity onPress={() => {
|
|
|
|
|
|
|
|
|
|
addWatchLater(trendingMovies[0]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}}>
|
|
|
|
|
<Image
|
|
|
|
|
source={require('../assets/images/watchlater_button.png')} style={{resizeMode: "stretch", height: '55%', aspectRatio: 1,}}
|
|
|
|
|
/>
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
<TouchableOpacity onPress={
|
|
|
|
|
() => popFirstTrending(trendingMovies[0])}>
|
|
|
|
|
<Animated.Image
|
|
|
|
|
() => {
|
|
|
|
|
popFirstTrending(trendingMovies[0]);
|
|
|
|
|
}}>
|
|
|
|
|
<Image
|
|
|
|
|
source={require('../assets/images/delete_button.png')} style={{
|
|
|
|
|
resizeMode: "stretch", height: '55%', aspectRatio: 1,
|
|
|
|
|
}}
|
|
|
|
|
@ -208,7 +259,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{zIndex: 10, alignItems: "center", justifyContent: "center", flex: 1, flexDirection: "row"}}>
|
|
|
|
|
<View style={{zIndex: 1, alignContent: "center", justifyContent: "center", flex: 0.15, flexDirection: "row"}}>
|
|
|
|
|
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text>
|
|
|
|
|
<Image source={require('../assets/images/timer_icon.png')} style={{
|
|
|
|
|
height: 30,
|
|
|
|
|
@ -221,7 +272,37 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</SafeAreaView>)}
|
|
|
|
|
{trendingMovies[displayIndex] === undefined && (
|
|
|
|
|
<SafeAreaView style={styles.background2}>
|
|
|
|
|
<View style={{alignItems: "center", width: "100%", height: "100%", justifyContent: "center", zIndex: 1}}>
|
|
|
|
|
<Text style={{color: "white", fontWeight: "600", fontSize: 35}}>Félicitations !</Text>
|
|
|
|
|
<Image
|
|
|
|
|
source={require('../assets/images/confetti.gif')}
|
|
|
|
|
style={{width: 200, height: 200, marginVertical: 50}}
|
|
|
|
|
/>
|
|
|
|
|
<Text style={{color: "grey", fontWeight: "400", paddingHorizontal: 70, textAlign: "center"}}>Vous avez fini la collection du jour.
|
|
|
|
|
{"\n"}Revenez à la fin du décompte pour découvrir de nouvelles propositions.</Text>
|
|
|
|
|
|
|
|
|
|
<View style={{zIndex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 20, paddingVertical: 10, borderRadius: 100, flexDirection: "row", bottom: 0, backgroundColor: "white", marginTop: 50}}>
|
|
|
|
|
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text>
|
|
|
|
|
<Image source={require('../assets/images/timer_icon2.png')} style={{
|
|
|
|
|
height: 30,
|
|
|
|
|
resizeMode: 'contain', marginHorizontal: 7
|
|
|
|
|
|
|
|
|
|
}}></Image>
|
|
|
|
|
|
|
|
|
|
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${hours.toString().padStart(2, '0')}:`}</Text>
|
|
|
|
|
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${minutes.toString().padStart(2, '0')}:`}</Text>
|
|
|
|
|
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${seconds.toString().padStart(2, '0')}`}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
</SafeAreaView>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</>
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
type BadgeGenreProps = {
|
|
|
|
|
@ -277,31 +358,42 @@ export function BadgeFilm(props: BadgeFilmProps) {
|
|
|
|
|
|
|
|
|
|
type StarsProps = {
|
|
|
|
|
note: number
|
|
|
|
|
size: number
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function Stars(props: StarsProps) {
|
|
|
|
|
console.log("note", props.note)
|
|
|
|
|
let imageSource;
|
|
|
|
|
|
|
|
|
|
if (props.note < 2)
|
|
|
|
|
let note = props.note / 2;
|
|
|
|
|
if (note < 0.5)
|
|
|
|
|
imageSource = require('../assets/images/0.5stars_vote.png');
|
|
|
|
|
else if (note < 1)
|
|
|
|
|
imageSource = require('../assets/images/1stars_vote.png');
|
|
|
|
|
else if (props.note < 4)
|
|
|
|
|
else if (note < 1.5)
|
|
|
|
|
imageSource = require('../assets/images/1.5stars_vote.png');
|
|
|
|
|
else if (note < 2)
|
|
|
|
|
imageSource = require('../assets/images/2stars_vote.png');
|
|
|
|
|
else if (props.note < 6)
|
|
|
|
|
else if (note < 2.5)
|
|
|
|
|
imageSource = require('../assets/images/2.5stars_vote.png');
|
|
|
|
|
else if (note < 3)
|
|
|
|
|
imageSource = require('../assets/images/3stars_vote.png');
|
|
|
|
|
else if (props.note < 8)
|
|
|
|
|
else if (note < 3.5)
|
|
|
|
|
imageSource = require('../assets/images/3.5stars_vote.png');
|
|
|
|
|
else if (note < 4)
|
|
|
|
|
imageSource = require('../assets/images/4stars_vote.png');
|
|
|
|
|
else if (props.note < 10)
|
|
|
|
|
else if (note < 4.5)
|
|
|
|
|
imageSource = require('../assets/images/4.5stars_vote.png');
|
|
|
|
|
else if (note < 5)
|
|
|
|
|
imageSource = require('../assets/images/5stars_vote.png');
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<View>
|
|
|
|
|
<Image source={imageSource} style={{
|
|
|
|
|
width: 130,
|
|
|
|
|
width: 110,
|
|
|
|
|
height: 40,
|
|
|
|
|
resizeMode: 'contain'
|
|
|
|
|
}}/>
|
|
|
|
|
</View>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
Lucas Delanier
2 years ago
