In conversation header, only show video button for group calls

ts/components/conversation/ConversationHeader.stories.tsx

@@ -8,7 +8,10 @@ import { action } from '@storybook/addon-actions';
 
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
-import { ConversationHeader } from './ConversationHeader';
+import {
+  ConversationHeader,
+  OutgoingCallButtonStyle,
+} from './ConversationHeader';
 import { gifUrl } from '../../storybook/Fixtures';
 
 const book = storiesOf('Components/Conversation/ConversationHeader', module);
@@ -25,7 +28,7 @@ type ConversationHeaderStory = {
 
 const commonProps = {
   showBackButton: false,
-  showCallButtons: true,
+  outgoingCallButtonStyle: OutgoingCallButtonStyle.Both,
   markedUnread: false,
 
   i18n,
@@ -186,6 +189,7 @@ const stories: Array<ConversationHeaderStory> = [
           type: 'group',
           expireTimer: 10,
           acceptedMessageRequest: true,
+          outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
         },
       },
       {
@@ -201,6 +205,7 @@ const stories: Array<ConversationHeaderStory> = [
           left: true,
           expireTimer: 10,
           acceptedMessageRequest: true,
+          outgoingCallButtonStyle: OutgoingCallButtonStyle.JustVideo,
         },
       },
     ],
@@ -220,6 +225,7 @@ const stories: Array<ConversationHeaderStory> = [
           type: 'direct',
           isMe: true,
           acceptedMessageRequest: true,
+          outgoingCallButtonStyle: OutgoingCallButtonStyle.None,
         },
       },
     ],
@@ -239,6 +245,7 @@ const stories: Array<ConversationHeaderStory> = [
           type: 'direct',
           isMe: false,
           acceptedMessageRequest: false,
+          outgoingCallButtonStyle: OutgoingCallButtonStyle.None,
         },
       },
     ],

ts/components/conversation/ConversationHeader.tsx

@@ -23,6 +23,13 @@ import {
   TimerOption,
 } from '../../util/ExpirationTimerOptions';
 import { isMuted } from '../../util/isMuted';
