From e9678b4dc94f04c192ad5573bb2debc6e28f21b6 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Fri, 9 Jul 2021 16:22:26 -0400
Subject: Fix cropping bug. Updated the source to be the correct higher res
 video.

---
 src/components/moments/trimmer.tsx    | 129 ++++++++++++++++++++++++++++++++++
 src/screens/moments/CameraScreen.tsx  |   4 +-
 src/screens/profile/CaptionScreen.tsx |   2 +-
 src/utils/trimmer.tsx                 | 106 ----------------------------
 4 files changed, 132 insertions(+), 109 deletions(-)
 create mode 100644 src/components/moments/trimmer.tsx
 delete mode 100644 src/utils/trimmer.tsx

(limited to 'src')

diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
new file mode 100644
index 00000000..ebf0d59e
--- /dev/null
+++ b/src/components/moments/trimmer.tsx
@@ -0,0 +1,129 @@
+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 / 2, //need to divide by two for bug in module
+      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));
+  };
+
+  /*
+  const [tempSource, setSource] = useState<string>(source);
+  const getCompressedVideo = () => {
+    console.log(source);
+    //ProcessingManager.getVideoInfo(source, (info) => console.log('info', info));
+
+    ProcessingManager.compress(source, {
+      width: 720,
+      height: 1280,
+      bitrateMultiplier: 3,
+      saveToCameraRoll: true, // default is false, iOS only
+      saveWithCurrentDate: true, // default is false, iOS only
+      minimumBitrate: 300000,
+      removeAudio: true, // default is false
+    }).then((data: string) => {
+      //console.log('compressed', data);
+      setSource(data);
+    });
+  };
+  useEffect(() => {
+    getCompressedVideo();
+  }, []); */
+
+  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, source);
+          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={'white'} // iOS only
+        onChange={(e) => {
+          //console.log('endsChange', e);
+          setPaused(true);
+          setEnd(e.endTime);
+          setStart(e.startTime);
+        }}
+      />
+    </>
+  );
+};
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 75638c40..7643f6ab 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -186,9 +186,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
                 } else {
                   // is this a video?
                   if (media.duration !== null) {
-                    navigateToCaptionScreen(true, media.path);
+                    navigateToCaptionScreen(true, media.sourceURL);
                   } else {
-                    navigateToCropper(media.path);
+                    navigateToCropper(media.sourceURL);
                   }
                 }
               }}
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 4b5ac0c5..9816f1a3 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -42,7 +42,7 @@ import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-import {TrimmerPlayer} from '../../utils/trimmer';
+import {TrimmerPlayer} from '../../components/moments/trimmer';
 /**
  * Upload Screen to allow users to upload posts to Tagg
  */
diff --git a/src/utils/trimmer.tsx b/src/utils/trimmer.tsx
deleted file mode 100644
index 11d93ea8..00000000
--- a/src/utils/trimmer.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-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);
-        }}
-      />
-    </>
-  );
-};
-- 
cgit v1.2.3-70-g09d2