|
|
|
|
@ -1,12 +1,9 @@
|
|
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
|
|
import { SessionScrollButton } from '../SessionScrollButton';
|
|
|
|
|
import { Constants } from '../../../session';
|
|
|
|
|
import _ from 'lodash';
|
|
|
|
|
import { contextMenu } from 'react-contexify';
|
|
|
|
|
import {
|
|
|
|
|
fetchMessagesForConversation,
|
|
|
|
|
markConversationFullyRead,
|
|
|
|
|
quotedMessageToAnimate,
|
|
|
|
|
ReduxConversationType,
|
|
|
|
|
setNextMessageToPlay,
|
|
|
|
|
@ -25,14 +22,12 @@ import { ConversationTypeEnum } from '../../../models/conversation';
|
|
|
|
|
import { StateType } from '../../../state/reducer';
|
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
import {
|
|
|
|
|
areMoreMessagesBeingFetched,
|
|
|
|
|
getQuotedMessageToAnimate,
|
|
|
|
|
getSelectedConversation,
|
|
|
|
|
getSelectedConversationKey,
|
|
|
|
|
getShowScrollButton,
|
|
|
|
|
getSortedMessagesOfSelectedConversation,
|
|
|
|
|
} from '../../../state/selectors/conversations';
|
|
|
|
|
import { isElectronWindowFocused } from '../../../session/utils/WindowUtils';
|
|
|
|
|
import { SessionMessagesList } from './SessionMessagesList';
|
|
|
|
|
|
|
|
|
|
export type SessionMessageListProps = {
|
|
|
|
|
@ -70,13 +65,8 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public componentDidUpdate(
|
|
|
|
|
prevProps: Props,
|
|
|
|
|
_prevState: any,
|
|
|
|
|
snapshot: { scrollHeight: number; scrollTop: number }
|
|
|
|
|
) {
|
|
|
|
|
public componentDidUpdate(prevProps: Props) {
|
|
|
|
|
const isSameConvo = prevProps.conversationKey === this.props.conversationKey;
|
|
|
|
|
const messageLengthChanged = prevProps.messagesProps.length !== this.props.messagesProps.length;
|
|
|
|
|
if (
|
|
|
|
|
!isSameConvo ||
|
|
|
|
|
(prevProps.messagesProps.length === 0 && this.props.messagesProps.length !== 0)
|
|
|
|
|
@ -85,45 +75,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|
|
|
|
|
|
|
|
|
// displayed conversation changed. We have a bit of cleaning to do here
|
|
|
|
|
this.initialMessageLoadingPosition();
|
|
|
|
|
} else {
|
|
|
|
|
// if we got new message for this convo, and we are scrolled to bottom
|
|
|
|
|
if (isSameConvo && messageLengthChanged) {
|
|
|
|
|
// If we have a snapshot value, we've just added new items.
|
|
|
|
|
// Adjust scroll so these new items don't push the old ones out of view.
|
|
|
|
|
// (snapshot here is the value returned from getSnapshotBeforeUpdate)
|
|
|
|
|
if (prevProps.messagesProps.length && snapshot !== null) {
|
|
|
|
|
const list = this.props.messageContainerRef.current;
|
|
|
|
|
|
|
|
|
|
// if we added a message at the top, keep position from the bottom.
|
|
|
|
|
if (
|
|
|
|
|
prevProps.messagesProps[0].propsForMessage.id ===
|
|
|
|
|
this.props.messagesProps[0].propsForMessage.id
|
|
|
|
|
) {
|
|
|
|
|
list.scrollTop = list.scrollHeight - (snapshot.scrollHeight - snapshot.scrollTop);
|
|
|
|
|
} else {
|
|
|
|
|
// if we added a message at the bottom, keep position from the bottom.
|
|
|
|
|
list.scrollTop = snapshot.scrollTop;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public getSnapshotBeforeUpdate(prevProps: Props) {
|
|
|
|
|
// getSnapshotBeforeUpdate is kind of pain to do in react hooks, so better keep the message list as a
|
|
|
|
|
// class component for now
|
|
|
|
|
|
|
|
|
|
// Are we adding new items to the list?
|
|
|
|
|
// Capture the scroll position so we can adjust scroll later.
|
|
|
|
|
if (prevProps.messagesProps.length < this.props.messagesProps.length) {
|
|
|
|
|
const list = this.props.messageContainerRef.current;
|
|
|
|
|
console.warn('getSnapshotBeforeUpdate ', {
|
|
|
|
|
scrollHeight: list.scrollHeight,
|
|
|
|
|
scrollTop: list.scrollTop,
|
|
|
|
|
});
|
|
|
|
|
return { scrollHeight: list.scrollHeight, scrollTop: list.scrollTop };
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public render() {
|
|
|
|
|
@ -203,21 +155,33 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|
|
|
|
*/
|
|
|
|
|
private initialMessageLoadingPosition() {
|
|
|
|
|
const { messagesProps, conversation } = this.props;
|
|
|
|
|
if (!conversation) {
|
|
|
|
|
if (!conversation || !messagesProps.length) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (conversation.unreadCount > 0 && messagesProps.length) {
|
|
|
|
|
|
|
|
|
|
if (conversation.unreadCount <= 0) {
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
} else {
|
|
|
|
|
// just assume that this need to be shown by default
|
|
|
|
|
window.inboxStore?.dispatch(showScrollToBottomButton(true));
|
|
|
|
|
|
|
|
|
|
// conversation.unreadCount > 0
|
|
|
|
|
// either we loaded all unread messages or not
|
|
|
|
|
if (conversation.unreadCount < messagesProps.length) {
|
|
|
|
|
// if we loaded all unread messages, scroll to the first one unread
|
|
|
|
|
const firstUnread = Math.max(conversation.unreadCount, 0);
|
|
|
|
|
this.scrollToMessage(messagesProps[firstUnread].propsForMessage.id);
|
|
|
|
|
const idToStringTo = messagesProps[conversation.unreadCount - 1].propsForMessage.id;
|
|
|
|
|
|
|
|
|
|
this.scrollToMessage(idToStringTo, 'end');
|
|
|
|
|
} else {
|
|
|
|
|
// if we did not load all unread messages, just scroll to the middle of the loaded messages list. so the user can choose to go up or down from there
|
|
|
|
|
// just scroll to the middle as we don't have enough loaded message nevertheless
|
|
|
|
|
const middle = Math.floor(messagesProps.length / 2);
|
|
|
|
|
this.scrollToMessage(messagesProps[middle].propsForMessage.id);
|
|
|
|
|
const idToStringTo = messagesProps[middle].propsForMessage.id;
|
|
|
|
|
this.scrollToMessage(idToStringTo, 'center');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// window.inboxStore?.dispatch(updateHaveDoneFirstScroll());
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.inboxStore?.dispatch(updateHaveDoneFirstScroll());
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
@ -241,11 +205,11 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
private scrollToMessage(messageId: string) {
|
|
|
|
|
const messageElementDom = document.getElementById(`inview-${messageId}`);
|
|
|
|
|
private scrollToMessage(messageId: string, block: 'center' | 'end' | 'nearest' | 'start') {
|
|
|
|
|
const messageElementDom = document.getElementById(`msg-${messageId}`);
|
|
|
|
|
messageElementDom?.scrollIntoView({
|
|
|
|
|
behavior: 'auto',
|
|
|
|
|
block: 'center',
|
|
|
|
|
block,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -254,7 +218,6 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|
|
|
|
if (!messageContainer) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
console.warn('scrollToBottom on messageslistcontainer');
|
|
|
|
|
messageContainer.scrollTop = messageContainer.scrollHeight - messageContainer.clientHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -304,7 +267,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const databaseId = targetMessage.propsForMessage.id;
|
|
|
|
|
this.scrollToMessage(databaseId);
|
|
|
|
|
this.scrollToMessage(databaseId, 'center');
|
|
|
|
|
// Highlight this message on the UI
|
|
|
|
|
window.inboxStore?.dispatch(quotedMessageToAnimate(databaseId));
|
|
|
|
|
this.setupTimeoutResetQuotedHighlightedMessage(databaseId);
|
|
|
|
|
|
Audric Ackermann
4 years ago