|
|
|
|
@ -17,11 +17,19 @@ import {useSafeAreaInsets} from "react-native-safe-area-context";
|
|
|
|
|
import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
|
|
|
|
|
import {useDispatch, useSelector} from 'react-redux';
|
|
|
|
|
import Movie from "../model/Movie";
|
|
|
|
|
import * as url from "url";
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
|
|
|
|
|
export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>) {
|
|
|
|
|
export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [hours, setHours] = useState(0);
|
|
|
|
|
const [minutes, setMinutes] = useState(0);
|
|
|
|
|
const [seconds, setSeconds] = useState(0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//console.log("liste [0]: ", trendingMovies[0]);
|
|
|
|
|
|
|
|
|
|
const insets = useSafeAreaInsets();
|
|
|
|
|
@ -30,23 +38,22 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
|
|
|
|
|
background: {
|
|
|
|
|
backgroundColor: 'black',
|
|
|
|
|
height: '100%',
|
|
|
|
|
width: '100%',
|
|
|
|
|
paddingTop: insets.top,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
container:{
|
|
|
|
|
container: {
|
|
|
|
|
flex: 1,
|
|
|
|
|
},
|
|
|
|
|
filmCard: {
|
|
|
|
|
width: '80%',
|
|
|
|
|
height: '60%',
|
|
|
|
|
justifyContent:'center',
|
|
|
|
|
marginLeft:'auto',
|
|
|
|
|
marginRight:'auto',
|
|
|
|
|
borderRadius: 15,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
image: {
|
|
|
|
|
position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center',
|
|
|
|
|
width: '85%',
|
|
|
|
|
height: '68%',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
marginLeft: 'auto',
|
|
|
|
|
marginRight: 'auto',
|
|
|
|
|
borderRadius: 22,
|
|
|
|
|
marginTop: 15,
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
shadowColor: "#000",
|
|
|
|
|
shadowOffset: {
|
|
|
|
|
width: 0,
|
|
|
|
|
@ -54,10 +61,10 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
|
|
|
|
|
},
|
|
|
|
|
shadowOpacity: 0.39,
|
|
|
|
|
shadowRadius: 8.30,
|
|
|
|
|
flex: 1,
|
|
|
|
|
paddingTop: 70,
|
|
|
|
|
|
|
|
|
|
alignSelf: 'center',
|
|
|
|
|
elevation: 13,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
backgroundImage: {
|
|
|
|
|
flex: 1,
|
|
|
|
|
@ -67,6 +74,14 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
|
|
|
|
|
flex: 1,
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
|
|
},
|
|
|
|
|
circle: {
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 6,
|
|
|
|
|
borderRadius: 100 / 2,
|
|
|
|
|
marginTop: 4,
|
|
|
|
|
backgroundColor: "lightgray",
|
|
|
|
|
marginHorizontal: 8
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@ -74,6 +89,36 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Créez une date avec la valeur actuelle
|
|
|
|
|
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();
|
|
|
|
|
const h = Math.floor(
|
|
|
|
|
(difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
setHours(h);
|
|
|
|
|
|
|
|
|
|
const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
|
|
setMinutes(m);
|
|
|
|
|
|
|
|
|
|
const s = Math.floor((difference % (1000 * 60)) / 1000);
|
|
|
|
|
|
|
|
|
|
setSeconds(s);
|
|
|
|
|
//console.log("timer", h, m, s);
|
|
|
|
|
});
|
|
|
|
|
setTimeout(() => interval, 10000);
|
|
|
|
|
|
|
|
|
|
const loadTrendingID = async () => {
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
await dispatch(getTrendingID());
|
|
|
|
|
@ -83,15 +128,17 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
|
|
|
|
|
}, [dispatch]);
|
|
|
|
|
|
|
|
|
|
type ItemProps = {
|
|
|
|
|
movie : Movie
|
|
|
|
|
movie: Movie
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
function addWatchLater(props: Movie){
|
|
|
|
|
|
|
|
|
|
function addWatchLater(props: Movie) {
|
|
|
|
|
dispatch(addMovieToWatchLater(props));
|
|
|
|
|
dispatch(removeMovieTrending(props));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function popFirstTrending(props: Movie){
|
|
|
|
|
|
|
|
|
|
function popFirstTrending(props: Movie) {
|
|
|
|
|
dispatch(removeMovieTrending(props));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -101,23 +148,11 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
|
|
|
|
|
const minutes = time % 60;
|
|
|
|
|
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let rotateValueHolder = new Animated.Value(0);
|
|
|
|
|
|
|
|
|
|
function startImageRotateFunction(){
|
|
|
|
|
rotateValueHolder.setValue(0);
|
|
|
|
|
Animated.timing(rotateValueHolder, {
|
|
|
|
|
toValue: 0.5,
|
|
|
|
|
duration: 800,
|
|
|
|
|
easing: Easing.linear,
|
|
|
|
|
useNativeDriver: true,
|
|
|
|
|
}).start();}
|
|
|
|
|
|
|
|
|
|
const RotateData = rotateValueHolder.interpolate({
|
|
|
|
|
inputRange: [0, 1],
|
|
|
|
|
outputRange: ['0deg', '360deg'],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return(
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{trendingMovies.length !== 0 && (
|
|
|
|
|
<SafeAreaView style={styles.background}>
|
|
|
|
|
@ -128,94 +163,84 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
|
|
|
|
|
height: "200%",
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
opacity: 0.48
|
|
|
|
|
opacity: 0.68
|
|
|
|
|
}}
|
|
|
|
|
source={{
|
|
|
|
|
uri: trendingMovies[0].poster_path,
|
|
|
|
|
}}
|
|
|
|
|
></ImageBackground>
|
|
|
|
|
<View style={styles.image}>
|
|
|
|
|
<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: 'row', justifyContent: "center", alignItems: "center", alignSelf: "center"}}>
|
|
|
|
|
<Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[0].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>
|
|
|
|
|
<View style={styles.circle}/>
|
|
|
|
|
<Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${formatTime(trendingMovies[0].runtime)}`}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<Stars note={Math.round(trendingMovies[0].vote_average)}/>
|
|
|
|
|
</View>
|
|
|
|
|
<Image
|
|
|
|
|
style={styles.filmCard}
|
|
|
|
|
source={{
|
|
|
|
|
uri: trendingMovies[0].poster_path,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{height:35, marginTop: 10, marginBottom: 15}}>
|
|
|
|
|
<ScrollView
|
|
|
|
|
horizontal={true}
|
|
|
|
|
showsHorizontalScrollIndicator={false}>
|
|
|
|
|
<BadgeGenre name={"Popular"} isSelected={false}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"Trending"} isSelected={true}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"Classic"} isSelected={false}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"New"} isSelected={false}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"Cartoon"} isSelected={false}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"Serie"} isSelected={false}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
|
|
|
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
|
|
|
|
|
|
|
|
|
|
<View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
|
|
|
|
|
<FlatList horizontal
|
|
|
|
|
data={trendingMovies[0].genres}
|
|
|
|
|
renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>}
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View>
|
|
|
|
|
<Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<Text style={{color: "lightgray", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '20%', width:'100%'}}>
|
|
|
|
|
<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])}>
|
|
|
|
|
<Image
|
|
|
|
|
source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch", height:'45%', aspectRatio: 1,}}
|
|
|
|
|
source={require('../assets/images/watchlater_button.png')} style={{resizeMode: "stretch", height: '55%', aspectRatio: 1,}}
|
|
|
|
|
/>
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
<TouchableOpacity onPress={
|
|
|
|
|
() => popFirstTrending(trendingMovies[0]) }>
|
|
|
|
|
() => popFirstTrending(trendingMovies[0])}>
|
|
|
|
|
<Animated.Image
|
|
|
|
|
source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'45%',aspectRatio: 1,transform: [{ rotate: RotateData }],
|
|
|
|
|
source={require('../assets/images/delete_button.png')} style={{
|
|
|
|
|
resizeMode: "stretch", height: '55%', aspectRatio: 1,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
<TouchableOpacity>
|
|
|
|
|
<Image
|
|
|
|
|
source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'45%', aspectRatio: 1,}}
|
|
|
|
|
source={require('../assets/images/like_button.png')} style={{resizeMode: "stretch", height: '55%', aspectRatio: 1,}}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{zIndex: 10, alignItems: "center", justifyContent: "center", flex: 1, 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,
|
|
|
|
|
resizeMode: 'contain'
|
|
|
|
|
}}></Image>
|
|
|
|
|
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${hours.toString().padStart(2, '0')}:`}</Text>
|
|
|
|
|
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${minutes.toString().padStart(2, '0')}:`}</Text>
|
|
|
|
|
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${seconds.toString().padStart(2, '0')}`}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</SafeAreaView>)}
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
type BadgeGenreProps = {
|
|
|
|
|
name : String
|
|
|
|
|
name: String
|
|
|
|
|
isSelected: Boolean
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function BadgeGenre(props: BadgeGenreProps) {
|
|
|
|
|
if(props.isSelected===false){
|
|
|
|
|
if (props.isSelected === false) {
|
|
|
|
|
return (
|
|
|
|
|
<View style={{paddingHorizontal: 20, marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
|
|
|
|
|
<View style={{paddingHorizontal: 20, marginHorizontal: 5, height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}}>
|
|
|
|
|
<Text style={{color: "white"}}>{props.name}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<View style={{paddingHorizontal: 20, marginHorizontal: 5,height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white" ,justifyContent: "center"}} >
|
|
|
|
|
<View style={{paddingHorizontal: 20, marginHorizontal: 5, height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white", justifyContent: "center"}}>
|
|
|
|
|
<Text style={{color: "white"}}>{props.name}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
@ -226,9 +251,10 @@ export function BadgeGenre(props: BadgeGenreProps) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type BadgeFilmProps = {
|
|
|
|
|
name : String
|
|
|
|
|
name: String
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function BadgeFilm(props: BadgeFilmProps) {
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
@ -248,3 +274,34 @@ export function BadgeFilm(props: BadgeFilmProps) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type StarsProps = {
|
|
|
|
|
note: number
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function Stars(props: StarsProps) {
|
|
|
|
|
console.log("note", props.note)
|
|
|
|
|
let imageSource;
|
|
|
|
|
|
|
|
|
|
if (props.note < 2)
|
|
|
|
|
imageSource = require('../assets/images/1stars_vote.png');
|
|
|
|
|
else if (props.note < 4)
|
|
|
|
|
imageSource = require('../assets/images/2stars_vote.png');
|
|
|
|
|
else if (props.note < 6)
|
|
|
|
|
imageSource = require('../assets/images/3stars_vote.png');
|
|
|
|
|
else if (props.note < 8)
|
|
|
|
|
imageSource = require('../assets/images/4stars_vote.png');
|
|
|
|
|
else if (props.note < 10)
|
|
|
|
|
imageSource = require('../assets/images/5stars_vote.png');
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<View>
|
|
|
|
|
<Image source={imageSource} style={{
|
|
|
|
|
width: 130,
|
|
|
|
|
height: 40,
|
|
|
|
|
resizeMode: 'contain'
|
|
|
|
|
}}/>
|
|
|
|
|
</View>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
Lucas Delanier
2 years ago
