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