Merge pull request #2456 from matrix-org/bwindels/extendtypingbartiming

Avoid "jumpiness" with inline typing indicator
This commit is contained in:
Bruno Windels 2019-01-22 11:04:25 +00:00 committed by GitHub
commit 3c8bd3fc78
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 154 additions and 11 deletions

View file

@ -171,6 +171,10 @@ limitations under the License.
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
list-style-type: none; list-style-type: none;
padding: 18px; padding: 18px;
margin: 0;
/* needed as min-height is set to clientHeight in ScrollPanel
to prevent shrinking when WhoIsTypingTile is hidden */
box-sizing: border-box;
} }
.mx_RoomView_MessageList li { .mx_RoomView_MessageList li {

View file

@ -631,13 +631,29 @@ module.exports = React.createClass({
} }
}, },
_scrollDownIfAtBottom: function() { _onTypingVisible: function() {
const scrollPanel = this.refs.scrollPanel; const scrollPanel = this.refs.scrollPanel;
if (scrollPanel) { if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) {
scrollPanel.blockShrinking();
// scroll down if at bottom
scrollPanel.checkScroll(); scrollPanel.checkScroll();
} }
}, },
updateTimelineMinHeight: function() {
const scrollPanel = this.refs.scrollPanel;
const whoIsTyping = this.refs.whoIsTyping;
const isTypingVisible = whoIsTyping && whoIsTyping.isVisible();
if (scrollPanel) {
if (isTypingVisible) {
scrollPanel.blockShrinking();
} else {
scrollPanel.clearBlockShrinking();
}
}
},
onResize: function() { onResize: function() {
dis.dispatch({ action: 'timeline_resize' }, true); dis.dispatch({ action: 'timeline_resize' }, true);
}, },
@ -666,7 +682,7 @@ module.exports = React.createClass({
let whoIsTyping; let whoIsTyping;
if (this.props.room) { if (this.props.room) {
whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />); whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._onTypingVisible} ref="whoIsTyping" />);
} }
return ( return (

View file

@ -223,6 +223,8 @@ module.exports = React.createClass({
onResize: function() { onResize: function() {
this.props.onResize(); this.props.onResize();
// clear min-height as the height might have changed
this.clearBlockShrinking();
this.checkScroll(); this.checkScroll();
if (this._gemScroll) this._gemScroll.forceUpdate(); if (this._gemScroll) this._gemScroll.forceUpdate();
}, },
@ -372,6 +374,8 @@ module.exports = React.createClass({
} }
this._unfillDebouncer = setTimeout(() => { this._unfillDebouncer = setTimeout(() => {
this._unfillDebouncer = null; this._unfillDebouncer = null;
// if timeline shrinks, min-height should be cleared
this.clearBlockShrinking();
this.props.onUnfillRequest(backwards, markerScrollToken); this.props.onUnfillRequest(backwards, markerScrollToken);
}, UNFILL_REQUEST_DEBOUNCE_MS); }, UNFILL_REQUEST_DEBOUNCE_MS);
} }
@ -678,6 +682,29 @@ module.exports = React.createClass({
this._gemScroll = gemScroll; this._gemScroll = gemScroll;
}, },
/**
* Set the current height as the min height for the message list
* so the timeline cannot shrink. This is used to avoid
* jumping when the typing indicator gets replaced by a smaller message.
*/
blockShrinking: function() {
const messageList = this.refs.itemlist;
if (messageList) {
const currentHeight = messageList.clientHeight;
messageList.style.minHeight = `${currentHeight}px`;
}
},
/**
* Clear the previously set min height
*/
clearBlockShrinking: function() {
const messageList = this.refs.itemlist;
if (messageList) {
messageList.style.minHeight = null;
}
},
render: function() { render: function() {
const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
// TODO: the classnames on the div and ol could do with being updated to // TODO: the classnames on the div and ol could do with being updated to

View file

@ -455,7 +455,7 @@ var TimelinePanel = React.createClass({
// //
const myUserId = MatrixClientPeg.get().credentials.userId; const myUserId = MatrixClientPeg.get().credentials.userId;
const sender = ev.sender ? ev.sender.userId : null; const sender = ev.sender ? ev.sender.userId : null;
var callback = null; var callRMUpdated = false;
if (sender != myUserId && !UserActivity.userCurrentlyActive()) { if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
updatedState.readMarkerVisible = true; updatedState.readMarkerVisible = true;
} else if (lastEv && this.getReadMarkerPosition() === 0) { } else if (lastEv && this.getReadMarkerPosition() === 0) {
@ -465,11 +465,16 @@ var TimelinePanel = React.createClass({
this._setReadMarker(lastEv.getId(), lastEv.getTs(), true); this._setReadMarker(lastEv.getId(), lastEv.getTs(), true);
updatedState.readMarkerVisible = false; updatedState.readMarkerVisible = false;
updatedState.readMarkerEventId = lastEv.getId(); updatedState.readMarkerEventId = lastEv.getId();
callback = this.props.onReadMarkerUpdated; callRMUpdated = true;
} }
} }
this.setState(updatedState, callback); this.setState(updatedState, () => {
this.refs.messagePanel.updateTimelineMinHeight();
if (callRMUpdated) {
this.props.onReadMarkerUpdated();
}
});
}); });
}, },

View file

