diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/assets/icons/pause-icon.svg | 1 | ||||
| -rw-r--r-- | src/components/moments/MomentPost.tsx | 110 |
2 files changed, 91 insertions, 20 deletions
diff --git a/src/assets/icons/pause-icon.svg b/src/assets/icons/pause-icon.svg new file mode 100644 index 00000000..40dab3a8 --- /dev/null +++ b/src/assets/icons/pause-icon.svg @@ -0,0 +1 @@ +<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 720"><defs><style>.cls-1{fill:#fff;fill-opacity:0.6;}</style></defs><path class="cls-1" d="M87.16,682.07V43.63c0-39.91,49.45-53.87,78.3-35.92L614.64,324.94c33,30.33,13.74,63.18,0,75.81L173.7,710C121,737.13,94,702.68,87.16,682.07Z"/></svg>
\ No newline at end of file diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 0504052b..c232986d 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -16,9 +16,12 @@ import { import Pinchable from 'react-native-pinchable'; import Animated, {EasingNode} from 'react-native-reanimated'; import {SafeAreaView} from 'react-native-safe-area-context'; +import SimpleGradientProgressbarView from 'react-native-simple-gradient-progressbar-view'; 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_LIGHT_BLUE_2, TAGG_PURPLE} from '../../constants/constants'; import {headerBarOptions} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; @@ -27,6 +30,7 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, + isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, @@ -89,7 +93,8 @@ const MomentPost: React.FC<MomentPostProps> = ({ moment.moment_url.endsWith('gif') ); const mediaHeight = SCREEN_WIDTH / aspectRatio; - + const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false); + const [videoProgress, setVideoProgress] = useState<number>(0); /* * Load tags on initial render to pass tags data to moment header and content */ @@ -224,9 +229,26 @@ const MomentPost: React.FC<MomentPostProps> = ({ const {width, height} = response.naturalSize; setAspectRatio(width / height); }} - paused={moment.moment_id !== currentVisibleMomentId} + paused={moment.moment_id !== currentVisibleMomentId || isVideoPaused} + onProgress={({currentTime, seekableDuration}) => { + const localProgress = currentTime / seekableDuration; + if (!isNaN(localProgress)) { + setVideoProgress(localProgress); + } + }} onEnd={updateMomentViewCount} /> + {isVideoPaused && ( + <Animated.View + style={[ + styles.pauseContainer, + { + opacity: fadeValue, + }, + ]}> + <PauseIcon width={100} height={100} /> + </Animated.View> + )} </View> ) : ( <Image @@ -238,6 +260,20 @@ const MomentPost: React.FC<MomentPostProps> = ({ /> ); + const ProgressBar = () => ( + <View style={styles.progressBaContainer}> + <SimpleGradientProgressbarView + progress={videoProgress} + style={styles.progressBar} + fromColor={TAGG_PURPLE} + toColor={TAGG_LIGHT_BLUE_2} + /> + <View + style={[styles.progressDot, {left: videoProgress * SCREEN_WIDTH - 5}]} + /> + </View> + ); + return ( <> <StatusBar barStyle={'light-content'} /> @@ -265,12 +301,18 @@ const MomentPost: React.FC<MomentPostProps> = ({ <View style={styles.background}> <TouchableWithoutFeedback onPress={() => { - if (keyboardVisible) { - Keyboard.dismiss(); + if (isVideo) { + setIsVideoPaused(!isVideoPaused); + isVideoPaused + ? setFadeValue(new Animated.Value(0)) + : setFadeValue(new Animated.Value(1)); } else { setTagsVisible(!tagsVisible); setFadeValue(new Animated.Value(0)); } + if (keyboardVisible) { + Keyboard.dismiss(); + } }}> {isVideo ? ( <View style={styles.mediaContainer}>{momentMedia}</View> @@ -331,21 +373,24 @@ const MomentPost: React.FC<MomentPostProps> = ({ 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> + <View> + <AddComment + placeholderText={'Add a comment here!'} + momentId={moment.moment_id} + callback={() => { + setCommentCount(commentCount + 1); + }} + onFocus={() => { + setHideText(true); + }} + isKeyboardAvoiding={false} + theme={'dark'} + /> + {isVideo && <ProgressBar />} + <Text style={styles.text}> + {getTimePosted(moment.date_created)} + </Text> + </View> </KeyboardAvoidingView> </View> </View> @@ -364,7 +409,7 @@ const styles = StyleSheet.create({ color: 'white', fontWeight: '500', textAlign: 'right', - marginTop: 5, + marginTop: 18, }, captionText: { position: 'relative', @@ -450,6 +495,31 @@ const styles = StyleSheet.create({ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, }, + pauseContainer: { + position: 'absolute', + left: '40%', + top: '40%', + }, + progressBar: { + position: 'absolute', + top: 0, + width: SCREEN_WIDTH, + height: 5, + }, + progressDot: { + backgroundColor: '#fff', + width: 10, + height: 10, + borderRadius: 10, + borderWidth: 0.3, + borderColor: TAGG_PURPLE, + position: 'absolute', + top: -2.5, + }, + progressBaContainer: { + position: 'absolute', + top: isIPhoneX() ? 75 : 70, + }, profilePreviewContainer: {paddingHorizontal: '3%'}, }); |
