feat: full Discord-style presence tracking
- Announce online immediately on app startup - Idle detection: unavailable after 10 min of no input, online on return - Tab visibility: unavailable when hidden, online when focused again - Page close: offline via fetch+keepalive (survives unload without bfcache penalty) - hidePresence setting: broadcasts offline and stops all tracking - Added 'Hide Online Status' toggle in General settings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -789,6 +789,7 @@ function Editor() {
|
||||
const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
|
||||
const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
|
||||
const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||
const [hidePresence, setHidePresence] = useSetting(settingsAtom, 'hidePresence');
|
||||
const [editorToolbar, setEditorToolbar] = useSetting(settingsAtom, 'editorToolbar');
|
||||
|
||||
return (
|
||||
@@ -823,6 +824,13 @@ function Editor() {
|
||||
after={<Switch variant="Primary" value={hideActivity} onChange={setHideActivity} />}
|
||||
/>
|
||||
</SequenceCard>
|
||||
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
||||
<SettingTile
|
||||
title="Hide Online Status"
|
||||
description="Appear offline to everyone while still using the app. Disables online, away, and idle indicators."
|
||||
after={<Switch variant="Primary" value={hidePresence} onChange={setHidePresence} />}
|
||||
/>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useMatrixClient } from './useMatrixClient';
|
||||
import { useSetting } from '../state/hooks/settings';
|
||||
import { settingsAtom } from '../state/settings';
|
||||
|
||||
const IDLE_TIMEOUT_MS = 10 * 60 * 1000; // go unavailable after 10 min of no input
|
||||
const ACTIVITY_THROTTLE_MS = 1000; // process activity events at most once per second
|
||||
|
||||
export function usePresenceUpdater() {
|
||||
const mx = useMatrixClient();
|
||||
const [hidePresence] = useSetting(settingsAtom, 'hidePresence');
|
||||
|
||||
const idleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const isIdleRef = useRef(false);
|
||||
const lastActivityRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
const setOnline = () =>
|
||||
mx.setPresence({ presence: 'online' }).catch(() => undefined);
|
||||
const setUnavailable = () =>
|
||||
mx.setPresence({ presence: 'unavailable' }).catch(() => undefined);
|
||||
|
||||
// When the user hides presence, broadcast offline and do nothing else.
|
||||
if (hidePresence) {
|
||||
mx.setPresence({ presence: 'offline' }).catch(() => undefined);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const startIdleTimer = () => {
|
||||
clearTimeout(idleTimerRef.current);
|
||||
idleTimerRef.current = window.setTimeout(() => {
|
||||
isIdleRef.current = true;
|
||||
setUnavailable();
|
||||
}, IDLE_TIMEOUT_MS);
|
||||
};
|
||||
|
||||
const handleActivity = () => {
|
||||
const now = Date.now();
|
||||
if (now - lastActivityRef.current < ACTIVITY_THROTTLE_MS) return;
|
||||
lastActivityRef.current = now;
|
||||
|
||||
// Coming back from idle while the tab is visible — go back online.
|
||||
if (isIdleRef.current && !document.hidden) {
|
||||
isIdleRef.current = false;
|
||||
setOnline();
|
||||
}
|
||||
startIdleTimer();
|
||||
};
|
||||
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.hidden) {
|
||||
clearTimeout(idleTimerRef.current);
|
||||
setUnavailable();
|
||||
} else {
|
||||
isIdleRef.current = false;
|
||||
lastActivityRef.current = Date.now();
|
||||
setOnline();
|
||||
startIdleTimer();
|
||||
}
|
||||
};
|
||||
|
||||
// Best-effort offline on page close. fetch+keepalive survives the page unload
|
||||
// unlike a regular async call, and avoids the bfcache penalty of beforeunload.
|
||||
const handlePageHide = () => {
|
||||
const userId = mx.getUserId();
|
||||
const token = mx.getAccessToken();
|
||||
// MatrixClient exposes baseUrl as a public property
|
||||
const baseUrl = (mx as unknown as { baseUrl: string }).baseUrl;
|
||||
if (!userId || !token || !baseUrl) return;
|
||||
|
||||
fetch(`${baseUrl}/_matrix/client/v3/presence/${encodeURIComponent(userId)}/status`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ presence: 'offline' }),
|
||||
keepalive: true,
|
||||
}).catch(() => undefined);
|
||||
};
|
||||
|
||||
// Announce online immediately when the client mounts.
|
||||
setOnline();
|
||||
startIdleTimer();
|
||||
|
||||
const activityEvents = ['mousemove', 'keydown', 'touchstart', 'click', 'scroll'] as const;
|
||||
activityEvents.forEach((e) => window.addEventListener(e, handleActivity, { passive: true }));
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
window.addEventListener('pagehide', handlePageHide);
|
||||
|
||||
return () => {
|
||||
clearTimeout(idleTimerRef.current);
|
||||
activityEvents.forEach((e) => window.removeEventListener(e, handleActivity));
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
window.removeEventListener('pagehide', handlePageHide);
|
||||
};
|
||||
}, [mx, hidePresence]);
|
||||
}
|
||||
@@ -26,6 +26,7 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
|
||||
import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
|
||||
import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { usePresenceUpdater } from '../../hooks/usePresenceUpdater';
|
||||
|
||||
function SystemEmojiFeature() {
|
||||
const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
|
||||
@@ -127,6 +128,11 @@ function InviteNotifications() {
|
||||
);
|
||||
}
|
||||
|
||||
function PresenceUpdater() {
|
||||
usePresenceUpdater();
|
||||
return null;
|
||||
}
|
||||
|
||||
function MessageNotifications() {
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const notifRef = useRef<Notification | undefined>(undefined);
|
||||
@@ -261,6 +267,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
|
||||
<SystemEmojiFeature />
|
||||
<PageZoomFeature />
|
||||
<FaviconUpdater />
|
||||
<PresenceUpdater />
|
||||
<InviteNotifications />
|
||||
<MessageNotifications />
|
||||
{children}
|
||||
|
||||
@@ -44,6 +44,7 @@ export interface Settings {
|
||||
twitterEmoji: boolean;
|
||||
pageZoom: number;
|
||||
hideActivity: boolean;
|
||||
hidePresence: boolean;
|
||||
|
||||
isPeopleDrawer: boolean;
|
||||
memberSortFilterIndex: number;
|
||||
@@ -87,6 +88,7 @@ const defaultSettings: Settings = {
|
||||
twitterEmoji: false,
|
||||
pageZoom: 100,
|
||||
hideActivity: false,
|
||||
hidePresence: false,
|
||||
|
||||
isPeopleDrawer: true,
|
||||
memberSortFilterIndex: 0,
|
||||
|
||||
Reference in New Issue
Block a user