Add states and components for video trimming.

1 files changed, 3 insertions, 41 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,