Lucas Delanier
2 years ago
parent
b80ad6d113
commit
f0154a514c
@ -0,0 +1,41 @@
|
|||||||
|
import {StyleSheet, Text, View} from "react-native";
|
||||||
|
import * as React from "react";
|
||||||
|
import Stars from "./StarsComponent";
|
||||||
|
import Movie from "../model/Movie";
|
||||||
|
|
||||||
|
type headerMovieProps = {
|
||||||
|
movie: Movie
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HeaderMovie(props: headerMovieProps) {
|
||||||
|
|
||||||
|
function formatTime(time: number) {
|
||||||
|
const hours = Math.floor(time / 60);
|
||||||
|
const minutes = time % 60;
|
||||||
|
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
circle: {
|
||||||
|
width: 6,
|
||||||
|
height: 6,
|
||||||
|
borderRadius: 100 / 2,
|
||||||
|
marginTop: 4,
|
||||||
|
backgroundColor: "lightgray",
|
||||||
|
marginHorizontal: 8
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (<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"}}>{props.movie.original_title}</Text>
|
||||||
|
<View style={{flexDirection: 'row', justifyContent: "center", alignItems: "center", alignSelf: "center"}}>
|
||||||
|
<Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${props.movie.release_date}`}</Text>
|
||||||
|
<View style={styles.circle}/>
|
||||||
|
<Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${props.movie.genres[0]} ${props.movie.genres[1] !== undefined ? ", " + props.movie.genres[1] : ""}`}</Text>
|
||||||
|
<View style={styles.circle}/>
|
||||||
|
<Text style={{color: "#D1D1D1", fontSize: 20, fontWeight: "normal", paddingTop: 5}}>{`${formatTime(props.movie.runtime)}`}</Text>
|
||||||
|
</View>
|
||||||
|
<Stars note={props.movie.vote_average} size={110}/>
|
||||||
|
</View>);
|
||||||
|
}
|
||||||
@ -0,0 +1,103 @@
|
|||||||
|
import Movie from "../model/Movie.js";
|
||||||
|
import {Image, StyleSheet, Text, View} from "react-native";
|
||||||
|
import {LinearGradient} from "expo-linear-gradient";
|
||||||
|
import Stars from "./StarsComponent";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
type MovieListProps = {
|
||||||
|
movie: Movie
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MovieListComponent(props: MovieListProps) {
|
||||||
|
function formatTime(time: number) {
|
||||||
|
const hours = Math.floor(time / 60);
|
||||||
|
const minutes = time % 60;
|
||||||
|
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
filmCard: {
|
||||||
|
width: 70,
|
||||||
|
height: 110,
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
height: 130,
|
||||||
|
|
||||||
|
borderRadius: 20,
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
flexDirection: 'row',
|
||||||
|
marginHorizontal: 10,
|
||||||
|
marginVertical: 7,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
backgroundColor: "#1D1D1D",
|
||||||
|
alignItems: "center",
|
||||||
|
borderWidth: 1.5,
|
||||||
|
borderColor: "#1F1F1F"
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
height: 130,
|
||||||
|
width: "85%",
|
||||||
|
justifyContent: "center",
|
||||||
|
flexDirection: 'column',
|
||||||
|
paddingRight: 20,
|
||||||
|
paddingLeft: 20,
|
||||||
|
},
|
||||||
|
h1: {
|
||||||
|
color: "white",
|
||||||
|
fontWeight: "700",
|
||||||
|
fontSize: 21,
|
||||||
|
},
|
||||||
|
infoSection: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
width: "100%"
|
||||||
|
},
|
||||||
|
top: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center"
|
||||||
|
},
|
||||||
|
h3: {
|
||||||
|
color: "grey",
|
||||||
|
fontWeight: "600"
|
||||||
|
},
|
||||||
|
vote: {
|
||||||
|
paddingLeft: 7,
|
||||||
|
color: "white",
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: 13
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<LinearGradient style={styles.body} start={{x: 0, y: 1}}
|
||||||
|
end={{x: 1, y: 1}}
|
||||||
|
// Button Linear Gradient
|
||||||
|
colors={['#0B0B0B', '#1F1F1F']}>
|
||||||
|
|
||||||
|
|
||||||
|
<Image
|
||||||
|
style={styles.filmCard}
|
||||||
|
source={{
|
||||||
|
uri: props.movie.poster_path_min,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text numberOfLines={1} style={styles.h1}>{props.movie.original_title}</Text>
|
||||||
|
<View style={styles.infoSection}>
|
||||||
|
<View style={styles.top}>
|
||||||
|
<Stars note={props.movie.vote_average} size={90}></Stars>
|
||||||
|
<Text style={styles.vote}>{props.movie.vote_average.toFixed(1)}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Text style={styles.h3}>{formatTime(props.movie.runtime)}</Text>
|
||||||
|
</View>
|
||||||
|
<Text numberOfLines={3} style={{color: "#C7C7C7", fontWeight: "600",}}>{props.movie.overview}</Text>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
</LinearGradient>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import {Image, View} from "react-native";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
|
||||||
|
type StarsProps = {
|
||||||
|
note: number
|
||||||
|
size: number
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Stars(props: StarsProps) {
|
||||||
|
let imageSource;
|
||||||
|
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 (note < 1.5)
|
||||||
|
imageSource = require('../assets/images/1.5stars_vote.png');
|
||||||
|
else if (note < 2)
|
||||||
|
imageSource = require('../assets/images/2stars_vote.png');
|
||||||
|
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 (note < 3.5)
|
||||||
|
imageSource = require('../assets/images/3.5stars_vote.png');
|
||||||
|
else if (note < 4)
|
||||||
|
imageSource = require('../assets/images/4stars_vote.png');
|
||||||
|
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 (
|
||||||
|
<View>
|
||||||
|
<Image source={imageSource} style={{
|
||||||
|
width: props.size,
|
||||||
|
height: 40,
|
||||||
|
resizeMode: 'contain'
|
||||||
|
}}/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Stars;
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import {Image, Text, View} from "react-native";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
type TimerProps = {
|
||||||
|
hours: number
|
||||||
|
minutes: number
|
||||||
|
seconds: number
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Timer(props: TimerProps) {
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
<Image source={require('../assets/images/timer_icon.png')} style={{
|
||||||
|
height: 30,
|
||||||
|
resizeMode: 'contain',
|
||||||
|
top: -5
|
||||||
|
}}></Image>
|
||||||
|
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${props.hours.toString().padStart(2, '0')}:`}</Text>
|
||||||
|
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${props.minutes.toString().padStart(2, '0')}:`}</Text>
|
||||||
|
<Text style={{color: "#FFF", fontSize: 16, fontWeight: "500"}}>{`${props.seconds.toString().padStart(2, '0')}`}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Timer2(props: TimerProps) {
|
||||||
|
return (
|
||||||
|
<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"}}>{`${props.hours.toString().padStart(2, '0')}:`}</Text>
|
||||||
|
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${props.minutes.toString().padStart(2, '0')}:`}</Text>
|
||||||
|
<Text style={{color: "black", fontSize: 16, fontWeight: "500"}}>{`${props.seconds.toString().padStart(2, '0')}`}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in new issue