diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
index fc92caaa82e71df4f853e321a5b240a4f8d909ad..f2b06468ac8d9f1dd5699684bd7a467f3fd6566a 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-list/component.jsx
@@ -47,28 +47,26 @@ class MessageList extends Component {
fixedWidth: true,
minHeight: 18,
});
-
- this.shouldScrollBottom = false;
- this.lastKnowScrollPosition = 0;
- this.ticking = false;
- this.handleScrollChange = _.debounce(this.handleScrollChange.bind(this), 150);
+
+ this.userScrolledBack = false;
this.handleScrollUpdate = _.debounce(this.handleScrollUpdate.bind(this), 150);
this.rowRender = this.rowRender.bind(this);
this.resizeRow = this.resizeRow.bind(this);
this.systemMessagesResized = {};
- this.scrollToBottom = this.scrollToBottom.bind(this);
this.state = {
scrollArea: null,
- shouldScrollToBottom: true,
shouldScrollToPosition: false,
scrollPosition: 0,
+ userScrolledBack: false,
};
this.listRef = null;
this.virualRef = null;
this.lastWidth = 0;
+
+ this.scrollInterval = null;
}
componentDidMount() {
@@ -83,6 +81,19 @@ class MessageList extends Component {
if (this.virualRef) {
this.virualRef.style.direction = document.documentElement.dir;
}
+
+ this.scrollInterval = setInterval(() => {
+ const {
+ scrollArea,
+ } = this.state;
+
+ if (scrollArea.scrollTop + scrollArea.offsetHeight === scrollArea.scrollHeight) {
+ this.setState({
+ userScrolledBack: false,
+ });
+ }
+ }, 100);
+
}
componentDidUpdate(prevProps) {
@@ -103,13 +114,6 @@ class MessageList extends Component {
chatId: prevChatId,
} = prevProps;
- const {
- scrollArea,
- shouldScrollToPosition,
- scrollPosition: scrollPositionState,
- shouldScrollToBottom,
- } = this.state;
-
if (prevChatId !== chatId) {
this.cache.clearAll();
setTimeout(() => this.scrollTo(scrollPosition), 300);
@@ -128,20 +132,16 @@ class MessageList extends Component {
}
}
- if (!shouldScrollToBottom && !scrollPosition && prevScrollPosition) {
- this.scrollToBottom();
- }
-
- if (shouldScrollToPosition && scrollArea.scrollTop === scrollPositionState) {
- this.setState({ shouldScrollToPosition: false });
- }
-
if (prevMessages.length < messages.length) {
// this.resizeRow(prevMessages.length - 1);
// messages.forEach((i, idx) => this.resizeRow(idx));
}
}
+ componentWillUnmount() {
+ clearInterval(this.scrollInterval);
+ }
+
handleScrollUpdate(position, target) {
const {
handleScrollUpdate,
@@ -157,31 +157,6 @@ class MessageList extends Component {
handleScrollUpdate(position || 1);
}
- handleScrollChange(e) {
- const { scrollArea } = this.state;
- const scrollCursorPosition = e.scrollTop + scrollArea?.offsetHeight;
- const shouldScrollBottom = e.scrollTop === null
- || scrollCursorPosition === scrollArea?.scrollHeight
- || (scrollArea?.scrollHeight - scrollCursorPosition < 1);
-
- if ((e.scrollTop < this.lastKnowScrollPosition) && !shouldScrollBottom) {
- this.setState({ shouldScrollToBottom: false });
- }
- this.lastKnowScrollPosition = e.scrollTop;
-
- if (!this.ticking) {
- window.requestAnimationFrame(() => {
- const position = this.lastKnowScrollPosition;
- if (scrollArea) {
- this.handleScrollUpdate(position, scrollArea);
- }
- this.ticking = false;
- });
- }
-
- this.ticking = true;
- }
-
resizeRow(idx) {
this.cache.clear(idx);
if (this.listRef) {
@@ -194,7 +169,6 @@ class MessageList extends Component {
if (position) {
setTimeout(() => this.setState({
shouldScrollToPosition: true,
- shouldScrollToBottom: false,
scrollPosition: position,
}), 200);
}
@@ -249,18 +223,15 @@ class MessageList extends Component {
);
}
- scrollToBottom() {
- this.setState({ shouldScrollToBottom: true });
- }
-
renderUnreadNotification() {
const {
intl,
hasUnreadMessages,
scrollPosition,
} = this.props;
+ const { userScrolledBack } = this.state;
- if (hasUnreadMessages && scrollPosition !== null) {
+ if (hasUnreadMessages && userScrolledBack) {
return (
<Button
aria-hidden="true"
@@ -269,7 +240,9 @@ class MessageList extends Component {
size="sm"
key="unread-messages"
label={intl.formatMessage(intlMessages.moreMessages)}
- onClick={this.scrollToBottom}
+ onClick={()=> this.setState({
+ userScrolledBack: false,
+ })}
/>
);
}
@@ -283,13 +256,30 @@ class MessageList extends Component {
} = this.props;
const {
scrollArea,
- shouldScrollToBottom,
- shouldScrollToPosition,
- scrollPosition,
+ userScrolledBack,
} = this.state;
-
+
return (
- [<div className={styles.messageListWrapper} key="chat-list" data-test="chatMessages" ref={node => this.messageListWrapper = node}>
+ [<div
+ onMouseDown={()=> {
+ this.setState({
+ userScrolledBack: true,
+ });
+ }}
+ onWheel={(e) => {
+ console.log('caiu aqui');
+ if (e.deltaY < 0) {
+ this.setState({
+ userScrolledBack: true,
+ });
+ this.userScrolledBack = true
+ }
+ }}
+ className={styles.messageListWrapper}
+ key="chat-list"
+ data-test="chatMessages"
+ ref={node => this.messageListWrapper = node}
+ >
<AutoSizer>
{({ height, width }) => {
if (width !== this.lastWidth) {
@@ -308,6 +298,7 @@ class MessageList extends Component {
}
}
}}
+ isScrolling={true}
rowHeight={this.cache.rowHeight}
className={styles.messageList}
rowRenderer={this.rowRender}
@@ -316,14 +307,7 @@ class MessageList extends Component {
width={width}
overscanRowCount={5}
deferredMeasurementCache={this.cache}
- onScroll={this.handleScrollChange}
- scrollToIndex={shouldScrollToBottom ? messages.length - 1 : undefined}
- scrollTop={
- (shouldScrollToPosition && scrollPosition)
- && (scrollArea && scrollArea.scrollHeight >= scrollPosition)
- ? scrollPosition : undefined
- }
- scrollToAlignment="end"
+ scrollToIndex={!userScrolledBack ? messages.length - 1 : undefined}
/>
);
}}
diff --git a/bigbluebutton-html5/package-lock.json b/bigbluebutton-html5/package-lock.json
index 80afe6ddb1ccffd638b7d3f801c65c007a347c38..ffb8245fe61be3fb00f07961811b967149400e8f 100644
--- a/bigbluebutton-html5/package-lock.json
+++ b/bigbluebutton-html5/package-lock.json
@@ -2230,9 +2230,9 @@
}
},
"clsx": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
- "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+ "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
},
"co": {
"version": "4.6.0",
@@ -9088,25 +9088,30 @@
}
},
"react-virtualized": {
- "version": "9.21.2",
- "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.21.2.tgz",
- "integrity": "sha512-oX7I7KYiUM7lVXQzmhtF4Xg/4UA5duSA+/ZcAvdWlTLFCoFYq1SbauJT5gZK9cZS/wdYR6TPGpX/dqzvTqQeBA==",
- "requires": {
- "babel-runtime": "^6.26.0",
- "clsx": "^1.0.1",
- "dom-helpers": "^5.0.0",
- "loose-envify": "^1.3.0",
- "prop-types": "^15.6.0",
+ "version": "9.22.2",
+ "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.2.tgz",
+ "integrity": "sha512-5j4h4FhxTdOpBKtePSs1yk6LDNT4oGtUwjT7Nkh61Z8vv3fTG/XeOf8J4li1AYaexOwTXnw0HFVxsV0GBUqwRw==",
+ "requires": {
+ "@babel/runtime": "^7.7.2",
+ "clsx": "^1.0.4",
+ "dom-helpers": "^5.1.3",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.7.2",
"react-lifecycles-compat": "^3.0.4"
},
"dependencies": {
+ "csstype": {
+ "version": "3.0.5",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
+ "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
+ },
"dom-helpers": {
- "version": "5.1.4",
- "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
- "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+ "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
"requires": {
"@babel/runtime": "^7.8.7",
- "csstype": "^2.6.7"
+ "csstype": "^3.0.2"
}
}
}
diff --git a/bigbluebutton-html5/package.json b/bigbluebutton-html5/package.json
index e413773d9b38b91fbeb204ae7050489fe2184ebf..6ee02614bc6660bb7c7e9110f7ad472315fedf54 100755
--- a/bigbluebutton-html5/package.json
+++ b/bigbluebutton-html5/package.json
@@ -71,7 +71,7 @@
"react-toastify": "^4.5.2",
"react-toggle": "~4.0.2",
"react-transition-group": "^2.9.0",
- "react-virtualized": "^9.21.1",
+ "react-virtualized": "^9.22.2",
"reconnecting-websocket": "~v4.1.10",
"redis": "~2.8.0",
"sanitize-html": "^1.27.1",