Group calling participants refactor

ts/state/smart/CallManager.tsx

@@ -3,21 +3,23 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { memoize } from 'lodash';
 import { mapDispatchToProps } from '../actions';
 import { CallManager } from '../../components/CallManager';
 import { calling as callingService } from '../../services/calling';
+import { getUserUuid, getIntl } from '../selectors/user';
 import { getMe, getConversationSelector } from '../selectors/conversations';
-import { getActiveCall, GroupCallParticipantInfoType } from '../ducks/calling';
+import { getActiveCall } from '../ducks/calling';
+import { ConversationType } from '../ducks/conversations';
 import { getIncomingCall } from '../selectors/calling';
 import {
+  ActiveCallType,
   CallMode,
   GroupCallPeekedParticipantType,
   GroupCallRemoteParticipantType,
 } from '../../types/Calling';
 import { StateType } from '../reducer';
-
-import { getIntl } from '../selectors/user';
-
+import { missingCaseError } from '../../util/missingCaseError';
 import { SmartCallingDeviceSelection } from './CallingDeviceSelection';
 
 function renderDeviceSelection(): JSX.Element {
@@ -28,7 +30,9 @@ const getGroupCallVideoFrameSource = callingService.getGroupCallVideoFrameSource
   callingService
 );
 
-const mapStateToActiveCallProp = (state: StateType) => {
+const mapStateToActiveCallProp = (
+  state: StateType
+): undefined | ActiveCallType => {
   const { calling } = state;
   const { activeCallState } = calling;
 
@@ -51,48 +55,59 @@ const mapStateToActiveCallProp = (state: StateType) => {
     return undefined;
   }
 
-  // TODO: The way we deal with remote participants isn't ideal. See DESKTOP-949.
-  let isCallFull = false;
-  const groupCallPeekedParticipants: Array<GroupCallPeekedParticipantType> = [];
-  const groupCallParticipants: Array<GroupCallRemoteParticipantType> = [];
-  if (call.callMode === CallMode.Group) {
-    isCallFull = call.peekInfo.deviceCount >= call.peekInfo.maxDevices;
-
-    call.peekInfo.conversationIds.forEach((conversationId: string) => {
-      const peekedConversation = conversationSelector(conversationId);
-
-      if (!peekedConversation) {
-        window.log.error(
-          'Peeked participant has no corresponding conversation'
-        );
-        return;
-      }
-
-      groupCallPeekedParticipants.push({
-        avatarPath: peekedConversation.avatarPath,
-        color: peekedConversation.color,
-        firstName: peekedConversation.firstName,
-        isSelf: conversationId === state.user.ourConversationId,
-        name: peekedConversation.name,
-        profileName: peekedConversation.profileName,
-        title: peekedConversation.title,
-      });
+  const conversationSelectorByUuid = memoize<
+    (uuid: string) => undefined | ConversationType
+  >(uuid => {
+    const conversationId = window.ConversationController.ensureContactIds({
+      uuid,
     });
+    return conversationId ? conversationSelector(conversationId) : undefined;
+  });
 
-    call.remoteParticipants.forEach(
-      (remoteParticipant: GroupCallParticipantInfoType) => {
-        const remoteConversation = conversationSelector(
-          remoteParticipant.conversationId
+  const baseResult = {
+    conversation,
+    hasLocalAudio: activeCallState.hasLocalAudio,
+    hasLocalVideo: activeCallState.hasLocalVideo,
+    joinedAt: activeCallState.joinedAt,
+    pip: activeCallState.pip,
+    settingsDialogOpen: activeCallState.settingsDialogOpen,
+    showParticipantsList: activeCallState.showParticipantsList,
+  };
+
+  switch (call.callMode) {
+    case CallMode.Direct:
+      return {
+        ...baseResult,
+        callEndedReason: call.callEndedReason,
+        callMode: CallMode.Direct,
+        callState: call.callState,
+        peekedParticipants: [],
+        remoteParticipants: [
+          {
+            hasRemoteVideo: Boolean(call.hasRemoteVideo),
+          },
+        ],
+      };
+    case CallMode.Group: {
+      const ourUuid = getUserUuid(state);
+
+      const remoteParticipants: Array<GroupCallRemoteParticipantType> = [];
+      const peekedParticipants: Array<GroupCallPeekedParticipantType> = [];
+
+      for (let i = 0; i < call.remoteParticipants.length; i += 1) {
+        const remoteParticipant = call.remoteParticipants[i];
+
+        const remoteConversation = conversationSelectorByUuid(
+          remoteParticipant.uuid
         );
-
         if (!remoteConversation) {
           window.log.error(
             'Remote participant has no corresponding conversation'
           );
-          return;
+          continue;
         }
 
-        groupCallParticipants.push({
+        remoteParticipants.push({
           avatarPath: remoteConversation.avatarPath,
           color: remoteConversation.color,
           demuxId: remoteParticipant.demuxId,
@@ -100,27 +115,55 @@ const mapStateToActiveCallProp = (state: StateType) => {
           hasRemoteAudio: remoteParticipant.hasRemoteAudio,
           hasRemoteVideo: remoteParticipant.hasRemoteVideo,
           isBlocked: Boolean(remoteConversation.isBlocked),
-          isSelf: remoteParticipant.isSelf,
+          isSelf: remoteParticipant.uuid === ourUuid,
           name: remoteConversation.name,
           profileName: remoteConversation.profileName,
           speakerTime: remoteParticipant.speakerTime,
           title: remoteConversation.title,
+          uuid: remoteParticipant.uuid,
           videoAspectRatio: remoteParticipant.videoAspectRatio,
         });
       }
-    );
 
-    groupCallParticipants.sort((a, b) => a.title.localeCompare(b.title));
+      for (let i = 0; i < call.peekInfo.uuids.length; i += 1) {
+        const peekedParticipantUuid = call.peekInfo.uuids[i];
+
+        const peekedConversation = conversationSelectorByUuid(
+          peekedParticipantUuid
+        );
+        if (!peekedConversation) {
+          window.log.error(
+            'Remote participant has no corresponding conversation'
+          );
+          continue;
+        }
+
+        peekedParticipants.push({
+          avatarPath: peekedConversation.avatarPath,
+          color: peekedConversation.color,
+          firstName: peekedConversation.firstName,
+          isSelf: peekedParticipantUuid === ourUuid,
+          name: peekedConversation.name,
+          profileName: peekedConversation.profileName,
+          title: peekedConversation.title,
+          uuid: peekedParticipantUuid,
+        });
+      }
+
+      return {
+        ...baseResult,
+        callMode: CallMode.Group,
+        connectionState: call.connectionState,
+        deviceCount: call.peekInfo.deviceCount,
+        joinState: call.joinState,
+        maxDevices: call.peekInfo.maxDevices,
+        peekedParticipants,
+        remoteParticipants,
+      };
+    }
+    default:
+      throw missingCaseError(call);
   }
-
-  return {
-    activeCallState,
-    call,
-    conversation,
-    isCallFull,
-    groupCallPeekedParticipants,
-    groupCallParticipants,
-  };
 };
 
 const mapStateToIncomingCallProp = (state: StateType) => {
@@ -147,7 +190,12 @@ const mapStateToProps = (state: StateType) => ({
   getGroupCallVideoFrameSource,
   i18n: getIntl(state),
   incomingCall: mapStateToIncomingCallProp(state),
-  me: getMe(state),
+  me: {
+    ...getMe(state),
+    // `getMe` returns a `ConversationType` which might not have a UUID, at least
+    //   according to the type. This ensures one is set.
+    uuid: getUserUuid(state),
+  },
   renderDeviceSelection,
 });