From d111b6bcb6b16b69bcc79170ef2842dfb2be3c0d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 23 Jul 2021 05:41:52 -0700 Subject: Add new gradient progress bar --- ios/Podfile.lock | 6 ++++++ package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 12 insertions(+) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 0fa3bf6e..a971c65c 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -358,6 +358,8 @@ PODS: - React-Core - react-native-safe-area-context (3.2.0): - React-Core + - react-native-simple-gradient-progressbar-view (0.2.0): + - React-Core - react-native-splash-screen (3.2.0): - React - react-native-video (5.1.1): @@ -555,6 +557,7 @@ DEPENDENCIES: - react-native-photo-manipulator (from `../node_modules/react-native-photo-manipulator`) - react-native-pinchable (from `../node_modules/react-native-pinchable`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) + - react-native-simple-gradient-progressbar-view (from `../node_modules/react-native-simple-gradient-progressbar-view`) - react-native-splash-screen (from `../node_modules/react-native-splash-screen`) - react-native-video (from `../node_modules/react-native-video`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) @@ -672,6 +675,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-pinchable" react-native-safe-area-context: :path: "../node_modules/react-native-safe-area-context" + react-native-simple-gradient-progressbar-view: + :path: "../node_modules/react-native-simple-gradient-progressbar-view" react-native-splash-screen: :path: "../node_modules/react-native-splash-screen" react-native-video: @@ -785,6 +790,7 @@ SPEC CHECKSUMS: react-native-photo-manipulator: e44c14a28bf7c9b7657a0e0ac79327c1a4d8fe2c react-native-pinchable: b4381b0807d15c12b14bfacd927128f52d96f0f1 react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 + react-native-simple-gradient-progressbar-view: 7f0f242fe65573201ab16bc9d4a600c6152c92dc react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865 react-native-video: 0bb76b6d6b77da3009611586c7dbf817b947f30e React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa diff --git a/package.json b/package.json index 7421ca9e..f44c3dd8 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^2.9.0", "react-native-share": "^5.1.7", + "react-native-simple-gradient-progressbar-view": "^0.2.0", "react-native-snap-carousel": "^3.9.1", "react-native-splash-screen": "^3.2.0", "react-native-svg": "^12.1.1", diff --git a/yarn.lock b/yarn.lock index 2b44959d..46d687fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7427,6 +7427,11 @@ react-native-share@^5.1.7: resolved "https://registry.yarnpkg.com/react-native-share/-/react-native-share-5.3.0.tgz#e501f974f2c0e12f8c78aa744dfc5bdf6bc54978" integrity sha512-VHRVxCyENhKThfap2Y7eXawuCqMpSvKYsvANZUfeTKrTlZ86hVi9h0+ITXKTLIj8gOB8qmSYUzKG7o6Kj4wKJg== +react-native-simple-gradient-progressbar-view@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/react-native-simple-gradient-progressbar-view/-/react-native-simple-gradient-progressbar-view-0.2.0.tgz#77dbce7555fca836d815f6644e1f23d35ed3908b" + integrity sha512-mqavQMhdTtb/StG/zsB844GhTNKQr3Bp+u1LTV9bU68mB/bS6VQiHh6WLfM1VPPXiAKTE1bI8i8RfKvOwrIp/A== + react-native-snap-carousel@^3.9.1: version "3.9.1" resolved "https://registry.yarnpkg.com/react-native-snap-carousel/-/react-native-snap-carousel-3.9.1.tgz#6fd9bd8839546c2c6043a41d2035afbc6fe0443e" -- cgit v1.2.3-70-g09d2 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 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(-) 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(-) 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(-) 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