Properly style call buttons across app, when already in a call

ts/components/conversation/ConversationHeader.tsx

@@ -39,6 +39,7 @@ import {
 } from './MessageRequestActionsConfirmation';
 import type { MinimalConversation } from '../../hooks/useMinimalConversation';
 import { LocalDeleteWarningModal } from '../LocalDeleteWarningModal';
+import { InAnotherCallTooltip } from './InAnotherCallTooltip';
 
 function HeaderInfoTitle({
   name,
@@ -93,6 +94,7 @@ export type PropsDataType = {
   conversationName: ContactNameData;
   hasPanelShowing?: boolean;
   hasStories?: HasStories;
+  hasActiveCall?: boolean;
   localDeleteWarningShown: boolean;
   isDeleteSyncSendEnabled: boolean;
   isMissingMandatoryProfileSharing?: boolean;
@@ -149,6 +151,7 @@ export const ConversationHeader = memo(function ConversationHeader({
   cannotLeaveBecauseYouAreLastAdmin,
   conversation,
   conversationName,
+  hasActiveCall,
   hasPanelShowing,
   hasStories,
   i18n,
@@ -295,6 +298,7 @@ export const ConversationHeader = memo(function ConversationHeader({
             {!isSMSOnly && !isSignalConversation && (
               <OutgoingCallButtons
                 conversation={conversation}
+                hasActiveCall={hasActiveCall}
                 i18n={i18n}
                 isNarrow={isNarrow}
                 onOutgoingAudioCall={onOutgoingAudioCall}
@@ -806,6 +810,7 @@ function HeaderMenu({
 
 function OutgoingCallButtons({
   conversation,
+  hasActiveCall,
   i18n,
   isNarrow,
   onOutgoingAudioCall,
@@ -815,24 +820,39 @@ function OutgoingCallButtons({
   PropsType,
   | 'i18n'
   | 'conversation'
+  | 'hasActiveCall'
   | 'onOutgoingAudioCall'
   | 'onOutgoingVideoCall'
   | 'outgoingCallButtonStyle'
 >): JSX.Element | null {
+  const disabled =
+    conversation.type === 'group' &&
+    conversation.announcementsOnly &&
+    !conversation.areWeAdmin;
+  const inAnotherCall = !disabled && hasActiveCall;
+
   const videoButton = (
     <button
       aria-label={i18n('icu:makeOutgoingVideoCall')}
       className={classNames(
         'module-ConversationHeader__button',
         'module-ConversationHeader__button--video',
-        conversation.announcementsOnly && !conversation.areWeAdmin
+        disabled
           ? 'module-ConversationHeader__button--show-disabled'
+          : undefined,
+        inAnotherCall
+          ? 'module-ConversationHeader__button--in-another-call'
           : undefined
       )}
       onClick={onOutgoingVideoCall}
       type="button"
     />
   );
+  const videoElement = inAnotherCall ? (
+    <InAnotherCallTooltip i18n={i18n}>{videoButton}</InAnotherCallTooltip>
+  ) : (
+    videoButton
+  );
 
   const startCallShortcuts = useStartCallShortcuts(
     onOutgoingAudioCall,
@@ -844,31 +864,49 @@ function OutgoingCallButtons({
     case OutgoingCallButtonStyle.None:
       return null;
     case OutgoingCallButtonStyle.JustVideo:
-      return videoButton;
+      return videoElement;
     case OutgoingCallButtonStyle.Both:
+      // eslint-disable-next-line no-case-declarations
+      const audioButton = (
+        <button
+          type="button"
+          onClick={onOutgoingAudioCall}
+          className={classNames(
+            'module-ConversationHeader__button',
+            'module-ConversationHeader__button--audio',
+            inAnotherCall
+              ? 'module-ConversationHeader__button--in-another-call'
+              : undefined
+          )}
+          aria-label={i18n('icu:makeOutgoingCall')}
+        />
+      );
+
       return (
         <>
-          {videoButton}
-          <button
-            type="button"
-            onClick={onOutgoingAudioCall}
-            className={classNames(
-              'module-ConversationHeader__button',
-              'module-ConversationHeader__button--audio'
-            )}
-            aria-label={i18n('icu:makeOutgoingCall')}
-          />
+          {videoElement}
+          {inAnotherCall ? (
+            <InAnotherCallTooltip i18n={i18n}>
+              {audioButton}
+            </InAnotherCallTooltip>
+          ) : (
+            audioButton
+          )}
         </>
       );
     case OutgoingCallButtonStyle.Join:
-      return (
+      // eslint-disable-next-line no-case-declarations
+      const joinButton = (
         <button
           aria-label={i18n('icu:joinOngoingCall')}
           className={classNames(
             'module-ConversationHeader__button',
             'module-ConversationHeader__button--join-call',
-            conversation.announcementsOnly && !conversation.areWeAdmin
+            disabled
               ? 'module-ConversationHeader__button--show-disabled'
+              : undefined,
+            inAnotherCall
+              ? 'module-ConversationHeader__button--in-another-call'
               : undefined
           )}
           onClick={onOutgoingVideoCall}
@@ -877,6 +915,11 @@ function OutgoingCallButtons({
           {isNarrow ? null : i18n('icu:joinOngoingCall')}
         </button>
       );
+      return inAnotherCall ? (
+        <InAnotherCallTooltip i18n={i18n}>{joinButton}</InAnotherCallTooltip>
+      ) : (
+        joinButton
+      );
     default:
       throw missingCaseError(outgoingCallButtonStyle);
   }