diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index c8a943ee92..4476ac8a04 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/skins/base/views/organisms/RoomView.js @@ -21,6 +21,7 @@ var React = require('react'); var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); var ComponentBroker = require('../../../../src/ComponentBroker'); +var classNames = require("classnames"); var MessageTile = ComponentBroker.get('molecules/MessageTile'); var RoomHeader = ComponentBroker.get('molecules/RoomHeader'); @@ -68,11 +69,17 @@ module.exports = React.createClass({ ); } } else { + var scrollheader_classes = classNames({ + mx_RoomView_scrollheader: true, + loading: this.state.paginating + }); return (
-
    +
      +
    • +
    • {this.getMessageTiles()}
    diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index 4856e39a19..cfe4dfd099 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -18,6 +18,8 @@ limitations under the License. var MatrixClientPeg = require("../../MatrixClientPeg"); +var PAGINATE_SIZE = 20; + module.exports = { getInitialState: function() { return { @@ -43,6 +45,12 @@ module.exports = { },*/ onRoomTimeline: function(ev, room, toStartOfTimeline) { + // ignore anything that comes in whilst pagingating: we get one + // event for each new matrix event so this would cause a huge + // number of UI updates. Just update the UI when the paginate + // call returns. + if (this.state.paginating) return; + // no point handling anything while we're waiting for the join to finish: // we'll only be showing a spinner. if (this.state.joining) return; @@ -55,22 +63,59 @@ module.exports = { this.setState({ room: MatrixClientPeg.get().getRoom(this.props.roomId) }); + + if (toStartOfTimeline && !this.state.paginating) { + this.fillSpace(); + } }, componentDidMount: function() { if (this.refs.messageList) { var messageUl = this.refs.messageList.getDOMNode(); messageUl.scrollTop = messageUl.scrollHeight; + + this.fillSpace(); } }, componentDidUpdate: function() { - if (this.refs.messageList && this.atBottom) { - var messageUl = this.refs.messageList.getDOMNode(); + if (!this.refs.messageList) return; + + var messageUl = this.refs.messageList.getDOMNode(); + + if (this.state.paginating && !this.waiting_for_paginate) { + var heightGained = messageUl.scrollHeight - this.oldScrollHeight; + messageUl.scrollTop += heightGained; + this.oldScrollHeight = undefined; + if (!this.fillSpace()) { + this.setState({paginating: false}); + } + } else if (this.atBottom) { messageUl.scrollTop = messageUl.scrollHeight; } }, + fillSpace: function() { + var messageUl = this.refs.messageList.getDOMNode(); + if (messageUl.scrollTop < messageUl.clientHeight) { + this.setState({paginating: true}); + this.waiting_for_paginate = true; + + this.oldScrollHeight = messageUl.scrollHeight; + + var that = this; + MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(function() { + that.waiting_for_paginate = false; + that.setState({ + room: MatrixClientPeg.get().getRoom(that.props.roomId) + }); + // wait and set paginating to false when the component updates + }); + return true; + } + return false; + }, + onJoinButtonClicked: function(ev) { var that = this; MatrixClientPeg.get().joinRoom(this.props.roomId).then(function() { @@ -87,6 +132,14 @@ module.exports = { this.setState({ joining: true }); + }, + + onMessageListScroll: function(ev) { + if (this.refs.messageList) { + var messageUl = this.refs.messageList.getDOMNode(); + this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight; + } + if (!this.state.paginating) this.fillSpace(); } };