Initial group calling support

ts/components/CallManager.stories.tsx

@@ -2,11 +2,19 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
+import { noop } from 'lodash';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { CallManager } from './CallManager';
-import { CallEndedReason, CallState } from '../types/Calling';
+import { CallManager, PropsType } from './CallManager';
+import {
+  CallEndedReason,
+  CallMode,
+  CallState,
+  GroupCallConnectionState,
+  GroupCallJoinState,
+} from '../types/Calling';
+import { ConversationTypeType } from '../state/ducks/conversations';
 import { ColorType } from '../types/Colors';
 import { setup as setupI18n } from '../../js/modules/i18n';
 import enMessages from '../../_locales/en/messages.json';
@@ -21,6 +29,9 @@ const conversation = {
   name: 'Rick Sanchez',
   phoneNumber: '3051234567',
   profileName: 'Rick Sanchez',
+  markedUnread: false,
+  type: 'direct' as ConversationTypeType,
+  lastUpdated: Date.now(),
 };
 
 const defaultProps = {
@@ -29,6 +40,17 @@ const defaultProps = {
   cancelCall: action('cancel-call'),
   closeNeedPermissionScreen: action('close-need-permission-screen'),
   declineCall: action('decline-call'),
+  // We allow `any` here because these are fake and actually come from RingRTC, which we
+  //   can't import.
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  createCanvasVideoRenderer: () =>
+    ({
+      setCanvas: noop,
+      enable: noop,
+      disable: noop,
+    } as any),
+  getGroupCallVideoFrameSource: noop as any,
+  /* eslint-enable @typescript-eslint/no-explicit-any */
   hangUp: action('hang-up'),
   i18n,
   me: {
@@ -52,10 +74,11 @@ const permutations = [
     props: {},
   },
   {
-    title: 'Call Manager (ongoing)',
+    title: 'Call Manager (ongoing direct call)',
     props: {
       activeCall: {
         call: {
+          callMode: CallMode.Direct as CallMode.Direct,
           conversationId: '3051234567',
           callState: CallState.Accepted,
           isIncoming: false,
@@ -75,11 +98,36 @@ const permutations = [
       },
     },
   },
+  {
+    title: 'Call Manager (ongoing group call)',
+    props: {
+      activeCall: {
+        call: {
+          callMode: CallMode.Group as CallMode.Group,
+          conversationId: '3051234567',
+          connectionState: GroupCallConnectionState.Connected,
+          joinState: GroupCallJoinState.Joined,
+          remoteParticipants: [],
+        },
+        activeCallState: {
+          conversationId: '3051234567',
+          joinedAt: Date.now(),
+          hasLocalAudio: true,
+          hasLocalVideo: false,
+          participantsList: false,
+          pip: false,
+          settingsDialogOpen: false,
+        },
+        conversation,
+      },
+    },
+  },
   {
     title: 'Call Manager (ringing)',
     props: {
       incomingCall: {
         call: {
+          callMode: CallMode.Direct as CallMode.Direct,
           conversationId: '3051234567',
           callState: CallState.Ringing,
           isIncoming: true,
@@ -95,6 +143,7 @@ const permutations = [
     props: {
       activeCall: {
         call: {
+          callMode: CallMode.Direct as CallMode.Direct,
           conversationId: '3051234567',
           callState: CallState.Ended,
           callEndedReason: CallEndedReason.RemoteHangupNeedPermission,
@@ -118,10 +167,12 @@ const permutations = [
 ];
 
 storiesOf('Components/CallManager', module).add('Iterations', () => {
-  return permutations.map(({ props, title }) => (
-    <>
-      <h3>{title}</h3>
-      <CallManager {...defaultProps} {...props} />
-    </>
-  ));
+  return permutations.map(
+    ({ props, title }: { props: Partial<PropsType>; title: string }) => (
+      <>
+        <h3>{title}</h3>
+        <CallManager {...defaultProps} {...props} />
+      </>
+    )
+  );
 });