add resume to movies

2 years ago · 4987e8fbb8
parent a5fcfbca85
commit 4987e8fbb8
4 changed files with 59 additions and 24 deletions
--- a/model/Movie.tsx
+++ b/model/Movie.tsx
@ -5,15 +5,18 @@ class Movie {
    public runtime: number
    public vote_average : number
    public release_date: string
-    public genres: string[] = []
+    public overview: string
+    public genres: string[]

-    constructor(original_title: string, poster_path: string,runtime: number, vote_average: number, release_date : string, genres : 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/w500'+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.genres = genres;
+        this.overview = overview;
    }


--- a/redux/actions/actionGetTrendingID.tsx
+++ b/redux/actions/actionGetTrendingID.tsx
@ -47,7 +47,7 @@ export const getTrendingID = () => {
            const MovieList: Movie[] = [];
            Promise.all(idList.map(async elt => {
                try{
-                    const infoPromise = await fetch(config.base_url + "movie/"+elt+"?api_key=" + config.api_key);
+                    const infoPromise = await fetch(config.base_url + "movie/"+elt+"?api_key=" + config.api_key + "&language=fr-FR");
                    //const infoJson = await infoPromise.json();
                    //console.log('infos---------', infoJson);
                    //MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"]))
@ -67,7 +67,7 @@ export const getTrendingID = () => {
                            });
                            console.log('infos---------', elt);
                            // @ts-ignore
-                            MovieList.push(new Movie(infoJson["original_title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"], genreRow))
+                            MovieList.push(new Movie(infoJson["title"], infoJson["poster_path"],infoJson["runtime"], infoJson["vote_average"], infoJson["release_date"], genreRow, infoJson["overview"]))
                        })
                        try {
                            //console.log("tortue", MovieList)
--- a/screens/HomeScreen.tsx
+++ b/screens/HomeScreen.tsx
@ -9,7 +9,7 @@ import {
    Image,
    ImageBackground,
    SafeAreaView,
-    ActivityIndicator, FlatList
+    ActivityIndicator, FlatList, Animated, Easing
 } from 'react-native';
 import {RootStackScreenProps} from "../types";
 import {useEffect, useRef, useState} from "react";
@ -17,8 +17,6 @@ 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 Swipeable from 'react-native-gesture-handler/Swipeable';
-import {ListWidget} from "./WatchLaterScreen.js";

 export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>) {
    // @ts-ignore
@ -95,7 +93,6 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)

    function popFirstTrending(props: Movie){
        dispatch(removeMovieTrending(props));
-        dispatch(removeMovieTrending(props));
    }

    function formatTime(time: number) {
@ -104,6 +101,21 @@ 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(
        <>
@ -161,21 +173,23 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
                    </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: '15%', width:'100%'}}>
+                <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '20%', width:'100%'}}>
                    <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
                        <Image
-                            source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'65%', aspectRatio: 1,}}
+                            source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'45%', aspectRatio: 1,}}
                        />
                    </TouchableOpacity>
-                    <TouchableOpacity onPress={() => popFirstTrending(trendingMovies[0])}>
-                        <Image
-                            source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}}
+                    <TouchableOpacity onPress={
+                        () => popFirstTrending(trendingMovies[0]) }>
+                        <Animated.Image
+                            source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'45%',aspectRatio: 1,transform: [{ rotate: RotateData }],
+                        }}
                        />

                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image
-                            source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
+                            source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'45%', aspectRatio: 1,}}
                        />

                    </TouchableOpacity>
--- a/screens/WatchLaterScreen.tsx
+++ b/screens/WatchLaterScreen.tsx
@ -12,6 +12,9 @@ import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/action
 import Movie from "../model/Movie";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
+    const [search, setSearch] = useState('');
+    const [filteredDataSource, setFilteredDataSource] = useState<Movie[]>([]);
+    const [masterDataSource, setMasterDataSource] = useState([]);
    const insets = useSafeAreaInsets();
    const styles = StyleSheet.create({
        container: {
@ -50,13 +53,23 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
        console.log("test11111:", watchLaterMovies);
        loadWatchLater();
    }, [dispatch]);
-    const leftContent = <Text>Pull to activate</Text>;
-
-    const rightButtons = [
-        <TouchableHighlight><Text>Button 1</Text></TouchableHighlight>,
-        <TouchableHighlight><Text>Button 2</Text></TouchableHighlight>
-    ];

+    const searchFilterFunction = (text : string) => {
+        if (text) {
+            const newData = watchLaterMovies.filter(function (item : Movie) {
+                const itemData = item.original_title
+                    ? item.original_title.toUpperCase()
+                    : ''.toUpperCase();
+                const textData = text.toUpperCase();
+                return itemData.indexOf(textData) > -1;
+            });
+            setFilteredDataSource(newData);
+            setSearch(text);
+        } else {
+            setFilteredDataSource(masterDataSource);
+            setSearch(text);
+        }
+    };

    return (
      <SafeAreaView style={styles.container}>
@ -69,10 +82,12 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
          />

          <View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
-              <TextInput style={{width:'100%', height:40, marginHorizontal:20}} ></TextInput>
+              <TextInput style={{width:'100%', height:40, marginHorizontal:20}}onChangeText={(text) => searchFilterFunction(text)}
+                         value={search}
+              ></TextInput>
          </View>
          <FlatList
-              data={watchLaterMovies}
+              data={search.length !== 0? filteredDataSource: watchLaterMovies}
              keyExtractor={item => item.original_title}
              renderItem={({item}) => <ListWidget movie={item} ></ListWidget>}
          />
@ -136,7 +151,10 @@ return (
            }}>{props.movie.original_title}</Text>
            <Text style={{color: "grey", fontWeight: "bold", fontSize: 17}}>{formatTime(props.movie.runtime)}</Text>
            <View style={{marginVertical: 10}}>
-                <BadgeFilm name={"Science-Ficton"}/>
+                <FlatList horizontal
+                          data={props.movie.genres}
+                          renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>}
+                />
            </View>
        </View>
    </View>