forked from lucas.delanier/MovieFinder
Lucas Delanier
2 years ago
parent
2530644edf
commit
46a85f06e3
@ -0,0 +1,5 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/MoovieFinderTS.iml" filepath="$PROJECT_DIR$/.idea/MoovieFinderTS.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
@ -0,0 +1,88 @@
|
||||
import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} from 'react-native';
|
||||
import * as React from "react";
|
||||
import {BadgeFilm} from "./HomeScreen";
|
||||
import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
|
||||
import { faHeart} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
|
||||
export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favorite'>) {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
|
||||
<FontAwesomeIcon icon={faHeart} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" />
|
||||
<Text style={{color: "white", fontSize:30}}>Favorite</Text>
|
||||
</View>
|
||||
<Image
|
||||
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"fit"}}
|
||||
/>
|
||||
<View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
|
||||
<TextInput style={{width:300, height:40, marginHorizontal:20}} ></TextInput>
|
||||
</View>
|
||||
<FlatList
|
||||
data={[
|
||||
{key: 'Devin'},
|
||||
{key: 'Dan'},
|
||||
{key: 'Dominic'},
|
||||
{key: 'Jackson'},
|
||||
{key: 'James'},
|
||||
{key: 'Joel'},
|
||||
{key: 'John'},
|
||||
{key: 'Jillian'},
|
||||
{key: 'Jimmy'},
|
||||
{key: 'Julie'},
|
||||
]}
|
||||
renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingTop: 22,
|
||||
backgroundColor: "#232323"
|
||||
},
|
||||
item: {
|
||||
padding: 10,
|
||||
fontSize: 18,
|
||||
height: 44,
|
||||
color: "white"
|
||||
},
|
||||
filmCard: {
|
||||
width: 70,
|
||||
height: 100,
|
||||
borderRadius: 8,
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
type ListWidgetProps = {
|
||||
name : String
|
||||
|
||||
}
|
||||
|
||||
export function ListWidget(props: ListWidgetProps) {
|
||||
return (
|
||||
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
|
||||
<Image
|
||||
style={styles.filmCard}
|
||||
source={{
|
||||
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||
}}
|
||||
/>
|
||||
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
|
||||
<Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
|
||||
<Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
|
||||
<View style={{marginVertical:10}}>
|
||||
<BadgeFilm name={"Science-Ficton"}/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,172 @@
|
||||
import * as React from 'react';
|
||||
import {Button,TouchableOpacity,ScrollView,View, Text, StyleSheet, Image, ImageBackground, SafeAreaView} from 'react-native';
|
||||
import {RootStackScreenProps} from "../types.js";
|
||||
import Rive from 'rive-react-native';
|
||||
import {useRef} from "react";
|
||||
import {RiveViewManager} from "rive-react-native/lib/typescript/Rive.js";
|
||||
const styles = StyleSheet.create({
|
||||
background: {
|
||||
backgroundColor: 'black',
|
||||
height: '100%',
|
||||
},
|
||||
|
||||
container:{
|
||||
flex: 1,
|
||||
},
|
||||
filmCard: {
|
||||
width: 310,
|
||||
height: 450,
|
||||
justifyContent:'center',
|
||||
marginLeft:'auto',
|
||||
marginRight:'auto',
|
||||
borderRadius: 15,
|
||||
|
||||
|
||||
},
|
||||
image: {
|
||||
position: 'absolute',
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 6,
|
||||
},
|
||||
shadowOpacity: 0.39,
|
||||
shadowRadius: 8.30,
|
||||
flex: 1,
|
||||
paddingTop: 230,
|
||||
alignSelf: 'center',
|
||||
elevation: 13,
|
||||
},
|
||||
backgroundImage: {
|
||||
flex: 1,
|
||||
resizeMode: 'cover', // or 'stretch'
|
||||
},
|
||||
child: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default function App({ navigation }: RootStackScreenProps<'Home'>) {
|
||||
const riveRef = useRef();
|
||||
return (
|
||||
<SafeAreaView style={styles.background}>
|
||||
|
||||
<ImageBackground blurRadius={20}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: "120%",
|
||||
height: "120%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
opacity: 0.28
|
||||
}}
|
||||
source={{
|
||||
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||
}}
|
||||
></ImageBackground>
|
||||
<View style={styles.image}>
|
||||
<Image
|
||||
style={styles.filmCard}
|
||||
source={{
|
||||
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={{height:35, marginTop: 10, marginBottom: 15}}>
|
||||
<ScrollView
|
||||
horizontal={true}
|
||||
showsHorizontalScrollIndicator={false}>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={true}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||
|
||||
|
||||
|
||||
</ScrollView>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
|
||||
|
||||
<View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
|
||||
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
|
||||
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
|
||||
<BadgeFilm name={"9:11"}></BadgeFilm>
|
||||
</View>
|
||||
<View>
|
||||
<Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>SPIDER-MAN No Way Home</Text>
|
||||
</View>
|
||||
<Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>Jean-Marc généreux</Text>
|
||||
</View>
|
||||
<View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: 130}}>
|
||||
<TouchableOpacity>
|
||||
<Image
|
||||
source={require('../assets/images/WatchLater.png')} style={{height: 70, width: 70, resizeMode:"fit"}}
|
||||
/>
|
||||
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity>
|
||||
<Image
|
||||
source={require('../assets/images/Generate.png')} style={{height: 90, width: 90, resizeMode:"fit"}}
|
||||
/>
|
||||
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity>
|
||||
<Image
|
||||
source={require('../assets/images/Favorite.png')} style={{height: 70, width: 70, resizeMode:"fit"}}
|
||||
/>
|
||||
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
type BadgeGenreProps = {
|
||||
name : String
|
||||
isSelected: Boolean
|
||||
|
||||
}
|
||||
|
||||
export function BadgeGenre(props: BadgeGenreProps) {
|
||||
if(props.isSelected==false){
|
||||
return (
|
||||
<View style={{paddingHorizontal: 20, marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
|
||||
<Text style={{color: "white"}}>{props.name}</Text>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
else{
|
||||
return (
|
||||
<View style={{paddingHorizontal: 20, marginHorizontal: 5,height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white" ,justifyContent: "center"}} >
|
||||
<Text style={{color: "white"}}>{props.name}</Text>
|
||||
</View>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
type BadgeFilmProps = {
|
||||
name : String
|
||||
|
||||
}
|
||||
export function BadgeFilm(props: BadgeFilmProps) {
|
||||
|
||||
return (
|
||||
<View style={{paddingHorizontal: 15, marginHorizontal: 5,height: 30, backgroundColor: '#8906B8', borderRadius: 15, justifyContent: "center"}} >
|
||||
<Text style={{color: "white", fontSize: 12, fontWeight:"bold"}}>{props.name}</Text>
|
||||
</View>
|
||||
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { Platform, StyleSheet } from 'react-native';
|
||||
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View } from '../components/Themed';
|
||||
|
||||
export default function ModalScreen() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Modal</Text>
|
||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||||
<EditScreenInfo path="/screens/ModalScreen.tsx" />
|
||||
|
||||
{/* Use a light status bar on iOS to account for the black space above the modal */}
|
||||
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: '80%',
|
||||
},
|
||||
});
|
||||
@ -1,32 +0,0 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View } from '../components/Themed';
|
||||
import { RootTabScreenProps } from '../types';
|
||||
|
||||
export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Tab One</Text>
|
||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||||
<EditScreenInfo path="/screens/TabOneScreen.tsx" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: '80%',
|
||||
},
|
||||
});
|
||||
@ -1,31 +0,0 @@
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View } from '../components/Themed';
|
||||
|
||||
export default function TabTwoScreen() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Tab Two</Text>
|
||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
||||
<EditScreenInfo path="/screens/TabTwoScreen.tsx" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
separator: {
|
||||
marginVertical: 30,
|
||||
height: 1,
|
||||
width: '80%',
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,95 @@
|
||||
import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} 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 LinearGradient from 'react-native-linear-gradient';
|
||||
|
||||
export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<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" />
|
||||
|
||||
<Text style={{color: "white", fontSize:30}}>Watch Later</Text>
|
||||
</View>
|
||||
<Image
|
||||
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"fit"}}
|
||||
/>
|
||||
<View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
|
||||
<TextInput style={{width:300, height:40, marginHorizontal:20}} ></TextInput>
|
||||
</View>
|
||||
<FlatList
|
||||
data={[
|
||||
{key: 'Devin'},
|
||||
{key: 'Dan'},
|
||||
{key: 'Dominic'},
|
||||
{key: 'Jackson'},
|
||||
{key: 'James'},
|
||||
{key: 'Joel'},
|
||||
{key: 'John'},
|
||||
{key: 'Jillian'},
|
||||
{key: 'Jimmy'},
|
||||
{key: 'Julie'},
|
||||
]}
|
||||
renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingTop: 22,
|
||||
backgroundColor: "#232323"
|
||||
},
|
||||
linearGradient: {
|
||||
flex: 1,
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
borderRadius: 5
|
||||
},
|
||||
item: {
|
||||
padding: 10,
|
||||
fontSize: 18,
|
||||
height: 44,
|
||||
color: "white"
|
||||
},
|
||||
filmCard: {
|
||||
width: 70,
|
||||
height: 100,
|
||||
borderRadius: 8,
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
type ListWidgetProps = {
|
||||
name : String
|
||||
|
||||
}
|
||||
|
||||
export function ListWidget(props: ListWidgetProps) {
|
||||
return (
|
||||
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
|
||||
<Image
|
||||
style={styles.filmCard}
|
||||
source={{
|
||||
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||
}}
|
||||
/>
|
||||
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
|
||||
<Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
|
||||
<Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
|
||||
<View style={{marginVertical:10}}>
|
||||
<BadgeFilm name={"Science-Ficton"}/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue