diff options
| -rw-r--r-- | src/components/moments/TrimmerPlayer.tsx | 51 | ||||
| -rw-r--r-- | src/screens/upload/EditMedia.tsx | 35 |
2 files changed, 50 insertions, 36 deletions
diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx index ef829637..b28df590 100644 --- a/src/components/moments/TrimmerPlayer.tsx +++ b/src/components/moments/TrimmerPlayer.tsx @@ -50,6 +50,10 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({ // Callback so parent knows where the trimming endpts are useEffect(() => onChangedEndpoints({end, start}), [end, start]); + useEffect(() => { + playerRef.current?.seek(0); + }, [hideTrimmer]); + return ( <> <Video @@ -66,7 +70,6 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({ resizeMode={'contain'} repeat={true} onLoad={(payload) => { - console.log(payload, source); setEnd(payload.duration); handleLoad(payload.naturalSize); }} @@ -80,28 +83,30 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({ setPaused((state) => !state); }} /> - <View style={styles.trimmerContainer}> - <Trimmer - // link to descr and use of props for trimmer -> - // https://github.com/shahen94/react-native-video-processing - source={source} - height={hideTrimmer ? 0 : 75} - width={hideTrimmer ? 0 : SCREEN_WIDTH} - onTrackerMove={(e: {currentTime: number}) => { - setPaused(true); - setSeekTime(e.currentTime); - }} - currentTime={trackerTime} - themeColor={'white'} - thumbWidth={10} - trackerColor={'white'} - onChange={(e: {endTime: number; startTime: number}) => { - setPaused(true); - setEnd(e.endTime); - setStart(e.startTime); - }} - /> - </View> + {!hideTrimmer && ( + <View style={styles.trimmerContainer}> + <Trimmer + // link to descr and use of props for trimmer -> + // https://github.com/shahen94/react-native-video-processing + source={source} + height={75} + width={SCREEN_WIDTH} + onTrackerMove={(e: {currentTime: number}) => { + setPaused(true); + setSeekTime(e.currentTime); + }} + currentTime={trackerTime} + themeColor={'white'} + thumbWidth={10} + trackerColor={'white'} + onChange={(e: {endTime: number; startTime: number}) => { + setPaused(true); + setEnd(e.endTime); + setStart(e.startTime); + }} + /> + </View> + )} </> ); }; diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx index 6b2d6008..1dc408ee 100644 --- a/src/screens/upload/EditMedia.tsx +++ b/src/screens/upload/EditMedia.tsx @@ -135,19 +135,14 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { })); } setCropLoading(true); - trimVideo( + cropVideo( mediaUri, - (trimmedURL: string) => - cropVideo( - trimmedURL, - (croppedURL: string) => { - setCropLoading(false); - // Pass the trimmed/cropped video - callback(croppedURL); - }, - videoCrop, - ), - trimEnds, + (croppedURL: string) => { + setCropLoading(false); + // Pass the trimmed/cropped video + callback(croppedURL); + }, + videoCrop, ); } }; @@ -267,7 +262,21 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { <TouchableOpacity onPress={() => setHideTrimmer(true)}> <Text style={styles.bigText}>Cancel</Text> </TouchableOpacity> - <TouchableOpacity onPress={() => setHideTrimmer(true)}> + <TouchableOpacity + onPress={() => + trimVideo( + mediaUri, + (trimmedUri: string) => { + setCropLoading(true); + setMediaUri(trimmedUri); + setTimeout(() => { + setHideTrimmer(true); + setCropLoading(false); + }, 500); + }, + trimEnds, + ) + }> <Text style={styles.bigText}>Save</Text> </TouchableOpacity> </View> |