From a5affe6d815e9a86ce4100e9a4c0709ae42a4f2b Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 16 Jul 2021 17:59:52 -0400
Subject: Rename trimmer

---
 src/components/moments/TrimmerPlayer.tsx | 107 +++++++++++++++++++++++++++++++
 src/components/moments/index.ts          |   1 +
 src/components/moments/trimmer.tsx       |  98 ----------------------------
 src/screens/upload/EditMedia.tsx         |   2 +-
 4 files changed, 109 insertions(+), 99 deletions(-)
 create mode 100644 src/components/moments/TrimmerPlayer.tsx
 delete mode 100644 src/components/moments/trimmer.tsx

(limited to 'src')

diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx
new file mode 100644
index 00000000..4d6a8985
--- /dev/null
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -0,0 +1,107 @@
+import React, {useEffect, useRef, useState} from 'react';
+import Video from 'react-native-video';
+import {Trimmer} from 'react-native-video-processing';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface TrimmerPlayerProps {
+  source: string;
+  videoStyles: Object;
+  hideTrimmer: boolean;
+  handleLoad: Function;
+  onChangedEndpoints: Function;
+}
+
+const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
+  source,
+  videoStyles,
+  hideTrimmer,
+  handleLoad,
+  onChangedEndpoints,
+}) => {
+  // Stores the reference to player for seeking
+  const playerRef = useRef<Video>();
+  // Stores where the video is playing (seekTime)
+  const [seekTime, setSeekTime] = useState<number>(0);
+  const [paused, setPaused] = useState<boolean>(false);
+  // Stores where the tracker is
+  const [trackerTime, setTrackerTime] = useState<number>(0);
+  // Stores start/end of desired trimmed video
+  const [end, setEnd] = useState<number>(60);
+  const [start, setStart] = useState<number>(0);
+
+  useEffect(() => {
+    playerRef.current?.seek(seekTime);
+  }, [seekTime]);
+  useEffect(() => {
+    if (!paused && (trackerTime >= end || trackerTime < start)) {
+      setTrackerTime(start);
+      playerRef.current?.seek(start);
+    }
+  }, [trackerTime]);
+  useEffect(() => {
+    setSeekTime(start);
+    setTrackerTime(start);
+  }, [start]);
+  useEffect(() => {
+    setSeekTime(end);
+    setTrackerTime(start);
+  }, [end]);
+  // Callback so parent knows where the trimming endpts are
+  useEffect(() => onChangedEndpoints({end, start}), [end, start]);
+
+  return (
+    <>
+      <Video
+        // link to descr and use of props of video player ->
+        // https://github.com/react-native-video/react-native-video
+        ref={(ref) => {
+          playerRef.current = ref || undefined;
+        }}
+        source={{uri: source}}
+        rate={1.0}
+        volume={1.0}
+        muted={false}
+        paused={paused}
+        resizeMode={'contain'}
+        repeat={true}
+        onLoad={(payload) => {
+          console.log(payload, source);
+          setEnd(payload.duration);
+          handleLoad(payload.naturalSize);
+        }}
+        onProgress={(e) => {
+          if (!paused) {
+            setTrackerTime(e.currentTime);
+          }
+        }} // Callback every ~250ms with currentTime
+        style={videoStyles}
+        onTouchEnd={() => {
+          setPaused((state) => !state);
+        }}
+      />
+      <Trimmer
+        // link to descr and use of props for trimmer ->
+        // https://github.com/shahen94/react-native-video-processing
+        source={source}
+        height={hideTrimmer ? 0 : 75}
+        width={hideTrimmer ? 0 : SCREEN_WIDTH}
+        borderWidth={hideTrimmer ? 0 : 100}
+        onTrackerMove={(e: {currentTime: number}) => {
+          setPaused(true);
+          setSeekTime(e.currentTime);
+        }}
+        currentTime={trackerTime}
+        themeColor={'white'}
+        thumbWidth={10}
+        trackerColor={'white'}
+        onChange={(e: {endTime: number; startTime: number}) => {
+          setPaused(true);
+          setEnd(e.endTime);
+          setStart(e.startTime);
+        }}
+      />
+    </>
+  );
+};
+
+export default TrimmerPlayer;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index cac2da2e..95e5c75a 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,3 +3,4 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
 export {default as MomentPost} from './MomentPost';
