Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
70f1d640ed | ||
|
|
e57af60466 | ||
|
|
1f10866b60 | ||
|
|
d9c797f3f5 | ||
|
|
9b2ec91dd6 | ||
|
|
1618d71e53 | ||
|
|
4736e23400 | ||
|
|
06294f5269 | ||
|
|
fea9484a03 | ||
|
|
cf22fd8501 | ||
|
|
ddf9da1a55 | ||
|
|
e50bd677d6 |
@@ -1,4 +1,4 @@
|
|||||||
import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
|
import React, { CSSProperties, ReactNode, useEffect, useId, useRef, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
|
import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
|
||||||
import { IContent, MatrixEvent } from 'matrix-js-sdk';
|
import { IContent, MatrixEvent } from 'matrix-js-sdk';
|
||||||
@@ -37,10 +37,14 @@ import {
|
|||||||
} from '../../../types/matrix/common';
|
} from '../../../types/matrix/common';
|
||||||
import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
|
import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
|
||||||
import { parseGeoUri, scaleYDimension } from '../../utils/common';
|
import { parseGeoUri, scaleYDimension } from '../../utils/common';
|
||||||
|
import { formatAccuracy } from '../../utils/geoShare';
|
||||||
import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
|
import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
|
||||||
import { FileHeader, FileDownloadButton } from './FileHeader';
|
import { FileHeader, FileDownloadButton } from './FileHeader';
|
||||||
|
|
||||||
const COLLAPSE_MAX_HEIGHT = 320; // px ≈ 20 lines
|
// ≈ 20 lines; in rem so a larger font setting doesn't show fewer lines (Gitea #343).
|
||||||
|
const COLLAPSE_MAX_HEIGHT_REM = 20;
|
||||||
|
const collapseMaxHeightPx = (): number =>
|
||||||
|
COLLAPSE_MAX_HEIGHT_REM * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
|
||||||
|
|
||||||
type CollapsibleBodyProps = {
|
type CollapsibleBodyProps = {
|
||||||
eventId?: string;
|
eventId?: string;
|
||||||
@@ -78,7 +82,7 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
|
|||||||
const el = bodyRef.current;
|
const el = bodyRef.current;
|
||||||
if (!el) return undefined;
|
if (!el) return undefined;
|
||||||
const observer = new ResizeObserver(() => {
|
const observer = new ResizeObserver(() => {
|
||||||
setNeedsCollapse(el.scrollHeight > COLLAPSE_MAX_HEIGHT);
|
setNeedsCollapse(el.scrollHeight > collapseMaxHeightPx());
|
||||||
});
|
});
|
||||||
observer.observe(el);
|
observer.observe(el);
|
||||||
return () => observer.disconnect();
|
return () => observer.disconnect();
|
||||||
@@ -88,16 +92,36 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
|
|||||||
// (Gitea #85); useReducedMotion subscribes to the change event instead.
|
// (Gitea #85); useReducedMotion subscribes to the change event instead.
|
||||||
const prefersReducedMotion = useReducedMotion();
|
const prefersReducedMotion = useReducedMotion();
|
||||||
|
|
||||||
|
const bodyId = useId();
|
||||||
|
const isClipped = needsCollapse && collapsed;
|
||||||
|
// [Gitea #343] The clipped part stays in the DOM, so Tab can reach a link in
|
||||||
|
// it; the browser would then scroll the overflow:hidden box itself (top cut
|
||||||
|
// off, and it stayed that way). Expand instead when focus lands inside.
|
||||||
|
const handleFocus = () => {
|
||||||
|
if (isClipped) setCollapsed(false);
|
||||||
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
if (isClipped && bodyRef.current) bodyRef.current.scrollTop = 0;
|
||||||
|
}, [isClipped]);
|
||||||
|
|
||||||
|
// Fade the content itself rather than painting a fixed-colour gradient over
|
||||||
|
// it, so it blends on any background (bubbles, highlights, chat backgrounds).
|
||||||
|
const fadeMask = 'linear-gradient(#000 calc(100% - 3rem), transparent)';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
ref={bodyRef}
|
ref={bodyRef}
|
||||||
|
id={bodyId}
|
||||||
|
onFocus={handleFocus}
|
||||||
style={{
|
style={{
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
...(needsCollapse && collapsed
|
...(isClipped
|
||||||
? {
|
? {
|
||||||
maxHeight: `${COLLAPSE_MAX_HEIGHT}px`,
|
maxHeight: `${COLLAPSE_MAX_HEIGHT_REM}rem`,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
maskImage: fadeMask,
|
||||||
|
WebkitMaskImage: fadeMask,
|
||||||
transition: prefersReducedMotion ? undefined : 'max-height 0.2s ease',
|
transition: prefersReducedMotion ? undefined : 'max-height 0.2s ease',
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
@@ -106,23 +130,12 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
{needsCollapse && collapsed && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
height: '3rem',
|
|
||||||
background: `linear-gradient(transparent, ${color.Surface.Container})`,
|
|
||||||
pointerEvents: 'none',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{needsCollapse && (
|
{needsCollapse && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
aria-expanded={!collapsed}
|
||||||
|
aria-controls={bodyId}
|
||||||
onClick={() => setCollapsed((c) => !c)}
|
onClick={() => setCollapsed((c) => !c)}
|
||||||
style={{
|
style={{
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
@@ -133,7 +146,8 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text as="span" size="T200" style={{ color: color.Primary.Main }}>
|
<Text as="span" size="T200" style={{ color: color.Primary.Main }}>
|
||||||
{collapsed ? 'Read more ↓' : 'Show less ↑'}
|
{collapsed ? 'Read more' : 'Show less'}
|
||||||
|
<span aria-hidden="true">{collapsed ? ' ↓' : ' ↑'}</span>
|
||||||
</Text>
|
</Text>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
@@ -732,6 +746,8 @@ export function MLocation({ content }: MLocationProps) {
|
|||||||
const lon = parseFloat(location.longitude);
|
const lon = parseFloat(location.longitude);
|
||||||
if (!isFinite(lat) || !isFinite(lon)) return <BrokenContent />;
|
if (!isFinite(lat) || !isFinite(lon)) return <BrokenContent />;
|
||||||
const description = typeof msc3488?.description === 'string' ? msc3488.description : undefined;
|
const description = typeof msc3488?.description === 'string' ? msc3488.description : undefined;
|
||||||
|
// RFC 5870 `;u=` uncertainty (meters), sent by Lotus since Gitea #340.
|
||||||
|
const accuracyLabel = formatAccuracy(Number(/;u=([\d.]+)/.exec(geoUri)?.[1]));
|
||||||
const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${
|
const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${
|
||||||
lat - 0.004
|
lat - 0.004
|
||||||
},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
|
},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
|
||||||
@@ -772,6 +788,7 @@ export function MLocation({ content }: MLocationProps) {
|
|||||||
)}
|
)}
|
||||||
<Text size="T300" priority="300">
|
<Text size="T300" priority="300">
|
||||||
{`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
|
{`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
|
||||||
|
{accuracyLabel && ` (${accuracyLabel})`}
|
||||||
</Text>
|
</Text>
|
||||||
<Button
|
<Button
|
||||||
as="a"
|
as="a"
|
||||||
|
|||||||
@@ -153,6 +153,9 @@ import { useRoomUnverifiedDeviceCount } from '../../hooks/useDeviceVerificationS
|
|||||||
import { ScheduleMessageModal } from './ScheduleMessageModal';
|
import { ScheduleMessageModal } from './ScheduleMessageModal';
|
||||||
import { ScheduledMessagesTray } from './ScheduledMessagesTray';
|
import { ScheduledMessagesTray } from './ScheduledMessagesTray';
|
||||||
import { DraftIndicator } from './DraftIndicator';
|
import { DraftIndicator } from './DraftIndicator';
|
||||||
|
import { PendingLocation, ShareLocationDialog } from './ShareLocationDialog';
|
||||||
|
import { buildGeoUri } from '../../utils/geoShare';
|
||||||
|
import { useLocalRoomName } from '../../hooks/useRoomMeta';
|
||||||
import { scheduledMessagesAtom } from '../../state/scheduledMessages';
|
import { scheduledMessagesAtom } from '../../state/scheduledMessages';
|
||||||
import { createErrorToast, toastQueueAtom } from '../../state/toast';
|
import { createErrorToast, toastQueueAtom } from '../../state/toast';
|
||||||
import { getThreadDraftKey } from '../../state/room/thread';
|
import { getThreadDraftKey } from '../../state/room/thread';
|
||||||
@@ -356,6 +359,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
() => normalizeComposerToolbarOrder(composerToolbarButtons?.order),
|
() => normalizeComposerToolbarOrder(composerToolbarButtons?.order),
|
||||||
[composerToolbarButtons?.order],
|
[composerToolbarButtons?.order],
|
||||||
);
|
);
|
||||||
|
const displayRoomName = useLocalRoomName(room);
|
||||||
const [locating, setLocating] = React.useState(false);
|
const [locating, setLocating] = React.useState(false);
|
||||||
const [locationError, setLocationError] = React.useState<string | null>(null);
|
const [locationError, setLocationError] = React.useState<string | null>(null);
|
||||||
const handleShareLocation = useCallback(() => {
|
const handleShareLocation = useCallback(() => {
|
||||||
@@ -368,21 +372,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
navigator.geolocation.getCurrentPosition(
|
navigator.geolocation.getCurrentPosition(
|
||||||
(pos) => {
|
(pos) => {
|
||||||
setLocating(false);
|
setLocating(false);
|
||||||
const { latitude, longitude } = pos.coords;
|
// [Gitea #340] Don't send straight away: confirm first (ShareLocationDialog).
|
||||||
const geoUri = `geo:${latitude.toFixed(6)},${longitude.toFixed(6)}`;
|
const { latitude, longitude, accuracy } = pos.coords;
|
||||||
const ts = Date.now();
|
setPendingLocation({ latitude, longitude, accuracy });
|
||||||
// MSC3488 extensible location: send the geo_uri (legacy) alongside the
|
|
||||||
// m.location/m.asset/m.ts blocks so Element and other clients render a
|
|
||||||
// proper "shared location" pin instead of falling back to plain text.
|
|
||||||
sendRoomMessage(mx, roomId, threadRootId ?? null, {
|
|
||||||
msgtype: 'm.location',
|
|
||||||
body: `Shared a location: ${geoUri}`,
|
|
||||||
geo_uri: geoUri,
|
|
||||||
'org.matrix.msc3488.location': { uri: geoUri },
|
|
||||||
'org.matrix.msc3488.asset': { type: 'm.self' },
|
|
||||||
'org.matrix.msc3488.ts': ts,
|
|
||||||
'm.ts': ts,
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
(err) => {
|
(err) => {
|
||||||
setLocating(false);
|
setLocating(false);
|
||||||
@@ -397,7 +389,30 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
},
|
},
|
||||||
{ timeout: 10000 },
|
{ timeout: 10000 },
|
||||||
);
|
);
|
||||||
}, [mx, roomId, threadRootId]);
|
}, []);
|
||||||
|
const [pendingLocation, setPendingLocation] = React.useState<PendingLocation | null>(null);
|
||||||
|
const handleSendLocation = useCallback(
|
||||||
|
(approximate: boolean) => {
|
||||||
|
if (!pendingLocation) return;
|
||||||
|
const { latitude, longitude, accuracy } = pendingLocation;
|
||||||
|
setPendingLocation(null);
|
||||||
|
const geoUri = buildGeoUri(latitude, longitude, accuracy, approximate);
|
||||||
|
const ts = Date.now();
|
||||||
|
// MSC3488 extensible location: send the geo_uri (legacy) alongside the
|
||||||
|
// m.location/m.asset/m.ts blocks so Element and other clients render a
|
||||||
|
// proper "shared location" pin instead of falling back to plain text.
|
||||||
|
sendRoomMessage(mx, roomId, threadRootId ?? null, {
|
||||||
|
msgtype: 'm.location',
|
||||||
|
body: `Shared ${approximate ? 'an approximate' : 'a'} location: ${geoUri}`,
|
||||||
|
geo_uri: geoUri,
|
||||||
|
'org.matrix.msc3488.location': { uri: geoUri },
|
||||||
|
'org.matrix.msc3488.asset': { type: 'm.self' },
|
||||||
|
'org.matrix.msc3488.ts': ts,
|
||||||
|
'm.ts': ts,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[pendingLocation, mx, roomId, threadRootId],
|
||||||
|
);
|
||||||
|
|
||||||
const handleVoiceSend = useCallback(
|
const handleVoiceSend = useCallback(
|
||||||
async (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => {
|
async (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => {
|
||||||
@@ -1538,11 +1553,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
style={touchTarget}
|
style={touchTarget}
|
||||||
className={MobileTouchTarget}
|
className={MobileTouchTarget}
|
||||||
>
|
>
|
||||||
{locating ? (
|
{locating ? <Spinner variant="Secondary" size="400" /> : <Icon src={Icons.Pin} />}
|
||||||
<Spinner variant="Secondary" size="400" />
|
|
||||||
) : (
|
|
||||||
<Icon src={Icons.SpaceGlobe} />
|
|
||||||
)}
|
|
||||||
</IconButton>
|
</IconButton>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
@@ -1751,6 +1762,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
|||||||
onClose={() => setPollOpen(false)}
|
onClose={() => setPollOpen(false)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{pendingLocation && (
|
||||||
|
<ShareLocationDialog
|
||||||
|
location={pendingLocation}
|
||||||
|
roomName={displayRoomName}
|
||||||
|
onSend={handleSendLocation}
|
||||||
|
requestClose={() => setPendingLocation(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{scheduleOpen && (
|
{scheduleOpen && (
|
||||||
<ScheduleMessageModal
|
<ScheduleMessageModal
|
||||||
roomId={roomId}
|
roomId={roomId}
|
||||||
|
|||||||
@@ -0,0 +1,124 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import FocusTrap from 'focus-trap-react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
config,
|
||||||
|
Dialog,
|
||||||
|
Header,
|
||||||
|
Icon,
|
||||||
|
IconButton,
|
||||||
|
Icons,
|
||||||
|
Overlay,
|
||||||
|
OverlayBackdrop,
|
||||||
|
OverlayCenter,
|
||||||
|
Text,
|
||||||
|
} from 'folds';
|
||||||
|
import { useModalStyle } from '../../hooks/useModalStyle';
|
||||||
|
import { stopPropagation } from '../../utils/keyboard';
|
||||||
|
import { formatAccuracy } from '../../utils/geoShare';
|
||||||
|
|
||||||
|
export type PendingLocation = { latitude: number; longitude: number; accuracy?: number };
|
||||||
|
|
||||||
|
type ShareLocationDialogProps = {
|
||||||
|
location: PendingLocation;
|
||||||
|
roomName: string;
|
||||||
|
onSend: (approximate: boolean) => void;
|
||||||
|
requestClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [Gitea #340] Confirm step before an m.location is posted: the toolbar button
|
||||||
|
* used to send the exact position from a single click. Shows what will be
|
||||||
|
* shared (coordinates + the fix's accuracy) and offers an approximate share.
|
||||||
|
*/
|
||||||
|
export function ShareLocationDialog({
|
||||||
|
location,
|
||||||
|
roomName,
|
||||||
|
onSend,
|
||||||
|
requestClose,
|
||||||
|
}: ShareLocationDialogProps) {
|
||||||
|
const modalStyle = useModalStyle(420);
|
||||||
|
const { latitude, longitude, accuracy } = location;
|
||||||
|
const accuracyLabel = formatAccuracy(accuracy);
|
||||||
|
const mapUrl = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=16/${latitude}/${longitude}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
||||||
|
<OverlayCenter>
|
||||||
|
<FocusTrap
|
||||||
|
focusTrapOptions={{
|
||||||
|
initialFocus: '#share-location-cancel',
|
||||||
|
onDeactivate: requestClose,
|
||||||
|
clickOutsideDeactivates: true,
|
||||||
|
escapeDeactivates: stopPropagation,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Dialog
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="share-location-title"
|
||||||
|
variant="Surface"
|
||||||
|
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 id="share-location-title" as="h2" size="H4">
|
||||||
|
Share your location?
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
|
||||||
|
<Icon src={Icons.Cross} />
|
||||||
|
</IconButton>
|
||||||
|
</Header>
|
||||||
|
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
|
||||||
|
<Text>
|
||||||
|
Everyone in <b>{roomName}</b> will see this position, and it can't be taken
|
||||||
|
back from their devices once sent.
|
||||||
|
</Text>
|
||||||
|
<Box direction="Column" gap="100">
|
||||||
|
<Text size="T400">
|
||||||
|
<b>
|
||||||
|
{latitude.toFixed(5)}, {longitude.toFixed(5)}
|
||||||
|
</b>
|
||||||
|
{accuracyLabel && ` (${accuracyLabel})`}
|
||||||
|
</Text>
|
||||||
|
<Text size="T200" priority="300">
|
||||||
|
{accuracyLabel
|
||||||
|
? 'The ± is how sure your device is of this position.'
|
||||||
|
: 'Your device did not say how accurate this position is.'}{' '}
|
||||||
|
<a href={mapUrl} target="_blank" rel="noreferrer noopener">
|
||||||
|
Check on OpenStreetMap
|
||||||
|
</a>
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box gap="200" justifyContent="End" wrap="Wrap">
|
||||||
|
<Button
|
||||||
|
id="share-location-cancel"
|
||||||
|
variant="Secondary"
|
||||||
|
fill="Soft"
|
||||||
|
onClick={requestClose}
|
||||||
|
>
|
||||||
|
<Text size="B400">Cancel</Text>
|
||||||
|
</Button>
|
||||||
|
<Button variant="Secondary" fill="Soft" onClick={() => onSend(true)}>
|
||||||
|
<Text size="B400">Send approximate (~1 km)</Text>
|
||||||
|
</Button>
|
||||||
|
<Button variant="Primary" onClick={() => onSend(false)}>
|
||||||
|
<Text size="B400">Send</Text>
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Dialog>
|
||||||
|
</FocusTrap>
|
||||||
|
</OverlayCenter>
|
||||||
|
</Overlay>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -57,7 +57,7 @@ import { createUploadAtom, UploadSuccess } from '../../../state/upload';
|
|||||||
import { CompactUploadCardRenderer } from '../../../components/upload-card';
|
import { CompactUploadCardRenderer } from '../../../components/upload-card';
|
||||||
import { useCapabilities } from '../../../hooks/useCapabilities';
|
import { useCapabilities } from '../../../hooks/useCapabilities';
|
||||||
import { Presence, useUserPresence } from '../../../hooks/useUserPresence';
|
import { Presence, useUserPresence } from '../../../hooks/useUserPresence';
|
||||||
import { noteLocalStatusWrite } from '../../../utils/ownStatusSync';
|
import { DND_STATUS_SENTINEL, noteLocalStatusWrite } from '../../../utils/ownStatusSync';
|
||||||
import { ProfileDecoration } from './ProfileDecoration';
|
import { ProfileDecoration } from './ProfileDecoration';
|
||||||
import { EmojiBoard } from '../../../components/emoji-board';
|
import { EmojiBoard } from '../../../components/emoji-board';
|
||||||
import { useStatusPresets } from '../../../hooks/useStatusPresets';
|
import { useStatusPresets } from '../../../hooks/useStatusPresets';
|
||||||
@@ -396,7 +396,8 @@ function ProfileStatus() {
|
|||||||
const [presenceStatus] = useSetting(settingsAtom, 'presenceStatus');
|
const [presenceStatus] = useSetting(settingsAtom, 'presenceStatus');
|
||||||
const [hidePresence] = useSetting(settingsAtom, 'hidePresence');
|
const [hidePresence] = useSetting(settingsAtom, 'hidePresence');
|
||||||
|
|
||||||
const initialStatus = presence?.status ?? localStorage.getItem(STATUS_MSG_KEY(userId)) ?? '';
|
const serverStatus = presence?.status === DND_STATUS_SENTINEL ? undefined : presence?.status;
|
||||||
|
const initialStatus = serverStatus ?? localStorage.getItem(STATUS_MSG_KEY(userId)) ?? '';
|
||||||
const [statusMsg, setStatusMsg] = useState<string>(initialStatus);
|
const [statusMsg, setStatusMsg] = useState<string>(initialStatus);
|
||||||
// True while the user has unsaved local edits — prevents a server presence
|
// True while the user has unsaved local edits — prevents a server presence
|
||||||
// echo from overwriting what the user is currently typing/inserting.
|
// echo from overwriting what the user is currently typing/inserting.
|
||||||
@@ -442,6 +443,9 @@ function ProfileStatus() {
|
|||||||
pendingAppliedRef.current = null; // window elapsed — accept external changes
|
pendingAppliedRef.current = null; // window elapsed — accept external changes
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// [Gitea #283] "dnd" is the Do Not Disturb sentinel, not something the user
|
||||||
|
// typed: don't show it in the status field or keep it as their status.
|
||||||
|
if (remoteStatus === DND_STATUS_SENTINEL) return;
|
||||||
if (remoteStatus) {
|
if (remoteStatus) {
|
||||||
setStatusMsg(remoteStatus);
|
setStatusMsg(remoteStatus);
|
||||||
localStorage.setItem(STATUS_MSG_KEY(userId), remoteStatus);
|
localStorage.setItem(STATUS_MSG_KEY(userId), remoteStatus);
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { SetPresence } from 'matrix-js-sdk';
|
||||||
import { PresenceDeduper, PresenceWrite } from '../utils/presenceWrite';
|
import { PresenceDeduper, PresenceWrite } from '../utils/presenceWrite';
|
||||||
import { useMatrixClient } from './useMatrixClient';
|
import { useMatrixClient } from './useMatrixClient';
|
||||||
import { getLastLocalStatusWrite, pickHeartbeatStatus } from '../utils/ownStatusSync';
|
import { getLastLocalStatusWrite, pickHeartbeatStatus } from '../utils/ownStatusSync';
|
||||||
@@ -90,11 +91,21 @@ export function usePresenceUpdater() {
|
|||||||
return status;
|
return status;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// [Gitea #282] A one-off PUT /presence doesn't stick: the SDK long-polls
|
||||||
|
// /sync with set_presence=online by default and Synapse treats every sync
|
||||||
|
// as "online", so Invisible / Idle / DND flipped back within seconds. Tell
|
||||||
|
// the sync loop which presence to report too (as Element does).
|
||||||
|
const syncPresence = (presence: SetPresence) => {
|
||||||
|
mx.setSyncPresence(presence).catch(() => undefined);
|
||||||
|
};
|
||||||
|
|
||||||
const setOnline = async () => {
|
const setOnline = async () => {
|
||||||
|
syncPresence(SetPresence.Online);
|
||||||
const status = await resolveStatus();
|
const status = await resolveStatus();
|
||||||
return send({ presence: 'online', ...(status ? { status_msg: status } : {}) }, 'online');
|
return send({ presence: 'online', ...(status ? { status_msg: status } : {}) }, 'online');
|
||||||
};
|
};
|
||||||
const setUnavailable = async (statusMsg?: string) => {
|
const setUnavailable = async (statusMsg?: string) => {
|
||||||
|
syncPresence(SetPresence.Unavailable);
|
||||||
const status = await resolveStatus();
|
const status = await resolveStatus();
|
||||||
return send(
|
return send(
|
||||||
{
|
{
|
||||||
@@ -104,7 +115,10 @@ export function usePresenceUpdater() {
|
|||||||
'unavailable',
|
'unavailable',
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const setOffline = () => send({ presence: 'offline', status_msg: '' }, 'offline');
|
const setOffline = () => {
|
||||||
|
syncPresence(SetPresence.Offline);
|
||||||
|
return send({ presence: 'offline', status_msg: '' }, 'offline');
|
||||||
|
};
|
||||||
|
|
||||||
// Manual presence overrides — no activity tracking needed.
|
// Manual presence overrides — no activity tracking needed.
|
||||||
if (hidePresence || presenceStatus === 'invisible') {
|
if (hidePresence || presenceStatus === 'invisible') {
|
||||||
@@ -167,13 +181,17 @@ export function usePresenceUpdater() {
|
|||||||
// it isn't usable here. fetch(..., { keepalive: true }) lets the request outlive the
|
// it isn't usable here. fetch(..., { keepalive: true }) lets the request outlive the
|
||||||
// page and is the correct mechanism for an authed endpoint. (keepalive bodies are
|
// page and is the correct mechanism for an authed endpoint. (keepalive bodies are
|
||||||
// capped at 64KB, which this tiny payload is well under.)
|
// capped at 64KB, which this tiny payload is well under.)
|
||||||
|
// [Gitea #339] Synapse treats a missing status_msg as "clear it", so a bare
|
||||||
|
// { presence: 'offline' } wiped the user's custom status for everyone whenever
|
||||||
|
// any tab closed or reloaded. Send the current status along with it.
|
||||||
|
const status = readStatus();
|
||||||
fetch(`${baseUrl}/_matrix/client/v3/presence/${encodeURIComponent(userId)}/status`, {
|
fetch(`${baseUrl}/_matrix/client/v3/presence/${encodeURIComponent(userId)}/status`, {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ presence: 'offline' }),
|
body: JSON.stringify({ presence: 'offline', ...(status ? { status_msg: status } : {}) }),
|
||||||
keepalive: true,
|
keepalive: true,
|
||||||
}).catch((err) => warnPresenceFailure('offline (pagehide)', err));
|
}).catch((err) => warnPresenceFailure('offline (pagehide)', err));
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -783,15 +783,20 @@ function ReminderMonitor() {
|
|||||||
const { reminders, removeReminder } = useReminders();
|
const { reminders, removeReminder } = useReminders();
|
||||||
const setToast = useSetAtom(toastQueueAtom);
|
const setToast = useSetAtom(toastQueueAtom);
|
||||||
const mDirects = useAtomValue(mDirectAtom);
|
const mDirects = useAtomValue(mDirectAtom);
|
||||||
|
const [showNotifications] = useSetting(settingsAtom, 'showNotifications');
|
||||||
|
const quietActive = useNotificationsQuiet();
|
||||||
const firedRef = useRef<Set<string>>(new Set());
|
const firedRef = useRef<Set<string>>(new Set());
|
||||||
const removingRef = useRef<Set<string>>(new Set());
|
const removingRef = useRef<Set<string>>(new Set());
|
||||||
// Read the latest reminders / DM map via refs so the poll interval below is
|
// Read the latest reminders / DM map / notification prefs via refs so the poll
|
||||||
// created once — not torn down and restarted (which resets its 30s countdown
|
// interval below is created once — not torn down and restarted (which resets
|
||||||
// and can indefinitely defer a near-due reminder) on every reminder sync (N115).
|
// its 30s countdown and can indefinitely defer a near-due reminder) on every
|
||||||
|
// reminder sync (N115).
|
||||||
const remindersRef = useRef(reminders);
|
const remindersRef = useRef(reminders);
|
||||||
remindersRef.current = reminders;
|
remindersRef.current = reminders;
|
||||||
const mDirectsRef = useRef(mDirects);
|
const mDirectsRef = useRef(mDirects);
|
||||||
mDirectsRef.current = mDirects;
|
mDirectsRef.current = mDirects;
|
||||||
|
const osNotifyRef = useRef(false);
|
||||||
|
osNotifyRef.current = showNotifications && !quietActive;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const check = () => {
|
const check = () => {
|
||||||
@@ -815,6 +820,23 @@ function ReminderMonitor() {
|
|||||||
const hashPath = mDirectsRef.current.has(r.roomId)
|
const hashPath = mDirectsRef.current.has(r.roomId)
|
||||||
? getDirectRoomPath(r.roomId, r.eventId)
|
? getDirectRoomPath(r.roomId, r.eventId)
|
||||||
: getHomeRoomPath(r.roomId, r.eventId);
|
: getHomeRoomPath(r.roomId, r.eventId);
|
||||||
|
// [Gitea #338] A reminder is only done once the user has SEEN it: the
|
||||||
|
// toast stays until clicked or dismissed (it used to vanish after 4 s
|
||||||
|
// and the reminder was deleted at once, so one due while the user was
|
||||||
|
// away was lost). The removal is persisted on that click/dismiss; an
|
||||||
|
// unseen reminder comes back on the next start.
|
||||||
|
const done = () => {
|
||||||
|
if (removingRef.current.has(key)) return;
|
||||||
|
removingRef.current.add(key);
|
||||||
|
removeReminder(r.eventId, r.timestamp).catch(() => {
|
||||||
|
removingRef.current.delete(key);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const open = () => {
|
||||||
|
done();
|
||||||
|
// window.location.hash setter auto-prepends '#' (as the toast does)
|
||||||
|
window.location.hash = hashPath;
|
||||||
|
};
|
||||||
setToast({
|
setToast({
|
||||||
id: `reminder-${key}`,
|
id: `reminder-${key}`,
|
||||||
displayName: 'Reminder',
|
displayName: 'Reminder',
|
||||||
@@ -822,16 +844,30 @@ function ReminderMonitor() {
|
|||||||
roomName,
|
roomName,
|
||||||
roomId: r.roomId,
|
roomId: r.roomId,
|
||||||
hashPath,
|
hashPath,
|
||||||
|
sticky: true,
|
||||||
|
onClick: open,
|
||||||
|
onDismiss: done,
|
||||||
});
|
});
|
||||||
}
|
// Away from the window: also raise an OS notification (the reminder is
|
||||||
// Persist the removal, retrying on a later tick if it fails — without
|
// an explicit request, but quiet hours / notifications-off win). Never
|
||||||
// re-showing the toast (N114). The server echo drops it from
|
// put decrypted E2EE text in it (N106).
|
||||||
// `reminders` once the write lands.
|
if (osNotifyRef.current && notificationPermission('granted') && !document.hasFocus()) {
|
||||||
if (!removingRef.current.has(key)) {
|
const encrypted = !!room?.hasEncryptionStateEvent();
|
||||||
removingRef.current.add(key);
|
showOsNotification(
|
||||||
removeReminder(r.eventId, r.timestamp).catch(() => {
|
'Reminder',
|
||||||
removingRef.current.delete(key);
|
{
|
||||||
});
|
icon: LogoSVG,
|
||||||
|
badge: LogoSVG,
|
||||||
|
body: encrypted ? `A message in ${roomName}` : body,
|
||||||
|
tag: `reminder-${key}`,
|
||||||
|
data: { path: hashPath, roomId: r.roomId },
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
window.focus();
|
||||||
|
open();
|
||||||
|
},
|
||||||
|
).catch(() => undefined);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { test } from 'node:test';
|
||||||
|
import assert from 'node:assert/strict';
|
||||||
|
import { buildGeoUri, formatAccuracy } from './geoShare';
|
||||||
|
import { parseGeoUri } from './common';
|
||||||
|
|
||||||
|
test('buildGeoUri: exact share keeps 6 decimals and adds the accuracy as u=', () => {
|
||||||
|
assert.equal(buildGeoUri(40.748817, -73.985428, 12.4), 'geo:40.748817,-73.985428;u=12');
|
||||||
|
assert.equal(buildGeoUri(40.748817, -73.985428), 'geo:40.748817,-73.985428');
|
||||||
|
assert.equal(buildGeoUri(40.748817, -73.985428, Number.NaN), 'geo:40.748817,-73.985428');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('buildGeoUri: approximate share rounds to ~1 km and never claims better than 1 km', () => {
|
||||||
|
assert.equal(buildGeoUri(40.748817, -73.985428, 12, true), 'geo:40.75,-73.99;u=1000');
|
||||||
|
assert.equal(buildGeoUri(40.748817, -73.985428, 3500, true), 'geo:40.75,-73.99;u=3500');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('buildGeoUri output still parses with the renderer', () => {
|
||||||
|
const loc = parseGeoUri(buildGeoUri(51.5, -0.12, 30));
|
||||||
|
assert.ok(loc);
|
||||||
|
assert.equal(parseFloat(loc.latitude), 51.5);
|
||||||
|
assert.equal(parseFloat(loc.longitude), -0.12);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('formatAccuracy', () => {
|
||||||
|
assert.equal(formatAccuracy(12.4), '±12 m');
|
||||||
|
assert.equal(formatAccuracy(3500), '±3.5 km');
|
||||||
|
assert.equal(formatAccuracy(25000), '±25 km');
|
||||||
|
assert.equal(formatAccuracy(undefined), undefined);
|
||||||
|
assert.equal(formatAccuracy(0), undefined);
|
||||||
|
});
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
/**
|
||||||
|
* [Gitea #340] Helpers for the "Share location" confirm step: the geo URI to
|
||||||
|
* send (RFC 5870, with the fix's accuracy as `u=` so receivers can draw a
|
||||||
|
* radius) and a human accuracy label, so a ±3 km Wi-Fi/IP fix isn't presented
|
||||||
|
* — or sent — as if it were exact.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** Decimals kept for an "approximate" share: 2 → ~1.1 km of latitude. */
|
||||||
|
export const APPROXIMATE_DECIMALS = 2;
|
||||||
|
/** Uncertainty reported for an approximate share (half a 0.01° cell, rounded up). */
|
||||||
|
export const APPROXIMATE_UNCERTAINTY_M = 1000;
|
||||||
|
|
||||||
|
const validAccuracy = (accuracy?: number): number | undefined =>
|
||||||
|
typeof accuracy === 'number' && Number.isFinite(accuracy) && accuracy > 0
|
||||||
|
? Math.round(accuracy)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
export const buildGeoUri = (
|
||||||
|
latitude: number,
|
||||||
|
longitude: number,
|
||||||
|
accuracy?: number,
|
||||||
|
approximate = false,
|
||||||
|
): string => {
|
||||||
|
const decimals = approximate ? APPROXIMATE_DECIMALS : 6;
|
||||||
|
const u = approximate
|
||||||
|
? Math.max(APPROXIMATE_UNCERTAINTY_M, validAccuracy(accuracy) ?? 0)
|
||||||
|
: validAccuracy(accuracy);
|
||||||
|
const base = `geo:${latitude.toFixed(decimals)},${longitude.toFixed(decimals)}`;
|
||||||
|
return u ? `${base};u=${u}` : base;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** "±12 m", "±3.5 km", or undefined when the browser gave no accuracy. */
|
||||||
|
export const formatAccuracy = (accuracy?: number): string | undefined => {
|
||||||
|
const m = validAccuracy(accuracy);
|
||||||
|
if (m === undefined) return undefined;
|
||||||
|
if (m < 1000) return `±${m} m`;
|
||||||
|
const km = m / 1000;
|
||||||
|
return `±${km < 10 ? km.toFixed(1) : Math.round(km)} km`;
|
||||||
|
};
|
||||||
@@ -48,3 +48,34 @@ test("a fresh local save wins over a server read that hasn't caught up", () => {
|
|||||||
'previous',
|
'previous',
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('pickHeartbeatStatus: the "dnd" sentinel is never adopted as the user status (#283)', () => {
|
||||||
|
const base = { lastLocalWriteAt: 0, now: 100_000 };
|
||||||
|
// leaving DND: the server still says "dnd" → restore the real local status
|
||||||
|
assert.equal(
|
||||||
|
pickHeartbeatStatus({
|
||||||
|
...base,
|
||||||
|
local: '🎮 Gaming',
|
||||||
|
server: { presence: 'unavailable', status_msg: 'dnd' },
|
||||||
|
}),
|
||||||
|
'🎮 Gaming',
|
||||||
|
);
|
||||||
|
// a local copy that had absorbed the sentinel becomes empty, not "dnd"
|
||||||
|
assert.equal(
|
||||||
|
pickHeartbeatStatus({
|
||||||
|
...base,
|
||||||
|
local: 'dnd',
|
||||||
|
server: { presence: 'online', status_msg: 'dnd' },
|
||||||
|
}),
|
||||||
|
'',
|
||||||
|
);
|
||||||
|
// ordinary statuses are unaffected
|
||||||
|
assert.equal(
|
||||||
|
pickHeartbeatStatus({
|
||||||
|
...base,
|
||||||
|
local: 'old',
|
||||||
|
server: { presence: 'online', status_msg: 'new' },
|
||||||
|
}),
|
||||||
|
'new',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|||||||
@@ -9,6 +9,9 @@
|
|||||||
* overridden by a server read that hasn't caught up yet.
|
* overridden by a server read that hasn't caught up yet.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/** The status_msg Lotus sends for Do Not Disturb (see usePresenceUpdater). */
|
||||||
|
export const DND_STATUS_SENTINEL = 'dnd';
|
||||||
|
|
||||||
/** Trust this device's own copy for this long after it saved or cleared it. */
|
/** Trust this device's own copy for this long after it saved or cleared it. */
|
||||||
export const LOCAL_WRITE_GRACE_MS = 15_000;
|
export const LOCAL_WRITE_GRACE_MS = 15_000;
|
||||||
|
|
||||||
@@ -37,7 +40,12 @@ export const pickHeartbeatStatus = ({
|
|||||||
lastLocalWriteAt: number;
|
lastLocalWriteAt: number;
|
||||||
now: number;
|
now: number;
|
||||||
}): string => {
|
}): string => {
|
||||||
if (!server || server.presence === 'offline') return local;
|
// [Gitea #283] Lotus encodes Do Not Disturb as status_msg "dnd", so a device
|
||||||
if (now - writtenAt < LOCAL_WRITE_GRACE_MS) return local;
|
// leaving DND must not adopt that sentinel as the user's status — keep (and
|
||||||
|
// so restore) the real one it holds locally.
|
||||||
|
const mine = local === DND_STATUS_SENTINEL ? '' : local;
|
||||||
|
if (!server || server.presence === 'offline') return mine;
|
||||||
|
if (now - writtenAt < LOCAL_WRITE_GRACE_MS) return mine;
|
||||||
|
if (server.status_msg === DND_STATUS_SENTINEL) return mine;
|
||||||
return server.status_msg ?? '';
|
return server.status_msg ?? '';
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user