Incorportated the trimmer component on the zoom inn croppper page. Trimmer is hidden. Will incorporate trimmer soon.

2 files changed, 16 insertions, 23 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 6f8ff97c..5fad89e6 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -10,12 +10,14 @@ import {MainStackParams} from '../../routes';
 import {
   cropVideo,
   HeaderHeight,
+  numberWithCommas,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
 import {TaggSquareButton} from '../common';
 import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 import Video from 'react-native-video';
+import {TrimmerPlayer} from '../moments/trimmer';
 
 type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
 type ZoomInCropperNavigationProps = StackNavigationProp<
@@ -304,19 +306,18 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           }}
           style={styles.zoomView}>
           <View style={styles.videoParent} ref={vidRef}>
-            <Video
-              source={{uri: media.uri}}
-              volume={1}
-              style={[
+            <TrimmerPlayer
+              hideTrimmer={false}
+              source={media.uri}
+              videoStyles={[
                 styles.media,
                 {
                   height: SCREEN_WIDTH / aspectRatio,
                 },
               ]}
-              repeat={true}
-              resizeMode={'contain'}
-              onLoad={(response) => {
-                const {width, height} = response.naturalSize;
+              handleLoad={(response: Object) => {
+                console.log(response);
+                const {width, height} = response;
                 setOrigDimensions([width, height]);
                 setAspectRatio(width / height);
               }}
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index f011d222..2bd3eb41 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -1,13 +1,14 @@
 import React, {useEffect, useState} from 'react';
 import Video from 'react-native-video';
-import {Trimmer, ProcessingManager} from 'react-native-video-processing';
+import {Trimmer} from 'react-native-video-processing';
 import {useRef} from 'react';
 
 export const TrimmerPlayer: React.FC<{
   source: string;
-  styles: Object;
+  videoStyles: Object;
   hideTrimmer: boolean;
-}> = ({source, styles, hideTrimmer}) => {
+  handleLoad: Function;
+}> = ({source, videoStyles, hideTrimmer, handleLoad}) => {
   const playerRef = useRef<Video>();
 
   const [seekTime, setSeekTime] = useState<number>(0);
@@ -35,16 +36,6 @@ export const TrimmerPlayer: React.FC<{
     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',
-    }).then((data: any) => console.log('trim', data));
-  };
-
   return (
     <>
       <Video
@@ -56,11 +47,12 @@ export const TrimmerPlayer: React.FC<{
         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.
+        resizeMode={'contain'}
         repeat={true} // Repeat forever.
         onLoad={(payload) => {
           console.log(payload, source);
           setEnd(payload.duration);
+          handleLoad(payload.naturalSize);
         }}
         onProgress={(e) => {
           if (!paused) {
@@ -69,7 +61,7 @@ export const TrimmerPlayer: React.FC<{
         }} // Callback every ~250ms with currentTime
         //onEnd={() => console.log('end')} // Callback when playback finishes
         //onError={this.videoError} // Callback when video cannot be loaded
-        style={styles}
+        style={videoStyles}
         onTouchEnd={() => {
           setPaused((state) => !state);
         }}