Add the libraries built in ui for trimming. Try to figure out its features - very broken and very poor code. For testing purposes.

1 files changed, 39 insertions, 5 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index fac00f21..c6cf767f 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -43,6 +43,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';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
@@ -197,6 +198,11 @@ 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 />}
@@ -223,11 +229,39 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               {...{title: moment ? moment.moment_category : title ?? ''}}
             />
             {isMediaAVideo ? (
-              <Video
-                style={styles.media}
-                source={{uri: mediaUri}}
-                repeat={true}
-              />
+              <>
+                <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);
+                  }}
+                />
+              </>
             ) : (
               <Image
                 style={styles.media}