+ position.right = props.right + 8;
+ }
+
+ var className = 'mx_ContextualMenu_wrapper';
+
+ // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
+ // property set here so you can't close the menu from a button click!
+ var menu = (
+
+ An error occured: {this.state.error_string}
+
+ );
+ }
+
+ var CreateRoomButton = sdk.getComponent("create_room.CreateRoomButton");
+ var RoomAlias = sdk.getComponent("create_room.RoomAlias");
+ var Presets = sdk.getComponent("create_room.Presets");
+ var UserSelector = sdk.getComponent("elements.UserSelector");
+ var RoomHeader = sdk.getComponent("rooms.RoomHeader");
+
+ return (
+
+
+ );
+ }
+ }
+});
diff --git a/src/controllers/pages/MatrixChat.js b/src/components/structures/MatrixChat.js
similarity index 53%
rename from src/controllers/pages/MatrixChat.js
rename to src/components/structures/MatrixChat.js
index 4990a9488a..f2424dc06e 100644
--- a/src/controllers/pages/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -13,19 +13,37 @@ 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.
*/
+var React = require('react');
+var Matrix = require("matrix-js-sdk");
+var url = require('url');
var MatrixClientPeg = require("../../MatrixClientPeg");
+var Notifier = require("../../Notifier");
+var ContextualMenu = require("../../ContextualMenu");
var RoomListSorter = require("../../RoomListSorter");
+var UserActivity = require("../../UserActivity");
var Presence = require("../../Presence");
var dis = require("../../dispatcher");
+var Login = require("./login/Login");
+var Registration = require("./login/Registration");
+var PostRegistration = require("./login/PostRegistration");
+
+var Modal = require("../../Modal");
var sdk = require('../../index');
var MatrixTools = require('../../MatrixTools');
var linkifyMatrix = require("../../linkify-matrix");
-var url = require('url');
+module.exports = React.createClass({
+ displayName: 'MatrixChat',
+
+ propTypes: {
+ config: React.PropTypes.object.isRequired,
+ ConferenceHandler: React.PropTypes.any,
+ onNewScreen: React.PropTypes.func,
+ registrationUrl: React.PropTypes.string
+ },
-module.exports = {
PageTypes: {
RoomView: "room_view",
UserSettings: "user_settings",
@@ -43,6 +61,7 @@ module.exports = {
collapse_lhs: false,
collapse_rhs: false,
ready: false,
+ width: 10000
};
if (s.logged_in) {
if (MatrixClientPeg.get().getRooms().length) {
@@ -62,6 +81,9 @@ module.exports = {
this.startMatrixClient();
}
this.focusComposer = false;
+ // scrollStateMap is a map from room id to the scroll state returned by
+ // RoomView.getScrollState()
+ this.scrollStateMap = {};
document.addEventListener("keydown", this.onKeyDown);
window.addEventListener("focus", this.onFocus);
if (this.state.logged_in) {
@@ -78,12 +100,16 @@ module.exports = {
if (this.onUserClick) {
linkifyMatrix.onUserClick = this.onUserClick;
}
+
+ window.addEventListener('resize', this.handleResize);
+ this.handleResize();
},
componentWillUnmount: function() {
dis.unregister(this.dispatcherRef);
document.removeEventListener("keydown", this.onKeyDown);
window.removeEventListener("focus", this.onFocus);
+ window.removeEventListener('resize', this.handleResize);
},
componentDidUpdate: function() {
@@ -95,7 +121,6 @@ module.exports = {
onAction: function(payload) {
var roomIndexDelta = 1;
- var Notifier = sdk.getComponent('organisms.Notifier');
var self = this;
switch (payload.action) {
@@ -104,6 +129,7 @@ module.exports = {
window.localStorage.clear();
}
Notifier.stop();
+ UserActivity.stop();
Presence.stop();
MatrixClientPeg.get().stopClient();
MatrixClientPeg.get().removeAllListeners();
@@ -142,6 +168,11 @@ module.exports = {
});
this.notifyNewScreen('login');
break;
+ case 'start_post_registration':
+ this.setState({ // don't clobber logged_in status
+ screen: 'post_registration'
+ });
+ break;
case 'token_login':
if (this.state.logged_in) return;
@@ -174,28 +205,38 @@ module.exports = {
});
break;
- case 'view_room':
- this.focusComposer = true;
- var newState = {
- currentRoom: payload.room_id,
- page_type: this.PageTypes.RoomView,
- };
- if (this.sdkReady) {
- // if the SDK is not ready yet, remember what room
- // we're supposed to be on but don't notify about
- // the new screen yet (we won't be showing it yet)
- // The normal case where this happens is navigating
- // to the room in the URL bar on page load.
- var presentedId = payload.room_id;
- var room = MatrixClientPeg.get().getRoom(payload.room_id);
- if (room) {
- var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
- if (theAlias) presentedId = theAlias;
+ case 'leave_room':
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+ var roomId = payload.room_id;
+ Modal.createDialog(QuestionDialog, {
+ title: "Leave room",
+ description: "Are you sure you want to leave the room?",
+ onFinished: function(should_leave) {
+ if (should_leave) {
+ var d = MatrixClientPeg.get().leave(roomId);
+
+ // FIXME: controller shouldn't be loading a view :(
+ var Loader = sdk.getComponent("elements.Spinner");
+ var modal = Modal.createDialog(Loader);
+
+ d.then(function() {
+ modal.close();
+ dis.dispatch({action: 'view_next_room'});
+ }, function(err) {
+ modal.close();
+ Modal.createDialog(ErrorDialog, {
+ title: "Failed to leave room",
+ description: err.toString()
+ });
+ });
+ }
}
- this.notifyNewScreen('room/'+presentedId);
- newState.ready = true;
- }
- this.setState(newState);
+ });
+ break;
+ case 'view_room':
+ this._viewRoom(payload.room_id);
break;
case 'view_prev_room':
roomIndexDelta = -1;
@@ -212,11 +253,7 @@ module.exports = {
}
roomIndex = (roomIndex + roomIndexDelta) % allRooms.length;
if (roomIndex < 0) roomIndex = allRooms.length - 1;
- this.focusComposer = true;
- this.setState({
- currentRoom: allRooms[roomIndex].roomId
- });
- this.notifyNewScreen('room/'+allRooms[roomIndex].roomId);
+ this._viewRoom(allRooms[roomIndex].roomId);
break;
case 'view_indexed_room':
var allRooms = RoomListSorter.mostRecentActivityFirst(
@@ -224,11 +261,7 @@ module.exports = {
);
var roomIndex = payload.roomIndex;
if (allRooms[roomIndex]) {
- this.focusComposer = true;
- this.setState({
- currentRoom: allRooms[roomIndex].roomId
- });
- this.notifyNewScreen('room/'+allRooms[roomIndex].roomId);
+ this._viewRoom(allRooms[roomIndex].roomId);
}
break;
case 'view_room_alias':
@@ -252,21 +285,15 @@ module.exports = {
});
break;
case 'view_user_settings':
- this.setState({
- page_type: this.PageTypes.UserSettings,
- });
+ this._setPage(this.PageTypes.UserSettings);
this.notifyNewScreen('settings');
break;
case 'view_create_room':
- this.setState({
- page_type: this.PageTypes.CreateRoom,
- });
+ this._setPage(this.PageTypes.CreateRoom);
this.notifyNewScreen('new');
break;
case 'view_room_directory':
- this.setState({
- page_type: this.PageTypes.RoomDirectory,
- });
+ this._setPage(this.PageTypes.RoomDirectory);
this.notifyNewScreen('directory');
break;
case 'notifier_enabled':
@@ -295,7 +322,64 @@ module.exports = {
}
},
- onLoggedIn: function() {
+ _setPage: function(pageType) {
+ // record the scroll state if we're in a room view.
+ this._updateScrollMap();
+
+ this.setState({
+ page_type: pageType,
+ });
+ },
+
+ _viewRoom: function(roomId) {
+ // before we switch room, record the scroll state of the current room
+ this._updateScrollMap();
+
+ this.focusComposer = true;
+ var newState = {
+ currentRoom: roomId,
+ page_type: this.PageTypes.RoomView,
+ };
+ if (this.sdkReady) {
+ // if the SDK is not ready yet, remember what room
+ // we're supposed to be on but don't notify about
+ // the new screen yet (we won't be showing it yet)
+ // The normal case where this happens is navigating
+ // to the room in the URL bar on page load.
+ var presentedId = roomId;
+ var room = MatrixClientPeg.get().getRoom(roomId);
+ if (room) {
+ var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
+ if (theAlias) presentedId = theAlias;
+ }
+ this.notifyNewScreen('room/'+presentedId);
+ newState.ready = true;
+ }
+ this.setState(newState);
+ if (this.scrollStateMap[roomId]) {
+ var scrollState = this.scrollStateMap[roomId];
+ this.refs.roomView.restoreScrollState(scrollState);
+ }
+ },
+
+ // update scrollStateMap according to the current scroll state of the
+ // room view.
+ _updateScrollMap: function() {
+ if (!this.refs.roomView) {
+ return;
+ }
+
+ var roomview = this.refs.roomView;
+ var state = roomview.getScrollState();
+ this.scrollStateMap[roomview.props.roomId] = state;
+ },
+
+ onLoggedIn: function(credentials) {
+ console.log("onLoggedIn => %s", credentials.userId);
+ MatrixClientPeg.replaceUsingAccessToken(
+ credentials.homeserverUrl, credentials.identityServerUrl,
+ credentials.userId, credentials.accessToken
+ );
this.setState({
screen: undefined,
logged_in: true
@@ -305,11 +389,14 @@ module.exports = {
},
startMatrixClient: function() {
- var Notifier = sdk.getComponent('organisms.Notifier');
var cli = MatrixClientPeg.get();
var self = this;
- cli.on('sync', function(state) {
- if (self.sdkReady || state !== "PREPARED") { return; }
+ cli.on('sync', function(state, prevState) {
+ if (state === "SYNCING" && prevState === "SYNCING") {
+ return;
+ }
+ console.log("MatrixClient sync state => %s", state);
+ if (state !== "PREPARED") { return; }
self.sdkReady = true;
if (self.starting_room_alias) {
@@ -354,8 +441,11 @@ module.exports = {
});
});
Notifier.start();
+ UserActivity.start();
Presence.start();
- cli.startClient();
+ cli.startClient({
+ pendingEventOrdering: "end"
+ });
},
onKeyDown: function(ev) {
@@ -420,6 +510,10 @@ module.exports = {
dis.dispatch({
action: 'view_room_directory',
});
+ } else if (screen == 'post_registration') {
+ dis.dispatch({
+ action: 'start_post_registration',
+ });
} else if (screen.indexOf('room/') == 0) {
var roomString = screen.split('/')[1];
if (roomString[0] == '#') {
@@ -441,11 +535,191 @@ module.exports = {
});
}
}
+ else {
+ console.error("Unknown screen : %s", screen);
+ }
},
notifyNewScreen: function(screen) {
if (this.props.onNewScreen) {
this.props.onNewScreen(screen);
}
+ },
+
+ onAliasClick: function(event, alias) {
+ event.preventDefault();
+ dis.dispatch({action: 'view_room_alias', room_alias: alias});
+ },
+
+ onUserClick: function(event, userId) {
+ event.preventDefault();
+ var MemberInfo = sdk.getComponent('rooms.MemberInfo');
+ var member = new Matrix.RoomMember(null, userId);
+ ContextualMenu.createMenu(MemberInfo, {
+ member: member,
+ right: window.innerWidth - event.pageX,
+ top: event.pageY
+ });
+ },
+
+ onLogoutClick: function(event) {
+ dis.dispatch({
+ action: 'logout'
+ });
+ event.stopPropagation();
+ event.preventDefault();
+ },
+
+ handleResize: function(e) {
+ var hideLhsThreshold = 1000;
+ var showLhsThreshold = 1000;
+ var hideRhsThreshold = 820;
+ var showRhsThreshold = 820;
+
+ if (this.state.width > hideLhsThreshold && window.innerWidth <= hideLhsThreshold) {
+ dis.dispatch({ action: 'hide_left_panel' });
+ }
+ if (this.state.width <= showLhsThreshold && window.innerWidth > showLhsThreshold) {
+ dis.dispatch({ action: 'show_left_panel' });
+ }
+ if (this.state.width > hideRhsThreshold && window.innerWidth <= hideRhsThreshold) {
+ dis.dispatch({ action: 'hide_right_panel' });
+ }
+ if (this.state.width <= showRhsThreshold && window.innerWidth > showRhsThreshold) {
+ dis.dispatch({ action: 'show_right_panel' });
+ }
+
+ this.setState({width: window.innerWidth});
+ },
+
+ onRoomCreated: function(room_id) {
+ dis.dispatch({
+ action: "view_room",
+ room_id: room_id,
+ });
+ },
+
+ onRegisterClick: function() {
+ this.showScreen("register");
+ },
+
+ onLoginClick: function() {
+ this.showScreen("login");
+ },
+
+ onRegistered: function(credentials) {
+ this.onLoggedIn(credentials);
+ // do post-registration stuff
+ this.showScreen("post_registration");
+ },
+
+ onFinishPostRegistration: function() {
+ // Don't confuse this with "PageType" which is the middle window to show
+ this.setState({
+ screen: undefined
+ });
+ this.showScreen("settings");
+ },
+
+ render: function() {
+ var LeftPanel = sdk.getComponent('structures.LeftPanel');
+ var RoomView = sdk.getComponent('structures.RoomView');
+ var RightPanel = sdk.getComponent('structures.RightPanel');
+ var UserSettings = sdk.getComponent('structures.UserSettings');
+ var CreateRoom = sdk.getComponent('structures.CreateRoom');
+ var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
+ var MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
+
+ // needs to be before normal PageTypes as you are logged in technically
+ if (this.state.screen == 'post_registration') {
+ return (
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {error_box}
+ +
+
+ );
+ }
+ else {
+ return (
+
+
+ {page_element}
+
+ {right_panel}
+
+
+
+ {page_element}
+
+ {right_panel}
+
+ );
+ }
+ } else if (this.state.logged_in) {
+ var Spinner = sdk.getComponent('elements.Spinner');
+ return (
+
+
+ );
+ } else if (this.state.screen == 'register') {
+ return (
+ Room: { cli.getRoom(roomId).name }
+
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ }
+
+ var myUserId = MatrixClientPeg.get().credentials.userId;
+ var myMember = this.state.room.getMember(myUserId);
+ if (myMember && myMember.membership == 'invite') {
+ if (this.state.joining || this.state.rejecting) {
+ var Loader = sdk.getComponent("elements.Spinner");
+ return (
+
+
+ );
+ } else {
+ var inviteEvent = myMember.events.member;
+ var inviterName = inviteEvent.sender ? inviteEvent.sender.name : inviteEvent.getSender();
+ // XXX: Leaving this intentionally basic for now because invites are about to change totally
+ var joinErrorText = this.state.joinError ? "Failed to join room!" : "";
+ var rejectErrorText = this.state.rejectError ? "Failed to reject invite!" : "";
+ return (
+
+
+ );
+ }
+ } else {
+ var scrollheader_classes = classNames({
+ mx_RoomView_scrollheader: true,
+ loading: this.state.paginating
+ });
+
+ var statusBar;
+
+ // for testing UI...
+ // this.state.upload = {
+ // uploadedBytes: 123493,
+ // totalBytes: 347534,
+ // fileName: "testing_fooble.jpg",
+ // }
+
+ if (ContentMessages.getCurrentUploads().length > 0) {
+ var UploadBar = sdk.getComponent('structures.UploadBar');
+ statusBar =
+
+ + +
+ {inviterName} has invited you to a room
+ + + +
{joinErrorText}
+ {rejectErrorText}
+
+ 
+
+ );
+ }
+ else if (this.state.hasUnsentMessages) {
+ statusBar = (
+
+
+
+
+ Connectivity to the server has been lost.
+
+
+ Sent messages will be stored until your connection has returned.
+
+
+
+
+ );
+ }
+ // unread count trumps who is typing since the unread count is only
+ // set when you've scrolled up
+ else if (unreadMsgs) {
+ statusBar = (
+
+
+
+
+ Some of your messages have not been sent.
+
+
+
+ Resend all now
+ or select individual messages to re-send.
+
+
+ 
+ {unreadMsgs}
+
+ );
+ }
+ else if (typingString) {
+ statusBar = (
+
+ {unreadMsgs}
+
+
+ );
+ }
+ }
+
+ var aux = null;
+ if (this.state.editingRoomSettings) {
+ aux = ...
+ {typingString}
+
+ Ongoing conference call {supportedText}
+
+ );
+ }
+
+ var fileDropTarget = null;
+ if (this.state.draggingFile) {
+ fileDropTarget =
+
;
+ }
+
+ var messageComposer, searchInfo;
+ if (!this.state.searchResults) {
+ messageComposer =
+
+ 
+ Drop File Here +
+ + Drop File Here +
+ 
+
+ );
+
+ videoMuteButton =
+
+
+ )
+
+ }
+ voiceMuteButton =
+
+ )
+
+
+ if (!statusBar) {
+ statusBar =
+
+ 
+ Active call
+
;
+ }
+
+ statusBar =
+
+ Active call
+
+ { voiceMuteButton }
+ { videoMuteButton }
+ { zoomButton }
+ { statusBar }
+ 
+
+ }
+
+ return (
+
+
+
+
+
+ );
+ }
+ },
+});
diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js
new file mode 100644
index 0000000000..717c7f57b2
--- /dev/null
+++ b/src/components/structures/UploadBar.js
@@ -0,0 +1,93 @@
+/*
+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.
+*/
+
+var React = require('react');
+var ContentMessages = require('../../ContentMessages');
+var dis = require('../../dispatcher');
+var filesize = require('filesize');
+
+module.exports = React.createClass({displayName: 'UploadBar',
+ propTypes: {
+ room: React.PropTypes.object
+ },
+
+ componentDidMount: function() {
+ dis.register(this.onAction);
+ this.mounted = true;
+ },
+
+ componentWillUnmount: function() {
+ this.mounted = false;
+ },
+
+ onAction: function(payload) {
+ switch (payload.action) {
+ case 'upload_progress':
+ case 'upload_finished':
+ case 'upload_failed':
+ if (this.mounted) this.forceUpdate();
+ break;
+ }
+ },
+
+ render: function() {
+ var uploads = ContentMessages.getCurrentUploads();
+ if (uploads.length == 0) {
+ return
+ }
+
+ var upload;
+ for (var i = 0; i < uploads.length; ++i) {
+ if (uploads[i].roomId == this.props.room.roomId) {
+ upload = uploads[i];
+ break;
+ }
+ }
+ if (!upload) {
+ upload = uploads[0];
+ }
+
+ var innerProgressStyle = {
+ width: ((upload.loaded / (upload.total || 1)) * 100) + '%'
+ };
+ var uploadedSize = filesize(upload.loaded);
+ var totalSize = filesize(upload.total);
+ if (uploadedSize.replace(/^.* /,'') === totalSize.replace(/^.* /,'')) {
+ uploadedSize = uploadedSize.replace(/ .*/, '');
+ }
+
+ var others;
+ if (uploads.length > 1) {
+ others = 'and '+(uploads.length - 1) + ' other' + (uploads.length > 2 ? 's' : '');
+ }
+
+ return (
+
+
+ { conferenceCallNotification }
+ { aux }
+
+
+
+ -
+
- + + {this.getEventTiles()} +
+
+ { messageComposer }
+
+
+ { statusBar }
+
+
+ 
+ 
+
+ );
+ }
+});
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
new file mode 100644
index 0000000000..59187bb69f
--- /dev/null
+++ b/src/components/structures/UserSettings.js
@@ -0,0 +1,162 @@
+/*
+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.
+*/
+var React = require('react');
+var sdk = require('../../index');
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var Modal = require('../../Modal');
+var q = require('q');
+var version = require('../../../package.json').version;
+
+module.exports = React.createClass({
+ displayName: 'UserSettings',
+ Phases: {
+ Loading: "loading",
+ Display: "display",
+ },
+
+ getInitialState: function() {
+ return {
+ avatarUrl: null,
+ threePids: [],
+ clientVersion: version,
+ phase: this.Phases.Loading,
+ };
+ },
+
+ componentWillMount: function() {
+ var self = this;
+ var cli = MatrixClientPeg.get();
+
+ var profile_d = cli.getProfileInfo(cli.credentials.userId);
+ var threepid_d = cli.getThreePids();
+
+ q.all([profile_d, threepid_d]).then(
+ function(resps) {
+ self.setState({
+ avatarUrl: resps[0].avatar_url,
+ threepids: resps[1].threepids,
+ phase: self.Phases.Display,
+ });
+ },
+ function(err) { console.err(err); }
+ );
+ },
+
+ editAvatar: function() {
+ var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
+ var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+ var avatarDialog = (
+
+
+
+
+
+
+ { uploadedSize } / { totalSize }
+
+ Uploading {upload.fileName}{others}
+
+
+ );
+ this.avatarDialog = Modal.createDialogWithElement(avatarDialog);
+ },
+
+ addEmail: function() {
+
+ },
+
+ editDisplayName: function() {
+ this.refs.displayname.edit();
+ },
+
+ changePassword: function() {
+ var ChangePassword = sdk.getComponent('settings.ChangePassword');
+ Modal.createDialog(ChangePassword);
+ },
+
+ onLogoutClicked: function(ev) {
+ var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
+ this.logoutModal = Modal.createDialog(LogoutPrompt, {onCancel: this.onLogoutPromptCancel});
+ },
+
+ onLogoutPromptCancel: function() {
+ this.logoutModal.closeDialog();
+ },
+
+ onAvatarDialogCancel: function() {
+ this.avatarDialog.close();
+ },
+
+ render: function() {
+ var Loader = sdk.getComponent("elements.Spinner");
+ if (this.state.phase === this.Phases.Loading) {
+ return
+
+
+
+
+ );
+ }
+ }
+});
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
new file mode 100644
index 0000000000..54cd9e3efb
--- /dev/null
+++ b/src/components/structures/login/Login.js
@@ -0,0 +1,194 @@
+/*
+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('../../../index');
+var Signup = require("../../../Signup");
+var PasswordLogin = require("../../views/login/PasswordLogin");
+var CasLogin = require("../../views/login/CasLogin");
+var ServerConfig = require("../../views/login/ServerConfig");
+
+/**
+ * A wire component which glues together login UI components and Signup logic
+ */
+module.exports = React.createClass({displayName: 'Login',
+ propTypes: {
+ onLoggedIn: React.PropTypes.func.isRequired,
+ homeserverUrl: React.PropTypes.string,
+ identityServerUrl: React.PropTypes.string,
+ // login shouldn't know or care how registration is done.
+ onRegisterClick: React.PropTypes.func.isRequired
+ },
+
+ getDefaultProps: function() {
+ return {
+ homeserverUrl: 'https://matrix.org/',
+ identityServerUrl: 'https://matrix.org'
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ busy: false,
+ errorText: null,
+ enteredHomeserverUrl: this.props.homeserverUrl,
+ enteredIdentityServerUrl: this.props.identityServerUrl
+ };
+ },
+
+ componentWillMount: function() {
+ this._initLoginLogic();
+ },
+
+ onPasswordLogin: function(username, password) {
+ var self = this;
+ self.setState({
+ busy: true
+ });
+
+ this._loginLogic.loginViaPassword(username, password).then(function(data) {
+ self.props.onLoggedIn(data);
+ }, function(error) {
+ self._setErrorTextFromError(error);
+ }).finally(function() {
+ self.setState({
+ busy: false
+ });
+ });
+ },
+
+ onHsUrlChanged: function(newHsUrl) {
+ this._initLoginLogic(newHsUrl);
+ },
+
+ onIsUrlChanged: function(newIsUrl) {
+ this._initLoginLogic(null, newIsUrl);
+ },
+
+ _initLoginLogic: function(hsUrl, isUrl) {
+ var self = this;
+ hsUrl = hsUrl || this.state.enteredHomeserverUrl;
+ isUrl = isUrl || this.state.enteredIdentityServerUrl;
+
+ var loginLogic = new Signup.Login(hsUrl, isUrl);
+ this._loginLogic = loginLogic;
+
+ loginLogic.getFlows().then(function(flows) {
+ // old behaviour was to always use the first flow without presenting
+ // options. This works in most cases (we don't have a UI for multiple
+ // logins so let's skip that for now).
+ loginLogic.chooseFlow(0);
+ }, function(err) {
+ self._setErrorTextFromError(err);
+ }).finally(function() {
+ self.setState({
+ busy: false
+ });
+ });
+
+ this.setState({
+ enteredHomeserverUrl: hsUrl,
+ enteredIdentityServerUrl: isUrl,
+ busy: true,
+ errorText: null // reset err messages
+ });
+ },
+
+ _getCurrentFlowStep: function() {
+ return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null
+ },
+
+ _setErrorTextFromError: function(err) {
+ if (err.friendlyText) {
+ this.setState({
+ errorText: err.friendlyText
+ });
+ return;
+ }
+
+ var errCode = err.errcode;
+ if (!errCode && err.httpStatus) {
+ errCode = "HTTP " + err.httpStatus;
+ }
+ this.setState({
+ errorText: (
+ "Error: Problem communicating with the given homeserver " +
+ (errCode ? "(" + errCode + ")" : "")
+ )
+ });
+ },
+
+ componentForStep: function(step) {
+ switch (step) {
+ case 'm.login.password':
+ return (
+
+
+
+
+ User Settings
++
+
+
+
+
+
+ Profile Photo
+
+
+ Edit
+
+
+
+
+
+ Edit
+
+
+ {this.state.threepids.map(function(val) {
+ return
+
+ {val.address}
;
+ })}
+
+ Add email
+
+
+
+
+ Global Settings
++
+
+
+ Change Password
+
+
+ Version {this.state.clientVersion}
+
+
+
+
+
+
+
+ Sorry, this homeserver is using a login which is not
+ recognised ({step})
+
+ );
+ }
+ },
+
+ render: function() {
+ var Loader = sdk.getComponent("elements.Spinner");
+ var LoginHeader = sdk.getComponent("login.LoginHeader");
+ var LoginFooter = sdk.getComponent("login.LoginFooter");
+ var loader = this.state.busy ?
+
+ );
+ }
+});
diff --git a/src/components/structures/login/PostRegistration.js b/src/components/structures/login/PostRegistration.js
new file mode 100644
index 0000000000..51625a5971
--- /dev/null
+++ b/src/components/structures/login/PostRegistration.js
@@ -0,0 +1,79 @@
+/*
+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('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+module.exports = React.createClass({
+ displayName: 'PostRegistration',
+
+ propTypes: {
+ onComplete: React.PropTypes.func.isRequired
+ },
+
+ getInitialState: function() {
+ return {
+ avatarUrl: null,
+ errorString: null,
+ busy: false
+ };
+ },
+
+ componentWillMount: function() {
+ // There is some assymetry between ChangeDisplayName and ChangeAvatar,
+ // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
+ // the URL to be passed to you (because it's also used for room avatars).
+ var cli = MatrixClientPeg.get();
+ this.setState({busy: true});
+ var self = this;
+ cli.getProfileInfo(cli.credentials.userId).done(function(result) {
+ self.setState({
+ avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
+ busy: false
+ });
+ }, function(error) {
+ self.setState({
+ errorString: "Failed to fetch avatar URL",
+ busy: false
+ });
+ });
+ },
+
+ render: function() {
+ var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
+ var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+ var LoginHeader = sdk.getComponent('login.LoginHeader');
+ return (
+
+
+
+
+
+
+ Sign in
+ { this.componentForStep(this._getCurrentFlowStep()) } +
+ { loader }
+ { this.state.errorText }
+
+
+ Create a new account
+
+ +
+
+ );
+ }
+});
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
new file mode 100644
index 0000000000..1570641556
--- /dev/null
+++ b/src/components/structures/login/Registration.js
@@ -0,0 +1,247 @@
+/*
+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('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var dis = require('../../../dispatcher');
+var Signup = require("../../../Signup");
+var ServerConfig = require("../../views/login/ServerConfig");
+var RegistrationForm = require("../../views/login/RegistrationForm");
+var CaptchaForm = require("../../views/login/CaptchaForm");
+
+var MIN_PASSWORD_LENGTH = 6;
+
+module.exports = React.createClass({
+ displayName: 'Registration',
+
+ propTypes: {
+ onLoggedIn: React.PropTypes.func.isRequired,
+ clientSecret: React.PropTypes.string,
+ sessionId: React.PropTypes.string,
+ registrationUrl: React.PropTypes.string,
+ idSid: React.PropTypes.string,
+ hsUrl: React.PropTypes.string,
+ isUrl: React.PropTypes.string,
+ // registration shouldn't know or care how login is done.
+ onLoginClick: React.PropTypes.func.isRequired
+ },
+
+ getInitialState: function() {
+ return {
+ busy: false,
+ errorText: null,
+ enteredHomeserverUrl: this.props.hsUrl,
+ enteredIdentityServerUrl: this.props.isUrl
+ };
+ },
+
+ componentWillMount: function() {
+ this.dispatcherRef = dis.register(this.onAction);
+ // attach this to the instance rather than this.state since it isn't UI
+ this.registerLogic = new Signup.Register(
+ this.props.hsUrl, this.props.isUrl
+ );
+ this.registerLogic.setClientSecret(this.props.clientSecret);
+ this.registerLogic.setSessionId(this.props.sessionId);
+ this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
+ this.registerLogic.setIdSid(this.props.idSid);
+ this.registerLogic.recheckState();
+ },
+
+ componentWillUnmount: function() {
+ dis.unregister(this.dispatcherRef);
+ },
+
+ componentDidMount: function() {
+ // may have already done an HTTP hit (e.g. redirect from an email) so
+ // check for any pending response
+ var promise = this.registerLogic.getPromise();
+ if (promise) {
+ this.onProcessingRegistration(promise);
+ }
+ },
+
+ onHsUrlChanged: function(newHsUrl) {
+ this.registerLogic.setHomeserverUrl(newHsUrl);
+ },
+
+ onIsUrlChanged: function(newIsUrl) {
+ this.registerLogic.setIdentityServerUrl(newIsUrl);
+ },
+
+ onAction: function(payload) {
+ if (payload.action !== "registration_step_update") {
+ return;
+ }
+ this.forceUpdate(); // registration state has changed.
+ },
+
+ onFormSubmit: function(formVals) {
+ var self = this;
+ this.setState({
+ errorText: "",
+ busy: true
+ });
+ this.onProcessingRegistration(this.registerLogic.register(formVals));
+ },
+
+ // Promise is resolved when the registration process is FULLY COMPLETE
+ onProcessingRegistration: function(promise) {
+ var self = this;
+ promise.done(function(response) {
+ if (!response || !response.access_token) {
+ console.warn(
+ "FIXME: Register fulfilled without a final response, " +
+ "did you break the promise chain?"
+ );
+ // no matter, we'll grab it direct
+ response = self.registerLogic.getCredentials();
+ }
+ if (!response || !response.user_id || !response.access_token) {
+ console.error("Final response is missing keys.");
+ self.setState({
+ errorText: "There was a problem processing the response."
+ });
+ return;
+ }
+ self.props.onLoggedIn({
+ userId: response.user_id,
+ homeserverUrl: self.registerLogic.getHomeserverUrl(),
+ identityServerUrl: self.registerLogic.getIdentityServerUrl(),
+ accessToken: response.access_token
+ });
+ self.setState({
+ busy: false
+ });
+ }, function(err) {
+ if (err.message) {
+ self.setState({
+ errorText: err.message
+ });
+ }
+ self.setState({
+ busy: false
+ });
+ console.log(err);
+ });
+ },
+
+ onFormValidationFailed: function(errCode) {
+ var errMsg;
+ switch (errCode) {
+ case "RegistrationForm.ERR_PASSWORD_MISSING":
+ errMsg = "Missing password.";
+ break;
+ case "RegistrationForm.ERR_PASSWORD_MISMATCH":
+ errMsg = "Passwords don't match.";
+ break;
+ case "RegistrationForm.ERR_PASSWORD_LENGTH":
+ errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
+ break;
+ default:
+ console.error("Unknown error code: %s", errCode);
+ errMsg = "An unknown error occurred.";
+ break;
+ }
+ this.setState({
+ errorText: errMsg
+ });
+ },
+
+ onCaptchaLoaded: function(divIdName) {
+ this.registerLogic.tellStage("m.login.recaptcha", {
+ divId: divIdName
+ });
+ this.setState({
+ busy: false // requires user input
+ });
+ },
+
+ _getRegisterContentJsx: function() {
+ var currStep = this.registerLogic.getStep();
+ var registerStep;
+ switch (currStep) {
+ case "Register.COMPLETE":
+ break; // NOP
+ case "Register.START":
+ case "Register.STEP_m.login.dummy":
+ registerStep = (
+
+
+
+ Set a display name:
+
+
+ Please check your email to continue registration.
+
+ );
+ break;
+ case "Register.STEP_m.login.recaptcha":
+ registerStep = (
+
+
+ );
+ },
+
+ render: function() {
+ var LoginHeader = sdk.getComponent('login.LoginHeader');
+ return (
+ Create an account
+ {registerStep} +{this.state.errorText}
+ {busySpinner}
+
+
+ );
+ }
+});
diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js
new file mode 100644
index 0000000000..42c2f6ca2d
--- /dev/null
+++ b/src/components/views/avatars/MemberAvatar.js
@@ -0,0 +1,112 @@
+/*
+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 Avatar = require('../../../Avatar');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+module.exports = React.createClass({
+ displayName: 'MemberAvatar',
+
+ propTypes: {
+ member: React.PropTypes.object.isRequired,
+ width: React.PropTypes.number,
+ height: React.PropTypes.number,
+ resizeMethod: React.PropTypes.string,
+ },
+
+ getDefaultProps: function() {
+ return {
+ width: 40,
+ height: 40,
+ resizeMethod: 'crop'
+ }
+ },
+
+ componentWillReceiveProps: function(nextProps) {
+ this.refreshUrl();
+ },
+
+ defaultAvatarUrl: function(member, width, height, resizeMethod) {
+ return Avatar.defaultAvatarUrlForString(member.userId);
+ },
+
+ onError: function(ev) {
+ // don't tightloop if the browser can't load a data url
+ if (ev.target.src == this.defaultAvatarUrl(this.props.member)) {
+ return;
+ }
+ this.setState({
+ imageUrl: this.defaultAvatarUrl(this.props.member)
+ });
+ },
+
+ _computeUrl: function() {
+ return Avatar.avatarUrlForMember(this.props.member,
+ this.props.width,
+ this.props.height,
+ this.props.resizeMethod);
+ },
+
+ refreshUrl: function() {
+ var newUrl = this._computeUrl();
+ if (newUrl != this.currentUrl) {
+ this.currentUrl = newUrl;
+ this.setState({imageUrl: newUrl});
+ }
+ },
+
+ getInitialState: function() {
+ return {
+ imageUrl: this._computeUrl()
+ };
+ },
+
+
+ ///////////////
+
+ render: function() {
+ // XXX: recalculates default avatar url constantly
+ if (this.state.imageUrl === this.defaultAvatarUrl(this.props.member)) {
+ var initial;
+ if (this.props.member.name[0])
+ initial = this.props.member.name[0].toUpperCase();
+ if (initial === '@' && this.props.member.name[1])
+ initial = this.props.member.name[1].toUpperCase();
+
+ return (
+
+
+
+
+
+
+ );
+ }
+});
diff --git a/src/components/views/dialogs/LogoutPrompt.js b/src/components/views/dialogs/LogoutPrompt.js
new file mode 100644
index 0000000000..ed58542a66
--- /dev/null
+++ b/src/components/views/dialogs/LogoutPrompt.js
@@ -0,0 +1,48 @@
+/*
+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.
+*/
+var React = require('react');
+var dis = require("../../../dispatcher");
+
+module.exports = React.createClass({
+ displayName: 'LogoutPrompt',
+ logOut: function() {
+ dis.dispatch({action: 'logout'});
+ if (this.props.onFinished) {
+ this.props.onFinished();
+ }
+ },
+
+ cancelPrompt: function() {
+ if (this.props.onFinished) {
+ this.props.onFinished();
+ }
+ },
+
+ render: function() {
+ return (
+
+ {this.props.title}
+
+
+ {this.props.description}
+
+
+
+
+
+
+ );
+ }
+});
+
diff --git a/src/controllers/organisms/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
similarity index 52%
rename from src/controllers/organisms/QuestionDialog.js
rename to src/components/views/dialogs/QuestionDialog.js
index 30891b839d..34f1483cee 100644
--- a/src/controllers/organisms/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -16,7 +16,8 @@ limitations under the License.
var React = require("react");
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'QuestionDialog',
propTypes: {
title: React.PropTypes.string,
description: React.PropTypes.string,
@@ -33,4 +34,34 @@ module.exports = {
focus: true,
};
},
-};
+
+ onOk: function() {
+ this.props.onFinished(true);
+ },
+
+ onCancel: function() {
+ this.props.onFinished(false);
+ },
+
+ render: function() {
+ return (
+
+ Sign out?
+
+
+
+
+
+
+
+ );
+ }
+});
diff --git a/src/controllers/atoms/EditableText.js b/src/components/views/elements/EditableText.js
similarity index 58%
rename from src/controllers/atoms/EditableText.js
rename to src/components/views/elements/EditableText.js
index 5ea4ce8c4a..0ed443fbae 100644
--- a/src/controllers/atoms/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -18,7 +18,8 @@ limitations under the License.
var React = require('react');
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'EditableText',
propTypes: {
onValueChanged: React.PropTypes.func,
initialValue: React.PropTypes.string,
@@ -85,4 +86,54 @@ module.exports = {
onValueChanged: function(shouldSubmit) {
this.props.onValueChanged(this.state.value, shouldSubmit);
},
-};
+
+ 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 =
+ {this.props.title}
+
+
+ {this.props.description}
+
+
+
+
+
+
+ {this.state.value}
;
+ } else {
+ editable_el = {this.props.label}
;
+ }
+ } else if (this.state.phase == this.Phases.Edit) {
+ editable_el = (
+
+
+
+ );
+ }
+
+ return (
+
+ {editable_el}
+
+ );
+ }
+});
diff --git a/src/components/views/elements/ProgressBar.js b/src/components/views/elements/ProgressBar.js
new file mode 100644
index 0000000000..bab6a701dd
--- /dev/null
+++ b/src/components/views/elements/ProgressBar.js
@@ -0,0 +1,38 @@
+/*
+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: 'ProgressBar',
+ propTypes: {
+ value: React.PropTypes.number,
+ max: React.PropTypes.number
+ },
+
+ render: function() {
+ // Would use an HTML5 progress tag but if that doesn't animate if you
+ // use the HTML attributes rather than styles
+ var progressStyle = {
+ width: ((this.props.value / this.props.max) * 100)+"%"
+ };
+ return (
+
+ );
+ }
+});
\ No newline at end of file
diff --git a/src/controllers/molecules/UserSelector.js b/src/components/views/elements/UserSelector.js
similarity index 56%
rename from src/controllers/molecules/UserSelector.js
rename to src/components/views/elements/UserSelector.js
index 67a56163fa..ea04de59a9 100644
--- a/src/controllers/molecules/UserSelector.js
+++ b/src/components/views/elements/UserSelector.js
@@ -18,7 +18,9 @@ limitations under the License.
var React = require('react');
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'UserSelector',
+
propTypes: {
onChange: React.PropTypes.func,
selected_users: React.PropTypes.arrayOf(React.PropTypes.string),
@@ -42,4 +44,26 @@ module.exports = {
return e != user_id;
}));
},
-};
+
+ onAddUserId: function() {
+ this.addUser(this.refs.user_id_input.value);
+ this.refs.user_id_input.value = "";
+ },
+
+ render: function() {
+ var self = this;
+ return (
+
+
+ );
+ }
+});
diff --git a/src/components/views/login/CaptchaForm.js b/src/components/views/login/CaptchaForm.js
new file mode 100644
index 0000000000..9b722f463b
--- /dev/null
+++ b/src/components/views/login/CaptchaForm.js
@@ -0,0 +1,67 @@
+/*
+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 DIV_ID = 'mx_recaptcha';
+
+/**
+ * A pure UI component which displays a captcha form.
+ */
+module.exports = React.createClass({
+ displayName: 'CaptchaForm',
+
+ propTypes: {
+ onCaptchaLoaded: React.PropTypes.func.isRequired // called with div id name
+ },
+
+ getDefaultProps: function() {
+ return {
+ onCaptchaLoaded: function() {
+ console.error("Unhandled onCaptchaLoaded");
+ }
+ };
+ },
+
+ componentDidMount: function() {
+ // Just putting a script tag into the returned jsx doesn't work, annoyingly,
+ // so we do this instead.
+ var self = this;
+ if (this.refs.recaptchaContainer) {
+ console.log("Loading recaptcha script...");
+ var scriptTag = document.createElement('script');
+ window.mx_on_recaptcha_loaded = function() {
+ console.log("Loaded recaptcha script.");
+ self.props.onCaptchaLoaded(DIV_ID);
+ };
+ scriptTag.setAttribute(
+ 'src', global.location.protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
+ );
+ this.refs.recaptchaContainer.appendChild(scriptTag);
+ }
+ },
+
+ render: function() {
+ // FIXME: Tight coupling with the div id and SignupStages.js
+ return (
+ -
+ {this.props.selected_users.map(function(user_id, i) {
+ return
- {user_id} - X + })} +
+ This Home Server would like to make sure you are not a robot
+
+
+ );
+ }
+});
\ No newline at end of file
diff --git a/src/controllers/organisms/CasLogin.js b/src/components/views/login/CasLogin.js
similarity index 75%
rename from src/controllers/organisms/CasLogin.js
rename to src/components/views/login/CasLogin.js
index d84306e587..9380db9788 100644
--- a/src/controllers/organisms/CasLogin.js
+++ b/src/components/views/login/CasLogin.js
@@ -16,10 +16,12 @@ limitations under the License.
'use strict';
-var MatrixClientPeg = require("../../MatrixClientPeg");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var React = require('react');
var url = require("url");
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'CasLogin',
onCasClicked: function(ev) {
var cli = MatrixClientPeg.get();
@@ -30,4 +32,12 @@ module.exports = {
window.location.href = casUrl;
},
-};
+ render: function() {
+ return (
+
+
+
+ );
+ }
+
+});
diff --git a/src/components/views/login/CustomServerDialog.js b/src/components/views/login/CustomServerDialog.js
new file mode 100644
index 0000000000..3f86bc199c
--- /dev/null
+++ b/src/components/views/login/CustomServerDialog.js
@@ -0,0 +1,50 @@
+/*
+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.
+*/
+
+var React = require("react");
+
+module.exports = React.createClass({
+ displayName: 'CustomServerDialog',
+
+ render: function() {
+ return (
+
+
+ );
+ }
+});
diff --git a/src/controllers/molecules/MTextTile.js b/src/components/views/login/LoginFooter.js
similarity index 66%
rename from src/controllers/molecules/MTextTile.js
rename to src/components/views/login/LoginFooter.js
index d32d8ae911..d486b3597e 100644
--- a/src/controllers/molecules/MTextTile.js
+++ b/src/components/views/login/LoginFooter.js
@@ -16,15 +16,16 @@ limitations under the License.
'use strict';
-var linkify = require('linkifyjs');
-var linkifyElement = require('linkifyjs/element');
-var linkifyMatrix = require('../../linkify-matrix');
+var React = require('react');
-linkifyMatrix(linkify);
+module.exports = React.createClass({
+ displayName: 'LoginFooter',
-module.exports = {
- componentDidMount: function() {
- linkifyElement(this.refs.content, linkifyMatrix.options);
+ render: function() {
+ return (
+
+ );
}
-};
-
+});
diff --git a/src/controllers/molecules/RoomSettings.js b/src/components/views/login/LoginHeader.js
similarity index 72%
rename from src/controllers/molecules/RoomSettings.js
rename to src/components/views/login/LoginHeader.js
index 3c0682d09a..c64016413b 100644
--- a/src/controllers/molecules/RoomSettings.js
+++ b/src/components/views/login/LoginHeader.js
@@ -14,16 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+'use strict';
+
var React = require('react');
-module.exports = {
- propTypes: {
- room: React.PropTypes.object.isRequired,
- },
+module.exports = React.createClass({
+ displayName: 'LoginHeader',
- getInitialState: function() {
- return {
- power_levels_changed: false
- };
+ render: function() {
+ return (
+
+ Custom Server Options
+
+
+
+ You can use the custom server options to log into other Matrix
+ servers by specifying a different Home server URL.
+
+ This allows you to use this app with an existing Matrix account on + a different Home server. +
+
+ You can also set a custom Identity server but this will affect + people's ability to find you if you use a server in a group other + than the main Matrix.org group. + +
+ + This allows you to use this app with an existing Matrix account on + a different Home server. +
+
+ You can also set a custom Identity server but this will affect + people's ability to find you if you use a server in a group other + than the main Matrix.org group. + +
+
+
+
+ Matrix
+
+ );
}
-};
+});
diff --git a/src/components/views/login/PasswordLogin.js b/src/components/views/login/PasswordLogin.js
new file mode 100644
index 0000000000..baaf3236d6
--- /dev/null
+++ b/src/components/views/login/PasswordLogin.js
@@ -0,0 +1,65 @@
+/*
+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.
+*/
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+/**
+ * A pure UI component which displays a username/password form.
+ */
+module.exports = React.createClass({displayName: 'PasswordLogin',
+ propTypes: {
+ onSubmit: React.PropTypes.func.isRequired // fn(username, password)
+ },
+
+ getInitialState: function() {
+ return {
+ username: "",
+ password: ""
+ };
+ },
+
+ onSubmitForm: function(ev) {
+ ev.preventDefault();
+ this.props.onSubmit(this.state.username, this.state.password);
+ },
+
+ onUsernameChanged: function(ev) {
+ this.setState({username: ev.target.value});
+ },
+
+ onPasswordChanged: function(ev) {
+ this.setState({password: ev.target.value});
+ },
+
+ render: function() {
+ return (
+
+
+
+ );
+ }
+});
\ No newline at end of file
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
new file mode 100644
index 0000000000..5c4887955b
--- /dev/null
+++ b/src/components/views/login/RegistrationForm.js
@@ -0,0 +1,126 @@
+/*
+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('../../../index');
+
+/**
+ * A pure UI component which displays a registration form.
+ */
+module.exports = React.createClass({
+ displayName: 'RegistrationForm',
+
+ propTypes: {
+ defaultEmail: React.PropTypes.string,
+ defaultUsername: React.PropTypes.string,
+ showEmail: React.PropTypes.bool,
+ minPasswordLength: React.PropTypes.number,
+ onError: React.PropTypes.func,
+ onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
+ },
+
+ getDefaultProps: function() {
+ return {
+ showEmail: false,
+ minPasswordLength: 6,
+ onError: function(e) {
+ console.error(e);
+ }
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ email: this.props.defaultEmail,
+ username: this.props.defaultUsername,
+ password: null,
+ passwordConfirm: null
+ };
+ },
+
+ onSubmit: function(ev) {
+ ev.preventDefault();
+
+ var pwd1 = this.refs.password.value.trim();
+ var pwd2 = this.refs.passwordConfirm.value.trim()
+
+ var errCode;
+ if (!pwd1 || !pwd2) {
+ errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
+ }
+ else if (pwd1 !== pwd2) {
+ errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
+ }
+ else if (pwd1.length < this.props.minPasswordLength) {
+ errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
+ }
+ if (errCode) {
+ this.props.onError(errCode);
+ return;
+ }
+
+ var promise = this.props.onRegisterClick({
+ username: this.refs.username.value.trim(),
+ password: pwd1,
+ email: this.refs.email.value.trim()
+ });
+
+ if (promise) {
+ ev.target.disabled = true;
+ promise.finally(function() {
+ ev.target.disabled = false;
+ });
+ }
+ },
+
+ render: function() {
+ var emailSection, registerButton;
+ if (this.props.showEmail) {
+ emailSection = (
+
+ );
+ }
+ if (this.props.onRegisterClick) {
+ registerButton = (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+ }
+});
diff --git a/src/components/views/login/ServerConfig.js b/src/components/views/login/ServerConfig.js
new file mode 100644
index 0000000000..54430c7520
--- /dev/null
+++ b/src/components/views/login/ServerConfig.js
@@ -0,0 +1,145 @@
+/*
+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 Modal = require('../../../Modal');
+var sdk = require('../../../index');
+
+/**
+ * A pure UI component which displays the HS and IS to use.
+ */
+module.exports = React.createClass({
+ displayName: 'ServerConfig',
+
+ propTypes: {
+ onHsUrlChanged: React.PropTypes.func,
+ onIsUrlChanged: React.PropTypes.func,
+ defaultHsUrl: React.PropTypes.string,
+ defaultIsUrl: React.PropTypes.string,
+ withToggleButton: React.PropTypes.bool,
+ delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
+ },
+
+ getDefaultProps: function() {
+ return {
+ onHsUrlChanged: function() {},
+ onIsUrlChanged: function() {},
+ withToggleButton: false,
+ delayTimeMs: 0
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ hs_url: this.props.defaultHsUrl,
+ is_url: this.props.defaultIsUrl,
+ original_hs_url: this.props.defaultHsUrl,
+ original_is_url: this.props.defaultIsUrl,
+ // no toggle button = show, toggle button = hide
+ configVisible: !this.props.withToggleButton
+ }
+ },
+
+ onHomeserverChanged: function(ev) {
+ this.setState({hs_url: ev.target.value}, function() {
+ this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
+ this.props.onHsUrlChanged(this.state.hs_url);
+ });
+ });
+ },
+
+ onIdentityServerChanged: function(ev) {
+ this.setState({is_url: ev.target.value}, function() {
+ this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
+ this.props.onIsUrlChanged(this.state.is_url);
+ });
+ });
+ },
+
+ _waitThenInvoke: function(existingTimeoutId, fn) {
+ if (existingTimeoutId) {
+ clearTimeout(existingTimeoutId);
+ }
+ return setTimeout(fn.bind(this), this.props.delayTimeMs);
+ },
+
+ getHsUrl: function() {
+ return this.state.hs_url;
+ },
+
+ getIsUrl: function() {
+ return this.state.is_url;
+ },
+
+ onServerConfigVisibleChange: function(ev) {
+ this.setState({
+ configVisible: ev.target.checked
+ });
+ },
+
+ showHelpPopup: function() {
+ var CustomServerDialog = sdk.getComponent('login.CustomServerDialog');
+ Modal.createDialog(CustomServerDialog);
+ },
+
+ render: function() {
+ var serverConfigStyle = {};
+ serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
+
+ var toggleButton;
+ if (this.props.withToggleButton) {
+ toggleButton = (
+
+
+
+
+ );
+ }
+
+ return (
+
+ {toggleButton}
+
+ );
+ }
+});
diff --git a/src/controllers/molecules/MFileTile.js b/src/components/views/messages/MFileBody.js
similarity index 55%
rename from src/controllers/molecules/MFileTile.js
rename to src/components/views/messages/MFileBody.js
index 13b2e41ca5..be7f2f0593 100644
--- a/src/controllers/molecules/MFileTile.js
+++ b/src/components/views/messages/MFileBody.js
@@ -16,9 +16,13 @@ limitations under the License.
'use strict';
+var React = require('react');
var filesize = require('filesize');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+module.exports = React.createClass({
+ displayName: 'MFileBody',
-module.exports = {
presentableTextForFile: function(content) {
var linkText = 'Attachment';
if (content.body && content.body.length > 0) {
@@ -39,6 +43,31 @@ module.exports = {
linkText += ' (' + additionals.join(', ') + ')';
}
return linkText;
- }
-};
+ },
+ render: function() {
+ var content = this.props.mxEvent.getContent();
+ var cli = MatrixClientPeg.get();
+
+ var httpUrl = cli.mxcUrlToHttp(content.url);
+ var text = this.presentableTextForFile(content);
+
+ if (httpUrl) {
+ return (
+
+
+
+ );
+ } else {
+ var extra = text ? ': '+text : '';
+ return
+ Invalid file{extra}
+
+ }
+ },
+});
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
new file mode 100644
index 0000000000..02ac50ca15
--- /dev/null
+++ b/src/components/views/messages/MImageBody.js
@@ -0,0 +1,141 @@
+/*
+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 filesize = require('filesize');
+
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var Modal = require('../../../Modal');
+var sdk = require('../../../index');
+
+module.exports = React.createClass({
+ displayName: 'MImageBody',
+
+ thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
+ if (!fullWidth || !fullHeight) {
+ // Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
+ // log this because it's spammy
+ return undefined;
+ }
+ if (fullWidth < thumbWidth && fullHeight < thumbHeight) {
+ // no scaling needs to be applied
+ return fullHeight;
+ }
+ var widthMulti = thumbWidth / fullWidth;
+ var heightMulti = thumbHeight / fullHeight;
+ if (widthMulti < heightMulti) {
+ // width is the dominant dimension so scaling will be fixed on that
+ return Math.floor(widthMulti * fullHeight);
+ }
+ else {
+ // height is the dominant dimension so scaling will be fixed on that
+ return Math.floor(heightMulti * fullHeight);
+ }
+ },
+
+ onClick: function onClick(ev) {
+ if (ev.button == 0 && !ev.metaKey) {
+ ev.preventDefault();
+ var content = this.props.mxEvent.getContent();
+ var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
+ var ImageView = sdk.getComponent("elements.ImageView");
+ var params = {
+ src: httpUrl,
+ mxEvent: this.props.mxEvent
+ };
+
+ if (content.info) {
+ params.width = content.info.w;
+ params.height = content.info.h;
+ }
+
+ Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+ }
+ },
+
+ _isGif: function() {
+ var content = this.props.mxEvent.getContent();
+ return (content && content.info && content.info.mimetype === "image/gif");
+ },
+
+ onImageEnter: function(e) {
+ if (!this._isGif()) {
+ return;
+ }
+ var imgElement = e.target;
+ imgElement.src = MatrixClientPeg.get().mxcUrlToHttp(
+ this.props.mxEvent.getContent().url
+ );
+ },
+
+ onImageLeave: function(e) {
+ if (!this._isGif()) {
+ return;
+ }
+ var imgElement = e.target;
+ imgElement.src = this._getThumbUrl();
+ },
+
+ _getThumbUrl: function() {
+ var content = this.props.mxEvent.getContent();
+ return MatrixClientPeg.get().mxcUrlToHttp(content.url, 480, 360);
+ },
+
+ render: function() {
+ var content = this.props.mxEvent.getContent();
+ var cli = MatrixClientPeg.get();
+
+ var thumbHeight = null;
+ if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, 480, 360);
+
+ var imgStyle = {};
+ if (thumbHeight) imgStyle['height'] = thumbHeight;
+
+ var thumbUrl = this._getThumbUrl();
+ if (thumbUrl) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ What does this mean?
+
+
+ 
+ Download {text}
+
+ {TextForEvent.textForEvent(this.props.mxEvent)}
+
+ );
},
-};
+});
+
diff --git a/src/controllers/atoms/UserSettingsButton.js b/src/components/views/messages/UnknownBody.js
similarity index 64%
rename from src/controllers/atoms/UserSettingsButton.js
rename to src/components/views/messages/UnknownBody.js
index 5138111ef8..ae49af198d 100644
--- a/src/controllers/atoms/UserSettingsButton.js
+++ b/src/components/views/messages/UnknownBody.js
@@ -16,12 +16,17 @@ limitations under the License.
'use strict';
-var dis = require("../../dispatcher");
+var React = require('react');
-module.exports = {
- onClick: function() {
- dis.dispatch({
- action: 'view_user_settings'
- });
+module.exports = React.createClass({
+ displayName: 'UnknownBody',
+
+ render: function() {
+ var content = this.props.mxEvent.getContent();
+ return (
+
+ {content.body}
+
+ );
},
-};
+});
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
new file mode 100644
index 0000000000..8292cdf826
--- /dev/null
+++ b/src/components/views/rooms/EventTile.js
@@ -0,0 +1,287 @@
+/*
+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 classNames = require("classnames");
+
+var sdk = require('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg')
+var TextForEvent = require('../../../TextForEvent');
+
+var ContextualMenu = require('../../../ContextualMenu');
+var Velociraptor = require('../../../Velociraptor');
+require('../../../VelocityBounce');
+
+var bounce = false;
+try {
+ if (global.localStorage) {
+ bounce = global.localStorage.getItem('avatar_bounce') == 'true';
+ }
+} catch (e) {
+}
+
+var eventTileTypes = {
+ 'm.room.message': 'messages.MessageEvent',
+ 'm.room.member' : 'messages.TextualEvent',
+ 'm.call.invite' : 'messages.TextualEvent',
+ 'm.call.answer' : 'messages.TextualEvent',
+ 'm.call.hangup' : 'messages.TextualEvent',
+ 'm.room.name' : 'messages.TextualEvent',
+ 'm.room.topic' : 'messages.TextualEvent',
+};
+
+var MAX_READ_AVATARS = 5;
+
+// Our component structure for EventTiles on the timeline is:
+//
+// .-EventTile------------------------------------------------.
+// | MemberAvatar (SenderProfile) TimeStamp |
+// | .-{Message,Textual}Event---------------. Read Avatars |
+// | | .-MFooBody-------------------. | |
+// | | | (only if MessageEvent) | | |
+// | | '----------------------------' | |
+// | '--------------------------------------' |
+// '----------------------------------------------------------'
+
+module.exports = React.createClass({
+ displayName: 'Event',
+
+ statics: {
+ haveTileForEvent: function(e) {
+ if (eventTileTypes[e.getType()] == undefined) return false;
+ if (eventTileTypes[e.getType()] == 'messages.TextualEvent') {
+ return TextForEvent.textForEvent(e) !== '';
+ } else {
+ return true;
+ }
+ }
+ },
+
+ getInitialState: function() {
+ return {menu: false, allReadAvatars: false};
+ },
+
+ shouldHighlight: function() {
+ var actions = MatrixClientPeg.get().getPushActionsForEvent(this.props.mxEvent);
+ if (!actions || !actions.tweaks) { return false; }
+ return actions.tweaks.highlight;
+ },
+
+ onEditClicked: function(e) {
+ var MessageContextMenu = sdk.getComponent('rooms.MessageContextMenu');
+ var buttonRect = e.target.getBoundingClientRect()
+ var x = buttonRect.right;
+ var y = buttonRect.top + (e.target.height / 2);
+ var self = this;
+ ContextualMenu.createMenu(MessageContextMenu, {
+ mxEvent: this.props.mxEvent,
+ left: x,
+ top: y,
+ onFinished: function() {
+ self.setState({menu: false});
+ }
+ });
+ this.setState({menu: true});
+ },
+
+ toggleAllReadAvatars: function() {
+ this.setState({
+ allReadAvatars: !this.state.allReadAvatars
+ });
+ },
+
+ getReadAvatars: function() {
+ var avatars = [];
+
+ var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+
+ if (!room) return [];
+
+ var myUserId = MatrixClientPeg.get().credentials.userId;
+
+ // get list of read receipts, sorted most recent first
+ var receipts = room.getReceiptsForEvent(this.props.mxEvent).filter(function(r) {
+ return r.type === "m.read" && r.userId != myUserId;
+ }).sort(function(r1, r2) {
+ return r2.data.ts - r1.data.ts;
+ });
+
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+
+ var left = 0;
+
+ var reorderTransitionOpts = {
+ duration: 100,
+ easing: 'easeOut'
+ };
+
+ for (var i = 0; i < receipts.length; ++i) {
+ var member = room.getMember(receipts[i].userId);
+
+ // Using react refs here would mean both getting Velociraptor to expose
+ // them and making them scoped to the whole RoomView. Not impossible, but
+ // getElementById seems simpler at least for a first cut.
+ var oldAvatarDomNode = document.getElementById('mx_readAvatar'+member.userId);
+ var startStyles = [];
+ var enterTransitionOpts = [];
+ var oldNodeTop = -15; // For avatars that weren't on screen, act as if they were just off the top
+ if (oldAvatarDomNode) {
+ oldNodeTop = oldAvatarDomNode.getBoundingClientRect().top;
+ }
+
+ if (this.readAvatarNode) {
+ var topOffset = oldNodeTop - this.readAvatarNode.getBoundingClientRect().top;
+
+ if (oldAvatarDomNode && oldAvatarDomNode.style.left !== '0px') {
+ var leftOffset = oldAvatarDomNode.style.left;
+ // start at the old height and in the old h pos
+ startStyles.push({ top: topOffset, left: leftOffset });
+ enterTransitionOpts.push(reorderTransitionOpts);
+ }
+
+ // then shift to the rightmost column,
+ // and then it will drop down to its resting position
+ startStyles.push({ top: topOffset, left: '0px' });
+ enterTransitionOpts.push({
+ duration: bounce ? Math.min(Math.log(Math.abs(topOffset)) * 200, 3000) : 300,
+ easing: bounce ? 'easeOutBounce' : 'easeOutCubic',
+ });
+ }
+
+ var style = {
+ left: left+'px',
+ top: '0px',
+ visibility: ((i < MAX_READ_AVATARS) || this.state.allReadAvatars) ? 'visible' : 'hidden'
+ };
+
+ //console.log("i = " + i + ", MAX_READ_AVATARS = " + MAX_READ_AVATARS + ", allReadAvatars = " + this.state.allReadAvatars + " visibility = " + style.visibility);
+
+ // add to the start so the most recent is on the end (ie. ends up rightmost)
+ avatars.unshift(
+
+
+ );
+ }
+ if (EventTileType.needsSenderProfile()) {
+ sender =
+
+ );
+ },
+});
diff --git a/src/controllers/molecules/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
similarity index 70%
rename from src/controllers/molecules/MemberInfo.js
rename to src/components/views/rooms/MemberInfo.js
index d822a87f48..bf17195664 100644
--- a/src/controllers/molecules/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -25,23 +25,36 @@ limitations under the License.
* 'muted': boolean,
* 'isTargetMod': boolean
*/
+var React = require('react');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var dis = require("../../../dispatcher");
+var Modal = require("../../../Modal");
+var sdk = require('../../../index');
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var dis = require("../../dispatcher");
-var Modal = require("../../Modal");
-var sdk = require('../../index');
+module.exports = React.createClass({
+ displayName: 'MemberInfo',
+
+ getDefaultProps: function() {
+ return {
+ onFinished: function() {}
+ };
+ },
-module.exports = {
componentDidMount: function() {
// work out the current state
if (this.props.member) {
- var memberState = this._calculateOpsPermissions();
+ var memberState = this._calculateOpsPermissions(this.props.member);
this.setState(memberState);
}
},
+ componentWillReceiveProps: function(newProps) {
+ var memberState = this._calculateOpsPermissions(newProps.member);
+ this.setState(memberState);
+ },
+
onKick: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
MatrixClientPeg.get().kick(roomId, target).done(function() {
@@ -58,7 +71,7 @@ module.exports = {
},
onBan: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
MatrixClientPeg.get().ban(roomId, target).done(function() {
@@ -75,7 +88,7 @@ module.exports = {
},
onMuteToggle: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
var room = MatrixClientPeg.get().getRoom(roomId);
@@ -119,7 +132,7 @@ module.exports = {
},
onModToggle: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
var room = MatrixClientPeg.get().getRoom(roomId);
@@ -213,36 +226,10 @@ module.exports = {
}
},
- // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
- // Not sure what the right solution to this is.
onLeaveClick: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
- var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
-
- var roomId = this.props.member.roomId;
- Modal.createDialog(QuestionDialog, {
- title: "Leave room",
- description: "Are you sure you want to leave the room?",
- onFinished: function(should_leave) {
- if (should_leave) {
- var d = MatrixClientPeg.get().leave(roomId);
-
- // FIXME: controller shouldn't be loading a view :(
- var Loader = sdk.getComponent("atoms.Spinner");
- var modal = Modal.createDialog(Loader);
-
- d.then(function() {
- modal.close();
- dis.dispatch({action: 'view_next_room'});
- }, function(err) {
- modal.close();
- Modal.createDialog(ErrorDialog, {
- title: "Failed to leave room",
- description: err.toString()
- });
- });
- }
- }
+ dis.dispatch({
+ action: 'leave_room',
+ room_id: this.props.member.roomId,
});
this.props.onFinished();
},
@@ -261,13 +248,13 @@ module.exports = {
}
},
- _calculateOpsPermissions: function() {
+ _calculateOpsPermissions: function(member) {
var defaultPerms = {
can: {},
muted: false,
modifyLevel: false
};
- var room = MatrixClientPeg.get().getRoom(this.props.member.roomId);
+ var room = MatrixClientPeg.get().getRoom(member.roomId);
if (!room) {
return defaultPerms;
}
@@ -278,7 +265,7 @@ module.exports = {
return defaultPerms;
}
var me = room.getMember(MatrixClientPeg.get().credentials.userId);
- var them = this.props.member;
+ var them = member;
return {
can: this._calculateCanPermissions(
me, them, powerLevels.getContent()
@@ -320,6 +307,76 @@ module.exports = {
powerLevelContent.events_default
);
return member.powerLevel < levelToSend;
- }
-};
+ },
+
+ onCancel: function(e) {
+ dis.dispatch({
+ action: "view_user",
+ member: null
+ });
+ },
+
+ render: function() {
+ var interactButton, kickButton, banButton, muteButton, giveModButton, spinner;
+ if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) {
+ interactButton =
+ { timestamp }
+ { readAvatars }
+
+ { avatar }
+ { sender }
+
+
+ Leave room
;
+ }
+ else {
+ interactButton = Start chat
;
+ }
+
+ if (this.state.creatingRoom) {
+ var Loader = sdk.getComponent("elements.Spinner");
+ spinner =
+ Kick
+
;
+ }
+ if (this.state.can.ban) {
+ banButton =
+ Ban
+
;
+ }
+ if (this.state.can.mute) {
+ var muteLabel = this.state.muted ? "Unmute" : "Mute";
+ muteButton =
+ {muteLabel}
+
;
+ }
+ if (this.state.can.modifyLevel) {
+ var giveOpLabel = this.state.isTargetMod ? "Revoke Mod" : "Make Mod";
+ giveModButton =
+ {giveOpLabel}
+
+ }
+
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ return (
+
+
+
+ );
+ }
+});
diff --git a/src/controllers/organisms/MemberList.js b/src/components/views/rooms/MemberList.js
similarity index 64%
rename from src/controllers/organisms/MemberList.js
rename to src/components/views/rooms/MemberList.js
index 7d4326ef69..8ca24f8992 100644
--- a/src/controllers/organisms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -13,14 +13,17 @@ 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.
*/
-
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var Modal = require("../../Modal");
-var sdk = require('../../index');
+var React = require('react');
+var classNames = require('classnames');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var Modal = require("../../../Modal");
+var sdk = require('../../../index');
+var GeminiScrollbar = require('react-gemini-scrollbar');
var INITIAL_LOAD_NUM_MEMBERS = 50;
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'MemberList',
getInitialState: function() {
if (!this.props.roomId) return { members: [] };
var cli = MatrixClientPeg.get();
@@ -38,6 +41,7 @@ module.exports = {
componentWillMount: function() {
var cli = MatrixClientPeg.get();
cli.on("RoomState.members", this.onRoomStateMember);
+ cli.on("RoomMember.name", this.onRoomMemberName);
cli.on("Room", this.onRoom); // invites
},
@@ -45,6 +49,7 @@ module.exports = {
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room", this.onRoom);
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+ MatrixClientPeg.get().removeListener("RoomMember.name", this.onRoomMemberName);
MatrixClientPeg.get().removeListener("User.presence", this.userPresenceFn);
}
},
@@ -97,6 +102,10 @@ module.exports = {
this._updateList();
},
+ onRoomMemberName: function(ev, member) {
+ this._updateList();
+ },
+
_updateList: function() {
this.memberDict = this.getMemberDict();
@@ -107,7 +116,7 @@ module.exports = {
},
onInvite: function(inputText) {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var self = this;
inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
var isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
@@ -189,6 +198,94 @@ module.exports = {
}
}
return to_display;
- }
-};
+ },
+
+
+
+ memberSort: function(userIdA, userIdB) {
+ var userA = this.memberDict[userIdA].user;
+ var userB = this.memberDict[userIdB].user;
+
+ var presenceMap = {
+ online: 3,
+ unavailable: 2,
+ offline: 1
+ };
+
+ var presenceOrdA = userA ? presenceMap[userA.presence] : 0;
+ var presenceOrdB = userB ? presenceMap[userB.presence] : 0;
+
+ if (presenceOrdA != presenceOrdB) {
+ return presenceOrdB - presenceOrdA;
+ }
+
+ var latA = userA ? (userA.lastPresenceTs - (userA.lastActiveAgo || userA.lastPresenceTs)) : 0;
+ var latB = userB ? (userB.lastPresenceTs - (userB.lastActiveAgo || userB.lastPresenceTs)) : 0;
+
+ return latB - latA;
+ },
+
+ makeMemberTiles: function(membership) {
+ var MemberTile = sdk.getComponent("rooms.MemberTile");
+
+ var self = this;
+ return self.state.members.filter(function(userId) {
+ var m = self.memberDict[userId];
+ return m.membership == membership;
+ }).map(function(userId) {
+ var m = self.memberDict[userId];
+ return (
+
+
+
+ { this.props.member.name }
+
+ { this.props.member.userId }
+
+
+ power: { this.props.member.powerLevelNorm }%
+
+
+ {interactButton}
+ {muteButton}
+ {kickButton}
+ {banButton}
+ {giveModButton}
+ {spinner}
+
+
+
+ );
+ }
+ return (
+ Invited
+
+ {invitedMemberTiles}
+
+
+
+ {this.inviteTile()}
+
+
+ );
+ }
+});
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
new file mode 100644
index 0000000000..38d9285c0c
--- /dev/null
+++ b/src/components/views/rooms/MemberTile.js
@@ -0,0 +1,184 @@
+/*
+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('../../../MatrixClientPeg');
+var sdk = require('../../../index');
+var dis = require('../../../dispatcher');
+var Modal = require("../../../Modal");
+
+module.exports = React.createClass({
+ displayName: 'MemberTile',
+
+ getInitialState: function() {
+ return {};
+ },
+
+ onLeaveClick: function() {
+ dis.dispatch({
+ action: 'leave_room',
+ room_id: this.props.member.roomId,
+ });
+ this.props.onFinished();
+ },
+
+ shouldComponentUpdate: function(nextProps, nextState) {
+ if (this.state.hover !== nextState.hover) return true;
+ if (
+ this.member_last_modified_time === undefined ||
+ this.member_last_modified_time < nextProps.member.getLastModifiedTime()
+ ) {
+ return true
+ }
+ if (
+ nextProps.member.user &&
+ (this.user_last_modified_time === undefined ||
+ this.user_last_modified_time < nextProps.member.user.getLastModifiedTime())
+ ) {
+ return true
+ }
+ return false;
+ },
+
+ mouseEnter: function(e) {
+ this.setState({ 'hover': true });
+ },
+
+ mouseLeave: function(e) {
+ this.setState({ 'hover': false });
+ },
+
+ onClick: function(e) {
+ dis.dispatch({
+ action: 'view_user',
+ member: this.props.member,
+ });
+ },
+
+ getDuration: function(time) {
+ if (!time) return;
+ var t = parseInt(time / 1000);
+ var s = t % 60;
+ var m = parseInt(t / 60) % 60;
+ var h = parseInt(t / (60 * 60)) % 24;
+ var d = parseInt(t / (60 * 60 * 24));
+ if (t < 60) {
+ if (t < 0) {
+ return "0s";
+ }
+ return s + "s";
+ }
+ if (t < 60 * 60) {
+ return m + "m";
+ }
+ if (t < 24 * 60 * 60) {
+ return h + "h";
+ }
+ return d + "d ";
+ },
+
+ getPrettyPresence: function(user) {
+ if (!user) return "Unknown";
+ var presence = user.presence;
+ if (presence === "online") return "Online";
+ if (presence === "unavailable") return "Idle"; // XXX: is this actually right?
+ if (presence === "offline") return "Offline";
+ return "Unknown";
+ },
+
+ getPowerLabel: function() {
+ var label = this.props.member.userId;
+ if (this.state.isTargetMod) {
+ label += " - Mod (" + this.props.member.powerLevelNorm + "%)";
+ }
+ return label;
+ },
+
+ render: function() {
+ this.member_last_modified_time = this.props.member.getLastModifiedTime();
+ if (this.props.member.user) {
+ this.user_last_modified_time = this.props.member.user.getLastModifiedTime();
+ }
+
+ var isMyUser = MatrixClientPeg.get().credentials.userId == this.props.member.userId;
+
+ var power;
+ // if (this.props.member && this.props.member.powerLevelNorm > 0) {
+ // var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
+ // power =
+
+ {invitedSection}
+
+ {this.makeMemberTiles('join')}
+
+ 
: null;
+
+ var nameEl;
+ if (this.state.hover) {
+ var presence;
+ // FIXME: make presence data update whenever User.presence changes...
+ var active = this.props.member.user ? ((Date.now() - (this.props.member.user.lastPresenceTs - this.props.member.user.lastActiveAgo)) || -1) : -1;
+ if (active >= 0) {
+ presence = { this.getPrettyPresence(this.props.member.user) } { this.getDuration(active) } ago
;
+ }
+ else {
+ presence = { this.getPrettyPresence(this.props.member.user) }
;
+ }
+
+ nameEl =
+
+ 
+
+ }
+ else {
+ nameEl =
+
+ { name }
+ { presence }
+
+ { name }
+
+ }
+
+ var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+ return (
+
+
+ );
+ }
+});
diff --git a/src/controllers/molecules/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
similarity index 67%
rename from src/controllers/molecules/MessageComposer.js
rename to src/components/views/rooms/MessageComposer.js
index 5c8813dff6..73f553af6e 100644
--- a/src/controllers/molecules/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -13,13 +13,27 @@ 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.
*/
+var React = require("react");
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var SlashCommands = require("../../SlashCommands");
-var Modal = require("../../Modal");
-var sdk = require('../../index');
+var marked = require("marked");
+marked.setOptions({
+ renderer: new marked.Renderer(),
+ gfm: true,
+ tables: true,
+ breaks: true,
+ pedantic: false,
+ sanitize: true,
+ smartLists: true,
+ smartypants: false
+});
-var dis = require("../../dispatcher");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var SlashCommands = require("../../../SlashCommands");
+var Modal = require("../../../Modal");
+var CallHandler = require('../../../CallHandler');
+var sdk = require('../../../index');
+
+var dis = require("../../../dispatcher");
var KeyCode = {
ENTER: 13,
BACKSPACE: 8,
@@ -32,16 +46,33 @@ var KeyCode = {
var TYPING_USER_TIMEOUT = 10000;
var TYPING_SERVER_TIMEOUT = 30000;
+var MARKDOWN_ENABLED = true;
-module.exports = {
- oldScrollHeight: 0,
+function mdownToHtml(mdown) {
+ var html = marked(mdown) || "";
+ html = html.trim();
+ // strip start and end
+
+ { nameEl }
+ tags else you get 'orrible spacing + if (html.indexOf("
") === 0) { + html = html.substring("
".length); + } + if (html.lastIndexOf("
") === (html.length - "".length)) { + html = html.substring(0, html.length - "".length); + } + return html; +} + +module.exports = React.createClass({ + displayName: 'MessageComposer', componentWillMount: function() { + this.oldScrollHeight = 0; + this.markdownEnabled = MARKDOWN_ENABLED; this.tabStruct = { completing: false, original: null, index: 0 }; + var self = this; this.sentHistory = { // The list of typed messages. Index 0 is more recent data: [], @@ -111,6 +142,8 @@ module.exports = { // restore the original text the user was typing. this.element.value = this.originalText; } + + self.resizeInput(); return true; }, @@ -126,6 +159,7 @@ module.exports = { var text = window.sessionStorage.getItem("input_" + this.roomId); if (text) { this.element.value = text; + self.resizeInput(); } } }; @@ -137,6 +171,7 @@ module.exports = { this.refs.textarea, this.props.room.roomId ); + this.resizeInput(); }, componentWillUnmount: function() { @@ -208,7 +243,7 @@ module.exports = { // temporarily crimp clientHeight to 0 to get an accurate scrollHeight value this.refs.textarea.style.height = "0px"; var newHeight = this.refs.textarea.scrollHeight < 100 ? this.refs.textarea.scrollHeight : 100; - this.refs.textarea.style.height = newHeight + "px"; + this.refs.textarea.style.height = Math.ceil(newHeight) + "px"; if (this.props.roomView) { // kick gemini-scrollbar to re-layout this.props.roomView.forceUpdate(); @@ -228,6 +263,27 @@ module.exports = { onEnter: function(ev) { var contentText = this.refs.textarea.value; + // bodge for now to set markdown state on/off. We probably want a separate + // area for "local" commands which don't hit out to the server. + if (contentText.indexOf("/markdown") === 0) { + ev.preventDefault(); + this.refs.textarea.value = ''; + if (contentText.indexOf("/markdown on") === 0) { + this.markdownEnabled = true; + } + else if (contentText.indexOf("/markdown off") === 0) { + this.markdownEnabled = false; + } + else { + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); + Modal.createDialog(ErrorDialog, { + title: "Unknown command", + description: "Usage: /markdown on|off" + }); + } + return; + } + var cmd = SlashCommands.processInput(this.props.room.roomId, contentText); if (cmd) { ev.preventDefault(); @@ -239,7 +295,7 @@ module.exports = { console.log("Command success."); }, function(err) { console.error("Command failure: %s", err); - var ErrorDialog = sdk.getComponent("organisms.ErrorDialog"); + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createDialog(ErrorDialog, { title: "Server error", description: err.message @@ -248,7 +304,7 @@ module.exports = { } else if (cmd.error) { console.error(cmd.error); - var ErrorDialog = sdk.getComponent("organisms.ErrorDialog"); + var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog"); Modal.createDialog(ErrorDialog, { title: "Command error", description: cmd.error @@ -257,20 +313,26 @@ module.exports = { return; } - var content = null; - if (/^\/me /i.test(contentText)) { - content = { - msgtype: 'm.emote', - body: contentText.substring(4) - }; - } else { - content = { - msgtype: 'm.text', - body: contentText - }; + var isEmote = /^\/me /i.test(contentText); + var sendMessagePromise; + + if (isEmote) { + contentText = contentText.substring(4); } - MatrixClientPeg.get().sendMessage(this.props.room.roomId, content).then(function() { + var htmlText; + if (this.markdownEnabled && (htmlText = mdownToHtml(contentText)) !== contentText) { + sendMessagePromise = isEmote ? + MatrixClientPeg.get().sendHtmlEmote(this.props.room.roomId, contentText, htmlText) : + MatrixClientPeg.get().sendHtmlMessage(this.props.room.roomId, contentText, htmlText); + } + else { + sendMessagePromise = isEmote ? + MatrixClientPeg.get().sendEmoteMessage(this.props.room.roomId, contentText) : + MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText); + } + + sendMessagePromise.then(function() { dis.dispatch({ action: 'message_sent' }); @@ -280,6 +342,7 @@ module.exports = { }); }); this.refs.textarea.value = ''; + this.resizeInput(); ev.preventDefault(); }, @@ -445,7 +508,99 @@ module.exports = { clearTimeout(this.typingTimeout); this.typingTimeout = null; } + }, + onInputClick: function(ev) { + this.refs.textarea.focus(); + }, + + onUploadClick: function(ev) { + this.refs.uploadInput.click(); + }, + + onUploadFileSelected: function(ev) { + var files = ev.target.files; + // MessageComposer shouldn't have to rely on it's parent passing in a callback to upload a file + if (files && files.length > 0) { + this.props.uploadFile(files[0]); + } + this.refs.uploadInput.value = null; + }, + + onHangupClick: function() { + var call = CallHandler.getCallForRoom(this.props.room.roomId); + if (!call) { + return; + } + dis.dispatch({ + action: 'hangup', + // hangup the call for this room, which may not be the room in props + // (e.g. conferences which will hangup the 1:1 room instead) + room_id: call.roomId + }); + }, + + onCallClick: function(ev) { + dis.dispatch({ + action: 'place_call', + type: ev.shiftKey ? "screensharing" : "video", + room_id: this.props.room.roomId + }); + }, + + onVoiceCallClick: function(ev) { + dis.dispatch({ + action: 'place_call', + type: 'voice', + room_id: this.props.room.roomId + }); + }, + + render: function() { + var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId); + var uploadInputStyle = {display: 'none'}; + var MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); + + var callButton, videoCallButton, hangupButton; + var call = CallHandler.getCallForRoom(this.props.room.roomId); + if (this.props.callState && this.props.callState !== 'ended') { + hangupButton = +
+ 
+
;
+ }
+ else {
+ callButton =
+
+
+ 
+
+ videoCallButton =
+
+
+ 
+
+ }
+
+ return (
+
+
+
+ );
}
-};
+});
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
new file mode 100644
index 0000000000..068dff85d6
--- /dev/null
+++ b/src/components/views/rooms/RoomHeader.js
@@ -0,0 +1,164 @@
+/*
+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('../../../index');
+var dis = require("../../../dispatcher");
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+module.exports = React.createClass({
+ displayName: 'RoomHeader',
+
+ propTypes: {
+ room: React.PropTypes.object,
+ editing: React.PropTypes.bool,
+ onSettingsClick: React.PropTypes.func,
+ onSaveClick: React.PropTypes.func,
+ onSearchClick: React.PropTypes.func,
+ onLeaveClick: React.PropTypes.func,
+ },
+
+ getDefaultProps: function() {
+ return {
+ editing: false,
+ onSettingsClick: function() {},
+ onSaveClick: function() {},
+ };
+ },
+
+ onVideoClick: function(e) {
+ dis.dispatch({
+ action: 'place_call',
+ type: e.shiftKey ? "screensharing" : "video",
+ room_id: this.props.room.roomId
+ });
+ },
+
+ onVoiceClick: function() {
+ dis.dispatch({
+ action: 'place_call',
+ type: "voice",
+ room_id: this.props.room.roomId
+ });
+ },
+
+ onNameChange: function(new_name) {
+ if (this.props.room.name != new_name && new_name) {
+ MatrixClientPeg.get().setRoomName(this.props.room.roomId, new_name);
+ }
+ },
+
+ getRoomName: function() {
+ return this.refs.name_edit.value;
+ },
+
+ render: function() {
+ var EditableText = sdk.getComponent("elements.EditableText");
+ var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+
+ var header;
+ if (this.props.simpleHeader) {
+ header =
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ { hangupButton }
+ { callButton }
+ { videoCallButton }
+
+
+
+
+ }
+ else {
+ var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
+
+ var name = null;
+ var searchStatus = null;
+ var topic_el = null;
+ var cancel_button = null;
+ var save_button = null;
+ var settings_button = null;
+ var actual_name = this.props.room.currentState.getStateEvents('m.room.name', '');
+ if (actual_name) actual_name = actual_name.getContent().name;
+ if (this.props.editing) {
+ name =
+
+ { this.props.simpleHeader }
+
+
+
+
+ // if (topic) topic_el =
+ cancel_button = Cancel
+ save_button = Save Changes
+ } else {
+ // ({ this.props.searchInfo.searchCount } results)
;
+ }
+
+ name =
+
+
+ if (topic) topic_el = { this.props.room.name }
+ { searchStatus }
+
+ 
+
+
+ { topic.getContent().topic }
;
+ }
+
+ var roomAvatar = null;
+ if (this.props.room) {
+ roomAvatar = (
+
+ 
+
;
+ }
+
+ header =
+
+
+
+ }
+
+ return (
+
+
+ {cancel_button}
+ {save_button}
+
+ { roomAvatar }
+
+
+ { name }
+ { topic_el }
+
+
+ { leave_button }
+
+
+ 
+
+
+
+ { header }
+
+ );
+ },
+});
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
new file mode 100644
index 0000000000..6af1af31dd
--- /dev/null
+++ b/src/components/views/rooms/RoomList.js
@@ -0,0 +1,307 @@
+/*
+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 GeminiScrollbar = require('react-gemini-scrollbar');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var RoomListSorter = require("../../../RoomListSorter");
+var UnreadStatus = require('../../../UnreadStatus');
+var dis = require("../../../dispatcher");
+var sdk = require('../../../index');
+
+var HIDE_CONFERENCE_CHANS = true;
+
+module.exports = React.createClass({
+ displayName: 'RoomList',
+
+ propTypes: {
+ ConferenceHandler: React.PropTypes.any,
+ collapsed: React.PropTypes.bool,
+ currentRoom: React.PropTypes.string
+ },
+
+ getInitialState: function() {
+ return {
+ activityMap: null,
+ lists: {},
+ }
+ },
+
+ componentWillMount: function() {
+ var cli = MatrixClientPeg.get();
+ cli.on("Room", this.onRoom);
+ cli.on("Room.timeline", this.onRoomTimeline);
+ cli.on("Room.name", this.onRoomName);
+ cli.on("Room.tags", this.onRoomTags);
+ cli.on("RoomState.events", this.onRoomStateEvents);
+ cli.on("RoomMember.name", this.onRoomMemberName);
+
+ var s = this.getRoomLists();
+ s.activityMap = {};
+ this.setState(s);
+ },
+
+ componentDidMount: function() {
+ this.dispatcherRef = dis.register(this.onAction);
+ },
+
+ onAction: function(payload) {
+ switch (payload.action) {
+ case 'view_tooltip':
+ this.tooltip = payload.tooltip;
+ this._repositionTooltip();
+ if (this.tooltip) this.tooltip.style.display = 'block';
+ break
+ }
+ },
+
+ componentWillUnmount: function() {
+ dis.unregister(this.dispatcherRef);
+ if (MatrixClientPeg.get()) {
+ MatrixClientPeg.get().removeListener("Room", this.onRoom);
+ MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+ MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
+ MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
+ }
+ },
+
+ componentWillReceiveProps: function(newProps) {
+ this.state.activityMap[newProps.selectedRoom] = undefined;
+ this.setState({
+ activityMap: this.state.activityMap
+ });
+ },
+
+ onRoom: function(room) {
+ this.refreshRoomList();
+ },
+
+ onRoomTimeline: function(ev, room, toStartOfTimeline) {
+ if (toStartOfTimeline) return;
+
+ var hl = 0;
+ if (
+ room.roomId != this.props.selectedRoom &&
+ ev.getSender() != MatrixClientPeg.get().credentials.userId)
+ {
+ if (UnreadStatus.eventTriggersUnreadCount(ev)) {
+ hl = 1;
+ }
+
+ var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+ var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+ if ((actions && actions.tweaks && actions.tweaks.highlight) ||
+ (me && me.membership == "invite"))
+ {
+ hl = 2;
+ }
+ }
+
+ var newState = this.getRoomLists();
+ if (hl > 0) {
+ // obviously this won't deep copy but this shouldn't be necessary
+ var amap = this.state.activityMap;
+ amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
+
+ newState.activityMap = amap;
+
+ }
+ // still want to update the list even if the highlight status
+ // hasn't changed because the ordering may have
+ this.setState(newState);
+ },
+
+ onRoomName: function(room) {
+ this.refreshRoomList();
+ },
+
+ onRoomTags: function(event, room) {
+ this.refreshRoomList();
+ },
+
+ onRoomStateEvents: function(ev, state) {
+ setTimeout(this.refreshRoomList, 0);
+ },
+
+ onRoomMemberName: function(ev, member) {
+ setTimeout(this.refreshRoomList, 0);
+ },
+
+ refreshRoomList: function() {
+ // TODO: rather than bluntly regenerating and re-sorting everything
+ // every time we see any kind of room change from the JS SDK
+ // we could do incremental updates on our copy of the state
+ // based on the room which has actually changed. This would stop
+ // us re-rendering all the sublists every time anything changes anywhere
+ // in the state of the client.
+ this.setState(this.getRoomLists());
+ },
+
+ getRoomLists: function() {
+ var self = this;
+ var s = { lists: {} };
+
+ s.lists["im.vector.fake.invite"] = [];
+ s.lists["m.favourite"] = [];
+ s.lists["im.vector.fake.recent"] = [];
+ s.lists["m.lowpriority"] = [];
+ s.lists["im.vector.fake.archived"] = [];
+
+ MatrixClientPeg.get().getRooms().forEach(function(room) {
+ var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+
+ if (me && me.membership == "invite") {
+ s.lists["im.vector.fake.invite"].push(room);
+ }
+ else {
+ var shouldShowRoom = (
+ me && (me.membership == "join")
+ );
+
+ // hiding conf rooms only ever toggles shouldShowRoom to false
+ if (shouldShowRoom && HIDE_CONFERENCE_CHANS) {
+ // we want to hide the 1:1 conf<->user room and not the group chat
+ var joinedMembers = room.getJoinedMembers();
+ if (joinedMembers.length === 2) {
+ var otherMember = joinedMembers.filter(function(m) {
+ return m.userId !== me.userId
+ })[0];
+ var ConfHandler = self.props.ConferenceHandler;
+ if (ConfHandler && ConfHandler.isConferenceUser(otherMember.userId)) {
+ // console.log("Hiding conference 1:1 room %s", room.roomId);
+ shouldShowRoom = false;
+ }
+ }
+ }
+
+ if (shouldShowRoom) {
+ var tagNames = Object.keys(room.tags);
+ if (tagNames.length) {
+ for (var i = 0; i < tagNames.length; i++) {
+ var tagName = tagNames[i];
+ s.lists[tagName] = s.lists[tagName] || [];
+ s.lists[tagNames[i]].push(room);
+ }
+ }
+ else {
+ s.lists["im.vector.fake.recent"].push(room);
+ }
+ }
+ }
+ });
+
+ //console.log("calculated new roomLists; im.vector.fake.recent = " + s.lists["im.vector.fake.recent"]);
+
+ // we actually apply the sorting to this when receiving the prop in RoomSubLists.
+
+ return s;
+ },
+
+ _repositionTooltip: function(e) {
+ if (this.tooltip && this.tooltip.parentElement) {
+ var scroll = ReactDOM.findDOMNode(this);
+ this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.children[2].scrollTop) + "px";
+ }
+ },
+
+ onShowClick: function() {
+ dis.dispatch({
+ action: 'show_left_panel',
+ });
+ },
+
+ render: function() {
+ var expandButton = this.props.collapsed ?
+ 
:
+ null;
+
+ var RoomSubList = sdk.getComponent('structures.RoomSubList');
+ var self = this;
+
+ return (
+
+ { expandButton }
+
+
+
+
;
+ }
+
+ var banned = this.props.room.getMembersWithMembership("ban");
+
+ return (
+ Room Icon
+
+
+
+
+
+ +
+ );
+ }
+});
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
new file mode 100644
index 0000000000..0a03ebe89d
--- /dev/null
+++ b/src/components/views/rooms/RoomTile.js
@@ -0,0 +1,126 @@
+/*
+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 classNames = require('classnames');
+var dis = require("../../../dispatcher");
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var sdk = require('../../../index');
+
+module.exports = React.createClass({
+ displayName: 'RoomTile',
+
+ propTypes: {
+ // TODO: We should *optionally* support DND stuff and ideally be impl agnostic about it
+ connectDragSource: React.PropTypes.func.isRequired,
+ connectDropTarget: React.PropTypes.func.isRequired,
+ isDragging: React.PropTypes.bool.isRequired,
+
+ room: React.PropTypes.object.isRequired,
+ collapsed: React.PropTypes.bool.isRequired,
+ selected: React.PropTypes.bool.isRequired,
+ unread: React.PropTypes.bool.isRequired,
+ highlight: React.PropTypes.bool.isRequired,
+ isInvite: React.PropTypes.bool.isRequired,
+ roomSubList: React.PropTypes.object.isRequired,
+ },
+
+ getInitialState: function() {
+ return( { hover : false });
+ },
+
+ onClick: function() {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: this.props.room.roomId
+ });
+ },
+
+ onMouseEnter: function() {
+ this.setState( { hover : true });
+ },
+
+ onMouseLeave: function() {
+ this.setState( { hover : false });
+ },
+
+ render: function() {
+ var myUserId = MatrixClientPeg.get().credentials.userId;
+ var me = this.props.room.currentState.members[myUserId];
+ var classes = classNames({
+ 'mx_RoomTile': true,
+ 'mx_RoomTile_selected': this.props.selected,
+ 'mx_RoomTile_unread': this.props.unread,
+ 'mx_RoomTile_highlight': this.props.highlight,
+ 'mx_RoomTile_invited': (me && me.membership == 'invite'),
+ });
+
+ // XXX: We should never display raw room IDs, but sometimes the
+ // room name js sdk gives is undefined (cannot repro this -- k)
+ var name = this.props.room.name || this.props.room.roomId;
+
+ name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
+ var badge;
+ if (this.props.highlight) {
+ badge = ;
+ }
+ /*
+ if (this.props.highlight) {
+ badge = +
+
+
+ +
Power levels
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ User levels
+
+ {Object.keys(user_levels).map(function(user, i) {
+ return (
+
+
+
+
+
+
+ );
+ })}
+ Event levels
+
+ {Object.keys(events_levels).map(function(event_type, i) {
+ return (
+
+
+
+
+
+
+ );
+ })}
+ Banned users
+
+ {banned.map(function(member, i) {
+ return (
+
+ {change_avatar}
+
+ {member.userId}
+
+ );
+ })}
+ !
;
+ }
+ else if (this.props.unread) {
+ badge = 1
;
+ }
+ var nameCell;
+ if (badge) {
+ nameCell = {name}
{badge}
{name}
;
+ }
+ */
+
+ var label;
+ if (!this.props.collapsed) {
+ var className = 'mx_RoomTile_name' + (this.props.isInvite ? ' mx_RoomTile_invite' : '');
+ label = {name}
;
+ }
+ else if (this.state.hover) {
+ var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+ label =
+
+ ));
+ }
+});
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
new file mode 100644
index 0000000000..2ae50a0cae
--- /dev/null
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -0,0 +1,131 @@
+/*
+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.
+*/
+
+var React = require('react');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var sdk = require('../../../index');
+
+module.exports = React.createClass({
+ displayName: 'ChangeAvatar',
+ propTypes: {
+ initialAvatarUrl: React.PropTypes.string,
+ room: React.PropTypes.object,
+ },
+
+ Phases: {
+ Display: "display",
+ Uploading: "uploading",
+ Error: "error",
+ },
+
+ getInitialState: function() {
+ return {
+ avatarUrl: this.props.initialAvatarUrl,
+ phase: this.Phases.Display,
+ }
+ },
+
+ componentWillReceiveProps: function(newProps) {
+ if (this.avatarSet) {
+ // don't clobber what the user has just set
+ return;
+ }
+ this.setState({
+ avatarUrl: newProps.initialAvatarUrl
+ });
+ },
+
+ setAvatarFromFile: function(file) {
+ var newUrl = null;
+
+ this.setState({
+ phase: this.Phases.Uploading
+ });
+ var self = this;
+ MatrixClientPeg.get().uploadContent(file).then(function(url) {
+ newUrl = url;
+ if (self.props.room) {
+ return MatrixClientPeg.get().sendStateEvent(
+ self.props.room.roomId,
+ 'm.room.avatar',
+ {url: url},
+ ''
+ );
+ } else {
+ return MatrixClientPeg.get().setAvatarUrl(url);
+ }
+ }).done(function() {
+ self.setState({
+ phase: self.Phases.Display,
+ avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
+ });
+ }, function(error) {
+ self.setState({
+ phase: self.Phases.Error
+ });
+ self.onError(error);
+ });
+ },
+
+ onFileSelected: function(ev) {
+ this.avatarSet = true;
+ this.setAvatarFromFile(ev.target.files[0]);
+ },
+
+ onError: function(error) {
+ this.setState({
+ errorText: "Failed to upload profile picture!"
+ });
+ },
+
+ render: function() {
+ var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+ var avatarImg;
+ // Having just set an avatar we just display that since it will take a little
+ // time to propagate through to the RoomAvatar.
+ if (this.props.room && !this.avatarSet) {
+ avatarImg =
+
+ { label }
+
+
+ );
+ case this.Phases.Uploading:
+ var Loader = sdk.getComponent("elements.Spinner");
+ return (
+
+ {avatarImg}
+
+
+ Upload new:
+
+ {this.state.errorText}
+
+ {this.state.errorString}
+ );
+ } else {
+ var EditableText = sdk.getComponent('elements.EditableText');
+ return (
+
+
+ );
+ case this.Phases.Uploading:
+ var Loader = sdk.getComponent("elements.Spinner");
+ return (
+
+
+ {this.state.errorString}
+
+
+
+
+
+
+
+
+
+ );
+ case this.Phases.Success:
+ return (
+
+
+ )
+ }
+ }
+});
diff --git a/src/controllers/atoms/EnableNotificationsButton.js b/src/components/views/settings/EnableNotificationsButton.js
similarity index 65%
rename from src/controllers/atoms/EnableNotificationsButton.js
rename to src/components/views/settings/EnableNotificationsButton.js
index 3c399484e8..426daec26e 100644
--- a/src/controllers/atoms/EnableNotificationsButton.js
+++ b/src/components/views/settings/EnableNotificationsButton.js
@@ -15,10 +15,13 @@ limitations under the License.
*/
'use strict';
-var sdk = require('../../index');
-var dis = require("../../dispatcher");
+var React = require("react");
+var Notifier = require("../../../Notifier");
+var sdk = require('../../../index');
+var dis = require("../../../dispatcher");
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'EnableNotificationsButton',
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
@@ -36,12 +39,10 @@ module.exports = {
},
enabled: function() {
- var Notifier = sdk.getComponent('organisms.Notifier');
return Notifier.isEnabled();
},
onClick: function() {
- var Notifier = sdk.getComponent('organisms.Notifier');
var self = this;
if (!Notifier.supportsDesktopNotifications()) {
return;
@@ -55,4 +56,20 @@ module.exports = {
}
this.forceUpdate();
},
-};
+
+ render: function() {
+ if (this.enabled()) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ }
+});
diff --git a/src/controllers/molecules/voip/CallView.js b/src/components/views/voip/CallView.js
similarity index 51%
rename from src/controllers/molecules/voip/CallView.js
rename to src/components/views/voip/CallView.js
index 4dd488c2dc..fbaed1dcd7 100644
--- a/src/controllers/molecules/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -13,9 +13,11 @@ 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.
*/
-
+var React = require("react");
var dis = require("../../../dispatcher");
var CallHandler = require("../../../CallHandler");
+var sdk = require('../../../index');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
/*
* State vars:
@@ -23,14 +25,31 @@ var CallHandler = require("../../../CallHandler");
*
* Props:
* this.props.room = Room (JS SDK)
+ * this.props.ConferenceHandler = A Conference Handler implementation
+ * Must have a function signature:
+ * getConferenceCallForRoom(roomId: string): MatrixCall
*/
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'CallView',
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
+ this._trackedRoom = null;
if (this.props.room) {
- this.showCall(this.props.room.roomId);
+ 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);
+ }
}
},
@@ -39,19 +58,22 @@ module.exports = {
},
onAction: function(payload) {
- // if we were given a room_id to track, don't handle anything else.
- if (payload.room_id && this.props.room &&
- this.props.room.roomId !== payload.room_id) {
- return;
- }
- if (payload.action !== 'call_state') {
+ // 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.getCall(roomId);
+ var call = (
+ CallHandler.getCallForRoom(roomId) ||
+ (this.props.ConferenceHandler ?
+ this.props.ConferenceHandler.getConferenceCallForRoom(roomId) :
+ null
+ )
+ );
if (call) {
call.setLocalVideoElement(this.getVideoView().getLocalVideoElement());
call.setRemoteVideoElement(this.getVideoView().getRemoteVideoElement());
@@ -60,13 +82,29 @@ module.exports = {
call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
}
if (call && call.type === "video" && call.state !== 'ended') {
- this.getVideoView().getLocalVideoElement().style.display = "initial";
+ // 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});
}
- }
-};
+ },
+
+ getVideoView: function() {
+ return this.refs.video;
+ },
+
+ render: function(){
+ var VideoView = sdk.getComponent('voip.VideoView');
+ return (
+
+ Success!
+
+
+
+
+
+ {audioBlock}
+
+ );
+ }
+ var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
+ return (
+
+ {audioBlock}
+ 
+
+ );
+ }
+});
+
diff --git a/src/controllers/molecules/ProgressBar.js b/src/components/views/voip/VideoFeed.js
similarity index 78%
rename from src/controllers/molecules/ProgressBar.js
rename to src/components/views/voip/VideoFeed.js
index c711650a25..9cf28d1ba4 100644
--- a/src/controllers/molecules/ProgressBar.js
+++ b/src/components/views/voip/VideoFeed.js
@@ -18,9 +18,14 @@ limitations under the License.
var React = require('react');
-module.exports = {
- propTypes: {
- value: React.PropTypes.number,
- max: React.PropTypes.number
+module.exports = React.createClass({
+ displayName: 'VideoFeed',
+
+ render: function() {
+ return (
+
+ );
},
-};
+});
+
diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
new file mode 100644
index 0000000000..0a95e0d0c8
--- /dev/null
+++ b/src/components/views/voip/VideoView.js
@@ -0,0 +1,93 @@
+/*
+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('../../../index');
+var dis = require('../../../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 (
+
+
+ Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
+
+
+
+
+
+
+ Decline
+
+
+
+
+ Accept
+
+
+
+ );
+ }
+});
diff --git a/src/controllers/atoms/LogoutButton.js b/src/controllers/atoms/LogoutButton.js
deleted file mode 100644
index 87cf814801..0000000000
--- a/src/controllers/atoms/LogoutButton.js
+++ /dev/null
@@ -1,27 +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("../../dispatcher");
-
-module.exports = {
- onClick: function() {
- dis.dispatch({
- action: 'logout'
- });
- },
-};
diff --git a/src/controllers/atoms/MemberAvatar.js b/src/controllers/atoms/MemberAvatar.js
deleted file mode 100644
index a94b4291a0..0000000000
--- a/src/controllers/atoms/MemberAvatar.js
+++ /dev/null
@@ -1,75 +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('../../MatrixClientPeg');
-
-module.exports = {
- propTypes: {
- member: React.PropTypes.object.isRequired,
- width: React.PropTypes.number,
- height: React.PropTypes.number,
- resizeMethod: React.PropTypes.string,
- },
-
- getDefaultProps: function() {
- return {
- width: 40,
- height: 40,
- resizeMethod: 'crop'
- }
- },
-
- defaultAvatarUrl: function(member, width, height, resizeMethod) {
- if (this.skinnedDefaultAvatarUrl) {
- return this.skinnedDefaultAvatarUrl(member, width, height, resizeMethod);
- }
- return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADRJREFUeNrszQENADAIACB9QjNbxSKP4eagAFnTseHFErFYLBaLxWKxWCwWi8Vi8cX4CzAABSwCRWJw31gAAAAASUVORK5CYII=";
- },
-
- onError: function(ev) {
- // don't tightloop if the browser can't load a data url
- if (ev.target.src == this.defaultAvatarUrl(this.props.member)) {
- return;
- }
- this.setState({
- imageUrl: this.defaultAvatarUrl(this.props.member)
- });
- },
-
- getInitialState: function() {
- var url = this.props.member.getAvatarUrl(
- MatrixClientPeg.get().getHomeserverUrl(),
- this.props.width,
- this.props.height,
- this.props.resizeMethod,
- false
- );
- if (!url) {
- url = this.defaultAvatarUrl(
- this.props.member,
- this.props.width,
- this.props.height,
- this.props.resizeMethod
- );
- }
- return {
- imageUrl: url
- };
- }
-};
diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js
deleted file mode 100644
index b1176a2ab5..0000000000
--- a/src/controllers/atoms/create_room/RoomAlias.js
+++ /dev/null
@@ -1,47 +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.
-*/
-
-var React = require('react');
-
-module.exports = {
- propTypes: {
- // Specifying a homeserver will make magical things happen when you,
- // e.g. start typing in the room alias box.
- homeserver: React.PropTypes.string,
- alias: React.PropTypes.string,
- onChange: React.PropTypes.func,
- },
-
- getDefaultProps: function() {
- return {
- onChange: function() {},
- alias: '',
- };
- },
-
- getAliasLocalpart: function() {
- var room_alias = this.props.alias;
-
- if (room_alias && this.props.homeserver) {
- var suffix = ":" + this.props.homeserver;
- if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) {
- room_alias = room_alias.slice(1, -suffix.length);
- }
- }
-
- return room_alias;
- },
-};
diff --git a/src/controllers/molecules/ChangeAvatar.js b/src/controllers/molecules/ChangeAvatar.js
deleted file mode 100644
index 093badfe8f..0000000000
--- a/src/controllers/molecules/ChangeAvatar.js
+++ /dev/null
@@ -1,70 +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.
-*/
-
-var React = require('react');
-var MatrixClientPeg = require("../../MatrixClientPeg");
-
-module.exports = {
- propTypes: {
- initialAvatarUrl: React.PropTypes.string,
- room: React.PropTypes.object,
- },
-
- Phases: {
- Display: "display",
- Uploading: "uploading",
- Error: "error",
- },
-
- getInitialState: function() {
- return {
- avatarUrl: this.props.initialAvatarUrl,
- phase: this.Phases.Display,
- }
- },
-
- setAvatarFromFile: function(file) {
- var newUrl = null;
-
- this.setState({
- phase: this.Phases.Uploading
- });
- var self = this;
- MatrixClientPeg.get().uploadContent(file).then(function(url) {
- newUrl = url;
- if (self.props.room) {
- return MatrixClientPeg.get().sendStateEvent(
- self.props.room.roomId,
- 'm.room.avatar',
- {url: url},
- ''
- );
- } else {
- return MatrixClientPeg.get().setAvatarUrl(url);
- }
- }).done(function() {
- self.setState({
- phase: self.Phases.Display,
- avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
- });
- }, function(error) {
- self.setState({
- phase: self.Phases.Error
- });
- self.onError(error);
- });
- },
-}
diff --git a/src/controllers/molecules/ChangePassword.js b/src/controllers/molecules/ChangePassword.js
deleted file mode 100644
index 637e133a79..0000000000
--- a/src/controllers/molecules/ChangePassword.js
+++ /dev/null
@@ -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 MatrixClientPeg = require("../../MatrixClientPeg");
-
-module.exports = {
- propTypes: {
- onFinished: React.PropTypes.func,
- },
-
- Phases: {
- Edit: "edit",
- Uploading: "uploading",
- Error: "error",
- Success: "Success"
- },
-
- getDefaultProps: function() {
- return {
- onFinished: function() {},
- };
- },
-
- getInitialState: function() {
- return {
- phase: this.Phases.Edit,
- errorString: ''
- }
- },
-
- changePassword: function(old_password, new_password) {
- var cli = MatrixClientPeg.get();
-
- var authDict = {
- type: 'm.login.password',
- user: cli.credentials.userId,
- password: old_password
- };
-
- this.setState({
- phase: this.Phases.Uploading,
- errorString: '',
- })
-
- var d = cli.setPassword(authDict, new_password);
-
- var self = this;
- d.then(function() {
- self.setState({
- phase: self.Phases.Success,
- errorString: '',
- })
- }, function(err) {
- self.setState({
- phase: self.Phases.Error,
- errorString: err.toString()
- })
- });
- },
-}
diff --git a/src/controllers/molecules/EventTile.js b/src/controllers/molecules/EventTile.js
deleted file mode 100644
index 953e33b516..0000000000
--- a/src/controllers/molecules/EventTile.js
+++ /dev/null
@@ -1,28 +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 MatrixClientPeg = require("../../MatrixClientPeg");
-
-module.exports = {
- shouldHighlight: function() {
- var actions = MatrixClientPeg.get().getPushActionsForEvent(this.props.mxEvent);
- if (!actions || !actions.tweaks) { return false; }
- return actions.tweaks.highlight;
- }
-};
-
diff --git a/src/controllers/molecules/MEmoteTile.js b/src/controllers/molecules/MEmoteTile.js
deleted file mode 100644
index d32d8ae911..0000000000
--- a/src/controllers/molecules/MEmoteTile.js
+++ /dev/null
@@ -1,30 +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 linkify = require('linkifyjs');
-var linkifyElement = require('linkifyjs/element');
-var linkifyMatrix = require('../../linkify-matrix');
-
-linkifyMatrix(linkify);
-
-module.exports = {
- componentDidMount: function() {
- linkifyElement(this.refs.content, linkifyMatrix.options);
- }
-};
-
diff --git a/src/controllers/molecules/MNoticeTile.js b/src/controllers/molecules/MNoticeTile.js
deleted file mode 100644
index 597ce3cd10..0000000000
--- a/src/controllers/molecules/MNoticeTile.js
+++ /dev/null
@@ -1,28 +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 linkify = require('linkifyjs');
-var linkifyElement = require('linkifyjs/element');
-var linkifyMatrix = require('../../linkify-matrix.js');
-linkifyMatrix(linkify);
-
-module.exports = {
- componentDidMount: function() {
- linkifyElement(this.refs.content, linkifyMatrix.options);
- }
-};
diff --git a/src/controllers/molecules/MemberTile.js b/src/controllers/molecules/MemberTile.js
deleted file mode 100644
index 222ebca145..0000000000
--- a/src/controllers/molecules/MemberTile.js
+++ /dev/null
@@ -1,59 +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("../../dispatcher");
-var Modal = require("../../Modal");
-var sdk = require('../../index.js');
-
-var MatrixClientPeg = require("../../MatrixClientPeg");
-
-module.exports = {
- getInitialState: function() {
- return {};
- },
-
- onLeaveClick: function() {
- var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
-
- var roomId = this.props.member.roomId;
- Modal.createDialog(QuestionDialog, {
- title: "Leave room",
- description: "Are you sure you want to leave the room?",
- onFinished: function(should_leave) {
- if (should_leave) {
- var d = MatrixClientPeg.get().leave(roomId);
-
- // FIXME: controller shouldn't be loading a view :(
- var Loader = sdk.getComponent("atoms.Spinner");
- var modal = Modal.createDialog(Loader);
-
- d.then(function() {
- modal.close();
- dis.dispatch({action: 'view_next_room'});
- }, function(err) {
- modal.close();
- Modal.createDialog(ErrorDialog, {
- title: "Failed to leave room",
- description: err.toString()
- });
- });
- }
- }
- });
- }
-};
diff --git a/src/controllers/molecules/RoomHeader.js b/src/controllers/molecules/RoomHeader.js
deleted file mode 100644
index 2e61f0608c..0000000000
--- a/src/controllers/molecules/RoomHeader.js
+++ /dev/null
@@ -1,118 +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';
-
-/*
- * State vars:
- * this.state.call_state = the UI state of the call (see CallHandler)
- */
-
-var React = require('react');
-var dis = require("../../dispatcher");
-var CallHandler = require("../../CallHandler");
-
-module.exports = {
- propTypes: {
- room: React.PropTypes.object,
- editing: React.PropTypes.bool,
- onSettingsClick: React.PropTypes.func,
- onSaveClick: React.PropTypes.func,
- },
-
- getDefaultProps: function() {
- return {
- editing: false,
- onSettingsClick: function() {},
- onSaveClick: function() {},
- };
- },
-
- componentDidMount: function() {
- this.dispatcherRef = dis.register(this.onAction);
- if (this.props.room) {
- var call = CallHandler.getCallForRoom(this.props.room.roomId);
- var callState = call ? call.call_state : "ended";
- this.setState({
- call_state: callState
- });
- }
- },
-
- 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;
- }
- var call = CallHandler.getCallForRoom(payload.room_id);
- var callState = call ? call.call_state : "ended";
- this.setState({
- call_state: callState
- });
- },
-
- onVideoClick: function(e) {
- dis.dispatch({
- action: 'place_call',
- type: e.shiftKey ? "screensharing" : "video",
- room_id: this.props.room.roomId
- });
- },
- onVoiceClick: function() {
- dis.dispatch({
- action: 'place_call',
- type: "voice",
- room_id: this.props.room.roomId
- });
- },
- onHangupClick: function() {
- var call = CallHandler.getCallForRoom(this.props.room.roomId);
- if (!call) { return; }
- dis.dispatch({
- action: 'hangup',
- // hangup the call for this room, which may not be the room in props
- // (e.g. conferences which will hangup the 1:1 room instead)
- room_id: call.roomId
- });
- },
- onMuteAudioClick: function() {
- var call = CallHandler.getCallForRoom(this.props.room.roomId);
- if (!call) {
- return;
- }
- var newState = !call.isMicrophoneMuted();
- call.setMicrophoneMuted(newState);
- this.setState({
- audioMuted: newState
- });
- },
- onMuteVideoClick: function() {
- var call = CallHandler.getCallForRoom(this.props.room.roomId);
- if (!call) {
- return;
- }
- var newState = !call.isLocalVideoMuted();
- call.setLocalVideoMuted(newState);
- this.setState({
- videoMuted: newState
- });
- }
-};
diff --git a/src/controllers/molecules/RoomTile.js b/src/controllers/molecules/RoomTile.js
deleted file mode 100644
index 78927ec55e..0000000000
--- a/src/controllers/molecules/RoomTile.js
+++ /dev/null
@@ -1,28 +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("../../dispatcher");
-
-module.exports = {
- onClick: function() {
- dis.dispatch({
- action: 'view_room',
- room_id: this.props.room.roomId
- });
- },
-};
diff --git a/src/controllers/molecules/ServerConfig.js b/src/controllers/molecules/ServerConfig.js
deleted file mode 100644
index 77fcb1d8c5..0000000000
--- a/src/controllers/molecules/ServerConfig.js
+++ /dev/null
@@ -1,67 +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 = {
- propTypes: {
- onHsUrlChanged: React.PropTypes.func,
- onIsUrlChanged: React.PropTypes.func,
- defaultHsUrl: React.PropTypes.string,
- defaultIsUrl: React.PropTypes.string
- },
-
- getDefaultProps: function() {
- return {
- onHsUrlChanged: function() {},
- onIsUrlChanged: function() {},
- defaultHsUrl: 'https://matrix.org/',
- defaultIsUrl: 'https://matrix.org/'
- };
- },
-
- getInitialState: function() {
- return {
- hs_url: this.props.defaultHsUrl,
- is_url: this.props.defaultIsUrl,
- original_hs_url: this.props.defaultHsUrl,
- original_is_url: this.props.defaultIsUrl,
- }
- },
-
- hsChanged: function(ev) {
- this.setState({hs_url: ev.target.value}, function() {
- this.props.onHsUrlChanged(this.state.hs_url);
- });
- },
-
- // XXX: horrible naming due to potential confusion between the word 'is' and the acronym 'IS'
- isChanged: function(ev) {
- this.setState({is_url: ev.target.value}, function() {
- this.props.onIsUrlChanged(this.state.is_url);
- });
- },
-
- getHsUrl: function() {
- return this.state.hs_url;
- },
-
- getIsUrl: function() {
- return this.state.is_url;
- },
-};
diff --git a/src/controllers/molecules/voip/IncomingCallBox.js b/src/controllers/molecules/voip/IncomingCallBox.js
deleted file mode 100644
index 9ecced56c5..0000000000
--- a/src/controllers/molecules/voip/IncomingCallBox.js
+++ /dev/null
@@ -1,73 +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.
-*/
-
-var dis = require("../../../dispatcher");
-var CallHandler = require("../../../CallHandler");
-
-module.exports = {
- componentDidMount: function() {
- this.dispatcherRef = dis.register(this.onAction);
- },
-
- componentWillUnmount: function() {
- dis.unregister(this.dispatcherRef);
- },
-
- getInitialState: function() {
- return {
- incomingCall: null
- }
- },
-
- onAction: function(payload) {
- if (payload.action !== 'call_state') {
- return;
- }
- var call = CallHandler.getCall(payload.room_id);
- if (!call || call.call_state !== 'ringing') {
- this.setState({
- incomingCall: null,
- });
- this.getRingAudio().pause();
- return;
- }
- if (call.call_state === "ringing") {
- this.getRingAudio().load();
- this.getRingAudio().play();
- }
- else {
- this.getRingAudio().pause();
- }
-
- this.setState({
- incomingCall: call
- });
- },
-
- onAnswerClick: function() {
- dis.dispatch({
- action: 'answer',
- room_id: this.state.incomingCall.roomId
- });
- },
- onRejectClick: function() {
- dis.dispatch({
- action: 'hangup',
- room_id: this.state.incomingCall.roomId
- });
- }
-};
-
diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js
deleted file mode 100644
index 3c48e43f74..0000000000
--- a/src/controllers/organisms/CreateRoom.js
+++ /dev/null
@@ -1,135 +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("../../MatrixClientPeg");
-var PresetValues = require('../atoms/create_room/Presets').Presets;
-var q = require('q');
-var encryption = require("../../encryption");
-
-module.exports = {
- propTypes: {
- onRoomCreated: React.PropTypes.func,
- },
-
- phases: {
- CONFIG: "CONFIG", // We're waiting for user to configure and hit create.
- CREATING: "CREATING", // We're sending the request.
- CREATED: "CREATED", // We successfully created the room.
- ERROR: "ERROR", // There was an error while trying to create room.
- },
-
- getDefaultProps: function() {
- return {
- onRoomCreated: function() {},
- };
- },
-
- getInitialState: function() {
- return {
- phase: this.phases.CONFIG,
- error_string: "",
- is_private: true,
- share_history: false,
- default_preset: PresetValues.PrivateChat,
- topic: '',
- room_name: '',
- invited_users: [],
- };
- },
-
- onCreateRoom: function() {
- var options = {};
-
- if (this.state.room_name) {
- options.name = this.state.room_name;
- }
-
- if (this.state.topic) {
- options.topic = this.state.topic;
- }
-
- if (this.state.preset) {
- if (this.state.preset != PresetValues.Custom) {
- options.preset = this.state.preset;
- } else {
- options.initial_state = [
- {
- type: "m.room.join_rules",
- content: {
- "join_rule": this.state.is_private ? "invite" : "public"
- }
- },
- {
- type: "m.room.history_visibility",
- content: {
- "history_visibility": this.state.share_history ? "shared" : "invited"
- }
- },
- ];
- }
- }
-
- options.invite = this.state.invited_users;
-
- var alias = this.getAliasLocalpart();
- if (alias) {
- options.room_alias_name = alias;
- }
-
- var cli = MatrixClientPeg.get();
- if (!cli) {
- // TODO: Error.
- console.error("Cannot create room: No matrix client.");
- return;
- }
-
- var deferred = cli.createRoom(options);
-
- var response;
-
- if (this.state.encrypt) {
- deferred = deferred.then(function(res) {
- response = res;
- return encryption.enableEncryption(
- cli, response.room_id, options.invite
- );
- }).then(function() {
- return q(response) }
- );
- }
-
- this.setState({
- phase: this.phases.CREATING,
- });
-
- var self = this;
-
- deferred.then(function (resp) {
- self.setState({
- phase: self.phases.CREATED,
- });
- self.props.onRoomCreated(resp.room_id);
- }, function(err) {
- self.setState({
- phase: self.phases.ERROR,
- error_string: err.toString(),
- });
- });
- }
-};
diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js
deleted file mode 100644
index ff3522d9c3..0000000000
--- a/src/controllers/organisms/RoomList.js
+++ /dev/null
@@ -1,124 +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("../../MatrixClientPeg");
-var RoomListSorter = require("../../RoomListSorter");
-
-var sdk = require('../../index');
-
-module.exports = {
- componentWillMount: function() {
- var cli = MatrixClientPeg.get();
- cli.on("Room", this.onRoom);
- cli.on("Room.timeline", this.onRoomTimeline);
- cli.on("Room.name", this.onRoomName);
- cli.on("RoomState.events", this.onRoomStateEvents);
-
- var rooms = this.getRoomList();
- this.setState({
- roomList: rooms,
- activityMap: {}
- });
- },
-
- componentWillUnmount: function() {
- if (MatrixClientPeg.get()) {
- MatrixClientPeg.get().removeListener("Room", this.onRoom);
- MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
- MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
- }
- },
-
- componentWillReceiveProps: function(newProps) {
- this.state.activityMap[newProps.selectedRoom] = undefined;
- this.setState({
- activityMap: this.state.activityMap
- });
- },
-
- onRoom: function(room) {
- this.refreshRoomList();
- },
-
- onRoomTimeline: function(ev, room, toStartOfTimeline) {
- if (toStartOfTimeline) return;
-
- var newState = {
- roomList: this.getRoomList()
- };
- if (
- room.roomId != this.props.selectedRoom &&
- ev.getSender() != MatrixClientPeg.get().credentials.userId)
- {
- var hl = 1;
-
- var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
- if (actions && actions.tweaks && actions.tweaks.highlight) {
- hl = 2;
- }
- // obviously this won't deep copy but this shouldn't be necessary
- var amap = this.state.activityMap;
- amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
-
- newState.activityMap = amap;
- }
- this.setState(newState);
- },
-
- onRoomName: function(room) {
- this.refreshRoomList();
- },
-
- onRoomStateEvents: function(ev, state) {
- this.refreshRoomList();
- },
-
- refreshRoomList: function() {
- var rooms = this.getRoomList();
- this.setState({
- roomList: rooms
- });
- },
-
- getRoomList: function() {
- return RoomListSorter.mostRecentActivityFirst(
- MatrixClientPeg.get().getRooms().filter(function(room) {
- var member = room.getMember(MatrixClientPeg.get().credentials.userId);
- return member && (member.membership == "join" || member.membership == "invite");
- })
- );
- },
-
- makeRoomTiles: function() {
- var RoomTile = sdk.getComponent('molecules.RoomTile');
- var self = this;
- return this.state.roomList.map(function(room) {
- var selected = room.roomId == self.props.selectedRoom;
- return (
-
+
+
+
+