diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/moments/TrimmerPlayer.tsx | 56 |
1 files changed, 34 insertions, 22 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; |