Added basic functionality for audio removal

4 files changed, 29 insertions, 4 deletions

diff --git a/src/assets/images/volume-off.png b/src/assets/images/volume-off.png
new file mode 100644
index 00000000..1e9a9286
--- /dev/null
+++ b/src/assets/images/volume-off.png
diff --git a/src/components/moments/TrimmerPlayer.tsx b/src/components/moments/TrimmerPlayer.tsx
index b28df590..87b3a786 100644
--- a/src/components/moments/TrimmerPlayer.tsx
+++ b/src/components/moments/TrimmerPlayer.tsx
@@ -10,6 +10,7 @@ interface TrimmerPlayerProps {
   hideTrimmer: boolean;
   handleLoad: Function;
   onChangedEndpoints: Function;
+  muted: boolean;
 }
 
 const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
@@ -18,6 +19,7 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
   hideTrimmer,
   handleLoad,
   onChangedEndpoints,
+  muted,
 }) => {
   // Stores the reference to player for seeking
   const playerRef = useRef<Video>();
@@ -65,7 +67,7 @@ const TrimmerPlayer: React.FC<TrimmerPlayerProps> = ({
         source={{uri: source}}
         rate={1.0}
         volume={1.0}
-        muted={false}
+        muted={muted}
         paused={paused}
         resizeMode={'contain'}
         repeat={true}
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index 1dc408ee..f9b17d0b 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -67,6 +67,9 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
     start: 0,
   });
 
+  // Stores audio on/off information
+  const [audioOn, setAudioOn] = useState<boolean>(true);
+
   // Setting original aspect ratio of image
   useEffect(() => {
     if (mediaUri && !isVideo) {
@@ -143,6 +146,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           callback(croppedURL);
         },
         videoCrop,
+        !audioOn,
       );
     }
   };
@@ -342,6 +346,7 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
               onChangedEndpoints={(response: {start: number; end: number}) =>
                 setTrimEnds(response)
               }
+              muted={!audioOn}
             />
           </View>
         </ReactNativeZoomableView>
@@ -357,10 +362,14 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
           <TouchableOpacity
             style={styles.iconContainer}
             // TODO: finish me
-            onPress={() => null}>
+            onPress={() => setAudioOn((state) => !state)}>
             <Image
               style={styles.volumnIcon}
-              source={require('../../assets/images/volume-on.png')}
+              source={
+                audioOn
+                  ? require('../../assets/images/volume-on.png')
+                  : require('../../assets/images/volume-off.png')
+              }
             />
             <Text style={styles.iconText}>Volume</Text>
           </TouchableOpacity>
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index 9d7ff67f..c3822858 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -130,6 +130,7 @@ export const cropVideo = (
     cropOffsetX?: number;
     cropOffsetY?: number;
   },
+  muted?: boolean,
 ) => {
   ProcessingManager.crop(sourceUri, {
     cropWidth: videoCropValues
@@ -154,6 +155,19 @@ export const cropVideo = (
       : 0,
     quality: 'highest',
   }).then((data: any) => {
-    handleData(data);
+    if (muted) {
+      removeAudio(data, handleData);
+    } else {
+      handleData(data);
+    }
   });
 };
+
+export const removeAudio = (
+  sourceUri: string,
+  handleData: (data: any) => any,
+) => {
+  ProcessingManager.compress(sourceUri, {removeAudio: true}).then((data: any) =>
+    handleData(data),
+  );
+};