Merge pull request #472 from TaggiD-Inc/poc-video

[POC] PoC Video

4 files changed, 44 insertions, 67 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 8a4ec082..33707d94 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -8,12 +8,11 @@ import {
   View,
 } from 'react-native';
 import {useDispatch} from 'react-redux';
-import {TAGG_LIGHT_BLUE} from '../../constants';
 import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {CommentThreadType, CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 import {CommentTextField} from './CommentTextField';
 import MentionInputControlled from './MentionInputControlled';
@@ -174,26 +173,6 @@ const styles = StyleSheet.create({
     flex: 1,
     maxHeight: 100,
   },
-  avatar: {
-    height: 35,
-    width: 35,
-    borderRadius: 30,
-    marginRight: 10,
-    marginLeft: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
-  submitButton: {
-    height: 35,
-    width: 35,
-    backgroundColor: TAGG_LIGHT_BLUE,
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
   whiteBackround: {
     backgroundColor: '#fff',
   },
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 6e92329c..6d86eb3f 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -1,8 +1,8 @@
 import React, {FC, ReactFragment} from 'react';
 import {
   NativeSyntheticEvent,
-  StyleSheet,
   StyleProp,
+  StyleSheet,
   Text,
   TextInput,
   TextInputSelectionChangeEventData,
@@ -10,22 +10,21 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {useSelector} from 'react-redux';
-import {TAGG_LIGHT_BLUE} from '../../constants';
-import {RootState} from '../../store/rootReducer';
 import {
+  MentionPartType,
   Part,
   PartType,
-  MentionPartType,
 } from 'react-native-controlled-mentions/dist/types';
 import {
   defaultMentionTextStyle,
   isMentionPartType,
 } from 'react-native-controlled-mentions/dist/utils';
-import {Avatar} from '../common';
-import {normalize} from '../../utils';
-
+import {useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {normalize} from '../../utils';
+import {Avatar} from '../common';
 
 type CommentTextFieldProps = {
   containerStyle: StyleProp<ViewStyle>;
@@ -40,8 +39,6 @@ type CommentTextFieldProps = {
   ) => null;
   parts: Part[];
   addComment: () => any;
-  theme?: 'dark' | 'white';
-  keyboardVisible?: boolean;
   comment?: string;
 };
 
@@ -56,8 +53,6 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
   handleSelectionChange,
   parts,
   addComment,
-  theme = 'white',
-  keyboardVisible = true,
   comment = '',
   ...textInputProps
 }) => {
@@ -99,20 +94,18 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
             )}
           </Text>
         </TextInput>
-        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
-          <View style={styles.submitButton}>
-            <TouchableOpacity
-              style={
-                comment === ''
-                  ? [styles.submitButton, styles.greyButton]
-                  : styles.submitButton
-              }
-              disabled={comment === ''}
-              onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
-        )}
+        <View style={styles.submitButton}>
+          <TouchableOpacity
+            style={
+              comment === ''
+                ? [styles.submitButton, styles.greyButton]
+                : styles.submitButton
+            }
+            disabled={comment === ''}
+            onPress={addComment}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
       </View>
 
       {validateInput(keyboardText) &&
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index 90514193..d4a93bdd 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -3,27 +3,32 @@ import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import CommentsIcon from '../../assets/icons/moment-comment-icon.svg';
-import {MomentPostType, ScreenType} from '../../types';
+import {ScreenType} from '../../types';
 import {normalize} from '../../utils';
 
 interface CommentsCountProps {
-  moment: MomentPostType;
+  momentId: string;
+  count: number;
   screenType: ScreenType;
 }
 
-const CommentsCount: React.FC<CommentsCountProps> = ({moment, screenType}) => {
+const CommentsCount: React.FC<CommentsCountProps> = ({
+  momentId,
+  count,
+  screenType,
+}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
       style={styles.countContainer}
       onPress={() =>
         navigation.navigate('MomentCommentsScreen', {
-          moment_id: moment.moment_id,
+          moment_id: momentId,
           screenType,
         })
       }>
       <CommentsIcon width={25} height={25} />
-      <Text style={styles.count}>{moment.comments_count}</Text>
+      <Text style={styles.count}>{count}</Text>
     </TouchableOpacity>
   );
 };
diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 94e772b6..7fa88f6e 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,7 @@
 import {RouteProp} from '@react-navigation/core';
 import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {default as React, useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
@@ -25,7 +25,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, title, image} = route.params;
+  const {screenType, title, media} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
 
   // Stores the coordinates of the cropped image
@@ -34,7 +34,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   const [y0, setY0] = useState<number>();
   const [y1, setY1] = useState<number>();
 
-  // Removes bottom navigation bar on current screen and add it back when navigating away
   useFocusEffect(
     useCallback(() => {
       navigation.dangerouslyGetParent()?.setOptions({
@@ -50,9 +49,9 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
 
   // Setting original aspect ratio of image
   useEffect(() => {
-    if (image.sourceURL) {
+    if (media.uri) {
       Image.getSize(
-        image.sourceURL,
+        media.uri,
         (w, h) => {
           setAspectRatio(w / h);
         },
@@ -67,10 +66,9 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
       x0 !== undefined &&
       x1 !== undefined &&
       y0 !== undefined &&
-      y1 !== undefined &&
-      image.sourceURL
+      y1 !== undefined
     ) {
-      PhotoManipulator.crop(image.sourceURL, {
+      PhotoManipulator.crop(media.uri, {
         x: x0,
         y: y1,
         width: Math.abs(x0 - x1),
@@ -80,7 +78,10 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           navigation.navigate('CaptionScreen', {
             screenType,
             title: title,
-            image: {filename: croppedURL, path: croppedURL},
+            media: {
+              uri: croppedURL,
+              isVideo: false,
+            },
           });
         })
         .catch((err) => console.log('err: ', err));
@@ -88,13 +89,12 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
       x0 === undefined &&
       x1 === undefined &&
       y0 === undefined &&
-      y1 === undefined &&
-      image.sourceURL
+      y1 === undefined
     ) {
       navigation.navigate('CaptionScreen', {
         screenType,
         title: title,
-        image: {filename: image.sourceURL, path: image.sourceURL},
+        media,
       });
     }
   };
@@ -104,7 +104,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
    */
   const onMove = (position: IOnMove) => {
     Image.getSize(
-      image.path,
+      media.uri,
       (w, h) => {
         const x = position.positionX;
         const y = position.positionY;
@@ -154,7 +154,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         <Image
           style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
           source={{
-            uri: image.sourceURL,
+            uri: media.uri,
           }}
         />
       </ImageZoom>