diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/moments/IndividualMomentTitleBar.tsx | 53 | ||||
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 52 | ||||
| -rw-r--r-- | src/components/moments/index.ts | 1 |
3 files changed, 26 insertions, 80 deletions
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx deleted file mode 100644 index c6bf1423..00000000 --- a/src/components/moments/IndividualMomentTitleBar.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import {StyleSheet, Text, View, ViewProps} from 'react-native'; -import {normalize, SCREEN_WIDTH} from '../../utils'; - -interface IndividualMomentTitleBarProps extends ViewProps { - title: string; -} -const IndividualMomentTitleBar: React.FC<IndividualMomentTitleBarProps> = ({ - title, -}) => { - return ( - <View style={styles.mainContainer}> - <View style={styles.titleContainer}> - <Text - style={[ - styles.title, - { - fontSize: title.length > 18 ? normalize(14) : normalize(16), - }, - ]}> - {title} - </Text> - </View> - </View> - ); -}; - -const styles = StyleSheet.create({ - title: { - textAlign: 'center', - color: 'white', - fontSize: normalize(18), - fontWeight: '700', - lineHeight: normalize(21.48), - letterSpacing: normalize(1.3), - }, - titleContainer: { - width: '80%', - position: 'absolute', - left: '10%', - right: '10%', - height: normalize(70), - }, - mainContainer: { - flex: 1, - width: SCREEN_WIDTH * 0.6, - flexDirection: 'row', - justifyContent: 'flex-end', - marginVertical: '2%', - }, -}); - -export default IndividualMomentTitleBar; diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 921f7693..939c0cf6 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,4 +1,4 @@ -import {useNavigation} from '@react-navigation/native'; +import {useIsFocused, useNavigation} from '@react-navigation/native'; import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; import { Image, @@ -25,8 +25,7 @@ import Video from 'react-native-video'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TaggedUsersDrawer} from '.'; import PauseIcon from '../../assets/icons/pause-icon.svg'; -import {TAGG_PURPLE} from '../../constants/constants'; -import {headerBarOptions} from '../../routes'; +import {headerBarOptions, multilineHeaderTitle} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {loadUserMoments} from '../../store/actions'; @@ -43,7 +42,6 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import CommentsCount from '../comments/CommentsCount'; import {GradientProgressBar, MomentTags} from '../common'; import {MomentMoreInfoDrawer, TaggAvatar} from '../profile'; -import IndividualMomentTitleBar from './IndividualMomentTitleBar'; interface MomentPostProps { moment: MomentPostType; userXId: string | undefined; @@ -93,7 +91,14 @@ const MomentPost: React.FC<MomentPostProps> = ({ ); const mediaHeight = SCREEN_WIDTH / aspectRatio; const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false); + const screenIsFocused = useIsFocused(); const videoProgress = useSharedValue(0); + + // update play/pause icon based on video pause state + useEffect(() => { + setFadeValue(new Animated.Value(isVideoPaused ? 1 : 0)); + }, [isVideoPaused]); + /* * Load tags on initial render to pass tags data to moment header and content */ @@ -131,16 +136,18 @@ const MomentPost: React.FC<MomentPostProps> = ({ } }; - useEffect( - () => + useEffect(() => { + if (moment.moment_category.length > 20) { navigation.setOptions({ ...headerBarOptions('white', ''), - headerTitle: () => ( - <IndividualMomentTitleBar title={moment.moment_category} /> - ), - }), - [moment.moment_id], - ); + ...multilineHeaderTitle(moment.moment_category), + }); + } else { + navigation.setOptions({ + ...headerBarOptions('white', moment.moment_category), + }); + } + }, [moment.moment_id]); /* * Determines if an image is 9:16 to set aspect ratio of current image and @@ -228,7 +235,11 @@ const MomentPost: React.FC<MomentPostProps> = ({ const {width, height} = response.naturalSize; setAspectRatio(width / height); }} - paused={moment.moment_id !== currentVisibleMomentId || isVideoPaused} + paused={ + moment.moment_id !== currentVisibleMomentId || + isVideoPaused || + !screenIsFocused + } onProgress={({currentTime, seekableDuration}) => { const localProgress = currentTime / seekableDuration; if (!isNaN(localProgress)) { @@ -294,9 +305,6 @@ const MomentPost: React.FC<MomentPostProps> = ({ onPress={() => { if (isVideo) { setIsVideoPaused(!isVideoPaused); - isVideoPaused - ? setFadeValue(new Animated.Value(0)) - : setFadeValue(new Animated.Value(1)); } else { setTagsVisible(!tagsVisible); setFadeValue(new Animated.Value(0)); @@ -493,17 +501,9 @@ const styles = StyleSheet.create({ height: 3, marginHorizontal: 2, }, - progressDot: { - backgroundColor: '#fff', - width: 10, - height: 10, - borderRadius: 10, - borderWidth: 0.3, - borderColor: TAGG_PURPLE, - position: 'absolute', - top: -2.5, + profilePreviewContainer: { + paddingHorizontal: '3%', }, - profilePreviewContainer: {paddingHorizontal: '3%'}, }); export default MomentPost; diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts index 3f33ec53..4c1c509e 100644 --- a/src/components/moments/index.ts +++ b/src/components/moments/index.ts @@ -1,4 +1,3 @@ -export {default as IndividualMomentTitleBar} from './IndividualMomentTitleBar'; export {default as CaptionScreenHeader} from './CaptionScreenHeader'; export {default as Moment} from './Moment'; export {default as TagFriendsFooter} from './TagFriendsFoooter'; |