diff --git a/skins/base/views/molecules/MemberInfo.js b/skins/base/views/molecules/MemberInfo.js index 19e0dc46..b182dbc9 100644 --- a/skins/base/views/molecules/MemberInfo.js +++ b/skins/base/views/molecules/MemberInfo.js @@ -19,11 +19,33 @@ limitations under the License. var React = require('react'); var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); -//var MemberInfoController = require("../../../../src/controllers/molecules/MemberInfo"); +var MemberInfoController = require("../../../../src/controllers/molecules/MemberInfo"); module.exports = React.createClass({ displayName: 'MemberInfo', - //mixins: [MemberInfoController], + mixins: [MemberInfoController], + + getDuration: function(time) { + if (!time) return; + var t = parseInt(time / 1000); + var s = t % 60; + var m = parseInt(t / 60) % 60; + var h = parseInt(t / (60 * 60)) % 24; + var d = parseInt(t / (60 * 60 * 24)); + if (t < 60) { + if (t < 0) { + return "0s"; + } + return s + "s"; + } + if (t < 60 * 60) { + return m + "m"; + } + if (t < 24 * 60 * 60) { + return h + "h"; + } + return d + "d "; + }, render: function() { var power; @@ -31,6 +53,10 @@ module.exports = React.createClass({ var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png"; power = ; } + var activeAgo = "unknown"; + if (this.state.active >= 0) { + activeAgo = this.getDuration(this.state.active); + } return (
@@ -41,8 +67,8 @@ module.exports = React.createClass({ width="128" height="128" alt=""/>
{this.props.member.userId}
-
Presence: {this.props.member.presence}
-
Last active: {this.props.member.last_active_ago}
+
Presence: {this.state.presence}
+
Last active: {activeAgo}
Start chat
); diff --git a/src/controllers/molecules/MemberInfo.js b/src/controllers/molecules/MemberInfo.js new file mode 100644 index 00000000..66c2104b --- /dev/null +++ b/src/controllers/molecules/MemberInfo.js @@ -0,0 +1,65 @@ +/* +Copyright 2015 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. +*/ + +/* + * State vars: + * 'presence' : string (online|offline|unavailable etc) + * 'active' : number (ms ago; can be -1) + */ + +'use strict'; +var MatrixClientPeg = require("../../MatrixClientPeg"); + +module.exports = { + componentDidMount: function() { + var self = this; + function updateUserState(event, user) { + if (!self.props.member) { return; } + + if (user.userId === self.props.member.userId) { + self.setState({ + presence: user.presence, + active: user.lastActiveAgo + }); + } + } + MatrixClientPeg.get().on("User.presence", updateUserState); + this.userPresenceFn = updateUserState; + + if (this.props.member) { + var usr = MatrixClientPeg.get().getUser(this.props.member.userId); + if (!usr) { + return; + } + this.setState({ + presence: usr.presence, + active: usr.lastActiveAgo + }); + } + }, + + componentWillUnmount: function() { + MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn); + }, + + getInitialState: function() { + return { + presence: "offline", + active: -1 + } + } +}; +