new ui likes and page when no cards

new_homepage_ui
Lucas Delanier 2 years ago
parent 5d9ac42909
commit e09917e2d5

@ -1,5 +1,5 @@
import { StatusBar } from 'expo-status-bar'; import {StatusBar} from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context'; import {SafeAreaProvider} from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources'; import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme'; import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation'; import Navigation from './navigation';
@ -7,21 +7,22 @@ import {View} from "react-native";
import store from "./redux/store"; import store from "./redux/store";
import {Provider} from "react-redux"; import {Provider} from "react-redux";
export default function App() { export default function App() {
const isLoadingComplete = useCachedResources(); const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
if (!isLoadingComplete) { if (!isLoadingComplete) {
return null; return null;
} else { } else {
return ( return (
<Provider store={store}> <Provider store={store}>
<SafeAreaProvider> <SafeAreaProvider>
<Navigation colorScheme={colorScheme} /> <Navigation colorScheme={colorScheme}/>
<StatusBar /> <StatusBar/>
</SafeAreaProvider> </SafeAreaProvider>
</Provider> </Provider>
); );
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 796 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 978 B

@ -1,6 +1,9 @@
module.exports = function(api) { module.exports = function (api) {
api.cache(true); api.cache(true);
return { return {
presets: ['babel-preset-expo'] presets: ['babel-preset-expo'],
}; plugins: [
}; 'react-native-reanimated/plugin',
]
};
};

@ -11,7 +11,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native'; import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {createNativeStackNavigator} from '@react-navigation/native-stack';
import * as React from 'react'; import * as React from 'react';
import {ColorSchemeName, Pressable} from 'react-native'; import {Appearance, ColorSchemeName, Pressable} from 'react-native';
import Colors from '../constants/Colors'; import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme'; import useColorScheme from '../hooks/useColorScheme';
@ -57,13 +57,14 @@ function RootNavigator() {
const BottomTab = createBottomTabNavigator<RootTabParamList>(); const BottomTab = createBottomTabNavigator<RootTabParamList>();
function BottomTabNavigator() { function BottomTabNavigator() {
const colorScheme = useColorScheme(); let colorScheme = useColorScheme();
const isLightTheme = colorScheme === "light"
return ( return (
<BottomTab.Navigator <BottomTab.Navigator
initialRouteName="Home" initialRouteName="Home"
screenOptions={{ screenOptions={{
tabBarActiveTintColor: "white", tabBarActiveTintColor: isLightTheme ? "black" : "white",
}}> }}>
<BottomTab.Screen <BottomTab.Screen

125
package-lock.json generated

@ -34,13 +34,14 @@
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"react-native": "0.70.5", "react-native": "0.70.5",
"react-native-cards-swipe": "^1.2.1",
"react-native-gesture-handler": "^2.9.0", "react-native-gesture-handler": "^2.9.0",
"react-native-ionicons": "^4.6.5", "react-native-ionicons": "^4.6.5",
"react-native-linear-gradient": "^2.6.2", "react-native-linear-gradient": "^2.6.2",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1", "react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0", "react-native-screens": "~3.18.0",
"react-native-svg": "^13.7.0", "react-native-svg": "^13.7.0",
"react-native-swipeable": "^0.6.0",
"react-native-web": "~0.18.9", "react-native-web": "~0.18.9",
"react-redux": "^8.0.5", "react-redux": "^8.0.5",
"redux": "^4.2.1", "redux": "^4.2.1",
@ -1364,6 +1365,20 @@
"@babel/core": "^7.0.0-0" "@babel/core": "^7.0.0-0"
} }
}, },
"node_modules/@babel/plugin-transform-object-assign": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz",
"integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==",
"dependencies": {
"@babel/helper-plugin-utils": "^7.18.6"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-object-super": { "node_modules/@babel/plugin-transform-object-super": {
"version": "7.18.6", "version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
@ -5596,6 +5611,11 @@
"hoist-non-react-statics": "^3.3.0" "hoist-non-react-statics": "^3.3.0"
} }
}, },
"node_modules/@types/invariant": {
"version": "2.2.35",
"resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
"integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
},
"node_modules/@types/istanbul-lib-coverage": { "node_modules/@types/istanbul-lib-coverage": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@ -12476,6 +12496,11 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
}, },
"node_modules/lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
},
"node_modules/lodash.throttle": { "node_modules/lodash.throttle": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@ -14837,6 +14862,17 @@
"react": "18.1.0" "react": "18.1.0"
} }
}, },
"node_modules/react-native-cards-swipe": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/react-native-cards-swipe/-/react-native-cards-swipe-1.2.1.tgz",
"integrity": "sha512-II2qcI18TnAzuQvNG3theG+DwmEsCEETeNAMkPRDgSFjj3QN2PznjG0tD18MX9OuMkVTNAqRQoASHLTcjeAYCw==",
"peerDependencies": {
"react": ">=16.8.3",
"react-native": ">=0.59.0",
"react-native-gesture-handler": "*",
"react-native-reanimated": ">=2.1.0"
}
},
"node_modules/react-native-codegen": { "node_modules/react-native-codegen": {
"version": "0.70.6", "version": "0.70.6",
"resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz", "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz",
@ -14887,6 +14923,25 @@
"react-native": "*" "react-native": "*"
} }
}, },
"node_modules/react-native-reanimated": {
"version": "2.12.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz",
"integrity": "sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==",
"dependencies": {
"@babel/plugin-transform-object-assign": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@types/invariant": "^2.2.35",
"invariant": "^2.2.4",
"lodash.isequal": "^4.5.0",
"setimmediate": "^1.0.5",
"string-hash-64": "^1.0.3"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0",
"react": "*",
"react-native": "*"
}
},
"node_modules/react-native-safe-area-context": { "node_modules/react-native-safe-area-context": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz",
@ -14922,18 +14977,6 @@
"react-native": "*" "react-native": "*"
} }
}, },
"node_modules/react-native-swipeable": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/react-native-swipeable/-/react-native-swipeable-0.6.0.tgz",
"integrity": "sha512-OJUmOtPAZ3s6OHdbmGdGBq3oNZaUFOV81UMQfO2fvIF2cUOMbjUKQCRU7EhijEyufiaMAlSu/VguCRAdLRLk3w==",
"dependencies": {
"prop-types": "^15.5.10"
},
"peerDependencies": {
"react": ">=15.2.0",
"react-native": ">=0.44.0"
}
},
"node_modules/react-native-web": { "node_modules/react-native-web": {
"version": "0.18.12", "version": "0.18.12",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
@ -16591,6 +16634,11 @@
"safe-buffer": "~5.1.0" "safe-buffer": "~5.1.0"
} }
}, },
"node_modules/string-hash-64": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz",
"integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw=="
},
"node_modules/string-length": { "node_modules/string-length": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@ -18729,6 +18777,14 @@
"@babel/helper-plugin-utils": "^7.18.6" "@babel/helper-plugin-utils": "^7.18.6"
} }
}, },
"@babel/plugin-transform-object-assign": {
"version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz",
"integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==",
"requires": {
"@babel/helper-plugin-utils": "^7.18.6"
}
},
"@babel/plugin-transform-object-super": { "@babel/plugin-transform-object-super": {
"version": "7.18.6", "version": "7.18.6",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
@ -21972,6 +22028,11 @@
"hoist-non-react-statics": "^3.3.0" "hoist-non-react-statics": "^3.3.0"
} }
}, },
"@types/invariant": {
"version": "2.2.35",
"resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
"integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
},
"@types/istanbul-lib-coverage": { "@types/istanbul-lib-coverage": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@ -27234,6 +27295,11 @@
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
}, },
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
},
"lodash.throttle": { "lodash.throttle": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@ -29180,6 +29246,12 @@
} }
} }
}, },
"react-native-cards-swipe": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/react-native-cards-swipe/-/react-native-cards-swipe-1.2.1.tgz",
"integrity": "sha512-II2qcI18TnAzuQvNG3theG+DwmEsCEETeNAMkPRDgSFjj3QN2PznjG0tD18MX9OuMkVTNAqRQoASHLTcjeAYCw==",
"requires": {}
},
"react-native-codegen": { "react-native-codegen": {
"version": "0.70.6", "version": "0.70.6",
"resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz", "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz",
@ -29220,6 +29292,20 @@
"integrity": "sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==", "integrity": "sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==",
"requires": {} "requires": {}
}, },
"react-native-reanimated": {
"version": "2.12.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz",
"integrity": "sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ==",
"requires": {
"@babel/plugin-transform-object-assign": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@types/invariant": "^2.2.35",
"invariant": "^2.2.4",
"lodash.isequal": "^4.5.0",
"setimmediate": "^1.0.5",
"string-hash-64": "^1.0.3"
}
},
"react-native-safe-area-context": { "react-native-safe-area-context": {
"version": "4.4.1", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz", "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz",
@ -29244,14 +29330,6 @@
"css-tree": "^1.1.3" "css-tree": "^1.1.3"
} }
}, },
"react-native-swipeable": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/react-native-swipeable/-/react-native-swipeable-0.6.0.tgz",
"integrity": "sha512-OJUmOtPAZ3s6OHdbmGdGBq3oNZaUFOV81UMQfO2fvIF2cUOMbjUKQCRU7EhijEyufiaMAlSu/VguCRAdLRLk3w==",
"requires": {
"prop-types": "^15.5.10"
}
},
"react-native-web": { "react-native-web": {
"version": "0.18.12", "version": "0.18.12",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz",
@ -30467,6 +30545,11 @@
"safe-buffer": "~5.1.0" "safe-buffer": "~5.1.0"
} }
}, },
"string-hash-64": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz",
"integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw=="
},
"string-length": { "string-length": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",

@ -39,13 +39,14 @@
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"react-native": "0.70.5", "react-native": "0.70.5",
"react-native-cards-swipe": "^1.2.1",
"react-native-gesture-handler": "^2.9.0", "react-native-gesture-handler": "^2.9.0",
"react-native-ionicons": "^4.6.5", "react-native-ionicons": "^4.6.5",
"react-native-linear-gradient": "^2.6.2", "react-native-linear-gradient": "^2.6.2",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1", "react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0", "react-native-screens": "~3.18.0",
"react-native-svg": "^13.7.0", "react-native-svg": "^13.7.0",
"react-native-swipeable": "^0.6.0",
"react-native-web": "~0.18.9", "react-native-web": "~0.18.9",
"react-redux": "^8.0.5", "react-redux": "^8.0.5",
"redux": "^4.2.1", "redux": "^4.2.1",

@ -9,7 +9,7 @@ import {
Image, Image,
ImageBackground, ImageBackground,
SafeAreaView, SafeAreaView,
ActivityIndicator, FlatList, Animated, Easing ActivityIndicator, FlatList
} from 'react-native'; } from 'react-native';
import {RootStackScreenProps} from "../types"; import {RootStackScreenProps} from "../types";
import {useEffect, useRef, useState} from "react"; import {useEffect, useRef, useState} from "react";
@ -19,6 +19,8 @@ import {useDispatch, useSelector} from 'react-redux';
import Movie from "../model/Movie"; import Movie from "../model/Movie";
import * as url from "url"; import * as url from "url";
import moment from 'moment'; import moment from 'moment';
import CardsSwipe from 'react-native-cards-swipe';
export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
// @ts-ignore // @ts-ignore
@ -28,6 +30,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
const [hours, setHours] = useState(0); const [hours, setHours] = useState(0);
const [minutes, setMinutes] = useState(0); const [minutes, setMinutes] = useState(0);
const [seconds, setSeconds] = useState(0); const [seconds, setSeconds] = useState(0);
const [displayIndex, setdisplayIndex] = useState(0);
//console.log("liste [0]: ", trendingMovies[0]); //console.log("liste [0]: ", trendingMovies[0]);
@ -35,24 +38,28 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background1: {
backgroundColor: 'black', backgroundColor: 'black',
height: '100%', height: '100%',
width: '100%', width: '100%',
paddingTop: insets.top, paddingTop: insets.top,
}, },
background2: {
height: '100%',
width: '100%',
paddingTop: insets.top,
},
container: { container: {
flex: 1, flex: 1,
}, },
filmCard: { filmCard: {
width: '85%', width: '85%',
height: '68%',
justifyContent: 'center', justifyContent: 'center',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
borderRadius: 22, borderRadius: 22,
marginTop: 15, flex: 0.80,
alignItems: 'center', alignItems: 'center',
shadowColor: "#000", shadowColor: "#000",
shadowOffset: { shadowOffset: {
@ -64,6 +71,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
alignSelf: 'center', alignSelf: 'center',
elevation: 13, elevation: 13,
zIndex: 15
}, },
backgroundImage: { backgroundImage: {
@ -83,6 +91,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
marginHorizontal: 8 marginHorizontal: 8
}, },
}); });
@ -93,13 +102,10 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
const interval = setInterval(() => { const interval = setInterval(() => {
const today = moment(); const today = moment();
// Définissez l'heure sur minuit
today.set({hour: 0, minute: 0, second: 0, millisecond: 0}); 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'); const tonight = today.add(1, 'days');
// Obtenez le timestamp en millisecondes
const timestamp = tonight.valueOf(); const timestamp = tonight.valueOf();
const now = new Date(); const now = new Date();
const difference = timestamp - now.getTime(); const difference = timestamp - now.getTime();
@ -143,58 +149,103 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
} }
function formatTime(time: number) { function formatTime(time: number) {
console.log(time);
const hours = Math.floor(time / 60); const hours = Math.floor(time / 60);
const minutes = time % 60; const minutes = time % 60;
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`; return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
} }
let rotateValueHolder = new Animated.Value(0);
return ( return (
<> <>
{trendingMovies.length !== 0 && ( <ImageBackground blurRadius={0}
<SafeAreaView style={styles.background}> style={{
width: "110%",
height: "110%",
justifyContent: "center",
alignItems: "center",
opacity: 0.15,
position: "absolute",
zIndex: 0
}}
source={require("../assets/images/background.png")
}
></ImageBackground>
{trendingMovies[displayIndex] !== undefined && (
<SafeAreaView style={styles.background1}>
<ImageBackground blurRadius={8} <ImageBackground blurRadius={8}
style={{ style={{
position: 'absolute', width: "150%",
width: "200%", height: "150%",
height: "200%",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
opacity: 0.68 opacity: 0.48,
position: 'absolute',
left: "-50%",
top: "-50%"
}} }}
source={{ source={{
uri: trendingMovies[0].poster_path, uri: trendingMovies[displayIndex].poster_path,
}} }}
></ImageBackground> ></ImageBackground>
<View style={{flexDirection: 'column', alignSelf: 'center', paddingHorizontal: 30, width: '100%', alignItems: "center"}}> <View style={{flexDirection: 'column', alignSelf: 'center', paddingHorizontal: 30, width: '100%', alignItems: "center", paddingTop: 10, flex: 0.07}}>
<Text numberOfLines={1} style={{color: "white", fontSize: 30, fontWeight: "bold", paddingTop: 5, alignSelf: "center"}}>{trendingMovies[0].original_title}</Text> <Text numberOfLines={1} style={{color: "white", fontSize: 30, fontWeight: "bold", paddingTop: 5, alignSelf: "center"}}>{trendingMovies[displayIndex].original_title}</Text>
<View style={{flexDirection: 'row', justifyContent: "center", alignItems: "center", alignSelf: "center"}}> <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> <Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[displayIndex].release_date}`}</Text>
<View style={styles.circle}/> <View style={styles.circle}/>
<Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[0].genres[0]}, ${trendingMovies[0].genres[1]}`}</Text> <Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${trendingMovies[displayIndex].genres[0]} ${trendingMovies[displayIndex].genres[1] !== undefined ? ", " + trendingMovies[0].genres[1] : ""}`}</Text>
<View style={styles.circle}/> <View style={styles.circle}/>
<Text style={{color: "#AAAAAA", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${formatTime(trendingMovies[0].runtime)}`}</Text> <Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${formatTime(trendingMovies[displayIndex].runtime)}`}</Text>
</View> </View>
<Stars note={Math.round(trendingMovies[0].vote_average)}/> <Stars note={trendingMovies[displayIndex].vote_average} size={110}/>
</View> </View>
<Image
style={styles.filmCard} <CardsSwipe
source={{ containerStyle={{zIndex: 20}}
uri: trendingMovies[0].poster_path, cards={trendingMovies}
onSwipedLeft={(index) => {
if (index + 1 < trendingMovies.length)
setdisplayIndex(index + 1)
else
setdisplayIndex(0)
}
}
onSwipedRight={(index) => {
if (index + 1 < trendingMovies.length)
setdisplayIndex(index + 1)
else
setdisplayIndex(0)
}} }}
renderCard={(card) => (
<Image
style={styles.filmCard}
source={{
uri: card.poster_path,
}}
/>)}
/> />
<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])}>
<View style={{flexDirection: 'row', alignItems: 'flex-end', justifyContent: "space-evenly", paddingHorizontal: 30, width: '100%', position: "absolute", top: "74%", zIndex: 30}}>
<TouchableOpacity onPress={() => {
addWatchLater(trendingMovies[0]);
}}>
<Image <Image
source={require('../assets/images/watchlater_button.png')} style={{resizeMode: "stretch", height: '55%', aspectRatio: 1,}} source={require('../assets/images/watchlater_button.png')} style={{resizeMode: "stretch", height: '55%', aspectRatio: 1,}}
/> />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={ <TouchableOpacity onPress={
() => popFirstTrending(trendingMovies[0])}> () => {
<Animated.Image popFirstTrending(trendingMovies[0]);
}}>
<Image
source={require('../assets/images/delete_button.png')} style={{ source={require('../assets/images/delete_button.png')} style={{
resizeMode: "stretch", height: '55%', aspectRatio: 1, resizeMode: "stretch", height: '55%', aspectRatio: 1,
}} }}
@ -208,7 +259,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{zIndex: 10, alignItems: "center", justifyContent: "center", flex: 1, flexDirection: "row"}}> <View style={{zIndex: 1, alignContent: "center", justifyContent: "center", flex: 0.15, flexDirection: "row"}}>
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text> <Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text>
<Image source={require('../assets/images/timer_icon.png')} style={{ <Image source={require('../assets/images/timer_icon.png')} style={{
height: 30, height: 30,
@ -221,7 +272,37 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
</SafeAreaView>)} </SafeAreaView>)}
{trendingMovies[displayIndex] === undefined && (
<SafeAreaView style={styles.background2}>
<View style={{alignItems: "center", width: "100%", height: "100%", justifyContent: "center", zIndex: 1}}>
<Text style={{color: "white", fontWeight: "600", fontSize: 35}}>Félicitations !</Text>
<Image
source={require('../assets/images/confetti.gif')}
style={{width: 200, height: 200, marginVertical: 50}}
/>
<Text style={{color: "grey", fontWeight: "400", paddingHorizontal: 70, textAlign: "center"}}>Vous avez fini la collection du jour.
{"\n"}Revenez à la fin du décompte pour découvrir de nouvelles propositions.</Text>
<View style={{zIndex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 20, paddingVertical: 10, borderRadius: 100, flexDirection: "row", bottom: 0, backgroundColor: "white", marginTop: 50}}>
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>Nouvelle collection dans</Text>
<Image source={require('../assets/images/timer_icon2.png')} style={{
height: 30,
resizeMode: 'contain', marginHorizontal: 7
}}></Image>
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${hours.toString().padStart(2, '0')}:`}</Text>
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${minutes.toString().padStart(2, '0')}:`}</Text>
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${seconds.toString().padStart(2, '0')}`}</Text>
</View>
</View>
</SafeAreaView>
)
}
</> </>
) )
} }
type BadgeGenreProps = { type BadgeGenreProps = {
@ -277,31 +358,42 @@ export function BadgeFilm(props: BadgeFilmProps) {
type StarsProps = { type StarsProps = {
note: number note: number
size: number
} }
export function Stars(props: StarsProps) { export function Stars(props: StarsProps) {
console.log("note", props.note)
let imageSource; let imageSource;
let note = props.note / 2;
if (props.note < 2) if (note < 0.5)
imageSource = require('../assets/images/0.5stars_vote.png');
else if (note < 1)
imageSource = require('../assets/images/1stars_vote.png'); imageSource = require('../assets/images/1stars_vote.png');
else if (props.note < 4) else if (note < 1.5)
imageSource = require('../assets/images/1.5stars_vote.png');
else if (note < 2)
imageSource = require('../assets/images/2stars_vote.png'); imageSource = require('../assets/images/2stars_vote.png');
else if (props.note < 6) else if (note < 2.5)
imageSource = require('../assets/images/2.5stars_vote.png');
else if (note < 3)
imageSource = require('../assets/images/3stars_vote.png'); imageSource = require('../assets/images/3stars_vote.png');
else if (props.note < 8) else if (note < 3.5)
imageSource = require('../assets/images/3.5stars_vote.png');
else if (note < 4)
imageSource = require('../assets/images/4stars_vote.png'); imageSource = require('../assets/images/4stars_vote.png');
else if (props.note < 10) else if (note < 4.5)
imageSource = require('../assets/images/4.5stars_vote.png');
else if (note < 5)
imageSource = require('../assets/images/5stars_vote.png'); imageSource = require('../assets/images/5stars_vote.png');
return ( return (
<View> <View>
<Image source={imageSource} style={{ <Image source={imageSource} style={{
width: 130, width: 110,
height: 40, height: 40,
resizeMode: 'contain' resizeMode: 'contain'
}}/> }}/>
</View> </View>
); );
}; };

@ -1,17 +1,18 @@
import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput, TouchableHighlight} from 'react-native'; import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput, TouchableHighlight} from 'react-native';
import * as React from "react"; import * as React from "react";
import {BadgeFilm} from "./HomeScreen"; import {BadgeFilm, Stars} from "./HomeScreen";
import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
import { faClock} from "@fortawesome/free-solid-svg-icons"; import {faClock} from "@fortawesome/free-solid-svg-icons";
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import {RootTabScreenProps} from "../types"; import {RootTabScreenProps} from "../types";
import {useSafeAreaInsets} from "react-native-safe-area-context"; import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useDispatch,useSelector} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
import {useEffect, useState} from 'react'; import {useEffect, useState} from 'react';
import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/actions/actionGetTrendingID"; import {getTrendingID, getWatchLater, getWatchLaterMovies} from "../redux/actions/actionGetTrendingID";
import Movie from "../model/Movie"; import Movie from "../model/Movie";
import Swipeable from "react-native-gesture-handler/Swipeable"; import Swipeable from "react-native-gesture-handler/Swipeable";
export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
export default function WatchLaterScreen({navigation}: RootTabScreenProps<'WatchLater'>) {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [filteredDataSource, setFilteredDataSource] = useState<Movie[]>([]); const [filteredDataSource, setFilteredDataSource] = useState<Movie[]>([]);
const [masterDataSource, setMasterDataSource] = useState([]); const [masterDataSource, setMasterDataSource] = useState([]);
@ -54,9 +55,9 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
loadWatchLater(); loadWatchLater();
}, [dispatch]); }, [dispatch]);
const searchFilterFunction = (text : string) => { const searchFilterFunction = (text: string) => {
if (text) { if (text) {
const newData = watchLaterMovies.filter(function (item : Movie) { const newData = watchLaterMovies.filter(function (item: Movie) {
const itemData = item.original_title const itemData = item.original_title
? item.original_title.toUpperCase() ? item.original_title.toUpperCase()
: ''.toUpperCase(); : ''.toUpperCase();
@ -72,30 +73,30 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
}; };
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} > <View style={{height: 50, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal: 20, marginBottom: 15, marginVertical: 5, alignItems: "flex-end"}}>
<FontAwesomeIcon icon={faClock} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" /> <FontAwesomeIcon icon={faClock} style={{marginBottom: -5, marginRight: 20}} size={50} color="white"/>
<Text style={{color: "white", fontSize:30}}>Watch Later</Text> <Text style={{color: "white", fontSize: 30}}>Watch Later</Text>
</View> </View>
<Image <Image
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"stretch"}} source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode: "stretch"}}
/> />
<View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}> <View style={{height: 40, width: 400, backgroundColor: "grey", borderRadius: 20, marginVertical: 10, alignSelf: "center"}}>
<TextInput style={{width:'100%', height:40, marginHorizontal:20}}onChangeText={(text) => searchFilterFunction(text)} <TextInput style={{width: '100%', height: 40, marginHorizontal: 20}} onChangeText={(text) => searchFilterFunction(text)}
value={search} value={search}
></TextInput> ></TextInput>
</View> </View>
<FlatList <FlatList
data={search.length !== 0? filteredDataSource: watchLaterMovies} data={search.length !== 0 ? filteredDataSource : watchLaterMovies}
keyExtractor={item => item.original_title} keyExtractor={item => item.original_title}
renderItem={({item}) => <ListWidget movie={item} ></ListWidget>} renderItem={({item}) => <ListWidget movie={item}></ListWidget>}
/> />
</SafeAreaView> </SafeAreaView>
); );
} }
type ListWidgetProps = { type ListWidgetProps = {
movie : Movie movie: Movie
} }
@ -105,8 +106,8 @@ export function ListWidget(props: ListWidgetProps) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
filmCard: { filmCard: {
width: 70, width: 90,
height: 100, height: 130,
borderRadius: 8, borderRadius: 8,
@ -120,48 +121,50 @@ export function ListWidget(props: ListWidgetProps) {
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`; return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
} }
return ( return (
<Swipeable>
<View style={{
height: 100,
borderRadius: 20,
justifyContent: "flex-start",
flexDirection: 'row',
paddingHorizontal: 20,
marginVertical: 5
}}>
<Image
style={styles.filmCard}
source={{
uri: props.movie.poster_path,
}}
/>
<View style={{ <View style={{
height: 100, height: 130,
width: "100%",
borderRadius: 20, borderRadius: 20,
justifyContent: "flex-start", justifyContent: "flex-start",
flexDirection: 'column', flexDirection: 'row',
paddingLeft: 10 marginHorizontal: 20,
marginBottom: 15
}}> }}>
<Text numberOfLines={1} style={{ <Image
color: "white", style={styles.filmCard}
fontWeight: "bold", source={{
fontSize: 25, uri: props.movie.poster_path,
paddingRight: 50 }}
}}>{props.movie.original_title}</Text> />
<Text style={{color: "grey", fontWeight: "bold", fontSize: 17}}>{formatTime(props.movie.runtime)}</Text> <View style={{
<View style={{marginVertical: 10}}> height: 130,
<FlatList horizontal width: "70%",
data={props.movie.genres} justifyContent: "center",
renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>} flexDirection: 'column',
/> paddingRight: 20,
paddingLeft: 20,
}}>
<Text numberOfLines={1} style={{
color: "white",
fontWeight: "700",
fontSize: 21,
}}>{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>
</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>
</View> </View>
</View> </View>
</View>
</Swipeable>
); );
} }

Loading…
Cancel
Save