Merge pull request #475 from IvanIFChen/tma948-video-playback

[TMA-948] Viewing Videos

2 files changed, 66 insertions, 50 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index bdd1fbeb..d8a70353 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -1,4 +1,5 @@
-import React, {createRef, MutableRefObject, useEffect, useState} from 'react';
+import React, {createRef, RefObject, useEffect, useState} from 'react';
+import {Image, View} from 'react-native';
 import {MomentTagType, ProfilePreviewType} from '../../types';
 import TaggDraggable from '../taggs/TaggDraggable';
 import Draggable from './Draggable';
@@ -7,7 +8,7 @@ interface MomentTagsProps {
   editing: boolean;
   tags: MomentTagType[];
   setTags: (tag: MomentTagType[]) => void;
-  imageRef: MutableRefObject<null>;
+  imageRef: RefObject<Image>;
   deleteFromList?: (user: ProfilePreviewType) => void;
 }
 
@@ -21,14 +22,9 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [offset, setOffset] = useState([0, 0]);
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
-  const [draggableRefs, setDraggableRefs] = useState<
-    React.MutableRefObject<null>[]
-  >([]);
+  const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
 
-  const updateTagPosition = (
-    ref: React.MutableRefObject<null>,
-    userId: string,
-  ) => {
+  const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
     if (ref !== null && ref.current !== null) {
       ref.current.measure(
         (
@@ -66,19 +62,21 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   useEffect(() => {
     setTimeout(
       () => {
-        imageRef.current.measure(
-          (
-            fx: number, // location of ref relative to parent element
-            fy: number,
-            width: number,
-            height: number,
-            _x: number, // location of ref relative to entire screen
-            _y: number,
-          ) => {
-            setOffset([fx, fy]);
-            setImageDimensions([width, height]);
-          },
-        );
+        if (imageRef && imageRef.current) {
+          imageRef.current.measure(
+            (
+              fx: number, // location of ref relative to parent element
+              fy: number,
+              width: number,
+              height: number,
+              _x: number, // location of ref relative to entire screen
+              _y: number,
+            ) => {
+              setOffset([fx, fy]);
+              setImageDimensions([width, height]);
+            },
+          );
+        }
       },
       editing ? 100 : 0,
     );
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 747e0bb5..7967fdbc 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,21 +1,29 @@
 import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
-import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
+import {ScrollView, StyleSheet, View} from 'react-native';
+import {Suggestion} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_WIDTH, shuffle} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
-const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
+type TaggTypeaheadProps = {
+  keyword: string | undefined;
+  component: string | undefined;
+  onSuggestionPress: (suggestion: Suggestion) => void;
+};
+
+const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   keyword,
+  component,
   onSuggestionPress,
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
   const [height, setHeight] = useState(0);
+  const margin = component === 'comment' ? -10 : 0;
 
   useEffect(() => {
     if (keyword === '') {
@@ -42,40 +50,50 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
   }
 
   return (
-    <ScrollView
-      style={[styles.container, {top: -(height + 30)}]}
-      showsVerticalScrollIndicator={false}
-      onLayout={(event) => {
-        setHeight(event.nativeEvent.layout.height);
-      }}
-      keyboardShouldPersistTaps={'always'}>
-      {results.map((user) => (
-        <TaggUserRowCell
-          onPress={() => {
-            setResults([]);
-            onSuggestionPress({
-              id: user.id,
-              name: user.username,
-            });
-          }}
-          user={user}
-        />
-      ))}
-    </ScrollView>
+    <View>
+      <View style={styles.overlay} />
+      <ScrollView
+        style={[styles.container, {top: -height, margin: margin}]}
+        showsVerticalScrollIndicator={false}
+        onLayout={(event) => {
+          setHeight(event.nativeEvent.layout.height);
+        }}
+        keyboardShouldPersistTaps={'always'}>
+        {results.map((user) => (
+          <TaggUserRowCell
+            onPress={() => {
+              setResults([]);
+              onSuggestionPress({
+                id: user.id,
+                name: user.username,
+              });
+            }}
+            user={user}
+          />
+        ))}
+      </ScrollView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginLeft: SCREEN_WIDTH * 0.05,
-    width: SCREEN_WIDTH * 0.9,
+    width: SCREEN_WIDTH,
     maxHeight: 264,
-    borderRadius: 10,
     backgroundColor: 'white',
     position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
-    borderWidth: 1,
+  },
+  overlay: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'gray',
+    opacity: 0.4,
+    position: 'absolute',
+    alignSelf: 'center',
+    bottom: 10,
+    zIndex: -1,
   },
 });