pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix backward scrolling on fetching older messages

Browse Source
This commit is contained in:
or-else
2023-03-20 11:35:01 -07:00
parent 6ee2851943
commit 6d96d327f1
12 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -1,7 +1,7 @@
{ {
"name": "tinode-webapp", "name": "tinode-webapp",
"description": "Tinode messenger for the web", "description": "Tinode messenger for the web",
"version": "0.22.0", "version": "0.22.1",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/tinode/webapp.git" "url": "https://github.com/tinode/webapp.git"
@@ -71,7 +71,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-intl": "^6.3.0", "react-intl": "^6.3.0",
"tinode-sdk": "^0.22.0", "tinode-sdk": "^0.22.1",
"webm-duration-fix": "^1.0.4" "webm-duration-fix": "^1.0.4"
}, },
"devDependencies": { "devDependencies": {
src/version.js
+1 -1
View File
@@ -1,3 +1,3 @@
// This is a generated file. Don't edit. // This is a generated file. Don't edit.
export const PACKAGE_VERSION = "0.22.0"; export const PACKAGE_VERSION = "0.22.1";
src/views/messages-view.jsx
+22 -17
View File
@@ -32,6 +32,8 @@ import { bytesToHumanSize, relativeDateFormat, shortDateFormat } from '../lib/st
const NOTIFICATION_EXEC_INTERVAL = 300; const NOTIFICATION_EXEC_INTERVAL = 300;
// Scroll distance before [go to latest message] button is shown. // Scroll distance before [go to latest message] button is shown.
const SHOW_GO_TO_LAST_DIST = 100; const SHOW_GO_TO_LAST_DIST = 100;
// Sctoll distance from the top when fetching the page of earlier messages is triggered.
const FETCH_PAGE_TRIGGER = 40;
const messages = defineMessages({ const messages = defineMessages({
online_now: { online_now: {
@@ -182,13 +184,7 @@ class MessagesView extends React.Component {
} }
// Drag and drop events // Drag and drop events
if (this.dndRef) { this.mountDnDEvents(this.dndRef);
this.dndRef.addEventListener('dragstart', this.handleDragStart);
this.dndRef.addEventListener('dragenter', this.handleDragIn);
this.dndRef.addEventListener('dragleave', this.handleDragOut);
this.dndRef.addEventListener('dragover', this.handleDrag);
this.dndRef.addEventListener('drop', this.handleDrop);
}
} }
componentWillUnmount() { componentWillUnmount() {
@@ -213,12 +209,12 @@ class MessagesView extends React.Component {
// or vertical shrinking. // or vertical shrinking.
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (this.messagesScroller && if (this.messagesScroller &&
(prevState.topic != this.state.topic || prevState.messageCount != this.state.messageCount)) { (prevState.topic != this.state.topic || prevState.maxSeqId != this.state.maxSeqId ||
prevState.minSeqId != this.state.minSeqId)) {
// New message. // New message.
if (this.state.scrollPosition < SHOW_GO_TO_LAST_DIST) { if (this.state.scrollPosition < SHOW_GO_TO_LAST_DIST) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight -
this.state.scrollPosition - this.state.scrollPosition - this.messagesScroller.offsetHeight;
this.messagesScroller.offsetHeight;
} }
} }
@@ -264,7 +260,8 @@ class MessagesView extends React.Component {
if (!nextProps.topic) { if (!nextProps.topic) {
// Default state: no topic. // Default state: no topic.
nextState = { nextState = {
messageCount: 0, minSeqId: -1,
maxSeqId: -1,
latestClearId: -1, latestClearId: -1,
onlineSubs: [], onlineSubs: [],
topic: null, topic: null,
@@ -359,7 +356,8 @@ class MessagesView extends React.Component {
}); });
} }
Object.assign(nextState, { Object.assign(nextState, {
messageCount: topic.messageCount(), minSeqId: topic.minMsgSeq(),
maxSeqId: topic.maxMsgSeq(),
latestClearId: topic.maxClearId(), latestClearId: topic.maxClearId(),
channel: topic.isChannelType() channel: topic.isChannelType()
}); });
@@ -370,7 +368,8 @@ class MessagesView extends React.Component {
} else { } else {
// Invalid topic. // Invalid topic.
Object.assign(nextState, { Object.assign(nextState, {
messageCount: 0, minSeqId: -1,
maxSeqId: -1,
latestClearId: -1, latestClearId: -1,
onlineSubs: [], onlineSubs: [],
title: '', title: '',
@@ -517,7 +516,8 @@ class MessagesView extends React.Component {
if (node) { if (node) {
node.addEventListener('scroll', this.handleScrollEvent); node.addEventListener('scroll', this.handleScrollEvent);
this.messagesScroller = node; this.messagesScroller = node;
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition; this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight -
this.state.scrollPosition - this.messagesScroller.offsetHeight;
} }
} }
@@ -534,7 +534,7 @@ class MessagesView extends React.Component {
return; return;
} }
if (event.target.scrollTop <= 0) { if (event.target.scrollTop <= FETCH_PAGE_TRIGGER) {
const topic = this.props.tinode.getTopic(this.state.topic); const topic = this.props.tinode.getTopic(this.state.topic);
if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) { if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) {
this.setState({fetchingMessages: true}, _ => { this.setState({fetchingMessages: true}, _ => {
@@ -561,7 +561,7 @@ class MessagesView extends React.Component {
goToLatestMessage() { goToLatestMessage() {
this.setState({scrollPosition: 0}); this.setState({scrollPosition: 0});
if (this.messagesScroller) { if (this.messagesScroller) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight; this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.messagesScroller.offsetHeight;
} }
} }
@@ -688,7 +688,7 @@ class MessagesView extends React.Component {
} }
clearTimeout(this.keyPressTimer) clearTimeout(this.keyPressTimer)
this.setState({messageCount: topic.messageCount(), typingIndicator: false}, _ => { this.setState({maxSeqId: topic.maxMsgSeq(), minSeqId: topic.minMsgSeq(), typingIndicator: false}, _ => {
// Scroll to the bottom if the message is added to the end of the message // Scroll to the bottom if the message is added to the end of the message
// list if already at the bottom, otherwise show [go to latest] button. // list if already at the bottom, otherwise show [go to latest] button.
// Implemented as a callback to be sure the scroll height has been updated. // Implemented as a callback to be sure the scroll height has been updated.
@@ -698,6 +698,11 @@ class MessagesView extends React.Component {
} else { } else {
this.goToLatestMessage(); this.goToLatestMessage();
} }
} else {
if (this.messagesScroller) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition -
this.messagesScroller.offsetHeight;
}
} }
}); });
umd/index.dev.js
+19 -16
View File
@@ -3589,7 +3589,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "PACKAGE_VERSION": () => (/* binding */ PACKAGE_VERSION) /* harmony export */ "PACKAGE_VERSION": () => (/* binding */ PACKAGE_VERSION)
/* harmony export */ }); /* harmony export */ });
const PACKAGE_VERSION = "0.22.0"; const PACKAGE_VERSION = "0.22.1";
/***/ }), /***/ }),
@@ -5087,6 +5087,7 @@ __webpack_require__.r(__webpack_exports__);
const NOTIFICATION_EXEC_INTERVAL = 300; const NOTIFICATION_EXEC_INTERVAL = 300;
const SHOW_GO_TO_LAST_DIST = 100; const SHOW_GO_TO_LAST_DIST = 100;
const FETCH_PAGE_TRIGGER = 40;
const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
online_now: { online_now: {
id: "online_now", id: "online_now",
@@ -5240,13 +5241,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
if (this.messagesScroller) { if (this.messagesScroller) {
this.messagesScroller.addEventListener('scroll', this.handleScrollEvent); this.messagesScroller.addEventListener('scroll', this.handleScrollEvent);
} }
if (this.dndRef) { this.mountDnDEvents(this.dndRef);
this.dndRef.addEventListener('dragstart', this.handleDragStart);
this.dndRef.addEventListener('dragenter', this.handleDragIn);
this.dndRef.addEventListener('dragleave', this.handleDragOut);
this.dndRef.addEventListener('dragover', this.handleDrag);
this.dndRef.addEventListener('drop', this.handleDrop);
}
} }
componentWillUnmount() { componentWillUnmount() {
if (this.messagesScroller) { if (this.messagesScroller) {
@@ -5262,7 +5257,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
} }
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
if (this.messagesScroller && (prevState.topic != this.state.topic || prevState.messageCount != this.state.messageCount)) { if (this.messagesScroller && (prevState.topic != this.state.topic || prevState.maxSeqId != this.state.maxSeqId || prevState.minSeqId != this.state.minSeqId)) {
if (this.state.scrollPosition < SHOW_GO_TO_LAST_DIST) { if (this.state.scrollPosition < SHOW_GO_TO_LAST_DIST) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition - this.messagesScroller.offsetHeight; this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition - this.messagesScroller.offsetHeight;
} }
@@ -5301,7 +5296,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
let nextState = {}; let nextState = {};
if (!nextProps.topic) { if (!nextProps.topic) {
nextState = { nextState = {
messageCount: 0, minSeqId: -1,
maxSeqId: -1,
latestClearId: -1, latestClearId: -1,
onlineSubs: [], onlineSubs: [],
topic: null, topic: null,
@@ -5387,7 +5383,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
}); });
} }
Object.assign(nextState, { Object.assign(nextState, {
messageCount: topic.messageCount(), minSeqId: topic.minMsgSeq(),
maxSeqId: topic.maxMsgSeq(),
latestClearId: topic.maxClearId(), latestClearId: topic.maxClearId(),
channel: topic.isChannelType() channel: topic.isChannelType()
}); });
@@ -5396,7 +5393,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
} }
} else { } else {
Object.assign(nextState, { Object.assign(nextState, {
messageCount: 0, minSeqId: -1,
maxSeqId: -1,
latestClearId: -1, latestClearId: -1,
onlineSubs: [], onlineSubs: [],
title: '', title: '',
@@ -5519,7 +5517,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
if (node) { if (node) {
node.addEventListener('scroll', this.handleScrollEvent); node.addEventListener('scroll', this.handleScrollEvent);
this.messagesScroller = node; this.messagesScroller = node;
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition; this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition - this.messagesScroller.offsetHeight;
} }
} }
handleScrollEvent(event) { handleScrollEvent(event) {
@@ -5531,7 +5529,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
if (this.state.fetchingMessages) { if (this.state.fetchingMessages) {
return; return;
} }
if (event.target.scrollTop <= 0) { if (event.target.scrollTop <= FETCH_PAGE_TRIGGER) {
const topic = this.props.tinode.getTopic(this.state.topic); const topic = this.props.tinode.getTopic(this.state.topic);
if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) { if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) {
this.setState({ this.setState({
@@ -5559,7 +5557,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
scrollPosition: 0 scrollPosition: 0
}); });
if (this.messagesScroller) { if (this.messagesScroller) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight; this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.messagesScroller.offsetHeight;
} }
} }
handleDescChange(desc) { handleDescChange(desc) {
@@ -5669,7 +5667,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
} }
clearTimeout(this.keyPressTimer); clearTimeout(this.keyPressTimer);
this.setState({ this.setState({
messageCount: topic.messageCount(), maxSeqId: topic.maxMsgSeq(),
minSeqId: topic.minMsgSeq(),
typingIndicator: false typingIndicator: false
}, _ => { }, _ => {
if (topic.isNewMessage(msg.seq)) { if (topic.isNewMessage(msg.seq)) {
@@ -5680,6 +5679,10 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
} else { } else {
this.goToLatestMessage(); this.goToLatestMessage();
} }
} else {
if (this.messagesScroller) {
this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition - this.messagesScroller.offsetHeight;
}
} }
}); });
const status = topic.msgStatus(msg, true); const status = topic.msgStatus(msg, true);
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/tinode.dev.js
+4 -1
View File
@@ -4009,6 +4009,9 @@ class Topic {
maxMsgSeq() { maxMsgSeq() {
return this._maxSeq; return this._maxSeq;
} }
minMsgSeq() {
return this._minSeq;
}
maxClearId() { maxClearId() {
return this._maxDel; return this._maxDel;
} }
@@ -4941,7 +4944,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "PACKAGE_VERSION": () => (/* binding */ PACKAGE_VERSION) /* harmony export */ "PACKAGE_VERSION": () => (/* binding */ PACKAGE_VERSION)
/* harmony export */ }); /* harmony export */ });
const PACKAGE_VERSION = "0.22.0"; const PACKAGE_VERSION = "0.22.1";
/***/ }) /***/ })
umd/tinode.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/tinode.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/tinode.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
version.js
+1 -1
View File
@@ -1,3 +1,3 @@
// This is a generated file. Don't edit. // This is a generated file. Don't edit.
const PACKAGE_VERSION = "0.22.0"; const PACKAGE_VERSION = "0.22.1";