imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Factor out a separate auxpanel, and cleanup the maxHeight management

Browse source 
Basically two changes here:

1. Factor out auxpanel from RoomView
2. Rather than setting maxHeight attributes by poking directly into the DOM,
pass them down as properties.
This commit is contained in:
Richard van der Hoff 2016-02-23 15:46:27 +00:00
parent bb6a36b911
commit 7a20fda7e7
6 changed files with 169 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/components/views/rooms/AuxPanel.js Normal file
View file

@ -0,0 +1,104 @@
/*
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 MatrixClientPeg = require("../../../MatrixClientPeg");
var sdk = require('../../../index');
var dis = require("../../../dispatcher");
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,
// a callback which is called when the video element in a voip call is
// resized due to a change in video metadata
onCallViewVideoResize: React.PropTypes.func,
},
onConferenceNotificationClick: function() {
dis.dispatch({
action: 'place_call',
type: "video",
room_id: this.props.room.roomId,
});
},
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"
title="Drop File Here">
<TintableSvg src="img/upload-big.svg" width="45" height="59"/>
<br/>
Drop file here to upload
</div>
</div>
);
}
var conferenceCallNotification = null;
if (this.props.displayConfCallNotification) {
var supportedText;
if (!MatrixClientPeg.get().supportsVoip()) {
supportedText = " (unsupported)";
}
conferenceCallNotification = (
<div className="mx_RoomView_ongoingConfCallNotification"
onClick={this.onConferenceNotificationClick}>
Ongoing conference call {supportedText}
</div>
);
}
var callView = (
<CallView ref="callView" room={this.props.room}
ConferenceHandler={this.props.conferenceHandler}
onResize={this.props.onCallViewVideoResize}
maxVideoHeight={this.props.maxHeight}
/>
);
return (
<div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
{ fileDropTarget }
{ callView }
{ conferenceCallNotification }
{ this.props.children }
</div>
);
},
});

45
src/components/views/voip/CallView.js
View file

@ -19,38 +19,32 @@ var CallHandler = require("../../../CallHandler");
var sdk = require('../../../index');
var MatrixClientPeg = require("../../../MatrixClientPeg");
/*
* State vars:
* this.state.call = MatrixCall|null
*
* Props:
* this.props.room = Room (JS SDK)
* this.props.ConferenceHandler = A Conference Handler implementation
* Must have a function signature:
* getConferenceCallForRoom(roomId: string): MatrixCall
*/
module.exports = React.createClass({
displayName: 'CallView',
propTypes: {
// a callback which is called when the video within the callview
// due to a change in video metadata
// js-sdk room object
room: React.PropTypes.object.isRequired,
// A Conference Handler implementation
// Must have a function signature:
// getConferenceCallForRoom(roomId: string): MatrixCall
ConferenceHandler: React.PropTypes.object,
// maxHeight style attribute for the video panel
maxVideoHeight: React.PropTypes.number,
// a callback which is called when the user clicks on the video div
onClick: React.PropTypes.func,
// a callback which is called when the video within the callview is
// resized due to a change in video metadata
onResize: React.PropTypes.func,
},
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
if (this.props.room) {
this.showCall(this.props.room.roomId);
}
else {
// XXX: why would we ever not have a this.props.room?
var call = CallHandler.getAnyActiveCall();
if (call) {
this.showCall(call.roomId);
}
}
this.showCall(this.props.room.roomId);
},
componentWillUnmount: function() {
@ -103,7 +97,10 @@ module.exports = React.createClass({
render: function(){
var VideoView = sdk.getComponent('voip.VideoView');
return (
<VideoView ref="video" onClick={ this.props.onClick } onResize={ this.props.onResize }/>
<VideoView ref="video" onClick={ this.props.onClick }
onResize={ this.props.onResize }
maxHeight={ this.props.maxVideoHeight }
/>
);
}
});

5
src/components/views/voip/VideoFeed.js
View file

@ -22,6 +22,9 @@ module.exports = React.createClass({
displayName: 'VideoFeed',
propTypes: {
// maxHeight style attribute for the video element
maxHeight: React.PropTypes.number,
// a callback which is called when the video element is resized
// due to a change in video metadata
onResize: React.PropTypes.func,
@ -43,7 +46,7 @@ module.exports = React.createClass({
render: function() {
return (
<video ref="vid">
<video ref="vid" style={{maxHeight: this.props.maxHeight}}>
</video>
);
},

23
src/components/views/voip/VideoView.js
View file

@ -25,6 +25,18 @@ var dis = require('../../../dispatcher');
module.exports = React.createClass({
displayName: 'VideoView',
propTypes: {
// maxHeight style attribute for the video element
maxHeight: React.PropTypes.number,
// a callback which is called when the user clicks on the video div
onClick: React.PropTypes.func,
// a callback which is called when the video element is resized due to
// a change in video metadata
onResize: React.PropTypes.func,
},
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
},
@ -64,7 +76,6 @@ module.exports = React.createClass({
element.msRequestFullscreen
);
requestMethod.call(element);
this.getRemoteVideoElement().style.maxHeight = "inherit";
}
else {
var exitMethod = (
@ -83,10 +94,18 @@ module.exports = React.createClass({
render: function() {
var VideoFeed = sdk.getComponent('voip.VideoFeed');
// if we're fullscreen, we don't want to set a maxHeight on the video element.
var fullscreenElement = (document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement);
var maxVideoHeight = fullscreenElement ? null : this.props.maxHeight;
return (
<div className="mx_VideoView" ref={this.setContainer} onClick={ this.props.onClick }>
<div className="mx_VideoView_remoteVideoFeed">
<VideoFeed ref="remote" onResize={this.props.onResize}/>
<VideoFeed ref="remote" onResize={this.props.onResize}
maxHeight={maxVideoHeight} />
<audio ref="remoteAudio"/>
</div>
<div className="mx_VideoView_localVideoFeed">