mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
Move and merge voip molecules. Inject the ConferenceHandler as a prop
This keeps the vector conf logic munge separate from react SDK.
This commit is contained in:
parent
49e5f18f62
commit
ff9608c914
@ -37,7 +37,9 @@ skin['voip.VideoFeed'] = require('matrix-react-sdk/lib/components/views/voip/Vid
|
||||
skin['create_room.CreateRoomButton'] = require('matrix-react-sdk/lib/components/views/create_room/CreateRoomButton');
|
||||
skin['create_room.Presets'] = require('matrix-react-sdk/lib/components/views/create_room/Presets');
|
||||
skin['create_room.RoomAlias'] = require('matrix-react-sdk/lib/components/views/create_room/RoomAlias');
|
||||
|
||||
skin['voip.CallView'] = require('matrix-react-sdk/lib/components/views/voip/CallView');
|
||||
skin['voip.IncomingCallBox'] = require('matrix-react-sdk/lib/components/views/voip/IncomingCallBox');
|
||||
skin['voip.VideoView'] = require('matrix-react-sdk/lib/components/views/voip/VideoView');
|
||||
|
||||
// Old style stuff
|
||||
skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
|
||||
@ -72,9 +74,6 @@ skin['molecules.SearchBar'] = require('./views/molecules/SearchBar');
|
||||
skin['molecules.SenderProfile'] = require('./views/molecules/SenderProfile');
|
||||
skin['molecules.UnknownMessageTile'] = require('./views/molecules/UnknownMessageTile');
|
||||
skin['molecules.UserSelector'] = require('./views/molecules/UserSelector');
|
||||
skin['molecules.voip.CallView'] = require('./views/molecules/voip/CallView');
|
||||
skin['molecules.voip.IncomingCallBox'] = require('./views/molecules/voip/IncomingCallBox');
|
||||
skin['molecules.voip.VideoView'] = require('./views/molecules/voip/VideoView');
|
||||
skin['organisms.CreateRoom'] = require('./views/organisms/CreateRoom');
|
||||
skin['organisms.ErrorDialog'] = require('./views/organisms/ErrorDialog');
|
||||
skin['organisms.LeftPanel'] = require('./views/organisms/LeftPanel');
|
||||
|
@ -1,40 +0,0 @@
|
||||
/*
|
||||
Copyright 2015 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var sdk = require('matrix-react-sdk')
|
||||
var CallViewController = require(
|
||||
"../../../../../controllers/molecules/voip/CallView"
|
||||
);
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'CallView',
|
||||
mixins: [CallViewController],
|
||||
|
||||
getVideoView: function() {
|
||||
return this.refs.video;
|
||||
},
|
||||
|
||||
render: function(){
|
||||
var VideoView = sdk.getComponent('molecules.voip.VideoView');
|
||||
return (
|
||||
<VideoView ref="video" onClick={ this.props.onClick }/>
|
||||
);
|
||||
}
|
||||
});
|
@ -1,74 +0,0 @@
|
||||
/*
|
||||
Copyright 2015 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
|
||||
var IncomingCallBoxController = require(
|
||||
"matrix-react-sdk/lib/controllers/molecules/voip/IncomingCallBox"
|
||||
);
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'IncomingCallBox',
|
||||
mixins: [IncomingCallBoxController],
|
||||
|
||||
getRingAudio: function() {
|
||||
return this.refs.ringAudio;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
||||
// NB: This block MUST have a "key" so React doesn't clobber the elements
|
||||
// between in-call / not-in-call.
|
||||
var audioBlock = (
|
||||
<audio ref="ringAudio" key="voip_ring_audio" loop>
|
||||
<source src="media/ring.ogg" type="audio/ogg" />
|
||||
<source src="media/ring.mp3" type="audio/mpeg" />
|
||||
</audio>
|
||||
);
|
||||
|
||||
if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
|
||||
return (
|
||||
<div>
|
||||
{audioBlock}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
|
||||
return (
|
||||
<div className="mx_IncomingCallBox">
|
||||
{audioBlock}
|
||||
<img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
|
||||
<div className="mx_IncomingCallBox_title">
|
||||
Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
|
||||
</div>
|
||||
<div className="mx_IncomingCallBox_buttons">
|
||||
<div className="mx_IncomingCallBox_buttons_cell">
|
||||
<div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
|
||||
Decline
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx_IncomingCallBox_buttons_cell">
|
||||
<div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
|
||||
Accept
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
@ -1,93 +0,0 @@
|
||||
/*
|
||||
Copyright 2015 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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
|
||||
var sdk = require('matrix-react-sdk')
|
||||
var dis = require('matrix-react-sdk/lib/dispatcher')
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'VideoView',
|
||||
|
||||
componentWillMount: function() {
|
||||
dis.register(this.onAction);
|
||||
},
|
||||
|
||||
getRemoteVideoElement: function() {
|
||||
return ReactDOM.findDOMNode(this.refs.remote);
|
||||
},
|
||||
|
||||
getRemoteAudioElement: function() {
|
||||
return this.refs.remoteAudio;
|
||||
},
|
||||
|
||||
getLocalVideoElement: function() {
|
||||
return ReactDOM.findDOMNode(this.refs.local);
|
||||
},
|
||||
|
||||
setContainer: function(c) {
|
||||
this.container = c;
|
||||
},
|
||||
|
||||
onAction: function(payload) {
|
||||
switch (payload.action) {
|
||||
case 'video_fullscreen':
|
||||
if (!this.container) {
|
||||
return;
|
||||
}
|
||||
var element = this.container;
|
||||
if (payload.fullscreen) {
|
||||
var requestMethod = (
|
||||
element.requestFullScreen ||
|
||||
element.webkitRequestFullScreen ||
|
||||
element.mozRequestFullScreen ||
|
||||
element.msRequestFullscreen
|
||||
);
|
||||
requestMethod.call(element);
|
||||
}
|
||||
else {
|
||||
var exitMethod = (
|
||||
document.exitFullscreen ||
|
||||
document.mozCancelFullScreen ||
|
||||
document.webkitExitFullscreen ||
|
||||
document.msExitFullscreen
|
||||
);
|
||||
if (exitMethod) {
|
||||
exitMethod.call(document);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var VideoFeed = sdk.getComponent('voip.VideoFeed');
|
||||
return (
|
||||
<div className="mx_VideoView" ref={this.setContainer} onClick={ this.props.onClick }>
|
||||
<div className="mx_VideoView_remoteVideoFeed">
|
||||
<VideoFeed ref="remote"/>
|
||||
<audio ref="remoteAudio"/>
|
||||
</div>
|
||||
<div className="mx_VideoView_localVideoFeed">
|
||||
<VideoFeed ref="local"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
@ -22,6 +22,7 @@ var HTML5Backend = require('react-dnd-html5-backend');
|
||||
var sdk = require('matrix-react-sdk')
|
||||
var dis = require('matrix-react-sdk/lib/dispatcher');
|
||||
|
||||
var VectorConferenceHandler = require('../../../../modules/VectorConferenceHandler');
|
||||
var CallHandler = require("matrix-react-sdk/lib/CallHandler");
|
||||
|
||||
var LeftPanel = React.createClass({
|
||||
@ -86,7 +87,7 @@ var LeftPanel = React.createClass({
|
||||
render: function() {
|
||||
var RoomList = sdk.getComponent('organisms.RoomList');
|
||||
var BottomLeftMenu = sdk.getComponent('molecules.BottomLeftMenu');
|
||||
var IncomingCallBox = sdk.getComponent('molecules.voip.IncomingCallBox');
|
||||
var IncomingCallBox = sdk.getComponent('voip.IncomingCallBox');
|
||||
|
||||
var collapseButton;
|
||||
var classes = "mx_LeftPanel";
|
||||
@ -100,8 +101,12 @@ var LeftPanel = React.createClass({
|
||||
|
||||
var callPreview;
|
||||
if (this.state.showCallElement) {
|
||||
var CallView = sdk.getComponent('molecules.voip.CallView');
|
||||
callPreview = <CallView className="mx_LeftPanel_callView" onClick={this.onCallViewClick} />
|
||||
var CallView = sdk.getComponent('voip.CallView');
|
||||
callPreview = (
|
||||
<CallView
|
||||
className="mx_LeftPanel_callView" onClick={this.onCallViewClick}
|
||||
ConferenceHandler={VectorConferenceHandler} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -28,6 +28,7 @@ var filesize = require('filesize');
|
||||
|
||||
var GeminiScrollbar = require('react-gemini-scrollbar');
|
||||
var RoomViewController = require('../../../../controllers/organisms/RoomView')
|
||||
var VectorConferenceHandler = require('../../../../modules/VectorConferenceHandler');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'RoomView',
|
||||
@ -109,7 +110,7 @@ module.exports = React.createClass({
|
||||
render: function() {
|
||||
var RoomHeader = sdk.getComponent('molecules.RoomHeader');
|
||||
var MessageComposer = sdk.getComponent('molecules.MessageComposer');
|
||||
var CallView = sdk.getComponent("molecules.voip.CallView");
|
||||
var CallView = sdk.getComponent("voip.CallView");
|
||||
var RoomSettings = sdk.getComponent("molecules.RoomSettings");
|
||||
var SearchBar = sdk.getComponent("molecules.SearchBar");
|
||||
|
||||
@ -295,7 +296,7 @@ module.exports = React.createClass({
|
||||
<RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings} onSearchClick={this.onSearchClick}
|
||||
onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
|
||||
<div className="mx_RoomView_auxPanel">
|
||||
<CallView room={this.state.room}/>
|
||||
<CallView room={this.state.room} ConferenceHandler={VectorConferenceHandler}/>
|
||||
{ conferenceCallNotification }
|
||||
{ aux }
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user