@ -19,6 +19,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import sdk from '../../../index'; import sdk from '../../../index';
import WhoIsTyping from '../../../WhoIsTyping'; import WhoIsTyping from '../../../WhoIsTyping';
import Timer from '../../../utils/Timer';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import MemberAvatar from '../avatars/MemberAvatar'; import MemberAvatar from '../avatars/MemberAvatar';
@ -43,11 +44,18 @@ module.exports = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room), usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
// a map with userid => Timer to delay
// hiding the "x is typing" message for a
// user so hiding it can coincide
// with the sent message by the other side
// resulting in less timeline jumpiness
delayedStopTypingTimers: {},
}; };
}, },
componentWillMount: function() { componentWillMount: function() {
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping); MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
}, },
componentDidUpdate: function(_, prevState) { componentDidUpdate: function(_, prevState) {
@ -64,18 +72,90 @@ module.exports = React.createClass({
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
if (client) { if (client) {
client.removeListener("RoomMember.typing", this.onRoomMemberTyping); client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
client.removeListener("Room.timeline", this.onRoomTimeline);
}
Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
},
isVisible: function() {
return this.state.usersTyping.length !== 0 || Object.keys(this.state.delayedStopTypingTimers).length !== 0;
},
onRoomTimeline: function(event, room) {
if (room.roomId === this.props.room.roomId) {
const userId = event.getSender();
// remove user from usersTyping
const usersTyping = this.state.usersTyping.filter((m) => m.userId !== userId);
this.setState({usersTyping});
// abort timer if any
this._abortUserTimer(userId);
} }
}, },
onRoomMemberTyping: function(ev, member) { onRoomMemberTyping: function(ev, member) {
const usersTyping = WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room);
this.setState({ this.setState({
usersTyping: WhoIsTyping.usersTypingApartFromMeAndIgnored(this.props.room), delayedStopTypingTimers: this._updateDelayedStopTypingTimers(usersTyping),
usersTyping,
}); });
}, },
_renderTypingIndicatorAvatars: function(limit) { _updateDelayedStopTypingTimers(usersTyping) {
let users = this.state.usersTyping; const usersThatStoppedTyping = this.state.usersTyping.filter((a) => {
return !usersTyping.some((b) => a.userId === b.userId);
});
const usersThatStartedTyping = usersTyping.filter((a) => {
return !this.state.usersTyping.some((b) => a.userId === b.userId);
});
// abort all the timers for the users that started typing again
usersThatStartedTyping.forEach((m) => {
const timer = this.state.delayedStopTypingTimers[m.userId];
if (timer) {
timer.abort();
}
});
// prepare new delayedStopTypingTimers object to update state with
let delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
// remove members that started typing again
delayedStopTypingTimers = usersThatStartedTyping.reduce((delayedStopTypingTimers, m) => {
delete delayedStopTypingTimers[m.userId];
return delayedStopTypingTimers;
}, delayedStopTypingTimers);
// start timer for members that stopped typing
delayedStopTypingTimers = usersThatStoppedTyping.reduce((delayedStopTypingTimers, m) => {
if (!delayedStopTypingTimers[m.userId]) {
const timer = new Timer(5000);
delayedStopTypingTimers[m.userId] = timer;
timer.start();
timer.finished().then(
() => this._removeUserTimer(m.userId), // on elapsed
() => {/* aborted */},
);
}
return delayedStopTypingTimers;
}, delayedStopTypingTimers);
return delayedStopTypingTimers;
},
_abortUserTimer: function(userId) {
const timer = this.state.delayedStopTypingTimers[userId];
if (timer) {
timer.abort();
this._removeUserTimer(userId);
}
},
_removeUserTimer: function(userId) {
const timer = this.state.delayedStopTypingTimers[userId];
if (timer) {
const delayedStopTypingTimers = Object.assign({}, this.state.delayedStopTypingTimers);
delete delayedStopTypingTimers[userId];
this.setState({delayedStopTypingTimers});
}
},
_renderTypingIndicatorAvatars: function(users, limit) {
let othersCount = 0; let othersCount = 0;
if (users.length > limit) { if (users.length > limit) {
othersCount = users.length - limit + 1; othersCount = users.length - limit + 1;
@ -106,8 +186,19 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
let usersTyping = this.state.usersTyping;
const stoppedUsersOnTimer = Object.keys(this.state.delayedStopTypingTimers)
.map((userId) => this.props.room.getMember(userId));
// append the users that have been reported not typing anymore
// but have a timeout timer running so they can disappear
// when a message comes in
usersTyping = usersTyping.concat(stoppedUsersOnTimer);
// sort them so the typing members don't change order when
// moved to delayedStopTypingTimers
usersTyping.sort((a, b) => a.name.localeCompare(b.name));
const typingString = WhoIsTyping.whoIsTypingString( const typingString = WhoIsTyping.whoIsTypingString(
this.state.usersTyping, usersTyping,
this.props.whoIsTypingLimit, this.props.whoIsTypingLimit,
); );
if (!typingString) { if (!typingString) {
@ -119,7 +210,7 @@ module.exports = React.createClass({
return ( return (
<li className="mx_WhoIsTypingTile"> <li className="mx_WhoIsTypingTile">
<div className="mx_WhoIsTypingTile_avatars"> <div className="mx_WhoIsTypingTile_avatars">
{ this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit) } { this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
</div> </div>
<div className="mx_WhoIsTypingTile_label"> <div className="mx_WhoIsTypingTile_label">
<EmojiText>{ typingString }</EmojiText> <EmojiText>{ typingString }</EmojiText>