jaredandClaude Opus 5
070a1ea012
Answering from the in-call banner is the only call-to-call switch path; it started the new embed and let the atom dispose the old one, which just removed the iframe — our m.call.member in the old room lingered ~17 s (until the delayed leave expired), so everyone there still saw us in the call. hangupAndWait moves out of LogoutDialog into plugins/call/hangup.ts and handleAnswer now hangs up, waits for our membership to clear (bounded 4 s), disposes the old embed itself (its HangupCall echo would otherwise land after startCall and clear the NEW embed from the atom — seen in testing), then joins the new call. Measured headless: old membership gone in 1 s, new call live with both participants. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
111 lines
4.2 KiB
TypeScript
111 lines
4.2 KiB
TypeScript
import React, { forwardRef, useCallback } from 'react';
|
||
import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
|
||
import { useAtom } from 'jotai';
|
||
import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
|
||
import { logoutClient } from '../../client/initMatrix';
|
||
import { callEmbedAtom } from '../state/callEmbed';
|
||
import { hangupCallAndWait } from '../plugins/call/hangup';
|
||
import { useMatrixClient } from '../hooks/useMatrixClient';
|
||
import { useModalStyle } from '../hooks/useModalStyle';
|
||
import { useCrossSigningActive } from '../hooks/useCrossSigning';
|
||
import { InfoCard } from './info-card';
|
||
import {
|
||
useDeviceVerificationStatus,
|
||
VerificationStatus,
|
||
} from '../hooks/useDeviceVerificationStatus';
|
||
|
||
/**
|
||
* Ask Element Call to hang up and wait (bounded) until our own MatrixRTC
|
||
* membership has actually been removed from the room, so the leave reaches
|
||
* the homeserver before the client is stopped and the token is revoked.
|
||
*/
|
||
type LogoutDialogProps = {
|
||
handleClose: () => void;
|
||
};
|
||
export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
|
||
({ handleClose }, ref) => {
|
||
const mx = useMatrixClient();
|
||
const modalStyle = useModalStyle(480);
|
||
const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
|
||
const crossSigningActive = useCrossSigningActive();
|
||
const verificationStatus = useDeviceVerificationStatus(
|
||
mx.getCrypto(),
|
||
mx.getSafeUserId(),
|
||
mx.getDeviceId() ?? undefined,
|
||
);
|
||
|
||
const [callEmbed, setCallEmbed] = useAtom(callEmbedAtom);
|
||
|
||
const [logoutState, logout] = useAsyncCallback<void, Error, []>(
|
||
useCallback(async () => {
|
||
// [Gitea #29] Logging out mid-call must hang up first, or the MatrixRTC
|
||
// membership (expires: 4 h) stays behind as a ghost participant and
|
||
// everyone else sees you "in call" until it times out.
|
||
if (callEmbed && callEmbed.joined && !callEmbed.disposed) {
|
||
await hangupCallAndWait(mx, callEmbed);
|
||
setCallEmbed(undefined);
|
||
}
|
||
await logoutClient(mx);
|
||
}, [mx, callEmbed, setCallEmbed]),
|
||
);
|
||
|
||
const ongoingLogout = logoutState.status === AsyncStatus.Loading;
|
||
|
||
return (
|
||
<Dialog variant="Surface" ref={ref} style={modalStyle}>
|
||
<Header
|
||
style={{
|
||
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||
borderBottomWidth: config.borderWidth.B300,
|
||
}}
|
||
variant="Surface"
|
||
size="500"
|
||
>
|
||
<Box grow="Yes">
|
||
<Text as="h2" size="H4">
|
||
Logout
|
||
</Text>
|
||
</Box>
|
||
</Header>
|
||
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||
{hasEncryptedRoom &&
|
||
(crossSigningActive ? (
|
||
verificationStatus === VerificationStatus.Unverified && (
|
||
<InfoCard
|
||
variant="Critical"
|
||
title="Unverified Device"
|
||
description="Verify your device before logging out to save your encrypted messages."
|
||
/>
|
||
)
|
||
) : (
|
||
<InfoCard
|
||
variant="Critical"
|
||
title="Alert"
|
||
description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
|
||
/>
|
||
))}
|
||
<Text priority="400">You’re about to log out. Are you sure?</Text>
|
||
{logoutState.status === AsyncStatus.Error && (
|
||
<Text style={{ color: color.Critical.Main }} size="T300">
|
||
Failed to logout! {logoutState.error.message}
|
||
</Text>
|
||
)}
|
||
<Box direction="Column" gap="200">
|
||
<Button
|
||
variant="Critical"
|
||
onClick={logout}
|
||
disabled={ongoingLogout}
|
||
before={ongoingLogout && <Spinner variant="Critical" fill="Solid" size="200" />}
|
||
>
|
||
<Text size="B400">Logout</Text>
|
||
</Button>
|
||
<Button variant="Secondary" fill="Soft" onClick={handleClose} disabled={ongoingLogout}>
|
||
<Text size="B400">Cancel</Text>
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
</Dialog>
|
||
);
|
||
},
|
||
);
|