Initial sidebar

1 files changed, 27 insertions, 2 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index b4333cbb..061964a8 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,7 @@
 import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useRef, useState} from 'react';
-import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
 import PhotoManipulator from 'react-native-photo-manipulator';
@@ -17,6 +17,8 @@ import {
 import {TaggSquareButton, TaggLoadingIndicator} from '../common';
 import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 import {TrimmerPlayer} from '../moments/trimmer';
+import TrimIcon from '../../assets/icons/trim.svg';
+import VolumeOnIcon from '../../assets/icons/volume-on.svg';
 
 type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
 type ZoomInCropperNavigationProps = StackNavigationProp<
@@ -344,7 +346,14 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           </View>
         </ReactNativeZoomableView>
       )}
-
+      {!checkIfUriImage(media.uri) && (
+        <View style={styles.iconCarrier}>
+          <TrimIcon />
+          <Text style={styles.iconText}>Trim</Text>
+          <VolumeOnIcon />
+          <Text style={styles.iconText}>Volume</Text>
+        </View>
+      )}
       <TaggSquareButton
         onPress={handleNext}
         title={'Next'}
@@ -387,6 +396,22 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(1.3),
     textAlign: 'center',
   },
+  iconCarrier: {
+    width: SCREEN_WIDTH * 0.15,
+    height: SCREEN_HEIGHT * 0.2,
+    borderRadius: SCREEN_WIDTH * 0.1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    position: 'absolute',
+    right: SCREEN_WIDTH * 0.025,
+    top: SCREEN_HEIGHT * 0.2,
+    flexDirection: 'column',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+  },
+  iconText: {
+    color: 'white',
+    fontSize: 10,
+  },
   media: {
     zIndex: 0,
     flex: 1,