From c3d418bc7ad3c702ed52fa522c1225dc4816c092 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 17:46:15 -0400 Subject: Refactor ZoomInCropper to be EditMedia --- src/screens/upload/EditMedia.tsx | 431 +++++++++++++++++++++++++++++++++++++++ src/screens/upload/index.ts | 1 + 2 files changed, 432 insertions(+) create mode 100644 src/screens/upload/EditMedia.tsx create mode 100644 src/screens/upload/index.ts (limited to 'src/screens/upload') diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx new file mode 100644 index 00000000..ed5cd0d7 --- /dev/null +++ b/src/screens/upload/EditMedia.tsx @@ -0,0 +1,431 @@ +import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView'; +import {RouteProp} from '@react-navigation/core'; +import {StackNavigationProp} from '@react-navigation/stack'; +import React, {useEffect, useRef, useState} from 'react'; +import {Image, StyleSheet, Text, 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 TrimIcon from '../../assets/icons/trim.svg'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {TaggLoadingIndicator, TaggSquareButton} from '../../components/common'; +import {TrimmerPlayer} from '../../components/moments/trimmer'; +import {MainStackParams} from '../../routes'; +import { + cropVideo, + HeaderHeight, + SCREEN_HEIGHT, + SCREEN_WIDTH, + trimVideo, +} from '../../utils'; + +type EditMediaRouteProps = RouteProp; +type EditMediaNavigationProps = StackNavigationProp< + MainStackParams, + 'EditMedia' +>; +interface EditMediaProps { + route: EditMediaRouteProps; + navigation: EditMediaNavigationProps; +} + +export const EditMedia: React.FC = ({route, navigation}) => { + const {screenType, media, selectedCategory} = route.params; + const [aspectRatio, setAspectRatio] = useState(1); + // width and height of video, if video + const [origDimensions, setOrigDimensions] = useState([0, 0]); + const vidRef = useRef(null); + const [cropLoading, setCropLoading] = useState(false); + + // Stores the coordinates of the cropped image + const [x0, setX0] = useState(); + const [x1, setX1] = useState(); + 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; + }>({}); + + // Stores the current trim endpoints + const [trimEnds, setTrimEnds] = useState<{ + end: number; + start: number; + }>({ + end: 60, + start: 0, + }); + + const checkIfUriImage = (uri: string) => { + return ( + uri.endsWith('jpg') || + uri.endsWith('JPG') || + uri.endsWith('PNG') || + uri.endsWith('png') || + uri.endsWith('GIF') || + uri.endsWith('gif') + ); + }; + + // Setting original aspect ratio of image + useEffect(() => { + if (media.uri && checkIfUriImage(media.uri)) { + Image.getSize( + media.uri, + (w, h) => { + setAspectRatio(w / h); + }, + (err) => console.log(err), + ); + } else if (media.uri && !checkIfUriImage(media.uri)) { + setVideoCrop((prevState) => ({ + ...prevState, + cropWidth: origDimensions[0], + cropHeight: origDimensions[1], + })); + } + }, []); + + // Possible need to delay setting aspect ratio of video until loaded + useEffect(() => { + if (media.uri && !checkIfUriImage(media.uri)) { + setVideoCrop((prevState) => ({ + ...prevState, + cropWidth: origDimensions[0], + cropHeight: origDimensions[1], + })); + } + }, [origDimensions]); + + // Crops original image based of (x0, y0) and (x1, y1) coordinates + const handleNext = () => { + 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, + 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, + media, + }); + } + } else { + if (!videoCrop.cropHeight || !videoCrop.cropWidth) { + setVideoCrop((prevState) => ({ + ...prevState, + cropWidth: origDimensions[0], + cropHeight: origDimensions[1], + })); + } + setCropLoading(true); + trimVideo( + media.uri, + (trimmedURL: string) => + cropVideo( + trimmedURL, + (croppedURL: string) => { + setCropLoading(false); + navigation.navigate('CaptionScreen', { + screenType, + media: { + uri: croppedURL, + isVideo: true, + }, + selectedCategory, + }); + }, + videoCrop, + ), + trimEnds, + ); + } + }; + + // for whenever the video is altered by the user + const onVideoMove = (zoomableEvent: any) => { + const {originalHeight, originalWidth} = zoomableEvent; + + let cropWidth = 0; + let cropHeight = 0; + let cropOffsetX = 0; + let cropOffsetY = 0; + + 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 = -1 * origDimensions[0] * (pageX / width); + if (cropOffsetX < 0) { + cropOffsetX = 0; + } else if (cropOffsetX + cropWidth > origDimensions[0] - 1) { + cropOffsetX = origDimensions[0] - cropWidth - 1; + } + + // height + if ( + height * (SCREEN_WIDTH / aspectRatio / originalHeight) > + SCREEN_HEIGHT + ) { + const superHeight = width / aspectRatio; + cropHeight = origDimensions[1] * (originalHeight / superHeight); + + // 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]) { + cropOffsetY = origDimensions[1] - cropHeight - 1; + } + } else { + cropHeight = origDimensions[1]; + } + setVideoCrop((prevState) => ({ + ...prevState, + cropWidth: cropWidth, + cropHeight: cropHeight, + cropOffsetX: cropOffsetX, + cropOffsetY: cropOffsetY, + })); + }, + ); + } + }; + + /* Records (x0, y0) and (x1, y1) coordinates used later for cropping, + * based on(x, y) - the center of the image and scale of zoom + */ + const onMove = (position: IOnMove) => { + Image.getSize( + media.uri, + (w, h) => { + const x = position.positionX; + const y = position.positionY; + const scale = position.scale; + const screen_ratio = SCREEN_HEIGHT / SCREEN_WIDTH; + let tempx0 = w / 2 - x * (w / SCREEN_WIDTH) - w / 2 / scale; + let tempx1 = w / 2 - x * (w / SCREEN_WIDTH) + w / 2 / scale; + if (tempx0 < 0) { + tempx0 = 0; + } + if (tempx1 > w) { + tempx1 = w; + } + const x_distance = Math.abs(tempx1 - tempx0); + const y_distance = screen_ratio * x_distance; + let tempy0 = h / 2 - y * (h / SCREEN_HEIGHT) + y_distance / 2; + let tempy1 = h / 2 - y * (h / SCREEN_HEIGHT) - y_distance / 2; + if (tempy0 > h) { + tempy0 = h; + } + if (tempy1 < 0) { + tempy1 = 0; + } + setX0(tempx0); + setX1(tempx1); + setY0(tempy0); + setY1(tempy1); + }, + (err) => console.log(err), + ); + }; + + return ( + + {cropLoading && } + navigation.goBack()}> + + + {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}> + + { + const {width, height} = response; + setOrigDimensions([width, height]); + setAspectRatio(width / height); + }} + onChangedEndpoints={(response: {start: number; end: number}) => + setTrimEnds(response) + } + /> + + + )} + {!checkIfUriImage(media.uri) && ( + + + Trim + + Volume + + )} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: 'black', + height: SCREEN_HEIGHT, + width: SCREEN_WIDTH, + }, + closeButton: { + position: 'absolute', + top: 0, + paddingTop: HeaderHeight, + zIndex: 1, + marginLeft: '5%', + }, + button: { + zIndex: 1, + position: 'absolute', + bottom: normalize(20), + right: normalize(15), + width: normalize(108), + height: normalize(25), + borderRadius: 10, + }, + buttonLabel: { + fontWeight: '700', + fontSize: normalize(15), + lineHeight: normalize(17.8), + letterSpacing: normalize(1.3), + textAlign: 'center', + }, + iconCarrier: { + width: SCREEN_WIDTH * 0.15, + height: SCREEN_HEIGHT * 0.2, + borderRadius: SCREEN_WIDTH * 0.1, + backgroundColor: 'rgba(0, 0, 0, 0.3)', + position: 'absolute', + right: SCREEN_WIDTH * 0.025, + top: SCREEN_HEIGHT * 0.2, + flexDirection: 'column', + justifyContent: 'space-evenly', + alignItems: 'center', + }, + iconText: { + color: 'white', + fontSize: 10, + }, + media: { + zIndex: 0, + flex: 1, + }, + videoParent: { + flex: 1, + }, + zoomView: { + backgroundColor: 'black', + flex: 1, + }, + volumnIcon: { + width: 25, + height: 25, + }, +}); + +export default EditMedia; diff --git a/src/screens/upload/index.ts b/src/screens/upload/index.ts new file mode 100644 index 00000000..0dadeede --- /dev/null +++ b/src/screens/upload/index.ts @@ -0,0 +1 @@ +export {default as EditMedia} from './EditMedia'; -- cgit v1.2.3-70-g09d2 From a5affe6d815e9a86ce4100e9a4c0709ae42a4f2b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 17:59:52 -0400 Subject: Rename trimmer --- src/components/moments/TrimmerPlayer.tsx | 107 +++++++++++++++++++++++++++++++ src/components/moments/index.ts | 1 + src/components/moments/trimmer.tsx | 98 ---------------------------- src/screens/upload/EditMedia.tsx | 2 +- 4 files changed, 109 insertions(+), 99 deletions(-) create mode 100644 src/components/moments/TrimmerPlayer.tsx delete mode 100644 src/components/moments/trimmer.tsx (limited to 'src/screens/upload') diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx new file mode 100644 index 00000000..4d6a8985 --- /dev/null +++ b/src/components/moments/TrimmerPlayer.tsx @@ -0,0 +1,107 @@ +import React, {useEffect, useRef, useState} from 'react'; +import Video from 'react-native-video'; +import {Trimmer} from 'react-native-video-processing'; +import {SCREEN_WIDTH} from '../../utils'; + +interface TrimmerPlayerProps { + source: string; + videoStyles: Object; + hideTrimmer: boolean; + handleLoad: Function; + onChangedEndpoints: Function; +} + +const TrimmerPlayer: React.FC = ({ + source, + videoStyles, + hideTrimmer, + handleLoad, + onChangedEndpoints, +}) => { + // Stores the reference to player for seeking + const playerRef = useRef ); }; @@ -447,6 +432,10 @@ const styles = StyleSheet.create({ width: 25, height: 25, }, + bottomContainer: { + width: SCREEN_WIDTH * 0.7, + justifyContent: 'space-between', + }, }); export default EditMedia; -- cgit v1.2.3-70-g09d2 From 1e0f1c0c6200af5d4f9554778341d991b47381da Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 18:47:19 -0400 Subject: Add styling --- src/components/camera/SaveButton.tsx | 7 ++++--- src/screens/upload/EditMedia.tsx | 31 ++++++++++++++++++------------- 2 files changed, 22 insertions(+), 16 deletions(-) (limited to 'src/screens/upload') diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx index 104e7c30..d1b87e65 100644 --- a/src/components/camera/SaveButton.tsx +++ b/src/components/camera/SaveButton.tsx @@ -1,18 +1,19 @@ import React from 'react'; -import {Text, TouchableOpacity} from 'react-native'; +import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native'; import SaveIcon from '../../assets/icons/camera/save.svg'; import {styles} from './styles'; interface SaveButtonProps { onPress: () => void; + style?: StyleProp; } /* * Appears when a picture has been taken, * On click, saves the captured image to "Recents" album on device gallery */ -export const SaveButton: React.FC = ({onPress}) => ( - +export const SaveButton: React.FC = ({onPress, style}) => ( + Save diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx index 92b93888..1d42e675 100644 --- a/src/screens/upload/EditMedia.tsx +++ b/src/screens/upload/EditMedia.tsx @@ -340,8 +340,12 @@ export const EditMedia: React.FC = ({route, navigation}) => { )} - processVideo(saveImageToGallery)} /> + processVideo(saveImageToGallery)} + /> processVideo((uri) => navigation.navigate('CaptionScreen', { @@ -355,10 +359,9 @@ export const EditMedia: React.FC = ({route, navigation}) => { ) } title={'Next'} - buttonStyle={'normal'} + buttonStyle={'large'} buttonColor={'blue'} labelColor={'white'} - style={styles.button} labelStyle={styles.buttonLabel} /> @@ -379,14 +382,20 @@ const styles = StyleSheet.create({ zIndex: 1, marginLeft: '5%', }, + bottomContainer: { + width: SCREEN_WIDTH * 0.8, + justifyContent: 'space-between', + marginBottom: SCREEN_HEIGHT * 0.1, + alignItems: 'center', + alignSelf: 'center', + flexDirection: 'row', + }, + saveButton: { + width: 50, + }, button: { - zIndex: 1, - position: 'absolute', - bottom: normalize(20), - right: normalize(15), width: normalize(108), - height: normalize(25), - borderRadius: 10, + height: normalize(36), }, buttonLabel: { fontWeight: '700', @@ -432,10 +441,6 @@ const styles = StyleSheet.create({ width: 25, height: 25, }, - bottomContainer: { - width: SCREEN_WIDTH * 0.7, - justifyContent: 'space-between', - }, }); export default EditMedia; -- cgit v1.2.3-70-g09d2 From cce1f4ad7f3331ef5c111423fe46fc1d59c7638d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 18:51:34 -0400 Subject: Clean up styles, Fix save to gallery --- src/screens/upload/EditMedia.tsx | 61 ++++++++++++++++++++++------------------ src/utils/camera.ts | 7 +++-- 2 files changed, 39 insertions(+), 29 deletions(-) (limited to 'src/screens/upload') diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx index 1d42e675..e53e2e43 100644 --- a/src/screens/upload/EditMedia.tsx +++ b/src/screens/upload/EditMedia.tsx @@ -339,32 +339,38 @@ export const EditMedia: React.FC = ({route, navigation}) => { )} - - processVideo(saveImageToGallery)} - /> - - processVideo((uri) => - navigation.navigate('CaptionScreen', { - screenType, - media: { - uri: uri, - isVideo: media.isVideo, - }, - selectedCategory, - }), - ) - } - title={'Next'} - buttonStyle={'large'} - buttonColor={'blue'} - labelColor={'white'} - labelStyle={styles.buttonLabel} - /> - + {hideTrimmer && ( + + + processVideo((uri) => + saveImageToGallery(uri, media.isVideo ? 'video' : 'photo'), + ) + } + /> + + processVideo((uri) => + navigation.navigate('CaptionScreen', { + screenType, + media: { + uri: uri, + isVideo: media.isVideo, + }, + selectedCategory, + }), + ) + } + title={'Next'} + buttonStyle={'large'} + buttonColor={'blue'} + labelColor={'white'} + labelStyle={styles.buttonLabel} + /> + + )} ); }; @@ -383,9 +389,10 @@ const styles = StyleSheet.create({ marginLeft: '5%', }, bottomContainer: { + position: 'absolute', + bottom: SCREEN_HEIGHT * 0.1, width: SCREEN_WIDTH * 0.8, justifyContent: 'space-between', - marginBottom: SCREEN_HEIGHT * 0.1, alignItems: 'center', alignSelf: 'center', flexDirection: 'row', diff --git a/src/utils/camera.ts b/src/utils/camera.ts index 5485b1ca..9d7ff67f 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -48,8 +48,11 @@ export const takeVideo = ( } }; -export const saveImageToGallery = (capturedImageURI: string) => { - CameraRoll.save(capturedImageURI, {album: 'Recents', type: 'photo'}) +export const saveImageToGallery = ( + capturedImageURI: string, + type: 'photo' | 'video', +) => { + CameraRoll.save(capturedImageURI, {album: 'Recents', type: type}) .then((_res) => Alert.alert('Saved to device!')) .catch((_err) => Alert.alert('Failed to save to device!')); }; -- cgit v1.2.3-70-g09d2 From 16f649033125ae7b51aa7af4115ea9190a115d6f Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/screens/upload') 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 = ({route, navigation}) => { - const {screenType, media, selectedCategory} = route.params; + const { + screenType, + selectedCategory, + media: {isVideo}, + } = route.params; const [aspectRatio, setAspectRatio] = useState(1); // width and height of video, if video const [origDimensions, setOrigDimensions] = useState([0, 0]); + const [mediaUri, setMediaUri] = useState(route.params.media.uri); const vidRef = useRef(null); const [cropLoading, setCropLoading] = useState(false); const [hideTrimmer, setHideTrimmer] = useState(true); @@ -64,15 +69,15 @@ export const EditMedia: React.FC = ({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 = ({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 = ({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 = ({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 = ({route, navigation}) => { } setCropLoading(true); trimVideo( - media.uri, + mediaUri, (trimmedURL: string) => cropVideo( trimmedURL, @@ -214,7 +219,7 @@ export const EditMedia: React.FC = ({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 = ({route, navigation}) => { return ( {cropLoading && } - navigation.goBack()}> - - - {!media.isVideo ? ( + {hideTrimmer && ( + navigation.goBack()}> + + + )} + {!hideTrimmer && ( + + setHideTrimmer(true)}> + Cancel + + setHideTrimmer(true)}> + Save + + + )} + {!isVideo ? ( = ({route, navigation}) => { @@ -277,6 +294,7 @@ export const EditMedia: React.FC = ({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 = ({route, navigation}) => { = ({route, navigation}) => { )} - {media.isVideo && ( + {isVideo && hideTrimmer && ( = ({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 = ({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 From 95410f705f15f0eab611400c1b9fda4830503815 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 16 Jul 2021 19:20:28 -0400 Subject: Fix trimmer logic --- src/components/moments/TrimmerPlayer.tsx | 51 ++++++++++++++++++-------------- src/screens/upload/EditMedia.tsx | 35 ++++++++++++++-------- 2 files changed, 50 insertions(+), 36 deletions(-) (limited to 'src/screens/upload') 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 = ({ // Callback so parent knows where the trimming endpts are useEffect(() => onChangedEndpoints({end, start}), [end, start]); + useEffect(() => { + playerRef.current?.seek(0); + }, [hideTrimmer]); + return ( <> -- cgit v1.2.3-70-g09d2