diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index adb16338d..c9c4f479a 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -187,7 +187,6 @@ $session-subtle-factor: 0.6; // Default Components $session-search-input-height: 34px; $main-view-header-height: 63px; -$session-conversation-header-height: 60px; $session-left-pane-width: 300px; // Various Components diff --git a/ts/components/session/conversation/SessionMessagesListContainer.tsx b/ts/components/session/conversation/SessionMessagesListContainer.tsx index 3278e3295..6647b65aa 100644 --- a/ts/components/session/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/session/conversation/SessionMessagesListContainer.tsx @@ -65,12 +65,31 @@ class SessionMessagesListContainerInner extends React.Component { } } - public componentDidUpdate(prevProps: Props) { + public componentDidUpdate( + prevProps: Props, + _prevState: any, + snapShot: { fakeScrollTop: number; realScrollTop: number; scrollHeight: number } + ) { + // this was hard to write, it should be hard to read + // just make sure you don't remove that as a bug in chrome makes the column-reverse do bad things + // https://bugs.chromium.org/p/chromium/issues/detail?id=1189195&q=column-reverse&can=2#makechanges + const currentRef = this.props.messageContainerRef.current; const isSameConvo = prevProps.conversationKey === this.props.conversationKey; - if ( - !isSameConvo || - (prevProps.messagesProps.length === 0 && this.props.messagesProps.length !== 0) - ) { + const prevMsgLength = prevProps.messagesProps.length; + const newMsgLength = this.props.messagesProps.length; + + const prevFirstMesssageId = prevProps.messagesProps[0]?.propsForMessage.id; + const newFirstMesssageId = this.props.messagesProps[0]?.propsForMessage.id; + const messageAddedWasMoreRecentOne = prevFirstMesssageId !== newFirstMesssageId; + + if (isSameConvo && snapShot?.realScrollTop && prevMsgLength !== newMsgLength) { + if (messageAddedWasMoreRecentOne) { + currentRef.scrollTop = -(currentRef.scrollHeight - snapShot.realScrollTop); + } else { + currentRef.scrollTop = snapShot.fakeScrollTop; + } + } + if (!isSameConvo || (prevMsgLength === 0 && newMsgLength !== 0)) { this.setupTimeoutResetQuotedHighlightedMessage(this.props.animateQuotedMessageId); // displayed conversation changed. We have a bit of cleaning to do here @@ -78,6 +97,23 @@ class SessionMessagesListContainerInner extends React.Component { } } + public getSnapshotBeforeUpdate() { + const messageContainer = this.props.messageContainerRef.current; + + const scrollTop = messageContainer.scrollTop; + const scrollHeight = messageContainer.scrollHeight; + + // as we use column-reverse for displaying message list + // the top is < 0 + // tslint:disable-next-line: restrict-plus-operands + const realScrollTop = scrollHeight + scrollTop; + return { + realScrollTop, + fakeScrollTop: scrollTop, + scrollHeight: scrollHeight, + }; + } + public render() { const { conversationKey, conversation } = this.props; diff --git a/ts/receiver/queuedJob.ts b/ts/receiver/queuedJob.ts index 62ed2239f..0035522de 100644 --- a/ts/receiver/queuedJob.ts +++ b/ts/receiver/queuedJob.ts @@ -384,7 +384,9 @@ export async function handleMessageJob( source: string ) { window?.log?.info( - `Starting handleDataMessage for message ${message.idForLogging()} in conversation ${conversation.idForLogging()}` + `Starting handleDataMessage for message ${message.idForLogging()}, ${message.get( + 'serverTimestamp' + ) || message.get('timestamp')} in conversation ${conversation.idForLogging()}` ); try {