diff options
| -rw-r--r-- | src/components/comments/ZoomInCropper.tsx | 17 | ||||
| -rw-r--r-- | src/components/moments/trimmer.tsx | 22 | ||||
| -rw-r--r-- | src/screens/moments/CameraScreen.tsx | 9 | ||||
| -rw-r--r-- | src/utils/camera.ts | 1 |
4 files changed, 17 insertions, 32 deletions
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 6f8ff97c..5fad89e6 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -10,12 +10,14 @@ import {MainStackParams} from '../../routes'; import { cropVideo, HeaderHeight, + numberWithCommas, SCREEN_HEIGHT, SCREEN_WIDTH, } from '../../utils'; import {TaggSquareButton} from '../common'; import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView'; import Video from 'react-native-video'; +import {TrimmerPlayer} from '../moments/trimmer'; type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>; type ZoomInCropperNavigationProps = StackNavigationProp< @@ -304,19 +306,18 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({ }} style={styles.zoomView}> <View style={styles.videoParent} ref={vidRef}> - <Video - source={{uri: media.uri}} - volume={1} - style={[ + <TrimmerPlayer + hideTrimmer={false} + source={media.uri} + videoStyles={[ styles.media, { height: SCREEN_WIDTH / aspectRatio, }, ]} - repeat={true} - resizeMode={'contain'} - onLoad={(response) => { - const {width, height} = response.naturalSize; + handleLoad={(response: Object) => { + console.log(response); + const {width, height} = response; setOrigDimensions([width, height]); setAspectRatio(width / height); }} diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx index f011d222..2bd3eb41 100644 --- a/src/components/moments/trimmer.tsx +++ b/src/components/moments/trimmer.tsx @@ -1,13 +1,14 @@ import React, {useEffect, useState} from 'react'; import Video from 'react-native-video'; -import {Trimmer, ProcessingManager} from 'react-native-video-processing'; +import {Trimmer} from 'react-native-video-processing'; import {useRef} from 'react'; export const TrimmerPlayer: React.FC<{ source: string; - styles: Object; + videoStyles: Object; hideTrimmer: boolean; -}> = ({source, styles, hideTrimmer}) => { + handleLoad: Function; +}> = ({source, videoStyles, hideTrimmer, handleLoad}) => { const playerRef = useRef<Video>(); const [seekTime, setSeekTime] = useState<number>(0); @@ -35,16 +36,6 @@ export const TrimmerPlayer: React.FC<{ setTrackerTime(end - 0.1); }, [end]); - const trim = () => { - ProcessingManager.trim(source, { - startTime: start / 2, //need to divide by two for bug in module - endTime: end, - // saveToCameraRoll: true, // default is false // iOS only - saveWithCurrentDate: true, // default is false // iOS only - quality: 'highest', - }).then((data: any) => console.log('trim', data)); - }; - return ( <> <Video @@ -56,11 +47,12 @@ export const TrimmerPlayer: React.FC<{ volume={1.0} // 0 is muted, 1 is normal. muted={false} // Mutes the audio entirely. paused={paused} // Pauses playback entirely. - //resizeMode="cover" // Fill the whole screen at aspect ratio. + resizeMode={'contain'} repeat={true} // Repeat forever. onLoad={(payload) => { console.log(payload, source); setEnd(payload.duration); + handleLoad(payload.naturalSize); }} onProgress={(e) => { if (!paused) { @@ -69,7 +61,7 @@ export const TrimmerPlayer: React.FC<{ }} // Callback every ~250ms with currentTime //onEnd={() => console.log('end')} // Callback when playback finishes //onError={this.videoError} // Callback when video cannot be loaded - style={styles} + style={videoStyles} onTouchEnd={() => { setPaused((state) => !state); }} diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index ef52a56f..ee5834cb 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -184,16 +184,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => { ) { showGIFFailureAlert(() => navigateToCropper(media.path)); } else { -<<<<<<< HEAD - // is this a video? - if (media.duration !== null) { - navigateToCaptionScreen(true, media.sourceURL); - } else { - navigateToCropper(media.sourceURL); - } -======= navigateToCropper(media.path); ->>>>>>> master } }} /> diff --git a/src/utils/camera.ts b/src/utils/camera.ts index 4a72f5f4..9e37d62e 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -8,6 +8,7 @@ import { TakePictureOptions, TakePictureResponse, } from 'react-native-camera'; +import {ProcessingManager} from 'react-native-video-processing'; import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker'; import {ERROR_UPLOAD} from '../constants/strings'; |