From 16f649033125ae7b51aa7af4115ea9190a115d6f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 16 Jul 2021 19:09:02 -0400
Subject: Rename media

---
 src/screens/upload/EditMedia.tsx | 75 +++++++++++++++++++++++++++++-----------
 1 file changed, 54 insertions(+), 21 deletions(-)

(limited to 'src')

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,
   },
-- 
cgit v1.2.3-70-g09d2