Fix call header title for direct calls

ts/components/CallScreen.tsx

@@ -145,13 +145,23 @@ export const CallScreen: React.FC<PropsType> = ({
   }, [toggleAudio, toggleVideo]);
 
   let hasRemoteVideo: boolean;
+  let headerMessage: string | undefined;
+  let headerTitle: string | undefined;
   let isConnected: boolean;
+  let participantCount: number;
   let remoteParticipantsElement: JSX.Element;
 
   switch (call.callMode) {
     case CallMode.Direct:
       hasRemoteVideo = Boolean(call.hasRemoteVideo);
+      headerMessage = renderHeaderMessage(
+        i18n,
+        call.callState || CallState.Prering,
+        acceptedDuration
+      );
+      headerTitle = conversation.title;
       isConnected = call.callState === CallState.Accepted;
+      participantCount = isConnected ? 2 : 0;
       remoteParticipantsElement = (
         <DirectCallRemoteParticipant
           conversation={conversation}
@@ -165,6 +175,11 @@ export const CallScreen: React.FC<PropsType> = ({
       hasRemoteVideo = call.remoteParticipants.some(
         remoteParticipant => remoteParticipant.hasRemoteVideo
       );
+      participantCount = activeCall.groupCallParticipants.length;
+      headerMessage = undefined;
+      headerTitle = activeCall.groupCallParticipants.length
+        ? undefined
+        : i18n('calling__in-this-call--zero');
       isConnected = call.connectionState === GroupCallConnectionState.Connected;
       remoteParticipantsElement = (
         <GroupCallRemoteParticipants
@@ -194,11 +209,6 @@ export const CallScreen: React.FC<PropsType> = ({
       !showControls && !isAudioOnly && isConnected,
   });
 
-  const remoteParticipants =
-    call.callMode === CallMode.Group
-      ? activeCall.groupCallParticipants.length
-      : 0;
-
   const { showParticipantsList } = activeCall.activeCallState;
 
   return (
@@ -219,24 +229,12 @@ export const CallScreen: React.FC<PropsType> = ({
       >
         <CallingHeader
           canPip
-          conversationTitle={
-            <>
-              {call.callMode === CallMode.Group &&
-              !call.remoteParticipants.length
-                ? i18n('calling__in-this-call--zero')
-                : ''}
-              {call.callMode === CallMode.Direct &&
-                renderHeaderMessage(
-                  i18n,
-                  call.callState || CallState.Prering,
-                  acceptedDuration
-                )}
-            </>
-          }
           i18n={i18n}
           isGroupCall={call.callMode === CallMode.Group}
-          remoteParticipants={remoteParticipants}
+          message={headerMessage}
+          remoteParticipants={participantCount}
           showParticipantsList={showParticipantsList}
+          title={headerTitle}
           toggleParticipants={toggleParticipants}
           togglePip={togglePip}
           toggleSettings={toggleSettings}
@@ -321,8 +319,8 @@ function renderHeaderMessage(
   i18n: LocalizerType,
   callState: CallState,
   acceptedDuration: null | number
-): JSX.Element | null {
+): string | undefined {
-  let message = null;
+  let message;
   if (callState === CallState.Prering) {
     message = i18n('outgoingCallPrering');
   } else if (callState === CallState.Ringing) {
@@ -332,11 +330,7 @@ function renderHeaderMessage(
   } else if (callState === CallState.Accepted && acceptedDuration) {
     message = i18n('callDuration', [renderDuration(acceptedDuration)]);
   }
-
+  return message;
-  if (!message) {
-    return null;
-  }
-  return <div className="module-ongoing-call__header-message">{message}</div>;
 }
 
 function renderDuration(ms: number): string {

ts/components/CallingHeader.stories.tsx

@@ -14,9 +14,9 @@ const i18n = setupI18n('en', enMessages);
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   canPip: boolean('canPip', Boolean(overrideProps.canPip)),
-  conversationTitle: overrideProps.conversationTitle || 'With Someone',
   i18n,
   isGroupCall: boolean('isGroupCall', Boolean(overrideProps.isGroupCall)),
+  message: overrideProps.message,
   remoteParticipants: number(
     'remoteParticipants',
     overrideProps.remoteParticipants || 0
@@ -25,6 +25,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
     'showParticipantsList',
     Boolean(overrideProps.showParticipantsList)
   ),
+  title: overrideProps.title || 'With Someone',
   toggleParticipants: () => action('toggle-participants'),
   togglePip: () => action('toggle-pip'),
   toggleSettings: () => action('toggle-settings'),
@@ -62,8 +63,17 @@ story.add('With Participants (shown)', () => (
 story.add('Long Title', () => (
   <CallingHeader
     {...createProps({
-      conversationTitle:
+      title:
         'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
     })}
   />
 ));
+
+story.add('Title with message', () => (
+  <CallingHeader
+    {...createProps({
+      title: 'Hello world',
+      message: 'Goodbye earth',
+    })}
+  />
+));

ts/components/CallingHeader.tsx

@@ -8,11 +8,12 @@ import { Tooltip, TooltipTheme } from './Tooltip';
 
 export type PropsType = {
   canPip?: boolean;
-  conversationTitle: JSX.Element | string;
   i18n: LocalizerType;
   isGroupCall?: boolean;
+  message?: string;
   remoteParticipants?: number;
   showParticipantsList: boolean;
+  title?: string;
   toggleParticipants?: () => void;
   togglePip?: () => void;
   toggleSettings: () => void;
@@ -20,19 +21,23 @@ export type PropsType = {
 
 export const CallingHeader = ({
   canPip = false,
-  conversationTitle,
   i18n,
   isGroupCall = false,
+  message,
   remoteParticipants,
   showParticipantsList,
+  title,
   toggleParticipants,
   togglePip,
   toggleSettings,
 }: PropsType): JSX.Element => (
   <div className="module-calling__header">
-    <div className="module-calling__header--header-name">
+    {title ? (
-      {conversationTitle}
+      <div className="module-calling__header--header-name">{title}</div>
-    </div>
+    ) : null}
+    {message ? (
+      <div className="module-ongoing-call__header-message">{message}</div>
+    ) : null}
     <div className="module-calling-tools">
       {isGroupCall ? (
         <div className="module-calling-tools__button">

ts/components/CallingLobby.tsx

@@ -156,7 +156,7 @@ export const CallingLobby = ({
   return (
     <div className="module-calling__container">
       <CallingHeader
-        conversationTitle={conversation.title}
+        title={conversation.title}
         i18n={i18n}
         isGroupCall={isGroupCall}
         remoteParticipants={participantNames.length}

ts/components/Lightbox.tsx

@@ -422,13 +422,13 @@ export class Lightbox extends React.Component<Props, State> {
   private readonly onContextMenu = (
     event: React.MouseEvent<HTMLImageElement>
   ) => {
-    const { contentType } = this.props;
+    const { contentType = '' } = this.props;
 
     // These are the only image types supported by Electron's NativeImage
     if (
       event &&
       contentType !== 'image/png' &&
-      !contentType?.match(/image\/jpe?g/g)
+      !/image\/jpe?g/g.test(contentType)
     ) {
       event.preventDefault();
     }