merge in develop

src/components/structures/MatrixChat.js

@@ -29,6 +29,7 @@ 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");
@@ -203,6 +204,36 @@ module.exports = React.createClass({
                     self.setState({errorText: 'Login failed.'});
                 });
 
+                break;
+            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()
+                                });
+                            });
+                        }
+                    }
+                });
                 break;
             case 'view_room':
                 this._viewRoom(payload.room_id);

src/components/structures/RoomView.js

@@ -58,7 +58,7 @@ module.exports = React.createClass({
             searching: false,
             searchResults: null,
             syncState: MatrixClientPeg.get().getSyncState(),
-            hasUnsentMessages: this._hasUnsentMessages(room)
+            hasUnsentMessages: this._hasUnsentMessages(room),
         }
     },
 
@@ -90,6 +90,8 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
             MatrixClientPeg.get().removeListener("sync", this.onSyncStateChange);
         }
+
+        window.removeEventListener('resize', this.onResize);        
     },
 
     onAction: function(payload) {
@@ -272,6 +274,9 @@ module.exports = React.createClass({
         }
 
         this._updateConfCallNotification();
+
+        window.addEventListener('resize', this.onResize);
+        this.onResize();
     },
 
     componentDidUpdate: function() {
@@ -426,6 +431,10 @@ module.exports = React.createClass({
         }
 
         var self = this;
+        self.setState({
+            searchInProgress: true
+        });
+
         MatrixClientPeg.get().search({
             body: {
                 search_categories: {
@@ -450,6 +459,12 @@ module.exports = React.createClass({
                 }
             }            
         }).then(function(data) {
+
+            if (!self.state.searching || term !== self.refs.search_bar.refs.search_term.value) {
+                console.error("Discarding stale search results");
+                return;
+            }
+
             // for debugging:
             // data.search_categories.room_events.highlights = ["hello", "everybody"];
 
@@ -470,8 +485,10 @@ module.exports = React.createClass({
 
             self.setState({
                 highlights: highlights,
+                searchTerm: term,
                 searchResults: data,
                 searchScope: scope,
+                searchCount: data.search_categories.room_events.count,
             });
         }, function(error) {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -479,6 +496,10 @@ module.exports = React.createClass({
                 title: "Search failed",
                 description: error.toString()
             });
+        }).finally(function() {
+            self.setState({
+                searchInProgress: false
+            });
         });
     },
 
@@ -492,10 +513,14 @@ module.exports = React.createClass({
         var EventTile = sdk.getComponent('rooms.EventTile');
         var self = this;
 
-        if (this.state.searchResults &&
+        if (this.state.searchResults)
-            this.state.searchResults.search_categories.room_events.results &&
-            this.state.searchResults.search_categories.room_events.groups)
         {
+            if (!this.state.searchResults.search_categories.room_events.results ||
+                !this.state.searchResults.search_categories.room_events.groups)
+            {
+                return ret;
+            }
+
             // XXX: this dance is foul, due to the results API not directly returning sorted results
             var results = this.state.searchResults.search_categories.room_events.results;
             var roomIdGroups = this.state.searchResults.search_categories.room_events.groups.room_id;
@@ -763,6 +788,14 @@ module.exports = React.createClass({
         this.setState(this.getInitialState());
     },
 
+    onLeaveClick: function() {
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.roomId,
+        });
+        this.props.onFinished();        
+    },
+
     onRejectButtonClicked: function(ev) {
         var self = this;
         this.setState({
@@ -912,6 +945,27 @@ module.exports = React.createClass({
         }
     },
 
+    onResize: function(e) {
+        // It seems flexbox doesn't give us a way to constrain the auxPanel height to have
+        // a minimum of the height of the video element, whilst also capping it from pushing out the page
+        // so we have to do it via JS instead.  In this implementation we cap the height by putting
+        // a maxHeight on the underlying remote video tag.
+        var auxPanelMaxHeight;
+        if (this.refs.callView) {
+            // XXX: don't understand why we have to call findDOMNode here in react 0.14 - it should already be a DOM node.
+            var video = ReactDOM.findDOMNode(this.refs.callView.refs.video.refs.remote);
+
+            // header + footer + status + give us at least 100px of scrollback at all times.
+            auxPanelMaxHeight = window.innerHeight - (83 + 72 + 36 + 100);
+
+            // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
+            // but it's better than the video going missing entirely
+            if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
+
+            video.style.maxHeight = auxPanelMaxHeight + "px";
+        }
+    },
+
     render: function() {
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         var MessageComposer = sdk.getComponent('rooms.MessageComposer');
@@ -1051,7 +1105,7 @@ module.exports = React.createClass({
                 aux = <Loader/>;
             }
             else if (this.state.searching) {
-                aux = <SearchBar ref="search_bar" onCancelClick={this.onCancelClick} onSearch={this.onSearch}/>;
+                aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress } onCancelClick={this.onCancelClick} onSearch={this.onSearch}/>;
             }
 
             var conferenceCallNotification = null;
@@ -1071,30 +1125,37 @@ module.exports = React.createClass({
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
                                     <div className="mx_RoomView_fileDropTargetLabel">
-                                        <img src="img/upload.svg" width="43" height="57" alt="Drop File Here"/><br/>
+                                        <img src="img/upload-big.svg" width="45" height="59" alt="Drop File Here"/><br/>
                                         Drop File Here
                                     </div>
                                  </div>;
             }
 
-            var messageComposer;
+            var messageComposer, searchInfo;
             if (!this.state.searchResults) {
                 messageComposer =
                     <MessageComposer room={this.state.room} roomView={this} uploadFile={this.uploadFile} />
             }
+            else {
+                searchInfo = {
+                    searchTerm : this.state.searchTerm,
+                    searchScope : this.state.searchScope,
+                    searchCount : this.state.searchCount,
+                }
+            }
 
             return (
                 <div className="mx_RoomView">
-                    <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings} onSearchClick={this.onSearchClick}
+                    <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo} editing={this.state.editingRoomSettings} onSearchClick={this.onSearchClick}
-                        onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
+                        onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} onLeaveClick={this.onLeaveClick} />
+                    { fileDropTarget }    
                     <div className="mx_RoomView_auxPanel">
-                        <CallView room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
+                        <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
                         { conferenceCallNotification }
                         { aux }
                     </div>
                     <GeminiScrollbar autoshow={true} ref="messagePanel" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
                         <div className="mx_RoomView_messageListWrapper">
-                            { fileDropTarget }    
                             <ol className="mx_RoomView_MessageList" aria-live="polite">
                                 <li className={scrollheader_classes}>
                                 </li>

src/components/views/rooms/MemberInfo.js

@@ -226,36 +226,10 @@ module.exports = React.createClass({
         }
     },
 
-    // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
-    // Not sure what the right solution to this is.
     onLeaveClick: function() {
-        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        dis.dispatch({
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            action: 'leave_room',
-
+            room_id: this.props.member.roomId,
-        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("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.props.onFinished();        
     },

src/components/views/rooms/MemberTile.js

@@ -31,33 +31,11 @@ module.exports = React.createClass({
     },
 
     onLeaveClick: function() {
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        dis.dispatch({
-
+            action: 'leave_room',
-        var roomId = this.props.member.roomId;
+            room_id: 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("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.props.onFinished();        
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {

src/components/views/rooms/RoomHeader.js

@@ -35,6 +35,8 @@ module.exports = React.createClass({
         editing: React.PropTypes.bool,
         onSettingsClick: React.PropTypes.func,
         onSaveClick: React.PropTypes.func,
+        onSearchClick: React.PropTypes.func,
+        onLeaveClick: React.PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -187,6 +189,7 @@ module.exports = React.createClass({
             }
 
             var name = null;
+            var searchStatus = null;
             var topic_el = null;
             var cancel_button = null;
             var save_button = null;
@@ -203,9 +206,16 @@ module.exports = React.createClass({
                 save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save Changes</div>
             } else {
                 // <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
+
+                var searchStatus;
+                if (this.props.searchInfo && this.props.searchInfo.searchTerm) {
+                    searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;({ this.props.searchInfo.searchCount } results)</div>;
+                }
+
                 name =
                     <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
-                        <div className="mx_RoomHeader_nametext">{ this.props.room.name }</div>
+                        <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
+                        { searchStatus }
                         <div className="mx_RoomHeader_settingsButton">
                             <img src="img/settings.svg" width="12" height="12"/>
                         </div>
@@ -233,12 +243,24 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_button mx_RoomHeader_video" onClick={activeCall && activeCall.type === "video" ? this.onMuteVideoClick : this.onVideoClick}>
                             <img src="img/video.png" title="Video call" alt="Video call" width="32" height="32" style={{ 'marginTop': '-8px' }}/>
                         </div>;
+                var img = "img/voip.png";
+                if (activeCall.isMicrophoneMuted()) {
+                        img = "img/voip-mute.png";
+                }
                 voice_button =
                         <div className="mx_RoomHeader_button mx_RoomHeader_voice" onClick={activeCall ? this.onMuteAudioClick : this.onVoiceClick}>
-                            <img src="img/voip.png" title="VoIP call" alt="VoIP call" width="32" height="32" style={{ 'marginTop': '-8px' }}/>
+                            <img src={img} title="VoIP call" alt="VoIP call" width="32" height="32" style={{ 'marginTop': '-8px' }}/>
                         </div>;
             }
 
+            var exit_button;
+            if (this.props.onLeaveClick) {
+                exit_button =
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton">
+                        <img src="img/leave.svg" title="Leave room" alt="Leave room" width="26" height="20" onClick={this.props.onLeaveClick}/>
+                    </div>;
+            }
+
             header =
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_leftRow">
@@ -257,6 +279,7 @@ module.exports = React.createClass({
                         { video_button }
                         { voice_button }
                         { zoom_button }
+                        { exit_button }
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.svg" title="Search" alt="Search" width="21" height="19" onClick={this.props.onSearchClick}/>
                         </div>

src/components/views/rooms/RoomList.js

@@ -103,8 +103,11 @@ module.exports = React.createClass({
                 hl = 1;
             }
 
+            var me = room.getMember(MatrixClientPeg.get().credentials.userId);
             var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
-            if (actions && actions.tweaks && actions.tweaks.highlight) {
+            if ((actions && actions.tweaks && actions.tweaks.highlight) ||
+                (me && me.membership == "invite"))
+            {
                 hl = 2;
             }
         }
@@ -153,17 +156,17 @@ module.exports = React.createClass({
         var self = this;
         var s = { lists: {} };
 
-        s.lists["m.invite"] = [];
+        s.lists["im.vector.fake.invite"] = [];
         s.lists["m.favourite"] = [];
-        s.lists["m.recent"] = [];
+        s.lists["im.vector.fake.recent"] = [];
         s.lists["m.lowpriority"] = [];
-        s.lists["m.archived"] = [];
+        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["m.invite"].push(room);
+                s.lists["im.vector.fake.invite"].push(room);
             }
             else {
                 var shouldShowRoom =  (
@@ -196,13 +199,13 @@ module.exports = React.createClass({
                         }
                     }
                     else {
-                        s.lists["m.recent"].push(room); 
+                        s.lists["im.vector.fake.recent"].push(room); 
                     }
                 }
             }
         });
 
-        //console.log("calculated new roomLists; m.recent = " + s.lists["m.recent"]);
+        //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.
 
@@ -235,7 +238,7 @@ module.exports = React.createClass({
             <div className="mx_RoomList">
                 { expandButton }
 
-                <RoomSubList list={ self.state.lists['m.invite'] }
+                <RoomSubList list={ self.state.lists['im.vector.fake.invite'] }
                              label="Invites"
                              editable={ false }
                              order="recent"
@@ -253,7 +256,7 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              collapsed={ self.props.collapsed } />
 
-                <RoomSubList list={ self.state.lists['m.recent'] }
+                <RoomSubList list={ self.state.lists['im.vector.fake.recent'] }
                              label="Conversations"
                              editable={ true }
                              verb="restore"
@@ -263,7 +266,7 @@ module.exports = React.createClass({
                              collapsed={ self.props.collapsed } />
 
                 { Object.keys(self.state.lists).map(function(tagName) {
-                    if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
+                    if (!tagName.match(/^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|archived))$/)) {
                         return <RoomSubList list={ self.state.lists[tagName] }
                              key={ tagName }
                              label={ tagName }
@@ -284,12 +287,12 @@ module.exports = React.createClass({
                              verb="demote"
                              editable={ true }
                              order="recent"
-                             bottommost={ self.state.lists['m.archived'].length === 0 }
+                             bottommost={ self.state.lists['im.vector.fake.archived'].length === 0 }
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
                              collapsed={ self.props.collapsed } />
 
-                <RoomSubList list={ self.state.lists['m.archived'] }
+                <RoomSubList list={ self.state.lists['im.vector.fake.archived'] }
                              label="Historical"
                              editable={ false }
                              order="recent"