Centralize calling toasts and add imperative API
This commit is contained in:
parent
dd45b08b0f
commit
0c896ca1f2
11 changed files with 568 additions and 158 deletions
|
@ -18,7 +18,7 @@ import { generateAci } from '../types/ServiceId';
|
|||
import type { ConversationType } from '../state/ducks/conversations';
|
||||
import { AvatarColors } from '../types/Colors';
|
||||
import type { PropsType } from './CallScreen';
|
||||
import { CallScreen } from './CallScreen';
|
||||
import { CallScreen as UnwrappedCallScreen } from './CallScreen';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import { missingCaseError } from '../util/missingCaseError';
|
||||
import {
|
||||
|
@ -27,6 +27,7 @@ import {
|
|||
} from '../test-both/helpers/getDefaultConversation';
|
||||
import { fakeGetGroupCallVideoFrameSource } from '../test-both/helpers/fakeGetGroupCallVideoFrameSource';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import { CallingToastProvider, useCallingToasts } from './CallingToast';
|
||||
|
||||
const MAX_PARTICIPANTS = 64;
|
||||
|
||||
|
@ -171,6 +172,14 @@ const createProps = (
|
|||
toggleSpeakerView: action('toggle-speaker-view'),
|
||||
});
|
||||
|
||||
function CallScreen(props: ReturnType<typeof createProps>): JSX.Element {
|
||||
return (
|
||||
<CallingToastProvider i18n={i18n}>
|
||||
<UnwrappedCallScreen {...props} />
|
||||
</CallingToastProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
title: 'Components/CallScreen',
|
||||
argTypes: {},
|
||||
|
@ -382,3 +391,59 @@ export function GroupCallSomeoneIsSharingScreenAndYoureReconnecting(): JSX.Eleme
|
|||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function GroupCallSomeoneStoppedSharingScreen(): JSX.Element {
|
||||
const [remoteParticipants, setRemoteParticipants] = React.useState(
|
||||
allRemoteParticipants.slice(0, 5).map((participant, index) => ({
|
||||
...participant,
|
||||
presenting: index === 1,
|
||||
sharingScreen: index === 1,
|
||||
}))
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
setTimeout(
|
||||
() => setRemoteParticipants(allRemoteParticipants.slice(0, 5)),
|
||||
1000
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<CallScreen
|
||||
{...createProps({
|
||||
callMode: CallMode.Group,
|
||||
remoteParticipants,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ToastEmitter(): null {
|
||||
const { showToast } = useCallingToasts();
|
||||
const toastCount = React.useRef(0);
|
||||
React.useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const autoClose = toastCount.current % 2 === 0;
|
||||
showToast({
|
||||
key: Date.now().toString(),
|
||||
content: `${
|
||||
autoClose ? 'Disappearing' : 'Non-disappearing'
|
||||
} toast sent: ${Date.now()}`,
|
||||
dismissable: true,
|
||||
autoClose,
|
||||
});
|
||||
toastCount.current += 1;
|
||||
}, 1500);
|
||||
return () => clearInterval(interval);
|
||||
}, [showToast]);
|
||||
return null;
|
||||
}
|
||||
|
||||
export function CallScreenToastAPalooza(): JSX.Element {
|
||||
return (
|
||||
<CallingToastProvider i18n={i18n}>
|
||||
<UnwrappedCallScreen {...createProps()} />
|
||||
<ToastEmitter />
|
||||
</CallingToastProvider>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue