Add states and components for video trimming.

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);
+        }}
+      />
+    </>
+  );
+};