Add new toast region for calling button toasts
This commit is contained in:
parent
90eae4b4bf
commit
00d96888e7
7 changed files with 129 additions and 80 deletions
|
@ -24,7 +24,7 @@ import { useIsOnline } from '../hooks/useIsOnline';
|
|||
import * as KeyboardLayout from '../services/keyboardLayout';
|
||||
import type { ConversationType } from '../state/ducks/conversations';
|
||||
import { useCallingToasts } from './CallingToast';
|
||||
import { useMutedToast } from './CallingToastManager';
|
||||
import { CallingButtonToastsContainer } from './CallingToastManager';
|
||||
|
||||
export type PropsType = {
|
||||
availableCameras: Array<MediaDeviceInfo>;
|
||||
|
@ -228,9 +228,7 @@ export function CallingLobby({
|
|||
toggleParticipants,
|
||||
]);
|
||||
|
||||
useMutedToast(hasLocalAudio, i18n);
|
||||
useWasInitiallyMutedToast(hasLocalAudio, i18n);
|
||||
useOutgoingRingToast(isRingButtonVisible, outgoingRing, i18n);
|
||||
|
||||
return (
|
||||
<FocusTrap>
|
||||
|
@ -283,6 +281,11 @@ export function CallingLobby({
|
|||
<div className="CallControls__CallTitle">{conversation.title}</div>
|
||||
<div className="CallControls__Status">{callStatus}</div>
|
||||
</div>
|
||||
<CallingButtonToastsContainer
|
||||
hasLocalAudio={hasLocalAudio}
|
||||
outgoingRing={outgoingRing}
|
||||
i18n={i18n}
|
||||
/>
|
||||
<div className="CallControls__ButtonContainer">
|
||||
<CallingButton
|
||||
buttonType={videoButtonType}
|
||||
|
@ -349,51 +352,3 @@ function useWasInitiallyMutedToast(
|
|||
}
|
||||
}, [hideToast, wasInitiallyMuted, hasLocalAudio]);
|
||||
}
|
||||
|
||||
function useOutgoingRingToast(
|
||||
isRingButtonVisible: boolean,
|
||||
outgoingRing: boolean,
|
||||
i18n: LocalizerType
|
||||
): void {
|
||||
const [previousOutgoingRing, setPreviousOutgoingRing] = React.useState<
|
||||
undefined | boolean
|
||||
>(undefined);
|
||||
const { showToast, hideToast } = useCallingToasts();
|
||||
const RINGING_TOAST_KEY = 'ringing';
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isRingButtonVisible) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPreviousOutgoingRing(outgoingRing);
|
||||
}, [isRingButtonVisible, outgoingRing]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isRingButtonVisible) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
previousOutgoingRing !== undefined &&
|
||||
outgoingRing !== previousOutgoingRing
|
||||
) {
|
||||
hideToast(RINGING_TOAST_KEY);
|
||||
showToast({
|
||||
key: RINGING_TOAST_KEY,
|
||||
content: outgoingRing
|
||||
? i18n('icu:CallControls__RingingToast--ringing-on')
|
||||
: i18n('icu:CallControls__RingingToast--ringing-off'),
|
||||
autoClose: true,
|
||||
dismissable: true,
|
||||
});
|
||||
}
|
||||
}, [
|
||||
isRingButtonVisible,
|
||||
outgoingRing,
|
||||
previousOutgoingRing,
|
||||
hideToast,
|
||||
showToast,
|
||||
i18n,
|
||||
]);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue