Fix new message not appearing (#391)

* Fix new message no appearing

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Fix room not marking as read

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Fix room automatically gets mark as read

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Fix sending wrong read recipt

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Fix sending message not mark as read

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-03-17 08:16:49 +05:30 committed by GitHub
parent 0d59a4de48
commit f5720bde14
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 61 deletions

View file

@ -13,33 +13,46 @@ import RoomSettings from './RoomSettings';
import PeopleDrawer from './PeopleDrawer'; import PeopleDrawer from './PeopleDrawer';
function Room() { function Room() {
const [roomTimeline, setRoomTimeline] = useState(null); const [roomInfo, setRoomInfo] = useState({
const [eventId, setEventId] = useState(null); roomTimeline: null,
eventId: null,
});
const [isDrawer, setIsDrawer] = useState(settings.isPeopleDrawer); const [isDrawer, setIsDrawer] = useState(settings.isPeopleDrawer);
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const handleRoomSelected = (rId, pRoomId, eId) => {
if (mx.getRoom(rId)) {
setRoomTimeline(new RoomTimeline(rId, initMatrix.notifications));
setEventId(eId);
} else {
// TODO: add ability to join room if roomId is invalid
setRoomTimeline(null);
setEventId(null);
}
};
const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
useEffect(() => { useEffect(() => {
const handleRoomSelected = (rId, pRoomId, eId) => {
roomInfo.roomTimeline?.removeInternalListeners();
if (mx.getRoom(rId)) {
setRoomInfo({
roomTimeline: new RoomTimeline(rId, initMatrix.notifications),
eventId: eId ?? null,
});
} else {
// TODO: add ability to join room if roomId is invalid
setRoomInfo({
roomTimeline: null,
eventId: null,
});
}
};
navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected); navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
return () => { return () => {
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected); navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
};
}, [roomInfo]);
useEffect(() => {
const handleDrawerToggling = (visiblity) => setIsDrawer(visiblity);
settings.on(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
return () => {
settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling); settings.removeListener(cons.events.settings.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
roomTimeline?.removeInternalListeners();
}; };
}, []); }, []);
const { roomTimeline, eventId } = roomInfo;
if (roomTimeline === null) return <Welcome />; if (roomTimeline === null) return <Welcome />;
return ( return (

View file

@ -145,13 +145,12 @@ function useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef) {
if (isSpecificEvent) { if (isSpecificEvent) {
focusEventIndex = roomTimeline.getEventIndex(eId); focusEventIndex = roomTimeline.getEventIndex(eId);
} else if (!readUptoEvtStore.getItem()) { }
if (!readUptoEvtStore.getItem() && roomTimeline.hasEventInTimeline(readUpToId)) {
// either opening live timeline or jump to unread. // either opening live timeline or jump to unread.
focusEventIndex = roomTimeline.getUnreadEventIndex(readUpToId);
if (roomTimeline.hasEventInTimeline(readUpToId)) {
readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId)); readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
} }
} else { if (readUptoEvtStore.getItem() && !isSpecificEvent) {
focusEventIndex = roomTimeline.getUnreadEventIndex(readUptoEvtStore.getItem().getId()); focusEventIndex = roomTimeline.getUnreadEventIndex(readUptoEvtStore.getItem().getId());
} }
@ -167,7 +166,6 @@ function useTimeline(roomTimeline, eventId, readUptoEvtStore, eventLimitRef) {
setEventTimeline(eventId); setEventTimeline(eventId);
return () => { return () => {
roomTimeline.removeListener(cons.events.roomTimeline.READY, initTimeline); roomTimeline.removeListener(cons.events.roomTimeline.READY, initTimeline);
roomTimeline.removeInternalListeners();
limit.setFrom(0); limit.setFrom(0);
}; };
}, [roomTimeline, eventId]); }, [roomTimeline, eventId]);
@ -286,44 +284,39 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
useEffect(() => { useEffect(() => {
const timelineScroll = timelineScrollRef.current; const timelineScroll = timelineScrollRef.current;
const limit = eventLimitRef.current; const limit = eventLimitRef.current;
const sendReadReceipt = (event) => { const trySendReadReceipt = (event) => {
if (event.isSending()) return;
if (myUserId === event.getSender()) { if (myUserId === event.getSender()) {
roomTimeline.markAllAsRead(); requestAnimationFrame(() => roomTimeline.markAllAsRead());
return; return;
} }
const readUpToEvent = readUptoEvtStore.getItem(); const readUpToEvent = readUptoEvtStore.getItem();
const readUpToId = roomTimeline.getReadUpToEventId(); const readUpToId = roomTimeline.getReadUpToEventId();
const isUnread = readUpToEvent?.getId() === readUpToId; const isUnread = readUpToEvent ? readUpToEvent?.getId() === readUpToId : true;
// if user doesn't have focus on app don't mark messages as read. if (isUnread === false) {
if (document.visibilityState === 'hidden' || timelineScroll.bottom >= 16) { if (document.visibilityState === 'visible' && timelineScroll.bottom < 16) {
if (isUnread) return; requestAnimationFrame(() => roomTimeline.markAllAsRead());
} else {
readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId)); readUptoEvtStore.setItem(roomTimeline.findEventByIdInTimelineSet(readUpToId));
}
return; return;
} }
// user has not mark room as read
if (!isUnread) {
roomTimeline.markAllAsRead();
}
const { timeline } = roomTimeline; const { timeline } = roomTimeline;
const unreadMsgIsLast = timeline[timeline.length - 2].getId() === readUpToEvent?.getId(); const unreadMsgIsLast = timeline[timeline.length - 2].getId() === readUpToId;
if (unreadMsgIsLast) { if (unreadMsgIsLast) {
roomTimeline.markAllAsRead(); requestAnimationFrame(() => roomTimeline.markAllAsRead());
} }
}; };
const handleEvent = (event) => { const handleEvent = (event) => {
const tLength = roomTimeline.timeline.length; const tLength = roomTimeline.timeline.length;
const isUserViewingLive = ( const isViewingLive = roomTimeline.isServingLiveTimeline() && limit.length >= tLength - 1;
roomTimeline.isServingLiveTimeline() const isAttached = timelineScroll.bottom < SCROLL_TRIGGER_POS;
&& limit.length >= tLength - 1
&& timelineScroll.bottom < SCROLL_TRIGGER_POS if (isViewingLive && isAttached) {
);
if (isUserViewingLive) {
limit.setFrom(tLength - limit.maxEvents); limit.setFrom(tLength - limit.maxEvents);
sendReadReceipt(event); trySendReadReceipt(event);
setEvent(event); setEvent(event);
return; return;
} }
@ -332,11 +325,8 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
setEvent(event); setEvent(event);
return; return;
} }
const isUserDitchedLive = (
roomTimeline.isServingLiveTimeline() if (isViewingLive) {
&& limit.length >= tLength - 1
);
if (isUserDitchedLive) {
// This stateUpdate will help to put the // This stateUpdate will help to put the
// loading msg placeholder at bottom // loading msg placeholder at bottom
setEvent(event); setEvent(event);
@ -353,17 +343,7 @@ function useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, event
}; };
}, [roomTimeline]); }, [roomTimeline]);
useEffect(() => { return newEvent;
const timelineScroll = timelineScrollRef.current;
if (!roomTimeline.initialized) return;
if (timelineScroll.bottom < 16
&& !roomTimeline.canPaginateForward()
&& document.visibilityState === 'visible') {
timelineScroll.scrollToBottom();
} else {
timelineScroll.tryRestoringScroll();
}
}, [newEvent, roomTimeline]);
} }
let jumpToItemIndex = -1; let jumpToItemIndex = -1;
@ -394,7 +374,7 @@ function RoomViewContent({ eventId, roomTimeline }) {
timelineScrollRef, timelineScrollRef,
eventLimitRef, eventLimitRef,
); );
useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef); const newEvent = useEventArrive(roomTimeline, readUptoEvtStore, timelineScrollRef, eventLimitRef);
const { timeline } = roomTimeline; const { timeline } = roomTimeline;
@ -448,6 +428,16 @@ function RoomViewContent({ eventId, roomTimeline }) {
timelineScroll.tryRestoringScroll(); timelineScroll.tryRestoringScroll();
}, [onLimitUpdate]); }, [onLimitUpdate]);
useEffect(() => {
const timelineScroll = timelineScrollRef.current;
if (!roomTimeline.initialized) return;
if (timelineScroll.bottom < 16 && !roomTimeline.canPaginateForward() && document.visibilityState === 'visible') {
timelineScroll.scrollToBottom();
} else {
timelineScroll.tryRestoringScroll();
}
}, [newEvent]);
const handleTimelineScroll = (event) => { const handleTimelineScroll = (event) => {
const timelineScroll = timelineScrollRef.current; const timelineScroll = timelineScrollRef.current;
if (!event.target) return; if (!event.target) return;

View file

@ -230,9 +230,18 @@ class RoomTimeline extends EventEmitter {
markAllAsRead() { markAllAsRead() {
const readEventId = this.getReadUpToEventId(); const readEventId = this.getReadUpToEventId();
const getLatestValidEvent = () => {
for (let i = this.timeline.length - 1; i >= 0; i -= 1) {
const latestEvent = this.timeline[i];
if (latestEvent.getId() === readEventId) return null;
if (!latestEvent.isSending()) return latestEvent;
}
return null;
};
this.notifications.deleteNoti(this.roomId); this.notifications.deleteNoti(this.roomId);
if (this.timeline.length === 0) return; if (this.timeline.length === 0) return;
const latestEvent = this.timeline[this.timeline.length - 1]; const latestEvent = getLatestValidEvent();
if (latestEvent === null) return;
if (readEventId === latestEvent.getId()) return; if (readEventId === latestEvent.getId()) return;
this.matrixClient.sendReadReceipt(latestEvent); this.matrixClient.sendReadReceipt(latestEvent);
this.emit(cons.events.roomTimeline.MARKED_AS_READ, latestEvent); this.emit(cons.events.roomTimeline.MARKED_AS_READ, latestEvent);