aboutsummaryrefslogtreecommitdiff
path: root/src/components/moments/MomentPost.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/moments/MomentPost.tsx')
-rw-r--r--src/components/moments/MomentPost.tsx299
1 files changed, 141 insertions, 158 deletions
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 5dba5e69..843e049f 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -12,7 +12,10 @@ import {
TouchableWithoutFeedback,
View,
} from 'react-native';
+// @ts-ignore
+import Pinchable from 'react-native-pinchable';
import Animated, {EasingNode} from 'react-native-reanimated';
+import {SafeAreaView} from 'react-native-safe-area-context';
import Video from 'react-native-video';
import {useDispatch, useSelector, useStore} from 'react-redux';
import {TaggedUsersDrawer} from '.';
@@ -24,8 +27,6 @@ import {RootState} from '../../store/rootReducer';
import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
import {
getTimePosted,
- HeaderHeight,
- isIPhoneX,
navigateToProfile,
normalize,
SCREEN_HEIGHT,
@@ -60,7 +61,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
const isOwnProfile = user.username === loggedInUsername;
const [tags, setTags] = useState<MomentTagType[]>([]);
- const [visible, setVisible] = useState(false);
+ const [tagsVisible, setTagsVisible] = useState(false);
const [drawerVisible, setDrawerVisible] = useState(false);
const [taggedUsersVisible, setTaggedUsersVisible] = useState(false);
const [hideText, setHideText] = useState(false);
@@ -198,6 +199,35 @@ const MomentPost: React.FC<MomentPostProps> = ({
[user.username],
);
+ const momentMedia = isVideo ? (
+ <View ref={imageRef}>
+ <Video
+ ref={videoRef}
+ source={{
+ uri: moment.moment_url,
+ }}
+ volume={1}
+ style={{
+ height: mediaHeight,
+ }}
+ repeat={true}
+ onLoad={(response) => {
+ const {width, height} = response.naturalSize;
+ setAspectRatio(width / height);
+ }}
+ paused={moment.moment_id !== currentVisibleMomentId}
+ />
+ </View>
+ ) : (
+ <Image
+ source={{uri: moment.moment_url}}
+ style={{
+ height: mediaHeight,
+ }}
+ ref={imageRef}
+ />
+ );
+
return (
<>
<StatusBar barStyle={'light-content'} />
@@ -206,157 +236,114 @@ const MomentPost: React.FC<MomentPostProps> = ({
isOpen={taggedUsersVisible}
setIsOpen={setTaggedUsersVisible}
/>
- <View style={styles.mainContainer}>
- <View style={styles.imageContainer}>
- {isVideo ? (
- <View ref={imageRef}>
- <Video
- ref={videoRef}
- source={{
- uri: moment.moment_url,
- }}
- volume={1}
- style={[
- styles.media,
- {
- height: mediaHeight,
- },
- ]}
- repeat={true}
- resizeMode={'contain'}
- onLoad={(response) => {
- const {width, height} = response.naturalSize;
- setAspectRatio(width / height);
- }}
- paused={moment.moment_id !== currentVisibleMomentId}
- />
- </View>
- ) : (
- <Image
- source={{uri: moment.moment_url}}
- style={[
- styles.media,
- {
- height: mediaHeight,
- },
- ]}
- resizeMode={'contain'}
- ref={imageRef}
- />
- )}
- </View>
- {visible && (
- <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
- <MomentTags
- editing={false}
- tags={tags}
- setTags={() => null}
- imageRef={imageRef}
- />
- </Animated.View>
- )}
+ <SafeAreaView style={styles.moreInfoButton}>
+ <MomentMoreInfoDrawer
+ isOpen={drawerVisible}
+ setIsOpen={setDrawerVisible}
+ isOwnProfile={isOwnProfile}
+ momentTagId={momentTagId}
+ removeTag={removeTag}
+ dismissScreenAndUpdate={() => {
+ dispatch(loadUserMoments(loggedInUserId));
+ navigation.goBack();
+ }}
+ screenType={screenType}
+ moment={moment}
+ tags={tags}
+ />
+ </SafeAreaView>
+ <View style={styles.background}>
<TouchableWithoutFeedback
- disabled={isVideo}
onPress={() => {
- setVisible(!visible);
- setFadeValue(new Animated.Value(0));
- Keyboard.dismiss();
+ if (keyboardVisible) {
+ Keyboard.dismiss();
+ } else {
+ setTagsVisible(!tagsVisible);
+ setFadeValue(new Animated.Value(0));
+ }
}}>
- <View style={styles.contentContainer}>
- <View style={styles.topContainer}>
- <MomentMoreInfoDrawer
- isOpen={drawerVisible}
- setIsOpen={setDrawerVisible}
- isOwnProfile={isOwnProfile}
- momentTagId={momentTagId}
- removeTag={removeTag}
- dismissScreenAndUpdate={() => {
- dispatch(loadUserMoments(loggedInUserId));
- navigation.goBack();
- }}
+ <Pinchable>
+ <View style={styles.mediaContainer}>{momentMedia}</View>
+ {tagsVisible && !isVideo && (
+ <Animated.View
+ style={[styles.tagsContainer, {opacity: fadeValue}]}>
+ <MomentTags
+ editing={false}
+ tags={tags}
+ setTags={() => null}
+ imageRef={imageRef}
+ />
+ </Animated.View>
+ )}
+ </Pinchable>
+ </TouchableWithoutFeedback>
+ <View style={styles.bottomContainer} pointerEvents={'box-none'}>
+ <KeyboardAvoidingView
+ behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+ keyboardVerticalOffset={-20}>
+ {tags.length > 0 && !keyboardVisible && (
+ <TouchableOpacity
+ style={styles.tagIconContainer}
+ disabled={!isVideo}
+ onPress={() =>
+ setTaggedUsersVisible((prevState) => !prevState)
+ }>
+ <Image
+ source={require('../../assets/icons/tag_indicate.png')}
+ style={styles.tagIcon}
+ />
+ </TouchableOpacity>
+ )}
+ <View style={styles.commentsCountContainer}>
+ <CommentsCount
+ momentId={moment.moment_id}
+ count={commentCount}
screenType={screenType}
- moment={moment}
- tags={tags}
/>
</View>
- <KeyboardAvoidingView
- behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
- keyboardVerticalOffset={-20}>
- <View style={styles.bottomContainer}>
- {tags.length > 0 && (
- <TouchableOpacity
- disabled={!isVideo}
- onPress={() =>
- setTaggedUsersVisible((prevState) => !prevState)
- }>
- <Image
- source={require('../../assets/icons/tag_indicate.png')}
- style={styles.tagIcon}
- />
- </TouchableOpacity>
- )}
- <View style={styles.commentsCountContainer}>
- <CommentsCount
- momentId={moment.moment_id}
- count={commentCount}
- screenType={screenType}
- />
- </View>
- {momentPosterPreview}
- {!hideText && (
- <>
- {moment.caption !== '' &&
- renderTextWithMentions({
- value: moment.caption,
- styles: styles.captionText,
- partTypes: mentionPartTypes('white', 'caption'),
- onPress: (userLocal: UserType) =>
- navigateToProfile(
- state,
- dispatch,
- navigation,
- screenType,
- userLocal,
- ),
- })}
- </>
- )}
- <View>
- <AddComment
- placeholderText={'Add a comment here!'}
- momentId={moment.moment_id}
- callback={() => {
- setCommentCount(commentCount + 1);
- }}
- onFocus={() => {
- setHideText(true);
- }}
- isKeyboardAvoiding={false}
- theme={'dark'}
- />
- <Text style={styles.text}>
- {getTimePosted(moment.date_created)}
- </Text>
- </View>
- </View>
- </KeyboardAvoidingView>
- </View>
- </TouchableWithoutFeedback>
+ {momentPosterPreview}
+ {!hideText &&
+ moment.caption !== '' &&
+ renderTextWithMentions({
+ value: moment.caption,
+ styles: styles.captionText,
+ partTypes: mentionPartTypes('white', 'caption'),
+ onPress: (userLocal: UserType) =>
+ navigateToProfile(
+ state,
+ dispatch,
+ navigation,
+ screenType,
+ userLocal,
+ ),
+ })}
+ <AddComment
+ placeholderText={'Add a comment here!'}
+ momentId={moment.moment_id}
+ callback={() => {
+ setCommentCount(commentCount + 1);
+ }}
+ onFocus={() => {
+ setHideText(true);
+ }}
+ isKeyboardAvoiding={false}
+ theme={'dark'}
+ />
+ <Text style={styles.text}>
+ {getTimePosted(moment.date_created)}
+ </Text>
+ </KeyboardAvoidingView>
+ </View>
</View>
</>
);
};
const styles = StyleSheet.create({
- media: {
- zIndex: 0,
- },
- imageContainer: {
+ mediaContainer: {
height: SCREEN_HEIGHT,
width: SCREEN_WIDTH,
- flexDirection: 'column',
justifyContent: 'center',
- overflow: 'hidden',
},
text: {
marginHorizontal: '5%',
@@ -376,12 +363,16 @@ const styles = StyleSheet.create({
marginBottom: normalize(5),
width: SCREEN_WIDTH * 0.79,
},
- tagIcon: {
+ tagIconContainer: {
width: normalize(30),
height: normalize(30),
bottom: normalize(20),
left: '5%',
},
+ tagIcon: {
+ width: '100%',
+ height: '100%',
+ },
avatar: {
width: 48,
aspectRatio: 1,
@@ -411,37 +402,29 @@ const styles = StyleSheet.create({
right: '2%',
bottom: SCREEN_HEIGHT * 0.12,
},
- bottomContainer: {
- flexDirection: 'column',
- justifyContent: 'flex-end',
- },
- topContainer: {
- paddingTop: isIPhoneX() ? HeaderHeight : '6%',
- alignSelf: 'flex-end',
- paddingRight: '8%',
+ moreInfoButton: {
+ position: 'absolute',
+ zIndex: 999,
+ top: 5,
+ right: 25,
},
- contentContainer: {
+ bottomContainer: {
position: 'absolute',
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
flexDirection: 'column',
- justifyContent: 'space-between',
+ justifyContent: 'flex-end',
paddingBottom: '24%',
},
tagsContainer: {
position: 'absolute',
- top: 0,
- bottom: 0,
- left: 0,
- right: 0,
- marginBottom: '3%',
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
},
- mainContainer: {
+ background: {
backgroundColor: 'black',
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
- flexDirection: 'column',
- justifyContent: 'center',
},
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:12:19 +0000