From b80ad6d1133da70fb506f507720fb7435ee59520 Mon Sep 17 00:00:00 2001 From: Lucas Delanier Date: Tue, 28 Feb 2023 19:27:17 +0100 Subject: [PATCH] fix review and better look --- model/MinimalMovie.tsx | 2 +- model/Movie.tsx | 4 +- model/review.tsx | 3 +- screens/HomeScreen.tsx | 9 +-- screens/InfoScreen.tsx | 113 ++++++++++++++++++++++++++++++----- screens/WatchLaterScreen.tsx | 41 ++++++++----- 6 files changed, 131 insertions(+), 41 deletions(-) diff --git a/model/MinimalMovie.tsx b/model/MinimalMovie.tsx index 3bc5bc5..773238e 100644 --- a/model/MinimalMovie.tsx +++ b/model/MinimalMovie.tsx @@ -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; } diff --git a/model/Movie.tsx b/model/Movie.tsx index 6eab631..4104c8e 100644 --- a/model/Movie.tsx +++ b/model/Movie.tsx @@ -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; } diff --git a/model/review.tsx b/model/review.tsx index 7bdd141..a08f5a2 100644 --- a/model/review.tsx +++ b/model/review.tsx @@ -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); diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index 0bebef1..3a01253 100644 --- a/screens/HomeScreen.tsx +++ b/screens/HomeScreen.tsx @@ -187,13 +187,13 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { - ) { Nouvelle collection dans {`${hours.toString().padStart(2, '0')}:`} {`${minutes.toString().padStart(2, '0')}:`} @@ -411,7 +412,7 @@ export function Stars(props: StarsProps) { return ( diff --git a/screens/InfoScreen.tsx b/screens/InfoScreen.tsx index b4b7d1c..ec21338 100644 --- a/screens/InfoScreen.tsx +++ b/screens/InfoScreen.tsx @@ -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([]); const [review, setReview] = useState([]); + const [credit, setCredit] = useState(); + 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 }) => ( + + + + + {item[2].toFixed(1).toString()} + + + + + {item[0]} + + ); + + return ( + item[0]} + /> + ); + } return ( - + + colors={['rgba(14,14,14,0)', 'rgba(14,14,14,0.7)', 'rgba(14,14,14,1)', 'rgba(14,14,14,1)']}> navigation.goBack()} style={{zIndex: 100}}> - + - + {item.original_title} @@ -151,10 +225,16 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In + {credit !== undefined && ( + <> + Crédits + + + )} {similarMovies.length !== 0 && ( <> - Recommandations + Recommendations - {item.original_title} + {item.original_title} } /> )} + {review.length !== 0 && ( <> - Commentaires + Commentaires item.profil_path} + keyExtractor={item => item.pseudo} renderItem={({item}) => diff --git a/screens/WatchLaterScreen.tsx b/screens/WatchLaterScreen.tsx index 105293c..c5dad4a 100644 --- a/screens/WatchLaterScreen.tsx +++ b/screens/WatchLaterScreen.tsx @@ -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 ( - + 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']}> + {props.movie.original_title} - - {props.movie.vote_average.toFixed(1)} + + {props.movie.vote_average.toFixed(1)} {formatTime(props.movie.runtime)} - {props.movie.overview} + {props.movie.overview} - + ); } \ No newline at end of file