diff options
Diffstat (limited to 'src/screens/moments/TagFriendsScreen.tsx')
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 195 |
1 files changed, 101 insertions, 94 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 15926b5a..201caf49 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -1,16 +1,9 @@ import {RouteProp} from '@react-navigation/core'; import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useRef, useState} from 'react'; -import { - Image, - Keyboard, - KeyboardAvoidingView, - Platform, - StyleSheet, - TouchableWithoutFeedback, - View, -} from 'react-native'; +import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native'; import {Button} from 'react-native-elements'; +import Video from 'react-native-video'; import {MainStackParams} from 'src/routes'; import { CaptionScreenHeader, @@ -30,7 +23,7 @@ interface TagFriendsScreenProps { route: TagFriendsScreenRouteProps; } const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { - const {imagePath, selectedTags} = route.params; + const {media, selectedTags} = route.params; const navigation = useNavigation(); const imageRef = useRef(null); const [tags, setTags] = useState<MomentTagType[]>([]); @@ -54,26 +47,30 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { }); }; + const setMediaDimensions = (width: number, height: number) => { + const imageAspectRatio = width / height; + + // aspectRatio: >= 1 [Landscape] [1:1] + if (imageAspectRatio >= 1) { + setImageWidth(SCREEN_WIDTH); + setImageHeight(SCREEN_WIDTH / imageAspectRatio); + } + // aspectRatio: < 1 [Portrait] + if (imageAspectRatio < 1) { + setImageHeight(SCREEN_WIDTH); + setImageWidth(SCREEN_WIDTH * imageAspectRatio); + } + }; + /* - * Calculating image width and height with respect to it's enclosing view's dimensions + * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images. */ useEffect(() => { - if (imageRef && imageRef.current) { + if (imageRef && imageRef.current && !media.isVideo) { Image.getSize( - imagePath, + media.uri, (w, h) => { - const imageAspectRatio = w / h; - - // aspectRatio: >= 1 [Landscape] [1:1] - if (imageAspectRatio >= 1) { - setImageWidth(SCREEN_WIDTH); - setImageHeight(SCREEN_WIDTH / imageAspectRatio); - } - // aspectRatio: < 1 [Portrait] - else if (imageAspectRatio < 1) { - setImageHeight(SCREEN_WIDTH); - setImageWidth(SCREEN_WIDTH * imageAspectRatio); - } + setMediaDimensions(w, h); }, (err) => console.log(err), ); @@ -82,65 +79,85 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { return ( <SearchBackground> - <TouchableWithoutFeedback onPress={Keyboard.dismiss}> - <KeyboardAvoidingView - behavior={Platform.OS === 'ios' ? 'padding' : 'height'} - style={styles.flex}> - <View style={styles.contentContainer}> - <View style={styles.buttonsContainer}> - <Button - title="Cancel" - buttonStyle={styles.button} - onPress={() => navigation.goBack()} - /> - <Button - title="Done" - titleStyle={styles.shareButtonTitle} - buttonStyle={styles.button} - onPress={handleDone} + <View style={styles.contentContainer}> + <View style={styles.buttonsContainer}> + <Button + title="Cancel" + buttonStyle={styles.button} + onPress={() => navigation.goBack()} + /> + <Button + title="Done" + titleStyle={styles.shareButtonTitle} + buttonStyle={styles.button} + onPress={handleDone} + /> + </View> + <CaptionScreenHeader + style={styles.header} + title={'Tap on photo to tag friends!'} + /> + <TouchableWithoutFeedback + onPress={() => + navigation.navigate('TagSelectionScreen', { + selectedTags: tags, + }) + }> + {media.isVideo ? ( + <View + style={{ + width: imageWidth, + height: imageHeight, + marginVertical: (SCREEN_WIDTH - imageHeight) / 2, + marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, + }} + ref={imageRef}> + <Video + style={{ + width: imageWidth, + height: imageHeight, + }} + source={{uri: media.uri}} + repeat={true} + onLoad={(response) => { + const {width, height, orientation} = response.naturalSize; + // portrait will flip width and height + if (orientation === 'portrait') { + setMediaDimensions(height, width); + } else { + setMediaDimensions(width, height); + } + }} /> </View> - <CaptionScreenHeader - style={styles.header} - title={'Tap on photo to tag friends!'} + ) : ( + <Image + ref={imageRef} + style={{ + width: imageWidth, + height: imageHeight, + marginVertical: (SCREEN_WIDTH - imageHeight) / 2, + marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, + }} + source={{uri: media.uri}} /> - <TouchableWithoutFeedback - onPress={() => - navigation.navigate('TagSelectionScreen', { - selectedTags: tags, - }) - }> - <Image - ref={imageRef} - style={[ - { - width: imageWidth, - height: imageHeight, - marginVertical: (SCREEN_WIDTH - imageHeight) / 2, - marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2, - }, - styles.image, - ]} - source={{uri: imagePath}} - /> - </TouchableWithoutFeedback> - {tags.length !== 0 && ( - <MomentTags - tags={tags} - setTags={setTags} - editing={true} - imageRef={imageRef} - deleteFromList={(user) => - setTags(tags.filter((tag) => tag.user.id !== user.id)) - } - /> - )} - <View style={styles.footerContainer}> - <TagFriendsFooter tags={tags} setTags={setTags} /> - </View> - </View> - </KeyboardAvoidingView> - </TouchableWithoutFeedback> + )} + </TouchableWithoutFeedback> + {tags.length !== 0 && ( + <MomentTags + tags={tags} + setTags={setTags} + editing={true} + imageRef={imageRef} + deleteFromList={(user) => + setTags(tags.filter((tag) => tag.user.id !== user.id)) + } + /> + )} + <View style={styles.footerContainer}> + <TagFriendsFooter tags={tags} setTags={setTags} /> + </View> + </View> </SearchBackground> ); }; @@ -148,7 +165,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { const styles = StyleSheet.create({ contentContainer: { paddingTop: StatusBarHeight, - justifyContent: 'flex-end', }, buttonsContainer: { flexDirection: 'row', @@ -166,19 +182,10 @@ const styles = StyleSheet.create({ header: { marginVertical: 20, }, - image: {zIndex: 0, justifyContent: 'center', alignSelf: 'center'}, - text: { - position: 'relative', - backgroundColor: 'white', - width: '100%', - paddingHorizontal: '2%', - paddingVertical: '1%', - height: 60, - }, - flex: { - flex: 1, + footerContainer: { + marginHorizontal: '5%', + marginTop: '3%', }, - footerContainer: {marginHorizontal: '5%', marginTop: '3%'}, }); export default TagFriendsScreen; |