diff options
Diffstat (limited to 'src/utils')
-rw-r--r-- | src/utils/trimmer.tsx | 106 |
1 files changed, 0 insertions, 106 deletions
diff --git a/src/utils/trimmer.tsx b/src/utils/trimmer.tsx deleted file mode 100644 index 11d93ea8..00000000 --- a/src/utils/trimmer.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, {useEffect, useState} from 'react'; -import Video from 'react-native-video'; -import {Trimmer, ProcessingManager} from 'react-native-video-processing'; -import {useRef} from 'react'; - -export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({ - source, - styles, -}) => { - const playerRef = useRef<Video>(); - - const [seekTime, setSeekTime] = useState<number>(0); - const [paused, setPaused] = useState<boolean>(false); - useEffect(() => { - playerRef.current?.seek(seekTime); - }, [seekTime]); - - const [trackerTime, setTrackerTime] = useState<number>(0); - useEffect(() => { - if (!paused && (trackerTime >= end || trackerTime < start)) { - console.log('trackerTime reset start', start); - setTrackerTime(start); - playerRef.current?.seek(start); - } - }, [trackerTime]); - - const [end, setEnd] = useState<number>(60); - const [start, setStart] = useState<number>(0); - useEffect(() => { - setSeekTime(start); - setTrackerTime(start); - }, [start]); - useEffect(() => { - setSeekTime(end); - setTrackerTime(end - 0.1); - }, [end]); - - const trim = () => { - ProcessingManager.trim(source, { - startTime: start, - endTime: end, - saveToCameraRoll: true, // default is false // iOS only - saveWithCurrentDate: true, // default is false // iOS only - quality: 'highest', - }) // like VideoPlayer compress options - .then((data: any) => console.log(data)); - }; - - return ( - <> - <Video - ref={(ref) => { - playerRef.current = ref || undefined; - }} - source={{uri: source}} // Looks for .mp4 file (background.mp4) in the given expansion version. - rate={1.0} // 0 is paused, 1 is normal. - 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. - repeat={true} // Repeat forever. - //onLoadStart={this.loadStart} // Callback when video starts to load - onLoad={(payload) => { - console.log(payload); - setEnd(payload.duration); - }} // Callback when video loads - onProgress={(e) => { - //console.log('progress', e.currentTime); - if (!paused) { - // make sure within bounds - setTrackerTime(e.currentTime); - } - }} // Callback every ~250ms with currentTime - //onEnd={() => console.log('end')} // Callback when playback finishes - //onError={this.videoError} // Callback when video cannot be loaded - style={styles} - onTouchEnd={() => { - //setPaused((state) => !state); - trim(); - }} - /> - <Trimmer - source={source} - height={100} - width={350} - onTrackerMove={(e) => { - //console.log('trackerMove', e); - setPaused(true); - setSeekTime(e.currentTime); - }} // iOS only - // added .25 bc tracker is inaccurate - currentTime={trackerTime + 0.25} // use this prop to set tracker position iOS only - themeColor={'white'} // iOS only - showTrackerHandle={true} - thumbWidth={10} // iOS only - trackerColor={'green'} // iOS only - onChange={(e) => { - //console.log('endsChange', e); - setPaused(true); - setEnd(e.endTime); - setStart(e.startTime); - }} - /> - </> - ); -}; |