aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ios/Podfile.lock6
-rw-r--r--package.json1
-rw-r--r--src/assets/icons/pause-icon.svg1
-rw-r--r--src/components/moments/MomentPost.tsx111
-rw-r--r--yarn.lock5
5 files changed, 104 insertions, 20 deletions
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/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..f6917784 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,8 +229,15 @@ 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}
+
/>
</View>
) : (
@@ -238,6 +250,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 +291,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>
@@ -292,6 +324,17 @@ const MomentPost: React.FC<MomentPostProps> = ({
)}
</TouchableWithoutFeedback>
<View style={styles.bottomContainer} pointerEvents={'box-none'}>
+ {isVideoPaused && (
+ <Animated.View
+ style={[
+ styles.pauseContainer,
+ {
+ opacity: fadeValue,
+ },
+ ]}>
+ <PauseIcon width={100} height={100} />
+ </Animated.View>
+ )}
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
keyboardVerticalOffset={-20}>
@@ -331,21 +374,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 +410,7 @@ const styles = StyleSheet.create({
color: 'white',
fontWeight: '500',
textAlign: 'right',
- marginTop: 5,
+ marginTop: 18,
},
captionText: {
position: 'relative',
@@ -450,6 +496,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,
+ },
profilePreviewContainer: {paddingHorizontal: '3%'},
});
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"
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:57:29 +0000