david.d_almeida
/
MovieFinder
forked from lucas.delanier/MovieFinder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix review and better look

Browse Source
Tests
Lucas Delanier 2 years ago
parent 62584127bc
commit b80ad6d113
6 changed files with 131 additions and 41 deletions
Show Stats Download Patch File Download Diff File

2
model/MinimalMovie.tsx
Unescape View File

@ -6,7 +6,7 @@ class MinimalMovie {
constructor(original_title: string, poster_path: string) { constructor(original_title: string, poster_path: string) {
this.original_title = original_title; this.original_title = original_title;
this.poster_path = 'https://image.tmdb.org/t/p/w780' + poster_path; this.poster_path = 'https://image.tmdb.org/t/p/w185' + poster_path;
} }

4
model/Movie.tsx
Unescape View File

@ -18,13 +18,13 @@ class Movie {
this.id = id; this.id = id;
this.original_title = original_title; this.original_title = original_title;
this.poster_path = 'https://image.tmdb.org/t/p/w780' + poster_path; this.poster_path = 'https://image.tmdb.org/t/p/w780' + poster_path;
this.poster_path_min = 'https://image.tmdb.org/t/p/w500' + poster_path; this.poster_path_min = 'https://image.tmdb.org/t/p/w185' + poster_path;
this.runtime = runtime; this.runtime = runtime;
this.release_date = release_date.substring(0, 4); this.release_date = release_date.substring(0, 4);
this.genres = genres; this.genres = genres;
this.overview = overview; this.overview = overview;
this.vote_average = vote_average; this.vote_average = vote_average;
this.backdrop_path = 'https://image.tmdb.org/t/p/w780' + backdrop_path; this.backdrop_path = 'https://image.tmdb.org/t/p/original' + backdrop_path;
} }

3
model/review.tsx
Unescape View File

