diff options
| -rw-r--r-- | src/screens/profile/CaptionScreen.tsx | 44 | ||||
| -rw-r--r-- | src/utils/camera.ts | 13 | ||||
| -rw-r--r-- | src/utils/trimmer.tsx | 106 |
3 files changed, 110 insertions, 53 deletions
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index c6cf767f..4b5ac0c5 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -15,7 +15,6 @@ import { } from 'react-native'; import {MentionInputControlled} from '../../components'; import {Button, normalize} from 'react-native-elements'; -import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; import {SearchBackground} from '../../components'; @@ -43,8 +42,7 @@ import {RootState} from '../../store/rootReducer'; import {MomentTagType} from '../../types'; import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import {Trimmer, VideoPlayer} from 'react-native-video-processing'; - +import {TrimmerPlayer} from '../../utils/trimmer'; /** * Upload Screen to allow users to upload posts to Tagg */ @@ -198,11 +196,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { } }; - const [currentTime, setCurrentTime] = useState(0); - const [startTime, setStartTime] = useState(0); - // todo: update with vid times - const [endTime, setEndTime] = useState(60); - return ( <SearchBackground> {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />} @@ -229,39 +222,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { {...{title: moment ? moment.moment_category : title ?? ''}} /> {isMediaAVideo ? ( - <> - <VideoPlayer - //style={styles.media} - ref={(ref) => (this.videoPlayerRef = ref)} - startTime={startTime} // seconds - endTime={endTime} // seconds - play={true} // default false - replay={true} // should player play video again if it's ended - //rotate={true} // use this prop to rotate video if it captured in landscape mode iOS only - source={mediaUri} - playerWidth={360} // iOS only - playerHeight={680} // iOS only - //resizeMode={VideoPlayer.Constants.resizeMode.CONTAIN} - onChange={({nativeEvent}) => - setCurrentTime(nativeEvent.currentTime) - } // get Current time on every second - /> - <Trimmer - source={mediaUri} - height={50} - width={350} - onTrackerMove={(e) => setCurrentTime(e.currentTime)} // iOS only - currentTime={currentTime} // 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) => { - setStartTime(e.startTime); - setEndTime(e.endTime); - }} - /> - </> + <TrimmerPlayer source={mediaUri} styles={styles.media} /> ) : ( <Image style={styles.media} @@ -305,6 +266,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => { </SearchBackground> ); }; + const styles = StyleSheet.create({ contentContainer: { paddingTop: StatusBarHeight, diff --git a/src/utils/camera.ts b/src/utils/camera.ts index ccdd42b0..f95499a5 100644 --- a/src/utils/camera.ts +++ b/src/utils/camera.ts @@ -8,10 +8,9 @@ import { TakePictureOptions, TakePictureResponse, } from 'react-native-camera'; -import {ProcessingManager} from 'react-native-video-processing'; + import ImagePicker, {ImageOrVideo, Video} from 'react-native-image-crop-picker'; import {ERROR_UPLOAD} from '../constants/strings'; -import RNFetchBlob from 'rn-fetch-blob'; /* * Captures a photo and pauses to show the preview of the picture taken @@ -69,9 +68,6 @@ export const navigateToImagePicker = ( mediaType: 'any', }) .then((media) => { - const path: String = getVideoPath(media); - ProcessingManager.compress(path, options.compress) // like VideoPlayer compress options - .then((data: any) => console.log(data)); callback(media); }) .catch((err) => { @@ -81,19 +77,12 @@ export const navigateToImagePicker = ( }); }; -const getVideoPath = (uri) => { - console.log(uri); - return uri.path; -}; - export const navigateToVideoPicker = (callback: (vid: Video) => void) => { ImagePicker.openPicker({ mediaType: 'video', }) .then(async (vid) => { if (vid.path) { - ProcessingManager.compress(vid.path, options.compress) // like VideoPlayer compress options - .then((data: any) => console.log(data)); callback(vid); } }) diff --git a/src/utils/trimmer.tsx b/src/utils/trimmer.tsx new file mode 100644 index 00000000..11d93ea8 --- /dev/null +++ b/src/utils/trimmer.tsx @@ -0,0 +1,106 @@ +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); + }} + /> + </> + ); +}; |