Fix auto read (#1466)

* add height to bottom anchor

* add width to bottom anchor

* add make bottom anchor inline-block

* try mark as read on focus receive
This commit is contained in:
Ajay Bura 2023-10-21 18:14:21 +11:00 committed by GitHub
parent 03af183fb3
commit 5dc613cd79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 8 deletions

View file

@ -0,0 +1,25 @@
import { useEffect } from 'react';
export const useDocumentFocusChange = (onChange: (focus: boolean) => void) => {
useEffect(() => {
let localFocus = document.hasFocus();
const handleFocus = () => {
if (document.hasFocus()) {
if (localFocus) return;
localFocus = true;
onChange(localFocus);
} else if (localFocus) {
localFocus = false;
onChange(localFocus);
}
};
document.addEventListener('focusin', handleFocus);
document.addEventListener('focusout', handleFocus);
return () => {
document.removeEventListener('focusin', handleFocus);
document.removeEventListener('focusout', handleFocus);
};
}, [onChange]);
};

View file

@ -133,6 +133,7 @@ import { MessageEvent } from '../../../types/matrix/room';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { useKeyDown } from '../../hooks/useKeyDown'; import { useKeyDown } from '../../hooks/useKeyDown';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
const TimelineFloat = as<'div', css.TimelineFloatVariants>( const TimelineFloat = as<'div', css.TimelineFloatVariants>(
({ position, className, ...props }, ref) => ( ({ position, className, ...props }, ref) => (
@ -606,13 +607,15 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
// keep paginating timeline and conditionally mark as read // keep paginating timeline and conditionally mark as read
// otherwise we update timeline without paginating // otherwise we update timeline without paginating
// so timeline can be updated with evt like: edits, reactions etc // so timeline can be updated with evt like: edits, reactions etc
if (atBottomRef.current && document.hasFocus()) { if (atBottomRef.current) {
if (!unreadInfo) { if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
markAsRead(mEvt.getRoomId()); requestAnimationFrame(() => markAsRead(mEvt.getRoomId()));
} }
scrollToBottomRef.current.count += 1; if (document.hasFocus()) {
scrollToBottomRef.current.smooth = true; scrollToBottomRef.current.count += 1;
scrollToBottomRef.current.smooth = true;
}
setTimeline((ct) => ({ setTimeline((ct) => ({
...ct, ...ct,
range: { range: {
@ -627,7 +630,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
setUnreadInfo(getRoomUnreadInfo(room)); setUnreadInfo(getRoomUnreadInfo(room));
} }
}, },
[room, unreadInfo] [mx, room, unreadInfo]
) )
); );
@ -665,13 +668,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const tryAutoMarkAsRead = useCallback(() => { const tryAutoMarkAsRead = useCallback(() => {
if (!unreadInfo) { if (!unreadInfo) {
markAsRead(room.roomId); requestAnimationFrame(() => markAsRead(room.roomId));
return; return;
} }
const evtTimeline = getEventTimeline(room, unreadInfo.readUptoEventId); const evtTimeline = getEventTimeline(room, unreadInfo.readUptoEventId);
const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward); const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
if (latestTimeline === room.getLiveTimeline()) { if (latestTimeline === room.getLiveTimeline()) {
markAsRead(room.roomId); requestAnimationFrame(() => markAsRead(room.roomId));
} }
}, [room, unreadInfo]); }, [room, unreadInfo]);
@ -705,6 +708,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
useCallback(() => atBottomAnchorRef.current, []) useCallback(() => atBottomAnchorRef.current, [])
); );
useDocumentFocusChange(
useCallback(
(inFocus) => {
if (inFocus && atBottomRef.current) {
tryAutoMarkAsRead();
}
},
[tryAutoMarkAsRead]
)
);
// Handle up arrow edit // Handle up arrow edit
useKeyDown( useKeyDown(
window, window,