2016-02-23 15:46:27 +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.
|
|
|
|
*/
|
|
|
|
|
2017-05-30 14:09:57 +00:00
|
|
|
import React from 'react';
|
|
|
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import dis from "../../../dispatcher";
|
|
|
|
import ObjectUtils from '../../../ObjectUtils';
|
2017-06-08 13:08:51 +00:00
|
|
|
import { _t, _tJsx} from '../../../languageHandler';
|
2017-05-30 14:09:57 +00:00
|
|
|
|
2016-02-23 15:46:27 +00:00
|
|
|
|
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'AuxPanel',
|
|
|
|
|
|
|
|
propTypes: {
|
|
|
|
// js-sdk room object
|
|
|
|
room: React.PropTypes.object.isRequired,
|
|
|
|
|
|
|
|
// Conference Handler implementation
|
|
|
|
conferenceHandler: React.PropTypes.object,
|
|
|
|
|
|
|
|
// set to true to show the file drop target
|
|
|
|
draggingFile: React.PropTypes.bool,
|
|
|
|
|
|
|
|
// set to true to show the 'active conf call' banner
|
|
|
|
displayConfCallNotification: React.PropTypes.bool,
|
|
|
|
|
|
|
|
// maxHeight attribute for the aux panel and the video
|
|
|
|
// therein
|
|
|
|
maxHeight: React.PropTypes.number,
|
|
|
|
|
2016-03-08 12:16:34 +00:00
|
|
|
// a callback which is called when the content of the aux panel changes
|
|
|
|
// content in a way that is likely to make it change size.
|
|
|
|
onResize: React.PropTypes.func,
|
|
|
|
},
|
|
|
|
|
|
|
|
shouldComponentUpdate: function(nextProps, nextState) {
|
|
|
|
return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
|
|
|
|
!ObjectUtils.shallowEqual(this.state, nextState));
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidUpdate: function(prevProps, prevState) {
|
|
|
|
// most changes are likely to cause a resize
|
|
|
|
if (this.props.onResize) {
|
|
|
|
this.props.onResize();
|
|
|
|
}
|
2016-02-23 15:46:27 +00:00
|
|
|
},
|
|
|
|
|
2016-09-03 12:27:46 +00:00
|
|
|
onConferenceNotificationClick: function(ev, type) {
|
2016-02-23 15:46:27 +00:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'place_call',
|
2016-09-02 14:38:28 +00:00
|
|
|
type: type,
|
2016-02-23 15:46:27 +00:00
|
|
|
room_id: this.props.room.roomId,
|
|
|
|
});
|
2016-09-03 12:27:46 +00:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2016-02-23 15:46:27 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var CallView = sdk.getComponent("voip.CallView");
|
|
|
|
var TintableSvg = sdk.getComponent("elements.TintableSvg");
|
|
|
|
|
|
|
|
var fileDropTarget = null;
|
|
|
|
if (this.props.draggingFile) {
|
|
|
|
fileDropTarget = (
|
|
|
|
<div className="mx_RoomView_fileDropTarget">
|
|
|
|
<div className="mx_RoomView_fileDropTargetLabel"
|
2017-06-08 13:08:51 +00:00
|
|
|
title={_t("Drop File Here")}>
|
2016-02-23 15:46:27 +00:00
|
|
|
<TintableSvg src="img/upload-big.svg" width="45" height="59"/>
|
|
|
|
<br/>
|
2017-05-30 14:09:57 +00:00
|
|
|
{_t("Drop file here to upload")}
|
2016-02-23 15:46:27 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
var conferenceCallNotification = null;
|
|
|
|
if (this.props.displayConfCallNotification) {
|
2016-09-02 14:38:28 +00:00
|
|
|
var supportedText, joinText;
|
2016-02-23 15:46:27 +00:00
|
|
|
if (!MatrixClientPeg.get().supportsVoip()) {
|
2017-05-30 14:09:57 +00:00
|
|
|
supportedText = _t(" (unsupported)");
|
2016-02-23 15:46:27 +00:00
|
|
|
}
|
2016-09-02 14:38:28 +00:00
|
|
|
else {
|
|
|
|
joinText = (<span>
|
2017-06-08 13:08:51 +00:00
|
|
|
{_tJsx(
|
|
|
|
"Join as <a>voice</a> or <a>video</a>.",
|
|
|
|
[/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/],
|
|
|
|
[
|
|
|
|
(sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{sub}</a>,
|
|
|
|
(sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{sub}</a>,
|
|
|
|
]
|
|
|
|
)}
|
2016-09-02 14:38:28 +00:00
|
|
|
</span>);
|
|
|
|
|
|
|
|
}
|
2016-02-23 15:46:27 +00:00
|
|
|
conferenceCallNotification = (
|
2016-09-02 14:38:28 +00:00
|
|
|
<div className="mx_RoomView_ongoingConfCallNotification">
|
2017-05-30 14:09:57 +00:00
|
|
|
{_t("Ongoing conference call%(supportedText)s. %(joinText)s", {supportedText: supportedText, joinText: joinText})}
|
2016-02-23 15:46:27 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
var callView = (
|
|
|
|
<CallView ref="callView" room={this.props.room}
|
|
|
|
ConferenceHandler={this.props.conferenceHandler}
|
2016-03-08 12:16:34 +00:00
|
|
|
onResize={this.props.onResize}
|
2016-02-23 15:46:27 +00:00
|
|
|
maxVideoHeight={this.props.maxHeight}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
|
|
|
|
{ fileDropTarget }
|
|
|
|
{ callView }
|
|
|
|
{ conferenceCallNotification }
|
|
|
|
{ this.props.children }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|