[MM-57291] Calls: Add channel name to call header (#7968)

app/products/calls/screens/call_screen/call_screen.tsx

@@ -35,8 +35,8 @@ import MessageBar from '@calls/components/message_bar';
 import ReactionBar from '@calls/components/reaction_bar';
 import UnavailableIconWrapper from '@calls/components/unavailable_icon_wrapper';
 import {useHostMenus, usePermissionsChecker} from '@calls/hooks';
+import {HeaderCenter} from '@calls/screens/call_screen/header_center';
 import {ParticipantCard} from '@calls/screens/call_screen/participant_card';
-import {RaisedHandBanner} from '@calls/screens/call_screen/raised_hand_banner';
 import {
     setCallQualityAlertDismissed,
     setMicPermissionsErrorDismissed,
@@ -86,6 +86,8 @@ export type Props = {
     micPermissionsGranted: boolean;
     teammateNameDisplay: string;
     fromThreadScreen?: boolean;
+    displayName?: string;
+    isOwnDirectMessage: boolean;
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: CallsTheme) => ({
@@ -119,8 +121,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: CallsTheme) => ({
         alignItems: 'center',
         width: '100%',
         height: 56,
-        paddingLeft: 24,
-        paddingRight: 16,
+        gap: 8,
     },
     headerPortraitSpacer: {
         height: 12,
@@ -138,7 +139,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: CallsTheme) => ({
     time: {
         color: theme.buttonColor,
         ...typography('Heading', 200),
-        width: 60,
+        width: 56,
+        marginLeft: 24,
+        marginRight: 8,
+        marginVertical: 2,
     },
     collapseIconContainer: {
         display: 'flex',
@@ -146,6 +150,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: CallsTheme) => ({
         justifyContent: 'center',
         width: 48,
         height: 48,
+        marginLeft: 24,
+        marginRight: 8,
     },
     collapseIcon: {
         color: changeOpacity(theme.buttonColor, 0.56),
@@ -303,6 +309,8 @@ const CallScreen = ({
     micPermissionsGranted,
     teammateNameDisplay,
     fromThreadScreen,
+    displayName,
+    isOwnDirectMessage,
 }: Props) => {
     const intl = useIntl();
     const theme = useTheme();
@@ -685,10 +693,12 @@ const CallScreen = ({
                 value={currentCall.startTime}
                 updateIntervalInSeconds={1}
             />
-            <RaisedHandBanner
+            <HeaderCenter
                 raisedHands={raisedHands}
                 sessionId={currentCall.mySessionId}
                 teammateNameDisplay={teammateNameDisplay}
+                displayName={displayName}
+                isOwnDirectMessage={isOwnDirectMessage}
             />
             <Pressable
                 onPress={collapse}

app/products/calls/screens/call_screen/header_center.tsx

@@ -9,7 +9,7 @@ import {getHandsRaisedNames, makeCallsTheme} from '@calls/utils';
 import CompassIcon from '@components/compass_icon';
 import FormattedText from '@components/formatted_text';
 import {useTheme} from '@context/theme';
-import {makeStyleSheetFromTheme} from '@utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
 import type {CallSession, CallsTheme} from '@calls/types/calls';
@@ -18,6 +18,8 @@ export type Props = {
     raisedHands: CallSession[];
     sessionId: string;
     teammateNameDisplay: string;
+    displayName?: string;
+    isOwnDirectMessage: boolean;
 }
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: CallsTheme) => ({
@@ -51,16 +53,36 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: CallsTheme) => ({
         ...typography(),
         color: theme.sidebarTeamBarBg,
     },
+    titleBanner: {
+        ...typography('Body', 200, 'SemiBold'),
+        color: changeOpacity(theme.buttonColor, 0.72),
+    },
 }));
 
-export const RaisedHandBanner = ({raisedHands, sessionId, teammateNameDisplay}: Props) => {
+export const HeaderCenter = ({raisedHands, sessionId, teammateNameDisplay, displayName, isOwnDirectMessage}: Props) => {
     const intl = useIntl();
     const theme = useTheme();
     const callsTheme = useMemo(() => makeCallsTheme(theme), [theme]);
     const style = getStyleSheet(callsTheme);
+    let channelTitle = displayName;
+    if (isOwnDirectMessage) {
+        channelTitle = intl.formatMessage({
+            id: 'channel_header.directchannel.you',
+            defaultMessage: '{displayName} (you)',
+        }, {displayName});
+    }
 
     if (raisedHands.length === 0) {
-        return <View style={style.raisedHandBannerContainer}/>;
+        return (
+            <View style={style.raisedHandBannerContainer}>
+                <Text
+                    style={style.titleBanner}
+                    numberOfLines={1}
+                >
+                    {channelTitle}
+                </Text>
+            </View>
+        );
     }
 
     const names = getHandsRaisedNames(raisedHands, sessionId, intl.locale, teammateNameDisplay, intl);

app/products/calls/screens/call_screen/index.ts

@@ -1,16 +1,21 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {withObservables} from '@nozbe/watermelondb/react';
-import {of as of$} from 'rxjs';
+import {withDatabase, withObservables} from '@nozbe/watermelondb/react';
+import {of as of$, combineLatestWith} from 'rxjs';
 import {distinctUntilChanged, switchMap} from 'rxjs/operators';
 
 import {observeCallDatabase, observeCurrentSessionsDict} from '@calls/observers';
 import CallScreen from '@calls/screens/call_screen/call_screen';
 import {observeCurrentCall, observeGlobalCallsState} from '@calls/state';
-import {observeTeammateNameDisplay} from '@queries/servers/user';
+import {General} from '@constants';
+import {observeChannel} from '@queries/servers/channel';
+import {observeTeammateNameDisplay, observeUser} from '@queries/servers/user';
+import {getUserIdFromChannelName} from '@utils/user';
 
-const enhanced = withObservables([], () => {
+import type {WithDatabaseArgs} from '@typings/database/database';
+
+const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
     const micPermissionsGranted = observeGlobalCallsState().pipe(
         switchMap((gs) => of$(gs.micPermissionsGranted)),
         distinctUntilChanged(),
@@ -20,12 +25,35 @@ const enhanced = withObservables([], () => {
         distinctUntilChanged(),
     );
 
+    const currentCall = observeCurrentCall();
+    const channel = currentCall.pipe(
+        switchMap((cc) => (observeChannel(database, cc?.channelId || ''))),
+    );
+    const dmUser = currentCall.pipe(
+        combineLatestWith(channel),
+        switchMap(([cc, chan]) => {
+            if (chan?.type === General.DM_CHANNEL) {
+                const teammateId = getUserIdFromChannelName(cc?.myUserId || '', chan.name);
+                return observeUser(database, teammateId);
+            }
+
+            return of$(undefined);
+        }),
+    );
+    const isOwnDirectMessage = currentCall.pipe(
+        combineLatestWith(dmUser),
+        switchMap(([cc, dm]) => of$(cc?.myUserId === dm?.id)),
+    );
+    const displayName = channel.pipe(switchMap((c) => of$(c?.displayName)));
+
     return {
-        currentCall: observeCurrentCall(),
+        currentCall,
         sessionsDict: observeCurrentSessionsDict(),
         micPermissionsGranted,
         teammateNameDisplay,
+        displayName,
+        isOwnDirectMessage,
     };
 });
 
-export default enhanced(CallScreen);
+export default withDatabase(enhanced(CallScreen));