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));