cleanup UI for missed call messages in msg list

ts/components/conversation/MissedCallNotification.tsx

@@ -7,10 +7,17 @@ import { PropsForMissedCallNotification } from '../../state/ducks/conversations'
 import { getSelectedConversation } from '../../state/selectors/conversations';
 import { ReadableMessage } from './ReadableMessage';
 
-const MissedCallContent = styled.div`
-  background-color: red;
-  width: 100%;
-  height: 30px;
+export const StyledFakeMessageBubble = styled.div`
+  background: var(--color-fake-chat-bubble-background);
+  color: var(--color-text);
+
+  width: 90%;
+  max-width: 700px;
+  margin: 10px auto;
+  padding: 5px 0px;
+  border-radius: 4px;
+  word-break: break-word;
+  text-align: center;
 `;
 
 export const MissedCallNotification = (props: PropsForMissedCallNotification) => {
@@ -30,7 +37,7 @@ export const MissedCallNotification = (props: PropsForMissedCallNotification) =>
       isUnread={isUnread}
       key={`readable-message-${messageId}`}
     >
-      <MissedCallContent>{window.i18n('callMissed', displayName)}</MissedCallContent>
+      <StyledFakeMessageBubble>{window.i18n('callMissed', displayName)}</StyledFakeMessageBubble>
     </ReadableMessage>
   );
 };

ts/components/session/calling/CallContainer.tsx

@@ -41,6 +41,8 @@ const StyledDraggableVideoElement = styled(StyledVideoElement)`
 
 const DraggableCallWindowInner = styled.div`
   cursor: pointer;
+  min-width: 85px;
+  min-height: 85px;
 `;
 
 const CenteredAvatarInDraggable = styled.div`

ts/session/utils/CallManager.ts

@@ -124,7 +124,9 @@ function sendVideoStatusViaDataChannel() {
   const stringToSend = JSON.stringify({
     video: videoEnabledLocally,
   });
-  dataChannel?.send(stringToSend);
+  if (dataChannel && dataChannel.readyState === 'open') {
+    dataChannel?.send(stringToSend);
+  }
 }
 
 export async function selectCameraByDeviceId(cameraDeviceId: string) {
@@ -276,7 +278,9 @@ async function openMediaDevicesAndAddTracks() {
 
     const firstAudio = audioInputsList[0].deviceId;
     const firstVideo = camerasList[0].deviceId;
-    window.log.info(`openMediaDevices video:${firstVideo}   audio:${firstAudio}`);
+    window.log.info(
+      `openMediaDevices videoDevice:${firstVideo}:${camerasList[0].label}   audioDevice:${firstAudio}`
+    );
 
     const devicesConfig = {
       audio: {
@@ -385,7 +389,7 @@ function handleConnectionStateChanged(pubkey: string) {
 }
 
 function closeVideoCall() {
-  window.log.info('closingVideoCall ', peerConnection);
+  window.log.info('closingVideoCall ');
   if (peerConnection) {
     peerConnection.ontrack = null;
     peerConnection.onicecandidate = null;
@@ -584,13 +588,18 @@ export function handleCallTypeEndCall(sender: string) {
   callCache.delete(sender);
   window.log.info('handling callMessage END_CALL');
 
-  if (videoEventsListener) {
-    videoEventsListener(null, null, [], [], true);
+  const convos = getConversationController().getConversations();
+  const callingConvos = convos.filter(convo => convo.callState !== undefined);
+  if (callingConvos.length > 0) {
+    // we just got a end call event from whoever we are in a call with
+    if (callingConvos.length === 1 && callingConvos[0].id === sender) {
+      closeVideoCall();
+      if (videoEventsListener) {
+        videoEventsListener(null, null, [], [], true);
+      }
+      window.inboxStore?.dispatch(endCall({ pubkey: sender }));
+    }
   }
-  closeVideoCall();
-  //
-  // FIXME audric trigger UI cleanup
-  window.inboxStore?.dispatch(endCall({ pubkey: sender }));
 }
 
 async function buildAnswerAndSendIt(sender: string) {

ts/session/utils/Toast.tsx

@@ -142,7 +142,7 @@ export function pushedMissedCall(conversationName: string) {
   pushToastInfo(
     'missedCall',
     window.i18n('callMissedTitle'),
-    window.i18n('callMissedTitle', conversationName)
+    window.i18n('callMissed', conversationName)
   );
 }