diff --git a/app/products/calls/screens/call_screen/call_screen.tsx b/app/products/calls/screens/call_screen/call_screen.tsx index ae3847a7534..f39567257c1 100644 --- a/app/products/calls/screens/call_screen/call_screen.tsx +++ b/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} /> - ({ @@ -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 ; + return ( + + + {channelTitle} + + + ); } const names = getHandsRaisedNames(raisedHands, sessionId, intl.locale, teammateNameDisplay, intl); diff --git a/app/products/calls/screens/call_screen/index.ts b/app/products/calls/screens/call_screen/index.ts index 1bb75621e76..b9d0e8a646e 100644 --- a/app/products/calls/screens/call_screen/index.ts +++ b/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));