aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/comments/ZoomInCropper.tsx26
-rw-r--r--src/components/moments/Moment.tsx72
-rw-r--r--src/components/moments/legacy/MomentPostContent.tsx42
-rw-r--r--src/components/profile/MomentMoreInfoDrawer.tsx11
-rw-r--r--src/components/profile/ProfileBody.tsx1
5 files changed, 126 insertions, 26 deletions
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 94e772b6..bca4e599 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -25,7 +25,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
route,
navigation,
}) => {
- const {screenType, title, image} = route.params;
+ const {screenType, title, media} = route.params;
const [aspectRatio, setAspectRatio] = useState<number>(1);
// Stores the coordinates of the cropped image
@@ -50,9 +50,9 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
// Setting original aspect ratio of image
useEffect(() => {
- if (image.sourceURL) {
+ if (media.uri) {
Image.getSize(
- image.sourceURL,
+ media.uri,
(w, h) => {
setAspectRatio(w / h);
},
@@ -67,10 +67,9 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
x0 !== undefined &&
x1 !== undefined &&
y0 !== undefined &&
- y1 !== undefined &&
- image.sourceURL
+ y1 !== undefined
) {
- PhotoManipulator.crop(image.sourceURL, {
+ PhotoManipulator.crop(media.uri, {
x: x0,
y: y1,
width: Math.abs(x0 - x1),
@@ -80,7 +79,11 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
navigation.navigate('CaptionScreen', {
screenType,
title: title,
- image: {filename: croppedURL, path: croppedURL},
+ media: {
+ filename: media.filename,
+ uri: croppedURL,
+ isVideo: false,
+ },
});
})
.catch((err) => console.log('err: ', err));
@@ -88,13 +91,12 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
x0 === undefined &&
x1 === undefined &&
y0 === undefined &&
- y1 === undefined &&
- image.sourceURL
+ y1 === undefined
) {
navigation.navigate('CaptionScreen', {
screenType,
title: title,
- image: {filename: image.sourceURL, path: image.sourceURL},
+ media,
});
}
};
@@ -104,7 +106,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
*/
const onMove = (position: IOnMove) => {
Image.getSize(
- image.path,
+ media.uri,
(w, h) => {
const x = position.positionX;
const y = position.positionY;
@@ -154,7 +156,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
<Image
style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
source={{
- uri: image.sourceURL,
+ uri: media.uri,
}}
/>
</ImageZoom>
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 81e23076..47de1c6a 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -43,6 +43,42 @@ const Moment: React.FC<MomentProps> = ({
}) => {
const navigation = useNavigation();
+ const navigateToCaptionScreenForVideo = (uri: string) => {
+ const randHash = Math.random().toString(36).substring(7);
+ navigation.navigate('CaptionScreen', {
+ screenType,
+ title,
+ media: {
+ filename: `poc_${randHash}.mov`,
+ uri,
+ isVideo: true,
+ },
+ });
+ };
+ /**
+ * This function opens the ImagePicker, only lets you select video files,
+ * formats the file extension, then makes a call to the server to get the presigned URL,
+ * after which it makes a POST request to the returned URL to upload the file directly to S3.
+ * params: none
+ * @returns: none
+ */
+ const navigateToVideoPicker = () => {
+ ImagePicker.openPicker({
+ mediaType: 'video',
+ })
+ .then(async (vid) => {
+ console.log(vid);
+ if (vid.path) {
+ navigateToCaptionScreenForVideo(vid.path);
+ }
+ })
+ .catch((err) => {
+ if (err.code && err.code !== 'E_PICKER_CANCELLED') {
+ Alert.alert(ERROR_UPLOAD);
+ }
+ });
+ };
+
const navigateToImagePicker = () => {
ImagePicker.openPicker({
smartAlbums: [
@@ -55,11 +91,15 @@ const Moment: React.FC<MomentProps> = ({
mediaType: 'any',
})
.then((picture) => {
- if ('path' in picture) {
+ if (picture.path && picture.filename) {
navigation.navigate('ZoomInCropper', {
screenType,
- title: title,
- image: picture,
+ title,
+ media: {
+ filename: picture.filename,
+ uri: picture.path,
+ isVideo: false,
+ },
});
}
})
@@ -106,6 +146,32 @@ const Moment: React.FC<MomentProps> = ({
<PlusIcon
width={23}
height={23}
+ onPress={() =>
+ Alert.alert('Video Upload', 'pick one', [
+ {
+ text: 'gallery',
+ onPress: navigateToVideoPicker,
+ },
+ {
+ text: 'camera (simulator will not work)',
+ onPress: () =>
+ ImagePicker.openCamera({
+ mediaType: 'video',
+ }).then((vid) => {
+ console.log(vid);
+ if (vid.path) {
+ navigateToCaptionScreenForVideo(vid.path);
+ }
+ }),
+ },
+ ])
+ }
+ color={'black'}
+ style={styles.horizontalMargin}
+ />
+ <PlusIcon
+ width={23}
+ height={23}
onPress={() => navigateToImagePicker()}
color={TAGG_LIGHT_BLUE}
style={styles.horizontalMargin}
diff --git a/src/components/moments/legacy/MomentPostContent.tsx b/src/components/moments/legacy/MomentPostContent.tsx
index 6388be27..d372a332 100644
--- a/src/components/moments/legacy/MomentPostContent.tsx
+++ b/src/components/moments/legacy/MomentPostContent.tsx
@@ -3,6 +3,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import Animated, {EasingNode} from 'react-native-reanimated';
+import Video from 'react-native-video';
import {useDispatch, useStore} from 'react-redux';
import {MomentContext} from '../../../screens/profile/IndividualMoment';
import {RootState} from '../../../store/rootReducer';
@@ -57,6 +58,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
useState<MomentCommentPreviewType | null>(moment.comment_preview);
const {keyboardVisible, scrollTo} = useContext(MomentContext);
const [hideText, setHideText] = useState(false);
+ const isVideo = !(
+ moment.moment_url.endsWith('jpg') ||
+ moment.moment_url.endsWith('JPG') ||
+ moment.moment_url.endsWith('PNG') ||
+ moment.moment_url.endsWith('png')
+ );
useEffect(() => {
setTags(momentTags);
@@ -78,7 +85,6 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
setHideText(false);
}
}, [keyboardVisible, hideText]);
-
return (
<View style={[styles.container, style]}>
<TouchableWithoutFeedback
@@ -86,12 +92,34 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
setVisible(!visible);
setFadeValue(new Animated.Value(0));
}}>
- <Image
- ref={imageRef}
- style={styles.image}
- source={{uri: moment.moment_url}}
- resizeMode={'cover'}
- />
+ {isVideo ? (
+ <View ref={imageRef}>
+ <Video
+ // ref={imageRef}
+ source={{
+ uri: moment.moment_url,
+ }}
+ // HLS m3u8 version
+ // source={{
+ // uri: 'https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8',
+ // }}
+ // mp4 version
+ // source={{
+ // uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+ // }}
+ volume={1}
+ style={styles.image}
+ repeat={true}
+ />
+ </View>
+ ) : (
+ <Image
+ ref={imageRef}
+ style={styles.image}
+ source={{uri: moment.moment_url}}
+ resizeMode={'cover'}
+ />
+ )}
{tags.length > 0 && (
<Image
source={require('../../assets/icons/tag_indicate.png')}
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index dc4ebe32..910aa095 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -31,6 +31,13 @@ interface MomentMoreInfoDrawerProps extends ViewProps {
tags: MomentTagType[];
}
+type DrawerButtonType = [
+ string,
+ (event: GestureResponderEvent) => void,
+ JSX.Element?,
+ TextStyle?,
+][];
+
const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
const {
setIsOpen,
@@ -45,9 +52,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
const navigation = useNavigation();
- const [drawerButtons, setDrawerButtons] = useState<
- [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][]
- >([]);
+ const [drawerButtons, setDrawerButtons] = useState<DrawerButtonType>([]);
const handleDeleteMoment = async () => {
setIsOpen(false);
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index c0ee508a..cc001516 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -80,7 +80,6 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
);
}}>{`${website}`}</Text>
)}
-
{userXId && isBlocked && (
<View style={styles.toggleButtonContainer}>
<ToggleButton
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 05:12:13 +0000