mirror of https://github.com/vector-im/riot-web
135 lines
4.8 KiB
JavaScript
135 lines
4.8 KiB
JavaScript
/*
|
|
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 CallHandler = require('../../../CallHandler');
|
|
var MatrixClientPeg = require('../../../MatrixClientPeg');
|
|
var sdk = require('../../../index');
|
|
var dis = require('../../../dispatcher');
|
|
|
|
|
|
module.exports = React.createClass({
|
|
displayName: 'MessageComposer',
|
|
|
|
propTypes: {
|
|
tabComplete: React.PropTypes.any,
|
|
|
|
// a callback which is called when the height of the composer is
|
|
// changed due to a change in content.
|
|
onResize: React.PropTypes.func,
|
|
|
|
// js-sdk Room object
|
|
room: React.PropTypes.object.isRequired,
|
|
|
|
// string representing the current voip call state
|
|
callState: React.PropTypes.string,
|
|
|
|
// callback when a file to upload is chosen
|
|
uploadFile: React.PropTypes.func.isRequired,
|
|
},
|
|
|
|
onUploadClick: function(ev) {
|
|
this.refs.uploadInput.click();
|
|
},
|
|
|
|
onUploadFileSelected: function(ev) {
|
|
var files = ev.target.files;
|
|
// MessageComposer shouldn't have to rely on its parent passing in a callback to upload a file
|
|
if (files && files.length > 0) {
|
|
this.props.uploadFile(files[0]);
|
|
}
|
|
this.refs.uploadInput.value = null;
|
|
},
|
|
|
|
onHangupClick: function() {
|
|
var call = CallHandler.getCallForRoom(this.props.room.roomId);
|
|
//var call = CallHandler.getAnyActiveCall();
|
|
if (!call) {
|
|
return;
|
|
}
|
|
dis.dispatch({
|
|
action: 'hangup',
|
|
// hangup the call for this room, which may not be the room in props
|
|
// (e.g. conferences which will hangup the 1:1 room instead)
|
|
room_id: call.roomId
|
|
});
|
|
},
|
|
|
|
onCallClick: function(ev) {
|
|
dis.dispatch({
|
|
action: 'place_call',
|
|
type: ev.shiftKey ? "screensharing" : "video",
|
|
room_id: this.props.room.roomId
|
|
});
|
|
},
|
|
|
|
onVoiceCallClick: function(ev) {
|
|
dis.dispatch({
|
|
action: 'place_call',
|
|
type: 'voice',
|
|
room_id: this.props.room.roomId
|
|
});
|
|
},
|
|
|
|
render: function() {
|
|
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
|
|
var uploadInputStyle = {display: 'none'};
|
|
var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
|
|
var TintableSvg = sdk.getComponent("elements.TintableSvg");
|
|
var MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
|
|
|
|
var callButton, videoCallButton, hangupButton;
|
|
if (this.props.callState && this.props.callState !== 'ended') {
|
|
hangupButton =
|
|
<div className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
|
|
<img src="img/hangup.svg" alt="Hangup" title="Hangup" width="25" height="26"/>
|
|
</div>;
|
|
}
|
|
else {
|
|
callButton =
|
|
<div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
|
|
<TintableSvg src="img/voice.svg" width="16" height="26"/>
|
|
</div>
|
|
videoCallButton =
|
|
<div className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
|
|
<TintableSvg src="img/call.svg" width="30" height="22"/>
|
|
</div>
|
|
}
|
|
|
|
return (
|
|
<div className="mx_MessageComposer">
|
|
<div className="mx_MessageComposer_wrapper">
|
|
<div className="mx_MessageComposer_row">
|
|
<div className="mx_MessageComposer_avatar">
|
|
<MemberAvatar member={me} width={24} height={24} />
|
|
</div>
|
|
<MessageComposerInput tabComplete={this.props.tabComplete} onResize={this.props.onResize}
|
|
room={this.props.room} />
|
|
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
|
|
<TintableSvg src="img/upload.svg" width="19" height="24"/>
|
|
<input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
|
|
</div>
|
|
{ hangupButton }
|
|
{ callButton }
|
|
{ videoCallButton }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|