2016-02-08 18:04:54 +00:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
var React = require('react');
|
|
|
|
var sdk = require('../../index');
|
|
|
|
var dis = require("../../dispatcher");
|
|
|
|
var WhoIsTyping = require("../../WhoIsTyping");
|
|
|
|
var MatrixClientPeg = require("../../MatrixClientPeg");
|
2017-01-20 16:51:35 +00:00
|
|
|
const MemberAvatar = require("../views/avatars/MemberAvatar");
|
|
|
|
|
2017-01-23 15:01:39 +00:00
|
|
|
const HIDE_DEBOUNCE_MS = 10000;
|
|
|
|
const STATUS_BAR_HIDDEN = 0;
|
|
|
|
const STATUS_BAR_EXPANDED = 1;
|
|
|
|
const STATUS_BAR_EXPANDED_LARGE = 2;
|
|
|
|
|
2016-02-08 18:04:54 +00:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'RoomStatusBar',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
// the room this statusbar is representing.
|
|
|
|
room: React.PropTypes.object.isRequired,
|
2016-07-15 15:10:27 +00:00
|
|
|
|
|
|
|
// a TabComplete object
|
2016-07-15 16:15:51 +00:00
|
|
|
tabComplete: React.PropTypes.object.isRequired,
|
2016-02-08 18:04:54 +00:00
|
|
|
|
|
|
|
// the number of messages which have arrived since we've been scrolled up
|
|
|
|
numUnreadMessages: React.PropTypes.number,
|
|
|
|
|
|
|
|
// true if there are messages in the room which had errors on send
|
|
|
|
hasUnsentMessages: React.PropTypes.bool,
|
|
|
|
|
|
|
|
// this is true if we are fully scrolled-down, and are looking at
|
|
|
|
// the end of the live timeline.
|
|
|
|
atEndOfLiveTimeline: React.PropTypes.bool,
|
|
|
|
|
|
|
|
// true if there is an active call in this room (means we show
|
|
|
|
// the 'Active Call' text in the status bar if there is nothing
|
|
|
|
// more interesting)
|
|
|
|
hasActiveCall: React.PropTypes.bool,
|
2016-02-09 11:36:57 +00:00
|
|
|
|
2017-01-24 16:01:39 +00:00
|
|
|
// Number of names to display in typing indication. E.g. set to 3, will
|
|
|
|
// result in "X, Y, Z and 100 others are typing."
|
|
|
|
whoIsTypingLimit: React.PropTypes.number,
|
|
|
|
|
2016-02-09 11:36:57 +00:00
|
|
|
// callback for when the user clicks on the 'resend all' button in the
|
|
|
|
// 'unsent messages' bar
|
|
|
|
onResendAllClick: React.PropTypes.func,
|
|
|
|
|
2016-03-21 16:49:07 +00:00
|
|
|
// callback for when the user clicks on the 'cancel all' button in the
|
|
|
|
// 'unsent messages' bar
|
|
|
|
onCancelAllClick: React.PropTypes.func,
|
|
|
|
|
2016-02-09 11:36:57 +00:00
|
|
|
// callback for when the user clicks on the 'scroll to bottom' button
|
|
|
|
onScrollToBottomClick: React.PropTypes.func,
|
2016-02-23 11:06:16 +00:00
|
|
|
|
|
|
|
// callback for when we do something that changes the size of the
|
|
|
|
// status bar. This is used to trigger a re-layout in the parent
|
|
|
|
// component.
|
|
|
|
onResize: React.PropTypes.func,
|
2017-01-23 15:01:39 +00:00
|
|
|
|
|
|
|
// callback for when the status bar can be hidden from view, as it is
|
|
|
|
// not displaying anything
|
|
|
|
onHidden: React.PropTypes.func,
|
2017-02-02 17:48:47 +00:00
|
|
|
|
2017-01-23 15:01:39 +00:00
|
|
|
// callback for when the status bar is displaying something and should
|
|
|
|
// be visible
|
|
|
|
onVisible: React.PropTypes.func,
|
2016-02-08 18:04:54 +00:00
|
|
|
},
|
|
|
|
|
2017-01-24 17:16:26 +00:00
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
whoIsTypingLimit: 2,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2016-02-08 18:04:54 +00:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
syncState: MatrixClientPeg.get().getSyncState(),
|
2017-01-24 17:18:56 +00:00
|
|
|
whoisTypingString: WhoIsTyping.whoIsTypingString(
|
|
|
|
this.props.room,
|
|
|
|
this.props.whoIsTypingLimit
|
|
|
|
),
|
2016-02-08 18:04:54 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
|
|
|
MatrixClientPeg.get().on("sync", this.onSyncStateChange);
|
2016-02-23 16:17:50 +00:00
|
|
|
MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
|
2016-02-08 18:04:54 +00:00
|
|
|
},
|
|
|
|
|
2016-02-23 11:06:16 +00:00
|
|
|
componentDidUpdate: function(prevProps, prevState) {
|
|
|
|
if(this.props.onResize && this._checkForResize(prevProps, prevState)) {
|
|
|
|
this.props.onResize();
|
|
|
|
}
|
2017-01-23 15:01:39 +00:00
|
|
|
|
|
|
|
const size = this._getSize(this.state, this.props);
|
|
|
|
if (size > 0) {
|
|
|
|
this.props.onVisible();
|
|
|
|
} else {
|
|
|
|
if (this.hideDebouncer) {
|
|
|
|
clearTimeout(this.hideDebouncer);
|
|
|
|
}
|
|
|
|
this.hideDebouncer = setTimeout(() => {
|
2017-02-02 17:48:47 +00:00
|
|
|
// temporarily stop hiding the statusbar as per
|
|
|
|
// https://github.com/vector-im/riot-web/issues/1991#issuecomment-276953915
|
|
|
|
// this.props.onHidden();
|
2017-01-23 15:01:39 +00:00
|
|
|
}, HIDE_DEBOUNCE_MS);
|
|
|
|
}
|
2016-02-23 11:06:16 +00:00
|
|
|
},
|
|
|
|
|
2016-02-08 18:04:54 +00:00
|
|
|
componentWillUnmount: function() {
|
2016-02-15 21:50:39 +00:00
|
|
|
// we may have entirely lost our client as we're logging out before clicking login on the guest bar...
|
2016-02-23 16:17:50 +00:00
|
|
|
var client = MatrixClientPeg.get();
|
|
|
|
if (client) {
|
|
|
|
client.removeListener("sync", this.onSyncStateChange);
|
|
|
|
client.removeListener("RoomMember.typing", this.onRoomMemberTyping);
|
2016-02-15 21:50:39 +00:00
|
|
|
}
|
2016-02-08 18:04:54 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
onSyncStateChange: function(state, prevState) {
|
|
|
|
if (state === "SYNCING" && prevState === "SYNCING") {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
syncState: state
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-02-23 16:17:50 +00:00
|
|
|
onRoomMemberTyping: function(ev, member) {
|
|
|
|
this.setState({
|
2017-01-24 17:18:56 +00:00
|
|
|
whoisTypingString: WhoIsTyping.whoIsTypingString(
|
|
|
|
this.props.room,
|
|
|
|
this.props.whoIsTypingLimit
|
|
|
|
),
|
2016-02-23 16:17:50 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-01-23 15:01:39 +00:00
|
|
|
// We don't need the actual height - just whether it is likely to have
|
|
|
|
// changed - so we use '0' to indicate normal size, and other values to
|
|
|
|
// indicate other sizes.
|
|
|
|
_getSize: function(state, props) {
|
2017-01-24 14:32:52 +00:00
|
|
|
if (state.syncState === "ERROR" ||
|
|
|
|
state.whoisTypingString ||
|
|
|
|
props.numUnreadMessages ||
|
|
|
|
!props.atEndOfLiveTimeline ||
|
|
|
|
props.hasActiveCall) {
|
2017-01-23 15:01:39 +00:00
|
|
|
return STATUS_BAR_EXPANDED;
|
|
|
|
} else if (props.tabCompleteEntries) {
|
|
|
|
return STATUS_BAR_HIDDEN;
|
|
|
|
} else if (props.hasUnsentMessages) {
|
|
|
|
return STATUS_BAR_EXPANDED_LARGE;
|
2016-02-23 11:06:16 +00:00
|
|
|
}
|
2017-01-23 15:01:39 +00:00
|
|
|
return STATUS_BAR_HIDDEN;
|
|
|
|
},
|
2016-02-23 11:06:16 +00:00
|
|
|
|
2017-01-23 15:01:39 +00:00
|
|
|
// determine if we need to call onResize
|
|
|
|
_checkForResize: function(prevProps, prevState) {
|
|
|
|
// figure out the old height and the new height of the status bar.
|
|
|
|
return this._getSize(prevProps, prevState) !== this._getSize(this.props, this.state);
|
2016-02-23 11:06:16 +00:00
|
|
|
},
|
|
|
|
|
2016-02-09 14:42:32 +00:00
|
|
|
// return suitable content for the image on the left of the status bar.
|
|
|
|
//
|
|
|
|
// if wantPlaceholder is true, we include a "..." placeholder if
|
|
|
|
// there is nothing better to put in.
|
|
|
|
_getIndicator: function(wantPlaceholder) {
|
|
|
|
if (this.props.numUnreadMessages) {
|
|
|
|
return (
|
|
|
|
<div className="mx_RoomStatusBar_scrollDownIndicator"
|
|
|
|
onClick={ this.props.onScrollToBottomClick }>
|
|
|
|
<img src="img/newmessages.svg" width="24" height="24"
|
|
|
|
alt=""/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.props.atEndOfLiveTimeline) {
|
|
|
|
return (
|
|
|
|
<div className="mx_RoomStatusBar_scrollDownIndicator"
|
|
|
|
onClick={ this.props.onScrollToBottomClick }>
|
|
|
|
<img src="img/scrolldown.svg" width="24" height="24"
|
|
|
|
alt="Scroll to bottom of page"
|
|
|
|
title="Scroll to bottom of page"/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.hasActiveCall) {
|
|
|
|
return (
|
|
|
|
<img src="img/sound-indicator.svg" width="23" height="20"/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-02-18 18:16:48 +00:00
|
|
|
if (this.state.syncState === "ERROR") {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2016-02-09 14:42:32 +00:00
|
|
|
if (wantPlaceholder) {
|
|
|
|
return (
|
2017-01-20 16:51:35 +00:00
|
|
|
<div className="mx_RoomStatusBar_typingIndicatorAvatars">
|
2017-01-24 16:04:37 +00:00
|
|
|
{this._renderTypingIndicatorAvatars(this.props.whoIsTypingLimit)}
|
2016-03-28 14:09:36 +00:00
|
|
|
</div>
|
2016-02-09 14:42:32 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return null;
|
|
|
|
},
|
|
|
|
|
2017-01-20 16:51:35 +00:00
|
|
|
_renderTypingIndicatorAvatars: function(limit) {
|
2017-01-23 10:25:33 +00:00
|
|
|
let users = WhoIsTyping.usersTypingApartFromMe(this.props.room);
|
2017-01-20 16:51:35 +00:00
|
|
|
|
|
|
|
let othersCount = Math.max(users.length - limit, 0);
|
|
|
|
users = users.slice(0, limit);
|
|
|
|
|
|
|
|
let avatars = users.map((u, index) => {
|
|
|
|
let showInitial = othersCount === 0 && index === users.length - 1;
|
|
|
|
return (
|
|
|
|
<MemberAvatar
|
|
|
|
key={u.userId}
|
|
|
|
member={u}
|
|
|
|
width={24}
|
|
|
|
height={24}
|
|
|
|
resizeMethod="crop"
|
|
|
|
defaultToInitialLetter={showInitial}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
if (othersCount > 0) {
|
|
|
|
avatars.push(
|
|
|
|
<span className="mx_RoomStatusBar_typingIndicatorRemaining">
|
|
|
|
+{othersCount}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return avatars;
|
|
|
|
},
|
2016-02-09 14:42:32 +00:00
|
|
|
|
|
|
|
// return suitable content for the main (text) part of the status bar.
|
|
|
|
_getContent: function() {
|
2016-02-08 18:04:54 +00:00
|
|
|
var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
|
|
|
|
var TintableSvg = sdk.getComponent("elements.TintableSvg");
|
2016-08-11 02:25:12 +00:00
|
|
|
const EmojiText = sdk.getComponent('elements.EmojiText');
|
2016-02-08 18:04:54 +00:00
|
|
|
|
|
|
|
// no conn bar trumps unread count since you can't get unread messages
|
|
|
|
// without a connection! (technically may already have some but meh)
|
|
|
|
// It also trumps the "some not sent" msg since you can't resend without
|
|
|
|
// a connection!
|
|
|
|
if (this.state.syncState === "ERROR") {
|
|
|
|
return (
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar">
|
2016-02-08 18:04:54 +00:00
|
|
|
<img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_title">
|
|
|
|
Connectivity to the server has been lost.
|
|
|
|
</div>
|
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_desc">
|
|
|
|
Sent messages will be stored until your connection has returned.
|
2016-02-08 18:04:54 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-07-15 15:10:27 +00:00
|
|
|
if (this.props.tabComplete.isTabCompleting()) {
|
2016-02-08 18:04:54 +00:00
|
|
|
return (
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_tabCompleteBar">
|
|
|
|
<div className="mx_RoomStatusBar_tabCompleteWrapper">
|
2016-07-15 15:10:27 +00:00
|
|
|
<TabCompleteBar tabComplete={this.props.tabComplete} />
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_tabCompleteEol" title="->|">
|
2016-02-08 18:04:54 +00:00
|
|
|
<TintableSvg src="img/eol.svg" width="22" height="16"/>
|
|
|
|
Auto-complete
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.hasUnsentMessages) {
|
|
|
|
return (
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar">
|
2016-02-08 18:04:54 +00:00
|
|
|
<img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_title">
|
|
|
|
Some of your messages have not been sent.
|
|
|
|
</div>
|
|
|
|
<div className="mx_RoomStatusBar_connectionLostBar_desc">
|
|
|
|
<a className="mx_RoomStatusBar_resend_link"
|
2016-03-21 16:49:07 +00:00
|
|
|
onClick={ this.props.onResendAllClick }>
|
|
|
|
Resend all
|
2016-07-15 15:10:27 +00:00
|
|
|
</a> or <a
|
2016-03-21 16:49:07 +00:00
|
|
|
className="mx_RoomStatusBar_resend_link"
|
|
|
|
onClick={ this.props.onCancelAllClick }>
|
|
|
|
cancel all
|
|
|
|
</a> now. You can also select individual messages to
|
|
|
|
resend or cancel.
|
2016-02-08 18:04:54 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// unread count trumps who is typing since the unread count is only
|
|
|
|
// set when you've scrolled up
|
2016-02-09 12:40:11 +00:00
|
|
|
if (this.props.numUnreadMessages) {
|
2016-07-15 15:10:27 +00:00
|
|
|
var unreadMsgs = this.props.numUnreadMessages + " new message" +
|
2016-02-08 18:04:54 +00:00
|
|
|
(this.props.numUnreadMessages > 1 ? "s" : "");
|
|
|
|
|
|
|
|
return (
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_unreadMessagesBar"
|
|
|
|
onClick={ this.props.onScrollToBottomClick }>
|
2016-02-08 18:04:54 +00:00
|
|
|
{unreadMsgs}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-02-23 16:17:50 +00:00
|
|
|
var typingString = this.state.whoisTypingString;
|
2016-02-08 18:04:54 +00:00
|
|
|
if (typingString) {
|
|
|
|
return (
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_typingBar">
|
2016-08-09 19:01:51 +00:00
|
|
|
<EmojiText>{typingString}</EmojiText>
|
2016-02-08 18:04:54 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.hasActiveCall) {
|
|
|
|
return (
|
2016-02-09 14:42:32 +00:00
|
|
|
<div className="mx_RoomStatusBar_callBar">
|
2016-02-08 18:04:54 +00:00
|
|
|
<b>Active call</b>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-02-09 14:42:32 +00:00
|
|
|
return null;
|
2016-02-08 18:04:54 +00:00
|
|
|
},
|
2016-02-09 14:42:32 +00:00
|
|
|
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var content = this._getContent();
|
2016-03-17 15:01:54 +00:00
|
|
|
var indicator = this._getIndicator(this.state.whoisTypingString !== null);
|
2016-02-09 14:42:32 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="mx_RoomStatusBar">
|
|
|
|
<div className="mx_RoomStatusBar_indicator">
|
|
|
|
{indicator}
|
|
|
|
</div>
|
|
|
|
{content}
|
|
|
|
</div>
|
|
|
|
);
|
2016-07-15 15:10:27 +00:00
|
|
|
},
|
2016-02-08 18:04:54 +00:00
|
|
|
});
|