diff --git a/App.tsx b/App.tsx index b5d8073..d0bbc1e 100644 --- a/App.tsx +++ b/App.tsx @@ -1,5 +1,5 @@ -import { StatusBar } from 'expo-status-bar'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; +import {StatusBar} from 'expo-status-bar'; +import {SafeAreaProvider} from 'react-native-safe-area-context'; import useCachedResources from './hooks/useCachedResources'; import useColorScheme from './hooks/useColorScheme'; import Navigation from './navigation'; @@ -7,21 +7,22 @@ import {View} from "react-native"; import store from "./redux/store"; import {Provider} from "react-redux"; + export default function App() { - const isLoadingComplete = useCachedResources(); - const colorScheme = useColorScheme(); + const isLoadingComplete = useCachedResources(); + const colorScheme = useColorScheme(); - if (!isLoadingComplete) { - return null; - } else { - return ( - - - - - - - ); - } + if (!isLoadingComplete) { + return null; + } else { + return ( + + + + + + + ); + } } diff --git a/assets/images/0.5stars_vote.png b/assets/images/0.5stars_vote.png new file mode 100644 index 0000000..4a3825c Binary files /dev/null and b/assets/images/0.5stars_vote.png differ diff --git a/assets/images/1.5stars_vote.png b/assets/images/1.5stars_vote.png new file mode 100644 index 0000000..643d17c Binary files /dev/null and b/assets/images/1.5stars_vote.png differ diff --git a/assets/images/2.5stars_vote.png b/assets/images/2.5stars_vote.png new file mode 100644 index 0000000..2e55d9f Binary files /dev/null and b/assets/images/2.5stars_vote.png differ diff --git a/assets/images/3.5stars_vote.png b/assets/images/3.5stars_vote.png new file mode 100644 index 0000000..58ec2fc Binary files /dev/null and b/assets/images/3.5stars_vote.png differ diff --git a/assets/images/4.5stars_vote.png b/assets/images/4.5stars_vote.png new file mode 100644 index 0000000..1d44408 Binary files /dev/null and b/assets/images/4.5stars_vote.png differ diff --git a/assets/images/background.png b/assets/images/background.png new file mode 100644 index 0000000..5c51907 Binary files /dev/null and b/assets/images/background.png differ diff --git a/assets/images/confetti.gif b/assets/images/confetti.gif new file mode 100644 index 0000000..1722472 Binary files /dev/null and b/assets/images/confetti.gif differ diff --git a/assets/images/timer_icon2.png b/assets/images/timer_icon2.png new file mode 100644 index 0000000..4ecfe3f Binary files /dev/null and b/assets/images/timer_icon2.png differ diff --git a/babel.config.js b/babel.config.js index baac9e5..c0c6379 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,9 @@ -module.exports = function(api) { - api.cache(true); - return { - presets: ['babel-preset-expo'] - }; -}; +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + plugins: [ + 'react-native-reanimated/plugin', + ] + }; +}; \ No newline at end of file diff --git a/navigation/index.tsx b/navigation/index.tsx index be176d1..02c0b87 100644 --- a/navigation/index.tsx +++ b/navigation/index.tsx @@ -11,7 +11,7 @@ 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 {Appearance, ColorSchemeName, Pressable} from 'react-native'; import Colors from '../constants/Colors'; import useColorScheme from '../hooks/useColorScheme'; @@ -57,13 +57,14 @@ function RootNavigator() { const BottomTab = createBottomTabNavigator(); function BottomTabNavigator() { - const colorScheme = useColorScheme(); + let colorScheme = useColorScheme(); + const isLightTheme = colorScheme === "light" return ( =6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-object-super": { "version": "7.18.6", "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" } }, + "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": { "version": "2.0.4", "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", "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": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", @@ -14837,6 +14862,17 @@ "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": { "version": "0.70.6", "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.70.6.tgz", @@ -14887,6 +14923,25 @@ "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": { "version": "4.4.1", "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": "*" } }, - "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": { "version": "0.18.12", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz", @@ -16591,6 +16634,11 @@ "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": { "version": "4.0.2", "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/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": { "version": "7.18.6", "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" } }, + "@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": { "version": "2.0.4", "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", "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": { "version": "4.1.1", "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": { "version": "0.70.6", "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==", "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": { "version": "4.4.1", "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" } }, - "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": { "version": "0.18.12", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.12.tgz", @@ -30467,6 +30545,11 @@ "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": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/package.json b/package.json index edf21e9..4aa0283 100644 --- a/package.json +++ b/package.json @@ -39,13 +39,14 @@ "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", + "react-native-cards-swipe": "^1.2.1", "react-native-gesture-handler": "^2.9.0", "react-native-ionicons": "^4.6.5", "react-native-linear-gradient": "^2.6.2", + "react-native-reanimated": "~2.12.0", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", "react-native-svg": "^13.7.0", - "react-native-swipeable": "^0.6.0", "react-native-web": "~0.18.9", "react-redux": "^8.0.5", "redux": "^4.2.1", diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index 6a92dfa..9f07f7a 100644 --- a/screens/HomeScreen.tsx +++ b/screens/HomeScreen.tsx @@ -9,7 +9,7 @@ import { Image, ImageBackground, SafeAreaView, - ActivityIndicator, FlatList, Animated, Easing + ActivityIndicator, FlatList } from 'react-native'; import {RootStackScreenProps} from "../types"; import {useEffect, useRef, useState} from "react"; @@ -19,6 +19,8 @@ import {useDispatch, useSelector} from 'react-redux'; import Movie from "../model/Movie"; import * as url from "url"; import moment from 'moment'; +import CardsSwipe from 'react-native-cards-swipe'; + export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { // @ts-ignore @@ -28,6 +30,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { const [hours, setHours] = useState(0); const [minutes, setMinutes] = useState(0); const [seconds, setSeconds] = useState(0); + const [displayIndex, setdisplayIndex] = useState(0); //console.log("liste [0]: ", trendingMovies[0]); @@ -35,24 +38,28 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { const insets = useSafeAreaInsets(); const styles = StyleSheet.create({ - background: { + background1: { backgroundColor: 'black', height: '100%', width: '100%', paddingTop: insets.top, }, + background2: { + height: '100%', + width: '100%', + paddingTop: insets.top, + }, container: { flex: 1, }, filmCard: { width: '85%', - height: '68%', justifyContent: 'center', marginLeft: 'auto', marginRight: 'auto', borderRadius: 22, - marginTop: 15, + flex: 0.80, alignItems: 'center', shadowColor: "#000", shadowOffset: { @@ -64,6 +71,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { alignSelf: 'center', elevation: 13, + zIndex: 15 }, backgroundImage: { @@ -83,6 +91,7 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { marginHorizontal: 8 }, + }); @@ -93,13 +102,10 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { 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(); @@ -143,58 +149,103 @@ export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) { } 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`; } - let rotateValueHolder = new Animated.Value(0); - return ( + <> - {trendingMovies.length !== 0 && ( - + + {trendingMovies[displayIndex] !== undefined && ( + + - - {trendingMovies[0].original_title} + + {trendingMovies[displayIndex].original_title} - {`${trendingMovies[0].release_date}`} + {`${trendingMovies[displayIndex].release_date}`} - {`${trendingMovies[0].genres[0]}, ${trendingMovies[0].genres[1]}`} + {`${trendingMovies[displayIndex].genres[0]} ${trendingMovies[displayIndex].genres[1] !== undefined ? ", " + trendingMovies[0].genres[1] : ""}`} - {`${formatTime(trendingMovies[0].runtime)}`} + {`${formatTime(trendingMovies[displayIndex].runtime)}`} - + - { + 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) => ( + )} /> - - addWatchLater(trendingMovies[0])}> + + + + { + + addWatchLater(trendingMovies[0]); + + + }}> popFirstTrending(trendingMovies[0])}> - { + popFirstTrending(trendingMovies[0]); + }}> + ) { - + Nouvelle collection dans ) { )} + {trendingMovies[displayIndex] === undefined && ( + + + Félicitations ! + + Vous avez fini la collection du jour. + {"\n"}Revenez à la fin du décompte pour découvrir de nouvelles propositions. + + + Nouvelle collection dans + + + {`${hours.toString().padStart(2, '0')}:`} + {`${minutes.toString().padStart(2, '0')}:`} + {`${seconds.toString().padStart(2, '0')}`} + + + + + ) + + } + ) } type BadgeGenreProps = { @@ -277,31 +358,42 @@ export function BadgeFilm(props: BadgeFilmProps) { type StarsProps = { note: number + size: number } export function Stars(props: StarsProps) { - console.log("note", props.note) let imageSource; - - if (props.note < 2) + let note = 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'); - 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'); - 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'); - 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'); - 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'); return ( ); }; + diff --git a/screens/WatchLaterScreen.tsx b/screens/WatchLaterScreen.tsx index 0f63b5a..3241c22 100644 --- a/screens/WatchLaterScreen.tsx +++ b/screens/WatchLaterScreen.tsx @@ -1,17 +1,18 @@ import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput, TouchableHighlight} from 'react-native'; import * as React from "react"; -import {BadgeFilm} from "./HomeScreen"; -import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; -import { faClock} from "@fortawesome/free-solid-svg-icons"; +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 {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"; -export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) { + +export default function WatchLaterScreen({navigation}: RootTabScreenProps<'WatchLater'>) { const [search, setSearch] = useState(''); const [filteredDataSource, setFilteredDataSource] = useState([]); const [masterDataSource, setMasterDataSource] = useState([]); @@ -54,9 +55,9 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat loadWatchLater(); }, [dispatch]); - const searchFilterFunction = (text : string) => { + const searchFilterFunction = (text: string) => { if (text) { - const newData = watchLaterMovies.filter(function (item : Movie) { + const newData = watchLaterMovies.filter(function (item: Movie) { const itemData = item.original_title ? item.original_title.toUpperCase() : ''.toUpperCase(); @@ -72,30 +73,30 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat }; return ( - - - - Watch Later - - - - - searchFilterFunction(text)} - value={search} - > - - item.original_title} - renderItem={({item}) => } - /> - + + + + Watch Later + + + + + searchFilterFunction(text)} + value={search} + > + + item.original_title} + renderItem={({item}) => } + /> + ); } type ListWidgetProps = { - movie : Movie + movie: Movie } @@ -105,8 +106,8 @@ export function ListWidget(props: ListWidgetProps) { const styles = StyleSheet.create({ filmCard: { - width: 70, - height: 100, + width: 90, + height: 130, borderRadius: 8, @@ -120,48 +121,50 @@ export function ListWidget(props: ListWidgetProps) { return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`; } -return ( - - - + return ( - {props.movie.original_title} - {formatTime(props.movie.runtime)} - - } - /> + + + {props.movie.original_title} + + + + {props.movie.vote_average.toFixed(1)} + + + {formatTime(props.movie.runtime)} + + {props.movie.overview} + - - - ); + ); }