@ -11,10 +11,9 @@ class Review {
constructor(message: string, profil_path: string, date: string, pseudo: string) { constructor(message: string, profil_path: string, date: string, pseudo: string) {
this.message = message; this.message = message;
if (profil_path === null) { if (profil_path === null) {
console.log("nulllllllllll")
this.profil_path = "https://thumbs.dreamstime.com/b/profil-vectoriel-avatar-par-d%C3%A9faut-utilisateur-179376714.jpg"; this.profil_path = "https://thumbs.dreamstime.com/b/profil-vectoriel-avatar-par-d%C3%A9faut-utilisateur-179376714.jpg";
} else { } else {
this.profil_path = 'https://image.tmdb.org/t/p/w500' + profil_path; this.profil_path = 'https://image.tmdb.org/t/p/w185' + profil_path;
} }
this.date = date.substring(0, 10); this.date = date.substring(0, 10);

9
screens/HomeScreen.tsx
Unescape View File

@ -187,13 +187,13 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
<SafeAreaView style={styles.background1}> <SafeAreaView style={styles.background1}>
<ImageBackground blurRadius={8} <ImageBackground blurRadius={29}
style={{ style={{
width: "150%", width: "150%",
height: "150%", height: "150%",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
opacity: 0.48, opacity: 0.55,
position: 'absolute', position: 'absolute',
left: "-50%", left: "-50%",
top: "-50%" top: "-50%"
@ -287,7 +287,8 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text> <Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text>
<Image source={require('../assets/images/timer_icon.png')} style={{ <Image source={require('../assets/images/timer_icon.png')} style={{
height: 30, height: 30,
resizeMode: 'contain' resizeMode: 'contain',
top: -5
}}></Image> }}></Image>
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${hours.toString().padStart(2, '0')}:`}</Text> <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"}}>{`${minutes.toString().padStart(2, '0')}:`}</Text>
@ -411,7 +412,7 @@ export function Stars(props: StarsProps) {
return ( return (
<View> <View>
<Image source={imageSource} style={{ <Image source={imageSource} style={{
width: 110, width: props.size,
height: 40, height: 40,
resizeMode: 'contain' resizeMode: 'contain'
}}/> }}/>

113
screens/InfoScreen.tsx
Unescape View File

@ -28,8 +28,8 @@ import {ListWidget} from "./WatchLaterScreen";
import Review from "../model/review"; import Review from "../model/review";
export default function InfoScreen({navigation, route}: RootStackScreenProps<'Info'>) { export default function InfoScreen({navigation, route}: RootStackScreenProps<'Info'>) {
// @ts-ignore
const item: Movie = route.params.item const item: Movie = route.params.item
console.log("current", item);
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background1: { background1: {
@ -41,11 +41,16 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
const [trailerPath, setTrailerPath] = useState(""); const [trailerPath, setTrailerPath] = useState("");
const [similarMovies, setsimilarMovies] = useState<MinimalMovie[]>([]); const [similarMovies, setsimilarMovies] = useState<MinimalMovie[]>([]);
const [review, setReview] = useState<Review[]>([]); const [review, setReview] = useState<Review[]>([]);
const [credit, setCredit] = useState<creditItem[]>();
const [paddingtopbackgroud, setpaddingtopbackgroud] = useState(0);
const [opacitybackground, setopacitybackground] = useState(0.7);
const [scalebackground, setscalebackground] = useState(1);
const getTriller = async () => { const getTriller = async () => {
const trailerResponse = (await fetch(config.base_url + "movie/" + item.id + "/videos?api_key=" + config.api_key + "&language=fr-FR")); const trailerResponse = (await fetch(config.base_url + "movie/" + item.id + "/videos?api_key=" + config.api_key + "&language=fr-FR"));
const trailerJson = await trailerResponse.json(); const trailerJson = await trailerResponse.json();
console.log("trailer", trailerJson) console.log("trailer", trailerJson)
// @ts-ignore
const trailer_key = trailerJson.results.slice(0, 1).map((elt) => { const trailer_key = trailerJson.results.slice(0, 1).map((elt) => {
if (elt["type"] === "Trailer" && elt["site"] === "YouTube") { if (elt["type"] === "Trailer" && elt["site"] === "YouTube") {
return elt["key"]; return elt["key"];
@ -55,10 +60,27 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
setTrailerPath(trailer_key); setTrailerPath(trailer_key);
} }
const getCredits = async () => {
const creditResponse = (await fetch(config.base_url + "movie/" + item.id + "/credits?api_key=" + config.api_key + "&language=fr-FR"));
const creditJson = await creditResponse.json();
console.log("credittttttt", creditJson)
// @ts-ignore
let creditList = creditJson.cast.map((elt) => {
if (elt["popularity"])
return [elt["name"], 'https://image.tmdb.org/t/p/w500' + elt["profile_path"], elt["popularity"]]
});
creditList = creditList.slice(0, 5).sort((a: [fullname: string, profil_path: string, popularity: number], b: [fullname: string, profil_path: string, popularity: number]) => b[2] - a[2]);
console.log("credit", creditList);
setCredit(creditList);
}
const getSimilarMovies = async () => { const getSimilarMovies = async () => {
const SimilarMoviesResponse = (await fetch(config.base_url + "movie/" + item.id + "/recommendations?api_key=" + config.api_key + "&language=fr-FR")); const SimilarMoviesResponse = (await fetch(config.base_url + "movie/" + item.id + "/recommendations?api_key=" + config.api_key + "&language=fr-FR"));
const SimilarMoviesJson = await SimilarMoviesResponse.json(); const SimilarMoviesJson = await SimilarMoviesResponse.json();
// @ts-ignore
const SimilarMoviesList = SimilarMoviesJson.results.slice(0, 10).map((elt) => { const SimilarMoviesList = SimilarMoviesJson.results.slice(0, 10).map((elt) => {
return new MinimalMovie(elt["original_title"], elt["poster_path"]) return new MinimalMovie(elt["original_title"], elt["poster_path"])
}); });
@ -69,11 +91,16 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
const ReviewResponse = (await fetch(config.base_url + "movie/" + item.id + "/reviews?api_key=" + config.api_key + "&language=us-EN&page=1")); const ReviewResponse = (await fetch(config.base_url + "movie/" + item.id + "/reviews?api_key=" + config.api_key + "&language=us-EN&page=1"));
const ReviewJson = await ReviewResponse.json(); const ReviewJson = await ReviewResponse.json();
const ReviewList = ReviewJson.results.map((elt) => { // @ts-ignore
let ReviewList = ReviewJson.results.map((elt) => {
return new Review(elt["content"], elt["author_details"].avatar_path, elt["created_at"], elt["author"]) const newreview = new Review(elt["content"], elt["author_details"].avatar_path, elt["created_at"], elt["author"])
return newreview
}); });
console.log("review", ReviewList); ReviewList = ReviewList.filter((review: Review, index: number, array: Review[]) => {
return array.findIndex((item: Review) => item.pseudo === review.pseudo) === index;
});
console.log("review", ReviewJson.results);
setReview(ReviewList); setReview(ReviewList);
} }
@ -82,25 +109,71 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
getReview(); getReview();
getTriller(); getTriller();
getSimilarMovies(); getSimilarMovies();
getCredits();
}, []); }, []);
function formatTime(time: number) { function formatTime(time: number) {
console.log(time);
const hours = Math.floor(time / 60); const hours = Math.floor(time / 60);
const minutes = time % 60; const minutes = time % 60;
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`; return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
} }
type creditItem = [string, string, number];
type creditProps = {
data: creditItem[];
};
const handleScroll = (event: any) => {
const {y} = event.nativeEvent.contentOffset;
let padTop = y / -5;
if (padTop <= 0)
setpaddingtopbackgroud(y / -5);
setopacitybackground(0.5 - y / 500);
let scale = 1 - y / -1000
if (scale >= 1)
setscalebackground(scale);
};
function CreditList({data}: creditProps) {
const renderItem = ({item}: { item: creditItem }) => (
<View style={{width: 90, marginHorizontal: 7, alignItems: "center"}}>
<View style={{justifyContent: "center"}}>
<Image source={{uri: item[1]}} style={{height: 90, width: 90, borderRadius: 200, borderWidth: 3, borderColor: "rgba(255,255,255,0.8)"}}></Image>
<View style={{backgroundColor: "white", borderRadius: 20, padding: 2, paddingHorizontal: 5, justifyContent: "center", alignItems: "center", position: "absolute", bottom: 0, right: 0, flexDirection: "row"}}>
<Text style={{color: "black", fontWeight: "500", paddingRight: 4}}>{item[2].toFixed(1).toString()}</Text>
<Ionicons name="md-star" size={13} color="#FFC42D"/>
</View>
</View>
<Text numberOfLines={2} style={{color: "#DADADA", paddingTop: 5, fontWeight: "300"}}>{item[0]}</Text>
</View>
);
return (
<FlatList
style={{paddingBottom: 40}}
data={data}
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={renderItem}
keyExtractor={(item) => item[0]}
/>
);
}
return ( return (
<View style={{backgroundColor: "#0F0F19"}}> <View style={{backgroundColor: "#0E0E0E"}}>
<View style={{height: "100%", width: "100%", position: "absolute"}}> <View style={{height: "100%", width: "100%", position: "absolute"}}>
<Image <Image
style={{ style={{
height: "45%", height: "45%",
top: paddingtopbackgroud,
width: '100%', width: '100%',
opacity: 0.5, opacity: opacitybackground,
position: "absolute" position: "absolute",
transform: [{scale: scalebackground}],
}} }}
source={{ source={{
uri: item.backdrop_path, uri: item.backdrop_path,
@ -113,16 +186,17 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
/> />
<LinearGradient style={{height: "30%", top: "25%",}} <LinearGradient style={{height: "30%", top: "25%",}}
// Button Linear Gradient // Button Linear Gradient
colors={['rgba(15,15,25,0)', 'rgba(15,15,25,0.7)', 'rgba(15,15,25,1)', 'rgba(15,15,25,1)']}> colors={['rgba(14,14,14,0)', 'rgba(14,14,14,0.7)', 'rgba(14,14,14,1)', 'rgba(14,14,14,1)']}>
</LinearGradient> </LinearGradient>
</View> </View>
<SafeAreaView style={styles.background1}> <SafeAreaView style={styles.background1}>
<TouchableOpacity onPress={() => navigation.goBack()} style={{zIndex: 100}}> <TouchableOpacity onPress={() => navigation.goBack()} style={{zIndex: 100}}>
<Ionicons name="ios-arrow-back" size={30} color="white" style={{position: "absolute", top: 10, left: 10}}/> <Ionicons name="ios-arrow-back" size={30} color="white" style={{position: "absolute", top: 10, left: 5}}/>
</TouchableOpacity> </TouchableOpacity>
<ScrollView style={{height: "100%"}} showsVerticalScrollIndicator={false}> <ScrollView style={{height: "100%"}} showsVerticalScrollIndicator={false} onScroll={handleScroll} scrollEventThrottle={1}
>
<View style={{paddingHorizontal: 35}}> <View style={{paddingHorizontal: 35}}>
<Text style={{color: "white", fontSize: 43, fontWeight: "bold", paddingBottom: 10, paddingTop: "45%"}} numberOfLines={2}>{item.original_title}</Text> <Text style={{color: "white", fontSize: 43, fontWeight: "bold", paddingBottom: 10, paddingTop: "45%"}} numberOfLines={2}>{item.original_title}</Text>
<View style={{flexDirection: "row", width: "100%", justifyContent: "flex-start"}}> <View style={{flexDirection: "row", width: "100%", justifyContent: "flex-start"}}>
@ -151,10 +225,16 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
</View> </View>
{credit !== undefined && (
<>
<Text style={{color: "#2998FD", paddingTop: 30, paddingBottom: 20, paddingLeft: 35, fontSize: 17, fontWeight: "600"}}>Crédits</Text>
<CreditList data={credit}></CreditList></>
)}
{similarMovies.length !== 0 && ( {similarMovies.length !== 0 && (
<> <>
<Text style={{color: "white", paddingTop: 30, paddingLeft: 35, fontSize: 17, fontWeight: "800"}}>Recommandations</Text> <Text style={{color: "#2998FD", paddingTop: 30, paddingLeft: 35, fontSize: 17, fontWeight: "600"}}>Recommendations</Text>
<FlatList <FlatList
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
style={{paddingTop: 20}} style={{paddingTop: 20}}
@ -164,22 +244,23 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
renderItem={({item}) => renderItem={({item}) =>
<View style={{width: 90, marginHorizontal: 7}}> <View style={{width: 90, marginHorizontal: 7}}>
<Image source={{uri: item.poster_path}} style={{height: 130, width: 90, borderRadius: 8}}></Image> <Image source={{uri: item.poster_path}} style={{height: 130, width: 90, borderRadius: 8}}></Image>
<Text numberOfLines={2} style={{color: "white", paddingTop: 5, fontWeight: "200"}}>{item.original_title}</Text> <Text numberOfLines={2} style={{color: "#DADADA", paddingTop: 5, fontWeight: "300"}}>{item.original_title}</Text>
</View> </View>
} }
/></> /></>
)} )}
{review.length !== 0 && ( {review.length !== 0 && (
<> <>
<Text style={{color: "white", paddingTop: 30, paddingLeft: 35, fontSize: 17, fontWeight: "800"}}>Commentaires</Text> <Text style={{color: "#2998FD", paddingTop: 30, paddingLeft: 35, fontSize: 17, fontWeight: "600"}}>Commentaires</Text>
<FlatList <FlatList
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
style={{paddingTop: 10}} style={{paddingTop: 10}}
data={review} data={review}
horizontal={true} horizontal={true}
keyExtractor={item => item.profil_path} keyExtractor={item => item.pseudo}
renderItem={({item}) => renderItem={({item}) =>
<View style={{marginHorizontal: 7, width: 300, padding: 20, backgroundColor: "#09090F", marginVertical: 10, borderRadius: 14, borderWidth: 0.8, borderColor: "rgba(223,223,223,0.14)"}}> <View style={{marginHorizontal: 7, width: 300, padding: 20, backgroundColor: "#09090F", marginVertical: 10, borderRadius: 14, borderWidth: 0.8, borderColor: "rgba(223,223,223,0.14)"}}>

41
screens/WatchLaterScreen.tsx
Unescape View File

@ -3,15 +3,14 @@ import * as React from "react";
import {BadgeFilm, Stars} from "./HomeScreen"; import {BadgeFilm, Stars} from "./HomeScreen";
import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
import {faClock} from "@fortawesome/free-solid-svg-icons"; import {faClock} from "@fortawesome/free-solid-svg-icons";
import LinearGradient from 'react-native-linear-gradient';
import {RootTabScreenProps} from "../types"; import {RootTabScreenProps} from "../types";
import {useSafeAreaInsets} from "react-native-safe-area-context"; import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useDispatch, useSelector} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/actions/actionGetTrendingID"; import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/actions/actionGetTrendingID";
import Movie from "../model/Movie"; import Movie from "../model/Movie";
import Swipeable from "react-native-gesture-handler/Swipeable";
import {useNavigation} from "@react-navigation/native"; import {useNavigation} from "@react-navigation/native";
import {LinearGradient} from 'expo-linear-gradient';
export default function WatchLaterScreen({navigation}: RootTabScreenProps<'WatchLater'>) { export default function WatchLaterScreen({navigation}: RootTabScreenProps<'WatchLater'>) {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
@ -22,7 +21,7 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch
container: { container: {
flex: 1, flex: 1,
paddingTop: 22, paddingTop: 22,
backgroundColor: "#232323" backgroundColor: "#0E0E0E"
}, },
linearGradient: { linearGradient: {
flex: 1, flex: 1,
@ -105,8 +104,8 @@ export function ListWidget(props: ListWidgetProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
filmCard: { filmCard: {
width: 90, width: 70,
height: 130, height: 110,
borderRadius: 8, borderRadius: 8,
@ -121,25 +120,35 @@ export function ListWidget(props: ListWidgetProps) {
} }
return ( return (
<View style={{
<LinearGradient style={{
height: 130, height: 130,
width: "100%",
borderRadius: 20, borderRadius: 20,
justifyContent: "flex-start", justifyContent: "flex-start",
flexDirection: 'row', flexDirection: 'row',
marginHorizontal: 20, marginHorizontal: 10,
marginBottom: 15 marginVertical: 7,
}}> paddingHorizontal: 10,
backgroundColor: "#1D1D1D",
alignItems: "center",
borderWidth: 1.5,
borderColor: "#1F1F1F"
}} start={{x: 0, y: 1}}
end={{x: 1, y: 1}}
// Button Linear Gradient
colors={['#0B0B0B', '#1F1F1F']}>
<Image <Image
style={styles.filmCard} style={styles.filmCard}
source={{ source={{
uri: props.movie.poster_path, uri: props.movie.poster_path_min,
}} }}
/> />
<View style={{ <View style={{
height: 130, height: 130,
width: "70%", width: "85%",
justifyContent: "center", justifyContent: "center",
flexDirection: 'column', flexDirection: 'column',
paddingRight: 20, paddingRight: 20,
@ -152,15 +161,15 @@ export function ListWidget(props: ListWidgetProps) {
}}>{props.movie.original_title}</Text> }}>{props.movie.original_title}</Text>
<View style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between", width: "100%"}}> <View style={{flexDirection: "row", alignItems: "center", justifyContent: "space-between", width: "100%"}}>
<View style={{flexDirection: "row", alignItems: "center",}}> <View style={{flexDirection: "row", alignItems: "center",}}>
<Stars note={props.movie.vote_average} size={70}></Stars> <Stars note={props.movie.vote_average} size={90}></Stars>
<Text style={{paddingLeft: 10, color: "white", fontWeight: "bold"}}>{props.movie.vote_average.toFixed(1)}</Text> <Text style={{paddingLeft: 7, color: "white", fontWeight: "bold", fontSize: 13}}>{props.movie.vote_average.toFixed(1)}</Text>
</View> </View>
<Text style={{color: "grey", fontWeight: "600"}}>{formatTime(props.movie.runtime)}</Text> <Text style={{color: "grey", fontWeight: "600"}}>{formatTime(props.movie.runtime)}</Text>
</View> </View>
<Text numberOfLines={3} style={{color: "grey", fontWeight: "600",}}>{props.movie.overview}</Text> <Text numberOfLines={3} style={{color: "#C7C7C7", fontWeight: "600",}}>{props.movie.overview}</Text>
</View> </View>
</View> </LinearGradient>
); );
} }
Write Preview
Loading…
Cancel
Save