new ui , search in list, and vote

model/Movie.tsx

@@ -13,15 +13,13 @@ class Movie {
         this.original_title = original_title;
         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;

navigation/index.tsx

@@ -63,7 +63,7 @@ function BottomTabNavigator() {
         <BottomTab.Navigator
             initialRouteName="Home"
             screenOptions={{
-        tabBarActiveTintColor: "purple",
+                tabBarActiveTintColor: "white",
 
             }}>
             <BottomTab.Screen

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",

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",

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'>) {
     // @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,6 +38,7 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
         background: {
             backgroundColor: 'black',
             height: '100%',
+            width: '100%',
             paddingTop: insets.top,
         },
 
@@ -37,16 +46,14 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
             flex: 1,
         },
         filmCard: {
-            width: '80%',
-            height: '60%',
+            width: '85%',
+            height: '68%',
             justifyContent: 'center',
             marginLeft: 'auto',
             marginRight: 'auto',
-            borderRadius: 15,
-
-        },
-        image: {
-            position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center',
+            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());
@@ -86,11 +131,13 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
         movie: Movie
 
     }
+
     function addWatchLater(props: Movie) {
         dispatch(addMovieToWatchLater(props));
         dispatch(removeMovieTrending(props));
     }
 
+
     function popFirstTrending(props: Movie) {
         dispatch(removeMovieTrending(props));
     }
@@ -101,21 +148,9 @@ 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 (
         <>
@@ -128,72 +163,63 @@ 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])}>
                             <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>)}
         </>
     )
@@ -212,8 +238,7 @@ export function BadgeGenre(props: BadgeGenreProps) {
             </View>
 
         );
-    }
-    else{
+    } else {
         return (
             <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>
@@ -229,6 +254,7 @@ type BadgeFilmProps = {
     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>
+    );
+};