diff options
| -rw-r--r-- | src/components/moments/TrimmerPlayer.tsx | 56 | ||||
| -rw-r--r-- | src/screens/upload/EditMedia.tsx | 39 |
2 files changed, 61 insertions, 34 deletions
diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx index 4d6a8985..ef829637 100644 --- a/src/components/moments/TrimmerPlayer.tsx +++ b/src/components/moments/TrimmerPlayer.tsx @@ -1,7 +1,8 @@ import React, {useEffect, useRef, useState} from 'react'; +import {StyleSheet, View} from 'react-native'; import Video from 'react-native-video'; import {Trimmer} from 'react-native-video-processing'; -import {SCREEN_WIDTH} from '../../utils'; +import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; interface TrimmerPlayerProps { source: string; @@ -79,29 +80,40 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({ setPaused((state) => !state); }} /> - <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} - borderWidth={hideTrimmer ? 0 : 100} - 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 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> </> ); }; +const styles = StyleSheet.create({ + trimmerContainer: { + position: 'absolute', + bottom: SCREEN_HEIGHT * 0.1, + alignItems: 'center', + borderWidth: 1, + borderColor: 'red', + }, +}); + export default TrimmerPlayer; diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx index d25a0fb9..0494375c 100644 --- a/src/screens/upload/EditMedia.tsx +++ b/src/screens/upload/EditMedia.tsx @@ -3,7 +3,6 @@ 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'; @@ -14,6 +13,7 @@ import {MainStackParams} from '../../routes'; import { cropVideo, HeaderHeight, + normalize, SCREEN_HEIGHT, SCREEN_WIDTH, trimVideo, @@ -36,6 +36,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]); const vidRef = useRef<View>(null); const [cropLoading, setCropLoading] = useState<boolean>(false); + const [hideTrimmer, setHideTrimmer] = useState<boolean>(true); // Stores the coordinates of the cropped image const [x0, setX0] = useState<number>(); @@ -299,7 +300,6 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { zoomStep={0.5} initialZoom={1} bindToBorders={true} - // onZoomAfter={this.logOutZoomState} onDoubleTapAfter={( _1: any, _2: any, @@ -322,7 +322,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { style={styles.zoomView}> <View style={styles.videoParent} ref={vidRef}> <TrimmerPlayer - hideTrimmer={false} + hideTrimmer={hideTrimmer} source={media.uri} videoStyles={[ styles.media, @@ -344,13 +344,22 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => { )} {!checkIfUriImage(media.uri) && ( <View style={styles.iconCarrier}> - <TrimIcon /> - <Text style={styles.iconText}>Trim</Text> - <Image - style={styles.volumnIcon} - source={require('../../assets/images/volume-on.png')} - /> - <Text style={styles.iconText}>Volume</Text> + <TouchableOpacity + style={styles.iconContainer} + onPress={() => setHideTrimmer((state) => !state)}> + <TrimIcon /> + <Text style={styles.iconText}>Trim</Text> + </TouchableOpacity> + <TouchableOpacity + style={styles.iconContainer} + // TODO: finish me + onPress={() => null}> + <Image + style={styles.volumnIcon} + source={require('../../assets/images/volume-on.png')} + /> + <Text style={styles.iconText}>Volume</Text> + </TouchableOpacity> </View> )} <TaggSquareButton @@ -402,14 +411,20 @@ const styles = StyleSheet.create({ backgroundColor: 'rgba(0, 0, 0, 0.3)', position: 'absolute', right: SCREEN_WIDTH * 0.025, - top: SCREEN_HEIGHT * 0.2, + top: SCREEN_HEIGHT * 0.1, flexDirection: 'column', justifyContent: 'space-evenly', alignItems: 'center', }, + iconContainer: { + height: 50, + alignItems: 'center', + justifyContent: 'space-between', + }, iconText: { color: 'white', - fontSize: 10, + fontSize: normalize(11), + fontWeight: 'bold', }, media: { zIndex: 0, |