+import { missingCaseError } from '../../util/missingCaseError';
+
+export enum OutgoingCallButtonStyle {
+  None,
+  JustVideo,
+  Both,
+}
 
 export interface PropsDataType {
   id: string;
@@ -49,7 +56,7 @@ export interface PropsDataType {
   muteExpiresAt?: number;
 
   showBackButton?: boolean;
-  showCallButtons?: boolean;
+  outgoingCallButtonStyle: OutgoingCallButtonStyle;
 }
 
 export interface PropsActionsType {
@@ -264,42 +271,51 @@ export class ConversationHeader extends React.Component<PropsType> {
       i18n,
       onOutgoingAudioCallInConversation,
       onOutgoingVideoCallInConversation,
-      showCallButtons,
+      outgoingCallButtonStyle,
       showBackButton,
     } = this.props;
 
-    if (!showCallButtons) {
-      return null;
-    }
-
-    return (
-      <>
-        <button
-          type="button"
-          onClick={onOutgoingVideoCallInConversation}
-          className={classNames(
-            'module-conversation-header__video-calling-button',
-            showBackButton
-              ? null
-              : 'module-conversation-header__video-calling-button--show'
-          )}
-          disabled={showBackButton}
-          aria-label={i18n('makeOutgoingVideoCall')}
-        />
-        <button
-          type="button"
-          onClick={onOutgoingAudioCallInConversation}
-          className={classNames(
-            'module-conversation-header__audio-calling-button',
-            showBackButton
-              ? null
-              : 'module-conversation-header__audio-calling-button--show'
-          )}
-          disabled={showBackButton}
-          aria-label={i18n('makeOutgoingCall')}
-        />
-      </>
+    const videoButton = (
+      <button
+        type="button"
+        onClick={onOutgoingVideoCallInConversation}
+        className={classNames(
+          'module-conversation-header__video-calling-button',
+          showBackButton
+            ? null
+            : 'module-conversation-header__video-calling-button--show'
+        )}
+        disabled={showBackButton}
+        aria-label={i18n('makeOutgoingVideoCall')}
+      />
     );
+
+    switch (outgoingCallButtonStyle) {
+      case OutgoingCallButtonStyle.None:
+        return null;
+      case OutgoingCallButtonStyle.JustVideo:
+        return videoButton;
+      case OutgoingCallButtonStyle.Both:
+        return (
+          <>
+            {videoButton}
+            <button
+              type="button"
+              onClick={onOutgoingAudioCallInConversation}
+              className={classNames(
+                'module-conversation-header__audio-calling-button',
+                showBackButton
+                  ? null
+                  : 'module-conversation-header__audio-calling-button--show'
+              )}
+              disabled={showBackButton}
+              aria-label={i18n('makeOutgoingCall')}
+            />
+          </>
+        );
+      default:
+        throw missingCaseError(outgoingCallButtonStyle);
+    }
   }
 
   public renderMenu(triggerId: string): JSX.Element {

ts/state/smart/ConversationHeader.tsx

@@ -3,13 +3,20 @@
 
 import { connect } from 'react-redux';
 import { pick } from 'lodash';
-import { ConversationHeader } from '../../components/conversation/ConversationHeader';
+import {
+  ConversationHeader,
+  OutgoingCallButtonStyle,
+} from '../../components/conversation/ConversationHeader';
 import { getConversationSelector } from '../selectors/conversations';
 import { StateType } from '../reducer';
 import { CallMode } from '../../types/Calling';
-import { getConversationCallMode } from '../ducks/conversations';
+import {
+  ConversationType,
+  getConversationCallMode,
+} from '../ducks/conversations';
 import { getActiveCall } from '../ducks/calling';
 import { getIntl } from '../selectors/user';
+import { missingCaseError } from '../../util/missingCaseError';
 
 export interface OwnProps {
   id: string;
@@ -32,17 +39,36 @@ export interface OwnProps {
   onShowSafetyNumber: () => void;
 }
 
+const getOutgoingCallButtonStyle = (
+  conversation: ConversationType,
+  state: StateType
+): OutgoingCallButtonStyle => {
+  if (getActiveCall(state.calling)) {
+    return OutgoingCallButtonStyle.None;
+  }
+
+  const conversationCallMode = getConversationCallMode(conversation);
+  switch (conversationCallMode) {
+    case CallMode.None:
+      return OutgoingCallButtonStyle.None;
+    case CallMode.Direct:
+      return OutgoingCallButtonStyle.Both;
+    case CallMode.Group:
+      if (!window.GROUP_CALLING) {
+        return OutgoingCallButtonStyle.None;
+      }
+      return OutgoingCallButtonStyle.JustVideo;
+    default:
+      throw missingCaseError(conversationCallMode);
+  }
+};
+
 const mapStateToProps = (state: StateType, ownProps: OwnProps) => {
   const conversation = getConversationSelector(state)(ownProps.id);
   if (!conversation) {
     throw new Error('Could not find conversation');
   }
 
-  const conversationCallMode = getConversationCallMode(conversation);
-  const conversationSupportsCalls =
-    conversationCallMode === CallMode.Direct ||
-    (conversationCallMode === CallMode.Group && window.GROUP_CALLING);
-
   return {
     ...pick(conversation, [
       'acceptedMessageRequest',
@@ -66,7 +92,7 @@ const mapStateToProps = (state: StateType, ownProps: OwnProps) => {
     ]),
     i18n: getIntl(state),
     showBackButton: state.conversations.selectedConversationPanelDepth > 0,
-    showCallButtons: conversationSupportsCalls && !getActiveCall(state.calling),
+    outgoingCallButtonStyle: getOutgoingCallButtonStyle(conversation, state),
   };
 };
 

ts/util/lint/exceptions.json

@@ -14728,7 +14728,7 @@
     "rule": "React-createRef",
     "path": "ts/components/conversation/ConversationHeader.js",
     "line": "        this.menuTriggerRef = react_1.default.createRef();",
-    "lineNumber": 21,
+    "lineNumber": 28,
     "reasonCategory": "usageTrusted",
     "updated": "2020-08-28T16:12:19.904Z",
     "reasonDetail": "Used to reference popup menu"
@@ -14737,7 +14737,7 @@
     "rule": "React-createRef",
     "path": "ts/components/conversation/ConversationHeader.tsx",
     "line": "    this.menuTriggerRef = React.createRef();",
-    "lineNumber": 93,
+    "lineNumber": 100,
     "reasonCategory": "usageTrusted",
     "updated": "2020-05-20T20:10:43.540Z",
     "reasonDetail": "Used to reference popup menu"