Call requests: caller

ts/components/CallManager.stories.tsx

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { CallManager } from './CallManager';
-import { CallState } from '../types/Calling';
+import { CallEndedReason, CallState } from '../types/Calling';
 import { ColorType } from '../types/Colors';
 import { setup as setupI18n } from '../../js/modules/i18n';
 import enMessages from '../../_locales/en/messages.json';
@@ -27,6 +27,7 @@ const defaultProps = {
   acceptCall: action('accept-call'),
   callDetails,
   callState: CallState.Accepted,
+  closeNeedPermissionScreen: action('close-need-permission-screen'),
   declineCall: action('decline-call'),
   hangUp: action('hang-up'),
   hasLocalAudio: true,
@@ -55,6 +56,13 @@ const permutations = [
       callState: CallState.Ringing,
     },
   },
+  {
+    title: 'Call Manager (call request needed)',
+    props: {
+      callState: CallState.Ended,
+      callEndedReason: CallEndedReason.RemoteHangupNeedPermission,
+    },
+  },
 ];
 
 storiesOf('Components/CallManager', module).add('Iterations', () => {

ts/components/CallManager.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import { CallingPip } from './CallingPip';
+import { CallNeedPermissionScreen } from './CallNeedPermissionScreen';
 import { CallScreen, PropsType as CallScreenPropsType } from './CallScreen';
 import {
   IncomingCallBar,
   PropsType as IncomingCallBarPropsType,
 } from './IncomingCallBar';
-import { CallState } from '../types/Calling';
+import { CallState, CallEndedReason } from '../types/Calling';
 import { CallDetailsType } from '../state/ducks/calling';
 
 type CallManagerPropsType = {
   callDetails?: CallDetailsType;
   callState?: CallState;
+  callEndedReason?: CallEndedReason;
   pip: boolean;
+  closeNeedPermissionScreen: () => void;
   renderDeviceSelection: () => JSX.Element;
   settingsDialogOpen: boolean;
 };
@@ -24,6 +27,8 @@ export const CallManager = ({
   acceptCall,
   callDetails,
   callState,
+  callEndedReason,
+  closeNeedPermissionScreen,
   declineCall,
   hangUp,
   hasLocalAudio,
@@ -48,6 +53,20 @@ export const CallManager = ({
   const ongoing =
     callState === CallState.Accepted || callState === CallState.Reconnecting;
   const ringing = callState === CallState.Ringing;
+  const ended = callState === CallState.Ended;
+
+  if (ended) {
+    if (callEndedReason === CallEndedReason.RemoteHangupNeedPermission) {
+      return (
+        <CallNeedPermissionScreen
+          close={closeNeedPermissionScreen}
+          callDetails={callDetails}
+          i18n={i18n}
+        />
+      );
+    }
+    return null;
+  }
 
   if (outgoing || ongoing) {
     if (pip) {
@@ -98,6 +117,6 @@ export const CallManager = ({
     );
   }
 
-  // Ended || (Incoming && Prering)
+  // Incoming && Prering
   return null;
 };

ts/components/CallNeedPermissionScreen.tsx

@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from 'react';
+import { CallDetailsType } from '../state/ducks/calling';
+import { LocalizerType } from '../types/Util';
+import { Avatar } from './Avatar';
+import { Intl } from './Intl';
+import { ContactName } from './conversation/ContactName';
+
+interface Props {
+  callDetails: CallDetailsType;
+  i18n: LocalizerType;
+  close: () => void;
+}
+
+const AUTO_CLOSE_MS = 10000;
+
+export const CallNeedPermissionScreen: React.FC<Props> = ({
+  callDetails,
+  i18n,
+  close,
+}) => {
+  const title = callDetails.title || i18n('unknownContact');
+
+  const autoCloseAtRef = useRef<number>(Date.now() + AUTO_CLOSE_MS);
+  useEffect(() => {
+    const timeout = setTimeout(close, autoCloseAtRef.current - Date.now());
+    return clearTimeout.bind(null, timeout);
+  }, [autoCloseAtRef, close]);
+
+  return (
+    <div className="module-call-need-permission-screen">
+      <Avatar
+        avatarPath={callDetails.avatarPath}
+        color={callDetails.color || 'ultramarine'}
+        noteToSelf={false}
+        conversationType="direct"
+        i18n={i18n}
+        name={callDetails.name}
+        phoneNumber={callDetails.phoneNumber}
+        profileName={callDetails.profileName}
+        title={callDetails.title}
+        size={112}
+      />
+
+      <p className="module-call-need-permission-screen__text">
+        <Intl
+          i18n={i18n}
+          id="callNeedPermission"
+          components={[<ContactName i18n={i18n} title={title} />]}
+        />
+      </p>
+
+      <button
+        type="button"
+        className="module-call-need-permission-screen__button"
+        onClick={() => {
+          close();
+        }}
+      >
+        {i18n('close')}
+      </button>
+    </div>
+  );
+};