Add new toast region for calling button toasts

This commit is contained in:
trevor-signal 2023-10-26 14:26:25 -04:00 committed by GitHub
parent 90eae4b4bf
commit 00d96888e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 129 additions and 80 deletions

View file

@ -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;
}