2016-02-23 15:46:27 +00:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2017-10-12 16:03:38 +00:00
|
|
|
Copyright 2017 New Vector Ltd
|
2016-02-23 15:46:27 +00:00
|
|
|
|
|
|
|
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-09 10:06:44 +00:00
|
|
|
import AppsDrawer from './AppsDrawer';
|
2017-11-13 19:19:33 +00:00
|
|
|
import { _t } 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,
|
2017-06-13 13:34:05 +00:00
|
|
|
userId: React.PropTypes.string.isRequired,
|
|
|
|
showApps: React.PropTypes.bool,
|
2016-02-23 15:46:27 +00:00
|
|
|
|
|
|
|
// 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() {
|
2017-05-17 20:15:57 +00:00
|
|
|
const CallView = sdk.getComponent("voip.CallView");
|
|
|
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
2016-02-23 15:46:27 +00:00
|
|
|
|
2017-05-17 20:15:57 +00:00
|
|
|
let fileDropTarget = null;
|
2016-02-23 15:46:27 +00:00
|
|
|
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")}>
|
2017-10-11 16:56:17 +00:00
|
|
|
<TintableSvg src="img/upload-big.svg" width="45" height="59" />
|
|
|
|
<br />
|
|
|
|
{ _t("Drop file here to upload") }
|
2016-02-23 15:46:27 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-05-17 20:15:57 +00:00
|
|
|
let conferenceCallNotification = null;
|
2016-02-23 15:46:27 +00:00
|
|
|
if (this.props.displayConfCallNotification) {
|
2017-06-09 21:06:43 +00:00
|
|
|
let supportedText = '';
|
|
|
|
let joinNode;
|
2016-02-23 15:46:27 +00:00
|
|
|
if (!MatrixClientPeg.get().supportsVoip()) {
|
2017-05-30 14:09:57 +00:00
|
|
|
supportedText = _t(" (unsupported)");
|
2017-05-17 20:15:57 +00:00
|
|
|
} else {
|
2017-06-09 21:06:43 +00:00
|
|
|
joinNode = (<span>
|
2017-11-13 19:19:33 +00:00
|
|
|
{ _t(
|
2017-06-08 13:45:59 +00:00
|
|
|
"Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
|
2017-11-13 19:19:33 +00:00
|
|
|
{},
|
|
|
|
{
|
|
|
|
'voiceText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{ sub }</a>,
|
|
|
|
'videoText': (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{ sub }</a>,
|
|
|
|
},
|
2017-10-11 16:56:17 +00:00
|
|
|
) }
|
2016-09-02 14:38:28 +00:00
|
|
|
</span>);
|
|
|
|
}
|
2017-06-09 21:06:43 +00:00
|
|
|
// XXX: the translation here isn't great: appending ' (unsupported)' is likely to not make sense in many languages,
|
|
|
|
// but there are translations for this in the languages we do have so I'm leaving it for now.
|
2016-02-23 15:46:27 +00:00
|
|
|
conferenceCallNotification = (
|
2016-09-02 14:38:28 +00:00
|
|
|
<div className="mx_RoomView_ongoingConfCallNotification">
|
2017-10-11 16:56:17 +00:00
|
|
|
{ _t("Ongoing conference call%(supportedText)s.", {supportedText: supportedText}) }
|
2017-06-09 21:06:43 +00:00
|
|
|
|
2017-10-11 16:56:17 +00:00
|
|
|
{ joinNode }
|
2016-02-23 15:46:27 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-05-17 20:15:57 +00:00
|
|
|
const callView = (
|
2016-02-23 15:46:27 +00:00
|
|
|
<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}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
2017-10-12 16:03:38 +00:00
|
|
|
const appsDrawer = <AppsDrawer ref="appsDrawer"
|
|
|
|
room={this.props.room}
|
|
|
|
userId={this.props.userId}
|
|
|
|
maxHeight={this.props.maxHeight}
|
|
|
|
showApps={this.props.showApps}
|
|
|
|
/>;
|
2017-05-17 20:15:57 +00:00
|
|
|
|
2016-02-23 15:46:27 +00:00
|
|
|
return (
|
2017-08-21 14:29:11 +00:00
|
|
|
<div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
|
2017-05-17 20:15:57 +00:00
|
|
|
{ appsDrawer }
|
2016-02-23 15:46:27 +00:00
|
|
|
{ fileDropTarget }
|
|
|
|
{ callView }
|
|
|
|
{ conferenceCallNotification }
|
|
|
|
{ this.props.children }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|