More bug fixes (#214)

* add loader component to video * fix image sizing * add back handler for modal dismissals * show recent conversations in chat forward
homebase-id · Sep 25, 2024 · 766b2a4 · 766b2a4
1 parent 85cca2b
commit 766b2a4
Show file tree

Hide file tree

Showing 10 changed files with 393 additions and 101 deletions.
diff --git a/packages/mobile/src/components/Chat/Chat-Forward.tsx b/packages/mobile/src/components/Chat/Chat-Forward.tsx
diff --git a/packages/mobile/src/components/Feed/Interacts/Comments/CommentsModal.tsx b/packages/mobile/src/components/Feed/Interacts/Comments/CommentsModal.tsx
@@ -29,6 +29,7 @@ import { CommentComposer } from './CommentComposer';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { HomebaseFile, ReactionFile } from '@homebase-id/js-lib/core';
 import { t } from 'feed-app-common';
+import { useBottomSheetBackHandler } from '../../../../hooks/useBottomSheetBackHandler';
 
 export interface CommentModalMethods {
   setContext: (context: ReactionContext & CanReactInfo) => void;
@@ -39,6 +40,7 @@ export const CommentsModal = memo(
   forwardRef((_undefined, ref: React.Ref<CommentModalMethods>) => {
     const { isDarkMode } = useDarkMode();
     const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
+    const { handleSheetPositionChange } = useBottomSheetBackHandler(bottomSheetRef);
     const [context, setContext] = useState<ReactionContext & CanReactInfo>();
     const [replyTo, setReplyThread] = useState<
       | {
@@ -134,6 +136,7 @@ export const CommentsModal = memo(
         keyboardBehavior={Platform.OS === 'ios' ? 'extend' : 'interactive'}
         keyboardBlurBehavior={'restore'}
         android_keyboardInputMode="adjustResize"
+        onChange={handleSheetPositionChange}
         index={0}
         backgroundStyle={{
           backgroundColor: isDarkMode ? Colors.gray[900] : Colors.slate[50],

diff --git a/packages/mobile/src/components/Feed/Interacts/PostActionModal.tsx b/packages/mobile/src/components/Feed/Interacts/PostActionModal.tsx
@@ -13,6 +13,7 @@ import { ExternalActions, GroupChannelActions } from '../Meta/Actions';
 import EditGroupPage from '../../../pages/chat/edit-group-page';
 import { EditPostModal } from '../EditPost/EditPostModal';
 import { useSharedValue } from 'react-native-reanimated';
+import { useBottomSheetBackHandler } from '../../../hooks/useBottomSheetBackHandler';
 
 export type PostActionMethods = {
   setContext: (context: PostActionProps) => void;
@@ -44,6 +45,7 @@ export const PostModalAction = memo(
       if (isEditOpen) setIsEditOpen(false);
       if (snapPoints.value[0] === '90%') snapPoints.value = ['50%', '70%'];
     }, [isEditOpen, snapPoints]);
+    const { handleSheetPositionChange } = useBottomSheetBackHandler(bottomSheetRef);
 
     useImperativeHandle(
       ref,
@@ -67,6 +69,7 @@ export const PostModalAction = memo(
       <BottomSheetModal
         ref={bottomSheetRef}
         snapPoints={snapPoints}
+        onChange={handleSheetPositionChange}
         backdropComponent={Backdrop}
         onDismiss={onClose}
         enableDismissOnClose

diff --git a/packages/mobile/src/components/Feed/Interacts/Reactions/PostEmojiPickerModal.tsx b/packages/mobile/src/components/Feed/Interacts/Reactions/PostEmojiPickerModal.tsx
@@ -13,6 +13,7 @@ import { ReactionContext } from '@homebase-id/js-lib/public';
 import { useMyEmojiReactions, useReaction } from '../../../../hooks/reactions';
 import { useDotYouClientContext } from 'feed-app-common';
 import { ErrorNotification } from '../../../ui/Alert/ErrorNotification';
+import { useBottomSheetBackHandler } from '../../../../hooks/useBottomSheetBackHandler';
 
 export type PostEmojiPickerModalMethods = {
   setContext: (context: ReactionContext) => void;
@@ -24,6 +25,7 @@ export const PostEmojiPickerModal = forwardRef(
     const { isDarkMode } = useDarkMode();
     const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
     const [context, setContext] = useState<ReactionContext>();
+    const { handleSheetPositionChange } = useBottomSheetBackHandler(bottomSheetRef);
 
     useImperativeHandle(ref, () => {
       return {
@@ -72,6 +74,7 @@ export const PostEmojiPickerModal = forwardRef(
     return (
       <BottomSheetModal
         ref={bottomSheetRef}
+        onChange={handleSheetPositionChange}
         snapPoints={['70%', '90%']}
         backdropComponent={Backdrop}
         onDismiss={onDismiss}

diff --git a/packages/mobile/src/components/Feed/Interacts/Reactions/PostReactionModal.tsx b/packages/mobile/src/components/Feed/Interacts/Reactions/PostReactionModal.tsx
@@ -10,6 +10,7 @@ import { ReactionContext } from '@homebase-id/js-lib/public';
 import { useEmojiReactions } from '../../../../hooks/reactions';
 import { ReactionFile } from '@homebase-id/js-lib/core';
 import { ReactionTile } from '../../../Chat/Reactions/Modal/ReactionsModal';
+import { useBottomSheetBackHandler } from '../../../../hooks/useBottomSheetBackHandler';
 
 export interface ReactionModalMethods {
   setContext: (context: ReactionContext) => void;
@@ -22,6 +23,7 @@ const ReactionsModal = memo(
     const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
     const [context, setContext] = useState<ReactionContext>();
     const { data: reactionDetails, hasNextPage, fetchNextPage } = useEmojiReactions(context).fetch;
+    const { handleSheetPositionChange } = useBottomSheetBackHandler(bottomSheetRef);
 
     const flattenedReactions = reactionDetails?.pages
       .flatMap((page) => page?.reactions)
@@ -47,6 +49,7 @@ const ReactionsModal = memo(
     return (
       <BottomSheetModal
         ref={bottomSheetRef}
+        onChange={handleSheetPositionChange}
         snapPoints={['50%', '90%']}
         backdropComponent={Backdrop}
         onDismiss={onClose}

diff --git a/packages/mobile/src/components/Feed/Interacts/Share/ShareModal.tsx b/packages/mobile/src/components/Feed/Interacts/Share/ShareModal.tsx
@@ -50,7 +50,7 @@ import {
   ConversationWithYourself,
   UnifiedConversation,
 } from '../../../../provider/chat/ConversationProvider';
-import { ListHeaderComponent, maxConnectionsForward } from '../../../Chat/Chat-Forward';
+import { GroupConversationsComponent, maxConnectionsForward } from '../../../Chat/Chat-Forward';
 import { ChatStackParamList } from '../../../../app/ChatStack';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import { t, useAllConnections } from 'feed-app-common';
@@ -67,6 +67,7 @@ import ConversationTile from '../../../Chat/Conversation-tile';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ConversationTileWithYourself } from '../../../Conversation/ConversationTileWithYourself';
 import { IconButton } from '../../../ui/Buttons';
+import { useBottomSheetBackHandler } from '../../../../hooks/useBottomSheetBackHandler';
 
 export type ShareModalMethods = {
   setShareContext: (context: ShareContext) => void;
@@ -114,6 +115,7 @@ const ShareModalListWrapper = memo(
       const [selectedConversation, setSelectedConversation] = useState<
         HomebaseFile<UnifiedConversation>[]
       >([]);
+      const { handleSheetPositionChange } = useBottomSheetBackHandler(bottomSheetRef);
 
       const onClose = useCallback(() => {
         setContext(undefined);
@@ -155,6 +157,7 @@ const ShareModalListWrapper = memo(
       return (
         <BottomSheetModal
           ref={bottomSheetRef}
+          onChange={handleSheetPositionChange}
           backdropComponent={Backdrop}
           onDismiss={onClose}
           enableDismissOnClose
@@ -695,7 +698,7 @@ const ShareModalList = memo(
         }
         ListFooterComponent={
           //Actually a Group Component
-          <ListHeaderComponent
+          <GroupConversationsComponent
             selectedGroup={selectedConversation}
             setselectedGroup={setSelectedConversation}
           />

diff --git a/packages/mobile/src/components/ui/Media/VideoWithLoader.tsx b/packages/mobile/src/components/ui/Media/VideoWithLoader.tsx
@@ -212,6 +212,18 @@ const HlsVideo = ({ odinId, fileId, targetDrive, globalTransitId, payload }: Loc
       }}
       controls={true}
       resizeMode={'contain'}
+      renderLoader={
+        <ActivityIndicator
+          size="large"
+          style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 20,
+          }}
+          color={Colors.white}
+        />
+      }
       onError={(e) => console.log('error', e)}
     />
   );
@@ -259,6 +271,18 @@ const LocalVideo = ({
       controls={true}
       resizeMode={'contain'}
       onError={(e) => console.log('error', e)}
+      renderLoader={
+        <ActivityIndicator
+          size="large"
+          style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 20,
+          }}
+          color={Colors.white}
+        />
+      }
     >
       {isLoading && (
         <ActivityIndicator

diff --git a/packages/mobile/src/hooks/useBottomSheetBackHandler.ts b/packages/mobile/src/hooks/useBottomSheetBackHandler.ts
@@ -0,0 +1,38 @@
+import { BottomSheetModal, BottomSheetModalProps } from '@gorhom/bottom-sheet';
+import { useCallback, useRef } from 'react';
+import { BackHandler, NativeEventSubscription } from 'react-native';
+
+/**
+ * src: https://gist.github.com/vanenshi/6c2938d2f7424979d76c06d66703df19
+ * hook that dismisses the bottom sheet on the hardware back button press if it is visible
+ * @param bottomSheetRef ref to the bottom sheet which is going to be closed/dismissed on the back press
+ */
+export const useBottomSheetBackHandler = (
+    bottomSheetRef: React.RefObject<BottomSheetModal | null>,
+) => {
+    const backHandlerSubscriptionRef = useRef<NativeEventSubscription | null>(
+        null,
+    );
+    const handleSheetPositionChange = useCallback<
+        NonNullable<BottomSheetModalProps['onChange']>
+    >(
+        index => {
+            const isBottomSheetVisible = index >= 0;
+            if (isBottomSheetVisible && !backHandlerSubscriptionRef.current) {
+                // setup the back handler if the bottom sheet is right in front of the user
+                backHandlerSubscriptionRef.current = BackHandler.addEventListener(
+                    'hardwareBackPress',
+                    () => {
+                        bottomSheetRef.current?.dismiss();
+                        return true;
+                    },
+                );
+            } else if (!isBottomSheetVisible) {
+                backHandlerSubscriptionRef.current?.remove();
+                backHandlerSubscriptionRef.current = null;
+            }
+        },
+        [bottomSheetRef, backHandlerSubscriptionRef],
+    );
+    return { handleSheetPositionChange };
+};
diff --git a/packages/mobile/src/pages/chat/share-chat-page.tsx b/packages/mobile/src/pages/chat/share-chat-page.tsx
@@ -25,7 +25,10 @@ import Toast from 'react-native-toast-message';
 import { ContactTile } from '../../components/Contact/Contact-Tile';
 import { Text } from '../../components/ui/Text/Text';
 import { Colors } from '../../app/Colors';
-import { ListHeaderComponent, maxConnectionsForward } from '../../components/Chat/Chat-Forward';
+import {
+  GroupConversationsComponent,
+  maxConnectionsForward,
+} from '../../components/Chat/Chat-Forward';
 import { SafeAreaView } from '../../components/ui/SafeAreaView/SafeAreaView';
 import { AuthorName } from '../../components/ui/Name';
 import { SendChat } from '../../components/ui/Icons/icons';
@@ -503,7 +506,7 @@ const InnerShareChatPage = memo(
         }
         ListFooterComponent={
           //Actually a Group Component
-          <ListHeaderComponent
+          <GroupConversationsComponent
             selectedGroup={selectedConversation}
             setselectedGroup={setSelectedConversation}
           />

diff --git a/packages/mobile/src/provider/chat/ChatProvider.ts b/packages/mobile/src/provider/chat/ChatProvider.ts
@@ -248,18 +248,18 @@ export const uploadChatMessage = async (
     },
     transitOptions: distribute
       ? {
-          recipients: [...recipients],
-          schedule: ScheduleOptions.SendLater,
-          priority: PriorityOptions.High,
-          sendContents: SendContents.All,
-          useAppNotification: true,
-          appNotificationOptions: {
-            appId: CHAT_APP_ID,
-            typeId: message.fileMetadata.appData.groupId || getNewId(),
-            tagId: message.fileMetadata.appData.uniqueId || getNewId(),
-            silent: false,
-          },
-        }
+        recipients: [...recipients],
+        schedule: ScheduleOptions.SendLater,
+        priority: PriorityOptions.High,
+        sendContents: SendContents.All,
+        useAppNotification: true,
+        appNotificationOptions: {
+          appId: CHAT_APP_ID,
+          typeId: message.fileMetadata.appData.groupId || getNewId(),
+          tagId: message.fileMetadata.appData.uniqueId || getNewId(),
+          silent: false,
+        },
+      }
       : undefined,
   };
 
@@ -302,10 +302,10 @@ export const uploadChatMessage = async (
 
     const imageSource: ImageSource | undefined = linkPreviewWithImage
       ? {
-          height: linkPreviewWithImage.imageHeight || 0,
-          width: linkPreviewWithImage.imageWidth || 0,
-          uri: linkPreviewWithImage.imageUrl,
-        }
+        height: linkPreviewWithImage.imageHeight || 0,
+        width: linkPreviewWithImage.imageWidth || 0,
+        uri: linkPreviewWithImage.imageUrl,
+      }
       : undefined;
 
     const { tinyThumb } = imageSource
@@ -359,6 +359,7 @@ export const uploadChatMessage = async (
         key: payloadKey,
         payload: blob,
         descriptorContent: newMediaFile?.filename || newMediaFile?.type || undefined,
+        previewThumbnail: tinyThumb,
       });
 
       if (tinyThumb) previewThumbnails.push(tinyThumb);
@@ -414,7 +415,7 @@ export const uploadChatMessage = async (
     for (const recipient of recipients) {
       message.fileMetadata.appData.content.deliveryDetails[recipient] =
         uploadResult.recipientStatus?.[recipient].toLowerCase() ===
-        TransferUploadStatus.EnqueuedFailed
+          TransferUploadStatus.EnqueuedFailed
           ? ChatDeliveryStatus.Failed
           : ChatDeliveryStatus.Delivered;
     }
@@ -459,11 +460,11 @@ export const updateChatMessage = async (
     },
     transitOptions: distribute
       ? {
-          recipients: [...recipients],
-          schedule: ScheduleOptions.SendLater,
-          priority: PriorityOptions.High,
-          sendContents: SendContents.All,
-        }
+        recipients: [...recipients],
+        schedule: ScheduleOptions.SendLater,
+        priority: PriorityOptions.High,
+        sendContents: SendContents.All,
+      }
       : undefined,
   };