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) {
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.original_title = original_title;
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.release_date = release_date.substring(0, 4);
this.genres = genres;
this.overview = overview;
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) {
this.message = message;
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";
} 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);

9
screens/HomeScreen.tsx
Unescape View File

@ -187,13 +187,13 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
<SafeAreaView style={styles.background1}>
<ImageBackground blurRadius={8}
<ImageBackground blurRadius={29}
style={{
width: "150%",
height: "150%",
justifyContent: "center",
alignItems: "center",
opacity: 0.48,
opacity: 0.55,
position: 'absolute',
left: "-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>
<Image source={require('../assets/images/timer_icon.png')} style={{
height: 30,
resizeMode: 'contain'
resizeMode: 'contain',
top: -5
}}></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>
@ -411,7 +412,7 @@ export function Stars(props: StarsProps) {
return (
<View>
<Image source={imageSource} style={{
width: 110,
width: props.size,
height: 40,
resizeMode: 'contain'
}}/>

113
screens/InfoScreen.tsx
Unescape View File

@ -28,8 +28,8 @@ import {ListWidget} from "./WatchLaterScreen";
import Review from "../model/review";
export default function InfoScreen({navigation, route}: RootStackScreenProps<'Info'>) {
// @ts-ignore
const item: Movie = route.params.item
console.log("current", item);
const insets = useSafeAreaInsets();
const styles = StyleSheet.create({
background1: {
@ -41,11 +41,16 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
const [trailerPath, setTrailerPath] = useState("");
const [similarMovies, setsimilarMovies] = useState<MinimalMovie[]>([]);
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 trailerResponse = (await fetch(config.base_url + "movie/" + item.id + "/videos?api_key=" + config.api_key + "&language=fr-FR"));
const trailerJson = await trailerResponse.json();
console.log("trailer", trailerJson)
// @ts-ignore
const trailer_key = trailerJson.results.slice(0, 1).map((elt) => {
if (elt["type"] === "Trailer" && elt["site"] === "YouTube") {
return elt["key"];
@ -55,10 +60,27 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
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 SimilarMoviesResponse = (await fetch(config.base_url + "movie/" + item.id + "/recommendations?api_key=" + config.api_key + "&language=fr-FR"));
const SimilarMoviesJson = await SimilarMoviesResponse.json();
// @ts-ignore
const SimilarMoviesList = SimilarMoviesJson.results.slice(0, 10).map((elt) => {
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 ReviewJson = await ReviewResponse.json();
const ReviewList = ReviewJson.results.map((elt) => {
return new Review(elt["content"], elt["author_details"].avatar_path, elt["created_at"], elt["author"])
// @ts-ignore
let ReviewList = ReviewJson.results.map((elt) => {
const newreview = new Review(elt["content"], elt["author_details"].avatar_path, elt["created_at"], elt["author"])
return newreview
});
ReviewList = ReviewList.filter((review: Review, index: number, array: Review[]) => {
return array.findIndex((item: Review) => item.pseudo === review.pseudo) === index;
});
console.log("review", ReviewList);
console.log("review", ReviewJson.results);
setReview(ReviewList);
}
@ -82,25 +109,71 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
getReview();
getTriller();
getSimilarMovies();
getCredits();
}, []);
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`;
}
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 (
<View style={{backgroundColor: "#0F0F19"}}>
<View style={{backgroundColor: "#0E0E0E"}}>
<View style={{height: "100%", width: "100%", position: "absolute"}}>
<Image
style={{
height: "45%",
top: paddingtopbackgroud,
width: '100%',
opacity: 0.5,
position: "absolute"
opacity: opacitybackground,
position: "absolute",
transform: [{scale: scalebackground}],
}}
source={{
uri: item.backdrop_path,
@ -113,16 +186,17 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
/>
<LinearGradient style={{height: "30%", top: "25%",}}
// 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>
</View>
<SafeAreaView style={styles.background1}>
<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>
<ScrollView style={{height: "100%"}} showsVerticalScrollIndicator={false}>
<ScrollView style={{height: "100%"}} showsVerticalScrollIndicator={false} onScroll={handleScroll} scrollEventThrottle={1}
>
<View style={{paddingHorizontal: 35}}>
<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"}}>
@ -151,10 +225,16 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
</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 && (
<>
<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
showsHorizontalScrollIndicator={false}
style={{paddingTop: 20}}
@ -164,22 +244,23 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
renderItem={({item}) =>
<View style={{width: 90, marginHorizontal: 7}}>
<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>
}
/></>
)}
{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
showsHorizontalScrollIndicator={false}
style={{paddingTop: 10}}
data={review}
horizontal={true}
keyExtractor={item => item.profil_path}
keyExtractor={item => item.pseudo}
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)"}}>

41
screens/WatchLaterScreen.tsx
Unescape View File

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