mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
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:
parent
9c8b540d14
commit
7a50166dc6
@ -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"/>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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 = {
|
||||
/>
|
||||
);
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
|
@ -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;
|
||||
}
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user