diff options
author | Michael <michael.foiani@gmail.com> | 2021-07-16 14:36:15 -0400 |
---|---|---|
committer | Michael <michael.foiani@gmail.com> | 2021-07-16 14:36:15 -0400 |
commit | 9d77a6c6a9c586ecaaee7efea752360cd5d88b3d (patch) | |
tree | 0dd605d2afc29c7edaecf7f0f793d2a818918680 /src | |
parent | ad3833942ead7c0f030ee8c5d33528a15a6164c2 (diff) |
Update files with pr review.
Diffstat (limited to 'src')
-rw-r--r-- | src/components/moments/trimmer.tsx | 45 |
1 files changed, 24 insertions, 21 deletions
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx index c9e8a6c5..c99eaa6f 100644 --- a/src/components/moments/trimmer.tsx +++ b/src/components/moments/trimmer.tsx @@ -11,24 +11,26 @@ export const TrimmerPlayer: React.FC<{ handleLoad: Function; onChangedEndpoints: Function; }> = ({source, videoStyles, hideTrimmer, handleLoad, onChangedEndpoints}) => { + // Stores the reference to player for seeking const playerRef = useRef<Video>(); - + // Stores where the video is playing (seekTime) const [seekTime, setSeekTime] = useState<number>(0); const [paused, setPaused] = useState<boolean>(false); + // Stores where the tracker is + const [trackerTime, setTrackerTime] = useState<number>(0); + // Stores start/end of desired trimmed video + const [end, setEnd] = useState<number>(60); + const [start, setStart] = useState<number>(0); + useEffect(() => { playerRef.current?.seek(seekTime); }, [seekTime]); - - const [trackerTime, setTrackerTime] = useState<number>(0); useEffect(() => { if (!paused && (trackerTime >= end || trackerTime < 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); @@ -37,22 +39,24 @@ export const TrimmerPlayer: React.FC<{ setSeekTime(end); setTrackerTime(start); }, [end]); - + // Callback so parent knows where the trimming endpts are useEffect(() => onChangedEndpoints({end, start}), [end, start]); return ( <> <Video + // link to descr and use of props of video player -> + // https://github.com/react-native-video/react-native-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. + source={{uri: source}} + rate={1.0} + volume={1.0} + muted={false} + paused={paused} resizeMode={'contain'} - repeat={true} // Repeat forever. + repeat={true} onLoad={(payload) => { console.log(payload, source); setEnd(payload.duration); @@ -63,14 +67,14 @@ export const TrimmerPlayer: React.FC<{ 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={videoStyles} onTouchEnd={() => { 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} @@ -78,12 +82,11 @@ export const TrimmerPlayer: React.FC<{ onTrackerMove={(e: {currentTime: number}) => { setPaused(true); setSeekTime(e.currentTime); - }} // iOS only - currentTime={trackerTime} // added .25 bc tracker is inaccurate - themeColor={'white'} // iOS only - // showTrackerHandle={true} - thumbWidth={10} // iOS only - trackerColor={'white'} // iOS only + }} + currentTime={trackerTime} + themeColor={'white'} + thumbWidth={10} + trackerColor={'white'} onChange={(e: {endTime: number; startTime: number}) => { setPaused(true); setEnd(e.endTime); |