Show toast when group call is reconnecting

stylesheets/_modules.scss

@@ -6410,6 +6410,27 @@ button.module-image__border-overlay:focus {
       fill-mode: forwards;
     }
   }
+
+  &__toast {
+    @include font-body-1-bold;
+    background-color: $color-gray-75;
+    border-radius: 8px;
+    color: $color-white;
+    max-width: 80%;
+    opacity: 1;
+    padding: 12px;
+    position: absolute;
+    text-align: center;
+    top: 12px;
+    transition: top 200ms ease-out, opacity 200ms ease-out;
+    user-select: none;
+    z-index: 1;
+
+    &--hidden {
+      opacity: 0;
+      top: 5px;
+    }
+  }
 }
 
 .module-calling-tools {

ts/components/CallScreen.stories.tsx

@@ -80,7 +80,7 @@ const createProps = (
       hasLocalVideo: true,
       pip: false,
       settingsDialogOpen: false,
-      showParticipantsList: true,
+      showParticipantsList: false,
     },
     call: overrideProps.callTypeState || getDirectCallState(overrideProps),
     conversation: {
@@ -233,3 +233,24 @@ story.add('Group call - Many', () => (
     })}
   />
 ));
+
+story.add('Group call - reconnecting', () => (
+  <CallScreen
+    {...createProps({
+      callTypeState: {
+        ...getGroupCallState(),
+        connectionState: GroupCallConnectionState.Reconnecting,
+      },
+      groupCallParticipants: [
+        {
+          demuxId: 0,
+          hasRemoteAudio: true,
+          hasRemoteVideo: true,
+          isSelf: false,
+          title: 'Tyler',
+          videoAspectRatio: 1.3,
+        },
+      ],
+    })}
+  />
+));

ts/components/CallScreen.tsx

@@ -27,6 +27,7 @@ import { LocalizerType } from '../types/Util';
 import { missingCaseError } from '../util/missingCaseError';
 import { DirectCallRemoteParticipant } from './DirectCallRemoteParticipant';
 import { GroupCallRemoteParticipants } from './GroupCallRemoteParticipants';
+import { GroupCallToastManager } from './GroupCallToastManager';
 
 export type PropsType = {
   activeCall: ActiveCallType;
@@ -224,6 +225,12 @@ export const CallScreen: React.FC<PropsType> = ({
       }}
       role="group"
     >
+      {call.callMode === CallMode.Group ? (
+        <GroupCallToastManager
+          connectionState={call.connectionState}
+          i18n={i18n}
+        />
+      ) : null}
       <div
         className={classNames('module-ongoing-call__header', controlsFadeClass)}
       >

ts/components/GroupCallToastManager.tsx

@@ -0,0 +1,37 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { GroupCallConnectionState } from '../types/Calling';
+import { LocalizerType } from '../types/Util';
+
+interface PropsType {
+  connectionState: GroupCallConnectionState;
+  i18n: LocalizerType;
+}
+
+// In the future, this component should show toasts when users join or leave. See
+//   DESKTOP-902.
+export const GroupCallToastManager: React.FC<PropsType> = ({
+  connectionState,
+  i18n,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(connectionState === GroupCallConnectionState.Reconnecting);
+  }, [connectionState, setIsVisible]);
+
+  const message = i18n('callReconnecting');
+
+  return (
+    <div
+      className={classNames('module-ongoing-call__toast', {
+        'module-ongoing-call__toast--hidden': !isVisible,
+      })}
+    >
+      {message}
+    </div>
+  );
+};

ts/util/lint/exceptions.json

@@ -14382,7 +14382,7 @@
     "rule": "React-useRef",
     "path": "ts/components/CallScreen.js",
     "line": "    const localVideoRef = react_1.useRef(null);",
-    "lineNumber": 40,
+    "lineNumber": 41,
     "reasonCategory": "usageTrusted",
     "updated": "2020-10-26T21:35:52.858Z",
     "reasonDetail": "Used to get the local video element for rendering."