diff --git a/assets/images/1stars_vote.png b/assets/images/1stars_vote.png new file mode 100644 index 0000000..2b06d16 Binary files /dev/null and b/assets/images/1stars_vote.png differ diff --git a/assets/images/2stars_vote.png b/assets/images/2stars_vote.png new file mode 100644 index 0000000..b39ce28 Binary files /dev/null and b/assets/images/2stars_vote.png differ diff --git a/assets/images/3stars_vote.png b/assets/images/3stars_vote.png new file mode 100644 index 0000000..d74bdbf Binary files /dev/null and b/assets/images/3stars_vote.png differ diff --git a/assets/images/4stars_vote.png b/assets/images/4stars_vote.png new file mode 100644 index 0000000..34fed47 Binary files /dev/null and b/assets/images/4stars_vote.png differ diff --git a/assets/images/5stars_vote.png b/assets/images/5stars_vote.png new file mode 100644 index 0000000..a8f2833 Binary files /dev/null and b/assets/images/5stars_vote.png differ diff --git a/assets/images/delete_button.png b/assets/images/delete_button.png new file mode 100644 index 0000000..58cbd03 Binary files /dev/null and b/assets/images/delete_button.png differ diff --git a/assets/images/like_button.png b/assets/images/like_button.png new file mode 100644 index 0000000..dc56b4a Binary files /dev/null and b/assets/images/like_button.png differ diff --git a/assets/images/timer_icon.png b/assets/images/timer_icon.png new file mode 100644 index 0000000..ff15b08 Binary files /dev/null and b/assets/images/timer_icon.png differ diff --git a/assets/images/watchlater_button.png b/assets/images/watchlater_button.png new file mode 100644 index 0000000..c2297bb Binary files /dev/null and b/assets/images/watchlater_button.png differ diff --git a/model/Movie.tsx b/model/Movie.tsx index a8ffb26..1cdc5b9 100644 --- a/model/Movie.tsx +++ b/model/Movie.tsx @@ -3,25 +3,23 @@ class Movie { public poster_path: string public runtime: number - public vote_average : number + public vote_average: number public release_date: string public overview: string public genres: string[] - constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string, genres : string[], overview : string) { + constructor(original_title: string, poster_path: string, runtime: number, vote_average: number, release_date: string, genres: string[], overview: 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/w780' + poster_path; this.runtime = runtime; - this.vote_average = vote_average; - this.release_date = release_date; + this.release_date = release_date.substring(0, 4); this.genres = genres; this.overview = overview; + this.vote_average = vote_average; } - - } export default Movie; \ No newline at end of file diff --git a/navigation/index.tsx b/navigation/index.tsx index 143056d..be176d1 100644 --- a/navigation/index.tsx +++ b/navigation/index.tsx @@ -3,15 +3,15 @@ * https://reactnavigation.org/docs/getting-started * */ -import { FontAwesome } from '@expo/vector-icons'; -import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; -import { faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons"; +import {FontAwesome} from '@expo/vector-icons'; +import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; +import {faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons"; import Ionicons from '@expo/vector-icons/Ionicons'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native'; +import {createNativeStackNavigator} from '@react-navigation/native-stack'; import * as React from 'react'; -import { ColorSchemeName, Pressable } from 'react-native'; +import {ColorSchemeName, Pressable} from 'react-native'; import Colors from '../constants/Colors'; import useColorScheme from '../hooks/useColorScheme'; @@ -19,17 +19,17 @@ import NotFoundScreen from '../screens/NotFoundScreen'; import WatchLaterScreen from '../screens/WatchLaterScreen'; import FavoriteScreen from '../screens/FavoriteScreen'; import HomeScreen from '../screens/HomeScreen'; -import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types'; +import {RootStackParamList, RootTabParamList, RootTabScreenProps} from '../types'; import LinkingConfiguration from './LinkingConfiguration'; -export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) { - return ( - - - - ); +export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName }) { + return ( + + + + ); } /** @@ -39,15 +39,15 @@ export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeNa const Stack = createNativeStackNavigator(); function RootNavigator() { - return ( - - - - - - - - ); + return ( + + + + + + + + ); } /** @@ -57,54 +57,54 @@ function RootNavigator() { const BottomTab = createBottomTabNavigator(); function BottomTabNavigator() { - const colorScheme = useColorScheme(); + const colorScheme = useColorScheme(); - return ( - - + ) => ({ - tabBarIcon: ({ color, size}) => , - headerShown: false, + component={WatchLaterScreen} + options={({navigation}: RootTabScreenProps<'WatchLater'>) => ({ + tabBarIcon: ({color, size}) => , + headerShown: false, - })} - /> - + , - }} - /> - , + }} + /> + , - }} - /> - - ); + options={{ + headerShown: false, + tabBarIcon: ({color, size}) => , + }} + /> + + ); } /** * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/ */ function TabBarIcon(props: { - name: any; - color: string; - size: number; + name: any; + color: string; + size: number; }) { - return ; + return ; } diff --git a/package-lock.json b/package-lock.json index b96f9c9..eefd3f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "expo-status-bar": "~1.4.2", "expo-system-ui": "~2.0.1", "expo-web-browser": "~12.0.0", + "moment": "^2.29.4", "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", @@ -13428,6 +13429,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -28014,6 +28023,11 @@ "minimist": "^1.2.6" } }, + "moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index e06155e..edf21e9 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "expo-status-bar": "~1.4.2", "expo-system-ui": "~2.0.1", "expo-web-browser": "~12.0.0", + "moment": "^2.29.4", "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index 233e246..6a92dfa 100644 --- a/screens/HomeScreen.tsx +++ b/screens/HomeScreen.tsx @@ -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){ - dispatch(addMovieToWatchLater(props)); - dispatch(removeMovieTrending(props)); + + function addWatchLater(props: Movie) { + dispatch(addMovieToWatchLater(props)); + dispatch(removeMovieTrending(props)); } - function popFirstTrending(props: Movie){ + + function popFirstTrending(props: Movie) { dispatch(removeMovieTrending(props)); } @@ -101,121 +148,99 @@ 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 && ( - - - + {trendingMovies.length !== 0 && ( + + + + {trendingMovies[0].original_title} + + {`${trendingMovies[0].release_date}`} + + {`${trendingMovies[0].genres[0]}, ${trendingMovies[0].genres[1]}`} + + {`${formatTime(trendingMovies[0].runtime)}`} + + + - - - - - - - - - - - - - - - - - - - - - } - /> + + addWatchLater(trendingMovies[0])}> + + + popFirstTrending(trendingMovies[0])}> + + + + + + + - - {trendingMovies[0].original_title} + + Nouvelle collection dans + + {`${hours.toString().padStart(2, '0')}:`} + {`${minutes.toString().padStart(2, '0')}:`} + {`${seconds.toString().padStart(2, '0')}`} - {trendingMovies[0].release_date} - - - addWatchLater(trendingMovies[0])}> - - - popFirstTrending(trendingMovies[0]) }> - - - - - - - )} + )} -) + ) } type BadgeGenreProps = { - name : String + name: String isSelected: Boolean } export function BadgeGenre(props: BadgeGenreProps) { - if(props.isSelected===false){ + if (props.isSelected === false) { return ( - + {props.name} ); - } - else{ + } else { return ( - + {props.name} @@ -226,25 +251,57 @@ export function BadgeGenre(props: BadgeGenreProps) { } type BadgeFilmProps = { - name : String + name: String } + export function BadgeFilm(props: BadgeFilmProps) { - return ( - - {props.name} - + return ( + + {props.name} + - ); + ); } + +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 ( + + + + ); +};