Group calls: mute in the lobby if joining a large call

ts/components/CallingToastManager.tsx

@@ -1,12 +1,12 @@
-// Copyright 2020-2021 Signal Messenger, LLC
+// Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
 import type { ActiveCallType } from '../types/Calling';
 import { CallMode, GroupCallConnectionState } from '../types/Calling';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
+import { CallingToast, DEFAULT_LIFETIME } from './CallingToast';
 
 type PropsType = {
   activeCall: ActiveCallType;
@@ -101,8 +101,6 @@ function useScreenSharingToast({ activeCall, i18n }: PropsType): ToastType {
   return result;
 }
 
-const DEFAULT_DELAY = 5000;
-
 // In the future, this component should show toasts when users join or leave. See
 //   DESKTOP-902.
 export const CallingToastManager: React.FC<PropsType> = props => {
@@ -131,7 +129,7 @@ export const CallingToastManager: React.FC<PropsType> = props => {
         if (timeoutRef && timeoutRef.current) {
           clearTimeout(timeoutRef.current);
         }
-        timeoutRef.current = setTimeout(dismissToast, DEFAULT_DELAY);
+        timeoutRef.current = setTimeout(dismissToast, DEFAULT_LIFETIME);
       }
 
       setToastMessage(toast.message);
@@ -144,17 +142,9 @@ export const CallingToastManager: React.FC<PropsType> = props => {
     };
   }, [dismissToast, setToastMessage, timeoutRef, toast]);
 
-  const isVisible = Boolean(toastMessage);
-
   return (
-    <button
-      className={classNames('module-ongoing-call__toast', {
-        'module-ongoing-call__toast--hidden': !isVisible,
-      })}
-      type="button"
-      onClick={dismissToast}
-    >
+    <CallingToast isVisible={Boolean(toastMessage)} onClick={dismissToast}>
       {toastMessage}
-    </button>
+    </CallingToast>
   );
 };