Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Nolo 374 create the video consumption page (#42)
* Add and update dependencies * Change button component * Add video consumption screen * Link screen to app * Update dependencies * Adjust marginHorizontal in ConnectionScreen and TextInput components * Add margin to 'En savoir plus' button
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| /** | ||
| * @fileoverview Scan screen component | ||
| * @module ScanScreen | ||
| * @description Scan screen, it is the first screen that the user sees when opening the app. | ||
| * @requires react react-native | ||
| */ | ||
|
|
||
| import React from 'react' | ||
| import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native' | ||
| import YoutubeIframe from 'react-native-youtube-iframe' | ||
| import useVideoConsumptionViewController from './useVideoConsumptionViewController' | ||
| import { colors } from '../../global/colors' | ||
| import Button from '../../components/Button' | ||
| import TopBar from './Views/TopBar' | ||
|
|
||
| interface VideoConsumptionViewProps { | ||
| navigation: any | ||
| route: { | ||
| params: { | ||
| videoId: string | ||
| title: string | ||
| videoText: string | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @function ScanScreen | ||
| * @description Component that renders the Scan screen. | ||
| * @returns {React.JSX.Element} App component template | ||
| */ | ||
| export default function VideoConsumptionView({ navigation, route }: VideoConsumptionViewProps): React.JSX.Element { | ||
| const { videoId, title, videoWidth, videoHeight, videoText } = useVideoConsumptionViewController({ route }) | ||
|
|
||
| return ( | ||
| <SafeAreaView style={styles.container}> | ||
| <TopBar | ||
| title={title} | ||
| navigation={navigation} | ||
| /> | ||
| <View style={{ flex: 1 }}> | ||
| <YoutubeIframe | ||
| height={videoHeight} | ||
| width={videoWidth} | ||
| play | ||
| videoId={videoId} | ||
| webViewProps={{ | ||
| injectedJavaScript: ` | ||
| var element = document.getElementsByClassName('container')[0]; | ||
| element.style.position = 'unset'; | ||
| element.style.paddingBottom = 'unset'; | ||
| true; | ||
| `, | ||
| }} | ||
| /> | ||
| <ScrollView> | ||
| <Text style={styles.description}>{videoText}</Text> | ||
| </ScrollView> | ||
| <Button | ||
| text='En savoir +' | ||
| onPress={() => console.log(`En savoir + à propos de la vidéo ${videoId}`)} | ||
| textStyle={styles.buttonTextStyle} | ||
| containerStyle={styles.buttonStyle} | ||
| /> | ||
| </View> | ||
| </SafeAreaView> | ||
| ) | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| alignItems: 'center', | ||
| alignContent: 'center', | ||
| backgroundColor: colors.white, | ||
| justifyContent: 'center', | ||
| }, | ||
| description: { | ||
| flex: 1, | ||
| textAlign: 'center', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| width: '100%', | ||
| paddingHorizontal: 16, | ||
| paddingVertical: 12, | ||
| backgroundColor: colors.white, | ||
| fontFamily: 'Poppins', | ||
| fontWeight: '200', | ||
| fontSize: 14, | ||
| }, | ||
| buttonTextStyle: { | ||
| paddingHorizontal: 16, | ||
| }, | ||
| buttonStyle: { | ||
| alignSelf: 'center', | ||
| }, | ||
| }) | ||
Oops, something went wrong.