Merge pull request #421 from vector-im/kegan/controller-merging2

Phase 2 controller merging (all atoms)

src/components/structures/login/Login.js

@@ -158,7 +158,7 @@ module.exports = React.createClass({displayName: 'Login',
     },
 
     render: function() {
-        var Loader = sdk.getComponent("atoms.Spinner");
+        var Loader = sdk.getComponent("elements.Spinner");
         var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         return (

src/components/structures/login/Registration.js

@@ -207,7 +207,7 @@ module.exports = React.createClass({
         }
         var busySpinner;
         if (this.state.busy) {
-            var Spinner = sdk.getComponent("atoms.Spinner");
+            var Spinner = sdk.getComponent("elements.Spinner");
             busySpinner = (
                 <Spinner />
             );

src/components/views/elements/ImageView.js

@@ -20,7 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 
-var DateUtils = require('../../../../DateUtils');
+var DateUtils = require('../../../DateUtils');
 var filesize = require('filesize');
 
 module.exports = React.createClass({
@@ -30,7 +30,8 @@ module.exports = React.createClass({
         onFinished: React.PropTypes.func.isRequired
     },
 
-    // XXX: keyboard shortcuts for managing dialogs should be done by the modal dialog base class somehow, surely...
+    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
+    // dialog base class somehow, surely...
     componentDidMount: function() {
         document.addEventListener("keydown", this.onKeyDown);
     },

src/components/views/messages/MessageTimestamp.js

@@ -17,7 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var DateUtils = require('../../../../DateUtils');
+var DateUtils = require('../../../DateUtils');
 
 module.exports = React.createClass({
     displayName: 'MessageTimestamp',

src/controllers/molecules/voip/CallView.js

@@ -1,97 +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 dis = require("matrix-react-sdk/lib/dispatcher");
-var CallHandler = require("matrix-react-sdk/lib/CallHandler");
-var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
-
-var VectorConferenceHandler = require('../../../modules/VectorConferenceHandler');
-
-/*
- * State vars:
- * this.state.call = MatrixCall|null
- *
- * Props:
- * this.props.room = Room (JS SDK)
- *
- * Internal state:
- * this._trackedRoom = (either from props.room or programatically set)
- */
-
-module.exports = {
-
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-        this._trackedRoom = null;
-        if (this.props.room) {
-            this._trackedRoom = this.props.room;
-            this.showCall(this._trackedRoom.roomId);
-        }
-        else {
-            var call = CallHandler.getAnyActiveCall();
-            if (call) {
-                console.log(
-                    "Global CallView is now tracking active call in room %s",
-                    call.roomId
-                );
-                this._trackedRoom = MatrixClientPeg.get().getRoom(call.roomId);
-                this.showCall(call.roomId);
-            }
-        }
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    onAction: function(payload) {
-        // don't filter out payloads for room IDs other than props.room because
-        // we may be interested in the conf 1:1 room
-        if (payload.action !== 'call_state' || !payload.room_id) {
-            return;
-        }
-        this.showCall(payload.room_id);
-    },
-
-    showCall: function(roomId) {
-        var call = (
-            CallHandler.getCallForRoom(roomId) ||
-            VectorConferenceHandler.getConferenceCallForRoom(roomId)
-        );
-        if (call) {
-            call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
-            call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
-            // give a separate element for audio stream playback - both for voice calls
-            // and for the voice stream of screen captures
-            call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
-        }
-        if (call && call.type === "video" && call.state !== 'ended') {
-            // if this call is a conf call, don't display local video as the
-            // conference will have us in it
-            this.getVideoView().getLocalVideoElement().style.display = (
-                call.confUserId ? "none" : "initial"
-            );
-            this.getVideoView().getRemoteVideoElement().style.display = "initial";
-        }
-        else {
-            this.getVideoView().getLocalVideoElement().style.display = "none";
-            this.getVideoView().getRemoteVideoElement().style.display = "none";
-            dis.dispatch({action: 'video_fullscreen', fullscreen: false});
-        }
-    }
-};
-

src/skins/vector/skindex.js

@@ -23,20 +23,25 @@ limitations under the License.
 
 var skin = {};
 
-// TODO: Fix this so matrix-react-sdk stuff is in react SDK.
+// Vector-specific stuff
+skin['elements.Spinner'] = require('../../components/views/elements/Spinner');
+skin['elements.ImageView'] = require('../../components/views/elements/ImageView');
+skin['messages.MessageTimestamp'] = require('../../components/views/messages/MessageTimestamp');
+
+// TODO: Fix this so matrix-react-sdk stuff is in react SDK skindex?
 skin['avatars.RoomAvatar'] = require('matrix-react-sdk/lib/components/views/avatars/RoomAvatar');
 skin['avatars.MemberAvatar'] = require('matrix-react-sdk/lib/components/views/avatars/MemberAvatar');
+skin['settings.EnableNotificationsButton'] = require('matrix-react-sdk/lib/components/views/settings/EnableNotificationsButton');
+skin['elements.EditableText'] = require('matrix-react-sdk/lib/components/views/elements/EditableText');
+skin['voip.VideoFeed'] = require('matrix-react-sdk/lib/components/views/voip/VideoFeed');
+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');
 
-skin['atoms.EditableText'] = require('./views/atoms/EditableText');
+// Old style stuff
-skin['atoms.EnableNotificationsButton'] = require('./views/atoms/EnableNotificationsButton');
-skin['atoms.ImageView'] = require('./views/atoms/ImageView');
-skin['atoms.LogoutButton'] = require('./views/atoms/LogoutButton');
-skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp');
-skin['atoms.Spinner'] = require('./views/atoms/Spinner');
-skin['atoms.create_room.CreateRoomButton'] = require('./views/atoms/create_room/CreateRoomButton');
-skin['atoms.create_room.Presets'] = require('./views/atoms/create_room/Presets');
-skin['atoms.create_room.RoomAlias'] = require('./views/atoms/create_room/RoomAlias');
-skin['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed');
 skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu');
 skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile');
 skin['molecules.ChangeAvatar'] = require('./views/molecules/ChangeAvatar');
@@ -69,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/atoms/EditableText.js

@@ -1,76 +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 EditableTextController = require('matrix-react-sdk/lib/controllers/atoms/EditableText')
-
-module.exports = React.createClass({
-    displayName: 'EditableText',
-    mixins: [EditableTextController],
-
-    onKeyUp: function(ev) {
-        if (ev.key == "Enter") {
-            this.onFinish(ev);
-        } else if (ev.key == "Escape") {
-            this.cancelEdit();
-        }
-    },
-
-    onClickDiv: function() {
-        this.setState({
-            phase: this.Phases.Edit,
-        })
-    },
-
-    onFocus: function(ev) {
-        ev.target.setSelectionRange(0, ev.target.value.length);
-    },
-
-    onFinish: function(ev) {
-        if (ev.target.value) {
-            this.setValue(ev.target.value, ev.key === "Enter");
-        } else {
-            this.cancelEdit();
-        }
-    },
-
-    render: function() {
-        var editable_el;
-
-        if (this.state.phase == this.Phases.Display) {
-            if (this.state.value) {
-                editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
-            } else {
-                editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.props.label}</div>;
-            }
-        } else if (this.state.phase == this.Phases.Edit) {
-            editable_el = (
-                <div>
-                    <input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} placeholder={this.props.placeHolder} autoFocus/>
-                </div>
-            );
-        }
-
-        return (
-            <div className="mx_EditableText">
-                {editable_el}
-            </div>
-        );
-    }
-});

src/skins/vector/views/atoms/EnableNotificationsButton.js

@@ -1,38 +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 EnableNotificationsButtonController = require('matrix-react-sdk/lib/controllers/atoms/EnableNotificationsButton')
-
-module.exports = React.createClass({
-    displayName: 'EnableNotificationsButton',
-    mixins: [EnableNotificationsButtonController],
-
-    render: function() {
-        if (this.enabled()) {
-            return (
-                <button className="mx_EnableNotificationsButton" onClick={this.onClick}>Disable Notifications</button>
-            );
-        } else {
-            return (
-                <button className="mx_EnableNotificationsButton" onClick={this.onClick}>Enable Notifications</button>
-            );
-        }
-    }
-});

src/skins/vector/views/atoms/LogoutButton.js

@@ -1,32 +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 LogoutButtonController = require('matrix-react-sdk/lib/controllers/atoms/LogoutButton')
-
-module.exports = React.createClass({
-    displayName: 'LogoutButton',
-    mixins: [LogoutButtonController],
-
-    render: function() {
-        return (
-            <button className="mx_LogoutButton" onClick={this.onClick}>Sign out</button>
-        );
-    }
-});

src/skins/vector/views/atoms/create_room/CreateRoomButton.js

@@ -1,32 +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 CreateRoomButtonController = require('matrix-react-sdk/lib/controllers/atoms/create_room/CreateRoomButton')
-
-module.exports = React.createClass({
-    displayName: 'CreateRoomButton',
-    mixins: [CreateRoomButtonController],
-
-    render: function() {
-        return (
-            <button className="mx_CreateRoomButton" onClick={this.onClick}>Create Room</button>
-        );
-    }
-});

src/skins/vector/views/atoms/create_room/Presets.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 PresetsController = require('matrix-react-sdk/lib/controllers/atoms/create_room/Presets')
-
-module.exports = React.createClass({
-    displayName: 'CreateRoomPresets',
-    mixins: [PresetsController],
-
-    onValueChanged: function(ev) {
-        this.props.onChange(ev.target.value)
-    },
-
-    render: function() {
-        return (
-            <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
-                <option value={this.Presets.PrivateChat}>Private Chat</option>
-                <option value={this.Presets.PublicChat}>Public Chat</option>
-                <option value={this.Presets.Custom}>Custom</option>
-            </select>
-        );
-    }
-});

src/skins/vector/views/atoms/create_room/RoomAlias.js

@@ -1,79 +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 RoomAliasController = require('matrix-react-sdk/lib/controllers/atoms/create_room/RoomAlias')
-
-module.exports = React.createClass({
-    displayName: 'RoomAlias',
-    mixins: [RoomAliasController],
-
-    onValueChanged: function(ev) {
-        this.props.onChange(ev.target.value);
-    },
-
-    onFocus: function(ev) {
-        var target = ev.target;
-        var curr_val = ev.target.value;
-
-        if (this.props.homeserver) {
-            if (curr_val == "") {
-                setTimeout(function() {
-                    target.value = "#:" + this.props.homeserver;
-                    target.setSelectionRange(1, 1);
-                }, 0);
-            } else {
-                var suffix = ":" + this.props.homeserver;
-                setTimeout(function() {
-                    target.setSelectionRange(
-                        curr_val.startsWith("#") ? 1 : 0,
-                        curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length
-                    );
-                }, 0);
-            }
-        }
-    },
-
-    onBlur: function(ev) {
-        var curr_val = ev.target.value;
-
-        if (this.props.homeserver) {
-            if (curr_val == "#:" + this.props.homeserver) {
-                ev.target.value = "";
-                return;
-            }
-
-            if (curr_val != "") {
-                var new_val = ev.target.value;
-                var suffix = ":" + this.props.homeserver;
-                if (!curr_val.startsWith("#")) new_val = "#" + new_val;
-                if (!curr_val.endsWith(suffix)) new_val = new_val + suffix;
-                ev.target.value = new_val;
-            }
-        }
-    },
-
-    render: function() {
-        return (
-            <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
-                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
-                value={this.props.alias}/>
-        );
-    }
-});

src/skins/vector/views/atoms/voip/VideoFeed.js

@@ -1,31 +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');
-
-module.exports = React.createClass({
-    displayName: 'VideoFeed',
-
-    render: function() {
-        return (
-            <video>
-            </video>
-        );
-    },
-});
-

src/skins/vector/views/molecules/ChangeAvatar.js

@@ -67,7 +67,7 @@ module.exports = React.createClass({
                     </div>
                 );
             case this.Phases.Uploading:
-                var Loader = sdk.getComponent("atoms.Spinner");
+                var Loader = sdk.getComponent("elements.Spinner");
                 return (
                     <Loader />
                 );

src/skins/vector/views/molecules/ChangeDisplayName.js

@@ -37,7 +37,7 @@ module.exports = React.createClass({
 
     render: function() {
         if (this.state.busy) {
-            var Loader = sdk.getComponent("atoms.Spinner");
+            var Loader = sdk.getComponent("elements.Spinner");
             return (
                 <Loader />
             );
@@ -46,7 +46,7 @@ module.exports = React.createClass({
                 <div className="error">{this.state.errorString}</div>
             );
         } else {
-            var EditableText = sdk.getComponent('atoms.EditableText');
+            var EditableText = sdk.getComponent('elements.EditableText');
             return (
                 <EditableText ref="displayname_edit" initialValue={this.state.displayName} label="Click to set display name." onValueChanged={this.onValueChanged}/>
             );

src/skins/vector/views/molecules/ChangePassword.js

@@ -62,7 +62,7 @@ module.exports = React.createClass({
                     </div>
                 );
             case this.Phases.Uploading:
-                var Loader = sdk.getComponent("atoms.Spinner");
+                var Loader = sdk.getComponent("elements.Spinner");
                 return (
                     <div className="mx_Dialog_content">
                         <Loader />

src/skins/vector/views/molecules/EventTile.js

@@ -209,7 +209,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
+        var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
         var SenderProfile = sdk.getComponent('molecules.SenderProfile');
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 

src/skins/vector/views/molecules/MImageTile.js

@@ -53,7 +53,7 @@ module.exports = React.createClass({
             ev.preventDefault();
             var content = this.props.mxEvent.getContent();
             var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
-            var ImageView = sdk.getComponent("atoms.ImageView");
+            var ImageView = sdk.getComponent("elements.ImageView");
             Modal.createDialog(ImageView, {
                 src: httpUrl,
                 width: content.info.w,

src/skins/vector/views/molecules/MRoomMemberTile.js

@@ -33,7 +33,7 @@ module.exports = React.createClass({
         var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
         var text = this.getMemberEventText();
         if (!text) return <div/>;
-        var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
+        var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         return (
             <div className="mx_MessageTile mx_MessageTile_notice">

src/skins/vector/views/molecules/MemberInfo.js

@@ -46,7 +46,7 @@ module.exports = React.createClass({
         }
 
         if (this.state.creatingRoom) {
-            var Loader = sdk.getComponent("atoms.Spinner");
+            var Loader = sdk.getComponent("elements.Spinner");
             spinner = <Loader imgClassName="mx_ContextualMenu_spinner"/>;
         }
 

src/skins/vector/views/molecules/RoomHeader.js

@@ -43,7 +43,7 @@ module.exports = React.createClass({
     },
     
     render: function() {
-        var EditableText = sdk.getComponent("atoms.EditableText");
+        var EditableText = sdk.getComponent("elements.EditableText");
         var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
         var header;

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('atoms.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/CreateRoom.js

@@ -22,7 +22,11 @@ var CreateRoomController = require('matrix-react-sdk/lib/controllers/organisms/C
 
 var sdk = require('matrix-react-sdk')
 
-var PresetValues = require('matrix-react-sdk/lib/controllers/atoms/create_room/Presets').Presets;
+var PresetValues = {
+    PrivateChat: "private_chat",
+    PublicChat: "public_chat",
+    Custom: "custom",
+};
 
 module.exports = React.createClass({
     displayName: 'CreateRoom',
@@ -119,7 +123,7 @@ module.exports = React.createClass({
     render: function() {
         var curr_phase = this.state.phase;
         if (curr_phase == this.phases.CREATING) {
-            var Loader = sdk.getComponent("atoms.Spinner");
+            var Loader = sdk.getComponent("elements.Spinner");
             return (
                 <Loader/>
             );
@@ -133,9 +137,9 @@ module.exports = React.createClass({
                 );
             }
 
-            var CreateRoomButton = sdk.getComponent("atoms.create_room.CreateRoomButton");
+            var CreateRoomButton = sdk.getComponent("create_room.CreateRoomButton");
-            var RoomAlias = sdk.getComponent("atoms.create_room.RoomAlias");
+            var RoomAlias = sdk.getComponent("create_room.RoomAlias");
-            var Presets = sdk.getComponent("atoms.create_room.Presets");
+            var Presets = sdk.getComponent("create_room.Presets");
             var UserSelector = sdk.getComponent("molecules.UserSelector");
             var RoomHeader = sdk.getComponent("molecules.RoomHeader");
 

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/MemberList.js

@@ -77,7 +77,7 @@ module.exports = React.createClass({
 
     inviteTile: function() {
         if (this.state.inviting) {
-            var Loader = sdk.getComponent("atoms.Spinner");
+            var Loader = sdk.getComponent("elements.Spinner");
             return (
                 <Loader />
             );

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

@@ -119,7 +119,7 @@ module.exports = React.createClass({
 
     render: function() {
         if (this.state.loading) {
-            var Loader = sdk.getComponent("atoms.Spinner");            
+            var Loader = sdk.getComponent("elements.Spinner");            
             return (
                 <div className="mx_RoomDirectory">
                     <Loader />

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");
 
@@ -130,7 +131,7 @@ module.exports = React.createClass({
         var myUserId = MatrixClientPeg.get().credentials.userId;
         if (this.state.room.currentState.members[myUserId].membership == 'invite') {
             if (this.state.joining || this.state.rejecting) {
-                var Loader = sdk.getComponent("atoms.Spinner");
+                var Loader = sdk.getComponent("elements.Spinner");
                 return (
                     <div className="mx_RoomView">
                         <Loader />
@@ -260,7 +261,7 @@ module.exports = React.createClass({
                 aux = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} room={this.state.room} />;
             }
             else if (this.state.uploadingRoomSettings) {
-                var Loader = sdk.getComponent("atoms.Spinner");                
+                var Loader = sdk.getComponent("elements.Spinner");                
                 aux = <Loader/>;
             }
             else if (this.state.searching) {
@@ -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>

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

@@ -66,13 +66,13 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var Loader = sdk.getComponent("atoms.Spinner");        
+        var Loader = sdk.getComponent("elements.Spinner");        
         switch (this.state.phase) {
             case this.Phases.Loading:
                 return <Loader />
             case this.Phases.Display:
                 var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
-                var EnableNotificationsButton = sdk.getComponent('atoms.EnableNotificationsButton');
+                var EnableNotificationsButton = sdk.getComponent('settings.EnableNotificationsButton');
                 return (
                     <div className="mx_UserSettings">
                         <div className="mx_UserSettings_User">

src/skins/vector/views/pages/MatrixChat.js

@@ -191,7 +191,7 @@ module.exports = React.createClass({
                 );
             }
         } else if (this.state.logged_in) {
-            var Spinner = sdk.getComponent('atoms.Spinner');
+            var Spinner = sdk.getComponent('elements.Spinner');
             return (
                 <div className="mx_MatrixChat_splash">
                     <Spinner />