merge devel

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/webapp.git"
@@ -71,7 +71,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.3.0",
-    "tinode-sdk": "^0.22.0",
+    "tinode-sdk": "^0.22.1",
     "webm-duration-fix": "^1.0.4"
   },
   "devDependencies": {

src/index.js

@@ -10,7 +10,7 @@ import TinodeWeb from './views/tinode-web.jsx';
 import HashNavigation from './lib/navigation.js';
 
 // Insert google analytics script and tag if configured.
-if (FIREBASE_INIT && FIREBASE_INIT.measurementId) {
+if (typeof FIREBASE_INIT != 'undefined' && FIREBASE_INIT && FIREBASE_INIT.measurementId) {
   const head = document.getElementsByTagName('head')[0];
   let script = document.createElement('script');
   script.src = 'https://www.googletagmanager.com/gtag/js?id=' + FIREBASE_INIT.measurementId;

src/version.js

@@ -1,3 +1,3 @@
 // 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

@@ -32,6 +32,8 @@ import { bytesToHumanSize, relativeDateFormat, shortDateFormat } from '../lib/st
 const NOTIFICATION_EXEC_INTERVAL = 300;
 // Scroll distance before [go to latest message] button is shown.
 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({
   online_now: {
@@ -182,13 +184,7 @@ class MessagesView extends React.Component {
     }
 
     // Drag and drop events
-    if (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);
-    }
+    this.mountDnDEvents(this.dndRef);
   }
 
   componentWillUnmount() {
@@ -213,12 +209,12 @@ class MessagesView extends React.Component {
   // or vertical shrinking.
   componentDidUpdate(prevProps, prevState) {
     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.
       if (this.state.scrollPosition < SHOW_GO_TO_LAST_DIST) {
         this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight -
-          this.state.scrollPosition -
-          this.messagesScroller.offsetHeight;
+          this.state.scrollPosition - this.messagesScroller.offsetHeight;
       }
     }
 
@@ -264,7 +260,8 @@ class MessagesView extends React.Component {
     if (!nextProps.topic) {
       // Default state: no topic.
       nextState = {
-        messageCount: 0,
+        minSeqId: -1,
+        maxSeqId: -1,
         latestClearId: -1,
         onlineSubs: [],
         topic: null,
@@ -359,7 +356,8 @@ class MessagesView extends React.Component {
           });
         }
         Object.assign(nextState, {
-          messageCount: topic.messageCount(),
+          minSeqId: topic.minMsgSeq(),
+          maxSeqId: topic.maxMsgSeq(),
           latestClearId: topic.maxClearId(),
           channel: topic.isChannelType()
         });
@@ -370,7 +368,8 @@ class MessagesView extends React.Component {
       } else {
         // Invalid topic.
         Object.assign(nextState, {
-          messageCount: 0,
+          minSeqId: -1,
+          maxSeqId: -1,
           latestClearId: -1,
           onlineSubs: [],
           title: '',
@@ -517,7 +516,8 @@ class MessagesView extends React.Component {
     if (node) {
       node.addEventListener('scroll', this.handleScrollEvent);
       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;
     }
 
-    if (event.target.scrollTop <= 0) {
+    if (event.target.scrollTop <= FETCH_PAGE_TRIGGER) {
       const topic = this.props.tinode.getTopic(this.state.topic);
       if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) {
         this.setState({fetchingMessages: true}, _ => {
@@ -561,7 +561,7 @@ class MessagesView extends React.Component {
   goToLatestMessage() {
     this.setState({scrollPosition: 0});
     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)
-    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
       // 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.
@@ -698,6 +698,11 @@ class MessagesView extends React.Component {
         } else {
           this.goToLatestMessage();
         }
+      } else {
+        if (this.messagesScroller) {
+          this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition -
+            this.messagesScroller.offsetHeight;
+        }
       }
     });
 

umd/index.dev.js

@@ -3589,7 +3589,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "PACKAGE_VERSION": () => (/* binding */ PACKAGE_VERSION)
 /* 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 SHOW_GO_TO_LAST_DIST = 100;
+const FETCH_PAGE_TRIGGER = 40;
 const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
   online_now: {
     id: "online_now",
@@ -5240,13 +5241,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     if (this.messagesScroller) {
       this.messagesScroller.addEventListener('scroll', this.handleScrollEvent);
     }
-    if (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);
-    }
+    this.mountDnDEvents(this.dndRef);
   }
   componentWillUnmount() {
     if (this.messagesScroller) {
@@ -5262,7 +5257,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }
   }
   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) {
         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 = {};
     if (!nextProps.topic) {
       nextState = {
-        messageCount: 0,
+        minSeqId: -1,
+        maxSeqId: -1,
         latestClearId: -1,
         onlineSubs: [],
         topic: null,
@@ -5387,7 +5383,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           });
         }
         Object.assign(nextState, {
-          messageCount: topic.messageCount(),
+          minSeqId: topic.minMsgSeq(),
+          maxSeqId: topic.maxMsgSeq(),
           latestClearId: topic.maxClearId(),
           channel: topic.isChannelType()
         });
@@ -5396,7 +5393,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         }
       } else {
         Object.assign(nextState, {
-          messageCount: 0,
+          minSeqId: -1,
+          maxSeqId: -1,
           latestClearId: -1,
           onlineSubs: [],
           title: '',
@@ -5519,7 +5517,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     if (node) {
       node.addEventListener('scroll', this.handleScrollEvent);
       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) {
@@ -5531,7 +5529,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     if (this.state.fetchingMessages) {
       return;
     }
-    if (event.target.scrollTop <= 0) {
+    if (event.target.scrollTop <= FETCH_PAGE_TRIGGER) {
       const topic = this.props.tinode.getTopic(this.state.topic);
       if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) {
         this.setState({
@@ -5559,7 +5557,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       scrollPosition: 0
     });
     if (this.messagesScroller) {
-      this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight;
+      this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.messagesScroller.offsetHeight;
     }
   }
   handleDescChange(desc) {
@@ -5669,7 +5667,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }
     clearTimeout(this.keyPressTimer);
     this.setState({
-      messageCount: topic.messageCount(),
+      maxSeqId: topic.maxMsgSeq(),
+      minSeqId: topic.minMsgSeq(),
       typingIndicator: false
     }, _ => {
       if (topic.isNewMessage(msg.seq)) {
@@ -5680,6 +5679,10 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         } else {
           this.goToLatestMessage();
         }
+      } else {
+        if (this.messagesScroller) {
+          this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition - this.messagesScroller.offsetHeight;
+        }
       }
     });
     const status = topic.msgStatus(msg, true);
@@ -21187,7 +21190,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-if (FIREBASE_INIT && FIREBASE_INIT.measurementId) {
+if (typeof FIREBASE_INIT != 'undefined' && FIREBASE_INIT && FIREBASE_INIT.measurementId) {
   const head = document.getElementsByTagName('head')[0];
   let script = document.createElement('script');
   script.src = 'https://www.googletagmanager.com/gtag/js?id=' + FIREBASE_INIT.measurementId;

version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-const PACKAGE_VERSION = "0.22.0";
+const PACKAGE_VERSION = "0.22.1";