mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix GroupCallRemoteParticipant error dialog to retain error message

Browse source
This commit is contained in:
ayumi-signal 2024-03-19 09:41:05 -07:00 committed by GitHub
parent 33d30c6e74
commit ffb1fe2590
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 90 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
ts/components/GroupCallRemoteParticipant.stories.tsx
View file

@ -192,3 +192,43 @@ export function NoMediaKeys(): JSX.Element {
/>
);
}
export function NoMediaKeysBlockedIntermittent(): JSX.Element {
const [isBlocked, setIsBlocked] = React.useState(false);
React.useEffect(() => {
const interval = setInterval(() => {
setIsBlocked(value => !value);
}, 6000);
return () => clearInterval(interval);
}, [isBlocked]);
const [mediaKeysReceived, setMediaKeysReceived] = React.useState(false);
React.useEffect(() => {
const interval = setInterval(() => {
setMediaKeysReceived(value => !value);
}, 3000);
return () => clearInterval(interval);
}, [mediaKeysReceived]);
return (
<GroupCallRemoteParticipant
{...createProps(
{
isInPip: false,
height: 120,
left: 0,
top: 0,
width: 120,
},
{
addedTime: Date.now() - 60 * 1000,
hasRemoteAudio: true,
mediaKeysReceived,
isBlocked,
}
)}
/>
);
}

76
ts/components/GroupCallRemoteParticipant.tsx
View file

@ -304,8 +304,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
}
let noVideoNode: ReactNode;
let errorDialogTitle: ReactNode;
let errorDialogBody = '';
if (!hasVideoToShow) {
const showDialogButton = (
<button
@ -325,18 +323,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
{showDialogButton}
</>
);
errorDialogTitle = (
<div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
<Intl
i18n={i18n}
id="icu:calling__you-have-blocked"
components={{
name: <ContactName key="name" title={title} />,
}}
/>
</div>
);
errorDialogBody = i18n('icu:calling__block-info');
} else if (showMissingMediaKeys) {
noVideoNode = (
<>
@ -347,18 +333,6 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
{showDialogButton}
</>
);
errorDialogTitle = (
<div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
<Intl
i18n={i18n}
id="icu:calling__missing-media-keys"
components={{
name: <ContactName key="name" title={title} />,
}}
/>
</div>
);
errorDialogBody = i18n('icu:calling__missing-media-keys-info');
} else {
noVideoNode = (
<Avatar
@ -379,6 +353,56 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
}
}
// Error dialog maintains state, so if you have it open and the underlying
// error changes or resolves, you can keep reading the same dialog info.
const [errorDialogTitle, setErrorDialogTitle] = useState<ReactNode | null>(
null
);
const [errorDialogBody, setErrorDialogBody] = useState<string>('');
useEffect(() => {
if (hasVideoToShow || showErrorDialog) {
return;
}
if (isBlocked) {
setErrorDialogTitle(
<div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
<Intl
i18n={i18n}
id="icu:calling__you-have-blocked"
components={{
name: <ContactName key="name" title={title} />,
}}
/>
</div>
);
setErrorDialogBody(i18n('icu:calling__block-info'));
} else if (showMissingMediaKeys) {
setErrorDialogTitle(
<div className="module-ongoing-call__group-call-remote-participant__more-info-modal-title">
<Intl
i18n={i18n}
id="icu:calling__missing-media-keys"
components={{
name: <ContactName key="name" title={title} />,
}}
/>
</div>
);
setErrorDialogBody(i18n('icu:calling__missing-media-keys-info'));
} else {
setErrorDialogTitle(null);
setErrorDialogBody('');
}
}, [
hasVideoToShow,
i18n,
isBlocked,
showErrorDialog,
showMissingMediaKeys,
title,
]);
return (
<>
{showErrorDialog && (