Add pagination in room timeline
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura
parent
beb32755a3
commit
57697142a2
12 changed files with 305 additions and 235 deletions
|
|
@ -26,6 +26,7 @@
|
|||
|
||||
& button {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[dir=rtl] & {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import './RoomView.scss';
|
|||
import EventEmitter from 'events';
|
||||
|
||||
import RoomTimeline from '../../../client/state/RoomTimeline';
|
||||
import { Debounce, getScrollInfo } from '../../../util/common';
|
||||
|
||||
import ScrollView from '../../atoms/scroll/ScrollView';
|
||||
|
||||
|
|
@ -14,98 +15,125 @@ import RoomViewFloating from './RoomViewFloating';
|
|||
import RoomViewInput from './RoomViewInput';
|
||||
import RoomViewCmdBar from './RoomViewCmdBar';
|
||||
|
||||
import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
|
||||
|
||||
const viewEvent = new EventEmitter();
|
||||
|
||||
let lastScrollTop = 0;
|
||||
let lastScrollHeight = 0;
|
||||
let isReachedBottom = true;
|
||||
let isReachedTop = false;
|
||||
function RoomView({ roomId }) {
|
||||
const [roomTimeline, updateRoomTimeline] = useState(null);
|
||||
const [debounce] = useState(new Debounce());
|
||||
const timelineSVRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
roomTimeline?.removeInternalListeners();
|
||||
updateRoomTimeline(new RoomTimeline(roomId));
|
||||
isReachedBottom = true;
|
||||
isReachedTop = false;
|
||||
}, [roomId]);
|
||||
|
||||
const timelineScroll = {
|
||||
reachBottom() {
|
||||
scrollToBottom(timelineSVRef);
|
||||
timelineScroll.isOngoing = true;
|
||||
const target = timelineSVRef?.current;
|
||||
if (!target) return;
|
||||
const maxScrollTop = target.scrollHeight - target.offsetHeight;
|
||||
target.scrollTop = maxScrollTop;
|
||||
timelineScroll.position = 'BOTTOM';
|
||||
timelineScroll.isScrollable = maxScrollTop > 0;
|
||||
timelineScroll.isInTopHalf = false;
|
||||
timelineScroll.lastTopMsg = null;
|
||||
timelineScroll.lastBottomMsg = null;
|
||||
},
|
||||
autoReachBottom() {
|
||||
autoScrollToBottom(timelineSVRef);
|
||||
if (timelineScroll.position === 'BOTTOM') timelineScroll.reachBottom();
|
||||
},
|
||||
tryRestoringScroll() {
|
||||
timelineScroll.isOngoing = true;
|
||||
const sv = timelineSVRef.current;
|
||||
const { scrollHeight } = sv;
|
||||
const {
|
||||
lastTopMsg, lastBottomMsg,
|
||||
diff, isInTopHalf, lastTop,
|
||||
} = timelineScroll;
|
||||
|
||||
if (lastScrollHeight === scrollHeight) return;
|
||||
|
||||
if (lastScrollHeight < scrollHeight) {
|
||||
sv.scrollTop = lastScrollTop + (scrollHeight - lastScrollHeight);
|
||||
} else {
|
||||
timelineScroll.reachBottom();
|
||||
}
|
||||
},
|
||||
enableSmoothScroll() {
|
||||
timelineSVRef.current.style.scrollBehavior = 'smooth';
|
||||
},
|
||||
disableSmoothScroll() {
|
||||
timelineSVRef.current.style.scrollBehavior = 'auto';
|
||||
},
|
||||
isScrollable() {
|
||||
const oHeight = timelineSVRef.current.offsetHeight;
|
||||
const sHeight = timelineSVRef.current.scrollHeight;
|
||||
if (sHeight > oHeight) return true;
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
function onTimelineScroll(e) {
|
||||
const { scrollTop, scrollHeight, offsetHeight } = e.target;
|
||||
const scrollBottom = scrollTop + offsetHeight;
|
||||
lastScrollTop = scrollTop;
|
||||
lastScrollHeight = scrollHeight;
|
||||
|
||||
const PLACEHOLDER_HEIGHT = 96;
|
||||
const PLACEHOLDER_COUNT = 3;
|
||||
|
||||
const topPagKeyPoint = PLACEHOLDER_COUNT * PLACEHOLDER_HEIGHT;
|
||||
const bottomPagKeyPoint = scrollHeight - (offsetHeight / 2);
|
||||
|
||||
if (!isReachedBottom && isAtBottom(timelineSVRef)) {
|
||||
isReachedBottom = true;
|
||||
viewEvent.emit('toggle-reached-bottom', true);
|
||||
}
|
||||
if (isReachedBottom && !isAtBottom(timelineSVRef)) {
|
||||
isReachedBottom = false;
|
||||
viewEvent.emit('toggle-reached-bottom', false);
|
||||
}
|
||||
// TOP of timeline
|
||||
if (scrollTop < topPagKeyPoint && isReachedTop === false) {
|
||||
isReachedTop = true;
|
||||
viewEvent.emit('reached-top');
|
||||
if (lastTopMsg === null) {
|
||||
sv.scrollTop = sv.scrollHeight;
|
||||
return;
|
||||
}
|
||||
isReachedTop = false;
|
||||
|
||||
// BOTTOM of timeline
|
||||
if (scrollBottom > bottomPagKeyPoint) {
|
||||
// TODO:
|
||||
const ot = isInTopHalf ? lastTopMsg?.offsetTop : lastBottomMsg?.offsetTop;
|
||||
if (!ot) sv.scrollTop = lastTop;
|
||||
else sv.scrollTop = ot - diff;
|
||||
},
|
||||
position: 'BOTTOM',
|
||||
isScrollable: false,
|
||||
isInTopHalf: false,
|
||||
maxEvents: 50,
|
||||
lastTop: 0,
|
||||
lastHeight: 0,
|
||||
lastViewHeight: 0,
|
||||
lastTopMsg: null,
|
||||
lastBottomMsg: null,
|
||||
diff: 0,
|
||||
isOngoing: false,
|
||||
};
|
||||
|
||||
const calcScroll = (target) => {
|
||||
if (timelineScroll.isOngoing) {
|
||||
timelineScroll.isOngoing = false;
|
||||
return;
|
||||
}
|
||||
const PLACEHOLDER_COUNT = 2;
|
||||
const PLACEHOLDER_HEIGHT = 96 * PLACEHOLDER_COUNT;
|
||||
const SMALLEST_MSG_HEIGHT = 32;
|
||||
const scroll = getScrollInfo(target);
|
||||
|
||||
const isPaginateBack = scroll.top < PLACEHOLDER_HEIGHT;
|
||||
const isPaginateForward = scroll.bottom > (scroll.height - PLACEHOLDER_HEIGHT);
|
||||
timelineScroll.isInTopHalf = scroll.top + (scroll.viewHeight / 2) < scroll.height / 2;
|
||||
|
||||
if (timelineScroll.lastViewHeight !== scroll.viewHeight) {
|
||||
timelineScroll.maxEvents = Math.round(scroll.viewHeight / SMALLEST_MSG_HEIGHT) * 3;
|
||||
timelineScroll.lastViewHeight = scroll.viewHeight;
|
||||
}
|
||||
timelineScroll.isScrollable = scroll.isScrollable;
|
||||
timelineScroll.lastTop = scroll.top;
|
||||
timelineScroll.lastHeight = scroll.height;
|
||||
const tChildren = target.lastElementChild.lastElementChild.children;
|
||||
const lCIndex = tChildren.length - 1;
|
||||
|
||||
timelineScroll.lastTopMsg = tChildren[0]?.className === 'ph-msg'
|
||||
? tChildren[PLACEHOLDER_COUNT]
|
||||
: tChildren[0];
|
||||
timelineScroll.lastBottomMsg = tChildren[lCIndex]?.className === 'ph-msg'
|
||||
? tChildren[lCIndex - PLACEHOLDER_COUNT]
|
||||
: tChildren[lCIndex];
|
||||
|
||||
if (timelineScroll.isInTopHalf && timelineScroll.lastBottomMsg) {
|
||||
timelineScroll.diff = timelineScroll.lastTopMsg.offsetTop - scroll.top;
|
||||
} else {
|
||||
timelineScroll.diff = timelineScroll.lastBottomMsg.offsetTop - scroll.top;
|
||||
}
|
||||
|
||||
if (isPaginateBack) {
|
||||
timelineScroll.position = 'TOP';
|
||||
viewEvent.emit('timeline-scroll', timelineScroll.position);
|
||||
} else if (isPaginateForward) {
|
||||
timelineScroll.position = 'BOTTOM';
|
||||
viewEvent.emit('timeline-scroll', timelineScroll.position);
|
||||
} else {
|
||||
timelineScroll.position = 'BETWEEN';
|
||||
viewEvent.emit('timeline-scroll', timelineScroll.position);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimelineScroll = (event) => {
|
||||
const { target } = event;
|
||||
if (!target) return;
|
||||
debounce._(calcScroll, 200)(target);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="room-view">
|
||||
<RoomViewHeader roomId={roomId} />
|
||||
<div className="room-view__content-wrapper">
|
||||
<div className="room-view__scrollable">
|
||||
<ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
|
||||
<ScrollView onScroll={handleTimelineScroll} ref={timelineSVRef} autoHide>
|
||||
{roomTimeline !== null && (
|
||||
<RoomViewContent
|
||||
roomId={roomId}
|
||||
|
|
@ -119,7 +147,6 @@ function RoomView({ roomId }) {
|
|||
<RoomViewFloating
|
||||
roomId={roomId}
|
||||
roomTimeline={roomTimeline}
|
||||
timelineScroll={timelineScroll}
|
||||
viewEvent={viewEvent}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,8 @@ function FollowingMembers({ roomId, roomTimeline, viewEvent }) {
|
|||
};
|
||||
}, [roomTimeline]);
|
||||
|
||||
const lastMEvent = roomTimeline.timeline[roomTimeline.timeline.length - 1];
|
||||
const { timeline } = roomTimeline.room;
|
||||
const lastMEvent = timeline[timeline.length - 1];
|
||||
return followingMembers.length !== 0 && (
|
||||
<TimelineChange
|
||||
variant="follow"
|
||||
|
|
|
|||
|
|
@ -43,13 +43,12 @@ import { parseReply, parseTimelineChange } from './common';
|
|||
|
||||
const MAX_MSG_DIFF_MINUTES = 5;
|
||||
|
||||
function genPlaceholders() {
|
||||
function genPlaceholders(key) {
|
||||
return (
|
||||
<>
|
||||
<PlaceholderMessage key="placeholder-1" />
|
||||
<PlaceholderMessage key="placeholder-2" />
|
||||
<PlaceholderMessage key="placeholder-3" />
|
||||
</>
|
||||
<React.Fragment key={`placeholder-container${key}`}>
|
||||
<PlaceholderMessage key={`placeholder-1${key}`} />
|
||||
<PlaceholderMessage key={`placeholder-2${key}`} />
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -182,96 +181,149 @@ function pickEmoji(e, roomId, eventId, roomTimeline) {
|
|||
});
|
||||
}
|
||||
|
||||
let wasAtBottom = true;
|
||||
const scroll = {
|
||||
from: 0,
|
||||
limit: 0,
|
||||
getEndIndex() {
|
||||
return (this.from + this.limit);
|
||||
},
|
||||
isNewEvent: false,
|
||||
};
|
||||
function RoomViewContent({
|
||||
roomId, roomTimeline, timelineScroll, viewEvent,
|
||||
}) {
|
||||
const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
|
||||
const [onStateUpdate, updateState] = useState(null);
|
||||
const [onPagination, setOnPagination] = useState(null);
|
||||
const [editEvent, setEditEvent] = useState(null);
|
||||
const mx = initMatrix.matrixClient;
|
||||
const noti = initMatrix.notifications;
|
||||
if (scroll.limit === 0) {
|
||||
const from = roomTimeline.timeline.size - timelineScroll.maxEvents;
|
||||
scroll.from = (from < 0) ? 0 : from;
|
||||
scroll.limit = timelineScroll.maxEvents;
|
||||
}
|
||||
|
||||
function autoLoadTimeline() {
|
||||
if (timelineScroll.isScrollable() === true) return;
|
||||
if (timelineScroll.isScrollable === true) return;
|
||||
roomTimeline.paginateBack();
|
||||
}
|
||||
function trySendingReadReceipt() {
|
||||
const { room, timeline } = roomTimeline;
|
||||
const { timeline } = roomTimeline.room;
|
||||
if (
|
||||
(noti.doesRoomHaveUnread(room) || noti.hasNoti(roomId))
|
||||
(noti.doesRoomHaveUnread(roomTimeline.room) || noti.hasNoti(roomId))
|
||||
&& timeline.length !== 0) {
|
||||
mx.sendReadReceipt(timeline[timeline.length - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
function onReachedTop() {
|
||||
const getNewFrom = (position) => {
|
||||
let newFrom = scroll.from;
|
||||
const tSize = roomTimeline.timeline.size;
|
||||
const doPaginate = tSize > timelineScroll.maxEvents;
|
||||
if (!doPaginate || scroll.from < 0) newFrom = 0;
|
||||
const newEventCount = Math.round(timelineScroll.maxEvents / 2);
|
||||
scroll.limit = timelineScroll.maxEvents;
|
||||
|
||||
if (position === 'TOP' && doPaginate) newFrom -= newEventCount;
|
||||
if (position === 'BOTTOM' && doPaginate) newFrom += newEventCount;
|
||||
|
||||
if (newFrom >= tSize || scroll.getEndIndex() >= tSize) newFrom = tSize - scroll.limit - 1;
|
||||
if (newFrom < 0) newFrom = 0;
|
||||
return newFrom;
|
||||
};
|
||||
|
||||
const handleTimelineScroll = (position) => {
|
||||
const tSize = roomTimeline.timeline.size;
|
||||
if (position === 'BETWEEN') return;
|
||||
if (position === 'BOTTOM' && scroll.getEndIndex() + 1 === tSize) return;
|
||||
|
||||
if (scroll.from === 0 && position === 'TOP') {
|
||||
// Fetch back history.
|
||||
if (roomTimeline.isOngoingPagination || isReachedTimelineEnd) return;
|
||||
roomTimeline.paginateBack();
|
||||
}
|
||||
function toggleOnReachedBottom(isBottom) {
|
||||
wasAtBottom = isBottom;
|
||||
if (!isBottom) return;
|
||||
trySendingReadReceipt();
|
||||
return;
|
||||
}
|
||||
|
||||
const updatePAG = (canPagMore) => {
|
||||
if (!canPagMore) {
|
||||
setIsReachedTimelineEnd(true);
|
||||
} else {
|
||||
setOnPagination({});
|
||||
autoLoadTimeline();
|
||||
scroll.from = getNewFrom(position);
|
||||
updateState({});
|
||||
|
||||
if (scroll.getEndIndex() + 1 >= tSize) {
|
||||
trySendingReadReceipt();
|
||||
}
|
||||
};
|
||||
|
||||
const updatePAG = (canPagMore, loaded) => {
|
||||
if (canPagMore) {
|
||||
scroll.from += loaded;
|
||||
scroll.from = getNewFrom(timelineScroll.position);
|
||||
if (roomTimeline.ongoingDecryptionCount === 0) updateState({});
|
||||
} else setIsReachedTimelineEnd(true);
|
||||
};
|
||||
// force update RoomTimeline on cons.events.roomTimeline.EVENT
|
||||
const updateRT = () => {
|
||||
if (wasAtBottom) {
|
||||
if (timelineScroll.position === 'BOTTOM') {
|
||||
trySendingReadReceipt();
|
||||
scroll.from = roomTimeline.timeline.size - scroll.limit - 1;
|
||||
if (scroll.from < 0) scroll.from = 0;
|
||||
scroll.isNewEvent = true;
|
||||
}
|
||||
updateState({});
|
||||
};
|
||||
|
||||
const handleScrollToLive = () => {
|
||||
scroll.from = roomTimeline.timeline.size - scroll.limit - 1;
|
||||
if (scroll.from < 0) scroll.from = 0;
|
||||
scroll.isNewEvent = true;
|
||||
updateState({});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
trySendingReadReceipt();
|
||||
return () => {
|
||||
setIsReachedTimelineEnd(false);
|
||||
wasAtBottom = true;
|
||||
scroll.limit = 0;
|
||||
};
|
||||
}, [roomId]);
|
||||
useEffect(() => trySendingReadReceipt(), [roomTimeline]);
|
||||
|
||||
// init room setup completed.
|
||||
// listen for future. setup stateUpdate listener.
|
||||
useEffect(() => {
|
||||
roomTimeline.on(cons.events.roomTimeline.EVENT, updateRT);
|
||||
roomTimeline.on(cons.events.roomTimeline.PAGINATED, updatePAG);
|
||||
viewEvent.on('reached-top', onReachedTop);
|
||||
viewEvent.on('toggle-reached-bottom', toggleOnReachedBottom);
|
||||
viewEvent.on('timeline-scroll', handleTimelineScroll);
|
||||
viewEvent.on('scroll-to-live', handleScrollToLive);
|
||||
|
||||
return () => {
|
||||
roomTimeline.removeListener(cons.events.roomTimeline.EVENT, updateRT);
|
||||
roomTimeline.removeListener(cons.events.roomTimeline.PAGINATED, updatePAG);
|
||||
viewEvent.removeListener('reached-top', onReachedTop);
|
||||
viewEvent.removeListener('toggle-reached-bottom', toggleOnReachedBottom);
|
||||
viewEvent.removeListener('timeline-scroll', handleTimelineScroll);
|
||||
viewEvent.removeListener('scroll-to-live', handleScrollToLive);
|
||||
};
|
||||
}, [roomTimeline, isReachedTimelineEnd, onPagination]);
|
||||
}, [roomTimeline, isReachedTimelineEnd]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
timelineScroll.reachBottom();
|
||||
autoLoadTimeline();
|
||||
trySendingReadReceipt();
|
||||
}, [roomTimeline]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (onPagination === null) return;
|
||||
if (onStateUpdate === null || scroll.isNewEvent) {
|
||||
scroll.isNewEvent = false;
|
||||
timelineScroll.reachBottom();
|
||||
return;
|
||||
}
|
||||
if (timelineScroll.isScrollable) {
|
||||
timelineScroll.tryRestoringScroll();
|
||||
}, [onPagination]);
|
||||
|
||||
useEffect(() => {
|
||||
if (onStateUpdate === null) return;
|
||||
if (wasAtBottom) timelineScroll.reachBottom();
|
||||
} else {
|
||||
timelineScroll.reachBottom();
|
||||
autoLoadTimeline();
|
||||
}
|
||||
}, [onStateUpdate]);
|
||||
|
||||
let prevMEvent = null;
|
||||
function genMessage(mEvent) {
|
||||
const myPowerlevel = roomTimeline.room.getMember(mx.getUserId()).powerLevel;
|
||||
const myPowerlevel = roomTimeline.room.getMember(mx.getUserId())?.powerLevel;
|
||||
const canIRedact = roomTimeline.room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
|
||||
|
||||
const isContentOnly = (
|
||||
|
|
@ -521,18 +573,12 @@ function RoomViewContent({
|
|||
}
|
||||
|
||||
function renderMessage(mEvent) {
|
||||
if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline);
|
||||
if (
|
||||
mEvent.getType() !== 'm.room.message'
|
||||
&& mEvent.getType() !== 'm.room.encrypted'
|
||||
&& mEvent.getType() !== 'm.room.member'
|
||||
&& mEvent.getType() !== 'm.sticker'
|
||||
) return false;
|
||||
if (!cons.supportEventTypes.includes(mEvent.getType())) return false;
|
||||
if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
|
||||
|
||||
// ignore if message is deleted
|
||||
if (mEvent.isRedacted()) return false;
|
||||
|
||||
if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline);
|
||||
|
||||
let divider = null;
|
||||
if (prevMEvent !== null && isNotInSameDay(mEvent.getDate(), prevMEvent.getDate())) {
|
||||
divider = <Divider key={`divider-${mEvent.getId()}`} text={`${dateFormat(mEvent.getDate(), 'mmmm dd, yyyy')}`} />;
|
||||
|
|
@ -551,7 +597,7 @@ function RoomViewContent({
|
|||
|
||||
prevMEvent = mEvent;
|
||||
const timelineChange = parseTimelineChange(mEvent);
|
||||
if (timelineChange === null) return null;
|
||||
if (timelineChange === null) return false;
|
||||
return (
|
||||
<React.Fragment key={`box-${mEvent.getId()}`}>
|
||||
{divider}
|
||||
|
|
@ -565,12 +611,33 @@ function RoomViewContent({
|
|||
);
|
||||
}
|
||||
|
||||
const renderTimeline = () => {
|
||||
const { timeline } = roomTimeline;
|
||||
const tl = [];
|
||||
if (timeline.size === 0) return tl;
|
||||
|
||||
let i = 0;
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const [, mEvent] of timeline.entries()) {
|
||||
if (i >= scroll.from) {
|
||||
if (i === scroll.from) {
|
||||
if (mEvent.getType() !== 'm.room.create' && !isReachedTimelineEnd) tl.push(genPlaceholders(1));
|
||||
if (mEvent.getType() !== 'm.room.create' && isReachedTimelineEnd) tl.push(genRoomIntro(undefined, roomTimeline));
|
||||
}
|
||||
tl.push(renderMessage(mEvent));
|
||||
}
|
||||
i += 1;
|
||||
if (i > scroll.getEndIndex()) break;
|
||||
}
|
||||
if (i < timeline.size) tl.push(genPlaceholders(2));
|
||||
|
||||
return tl;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="room-view__content">
|
||||
<div className="timeline__wrapper">
|
||||
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() }
|
||||
{ roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genRoomIntro(undefined, roomTimeline)}
|
||||
{ roomTimeline.timeline.map(renderMessage) }
|
||||
{ renderTimeline() }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
|
|||
import { getUsersActionJsx } from './common';
|
||||
|
||||
function RoomViewFloating({
|
||||
roomId, roomTimeline, timelineScroll, viewEvent,
|
||||
roomId, roomTimeline, viewEvent,
|
||||
}) {
|
||||
const [reachedBottom, setReachedBottom] = useState(true);
|
||||
const [typingMembers, setTypingMembers] = useState(new Set());
|
||||
|
|
@ -36,12 +36,15 @@ function RoomViewFloating({
|
|||
function updateTyping(members) {
|
||||
setTypingMembers(members);
|
||||
}
|
||||
const handleTimelineScroll = (position) => {
|
||||
setReachedBottom(position === 'BOTTOM');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setReachedBottom(true);
|
||||
setTypingMembers(new Set());
|
||||
viewEvent.on('toggle-reached-bottom', setReachedBottom);
|
||||
return () => viewEvent.removeListener('toggle-reached-bottom', setReachedBottom);
|
||||
viewEvent.on('timeline-scroll', handleTimelineScroll);
|
||||
return () => viewEvent.removeListener('timeline-scroll', handleTimelineScroll);
|
||||
}, [roomId]);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -60,9 +63,8 @@ function RoomViewFloating({
|
|||
<div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
timelineScroll.enableSmoothScroll();
|
||||
timelineScroll.reachBottom();
|
||||
timelineScroll.disableSmoothScroll();
|
||||
viewEvent.emit('scroll-to-live');
|
||||
setReachedBottom(true);
|
||||
}}
|
||||
src={ChevronBottomIC}
|
||||
tooltip="Scroll to Bottom"
|
||||
|
|
@ -74,9 +76,6 @@ function RoomViewFloating({
|
|||
RoomViewFloating.propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
roomTimeline: PropTypes.shape({}).isRequired,
|
||||
timelineScroll: PropTypes.shape({
|
||||
reachBottom: PropTypes.func,
|
||||
}).isRequired,
|
||||
viewEvent: PropTypes.shape({}).isRequired,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ function RoomViewInput({
|
|||
focusInput();
|
||||
|
||||
textAreaRef.current.value = roomsInput.getMessage(roomId);
|
||||
timelineScroll.reachBottom();
|
||||
viewEvent.emit('scroll-to-live');
|
||||
viewEvent.emit('message_sent');
|
||||
textAreaRef.current.style.height = 'unset';
|
||||
if (replyTo !== null) setReplyTo(null);
|
||||
|
|
@ -433,13 +433,7 @@ function RoomViewInput({
|
|||
RoomViewInput.propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
roomTimeline: PropTypes.shape({}).isRequired,
|
||||
timelineScroll: PropTypes.shape({
|
||||
reachBottom: PropTypes.func,
|
||||
autoReachBottom: PropTypes.func,
|
||||
tryRestoringScroll: PropTypes.func,
|
||||
enableSmoothScroll: PropTypes.func,
|
||||
disableSmoothScroll: PropTypes.func,
|
||||
}).isRequired,
|
||||
timelineScroll: PropTypes.shape({}).isRequired,
|
||||
viewEvent: PropTypes.shape({}).isRequired,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -234,39 +234,9 @@ function parseTimelineChange(mEvent) {
|
|||
}
|
||||
}
|
||||
|
||||
function scrollToBottom(ref) {
|
||||
const maxScrollTop = ref.current.scrollHeight - ref.current.offsetHeight;
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
ref.current.scrollTop = maxScrollTop;
|
||||
}
|
||||
|
||||
function isAtBottom(ref) {
|
||||
const { scrollHeight, scrollTop, offsetHeight } = ref.current;
|
||||
const scrollUptoBottom = scrollTop + offsetHeight;
|
||||
|
||||
// scroll view have to div inside div which contains messages
|
||||
const lastMessage = ref.current.lastElementChild.lastElementChild.lastElementChild;
|
||||
const lastChildHeight = lastMessage.offsetHeight;
|
||||
|
||||
// auto scroll to bottom even if user has EXTRA_SPACE left to scroll
|
||||
const EXTRA_SPACE = 48;
|
||||
|
||||
if (scrollHeight - scrollUptoBottom <= lastChildHeight + EXTRA_SPACE) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function autoScrollToBottom(ref) {
|
||||
if (isAtBottom(ref)) scrollToBottom(ref);
|
||||
}
|
||||
|
||||
export {
|
||||
getTimelineJSXMessages,
|
||||
getUsersActionJsx,
|
||||
parseReply,
|
||||
parseTimelineChange,
|
||||
scrollToBottom,
|
||||
isAtBottom,
|
||||
autoScrollToBottom,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import EventEmitter from 'events';
|
||||
import * as sdk from 'matrix-js-sdk';
|
||||
import { logger } from 'matrix-js-sdk/lib/logger';
|
||||
|
||||
import { secret } from './state/auth';
|
||||
import RoomList from './state/RoomList';
|
||||
|
|
@ -8,6 +9,8 @@ import Notifications from './state/Notifications';
|
|||
|
||||
global.Olm = require('@matrix-org/olm');
|
||||
|
||||
logger.disableAll();
|
||||
|
||||
class InitMatrix extends EventEmitter {
|
||||
async init() {
|
||||
await this.startClient();
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ class Notifications extends EventEmitter {
|
|||
constructor(roomList) {
|
||||
super();
|
||||
|
||||
this.supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
|
||||
this.matrixClient = roomList.matrixClient;
|
||||
this.roomList = roomList;
|
||||
|
||||
|
|
@ -33,7 +34,6 @@ class Notifications extends EventEmitter {
|
|||
doesRoomHaveUnread(room) {
|
||||
const userId = this.matrixClient.getUserId();
|
||||
const readUpToId = room.getEventReadUpTo(userId);
|
||||
const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
|
||||
|
||||
if (room.timeline.length
|
||||
&& room.timeline[room.timeline.length - 1].sender
|
||||
|
|
@ -47,7 +47,7 @@ class Notifications extends EventEmitter {
|
|||
|
||||
if (event.getId() === readUpToId) return false;
|
||||
|
||||
if (supportEvents.includes(event.getType())) {
|
||||
if (this.supportEvents.includes(event.getType())) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -149,8 +149,7 @@ class Notifications extends EventEmitter {
|
|||
|
||||
_listenEvents() {
|
||||
this.matrixClient.on('Room.timeline', (mEvent, room) => {
|
||||
const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
|
||||
if (!supportEvents.includes(mEvent.getType())) return;
|
||||
if (!this.supportEvents.includes(mEvent.getType())) return;
|
||||
|
||||
const lastTimelineEvent = room.timeline[room.timeline.length - 1];
|
||||
if (lastTimelineEvent.getId() !== mEvent.getId()) return;
|
||||
|
|
|
|||
|
|
@ -2,15 +2,39 @@ import EventEmitter from 'events';
|
|||
import initMatrix from '../initMatrix';
|
||||
import cons from './cons';
|
||||
|
||||
function isEdited(mEvent) {
|
||||
return mEvent.getRelation()?.rel_type === 'm.replace';
|
||||
}
|
||||
|
||||
function isReaction(mEvent) {
|
||||
return mEvent.getType() === 'm.reaction';
|
||||
}
|
||||
|
||||
function getRelateToId(mEvent) {
|
||||
const relation = mEvent.getRelation();
|
||||
return relation && relation.event_id;
|
||||
}
|
||||
|
||||
function addToMap(myMap, mEvent) {
|
||||
const relateToId = getRelateToId(mEvent);
|
||||
if (relateToId === null) return null;
|
||||
|
||||
if (typeof myMap.get(relateToId) === 'undefined') myMap.set(relateToId, []);
|
||||
myMap.get(relateToId).push(mEvent);
|
||||
return mEvent;
|
||||
}
|
||||
|
||||
class RoomTimeline extends EventEmitter {
|
||||
constructor(roomId) {
|
||||
super();
|
||||
this.matrixClient = initMatrix.matrixClient;
|
||||
this.roomId = roomId;
|
||||
this.room = this.matrixClient.getRoom(roomId);
|
||||
this.timeline = this.room.timeline;
|
||||
this.editedTimeline = this.getEditedTimeline();
|
||||
this.reactionTimeline = this.getReactionTimeline();
|
||||
|
||||
this.timeline = new Map();
|
||||
this.editedTimeline = new Map();
|
||||
this.reactionTimeline = new Map();
|
||||
|
||||
this.isOngoingPagination = false;
|
||||
this.ongoingDecryptionCount = 0;
|
||||
this.typingMembers = new Set();
|
||||
|
|
@ -23,31 +47,30 @@ class RoomTimeline extends EventEmitter {
|
|||
return;
|
||||
}
|
||||
|
||||
this.timeline = this.room.timeline;
|
||||
if (this.isEdited(event)) {
|
||||
this.addToMap(this.editedTimeline, event);
|
||||
}
|
||||
if (this.isReaction(event)) {
|
||||
this.addToMap(this.reactionTimeline, event);
|
||||
}
|
||||
|
||||
if (this.ongoingDecryptionCount !== 0) return;
|
||||
if (this.isOngoingPagination) return;
|
||||
this.emit(cons.events.roomTimeline.EVENT);
|
||||
};
|
||||
|
||||
this._listenRedaction = (event, room) => {
|
||||
if (room.roomId !== this.roomId) return;
|
||||
this.addToTimeline(event);
|
||||
this.emit(cons.events.roomTimeline.EVENT);
|
||||
};
|
||||
|
||||
this._listenDecryptEvent = (event) => {
|
||||
if (event.getRoomId() !== this.roomId) return;
|
||||
|
||||
if (this.ongoingDecryptionCount > 0) this.ongoingDecryptionCount -= 1;
|
||||
this.timeline = this.room.timeline;
|
||||
if (this.ongoingDecryptionCount > 0) {
|
||||
this.ongoingDecryptionCount -= 1;
|
||||
}
|
||||
if (this.ongoingDecryptionCount > 0) return;
|
||||
|
||||
if (this.ongoingDecryptionCount !== 0) return;
|
||||
if (this.isOngoingPagination) return;
|
||||
this.emit(cons.events.roomTimeline.EVENT);
|
||||
};
|
||||
|
||||
this._listenRedaction = (event, room) => {
|
||||
if (room.roomId !== this.roomId) return;
|
||||
this.timeline.delete(event.getId());
|
||||
this.editedTimeline.delete(event.getId());
|
||||
this.reactionTimeline.delete(event.getId());
|
||||
this.emit(cons.events.roomTimeline.EVENT);
|
||||
};
|
||||
|
||||
|
|
@ -63,7 +86,7 @@ class RoomTimeline extends EventEmitter {
|
|||
if (room.roomId !== this.roomId) return;
|
||||
const receiptContent = event.getContent();
|
||||
if (this.timeline.length === 0) return;
|
||||
const tmlLastEvent = this.timeline[this.timeline.length - 1];
|
||||
const tmlLastEvent = room.timeline[room.timeline.length - 1];
|
||||
const lastEventId = tmlLastEvent.getId();
|
||||
const lastEventRecipt = receiptContent[lastEventId];
|
||||
if (typeof lastEventRecipt === 'undefined') return;
|
||||
|
|
@ -82,78 +105,53 @@ class RoomTimeline extends EventEmitter {
|
|||
window.selectedRoom = this;
|
||||
|
||||
if (this.isEncryptedRoom()) this.room.decryptAllEvents();
|
||||
this._populateTimelines();
|
||||
}
|
||||
|
||||
isEncryptedRoom() {
|
||||
return this.matrixClient.isRoomEncrypted(this.roomId);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
isEdited(mEvent) {
|
||||
return mEvent.getRelation()?.rel_type === 'm.replace';
|
||||
addToTimeline(mEvent) {
|
||||
if (isReaction(mEvent)) {
|
||||
addToMap(this.reactionTimeline, mEvent);
|
||||
return;
|
||||
}
|
||||
if (!cons.supportEventTypes.includes(mEvent.getType())) return;
|
||||
if (isEdited(mEvent)) {
|
||||
addToMap(this.editedTimeline, mEvent);
|
||||
return;
|
||||
}
|
||||
this.timeline.set(mEvent.getId(), mEvent);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
getRelateToId(mEvent) {
|
||||
const relation = mEvent.getRelation();
|
||||
return relation && relation.event_id;
|
||||
}
|
||||
|
||||
addToMap(myMap, mEvent) {
|
||||
const relateToId = this.getRelateToId(mEvent);
|
||||
if (relateToId === null) return null;
|
||||
|
||||
if (typeof myMap.get(relateToId) === 'undefined') myMap.set(relateToId, []);
|
||||
myMap.get(relateToId).push(mEvent);
|
||||
return mEvent;
|
||||
}
|
||||
|
||||
getEditedTimeline() {
|
||||
const mReplace = new Map();
|
||||
this.timeline.forEach((mEvent) => {
|
||||
if (this.isEdited(mEvent)) {
|
||||
this.addToMap(mReplace, mEvent);
|
||||
}
|
||||
});
|
||||
|
||||
return mReplace;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
isReaction(mEvent) {
|
||||
return mEvent.getType() === 'm.reaction';
|
||||
}
|
||||
|
||||
getReactionTimeline() {
|
||||
const mReaction = new Map();
|
||||
this.timeline.forEach((mEvent) => {
|
||||
if (this.isReaction(mEvent)) {
|
||||
this.addToMap(mReaction, mEvent);
|
||||
}
|
||||
});
|
||||
|
||||
return mReaction;
|
||||
_populateTimelines() {
|
||||
this.timeline.clear();
|
||||
this.reactionTimeline.clear();
|
||||
this.editedTimeline.clear();
|
||||
this.room.timeline.forEach((mEvent) => this.addToTimeline(mEvent));
|
||||
}
|
||||
|
||||
paginateBack() {
|
||||
if (this.isOngoingPagination) return;
|
||||
this.isOngoingPagination = true;
|
||||
|
||||
const oldSize = this.timeline.size;
|
||||
const MSG_LIMIT = 30;
|
||||
this.matrixClient.scrollback(this.room, MSG_LIMIT).then(async (room) => {
|
||||
if (room.oldState.paginationToken === null) {
|
||||
// We have reached start of the timeline
|
||||
this.isOngoingPagination = false;
|
||||
if (this.isEncryptedRoom()) await this.room.decryptAllEvents();
|
||||
this.emit(cons.events.roomTimeline.PAGINATED, false);
|
||||
this.emit(cons.events.roomTimeline.PAGINATED, false, 0);
|
||||
return;
|
||||
}
|
||||
this.editedTimeline = this.getEditedTimeline();
|
||||
this.reactionTimeline = this.getReactionTimeline();
|
||||
this._populateTimelines();
|
||||
const loaded = this.timeline.size - oldSize;
|
||||
|
||||
this.isOngoingPagination = false;
|
||||
if (this.isEncryptedRoom()) await this.room.decryptAllEvents();
|
||||
this.emit(cons.events.roomTimeline.PAGINATED, true);
|
||||
this.isOngoingPagination = false;
|
||||
this.emit(cons.events.roomTimeline.PAGINATED, true, loaded);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const cons = {
|
|||
HOME: 'home',
|
||||
DIRECTS: 'dm',
|
||||
},
|
||||
supportEventTypes: ['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'],
|
||||
notifs: {
|
||||
DEFAULT: 'default',
|
||||
ALL_MESSAGES: 'all_messages',
|
||||
|
|
|
|||
|
|
@ -84,3 +84,13 @@ export function getUrlPrams(paramName) {
|
|||
const urlParams = new URLSearchParams(queryString);
|
||||
return urlParams.get(paramName);
|
||||
}
|
||||
|
||||
export function getScrollInfo(target) {
|
||||
const scroll = {};
|
||||
scroll.top = Math.round(target.scrollTop);
|
||||
scroll.height = Math.round(target.scrollHeight);
|
||||
scroll.viewHeight = Math.round(target.offsetHeight);
|
||||
scroll.bottom = Math.round(scroll.top + scroll.viewHeight);
|
||||
scroll.isScrollable = scroll.height > scroll.viewHeight;
|
||||
return scroll;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue