diff options
| -rw-r--r-- | src/screens/upload/EditMedia.tsx | 75 |
1 files changed, 54 insertions, 21 deletions
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx index e53e2e43..6b2d6008 100644 --- a/src/screens/upload/EditMedia.tsx +++ b/src/screens/upload/EditMedia.tsx @@ -31,10 +31,15 @@ interface EditMediaProps { } export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { - const {screenType, media, selectedCategory} = route.params; + const { + screenType, + selectedCategory, + media: {isVideo}, + } = route.params; const [aspectRatio, setAspectRatio] = useState<number>(1); // width and height of video, if video const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]); + const [mediaUri, setMediaUri] = useState<string>(route.params.media.uri); const vidRef = useRef<View>(null); const [cropLoading, setCropLoading] = useState<boolean>(false); const [hideTrimmer, setHideTrimmer] = useState<boolean>(true); @@ -64,15 +69,15 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { // Setting original aspect ratio of image useEffect(() => { - if (media.uri && !media.isVideo) { + if (mediaUri && !isVideo) { Image.getSize( - media.uri, + mediaUri, (w, h) => { setAspectRatio(w / h); }, (err) => console.log(err), ); - } else if (media.uri && media.isVideo) { + } else if (mediaUri && isVideo) { setVideoCrop((prevState) => ({ ...prevState, cropWidth: origDimensions[0], @@ -83,7 +88,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { // Possible need to delay setting aspect ratio of video until loaded useEffect(() => { - if (media.uri && media.isVideo) { + if (mediaUri && isVideo) { setVideoCrop((prevState) => ({ ...prevState, cropWidth: origDimensions[0], @@ -94,14 +99,14 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { // Crops original image based of (x0, y0) and (x1, y1) coordinates const processVideo = (callback: (finalUri: string) => void) => { - if (!media.isVideo) { + if (!isVideo) { if ( x0 !== undefined && x1 !== undefined && y0 !== undefined && y1 !== undefined ) { - PhotoManipulator.crop(media.uri, { + PhotoManipulator.crop(mediaUri, { x: x0, y: y1, width: Math.abs(x0 - x1), @@ -119,7 +124,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { y1 === undefined ) { // If no crop coordinates are set, then we will just pass the original image - callback(media.uri); + callback(mediaUri); } } else { if (!videoCrop.cropHeight || !videoCrop.cropWidth) { @@ -131,7 +136,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { } setCropLoading(true); trimVideo( - media.uri, + mediaUri, (trimmedURL: string) => cropVideo( trimmedURL, @@ -214,7 +219,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { */ const onMove = (position: IOnMove) => { Image.getSize( - media.uri, + mediaUri, (w, h) => { const x = position.positionX; const y = position.positionY; @@ -250,12 +255,24 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { return ( <View style={styles.container}> {cropLoading && <TaggLoadingIndicator fullscreen />} - <TouchableOpacity - style={styles.closeButton} - onPress={() => navigation.goBack()}> - <CloseIcon height={25} width={25} color={'white'} /> - </TouchableOpacity> - {!media.isVideo ? ( + {hideTrimmer && ( + <TouchableOpacity + style={styles.closeButton} + onPress={() => navigation.goBack()}> + <CloseIcon height={25} width={25} color={'white'} /> + </TouchableOpacity> + )} + {!hideTrimmer && ( + <View style={styles.topContainer}> + <TouchableOpacity onPress={() => setHideTrimmer(true)}> + <Text style={styles.bigText}>Cancel</Text> + </TouchableOpacity> + <TouchableOpacity onPress={() => setHideTrimmer(true)}> + <Text style={styles.bigText}>Save</Text> + </TouchableOpacity> + </View> + )} + {!isVideo ? ( <ImageZoom style={styles.zoomView} cropWidth={SCREEN_WIDTH} @@ -266,7 +283,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { <Image style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}} source={{ - uri: media.uri, + uri: mediaUri, }} /> </ImageZoom> @@ -277,6 +294,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { zoomStep={0.5} initialZoom={1} bindToBorders={true} + zoomEnabled={hideTrimmer} onDoubleTapAfter={( _1: any, _2: any, @@ -300,7 +318,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { <View style={styles.videoParent} ref={vidRef}> <TrimmerPlayer hideTrimmer={hideTrimmer} - source={media.uri} + source={mediaUri} videoStyles={[ styles.media, { @@ -319,7 +337,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { </View> </ReactNativeZoomableView> )} - {media.isVideo && ( + {isVideo && hideTrimmer && ( <View style={styles.iconCarrier}> <TouchableOpacity style={styles.iconContainer} @@ -345,7 +363,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { style={styles.saveButton} onPress={() => processVideo((uri) => - saveImageToGallery(uri, media.isVideo ? 'video' : 'photo'), + saveImageToGallery(uri, isVideo ? 'video' : 'photo'), ) } /> @@ -357,7 +375,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { screenType, media: { uri: uri, - isVideo: media.isVideo, + isVideo: isVideo, }, selectedCategory, }), @@ -397,6 +415,21 @@ const styles = StyleSheet.create({ alignSelf: 'center', flexDirection: 'row', }, + topContainer: { + position: 'absolute', + top: SCREEN_HEIGHT * 0.1, + width: SCREEN_WIDTH * 0.9, + justifyContent: 'space-between', + alignItems: 'center', + alignSelf: 'center', + flexDirection: 'row', + zIndex: 1, + }, + bigText: { + fontSize: normalize(15), + color: 'white', + fontWeight: 'bold', + }, saveButton: { width: 50, }, |