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
|
@ -1,14 +1,15 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import type { ActiveCallType } from '../types/Calling';
|
||||
import { CallMode } from '../types/Calling';
|
||||
import type { ConversationType } from '../state/ducks/conversations';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
import { isReconnecting } from '../util/callingIsReconnecting';
|
||||
import { useCallingToasts } from './CallingToast';
|
||||
import { CallingToastProvider, useCallingToasts } from './CallingToast';
|
||||
import { Spinner } from './Spinner';
|
||||
import { usePrevious } from '../hooks/usePrevious';
|
||||
|
||||
type PropsType = {
|
||||
activeCall: ActiveCallType;
|
||||
|
@ -99,20 +100,17 @@ export function useScreenSharingStoppedToast({
|
|||
}, [activeCall, previousPresenter, showToast, i18n]);
|
||||
}
|
||||
|
||||
export function useMutedToast(
|
||||
hasLocalAudio: boolean,
|
||||
i18n: LocalizerType
|
||||
): void {
|
||||
const [previousHasLocalAudio, setPreviousHasLocalAudio] = useState<
|
||||
undefined | boolean
|
||||
>(undefined);
|
||||
function useMutedToast({
|
||||
hasLocalAudio,
|
||||
i18n,
|
||||
}: {
|
||||
hasLocalAudio: boolean;
|
||||
i18n: LocalizerType;
|
||||
}): void {
|
||||
const previousHasLocalAudio = usePrevious(hasLocalAudio, hasLocalAudio);
|
||||
const { showToast, hideToast } = useCallingToasts();
|
||||
const MUTED_TOAST_KEY = 'muted';
|
||||
|
||||
useEffect(() => {
|
||||
setPreviousHasLocalAudio(hasLocalAudio);
|
||||
}, [hasLocalAudio]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
previousHasLocalAudio !== undefined &&
|
||||
|
@ -130,3 +128,69 @@ export function useMutedToast(
|
|||
}
|
||||
}, [hasLocalAudio, previousHasLocalAudio, hideToast, showToast, i18n]);
|
||||
}
|
||||
|
||||
function useOutgoingRingToast({
|
||||
outgoingRing,
|
||||
i18n,
|
||||
}: {
|
||||
outgoingRing?: boolean;
|
||||
i18n: LocalizerType;
|
||||
}): void {
|
||||
const { showToast, hideToast } = useCallingToasts();
|
||||
const previousOutgoingRing = usePrevious(outgoingRing, outgoingRing);
|
||||
const RINGING_TOAST_KEY = 'ringing';
|
||||
|
||||
React.useEffect(() => {
|
||||
if (outgoingRing === undefined) {
|
||||
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,
|
||||
});
|
||||
}
|
||||
}, [outgoingRing, previousOutgoingRing, hideToast, showToast, i18n]);
|
||||
}
|
||||
|
||||
type CallingButtonToastsType = {
|
||||
hasLocalAudio: boolean;
|
||||
outgoingRing: boolean | undefined;
|
||||
i18n: LocalizerType;
|
||||
};
|
||||
|
||||
export function CallingButtonToastsContainer(
|
||||
props: CallingButtonToastsType
|
||||
): JSX.Element {
|
||||
const toastRegionRef = useRef<HTMLDivElement>(null);
|
||||
return (
|
||||
<CallingToastProvider
|
||||
i18n={props.i18n}
|
||||
maxToasts={1}
|
||||
region={toastRegionRef}
|
||||
>
|
||||
<div className="CallingButtonToasts" ref={toastRegionRef} />
|
||||
<CallingButtonToasts {...props} />
|
||||
</CallingToastProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function CallingButtonToasts({
|
||||
hasLocalAudio,
|
||||
outgoingRing,
|
||||
i18n,
|
||||
}: CallingButtonToastsType) {
|
||||
useMutedToast({ hasLocalAudio, i18n });
|
||||
useOutgoingRingToast({ outgoingRing, i18n });
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue