85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
 
|
import React from 'react';
|
||
|
|
import FocusTrap from 'focus-trap-react';
|
||
|
|
import {
|
||
|
|
Box,
|
||
|
|
config,
|
||
|
|
Dialog,
|
||
|
|
Header,
|
||
|
|
Icon,
|
||
|
|
IconButton,
|
||
|
|
Icons,
|
||
|
|
Overlay,
|
||
|
|
OverlayBackdrop,
|
||
|
|
OverlayCenter,
|
||
|
|
Text,
|
||
|
|
} from 'folds';
|
||
|
|
import { useAtom } from 'jotai';
|
||
|
|
import { callSummaryViewAtom } from '../../state/callSummary';
|
||
|
|
import { useModalStyle } from '../../hooks/useModalStyle';
|
||
|
|
import { stopPropagation } from '../../utils/keyboard';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* [Gitea #253] The post-call "Details" card: opened from the call-ended toast,
|
||
|
|
* shows who was in the call, connection quality and whose side it was on,
|
||
|
|
* network numbers and your own activity (technical wording).
|
||
|
|
*/
|
||
|
|
export function CallSummaryDialog() {
|
||
|
|
const [view, setView] = useAtom(callSummaryViewAtom);
|
||
|
|
const modalStyle = useModalStyle(400);
|
||
|
|
if (!view) return null;
|
||
|
|
const close = () => setView(undefined);
|
||
|
|
return (
|
||
|
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
||
|
|
<OverlayCenter>
|
||
|
|
<FocusTrap
|
||
|
|
focusTrapOptions={{
|
||
|
|
initialFocus: false,
|
||
|
|
onDeactivate: close,
|
||
|
|
clickOutsideDeactivates: true,
|
||
|
|
escapeDeactivates: stopPropagation,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Dialog
|
||
|
|
variant="Surface"
|
||
|
|
role="dialog"
|
||
|
|
aria-modal="true"
|
||
|
|
aria-labelledby="call-summary-title"
|
||
|
|
style={modalStyle}
|
||
|
|
>
|
||
|
|
<Header
|
||
|
|
variant="Surface"
|
||
|
|
size="500"
|
||
|
|
style={{
|
||
|
|
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
|
||
|
|
borderBottomWidth: config.borderWidth.B300,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Box grow="Yes" alignItems="Center" gap="200">
|
||
|
|
<Icon src={Icons.Phone} size="100" />
|
||
|
|
<Text id="call-summary-title" size="H4" truncate>
|
||
|
|
Call summary · {view.roomName}
|
||
|
|
</Text>
|
||
|
|
</Box>
|
||
|
|
<IconButton size="300" radii="300" onClick={close} aria-label="Close">
|
||
|
|
<Icon src={Icons.Cross} />
|
||
|
|
</IconButton>
|
||
|
|
</Header>
|
||
|
|
<Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
|
||
|
|
{view.sections.map((section) => (
|
||
|
|
<Box key={section.title} direction="Column" gap="100">
|
||
|
|
<Text size="L400">{section.title}</Text>
|
||
|
|
{section.lines.map((line) => (
|
||
|
|
<Text key={line} size="T300" style={{ fontVariantNumeric: 'tabular-nums' }}>
|
||
|
|
{line}
|
||
|
|
</Text>
|
||
|
|
))}
|
||
|
|
</Box>
|
||
|
|
))}
|
||
|
|
</Box>
|
||
|
|
</Dialog>
|
||
|
|
</FocusTrap>
|
||
|
|
</OverlayCenter>
|
||
|
|
</Overlay>
|
||
|
|
);
|
||
|
|
}
|