From b7cba594635f4a6de3582ba4845bfc9757632ba1 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 13 Jul 2021 16:01:11 -0400 Subject: Extremely rough working --- src/components/comments/ZoomInCropper.tsx | 344 ++++++++++++++++++++++++++---- 1 file changed, 308 insertions(+), 36 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 7fa88f6e..3a492af3 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -1,15 +1,23 @@ import {RouteProp} from '@react-navigation/core'; import {useFocusEffect} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useCallback, useEffect, useState} from 'react'; -import {Image, StyleSheet, TouchableOpacity} from 'react-native'; +import React, {useCallback, 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'; import PhotoManipulator from 'react-native-photo-manipulator'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {MainStackParams} from '../../routes'; -import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import { + cropVideo, + HeaderHeight, + SCREEN_HEIGHT, + SCREEN_WIDTH, + numberWithCommas, +} from '../../utils'; import {TaggSquareButton} from '../common'; +import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView'; +import Video from 'react-native-video'; type ZoomInCropperRouteProps = RouteProp; type ZoomInCropperNavigationProps = StackNavigationProp< @@ -27,6 +35,9 @@ export const ZoomInCropper: React.FC = ({ }) => { const {screenType, title, media} = route.params; const [aspectRatio, setAspectRatio] = useState(1); + // width and height of video, if video + const [origDimensions, setOrigDimensions] = useState([0, 0]); + const vidRef = useRef(null); // Stores the coordinates of the cropped image const [x0, setX0] = useState(); @@ -34,6 +45,25 @@ export const ZoomInCropper: React.FC = ({ const [y0, setY0] = useState(); const [y1, setY1] = useState(); + // Stores crop information for video + const [videoCrop, setVideoCrop] = useState<{ + cropWidth?: number; + cropHeight?: number; + cropOffsetX?: number; + cropOffsetY?: number; + }>({}); + + const checkIfUriImage = (uri: string) => { + return ( + uri.endsWith('jpg') || + uri.endsWith('JPG') || + uri.endsWith('PNG') || + uri.endsWith('png') || + uri.endsWith('GIF') || + uri.endsWith('gif') + ); + }; + useFocusEffect( useCallback(() => { navigation.dangerouslyGetParent()?.setOptions({ @@ -49,7 +79,7 @@ export const ZoomInCropper: React.FC = ({ // Setting original aspect ratio of image useEffect(() => { - if (media.uri) { + if (media.uri && checkIfUriImage(media.uri)) { Image.getSize( media.uri, (w, h) => { @@ -57,45 +87,199 @@ export const ZoomInCropper: React.FC = ({ }, (err) => console.log(err), ); + } else if (media.uri && !checkIfUriImage(media.uri)) { + const tempVideoCrop = {...videoCrop}; + tempVideoCrop.cropWidth = origDimensions[0]; + tempVideoCrop.cropHeight = origDimensions[1]; + setVideoCrop(tempVideoCrop); } }, []); + // Possible need to delay setting aspect ratio of video until loaded + useEffect(() => { + if (media.uri && !checkIfUriImage(media.uri)) { + const tempVideoCrop = {...videoCrop}; + tempVideoCrop.cropWidth = origDimensions[0]; + tempVideoCrop.cropHeight = origDimensions[1]; + setVideoCrop(tempVideoCrop); + } + }, [origDimensions]); + // Crops original image based of (x0, y0) and (x1, y1) coordinates const handleNext = () => { - if ( - x0 !== undefined && - x1 !== undefined && - y0 !== undefined && - y1 !== undefined - ) { - PhotoManipulator.crop(media.uri, { - x: x0, - y: y1, - width: Math.abs(x0 - x1), - height: Math.abs(y0 - y1), - }) - .then((croppedURL) => { + if (checkIfUriImage(media.uri)) { + if ( + x0 !== undefined && + x1 !== undefined && + y0 !== undefined && + y1 !== undefined + ) { + PhotoManipulator.crop(media.uri, { + x: x0, + y: y1, + width: Math.abs(x0 - x1), + height: Math.abs(y0 - y1), + }) + .then((croppedURL) => { + navigation.navigate('CaptionScreen', { + screenType, + title: title, + media: { + uri: croppedURL, + isVideo: false, + }, + }); + }) + .catch((err) => console.log('err: ', err)); + } else if ( + x0 === undefined && + x1 === undefined && + y0 === undefined && + y1 === undefined + ) { + navigation.navigate('CaptionScreen', { + screenType, + title: title, + media, + }); + } + } else { + if (!videoCrop.cropHeight || !videoCrop.cropWidth) { + const tempVideoCrop = {...videoCrop}; + tempVideoCrop.cropWidth = origDimensions[0]; + tempVideoCrop.cropHeight = origDimensions[1]; + setVideoCrop(tempVideoCrop); + } + cropVideo( + media.uri, + (croppedURL: string) => { navigation.navigate('CaptionScreen', { screenType, title: title, media: { uri: croppedURL, - isVideo: false, + isVideo: true, }, }); - }) - .catch((err) => console.log('err: ', err)); - } else if ( - x0 === undefined && - x1 === undefined && - y0 === undefined && - y1 === undefined - ) { - navigation.navigate('CaptionScreen', { - screenType, - title: title, - media, - }); + }, + videoCrop, + ); + } + }; + + // 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; + + 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, + width: number, + height: number, + pageX: number, + pageY: number, + ) => { + // width + 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]) { + cropOffsetX = origDimensions[0] - cropWidth - 1; + } + + // height + if ( + height * (SCREEN_WIDTH / aspectRatio / originalHeight) > + SCREEN_HEIGHT + ) { + const superHeight = width / aspectRatio; + cropHeight = origDimensions[1] * (originalHeight / superHeight); + // cropOffsetY = (origDimensions[1] - cropHeight) / 2; + if (cropOffsetY < 0) { + cropOffsetY = 0; + } else if (cropOffsetY + cropHeight > origDimensions[1]) { + cropOffsetY = origDimensions[1] - cropHeight - 1; + } + } else { + cropHeight = origDimensions[1]; + } + const tempVideoCrop = {...videoCrop}; + tempVideoCrop.cropWidth = cropWidth; + tempVideoCrop.cropHeight = cropHeight; + tempVideoCrop.cropOffsetX = cropOffsetX; + tempVideoCrop.cropOffsetY = cropOffsetY; + setVideoCrop(tempVideoCrop); + }, + ); } }; @@ -138,13 +322,13 @@ export const ZoomInCropper: React.FC = ({ }; return ( - <> + navigation.goBack()}> - = ({ uri: media.uri, }} /> - + */} + + {/* */} + {checkIfUriImage(media.uri) ? ( + + + + ) : ( + { + onVideoMove(zoomableViewEventObject); + }} + onShiftingAfter={(_1: any, _2: any, zoomableViewEventObject: any) => { + onVideoMove(zoomableViewEventObject); + }} + onShiftingEnd={(_1: any, _2: any, zoomableViewEventObject: any) => { + onVideoMove(zoomableViewEventObject); + }} + onZoomAfter={(_1: any, _2: any, zoomableViewEventObject: any) => { + onVideoMove(zoomableViewEventObject); + }} + onZoomEnd={(_1: any, _2: any, zoomableViewEventObject: any) => { + onVideoMove(zoomableViewEventObject); + }} + style={styles.zoomView}> + + + + )} + = ({ style={styles.button} labelStyle={styles.buttonLabel} /> - + ); }; const styles = StyleSheet.create({ + container: { + backgroundColor: 'black', + height: SCREEN_HEIGHT, + width: SCREEN_WIDTH, + // flexDirection: 'column', + // justifyContent: 'center', + }, closeButton: { position: 'absolute', top: 0, @@ -195,5 +455,17 @@ const styles = StyleSheet.create({ letterSpacing: normalize(1.3), textAlign: 'center', }, - zoomView: {backgroundColor: 'black'}, + media: { + zIndex: 0, + flex: 1, + }, + videoParent: { + flex: 1, + }, + zoomView: { + backgroundColor: 'black', + flex: 1, + // borderColor: 'pink', + // borderWidth: 2, + }, }); -- cgit v1.2.3-70-g09d2 From e890381389d07ef2a194536268508c9dde5a2828 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 13 Jul 2021 18:03:22 -0400 Subject: Fix lint --- src/components/comments/ZoomInCropper.tsx | 2 -- src/screens/profile/CaptionScreen.tsx | 1 - src/utils/camera.ts | 1 - 3 files changed, 4 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index f4c06311..c20bab67 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -108,7 +108,6 @@ export const ZoomInCropper: React.FC = ({ .then((croppedURL) => { navigation.navigate('CaptionScreen', { screenType, - title: title, media: { uri: croppedURL, isVideo: false, @@ -124,7 +123,6 @@ export const ZoomInCropper: React.FC = ({ ) { navigation.navigate('CaptionScreen', { screenType, - title: title, media, }); } diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 38c6d8f0..99ff8819 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -49,7 +49,6 @@ import {RootState} from '../../store/rootReducer'; import {MomentTagType} from '../../types'; import {isIPhoneX, normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import {Trimmer, VideoPlayer} from 'react-native-video-processing'; /** * Upload Screen to allow users to upload posts to Tagg diff --git a/src/utils/camera.ts b/src/utils/camera.ts index 2f189a1d..8c05355f 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -11,7 +11,6 @@ import { import {ProcessingManager} from 'react-native-video-processing'; import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker'; import {ERROR_UPLOAD} from '../constants/strings'; -import RNFetchBlob from 'rn-fetch-blob'; /* * Captures a photo and pauses to show the preview of the picture taken -- cgit v1.2.3-70-g09d2 From 7b79ab3e33a6df14394537b1050019db46f670e0 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 14 Jul 2021 10:33:45 -0400 Subject: Working on code cleanup --- ios/Frontend.xcodeproj/project.pbxproj | 27 +++++++++++---------------- ios/Frontend/Info.plist | 8 -------- src/components/comments/ZoomInCropper.tsx | 4 ---- src/utils/camera.ts | 2 -- 4 files changed, 11 insertions(+), 30 deletions(-) (limited to 'src/components/comments') diff --git a/ios/Frontend.xcodeproj/project.pbxproj b/ios/Frontend.xcodeproj/project.pbxproj index ce1492da..af943815 100644 --- a/ios/Frontend.xcodeproj/project.pbxproj +++ b/ios/Frontend.xcodeproj/project.pbxproj @@ -475,22 +475,20 @@ TargetAttributes = { 00E356ED1AD99517003FC87E = { CreatedOnToolsVersion = 6.2; - DevelopmentTeam = VQ6D29Y5N7; - ProvisioningStyle = Automatic; + DevelopmentTeam = CA2JXDK7RB; TestTargetID = 13B07F861A680F5B00A75B9A; }; 13B07F861A680F5B00A75B9A = { DevelopmentTeam = VQ6D29Y5N7; - LastSwiftMigration = 1250; + LastSwiftMigration = 1250; ProvisioningStyle = Automatic; }; 2D02E47A1E0B4A5D006451C7 = { CreatedOnToolsVersion = 8.2.1; - ProvisioningStyle = Manual; + ProvisioningStyle = Automatic; }; 2D02E48F1E0B4A5D006451C7 = { CreatedOnToolsVersion = 8.2.1; - DevelopmentTeam = VQ6D29Y5N7; ProvisioningStyle = Automatic; TestTargetID = 2D02E47A1E0B4A5D006451C7; }; @@ -971,10 +969,7 @@ buildSettings = { ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES; BUNDLE_LOADER = "$(TEST_HOST)"; - CODE_SIGN_IDENTITY = "Apple Development"; - "CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development"; - CODE_SIGN_STYLE = Automatic; - DEVELOPMENT_TEAM = VQ6D29Y5N7; + DEVELOPMENT_TEAM = CA2JXDK7RB; GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", @@ -1005,7 +1000,7 @@ "CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development"; CODE_SIGN_STYLE = Automatic; COPY_PHASE_STRIP = NO; - DEVELOPMENT_TEAM = VQ6D29Y5N7; + DEVELOPMENT_TEAM = CA2JXDK7RB; INFOPLIST_FILE = FrontendTests/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 12.0; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; @@ -1032,7 +1027,7 @@ CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; CURRENT_PROJECT_VERSION = 1; - DEVELOPMENT_TEAM = VQ6D29Y5N7; + DEVELOPMENT_TEAM = FZ5J543S6Y; ENABLE_BITCODE = NO; GCC_PREPROCESSOR_DEFINITIONS = ( "$(inherited)", @@ -1046,7 +1041,7 @@ "-ObjC", "-lc++", ); - PRODUCT_BUNDLE_IDENTIFIER = FZ5J543S6Y; + PRODUCT_BUNDLE_IDENTIFIER = com.taggid.taggid; PRODUCT_NAME = Frontend; PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_OBJC_BRIDGING_HEADER = "RNVideoProcessing/Frontend-Bridging-Header.h"; @@ -1065,7 +1060,7 @@ CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; CURRENT_PROJECT_VERSION = 1; - DEVELOPMENT_TEAM = VQ6D29Y5N7; + DEVELOPMENT_TEAM = FZ5J543S6Y; INFOPLIST_FILE = Frontend/Info.plist; IPHONEOS_DEPLOYMENT_TARGET = 12.0; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; @@ -1074,7 +1069,7 @@ "-ObjC", "-lc++", ); - PRODUCT_BUNDLE_IDENTIFIER = FZ5J543S6Y; + PRODUCT_BUNDLE_IDENTIFIER = com.taggid.taggid; PRODUCT_NAME = Frontend; PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_OBJC_BRIDGING_HEADER = "RNVideoProcessing/Frontend-Bridging-Header.h"; @@ -1105,7 +1100,7 @@ "-ObjC", "-lc++", ); - PRODUCT_BUNDLE_IDENTIFIER = FZ5J543S6Y; + PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.Frontend-tvOS"; PRODUCT_NAME = "$(TARGET_NAME)"; PROVISIONING_PROFILE_SPECIFIER = ""; SDKROOT = appletvos; @@ -1136,7 +1131,7 @@ "-ObjC", "-lc++", ); - PRODUCT_BUNDLE_IDENTIFIER = FZ5J543S6Y; + PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.Frontend-tvOS"; PRODUCT_NAME = "$(TARGET_NAME)"; PROVISIONING_PROFILE_SPECIFIER = ""; SDKROOT = appletvos; diff --git a/ios/Frontend/Info.plist b/ios/Frontend/Info.plist index bf077fca..8e1ae927 100644 --- a/ios/Frontend/Info.plist +++ b/ios/Frontend/Info.plist @@ -48,20 +48,12 @@ - NSCameraUsageDescription - Enable camera access to capture and share moment with your friends NSContactsUsageDescription This helps you quickly get in touch with friends on the app and more NSLocationWhenInUseUsageDescription NSMainNibFile LaunchScreen - NSMicrophoneUsageDescription - Enable microphone access to record and listen to videos - NSPhotoLibraryAddUsageDescription - This lets you save photos captured on Tagg, to your library - NSPhotoLibraryUsageDescription - This lets you share photos from your library and select profile displays UIAppFonts Feather.ttf diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index c20bab67..5f14522e 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -339,8 +339,6 @@ const styles = StyleSheet.create({ backgroundColor: 'black', height: SCREEN_HEIGHT, width: SCREEN_WIDTH, - // flexDirection: 'column', - // justifyContent: 'center', }, closeButton: { position: 'absolute', @@ -375,7 +373,5 @@ const styles = StyleSheet.create({ zoomView: { backgroundColor: 'black', flex: 1, - // borderColor: 'pink', - // borderWidth: 2, }, }); diff --git a/src/utils/camera.ts b/src/utils/camera.ts index 8c05355f..15758112 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -91,8 +91,6 @@ export const navigateToVideoPicker = (callback: (vid: Video) => void) => { }) .then(async (vid) => { if (vid.path) { - ProcessingManager.compress(vid.path, options.compress) // like VideoPlayer compress options - .then((data: any) => console.log(data)); callback(vid); } }) -- cgit v1.2.3-70-g09d2 From 5e1ef04923a103dccbb48be34bf99dfb625b2d87 Mon Sep 17 00:00:00 2001 From: brian-tagg <83606050+brian-tagg@users.noreply.github.com> Date: Wed, 14 Jul 2021 11:21:49 -0400 Subject: Update src/components/comments/ZoomInCropper.tsx Co-authored-by: Ivan Chen --- src/components/comments/ZoomInCropper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/comments') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 5f14522e..43c4c6ff 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -35,7 +35,7 @@ export const ZoomInCropper: React.FC = ({ const [aspectRatio, setAspectRatio] = useState(1); // width and height of video, if video const [origDimensions, setOrigDimensions] = useState([0, 0]); - const vidRef = useRef(null); + const vidRef = useRef