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