From 368a2adf2f28b96b4a6928b57b97025299c0c98d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Jul 2021 05:42:03 -0700 Subject: Add pause icon --- src/assets/icons/pause-icon.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/assets/icons/pause-icon.svg (limited to 'src') 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 @@ + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 174014ba40c603c188213391c7135df2f568e42b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Jul 2021 05:48:41 -0700 Subject: Pause video, Add progressbar, Add pause icon --- src/components/moments/MomentPost.tsx | 104 +++++++++++++++++++++++++++------- 1 file changed, 84 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 29b82cec..42caea34 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, @@ -87,7 +91,8 @@ const MomentPost: React.FC = ({ moment.moment_url.endsWith('gif') ); const mediaHeight = SCREEN_WIDTH / aspectRatio; - + const [isVideoPaused, setIsVideoPaused] = useState(false); + const [videoProgress, setVideoProgress] = useState(0); /* * Load tags on initial render to pass tags data to moment header and content */ @@ -215,7 +220,13 @@ const MomentPost: React.FC = ({ 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); + } + }} /> ) : ( @@ -228,6 +239,39 @@ const MomentPost: React.FC = ({ /> ); + const ProgressBar = () => ( + + + + + ); + return ( <> @@ -255,12 +299,18 @@ const MomentPost: React.FC = ({ { - 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 ? ( {momentMedia} @@ -282,6 +332,17 @@ const MomentPost: React.FC = ({ )} + {isVideoPaused && ( + + + + )} @@ -321,21 +382,24 @@ const MomentPost: React.FC = ({ userLocal, ), })} - { - setCommentCount(commentCount + 1); - }} - onFocus={() => { - setHideText(true); - }} - isKeyboardAvoiding={false} - theme={'dark'} - /> - - {getTimePosted(moment.date_created)} - + + { + setCommentCount(commentCount + 1); + }} + onFocus={() => { + setHideText(true); + }} + isKeyboardAvoiding={false} + theme={'dark'} + /> + {isVideo && } + + {getTimePosted(moment.date_created)} + + @@ -354,7 +418,7 @@ const styles = StyleSheet.create({ color: 'white', fontWeight: '500', textAlign: 'right', - marginTop: 5, + marginTop: 18, }, captionText: { position: 'relative', -- cgit v1.2.3-70-g09d2 From 6fcfb36b37dd51d3e9d5baf025b896cc6f6045ee Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Jul 2021 05:56:43 -0700 Subject: Remove lint warnings --- src/components/moments/MomentPost.tsx | 62 +++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 42caea34..2e5807f4 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -240,34 +240,15 @@ const MomentPost: React.FC = ({ ); const ProgressBar = () => ( - + ); @@ -334,12 +315,12 @@ const MomentPost: React.FC = ({ {isVideoPaused && ( + style={[ + styles.pauseContainer, + { + opacity: fadeValue, + }, + ]}> )} @@ -494,6 +475,31 @@ const styles = StyleSheet.create({ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, }, + pauseContainer: { + position: 'absolute', + left: '40%', + top: '50%', + }, + 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, + }, }); export default MomentPost; -- cgit v1.2.3-70-g09d2 From 4e1172ba83a920a11ffac6c8d6b0362deaf2b965 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Jul 2021 16:38:06 -0700 Subject: Fix pause icon not clickable issue --- src/components/moments/MomentPost.tsx | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index f6917784..c232986d 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -237,8 +237,18 @@ const MomentPost: React.FC = ({ } }} onEnd={updateMomentViewCount} - /> + {isVideoPaused && ( + + + + )} ) : ( = ({ )} - {isVideoPaused && ( - - - - )} @@ -499,7 +498,7 @@ const styles = StyleSheet.create({ pauseContainer: { position: 'absolute', left: '40%', - top: '50%', + top: '40%', }, progressBar: { position: 'absolute', -- cgit v1.2.3-70-g09d2