MM-45744 - Calls mobile: Implement banner spacing (#6490)

* adjust more_messages banner with props

app/components/post_list/more_messages/more_messages.tsx

@@ -10,6 +10,7 @@ import CompassIcon from '@components/compass_icon';
 import FormattedText from '@components/formatted_text';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {Events} from '@constants';
+import {CURRENT_CALL_BAR_HEIGHT, JOIN_CALL_BAR_HEIGHT} from '@constants/view';
 import {useServerUrl} from '@context/server';
 import {useIsTablet} from '@hooks/device';
 import {makeStyleSheetFromTheme, hexToHue} from '@utils/theme';
@@ -30,6 +31,8 @@ type Props = {
     unreadCount: number;
     theme: Theme;
     testID: string;
+    currentCallBarVisible: boolean;
+    joinCallBannerVisible: boolean;
 }
 
 const HIDDEN_TOP = -60;
@@ -104,6 +107,8 @@ const MoreMessages = ({
     unreadCount,
     testID,
     theme,
+    currentCallBarVisible,
+    joinCallBannerVisible,
 }: Props) => {
     const serverUrl = useServerUrl();
     const isTablet = useIsTablet();
@@ -114,7 +119,8 @@ const MoreMessages = ({
     const [remaining, setRemaining] = useState(0);
     const underlayColor = useMemo(() => `hsl(${hexToHue(theme.buttonBg)}, 50%, 38%)`, [theme]);
     const top = useSharedValue(0);
-    const shownTop = isTablet || (isCRTEnabled && rootId) ? 5 : SHOWN_TOP;
+    const adjustedShownTop = SHOWN_TOP + (currentCallBarVisible ? CURRENT_CALL_BAR_HEIGHT : 0) + (joinCallBannerVisible ? JOIN_CALL_BAR_HEIGHT : 0);
+    const shownTop = isTablet || (isCRTEnabled && rootId) ? 5 : adjustedShownTop;
     const BARS_FACTOR = Math.abs((1) / (HIDDEN_TOP - SHOWN_TOP));
     const styles = getStyleSheet(theme);
     const animatedStyle = useAnimatedStyle(() => ({

app/components/post_list/post_list.tsx

@@ -46,6 +46,8 @@ type Props = {
     showNewMessageLine?: boolean;
     footer?: ReactElement;
     testID: string;
+    currentCallBarVisible?: boolean;
+    joinCallBannerVisible?: boolean;
 }
 
 type onScrollEndIndexListenerEvent = (endIndex: number) => void;
@@ -98,6 +100,8 @@ const PostList = ({
     showMoreMessages,
     showNewMessageLine = true,
     testID,
+    currentCallBarVisible,
+    joinCallBannerVisible,
 }: Props) => {
     const listRef = useRef<FlatList>(null);
     const onScrollEndIndexListener = useRef<onScrollEndIndexListenerEvent>();
@@ -388,6 +392,8 @@ const PostList = ({
                 scrollToIndex={scrollToIndex}
                 theme={theme}
                 testID={`${testID}.more_messages_button`}
+                currentCallBarVisible={Boolean(currentCallBarVisible)}
+                joinCallBannerVisible={Boolean(joinCallBannerVisible)}
             />
             }
         </>

app/products/calls/components/join_call_banner/join_call_banner.tsx

@@ -95,14 +95,6 @@ const JoinCallBanner = ({
         return null;
     }
 
-    // TODO: implement join_call_banner/more_messages spacing: https://mattermost.atlassian.net/browse/MM-45744
-    // useEffect(() => {
-    //     EventEmitter.emit(ViewTypes.JOIN_CALL_BAR_VISIBLE, Boolean(props.call && !props.alreadyInTheCall));
-    //     return () => {
-    //         EventEmitter.emit(ViewTypes.JOIN_CALL_BAR_VISIBLE, Boolean(false));
-    //     };
-    // }, [props.call, props.alreadyInTheCall]);
-
     const joinHandler = async () => {
         leaveAndJoinWithAlert(intl, serverUrl, channelId, currentCallChannelName, displayName, confirmToJoin, joinCall);
     };

app/screens/channel/channel.tsx

@@ -136,6 +136,8 @@ const Channel = ({serverUrl, channelId, componentId, isCallsPluginEnabled, isCal
                             channelId={channelId}
                             forceQueryAfterAppState={appState}
                             nativeID={channelId}
+                            currentCallBarVisible={isInCall}
+                            joinCallBannerVisible={isCallInCurrentChannel && !isInCall}
                         />
                     </View>
                     <PostDraft

app/screens/channel/channel_post_list/channel_post_list.tsx

@@ -24,6 +24,8 @@ type Props = {
     nativeID: string;
     posts: PostModel[];
     shouldShowJoinLeaveMessages: boolean;
+    currentCallBarVisible: boolean;
+    joinCallBannerVisible: boolean;
 }
 
 const edges: Edge[] = ['bottom'];
@@ -35,6 +37,7 @@ const styles = StyleSheet.create({
 const ChannelPostList = ({
     channelId, contentContainerStyle, isCRTEnabled,
     lastViewedAt, nativeID, posts, shouldShowJoinLeaveMessages,
+    currentCallBarVisible, joinCallBannerVisible,
 }: Props) => {
     const isTablet = useIsTablet();
     const serverUrl = useServerUrl();
@@ -75,6 +78,8 @@ const ChannelPostList = ({
             shouldShowJoinLeaveMessages={shouldShowJoinLeaveMessages}
             showMoreMessages={true}
             testID='channel.post_list'
+            currentCallBarVisible={currentCallBarVisible}
+            joinCallBannerVisible={joinCallBannerVisible}
         />
     );