+export {default as TrimmerPlayer} from './TrimmerPlayer';
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
deleted file mode 100644
index c99eaa6f..00000000
--- a/src/components/moments/trimmer.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import Video from 'react-native-video';
-import {Trimmer} from 'react-native-video-processing';
-import {useRef} from 'react';
-import {SCREEN_WIDTH} from '../../utils';
-
-export const TrimmerPlayer: React.FC<{
-  source: string;
-  videoStyles: Object;
-  hideTrimmer: boolean;
-  handleLoad: Function;
-  onChangedEndpoints: Function;
-}> = ({source, videoStyles, hideTrimmer, handleLoad, onChangedEndpoints}) => {
-  // Stores the reference to player for seeking
-  const playerRef = useRef<Video>();
-  // Stores where the video is playing (seekTime)
-  const [seekTime, setSeekTime] = useState<number>(0);
-  const [paused, setPaused] = useState<boolean>(false);
-  // Stores where the tracker is
-  const [trackerTime, setTrackerTime] = useState<number>(0);
-  // Stores start/end of desired trimmed video
-  const [end, setEnd] = useState<number>(60);
-  const [start, setStart] = useState<number>(0);
-
-  useEffect(() => {
-    playerRef.current?.seek(seekTime);
-  }, [seekTime]);
-  useEffect(() => {
-    if (!paused && (trackerTime >= end || trackerTime < start)) {
-      setTrackerTime(start);
-      playerRef.current?.seek(start);
-    }
-  }, [trackerTime]);
-  useEffect(() => {
-    setSeekTime(start);
-    setTrackerTime(start);
-  }, [start]);
-  useEffect(() => {
-    setSeekTime(end);
-    setTrackerTime(start);
-  }, [end]);
-  // Callback so parent knows where the trimming endpts are
-  useEffect(() => onChangedEndpoints({end, start}), [end, start]);
-
-  return (
-    <>
-      <Video
-        // link to descr and use of props of video player ->
-        // https://github.com/react-native-video/react-native-video
-        ref={(ref) => {
-          playerRef.current = ref || undefined;
-        }}
-        source={{uri: source}}
-        rate={1.0}
-        volume={1.0}
-        muted={false}
-        paused={paused}
-        resizeMode={'contain'}
-        repeat={true}
-        onLoad={(payload) => {
-          console.log(payload, source);
-          setEnd(payload.duration);
-          handleLoad(payload.naturalSize);
-        }}
-        onProgress={(e) => {
-          if (!paused) {
-            setTrackerTime(e.currentTime);
-          }
-        }} // Callback every ~250ms with currentTime
-        style={videoStyles}
-        onTouchEnd={() => {
-          setPaused((state) => !state);
-        }}
-      />
-      <Trimmer
-        // link to descr and use of props for trimmer ->
-        // https://github.com/shahen94/react-native-video-processing
-        source={source}
-        height={hideTrimmer ? 0 : 75}
-        width={hideTrimmer ? 0 : SCREEN_WIDTH}
-        borderWidth={hideTrimmer ? 0 : 100}
-        onTrackerMove={(e: {currentTime: number}) => {
-          setPaused(true);
-          setSeekTime(e.currentTime);
-        }}
-        currentTime={trackerTime}
-        themeColor={'white'}
-        thumbWidth={10}
-        trackerColor={'white'}
-        onChange={(e: {endTime: number; startTime: number}) => {
-          setPaused(true);
-          setEnd(e.endTime);
-          setStart(e.startTime);
-        }}
-      />
-    </>
-  );
-};
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index ed5cd0d7..d25a0fb9 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -8,8 +8,8 @@ import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import PhotoManipulator from 'react-native-photo-manipulator';
 import TrimIcon from '../../assets/icons/trim.svg';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {TrimmerPlayer} from '../../components';
 import {TaggLoadingIndicator, TaggSquareButton} from '../../components/common';
-import {TrimmerPlayer} from '../../components/moments/trimmer';
 import {MainStackParams} from '../../routes';
 import {
   cropVideo,
-- 
cgit v1.2.3-70-g09d2