Move and merge voip molecules. Inject the ConferenceHandler as a prop

This keeps the vector conf logic munge separate from react SDK.

src/skins/vector/skindex.js

@@ -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');

src/skins/vector/views/molecules/voip/CallView.js

@@ -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 }/>
-        );
-    }
-});

src/skins/vector/views/molecules/voip/IncomingCallBox.js

@@ -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>
-        );
-    }
-});

src/skins/vector/views/molecules/voip/VideoView.js

@@ -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>
-        );
-    }
-});

src/skins/vector/views/organisms/LeftPanel.js

@@ -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');
+            var CallView = sdk.getComponent('voip.CallView');
-            callPreview = <CallView className="mx_LeftPanel_callView" onClick={this.onCallViewClick} />
+            callPreview = (
+                <CallView
+                    className="mx_LeftPanel_callView" onClick={this.onCallViewClick}
+                    ConferenceHandler={VectorConferenceHandler} />
+            );
         }
 
         return (

src/skins/vector/views/organisms/RoomView.js

@@ -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>