Move the 'thumbnail' video to the top-left of the screen

This was originally laid out at the MatrixChat level which could then be
CSSified, but Matthew suggests this looks a lot better being at the
RoomList level above recents. Move the rendering logic to RoomList.
This commit is contained in:
Kegan Dougal 2015-09-17 11:37:56 +01:00
parent 9c8b540d14
commit 7a50166dc6
4 changed files with 39 additions and 27 deletions

View File

@ -18,7 +18,7 @@ limitations under the License.
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var CallView = ComponentBroker.get('molecules/voip/CallView');
var RoomDropTarget = ComponentBroker.get('molecules/RoomDropTarget');
var RoomListController = require("../../../../src/controllers/organisms/RoomList");
@ -28,8 +28,14 @@ module.exports = React.createClass({
mixins: [RoomListController],
render: function() {
var callElement;
if (this.state.show_call_element) {
callElement = <CallView className="mx_MatrixChat_callView"/>
}
return (
<div className="mx_RoomList">
{callElement}
<h2 className="mx_RoomList_favourites_label">Favourites</h2>
<RoomDropTarget text="Drop here to favourite"/>

View File

@ -18,7 +18,6 @@ limitations under the License.
var React = require('react');
var ComponentBroker = require('../../../../src/ComponentBroker');
var CallHandler = require('../../../../src/CallHandler');
var LeftPanel = ComponentBroker.get('organisms/LeftPanel');
var RoomView = ComponentBroker.get('organisms/RoomView');
@ -30,7 +29,6 @@ var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
var Notifier = ComponentBroker.get('organisms/Notifier');
var CallView = ComponentBroker.get('molecules/voip/CallView');
var MatrixChatController = require('../../../../src/controllers/pages/MatrixChat');
@ -55,7 +53,7 @@ module.exports = React.createClass({
render: function() {
if (this.state.logged_in && this.state.ready) {
var page_element, call_element;
var page_element;
var right_panel = "";
switch (this.state.page_type) {
@ -76,18 +74,6 @@ module.exports = React.createClass({
right_panel = <RightPanel/>
break;
}
// if we aren't viewing a room with an ongoing call, but there is an
// active call, show the call element - we need to do this to make
// audio/video not crap out
if (this.state.active_call && (
!this.state.currentRoom ||
!CallHandler.getCallForRoom(this.state.currentRoom))) {
console.log(
"Creating global CallView for active call in room %s",
this.state.active_call.roomId
);
call_element = <CallView className="mx_MatrixChat_callView"/>
}
// TODO: Fix duplication here and do conditionals like we do above
if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
@ -96,7 +82,6 @@ module.exports = React.createClass({
<MatrixToolbar />
<div className="mx_MatrixChat mx_MatrixChat_toolbarShowing">
<LeftPanel selectedRoom={this.state.currentRoom} />
{call_element}
<main className="mx_MatrixChat_middlePanel">
{page_element}
</main>
@ -109,7 +94,6 @@ module.exports = React.createClass({
return (
<div className="mx_MatrixChat">
<LeftPanel selectedRoom={this.state.currentRoom} />
{call_element}
<main className="mx_MatrixChat_middlePanel">
{page_element}
</main>

View File

@ -19,9 +19,11 @@ limitations under the License.
var React = require("react");
var MatrixClientPeg = require("../../MatrixClientPeg");
var RoomListSorter = require("../../RoomListSorter");
var dis = require("../../dispatcher");
var ComponentBroker = require('../../ComponentBroker');
var ConferenceHandler = require("../../ConferenceHandler");
var CallHandler = require("../../CallHandler");
var RoomTile = ComponentBroker.get("molecules/RoomTile");
@ -41,7 +43,22 @@ module.exports = {
});
},
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
},
onAction: function(payload) {
switch (payload.action) {
// listen for call state changes to prod the render method, which
// may hide the global CallView if the call it is tracking is dead
case 'call_state':
this._recheckCallElement(this.props.selectedRoom);
break;
}
},
componentWillUnmount: function() {
dis.unregister(this.dispatcherRef);
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room", this.onRoom);
MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
@ -51,6 +68,7 @@ module.exports = {
componentWillReceiveProps: function(newProps) {
this.state.activityMap[newProps.selectedRoom] = undefined;
this._recheckCallElement(newProps.selectedRoom);
this.setState({
activityMap: this.state.activityMap
});
@ -122,6 +140,18 @@ module.exports = {
);
},
_recheckCallElement: function(selectedRoomId) {
// if we aren't viewing a room with an ongoing call, but there is an
// active call, show the call element - we need to do this to make
// audio/video not crap out
var activeCall = CallHandler.getAnyActiveCall();
var callForRoom = CallHandler.getCallForRoom(selectedRoomId);
var showCall = (activeCall && !callForRoom);
this.setState({
show_call_element: showCall
});
},
makeRoomTiles: function() {
var self = this;
return this.state.roomList.map(function(room) {
@ -136,5 +166,5 @@ module.exports = {
/>
);
});
},
}
};

View File

@ -26,7 +26,6 @@ var dis = require("../../dispatcher");
var q = require("q");
var ComponentBroker = require('../../ComponentBroker');
var CallHandler = require("../../CallHandler");
var Notifier = ComponentBroker.get('organisms/Notifier');
var MatrixTools = require('../../MatrixTools');
@ -206,13 +205,6 @@ module.exports = {
case 'notifier_enabled':
this.forceUpdate();
break;
case 'call_state':
// listen for call state changes to prod the render method, which
// may hide the global CallView if the call it is tracking is dead
this.setState({
active_call: CallHandler.getAnyActiveCall()
});
break;
}
},