Display call logs in the UI.

Display placed/incoming calls, answers and hangups.

skins/base/views/molecules/voip/MCallAnswerTile.js

@@ -0,0 +1,50 @@
+/*
+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.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
+var ComponentBroker = require('../../../../../src/ComponentBroker');
+var MCallAnswerTileController = require("../../../../../src/controllers/molecules/voip/MCallAnswerTile");
+var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
+
+module.exports = React.createClass({
+    displayName: 'MCallAnswerTile',
+    mixins: [MCallAnswerTileController],
+
+    getAnswerText: function(event) {
+        var senderName = event.sender ? event.sender.name : "Someone";
+        return senderName + " answered the call.";
+    },
+
+    render: function() {
+        // XXX: for now, just cheekily borrow the css from message tile...
+        return (
+            <div className="mx_MessageTile">
+                <div className="mx_MessageTile_avatar">
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                </div>            
+                <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                <span className="mx_SenderProfile"></span>
+                <span className="mx_MessageTile_content">
+                    {this.getAnswerText(this.props.mxEvent)}
+                </span>
+            </div>
+        );
+    },
+});
+

skins/base/views/molecules/voip/MCallHangupTile.js

@@ -0,0 +1,50 @@
+/*
+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.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
+var ComponentBroker = require('../../../../../src/ComponentBroker');
+var MCallHangupTileController = require("../../../../../src/controllers/molecules/voip/MCallHangupTile");
+var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
+
+module.exports = React.createClass({
+    displayName: 'MCallHangupTile',
+    mixins: [MCallHangupTileController],
+
+    getHangupText: function(event) {
+        var senderName = event.sender ? event.sender.name : "Someone";
+        return senderName + " hungup.";
+    },
+
+    render: function() {
+        // XXX: for now, just cheekily borrow the css from message tile...
+        return (
+            <div className="mx_MessageTile">
+                <div className="mx_MessageTile_avatar">
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                </div>            
+                <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                <span className="mx_SenderProfile"></span>
+                <span className="mx_MessageTile_content">
+                    {this.getHangupText(this.props.mxEvent)}
+                </span>
+            </div>
+        );
+    },
+});
+

skins/base/views/molecules/voip/MCallInviteTile.js

@@ -0,0 +1,56 @@
+/*
+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.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
+var ComponentBroker = require('../../../../../src/ComponentBroker');
+var MCallInviteTileController = require("../../../../../src/controllers/molecules/voip/MCallInviteTile");
+var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
+
+module.exports = React.createClass({
+    displayName: 'MCallInviteTile',
+    mixins: [MCallInviteTileController],
+
+    getInviteText: function(event) {
+        var senderName = event.sender ? event.sender.name : "Someone";
+        // FIXME: Find a better way to determine this from the event?
+        var type = "voice";
+        if (event.getContent().offer &&
+                event.getContent().offer.sdp.indexOf('m=video') !== -1) {
+            type = "video";
+        }
+        return senderName + " placed a " + type + " call.";
+    },
+
+    render: function() {
+        // XXX: for now, just cheekily borrow the css from message tile...
+        return (
+            <div className="mx_MessageTile">
+                <div className="mx_MessageTile_avatar">
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
+                </div>            
+                <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                <span className="mx_SenderProfile"></span>
+                <span className="mx_MessageTile_content">
+                    {this.getInviteText(this.props.mxEvent)}
+                </span>
+            </div>
+        );
+    },
+});
+

src/ComponentBroker.js

@@ -101,6 +101,9 @@ require('../skins/base/views/molecules/DirectoryMenu');
 require('../skins/base/views/atoms/voip/VideoFeed');
 require('../skins/base/views/molecules/voip/VideoView');
 require('../skins/base/views/molecules/voip/CallView');
+require('../skins/base/views/molecules/voip/MCallInviteTile');
+require('../skins/base/views/molecules/voip/MCallAnswerTile');
+require('../skins/base/views/molecules/voip/MCallHangupTile');
 
 
 }

src/controllers/molecules/voip/MCallAnswerTile.js

@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+'use strict';
+
+module.exports = {
+};

src/controllers/molecules/voip/MCallHangupTile.js

@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+'use strict';
+
+module.exports = {
+};

src/controllers/molecules/voip/MCallInviteTile.js

@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+'use strict';
+
+module.exports = {
+};

src/controllers/organisms/RoomView.js

@@ -30,7 +30,10 @@ var ComponentBroker = require('../../ComponentBroker');
 
 var tileTypes = {
     'm.room.message': ComponentBroker.get('molecules/MessageTile'),
-    'm.room.member': ComponentBroker.get('molecules/MRoomMemberTile')
+    'm.room.member': ComponentBroker.get('molecules/MRoomMemberTile'),
+    'm.call.invite': ComponentBroker.get('molecules/voip/MCallInviteTile'),
+    'm.call.answer': ComponentBroker.get('molecules/voip/MCallAnswerTile'),
+    'm.call.hangup': ComponentBroker.get('molecules/voip/MCallHangupTile')
 };
 
 module.exports = {