Merge branch 'develop' into t3chguy/audio_output

src/components/structures/ContextualMenu.js

@@ -63,6 +63,24 @@ export default class ContextualMenu extends React.Component {
         hasBackground: PropTypes.bool,
     }
 
+    constructor() {
+        super();
+        this.state = {
+            contextMenuRect: null,
+        };
+
+        this.collectContextMenuRect = this.collectContextMenuRect.bind(this);
+    }
+
+    collectContextMenuRect(element) {
+        // We don't need to clean up when unmounting, so ignore
+        if (!element) return;
+
+        this.setState({
+            contextMenuRect: element.getBoundingClientRect(),
+        });
+    }
+
     render() {
         const position = {};
         let chevronFace = null;
@@ -83,6 +101,9 @@ export default class ContextualMenu extends React.Component {
             chevronFace = 'right';
         }
 
+        const contextMenuRect = this.state.contextMenuRect || null;
+        const padding = 10;
+
         const chevronOffset = {};
         if (props.chevronFace) {
             chevronFace = props.chevronFace;
@@ -90,7 +111,19 @@ export default class ContextualMenu extends React.Component {
         if (chevronFace === 'top' || chevronFace === 'bottom') {
             chevronOffset.left = props.chevronOffset;
         } else {
-            chevronOffset.top = props.chevronOffset;
+            const target = position.top;
+
+            // By default, no adjustment is made
+            let adjusted = target;
+
+            // If we know the dimensions of the context menu, adjust its position
+            // such that it does not leave the (padded) window.
+            if (contextMenuRect) {
+                adjusted = Math.min(position.top, document.body.clientHeight - contextMenuRect.height - padding);
+            }
+
+            position.top = adjusted;
+            chevronOffset.top = Math.max(props.chevronOffset, props.chevronOffset + target - adjusted);
         }
 
         // To override the default chevron colour, if it's been set
@@ -154,7 +187,7 @@ export default class ContextualMenu extends React.Component {
         // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the menu from a button click!
         return <div className={className} style={position}>
-            <div className={menuClasses} style={menuStyle}>
+            <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}>
                 { chevron }
                 <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
             </div>

src/components/structures/GroupView.js

@@ -432,11 +432,14 @@ export default React.createClass({
 
         this._changeAvatarComponent = null;
         this._initGroupStore(this.props.groupId, true);
+
+        this._dispatcherRef = dis.register(this._onAction);
     },
 
     componentWillUnmount: function() {
         this._unmounted = true;
         this._matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership);
+        dis.unregister(this._dispatcherRef);
     },
 
     componentWillReceiveProps: function(newProps) {
@@ -563,12 +566,22 @@ export default React.createClass({
         this._closeSettings();
     },
 
+    _onAction(payload) {
+        switch (payload.action) {
+            // NOTE: close_settings is an app-wide dispatch; as it is dispatched from MatrixChat
+            case 'close_settings':
+                this.setState({
+                    editing: false,
+                    profileForm: null,
+                });
+                break;
+            default:
+                break;
+        }
+    },
+
     _closeSettings() {
-        this.setState({
-            editing: false,
-            profileForm: null,
-        });
-        dis.dispatch({action: 'panel_disable'});
+        dis.dispatch({action: 'close_settings'});
     },
 
     _onNameChange: function(value) {

src/components/structures/LoggedInView.js

@@ -255,6 +255,22 @@ const LoggedInView = React.createClass({
         ), true);
     },
 
+    _onClick: function(ev) {
+        // When the panels are disabled, clicking on them results in a mouse event
+        // which bubbles to certain elements in the tree. When this happens, close
+        // any settings page that is currently open (user/room/group).
+        if (this.props.leftDisabled &&
+            this.props.rightDisabled &&
+            (
+                ev.target.className === 'mx_MatrixChat' ||
+                ev.target.className === 'mx_MatrixChat_middlePanel' ||
+                ev.target.className === 'mx_RoomView'
+            )
+        ) {
+            dis.dispatch({ action: 'close_settings' });
+        }
+    },
+
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RightPanel = sdk.getComponent('structures.RightPanel');
@@ -295,7 +311,7 @@ const LoggedInView = React.createClass({
 
             case PageTypes.UserSettings:
                 page_element = <UserSettings
-                    onClose={this.props.onUserSettingsClose}
+                    onClose={this.props.onCloseAllSettings}
                     brand={this.props.config.brand}
                     referralBaseUrl={this.props.config.referralBaseUrl}
                     teamToken={this.props.teamToken}
@@ -380,7 +396,7 @@ const LoggedInView = React.createClass({
         }
 
         return (
-            <div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers}>
+            <div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onClick={this._onClick}>
                 { topBar }
                 <DragDropContext onDragEnd={this._onDragEnd}>
                     <div className={bodyClasses}>

src/components/structures/MatrixChat.js

@@ -398,6 +398,9 @@ export default React.createClass({
     },
 
     startPageChangeTimer() {
+        // Tor doesn't support performance
+        if (!performance || !performance.mark) return null;
+
         // This shouldn't happen because componentWillUpdate and componentDidUpdate
         // are used.
         if (this._pageChanging) {
@@ -409,6 +412,9 @@ export default React.createClass({
     },
 
     stopPageChangeTimer() {
+        // Tor doesn't support performance
+        if (!performance || !performance.mark) return null;
+
         if (!this._pageChanging) {
             console.warn('MatrixChat.stopPageChangeTimer: timer not started');
             return;
@@ -560,6 +566,27 @@ export default React.createClass({
                 this._setPage(PageTypes.UserSettings);
                 this.notifyNewScreen('settings');
                 break;
+            case 'close_settings':
+                this.setState({
+                    leftDisabled: false,
+                    rightDisabled: false,
+                    middleDisabled: false,
+                });
+                if (this.state.page_type === PageTypes.UserSettings) {
+                    // We do this to get setPage and notifyNewScreen
+                    if (this.state.currentRoomId) {
+                        this._viewRoom({
+                            room_id: this.state.currentRoomId,
+                        });
+                    } else if (this.state.currentGroupId) {
+                        this._viewGroup({
+                            group_id: this.state.currentGroupId,
+                        });
+                    } else {
+                        this._viewHome();
+                    }
+                }
+                break;
             case 'view_create_room':
                 this._createRoom();
                 break;
@@ -577,19 +604,10 @@ export default React.createClass({
                 this.notifyNewScreen('groups');
                 break;
             case 'view_group':
-                {
-                    const groupId = payload.group_id;
-                    this.setState({
-                        currentGroupId: groupId,
-                        currentGroupIsNew: payload.group_is_new,
-                    });
-                    this._setPage(PageTypes.GroupView);
-                    this.notifyNewScreen('group/' + groupId);
-                }
+                this._viewGroup(payload);
                 break;
             case 'view_home_page':
-                this._setPage(PageTypes.HomePage);
-                this.notifyNewScreen('home');
+                this._viewHome();
                 break;
             case 'view_set_mxid':
                 this._setMxId(payload);
@@ -632,7 +650,8 @@ export default React.createClass({
                     middleDisabled: payload.middleDisabled || false,
                     rightDisabled: payload.rightDisabled || payload.sideDisabled || false,
                 });
-                break; }
+                break;
+            }
             case 'set_theme':
                 this._onSetTheme(payload.value);
                 break;
@@ -781,7 +800,6 @@ export default React.createClass({
     // @param {string=} roomInfo.room_id ID of the room to join. One of room_id or room_alias must be given.
     // @param {string=} roomInfo.room_alias Alias of the room to join. One of room_id or room_alias must be given.
     // @param {boolean=} roomInfo.auto_join If true, automatically attempt to join the room if not already a member.
-    // @param {boolean=} roomInfo.show_settings Makes RoomView show the room settings dialog.
     // @param {string=} roomInfo.event_id ID of the event in this room to show: this will cause a switch to the
     //                                    context of that particular event.
     // @param {boolean=} roomInfo.highlighted If true, add event_id to the hash of the URL
@@ -848,6 +866,21 @@ export default React.createClass({
         });
     },
 
+    _viewGroup: function(payload) {
+        const groupId = payload.group_id;
+        this.setState({
+            currentGroupId: groupId,
+            currentGroupIsNew: payload.group_is_new,
+        });
+        this._setPage(PageTypes.GroupView);
+        this.notifyNewScreen('group/' + groupId);
+    },
+
+    _viewHome: function() {
+        this._setPage(PageTypes.HomePage);
+        this.notifyNewScreen('home');
+    },
+
     _setMxId: function(payload) {
         const SetMxIdDialog = sdk.getComponent('views.dialogs.SetMxIdDialog');
         const close = Modal.createTrackedDialog('Set MXID', '', SetMxIdDialog, {
@@ -1110,11 +1143,6 @@ export default React.createClass({
         } else if (this._is_registered) {
             this._is_registered = false;
 
-            // Set the display name = user ID localpart
-            MatrixClientPeg.get().setDisplayName(
-                MatrixClientPeg.get().getUserIdLocalpart(),
-            );
-
             if (this.props.config.welcomeUserId && getCurrentLanguage().startsWith("en")) {
                 createRoom({
                     dmUserId: this.props.config.welcomeUserId,
@@ -1606,19 +1634,8 @@ export default React.createClass({
         this._setPageSubtitle(subtitle);
     },
 
-    onUserSettingsClose: function() {
-        // XXX: use browser history instead to find the previous room?
-        // or maintain a this.state.pageHistory in _setPage()?
-        if (this.state.currentRoomId) {
-            dis.dispatch({
-                action: 'view_room',
-                room_id: this.state.currentRoomId,
-            });
-        } else {
-            dis.dispatch({
-                action: 'view_home_page',
-            });
-        }
+    onCloseAllSettings() {
+        dis.dispatch({ action: 'close_settings' });
     },
 
     onServerConfigChange(config) {
@@ -1677,7 +1694,7 @@ export default React.createClass({
                 return (
                    <LoggedInView ref={this._collectLoggedInView} matrixClient={MatrixClientPeg.get()}
                         onRoomCreated={this.onRoomCreated}
-                        onUserSettingsClose={this.onUserSettingsClose}
+                        onCloseAllSettings={this.onCloseAllSettings}
                         onRegistered={this.onRegistered}
                         currentRoomId={this.state.currentRoomId}
                         teamToken={this._teamToken}

src/components/structures/RoomView.js

@@ -44,7 +44,7 @@ import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
-import SettingsStore from "../../settings/SettingsStore";
+import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -115,6 +115,7 @@ module.exports = React.createClass({
             showApps: false,
             isAlone: false,
             isPeeking: false,
+            showingPinned: false,
 
             // error object, as from the matrix client/server API
             // If we failed to load information about the room,
@@ -182,6 +183,8 @@ module.exports = React.createClass({
             isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
             forwardingEvent: RoomViewStore.getForwardingEvent(),
             shouldPeek: RoomViewStore.shouldPeek(),
+            showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", RoomViewStore.getRoomId()),
+            editingRoomSettings: RoomViewStore.isEditingSettings(),
         };
 
         // Temporary logging to diagnose https://github.com/vector-im/riot-web/issues/4307
@@ -672,6 +675,7 @@ module.exports = React.createClass({
         }
 
         this._updateRoomMembers();
+        this._checkIfAlone(this.state.room);
     },
 
     onRoomMemberMembership: function(ev, member, oldMembership) {
@@ -1135,11 +1139,14 @@ module.exports = React.createClass({
     },
 
     onPinnedClick: function() {
-        this.setState({showingPinned: !this.state.showingPinned, searching: false});
+        const nowShowingPinned = !this.state.showingPinned;
+        const roomId = this.state.room.roomId;
+        this.setState({showingPinned: nowShowingPinned, searching: false});
+        SettingsStore.setValue("PinnedEvents.isOpen", roomId, SettingLevel.ROOM_DEVICE, nowShowingPinned);
     },
 
     onSettingsClick: function() {
-        this.showSettings(true);
+        dis.dispatch({ action: 'open_room_settings' });
     },
 
     onSettingsSaveClick: function() {
@@ -1172,24 +1179,20 @@ module.exports = React.createClass({
                 });
                 // still editing room settings
             } else {
-                this.setState({
-                    editingRoomSettings: false,
-                });
+                dis.dispatch({ action: 'close_settings' });
             }
         }).finally(() => {
             this.setState({
                 uploadingRoomSettings: false,
-                editingRoomSettings: false,
             });
+            dis.dispatch({ action: 'close_settings' });
         }).done();
     },
 
     onCancelClick: function() {
         console.log("updateTint from onCancelClick");
         this.updateTint();
-        this.setState({
-            editingRoomSettings: false,
-        });
+        dis.dispatch({ action: 'close_settings' });
         if (this.state.forwardingEvent) {
             dis.dispatch({
                 action: 'forward_event',
@@ -1406,13 +1409,6 @@ module.exports = React.createClass({
         });*/
     },
 
-    showSettings: function(show) {
-        // XXX: this is a bit naughty; we should be doing this via props
-        if (show) {
-            this.setState({editingRoomSettings: true});
-        }
-    },
-
     /**
      * called by the parent component when PageUp/Down/etc is pressed.
      *

src/components/structures/TagPanel.js

@@ -84,7 +84,10 @@ const TagPanel = React.createClass({
     },
 
     onMouseDown(e) {
-        dis.dispatch({action: 'deselect_tags'});
+        // only dispatch if its not a no-op
+        if (this.state.selectedTags.length > 0) {
+            dis.dispatch({action: 'deselect_tags'});
+        }
     },
 
     onCreateGroupClick(ev) {
@@ -113,17 +116,18 @@ const TagPanel = React.createClass({
             />;
         });
 
-        const clearButton = this.state.selectedTags.length > 0 ?
-            <TintableSvg src="img/icons-close.svg" width="24" height="24"
-                alt={_t("Clear filter")}
-                title={_t("Clear filter")}
-            /> :
-            <div />;
+        let clearButton;
+        if (this.state.selectedTags.length > 0) {
+            clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
+                <TintableSvg src="img/icons-close.svg" width="24" height="24"
+                             alt={_t("Clear filter")}
+                             title={_t("Clear filter")}
+                />
+            </AccessibleButton>;
+        }
 
         return <div className="mx_TagPanel">
-            <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
-                { clearButton }
-            </AccessibleButton>
+            { clearButton }
             <div className="mx_TagPanel_divider" />
             <GeminiScrollbarWrapper
                 className="mx_TagPanel_scroller"

src/components/structures/UserSettings.js

@@ -284,7 +284,13 @@ module.exports = React.createClass({
         this.setState({ electron_settings: settings });
     },
 
-    _refreshMediaDevices: function() {
+    _refreshMediaDevices: function(stream) {
+        if (stream) {
+            // kill stream so that we don't leave it lingering around with webcam enabled etc
+            // as here we called gUM to ask user for permission to their device names only
+            stream.getTracks().forEach((track) => track.stop());
+        }
+
         Promise.resolve().then(() => {
             return CallMediaHandler.getDevices();
         }).then((mediaDevices) => {

src/components/structures/login/Login.js

@@ -399,7 +399,7 @@ module.exports = React.createClass({
         if (this.props.enableGuest) {
             loginAsGuestJsx =
                 <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
-                    { _t('Login as guest') }
+                    { _t('Try the app first') }
                 </a>;
         }