1 files changed, 13 insertions, 101 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 3a492af3..f4c06311 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,6 @@
 import {RouteProp} from '@react-navigation/core';
-import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
@@ -13,7 +12,6 @@ import {
   HeaderHeight,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
-  numberWithCommas,
 } from '../../utils';
 import {TaggSquareButton} from '../common';
 import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
@@ -33,7 +31,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, title, media} = route.params;
+  const {screenType, media, selectedCategory} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
   // width and height of video, if video
   const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]);
@@ -64,19 +62,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
     );
   };
 
-  useFocusEffect(
-    useCallback(() => {
-      navigation.dangerouslyGetParent()?.setOptions({
-        tabBarVisible: false,
-      });
-      return () => {
-        navigation.dangerouslyGetParent()?.setOptions({
-          tabBarVisible: true,
-        });
-      };
-    }, [navigation]),
-  );
-
   // Setting original aspect ratio of image
   useEffect(() => {
     if (media.uri && checkIfUriImage(media.uri)) {
@@ -155,11 +140,11 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         (croppedURL: string) => {
           navigation.navigate('CaptionScreen', {
             screenType,
-            title: title,
             media: {
               uri: croppedURL,
               isVideo: true,
             },
+            selectedCategory,
           });
         },
         videoCrop,
@@ -169,76 +154,18 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
 
   // for whenever the video is altered by the user
   const onVideoMove = (zoomableEvent: any) => {
-    const {
-      distanceBottom,
-      distanceLeft,
-      distanceRight,
-      distanceTop,
-      lastMovePinch,
-      lastX,
-      lastY,
-      lastZoomLevel,
-      offsetX,
-      offsetY,
-      originalHeight,
-      originalWidth,
-      zoomLevel,
-    } = zoomableEvent;
-    // let cropWidth = origDimensions[0] / (zoomLevel * aspectRatio);
-    // let cropOffsetX = Math.abs((origDimensions[0] - cropWidth) / 2);
-    // let screenScale = SCREEN_HEIGHT / origDimensions[1];
-    // const relativeHeight = SCREEN_WIDTH / aspectRatio;
-    // let cropHeight = origDimensions[1];
-    // let cropOffsetY = 0;
+    const {originalHeight, originalWidth} = zoomableEvent;
 
     let cropWidth = 0;
     let cropHeight = 0;
     let cropOffsetX = 0;
     let cropOffsetY = 0;
 
-    // if (aspectRatio > 1) {
-    //   cropWidth =
-    //     originalWidth * (originalWidth - (distanceLeft + distanceRight));
-    //   cropHeight = origDimensions[1];
-    // }
-
-    // console.log(relativeHeight * zoomLevel, SCREEN_HEIGHT, zoomLevel);
-    // if (cropHeight * screenScale > SCREEN_HEIGHT) {
-    //   console.log('true');
-    // } else {
-    //   console.log('false');
-    // }
-
-    // console.log(
-    //   aspectRatio,
-    //   zoomLevel,
-    //   originalWidth,
-    //   originalHeight,
-    //   origDimensions[0],
-    //   origDimensions[1],
-    //   cropWidth,
-    //   cropHeight,
-    //   distanceBottom,
-    //   distanceLeft,
-    //   distanceRight,
-    //   distanceTop,
-    //   SCREEN_WIDTH * zoomLevel - SCREEN_WIDTH,
-    //   distanceBottom + distanceTop,
-    //   distanceLeft + distanceRight,
-    // );
-    // console.log(
-    //   zoomLevel,
-    //   distanceBottom,
-    //   distanceLeft,
-    //   distanceRight,
-    //   distanceTop,
-    //   originalWidth / (originalWidth - (distanceLeft + distanceRight)),
-    // );
     if (vidRef !== null && vidRef.current !== null) {
       vidRef.current.measure(
         (
-          x: number,
-          y: number,
+          _x: number,
+          _y: number,
           width: number,
           height: number,
           pageX: number,
@@ -248,11 +175,10 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           cropWidth = origDimensions[0] * (originalWidth / width);
 
           // offsetX
-          // cropOffsetX = (origDimensions[0] - cropWidth) / 2;
           cropOffsetX = -1 * origDimensions[0] * (pageX / width);
           if (cropOffsetX < 0) {
             cropOffsetX = 0;
-          } else if (cropOffsetX + cropWidth > origDimensions[0]) {
+          } else if (cropOffsetX + cropWidth > origDimensions[0] - 1) {
             cropOffsetX = origDimensions[0] - cropWidth - 1;
           }
 
@@ -263,7 +189,11 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           ) {
             const superHeight = width / aspectRatio;
             cropHeight = origDimensions[1] * (originalHeight / superHeight);
-            // cropOffsetY = (origDimensions[1] - cropHeight) / 2;
+
+            // offsetY
+            const topDeadZone = (height - superHeight) / 2;
+            const offsetY = topDeadZone + pageY;
+            cropOffsetY = -1 * origDimensions[1] * (offsetY / superHeight);
             if (cropOffsetY < 0) {
               cropOffsetY = 0;
             } else if (cropOffsetY + cropHeight > origDimensions[1]) {
@@ -328,24 +258,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         onPress={() => navigation.goBack()}>
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
-      {/* <ImageZoom
-        style={styles.zoomView}
-        cropWidth={SCREEN_WIDTH}
-        cropHeight={SCREEN_HEIGHT}
-        imageWidth={SCREEN_WIDTH}
-        imageHeight={SCREEN_WIDTH / aspectRatio}
-        onMove={onMove}>
-        <Image
-          style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
-          source={{
-            uri: media.uri,
-          }}
-        />
-      </ImageZoom> */}
-
-      {/* <Image style={{ flex: 1, width: null, height: '100%' }}
-                 source={require('./image.jpg')}
-                 resizeMode="contain" /> */}
       {checkIfUriImage(media.uri) ? (
         <ImageZoom
           style={styles.zoomView}
@@ -399,7 +311,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
                   height: SCREEN_WIDTH / aspectRatio,
                 },
               ]}
-              repeat={false}
+              repeat={true}
               resizeMode={'contain'}
               onLoad={(response) => {
                 const {width, height} = response.naturalSize;