Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/click_username_state_ev

src/Analytics.js

@@ -39,9 +39,17 @@ function getRedactedHash(hash) {
     return hash.replace(hashRegex, "#/$1");
 }
 
-// Return the current origin and hash separated with a `/`. This does not include query parameters.
+// Return the current origin, path and hash separated with a `/`. This does
+// not include query parameters.
 function getRedactedUrl() {
-    const { origin, pathname, hash } = window.location;
+    const { origin, hash } = window.location;
+    let { pathname } = window.location;
+
+    // Redact paths which could contain unexpected PII
+    if (origin.startsWith('file://')) {
+        pathname = "/<redacted>/";
+    }
+
     return origin + pathname + getRedactedHash(hash);
 }
 
@@ -191,9 +199,9 @@ class Analytics {
         this._paq.push(['trackPageView']);
     }
 
-    trackEvent(category, action, name) {
+    trackEvent(category, action, name, value) {
         if (this.disabled) return;
-        this._paq.push(['trackEvent', category, action, name]);
+        this._paq.push(['trackEvent', category, action, name, value]);
     }
 
     logout() {

src/CallHandler.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -60,6 +60,8 @@ import { _t } from './languageHandler';
 import Matrix from 'matrix-js-sdk';
 import dis from './dispatcher';
 import { showUnknownDeviceDialogForCalls } from './cryptodevices';
+import SettingsStore from "./settings/SettingsStore";
+import WidgetUtils from './utils/WidgetUtils';
 
 global.mxCalls = {
     //room_id: MatrixCall
@@ -123,7 +125,7 @@ function _setCallListeners(call) {
                 description: _t(
                     "There are unknown devices in this room: "+
                     "if you proceed without verifying them, it will be "+
-                    "possible for someone to eavesdrop on your call."
+                    "possible for someone to eavesdrop on your call.",
                 ),
                 button: _t('Review Devices'),
                 onFinished: function(confirmed) {
@@ -246,66 +248,58 @@ function _onAction(payload) {
 
     switch (payload.action) {
         case 'place_call':
-            if (module.exports.getAnyActiveCall()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
-                    title: _t('Existing Call'),
-                    description: _t('You are already in a call.'),
-                });
-                return; // don't allow >1 call to be placed.
-            }
+            {
+                if (module.exports.getAnyActiveCall()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Existing Call', ErrorDialog, {
+                        title: _t('Existing Call'),
+                        description: _t('You are already in a call.'),
+                    });
+                    return; // don't allow >1 call to be placed.
+                }
 
-            // if the runtime env doesn't do VoIP, whine.
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
-                    title: _t('VoIP is unsupported'),
-                    description: _t('You cannot place VoIP calls in this browser.'),
-                });
-                return;
-            }
+                // if the runtime env doesn't do VoIP, whine.
+                if (!MatrixClientPeg.get().supportsVoip()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
+                        title: _t('VoIP is unsupported'),
+                        description: _t('You cannot place VoIP calls in this browser.'),
+                    });
+                    return;
+                }
 
-            var room = MatrixClientPeg.get().getRoom(payload.room_id);
-            if (!room) {
-                console.error("Room %s does not exist.", payload.room_id);
-                return;
-            }
+                const room = MatrixClientPeg.get().getRoom(payload.room_id);
+                if (!room) {
+                    console.error("Room %s does not exist.", payload.room_id);
+                    return;
+                }
 
-            var members = room.getJoinedMembers();
-            if (members.length <= 1) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
-                    description: _t('You cannot place a call with yourself.'),
-                });
-                return;
-            } else if (members.length === 2) {
-                console.log("Place %s call in %s", payload.type, payload.room_id);
-                const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id);
-                placeCall(call);
-            } else { // > 2
-                dis.dispatch({
-                    action: "place_conference_call",
-                    room_id: payload.room_id,
-                    type: payload.type,
-                    remote_element: payload.remote_element,
-                    local_element: payload.local_element,
-                });
+                const members = room.getJoinedMembers();
+                if (members.length <= 1) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Cannot place call with self', ErrorDialog, {
+                        description: _t('You cannot place a call with yourself.'),
+                    });
+                    return;
+                } else if (members.length === 2) {
+                    console.log("Place %s call in %s", payload.type, payload.room_id);
+                    const call = Matrix.createNewMatrixCall(MatrixClientPeg.get(), payload.room_id);
+                    placeCall(call);
+                } else { // > 2
+                    dis.dispatch({
+                        action: "place_conference_call",
+                        room_id: payload.room_id,
+                        type: payload.type,
+                        remote_element: payload.remote_element,
+                        local_element: payload.local_element,
+                    });
+                }
             }
             break;
         case 'place_conference_call':
             console.log("Place conference call in %s", payload.room_id);
-            if (!ConferenceHandler) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'Conference call unsupported client', ErrorDialog, {
-                    description: _t('Conference calls are not supported in this client'),
-                });
-            } else if (!MatrixClientPeg.get().supportsVoip()) {
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
-                    title: _t('VoIP is unsupported'),
-                    description: _t('You cannot place VoIP calls in this browser.'),
-                });
-            } else if (MatrixClientPeg.get().isRoomEncrypted(payload.room_id)) {
+
+            if (MatrixClientPeg.get().isRoomEncrypted(payload.room_id)) {
                 // Conference calls are implemented by sending the media to central
                 // server which combines the audio from all the participants together
                 // into a single stream. This is incompatible with end-to-end encryption
@@ -316,47 +310,75 @@ function _onAction(payload) {
                 Modal.createTrackedDialog('Call Handler', 'Conference calls unsupported e2e', ErrorDialog, {
                     description: _t('Conference calls are not supported in encrypted rooms'),
                 });
+                return;
+            }
+
+            if (SettingsStore.isFeatureEnabled('feature_jitsi')) {
+                _startCallApp(payload.room_id, payload.type);
             } else {
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createTrackedDialog('Call Handler', 'Conference calling in development', QuestionDialog, {
-                    title: _t('Warning!'),
-                    description: _t('Conference calling is in development and may not be reliable.'),
-                    onFinished: (confirm)=>{
-                        if (confirm) {
-                            ConferenceHandler.createNewMatrixCall(
-                                MatrixClientPeg.get(), payload.room_id,
-                            ).done(function(call) {
-                                placeCall(call);
-                            }, function(err) {
-                                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                                console.error("Conference call failed: " + err);
-                                Modal.createTrackedDialog('Call Handler', 'Failed to set up conference call', ErrorDialog, {
-                                    title: _t('Failed to set up conference call'),
-                                    description: _t('Conference call failed.') + ' ' + ((err && err.message) ? err.message : ''),
+                if (!ConferenceHandler) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Conference call unsupported client', ErrorDialog, {
+                        description: _t('Conference calls are not supported in this client'),
+                    });
+                } else if (!MatrixClientPeg.get().supportsVoip()) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Call Handler', 'VoIP is unsupported', ErrorDialog, {
+                        title: _t('VoIP is unsupported'),
+                        description: _t('You cannot place VoIP calls in this browser.'),
+                    });
+                } else {
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    Modal.createTrackedDialog('Call Handler', 'Conference calling in development', QuestionDialog, {
+                        title: _t('Warning!'),
+                        description: _t('Conference calling is in development and may not be reliable.'),
+                        onFinished: (confirm)=>{
+                            if (confirm) {
+                                ConferenceHandler.createNewMatrixCall(
+                                    MatrixClientPeg.get(), payload.room_id,
+                                ).done(function(call) {
+                                    placeCall(call);
+                                }, function(err) {
+                                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                                    console.error("Conference call failed: " + err);
+                                    Modal.createTrackedDialog(
+                                        'Call Handler',
+                                        'Failed to set up conference call',
+                                        ErrorDialog,
+                                        {
+                                            title: _t('Failed to set up conference call'),
+                                            description: (
+                                                _t('Conference call failed.') +
+                                                ' ' + ((err && err.message) ? err.message : '')
+                                            ),
+                                        },
+                                    );
                                 });
-                            });
-                        }
-                    },
-                });
+                            }
+                        },
+                    });
+                }
             }
             break;
         case 'incoming_call':
-            if (module.exports.getAnyActiveCall()) {
-                // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
-                // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
-                // in future we could signal a "local busy" as a warning to the caller.
-                // see https://github.com/vector-im/vector-web/issues/1964
-                return;
-            }
+            {
+                if (module.exports.getAnyActiveCall()) {
+                    // ignore multiple incoming calls. in future, we may want a line-1/line-2 setup.
+                    // we avoid rejecting with "busy" in case the user wants to answer it on a different device.
+                    // in future we could signal a "local busy" as a warning to the caller.
+                    // see https://github.com/vector-im/vector-web/issues/1964
+                    return;
+                }
 
-            // if the runtime env doesn't do VoIP, stop here.
-            if (!MatrixClientPeg.get().supportsVoip()) {
-                return;
-            }
+                // if the runtime env doesn't do VoIP, stop here.
+                if (!MatrixClientPeg.get().supportsVoip()) {
+                    return;
+                }
 
-            var call = payload.call;
-            _setCallListeners(call);
-            _setCallState(call, call.roomId, "ringing");
+                const call = payload.call;
+                _setCallListeners(call);
+                _setCallState(call, call.roomId, "ringing");
+            }
             break;
         case 'hangup':
             if (!calls[payload.room_id]) {
@@ -378,6 +400,71 @@ function _onAction(payload) {
             break;
     }
 }
+
+function _startCallApp(roomId, type) {
+    dis.dispatch({
+        action: 'appsDrawer',
+        show: true,
+    });
+
+    const room = MatrixClientPeg.get().getRoom(roomId);
+    if (!room) {
+        console.error("Attempted to start conference call widget in unknown room: " + roomId);
+        return;
+    }
+
+    const currentJitsiWidgets = WidgetUtils.getRoomWidgets(room).filter((ev) => {
+        return ev.getContent().type === 'jitsi';
+    });
+    if (currentJitsiWidgets.length > 0) {
+        console.warn(
+            "Refusing to start conference call widget in " + roomId +
+            " a conference call widget is already present",
+        );
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        Modal.createTrackedDialog('Already have Jitsi Widget', '', ErrorDialog, {
+            title: _t('Call in Progress'),
+            description: _t('A call is already in progress!'),
+        });
+        return;
+    }
+
+    // This inherits its poor naming from the field of the same name that goes into
+    // the event. It's just a random string to make the Jitsi URLs unique.
+    const widgetSessionId = Math.random().toString(36).substring(2);
+    const confId = room.roomId.replace(/[^A-Za-z0-9]/g, '') + widgetSessionId;
+    // NB. we can't just encodeURICompoent all of these because the $ signs need to be there
+    // (but currently the only thing that needs encoding is the confId)
+    const queryString = [
+        'confId='+encodeURIComponent(confId),
+        'isAudioConf='+(type === 'voice' ? 'true' : 'false'),
+        'displayName=$matrix_display_name',
+        'avatarUrl=$matrix_avatar_url',
+        'email=$matrix_user_id',
+    ].join('&');
+    const widgetUrl = (
+        'https://scalar.vector.im/api/widgets' +
+        '/jitsi.html?' +
+        queryString
+    );
+
+    const widgetData = { widgetSessionId };
+
+    const widgetId = (
+        'jitsi_' +
+        MatrixClientPeg.get().credentials.userId +
+        '_' +
+        Date.now()
+    );
+
+    WidgetUtils.setRoomWidget(roomId, widgetId, 'jitsi', widgetUrl, 'Jitsi', widgetData).then(() => {
+        console.log('Jitsi widget added');
+    }).catch((e) => {
+        console.error(e);
+    });
+}
+
 // FIXME: Nasty way of making sure we only register
 // with the dispatcher once
 if (!global.mxCallHandler) {

src/CallMediaHandler.js

@@ -22,34 +22,44 @@ export default {
         // Only needed for Electron atm, though should work in modern browsers
         // once permission has been granted to the webapp
         return navigator.mediaDevices.enumerateDevices().then(function(devices) {
-            const audioIn = [];
-            const videoIn = [];
+            const audiooutput = [];
+            const audioinput = [];
+            const videoinput = [];
 
             if (devices.some((device) => !device.label)) return false;
 
             devices.forEach((device) => {
                 switch (device.kind) {
-                    case 'audioinput': audioIn.push(device); break;
-                    case 'videoinput': videoIn.push(device); break;
+                    case 'audiooutput': audiooutput.push(device); break;
+                    case 'audioinput': audioinput.push(device); break;
+                    case 'videoinput': videoinput.push(device); break;
                 }
             });
 
             // console.log("Loaded WebRTC Devices", mediaDevices);
             return {
-                audioinput: audioIn,
-                videoinput: videoIn,
+                audiooutput,
+                audioinput,
+                videoinput,
             };
         }, (error) => { console.log('Unable to refresh WebRTC Devices: ', error); });
     },
 
     loadDevices: function() {
+        const audioOutDeviceId = SettingsStore.getValue("webrtc_audiooutput");
         const audioDeviceId = SettingsStore.getValue("webrtc_audioinput");
         const videoDeviceId = SettingsStore.getValue("webrtc_videoinput");
 
+        Matrix.setMatrixCallAudioOutput(audioOutDeviceId);
         Matrix.setMatrixCallAudioInput(audioDeviceId);
         Matrix.setMatrixCallVideoInput(videoDeviceId);
     },
 
+    setAudioOutput: function(deviceId) {
+        SettingsStore.setValue("webrtc_audiooutput", null, SettingLevel.DEVICE, deviceId);
+        Matrix.setMatrixCallAudioOutput(deviceId);
+    },
+
     setAudioInput: function(deviceId) {
         SettingsStore.setValue("webrtc_audioinput", null, SettingLevel.DEVICE, deviceId);
         Matrix.setMatrixCallAudioInput(deviceId);

src/ContentMessages.js

@@ -243,6 +243,7 @@ function uploadFile(matrixClient, roomId, file, progressHandler) {
             const blob = new Blob([encryptResult.data]);
             return matrixClient.uploadContent(blob, {
                 progressHandler: progressHandler,
+                includeFilename: false,
             }).then(function(url) {
                 // If the attachment is encrypted then bundle the URL along
                 // with the information needed to decrypt the attachment and

src/DecryptionFailureTracker.js

@@ -0,0 +1,172 @@
+/*
+Copyright 2018 New Vector 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.
+*/
+
+class DecryptionFailure {
+    constructor(failedEventId) {
+        this.failedEventId = failedEventId;
+        this.ts = Date.now();
+    }
+}
+
+export default class DecryptionFailureTracker {
+    // Array of items of type DecryptionFailure. Every `CHECK_INTERVAL_MS`, this list
+    // is checked for failures that happened > `GRACE_PERIOD_MS` ago. Those that did
+    // are added to `failuresToTrack`.
+    failures = [];
+
+    // Every TRACK_INTERVAL_MS (so as to spread the number of hits done on Analytics),
+    // one DecryptionFailure of this FIFO is removed and tracked.
+    failuresToTrack = [];
+
+    // Event IDs of failures that were tracked previously
+    trackedEventHashMap = {
+        // [eventId]: true
+    };
+
+    // Set to an interval ID when `start` is called
+    checkInterval = null;
+    trackInterval = null;
+
+    // Spread the load on `Analytics` by tracking at a low frequency, `TRACK_INTERVAL_MS`.
+    static TRACK_INTERVAL_MS = 60000;
+
+    // Call `checkFailures` every `CHECK_INTERVAL_MS`.
+    static CHECK_INTERVAL_MS = 5000;
+
+    // Give events a chance to be decrypted by waiting `GRACE_PERIOD_MS` before moving
+    // the failure to `failuresToTrack`.
+    static GRACE_PERIOD_MS = 60000;
+
+    constructor(fn) {
+        if (!fn || typeof fn !== 'function') {
+            throw new Error('DecryptionFailureTracker requires tracking function');
+        }
+
+        this.trackDecryptionFailure = fn;
+    }
+
+    // loadTrackedEventHashMap() {
+    //     this.trackedEventHashMap = JSON.parse(localStorage.getItem('mx-decryption-failure-event-id-hashes')) || {};
+    // }
+
+    // saveTrackedEventHashMap() {
+    //     localStorage.setItem('mx-decryption-failure-event-id-hashes', JSON.stringify(this.trackedEventHashMap));
+    // }
+
+    eventDecrypted(e) {
+        if (e.isDecryptionFailure()) {
+            this.addDecryptionFailureForEvent(e);
+        } else {
+            // Could be an event in the failures, remove it
+            this.removeDecryptionFailuresForEvent(e);
+        }
+    }
+
+    addDecryptionFailureForEvent(e) {
+        this.failures.push(new DecryptionFailure(e.getId()));
+    }
+
+    removeDecryptionFailuresForEvent(e) {
+        this.failures = this.failures.filter((f) => f.failedEventId !== e.getId());
+    }
+
+    /**
+     * Start checking for and tracking failures.
+     */
+    start() {
+        this.checkInterval = setInterval(
+            () => this.checkFailures(Date.now()),
+            DecryptionFailureTracker.CHECK_INTERVAL_MS,
+        );
+
+        this.trackInterval = setInterval(
+            () => this.trackFailure(),
+            DecryptionFailureTracker.TRACK_INTERVAL_MS,
+        );
+    }
+
+    /**
+     * Clear state and stop checking for and tracking failures.
+     */
+    stop() {
+        clearInterval(this.checkInterval);
+        clearInterval(this.trackInterval);
+
+        this.failures = [];
+        this.failuresToTrack = [];
+    }
+
+    /**
+     * Mark failures that occured before nowTs - GRACE_PERIOD_MS as failures that should be
+     * tracked. Only mark one failure per event ID.
+     * @param {number} nowTs the timestamp that represents the time now.
+     */
+    checkFailures(nowTs) {
+        const failuresGivenGrace = [];
+        const failuresNotReady = [];
+        while (this.failures.length > 0) {
+            const f = this.failures.shift();
+            if (nowTs > f.ts + DecryptionFailureTracker.GRACE_PERIOD_MS) {
+                failuresGivenGrace.push(f);
+            } else {
+                failuresNotReady.push(f);
+            }
+        }
+        this.failures = failuresNotReady;
+
+        // Only track one failure per event
+        const dedupedFailuresMap = failuresGivenGrace.reduce(
+            (map, failure) => {
+                if (!this.trackedEventHashMap[failure.failedEventId]) {
+                    return map.set(failure.failedEventId, failure);
+                } else {
+                    return map;
+                }
+            },
+            // Use a map to preseve key ordering
+            new Map(),
+        );
+
+        const trackedEventIds = [...dedupedFailuresMap.keys()];
+
+        this.trackedEventHashMap = trackedEventIds.reduce(
+            (result, eventId) => ({...result, [eventId]: true}),
+            this.trackedEventHashMap,
+        );
+
+        // Commented out for now for expediency, we need to consider unbound nature of storing
+        // this in localStorage
+        // this.saveTrackedEventHashMap();
+
+        const dedupedFailures = dedupedFailuresMap.values();
+
+        this.failuresToTrack = [...this.failuresToTrack, ...dedupedFailures];
+    }
+
+    /**
+     * If there are failures that should be tracked, call the given trackDecryptionFailure
+     * function with the number of failures that should be tracked.
+     */
+    trackFailure() {
+        if (this.failuresToTrack.length > 0) {
+            // Remove all failures, and expose the number of failures for now.
+            //
+            // TODO: Track a histogram of error types to cardinailty to allow for
+            // aggregation by error type.
+            this.trackDecryptionFailure(this.failuresToTrack.splice(0).length);
+        }
+    }
+}

src/HtmlUtils.js

@@ -216,10 +216,17 @@ const sanitizeHtmlParams = {
                     m = attribs.href.match(linkifyMatrix.MATRIXTO_URL_PATTERN);
                     if (m) {
                         const entity = m[1];
-                        if (entity[0] === '@') {
-                            attribs.href = '#/user/' + entity;
-                        } else if (entity[0] === '#' || entity[0] === '!') {
-                            attribs.href = '#/room/' + entity;
+                        switch (entity[0]) {
+                            case '@':
+                                attribs.href = '#/user/' + entity;
+                                break;
+                            case '+':
+                                attribs.href = '#/group/' + entity;
+                                break;
+                            case '#':
+                            case '!':
+                                attribs.href = '#/room/' + entity;
+                                break;
                         }
                         delete attribs.target;
                     }

src/ScalarMessaging.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -231,11 +232,12 @@ Example:
 }
 */
 
-const SdkConfig = require('./SdkConfig');
-const MatrixClientPeg = require("./MatrixClientPeg");
-const MatrixEvent = require("matrix-js-sdk").MatrixEvent;
-const dis = require("./dispatcher");
-const Widgets = require('./utils/widgets');
+import SdkConfig from './SdkConfig';
+import MatrixClientPeg from './MatrixClientPeg';
+import { MatrixEvent } from 'matrix-js-sdk';
+import dis from './dispatcher';
+import WidgetUtils from './utils/WidgetUtils';
+import RoomViewStore from './stores/RoomViewStore';
 import { _t } from './languageHandler';
 
 function sendResponse(event, res) {
@@ -286,51 +288,6 @@ function inviteUser(event, roomId, userId) {
     });
 }
 
-/**
- * Returns a promise that resolves when a widget with the given
- * ID has been added as a user widget (ie. the accountData event
- * arrives) or rejects after a timeout
- *
- * @param {string} widgetId The ID of the widget to wait for
- * @param {boolean} add True to wait for the widget to be added,
- *     false to wait for it to be deleted.
- * @returns {Promise} that resolves when the widget is available
- */
-function waitForUserWidget(widgetId, add) {
-    return new Promise((resolve, reject) => {
-        const currentAccountDataEvent = MatrixClientPeg.get().getAccountData('m.widgets');
-
-        // Tests an account data event, returning true if it's in the state
-        // we're waiting for it to be in
-        function eventInIntendedState(ev) {
-            if (!ev || !currentAccountDataEvent.getContent()) return false;
-            if (add) {
-                return ev.getContent()[widgetId] !== undefined;
-            } else {
-                return ev.getContent()[widgetId] === undefined;
-            }
-        }
-
-        if (eventInIntendedState(currentAccountDataEvent)) {
-            resolve();
-            return;
-        }
-
-        function onAccountData(ev) {
-            if (eventInIntendedState(currentAccountDataEvent)) {
-                MatrixClientPeg.get().removeListener('accountData', onAccountData);
-                clearTimeout(timerId);
-                resolve();
-            }
-        }
-        const timerId = setTimeout(() => {
-            MatrixClientPeg.get().removeListener('accountData', onAccountData);
-            reject(new Error("Timed out waiting for widget ID " + widgetId + " to appear"));
-        }, 10000);
-        MatrixClientPeg.get().on('accountData', onAccountData);
-    });
-}
-
 function setWidget(event, roomId) {
     const widgetId = event.data.widget_id;
     const widgetType = event.data.type;
@@ -339,12 +296,6 @@ function setWidget(event, roomId) {
     const widgetData = event.data.data; // optional
     const userWidget = event.data.userWidget;
 
-    const client = MatrixClientPeg.get();
-    if (!client) {
-        sendError(event, _t('You need to be logged in.'));
-        return;
-    }
-
     // both adding/removing widgets need these checks
     if (!widgetId || widgetUrl === undefined) {
         sendError(event, _t("Unable to create widget."), new Error("Missing required widget fields."));
@@ -371,42 +322,8 @@ function setWidget(event, roomId) {
         }
     }
 
-    let content = {
-        type: widgetType,
-        url: widgetUrl,
-        name: widgetName,
-        data: widgetData,
-    };
-
     if (userWidget) {
-        const client = MatrixClientPeg.get();
-        const userWidgets = Widgets.getUserWidgets();
-
-        // Delete existing widget with ID
-        try {
-            delete userWidgets[widgetId];
-        } catch (e) {
-            console.error(`$widgetId is non-configurable`);
-        }
-
-        // Add new widget / update
-        if (widgetUrl !== null) {
-            userWidgets[widgetId] = {
-                content: content,
-                sender: client.getUserId(),
-                state_key: widgetId,
-                type: 'm.widget',
-                id: widgetId,
-            };
-        }
-
-        // This starts listening for when the echo comes back from the server
-        // since the widget won't appear added until this happens. If we don't
-        // wait for this, the action will complete but if the user is fast enough,
-        // the widget still won't actually be there.
-        client.setAccountData('m.widgets', userWidgets).then(() => {
-            return waitForUserWidget(widgetId, widgetUrl !== null);
-        }).then(() => {
+        WidgetUtils.setUserWidget(widgetId, widgetType, widgetUrl, widgetName, widgetData).then(() => {
             sendResponse(event, {
                 success: true,
             });
@@ -419,15 +336,7 @@ function setWidget(event, roomId) {
         if (!roomId) {
             sendError(event, _t('Missing roomId.'), null);
         }
-
-        if (widgetUrl === null) { // widget is being deleted
-            content = {};
-        }
-        // TODO - Room widgets need to be moved to 'm.widget' state events
-        // https://docs.google.com/document/d/1uPF7XWY_dXTKVKV7jZQ2KmsI19wn9-kFRgQ1tFQP7wQ/edit?usp=sharing
-        client.sendStateEvent(roomId, "im.vector.modular.widgets", content, widgetId).done(() => {
-            // XXX: We should probably wait for the echo of the state event to come back from the server,
-            // as we do with user widgets.
+        WidgetUtils.setRoomWidget(roomId, widgetId, widgetType, widgetUrl, widgetName, widgetData).then(() => {
             sendResponse(event, {
                 success: true,
             });
@@ -451,21 +360,13 @@ function getWidgets(event, roomId) {
             sendError(event, _t('This room is not recognised.'));
             return;
         }
-        // TODO - Room widgets need to be moved to 'm.widget' state events
-        // https://docs.google.com/document/d/1uPF7XWY_dXTKVKV7jZQ2KmsI19wn9-kFRgQ1tFQP7wQ/edit?usp=sharing
-        const stateEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
-        // Only return widgets which have required fields
-        if (room) {
-            stateEvents.forEach((ev) => {
-                if (ev.getContent().type && ev.getContent().url) {
-                    widgetStateEvents.push(ev.event); // return the raw event
-                }
-            });
-        }
+        // XXX: This gets the raw event object (I think because we can't
+        // send the MatrixEvent over postMessage?)
+        widgetStateEvents = WidgetUtils.getRoomWidgets(room).map((ev) => ev.event);
     }
 
     // Add user widgets (not linked to a specific room)
-    const userWidgets = Widgets.getUserWidgetsArray();
+    const userWidgets = WidgetUtils.getUserWidgetsArray();
     widgetStateEvents = widgetStateEvents.concat(userWidgets);
 
     sendResponse(event, widgetStateEvents);
@@ -637,19 +538,6 @@ function returnStateEvent(event, roomId, eventType, stateKey) {
     sendResponse(event, stateEvent.getContent());
 }
 
-let currentRoomId = null;
-let currentRoomAlias = null;
-
-// Listen for when a room is viewed
-dis.register(onAction);
-function onAction(payload) {
-    if (payload.action !== "view_room") {
-        return;
-    }
-    currentRoomId = payload.room_id;
-    currentRoomAlias = payload.room_alias;
-}
-
 const onMessage = function(event) {
     if (!event.origin) { // stupid chrome
         event.origin = event.originalEvent.origin;
@@ -700,80 +588,63 @@ const onMessage = function(event) {
             return;
         }
     }
-    let promise = Promise.resolve(currentRoomId);
-    if (!currentRoomId) {
-        if (!currentRoomAlias) {
-            sendError(event, _t('Must be viewing a room'));
-            return;
-        }
-        // no room ID but there is an alias, look it up.
-        console.log("Looking up alias " + currentRoomAlias);
-        promise = MatrixClientPeg.get().getRoomIdForAlias(currentRoomAlias).then((res) => {
-            return res.room_id;
-        });
+
+    if (roomId !== RoomViewStore.getRoomId()) {
+        sendError(event, _t('Room %(roomId)s not visible', {roomId: roomId}));
+        return;
     }
 
-    promise.then((viewingRoomId) => {
-        if (roomId !== viewingRoomId) {
-            sendError(event, _t('Room %(roomId)s not visible', {roomId: roomId}));
-            return;
-        }
+    // Get and set room-based widgets
+    if (event.data.action === "get_widgets") {
+        getWidgets(event, roomId);
+        return;
+    } else if (event.data.action === "set_widget") {
+        setWidget(event, roomId);
+        return;
+    }
 
-        // Get and set room-based widgets
-        if (event.data.action === "get_widgets") {
-            getWidgets(event, roomId);
-            return;
-        } else if (event.data.action === "set_widget") {
-            setWidget(event, roomId);
-            return;
-        }
+    // These APIs don't require userId
+    if (event.data.action === "join_rules_state") {
+        getJoinRules(event, roomId);
+        return;
+    } else if (event.data.action === "set_plumbing_state") {
+        setPlumbingState(event, roomId, event.data.status);
+        return;
+    } else if (event.data.action === "get_membership_count") {
+        getMembershipCount(event, roomId);
+        return;
+    } else if (event.data.action === "get_room_enc_state") {
+        getRoomEncState(event, roomId);
+        return;
+    } else if (event.data.action === "can_send_event") {
+        canSendEvent(event, roomId);
+        return;
+    }
 
-        // These APIs don't require userId
-        if (event.data.action === "join_rules_state") {
-            getJoinRules(event, roomId);
-            return;
-        } else if (event.data.action === "set_plumbing_state") {
-            setPlumbingState(event, roomId, event.data.status);
-            return;
-        } else if (event.data.action === "get_membership_count") {
-            getMembershipCount(event, roomId);
-            return;
-        } else if (event.data.action === "get_room_enc_state") {
-            getRoomEncState(event, roomId);
-            return;
-        } else if (event.data.action === "can_send_event") {
-            canSendEvent(event, roomId);
-            return;
-        }
-
-        if (!userId) {
-            sendError(event, _t('Missing user_id in request'));
-            return;
-        }
-        switch (event.data.action) {
-            case "membership_state":
-                getMembershipState(event, roomId, userId);
-                break;
-            case "invite":
-                inviteUser(event, roomId, userId);
-                break;
-            case "bot_options":
-                botOptions(event, roomId, userId);
-                break;
-            case "set_bot_options":
-                setBotOptions(event, roomId, userId);
-                break;
-            case "set_bot_power":
-                setBotPower(event, roomId, userId, event.data.level);
-                break;
-            default:
-                console.warn("Unhandled postMessage event with action '" + event.data.action +"'");
-                break;
-        }
-    }, (err) => {
-        console.error(err);
-        sendError(event, _t('Failed to lookup current room') + '.');
-    });
+    if (!userId) {
+        sendError(event, _t('Missing user_id in request'));
+        return;
+    }
+    switch (event.data.action) {
+        case "membership_state":
+            getMembershipState(event, roomId, userId);
+            break;
+        case "invite":
+            inviteUser(event, roomId, userId);
+            break;
+        case "bot_options":
+            botOptions(event, roomId, userId);
+            break;
+        case "set_bot_options":
+            setBotOptions(event, roomId, userId);
+            break;
+        case "set_bot_power":
+            setBotPower(event, roomId, userId, event.data.level);
+            break;
+        default:
+            console.warn("Unhandled postMessage event with action '" + event.data.action +"'");
+            break;
+    }
 };
 
 let listenerCount = 0;

src/SlashCommands.js

@@ -14,28 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import MatrixClientPeg from "./MatrixClientPeg";
-import dis from "./dispatcher";
-import Tinter from "./Tinter";
+
+import React from 'react';
+import MatrixClientPeg from './MatrixClientPeg';
+import dis from './dispatcher';
+import Tinter from './Tinter';
 import sdk from './index';
-import { _t } from './languageHandler';
+import {_t, _td} from './languageHandler';
 import Modal from './Modal';
-import SettingsStore, {SettingLevel} from "./settings/SettingsStore";
+import SettingsStore, {SettingLevel} from './settings/SettingsStore';
 
 
 class Command {
-    constructor(name, paramArgs, runFn) {
-        this.name = name;
-        this.paramArgs = paramArgs;
+    constructor({name, args='', description, runFn}) {
+        this.command = '/' + name;
+        this.args = args;
+        this.description = description;
         this.runFn = runFn;
     }
 
     getCommand() {
-        return "/" + this.name;
+        return this.command;
     }
 
     getCommandWithArgs() {
-        return this.getCommand() + " " + this.paramArgs;
+        return this.getCommand() + " " + this.args;
     }
 
     run(roomId, args) {
@@ -47,16 +50,12 @@ class Command {
     }
 }
 
-function reject(msg) {
-    return {
-        error: msg,
-    };
+function reject(error) {
+    return {error};
 }
 
 function success(promise) {
-    return {
-        promise: promise,
-    };
+    return {promise};
 }
 
 /* Disable the "unexpected this" error for these commands - all of the run
@@ -65,352 +64,408 @@ function success(promise) {
 
 /* eslint-disable babel/no-invalid-this */
 
-const commands = {
-    ddg: new Command("ddg", "<query>", function(roomId, args) {
-        const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
-        // TODO Don't explain this away, actually show a search UI here.
-        Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, {
-            title: _t('/ddg is not a command'),
-            description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
-        });
-        return success();
+export const CommandMap = {
+    ddg: new Command({
+        name: 'ddg',
+        args: '<query>',
+        description: _td('Searches DuckDuckGo for results'),
+        runFn: function(roomId, args) {
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+            // TODO Don't explain this away, actually show a search UI here.
+            Modal.createTrackedDialog('Slash Commands', '/ddg is not a command', ErrorDialog, {
+                title: _t('/ddg is not a command'),
+                description: _t('To use it, just wait for autocomplete results to load and tab through them.'),
+            });
+            return success();
+        },
     }),
 
-    // Change your nickname
-    nick: new Command("nick", "<display_name>", function(roomId, args) {
-        if (args) {
-            return success(
-                MatrixClientPeg.get().setDisplayName(args),
-            );
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Changes the colorscheme of your current room
-    tint: new Command("tint", "<color1> [<color2>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))( +(#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})))?$/);
-            if (matches) {
-                Tinter.tint(matches[1], matches[4]);
-                const colorScheme = {};
-                colorScheme.primary_color = matches[1];
-                if (matches[4]) {
-                    colorScheme.secondary_color = matches[4];
-                } else {
-                    colorScheme.secondary_color = colorScheme.primary_color;
-                }
-                return success(
-                    SettingsStore.setValue("roomColor", roomId, SettingLevel.ROOM_ACCOUNT, colorScheme),
-                );
+    nick: new Command({
+        name: 'nick',
+        args: '<display_name>',
+        description: _td('Changes your display nickname'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().setDisplayName(args));
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Change the room topic
-    topic: new Command("topic", "<topic>", function(roomId, args) {
-        if (args) {
-            return success(
-                MatrixClientPeg.get().setRoomTopic(roomId, args),
-            );
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Invite a user
-    invite: new Command("invite", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().invite(roomId, matches[1]),
-                );
-            }
-        }
-        return reject(this.getUsage());
-    }),
-
-    // Join a room
-    join: new Command("join", "#alias:domain", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                let roomAlias = matches[1];
-                if (roomAlias[0] !== '#') {
-                    return reject(this.getUsage());
-                }
-                if (!roomAlias.match(/:/)) {
-                    roomAlias += ':' + MatrixClientPeg.get().getDomain();
-                }
-
-                dis.dispatch({
-                    action: 'view_room',
-                    room_alias: roomAlias,
-                    auto_join: true,
-                });
-
-                return success();
-            }
-        }
-        return reject(this.getUsage());
-    }),
-
-    part: new Command("part", "[#alias:domain]", function(roomId, args) {
-        let targetRoomId;
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                let roomAlias = matches[1];
-                if (roomAlias[0] !== '#') {
-                    return reject(this.getUsage());
-                }
-                if (!roomAlias.match(/:/)) {
-                    roomAlias += ':' + MatrixClientPeg.get().getDomain();
-                }
-
-                // Try to find a room with this alias
-                const rooms = MatrixClientPeg.get().getRooms();
-                for (let i = 0; i < rooms.length; i++) {
-                    const aliasEvents = rooms[i].currentState.getStateEvents(
-                        "m.room.aliases",
-                    );
-                    for (let j = 0; j < aliasEvents.length; j++) {
-                        const aliases = aliasEvents[j].getContent().aliases || [];
-                        for (let k = 0; k < aliases.length; k++) {
-                            if (aliases[k] === roomAlias) {
-                                targetRoomId = rooms[i].roomId;
-                                break;
-                            }
-                        }
-                        if (targetRoomId) { break; }
+    tint: new Command({
+        name: 'tint',
+        args: '<color1> [<color2>]',
+        description: _td('Changes colour scheme of current room'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(#([\da-fA-F]{3}|[\da-fA-F]{6}))( +(#([\da-fA-F]{3}|[\da-fA-F]{6})))?$/);
+                if (matches) {
+                    Tinter.tint(matches[1], matches[4]);
+                    const colorScheme = {};
+                    colorScheme.primary_color = matches[1];
+                    if (matches[4]) {
+                        colorScheme.secondary_color = matches[4];
+                    } else {
+                        colorScheme.secondary_color = colorScheme.primary_color;
                     }
-                    if (targetRoomId) { break; }
-                }
-                if (!targetRoomId) {
-                    return reject(_t("Unrecognised room alias:") + ' ' + roomAlias);
+                    return success(
+                        SettingsStore.setValue('roomColor', roomId, SettingLevel.ROOM_ACCOUNT, colorScheme),
+                    );
                 }
             }
-        }
-        if (!targetRoomId) targetRoomId = roomId;
-        return success(
-            MatrixClientPeg.get().leave(targetRoomId).then(
-                function() {
-                    dis.dispatch({action: 'view_next_room'});
-                },
-            ),
-        );
+            return reject(this.getUsage());
+        },
     }),
 
-    // Kick a user from the room with an optional reason
-    kick: new Command("kick", "<userId> [<reason>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(.*))?$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().kick(roomId, matches[1], matches[3]),
-                );
+    topic: new Command({
+        name: 'topic',
+        args: '<topic>',
+        description: _td('Sets the room topic'),
+        runFn: function(roomId, args) {
+            if (args) {
+                return success(MatrixClientPeg.get().setRoomTopic(roomId, args));
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    invite: new Command({
+        name: 'invite',
+        args: '<user-id>',
+        description: _td('Invites user with given id to current room'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().invite(roomId, matches[1]));
+                }
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
+    join: new Command({
+        name: 'join',
+        args: '<room-alias>',
+        description: _td('Joins room with given alias'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    let roomAlias = matches[1];
+                    if (roomAlias[0] !== '#') return reject(this.getUsage());
+
+                    if (!roomAlias.includes(':')) {
+                        roomAlias += ':' + MatrixClientPeg.get().getDomain();
+                    }
+
+                    dis.dispatch({
+                        action: 'view_room',
+                        room_alias: roomAlias,
+                        auto_join: true,
+                    });
+
+                    return success();
+                }
+            }
+            return reject(this.getUsage());
+        },
+    }),
+
+    part: new Command({
+        name: 'part',
+        args: '[<room-alias>]',
+        description: _td('Leave room'),
+        runFn: function(roomId, args) {
+            const cli = MatrixClientPeg.get();
+
+            let targetRoomId;
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    let roomAlias = matches[1];
+                    if (roomAlias[0] !== '#') return reject(this.getUsage());
+
+                    if (!roomAlias.includes(':')) {
+                        roomAlias += ':' + cli.getDomain();
+                    }
+
+                    // Try to find a room with this alias
+                    const rooms = cli.getRooms();
+                    for (let i = 0; i < rooms.length; i++) {
+                        const aliasEvents = rooms[i].currentState.getStateEvents('m.room.aliases');
+                        for (let j = 0; j < aliasEvents.length; j++) {
+                            const aliases = aliasEvents[j].getContent().aliases || [];
+                            for (let k = 0; k < aliases.length; k++) {
+                                if (aliases[k] === roomAlias) {
+                                    targetRoomId = rooms[i].roomId;
+                                    break;
+                                }
+                            }
+                            if (targetRoomId) break;
+                        }
+                        if (targetRoomId) break;
+                    }
+                    if (!targetRoomId) return reject(_t('Unrecognised room alias:') + ' ' + roomAlias);
+                }
+            }
+
+            if (!targetRoomId) targetRoomId = roomId;
+            return success(
+                cli.leave(targetRoomId).then(function() {
+                    dis.dispatch({action: 'view_next_room'});
+                }),
+            );
+        },
+    }),
+
+    kick: new Command({
+        name: 'kick',
+        args: '<user-id> [reason]',
+        description: _td('Kicks user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(.*))?$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().kick(roomId, matches[1], matches[3]));
+                }
+            }
+            return reject(this.getUsage());
+        },
     }),
 
     // Ban a user from the room with an optional reason
-    ban: new Command("ban", "<userId> [<reason>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(.*))?$/);
-            if (matches) {
-                return success(
-                    MatrixClientPeg.get().ban(roomId, matches[1], matches[3]),
-                );
+    ban: new Command({
+        name: 'ban',
+        args: '<user-id> [reason]',
+        description: _td('Bans user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(.*))?$/);
+                if (matches) {
+                    return success(MatrixClientPeg.get().ban(roomId, matches[1], matches[3]));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Unban a user from the room
-    unban: new Command("unban", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                // Reset the user membership to "leave" to unban him
-                return success(
-                    MatrixClientPeg.get().unban(roomId, matches[1]),
-                );
+    // Unban a user from ythe room
+    unban: new Command({
+        name: 'unban',
+        args: '<user-id>',
+        description: _td('Unbans user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    // Reset the user membership to "leave" to unban him
+                    return success(MatrixClientPeg.get().unban(roomId, matches[1]));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    ignore: new Command("ignore", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                const userId = matches[1];
-                const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers();
-                ignoredUsers.push(userId); // de-duped internally in the js-sdk
-                return success(
-                    MatrixClientPeg.get().setIgnoredUsers(ignoredUsers).then(() => {
-                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                        Modal.createTrackedDialog('Slash Commands', 'User ignored', QuestionDialog, {
-                            title: _t("Ignored user"),
-                            description: (
-                                <div>
-                                    <p>{ _t("You are now ignoring %(userId)s", {userId: userId}) }</p>
-                                </div>
-                            ),
-                            hasCancelButton: false,
-                        });
-                    }),
-                );
+    ignore: new Command({
+        name: 'ignore',
+        args: '<user-id>',
+        description: _td('Ignores a user, hiding their messages from you'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const cli = MatrixClientPeg.get();
+
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const userId = matches[1];
+                    const ignoredUsers = cli.getIgnoredUsers();
+                    ignoredUsers.push(userId); // de-duped internally in the js-sdk
+                    return success(
+                        cli.setIgnoredUsers(ignoredUsers).then(() => {
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'User ignored', QuestionDialog, {
+                                title: _t('Ignored user'),
+                                description: <div>
+                                    <p>{ _t('You are now ignoring %(userId)s', {userId}) }</p>
+                                </div>,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    unignore: new Command("unignore", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                const userId = matches[1];
-                const ignoredUsers = MatrixClientPeg.get().getIgnoredUsers();
-                const index = ignoredUsers.indexOf(userId);
-                if (index !== -1) ignoredUsers.splice(index, 1);
-                return success(
-                    MatrixClientPeg.get().setIgnoredUsers(ignoredUsers).then(() => {
-                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                        Modal.createTrackedDialog('Slash Commands', 'User unignored', QuestionDialog, {
-                            title: _t("Unignored user"),
-                            description: (
-                                <div>
-                                    <p>{ _t("You are no longer ignoring %(userId)s", {userId: userId}) }</p>
-                                </div>
-                            ),
-                            hasCancelButton: false,
-                        });
-                    }),
-                );
+    unignore: new Command({
+        name: 'unignore',
+        args: '<user-id>',
+        description: _td('Stops ignoring a user, showing their messages going forward'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const cli = MatrixClientPeg.get();
+
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const userId = matches[1];
+                    const ignoredUsers = cli.getIgnoredUsers();
+                    const index = ignoredUsers.indexOf(userId);
+                    if (index !== -1) ignoredUsers.splice(index, 1);
+                    return success(
+                        cli.setIgnoredUsers(ignoredUsers).then(() => {
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'User unignored', QuestionDialog, {
+                                title: _t('Unignored user'),
+                                description: <div>
+                                    <p>{ _t('You are no longer ignoring %(userId)s', {userId}) }</p>
+                                </div>,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
     // Define the power level of a user
-    op: new Command("op", "<userId> [<power level>]", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+?)( +(-?\d+))?$/);
-            let powerLevel = 50; // default power level for op
-            if (matches) {
-                const userId = matches[1];
-                if (matches.length === 4 && undefined !== matches[3]) {
-                    powerLevel = parseInt(matches[3]);
-                }
-                if (!isNaN(powerLevel)) {
-                    const room = MatrixClientPeg.get().getRoom(roomId);
-                    if (!room) {
-                        return reject("Bad room ID: " + roomId);
+    op: new Command({
+        name: 'op',
+        args: '<user-id> [<power-level>]',
+        description: _td('Define the power level of a user'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+?)( +(-?\d+))?$/);
+                let powerLevel = 50; // default power level for op
+                if (matches) {
+                    const userId = matches[1];
+                    if (matches.length === 4 && undefined !== matches[3]) {
+                        powerLevel = parseInt(matches[3]);
+                    }
+                    if (!isNaN(powerLevel)) {
+                        const cli = MatrixClientPeg.get();
+                        const room = cli.getRoom(roomId);
+                        if (!room) return reject('Bad room ID: ' + roomId);
+
+                        const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                        return success(cli.setPowerLevel(roomId, userId, powerLevel, powerLevelEvent));
                     }
-                    const powerLevelEvent = room.currentState.getStateEvents(
-                        "m.room.power_levels", "",
-                    );
-                    return success(
-                        MatrixClientPeg.get().setPowerLevel(
-                            roomId, userId, powerLevel, powerLevelEvent,
-                        ),
-                    );
                 }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
     // Reset the power level of a user
-    deop: new Command("deop", "<userId>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+)$/);
-            if (matches) {
-                const room = MatrixClientPeg.get().getRoom(roomId);
-                if (!room) {
-                    return reject("Bad room ID: " + roomId);
-                }
+    deop: new Command({
+        name: 'deop',
+        args: '<user-id>',
+        description: _td('Deops user with given id'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+)$/);
+                if (matches) {
+                    const cli = MatrixClientPeg.get();
+                    const room = cli.getRoom(roomId);
+                    if (!room) return reject('Bad room ID: ' + roomId);
 
-                const powerLevelEvent = room.currentState.getStateEvents(
-                    "m.room.power_levels", "",
-                );
-                return success(
-                    MatrixClientPeg.get().setPowerLevel(
-                        roomId, args, undefined, powerLevelEvent,
-                    ),
-                );
+                    const powerLevelEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+                    return success(cli.setPowerLevel(roomId, args, undefined, powerLevelEvent));
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
     }),
 
-    // Open developer tools
-    devtools: new Command("devtools", "", function(roomId) {
-        const DevtoolsDialog = sdk.getComponent("dialogs.DevtoolsDialog");
-        Modal.createDialog(DevtoolsDialog, { roomId });
-        return success();
+    devtools: new Command({
+        name: 'devtools',
+        description: _td('Opens the Developer Tools dialog'),
+        runFn: function(roomId) {
+            const DevtoolsDialog = sdk.getComponent('dialogs.DevtoolsDialog');
+            Modal.createDialog(DevtoolsDialog, {roomId});
+            return success();
+        },
     }),
 
     // Verify a user, device, and pubkey tuple
-    verify: new Command("verify", "<userId> <deviceId> <deviceSigningKey>", function(roomId, args) {
-        if (args) {
-            const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
-            if (matches) {
-                const userId = matches[1];
-                const deviceId = matches[2];
-                const fingerprint = matches[3];
+    verify: new Command({
+        name: 'verify',
+        args: '<user-id> <device-id> <device-signing-key>',
+        description: _td('Verifies a user, device, and pubkey tuple'),
+        runFn: function(roomId, args) {
+            if (args) {
+                const matches = args.match(/^(\S+) +(\S+) +(\S+)$/);
+                if (matches) {
+                    const cli = MatrixClientPeg.get();
 
-                return success(
-                    // Promise.resolve to handle transition from static result to promise; can be removed
-                    // in future
-                    Promise.resolve(MatrixClientPeg.get().getStoredDevice(userId, deviceId)).then((device) => {
-                        if (!device) {
-                            throw new Error(_t(`Unknown (user, device) pair:`) + ` (${userId}, ${deviceId})`);
-                        }
+                    const userId = matches[1];
+                    const deviceId = matches[2];
+                    const fingerprint = matches[3];
 
-                        if (device.isVerified()) {
-                            if (device.getFingerprint() === fingerprint) {
-                                throw new Error(_t(`Device already verified!`));
-                            } else {
-                                throw new Error(_t(`WARNING: Device already verified, but keys do NOT MATCH!`));
+                    return success(
+                        // Promise.resolve to handle transition from static result to promise; can be removed
+                        // in future
+                        Promise.resolve(cli.getStoredDevice(userId, deviceId)).then((device) => {
+                            if (!device) {
+                                throw new Error(_t('Unknown (user, device) pair:') + ` (${userId}, ${deviceId})`);
                             }
-                        }
 
-                        if (device.getFingerprint() !== fingerprint) {
-                            const fprint = device.getFingerprint();
-                            throw new Error(
-                                _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
-                                   ' %(deviceId)s is "%(fprint)s" which does not match the provided key' +
-                                   ' "%(fingerprint)s". This could mean your communications are being intercepted!',
-                                   {deviceId: deviceId, fprint: fprint, userId: userId, fingerprint: fingerprint}));
-                        }
+                            if (device.isVerified()) {
+                                if (device.getFingerprint() === fingerprint) {
+                                    throw new Error(_t('Device already verified!'));
+                                } else {
+                                    throw new Error(_t('WARNING: Device already verified, but keys do NOT MATCH!'));
+                                }
+                            }
 
-                        return MatrixClientPeg.get().setDeviceVerified(userId, deviceId, true);
-                    }).then(() => {
-                        // Tell the user we verified everything
-                        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                        Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
-                            title: _t("Verified key"),
-                            description: (
-                                <div>
-                                  <p>
-                                    {
-                                        _t("The signing key you provided matches the signing key you received " +
-                                           "from %(userId)s's device %(deviceId)s. Device marked as verified.",
-                                           {userId: userId, deviceId: deviceId})
-                                    }
-                                  </p>
-                                </div>
-                            ),
-                            hasCancelButton: false,
-                        });
-                    }),
-                );
+                            if (device.getFingerprint() !== fingerprint) {
+                                const fprint = device.getFingerprint();
+                                throw new Error(
+                                    _t('WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
+                                        ' %(deviceId)s is "%(fprint)s" which does not match the provided key ' +
+                                        '"%(fingerprint)s". This could mean your communications are being intercepted!',
+                                        {
+                                            fprint,
+                                            userId,
+                                            deviceId,
+                                            fingerprint,
+                                        }));
+                            }
+
+                            return cli.setDeviceVerified(userId, deviceId, true);
+                        }).then(() => {
+                            // Tell the user we verified everything
+                            const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+                            Modal.createTrackedDialog('Slash Commands', 'Verified key', QuestionDialog, {
+                                title: _t('Verified key'),
+                                description: <div>
+                                    <p>
+                                        {
+                                            _t('The signing key you provided matches the signing key you received ' +
+                                                'from %(userId)s\'s device %(deviceId)s. Device marked as verified.',
+                                                {userId, deviceId})
+                                        }
+                                    </p>
+                                </div>,
+                                hasCancelButton: false,
+                            });
+                        }),
+                    );
+                }
             }
-        }
-        return reject(this.getUsage());
+            return reject(this.getUsage());
+        },
+    }),
+
+    // Command definitions for autocompletion ONLY:
+
+    // /me is special because its not handled by SlashCommands.js and is instead done inside the Composer classes
+    me: new Command({
+        name: 'me',
+        args: '<message>',
+        description: _td('Displays action'),
     }),
 };
 /* eslint-enable babel/no-invalid-this */
@@ -421,50 +476,39 @@ const aliases = {
     j: "join",
 };
 
-module.exports = {
-    /**
-     * Process the given text for /commands and perform them.
-     * @param {string} roomId The room in which the command was performed.
-     * @param {string} input The raw text input by the user.
-     * @return {Object|null} An object with the property 'error' if there was an error
-     * processing the command, or 'promise' if a request was sent out.
-     * Returns null if the input didn't match a command.
-     */
-    processInput: function(roomId, input) {
-        // trim any trailing whitespace, as it can confuse the parser for
-        // IRC-style commands
-        input = input.replace(/\s+$/, "");
-        if (input[0] === "/" && input[1] !== "/") {
-            const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
-            let cmd;
-            let args;
-            if (bits) {
-                cmd = bits[1].substring(1).toLowerCase();
-                args = bits[3];
-            } else {
-                cmd = input;
-            }
-            if (cmd === "me") return null;
-            if (aliases[cmd]) {
-                cmd = aliases[cmd];
-            }
-            if (commands[cmd]) {
-                return commands[cmd].run(roomId, args);
-            } else {
-                return reject(_t("Unrecognised command:") + ' ' + input);
-            }
-        }
-        return null; // not a command
-    },
+/**
+ * Process the given text for /commands and perform them.
+ * @param {string} roomId The room in which the command was performed.
+ * @param {string} input The raw text input by the user.
+ * @return {Object|null} An object with the property 'error' if there was an error
+ * processing the command, or 'promise' if a request was sent out.
+ * Returns null if the input didn't match a command.
+ */
+export function processCommandInput(roomId, input) {
+    // trim any trailing whitespace, as it can confuse the parser for
+    // IRC-style commands
+    input = input.replace(/\s+$/, '');
+    if (input[0] !== '/' || input[1] === '/') return null; // not a command
 
-    getCommandList: function() {
-        // Return all the commands plus /me and /markdown which aren't handled like normal commands
-        const cmds = Object.keys(commands).sort().map(function(cmdKey) {
-            return commands[cmdKey];
-        });
-        cmds.push(new Command("me", "<action>", function() {}));
-        cmds.push(new Command("markdown", "<on|off>", function() {}));
+    const bits = input.match(/^(\S+?)( +((.|\n)*))?$/);
+    let cmd;
+    let args;
+    if (bits) {
+        cmd = bits[1].substring(1).toLowerCase();
+        args = bits[3];
+    } else {
+        cmd = input;
+    }
 
-        return cmds;
-    },
-};
+    if (aliases[cmd]) {
+        cmd = aliases[cmd];
+    }
+    if (CommandMap[cmd]) {
+        // if it has no runFn then its an ignored/nop command (autocomplete only) e.g `/me`
+        if (!CommandMap[cmd].runFn) return null;
+
+        return CommandMap[cmd].run(roomId, args);
+    } else {
+        return reject(_t('Unrecognised command:') + ' ' + input);
+    }
+}

src/WidgetUtils.js

@@ -1,93 +0,0 @@
-/*
-Copyright 2017 Vector Creations 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.
-*/
-
-import MatrixClientPeg from './MatrixClientPeg';
-import SdkConfig from "./SdkConfig";
-import * as url from "url";
-
-export default class WidgetUtils {
-    /* Returns true if user is able to send state events to modify widgets in this room
-     * (Does not apply to non-room-based / user widgets)
-     * @param roomId -- The ID of the room to check
-     * @return Boolean -- true if the user can modify widgets in this room
-     * @throws Error -- specifies the error reason
-     */
-    static canUserModifyWidgets(roomId) {
-        if (!roomId) {
-            console.warn('No room ID specified');
-            return false;
-        }
-
-        const client = MatrixClientPeg.get();
-        if (!client) {
-            console.warn('User must be be logged in');
-            return false;
-        }
-
-        const room = client.getRoom(roomId);
-        if (!room) {
-            console.warn(`Room ID ${roomId} is not recognised`);
-            return false;
-        }
-
-        const me = client.credentials.userId;
-        if (!me) {
-            console.warn('Failed to get user ID');
-            return false;
-        }
-
-        const member = room.getMember(me);
-        if (!member || member.membership !== "join") {
-            console.warn(`User ${me} is not in room ${roomId}`);
-            return false;
-        }
-
-        return room.currentState.maySendStateEvent('im.vector.modular.widgets', me);
-    }
-
-    /**
-     * Returns true if specified url is a scalar URL, typically https://scalar.vector.im/api
-     * @param  {[type]}  testUrlString URL to check
-     * @return {Boolean} True if specified URL is a scalar URL
-     */
-    static isScalarUrl(testUrlString) {
-        if (!testUrlString) {
-            console.error('Scalar URL check failed. No URL specified');
-            return false;
-        }
-
-        const testUrl = url.parse(testUrlString);
-
-        let scalarUrls = SdkConfig.get().integrations_widgets_urls;
-        if (!scalarUrls || scalarUrls.length === 0) {
-            scalarUrls = [SdkConfig.get().integrations_rest_url];
-        }
-
-        for (let i = 0; i < scalarUrls.length; i++) {
-            const scalarUrl = url.parse(scalarUrls[i]);
-            if (testUrl && scalarUrl) {
-                if (
-                    testUrl.protocol === scalarUrl.protocol &&
-                    testUrl.host === scalarUrl.host &&
-                    testUrl.pathname.startsWith(scalarUrl.pathname)
-                ) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-}

src/autocomplete/AutocompleteProvider.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -36,7 +36,7 @@ export default class AutocompleteProvider {
     /**
      * Of the matched commands in the query, returns the first that contains or is contained by the selection, or null.
      */
-    getCurrentCommand(query: string, selection: {start: number, end: number}, force: boolean = false): ?string {
+    getCurrentCommand(query: string, selection: SelectionRange, force: boolean = false): ?string {
         let commandRegex = this.commandRegex;
 
         if (force && this.shouldForceComplete()) {
@@ -51,14 +51,14 @@ export default class AutocompleteProvider {
 
         let match;
         while ((match = commandRegex.exec(query)) != null) {
-            let matchStart = match.index,
-                matchEnd = matchStart + match[0].length;
-            if (selection.start <= matchEnd && selection.end >= matchStart) {
+            const start = match.index;
+            const end = start + match[0].length;
+            if (selection.start <= end && selection.end >= start) {
                 return {
                     command: match,
                     range: {
-                        start: matchStart,
-                        end: matchEnd,
+                        start,
+                        end,
                     },
                 };
             }

src/autocomplete/Autocompleter.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2016 Aviral Dasgupta
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,7 +18,9 @@ limitations under the License.
 // @flow
 
 import type {Component} from 'react';
+import {Room} from 'matrix-js-sdk';
 import CommandProvider from './CommandProvider';
+import CommunityProvider from './CommunityProvider';
 import DuckDuckGoProvider from './DuckDuckGoProvider';
 import RoomProvider from './RoomProvider';
 import UserProvider from './UserProvider';
@@ -47,6 +49,7 @@ const PROVIDERS = [
     EmojiProvider,
     NotifProvider,
     CommandProvider,
+    CommunityProvider,
     DuckDuckGoProvider,
 ];
 
@@ -54,7 +57,7 @@ const PROVIDERS = [
 const PROVIDER_COMPLETION_TIMEOUT = 3000;
 
 export default class Autocompleter {
-    constructor(room) {
+    constructor(room: Room) {
         this.room = room;
         this.providers = PROVIDERS.map((p) => {
             return new p(room);

src/autocomplete/CommandProvider.js

@@ -2,6 +2,7 @@
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,103 +18,16 @@ limitations under the License.
 */
 
 import React from 'react';
-import { _t, _td } from '../languageHandler';
+import {_t} from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
 import FuzzyMatcher from './FuzzyMatcher';
 import {TextualCompletion} from './Components';
+import type {Completion, SelectionRange} from "./Autocompleter";
+import {CommandMap} from '../SlashCommands';
 
-// TODO merge this with the factory mechanics of SlashCommands?
-// Warning: Since the description string will be translated in _t(result.description), all these strings below must be in i18n/strings/en_EN.json file
-const COMMANDS = [
-    {
-        command: '/me',
-        args: '<message>',
-        description: _td('Displays action'),
-    },
-    {
-        command: '/ban',
-        args: '<user-id> [reason]',
-        description: _td('Bans user with given id'),
-    },
-    {
-        command: '/unban',
-        args: '<user-id>',
-        description: _td('Unbans user with given id'),
-    },
-    {
-        command: '/op',
-        args: '<user-id> [<power-level>]',
-        description: _td('Define the power level of a user'),
-    },
-    {
-        command: '/deop',
-        args: '<user-id>',
-        description: _td('Deops user with given id'),
-    },
-    {
-        command: '/invite',
-        args: '<user-id>',
-        description: _td('Invites user with given id to current room'),
-    },
-    {
-        command: '/join',
-        args: '<room-alias>',
-        description: _td('Joins room with given alias'),
-    },
-    {
-        command: '/part',
-        args: '[<room-alias>]',
-        description: _td('Leave room'),
-    },
-    {
-        command: '/topic',
-        args: '<topic>',
-        description: _td('Sets the room topic'),
-    },
-    {
-        command: '/kick',
-        args: '<user-id> [reason]',
-        description: _td('Kicks user with given id'),
-    },
-    {
-        command: '/nick',
-        args: '<display-name>',
-        description: _td('Changes your display nickname'),
-    },
-    {
-        command: '/ddg',
-        args: '<query>',
-        description: _td('Searches DuckDuckGo for results'),
-    },
-    {
-        command: '/tint',
-        args: '<color1> [<color2>]',
-        description: _td('Changes colour scheme of current room'),
-    },
-    {
-        command: '/verify',
-        args: '<user-id> <device-id> <device-signing-key>',
-        description: _td('Verifies a user, device, and pubkey tuple'),
-    },
-    {
-        command: '/ignore',
-        args: '<user-id>',
-        description: _td('Ignores a user, hiding their messages from you'),
-    },
-    {
-        command: '/unignore',
-        args: '<user-id>',
-        description: _td('Stops ignoring a user, showing their messages going forward'),
-    },
-    {
-        command: '/devtools',
-        args: '',
-        description: _td('Opens the Developer Tools dialog'),
-    },
-    // Omitting `/markdown` as it only seems to apply to OldComposer
-];
+const COMMANDS = Object.values(CommandMap);
 
-const COMMAND_RE = /(^\/\w*)/g;
+const COMMAND_RE = /(^\/\w*)(?: .*)?/g;
 
 export default class CommandProvider extends AutocompleteProvider {
     constructor() {
@@ -123,23 +37,36 @@ export default class CommandProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}) {
-        let completions = [];
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array<Completion> {
         const {command, range} = this.getCurrentCommand(query, selection);
-        if (command) {
-            completions = this.matcher.match(command[0]).map((result) => {
-                return {
-                    completion: result.command + ' ',
-                    component: (<TextualCompletion
-                        title={result.command}
-                        subtitle={result.args}
-                        description={_t(result.description)}
-                        />),
-                    range,
-                };
-            });
+        if (!command) return [];
+
+        let matches = [];
+        if (command[0] !== command[1]) {
+            // The input looks like a command with arguments, perform exact match
+            const name = command[1].substr(1); // strip leading `/`
+            if (CommandMap[name]) {
+                matches = [CommandMap[name]];
+            }
+        } else {
+            if (query === '/') {
+                // If they have just entered `/` show everything
+                matches = COMMANDS;
+            } else {
+                // otherwise fuzzy match against all of the fields
+                matches = this.matcher.match(command[1]);
+            }
         }
-        return completions;
+
+        return matches.map((result) => ({
+            // If the command is the same as the one they entered, we don't want to discard their arguments
+            completion: result.command === command[1] ? command[0] : (result.command + ' '),
+            component: <TextualCompletion
+                title={result.command}
+                subtitle={result.args}
+                description={_t(result.description)} />,
+            range,
+        }));
     }
 
     getName() {

src/autocomplete/CommunityProvider.js

@@ -0,0 +1,111 @@
+/*
+Copyright 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+
+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.
+*/
+
+import React from 'react';
+import { _t } from '../languageHandler';
+import AutocompleteProvider from './AutocompleteProvider';
+import MatrixClientPeg from '../MatrixClientPeg';
+import FuzzyMatcher from './FuzzyMatcher';
+import {PillCompletion} from './Components';
+import sdk from '../index';
+import _sortBy from 'lodash/sortBy';
+import {makeGroupPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
+import FlairStore from "../stores/FlairStore";
+
+const COMMUNITY_REGEX = /\B\+\S*/g;
+
+function score(query, space) {
+    const index = space.indexOf(query);
+    if (index === -1) {
+        return Infinity;
+    } else {
+        return index;
+    }
+}
+
+export default class CommunityProvider extends AutocompleteProvider {
+    constructor() {
+        super(COMMUNITY_REGEX);
+        this.matcher = new FuzzyMatcher([], {
+            keys: ['groupId', 'name', 'shortDescription'],
+        });
+    }
+
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
+        const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
+
+        // Disable autocompletions when composing commands because of various issues
+        // (see https://github.com/vector-im/riot-web/issues/4762)
+        if (/^(\/join|\/leave)/.test(query)) {
+            return [];
+        }
+
+        const cli = MatrixClientPeg.get();
+        let completions = [];
+        const {command, range} = this.getCurrentCommand(query, selection, force);
+        if (command) {
+            const joinedGroups = cli.getGroups().filter(({myMembership}) => myMembership === 'join');
+
+            const groups = (await Promise.all(joinedGroups.map(async ({groupId}) => {
+                try {
+                    return FlairStore.getGroupProfileCached(cli, groupId);
+                } catch (e) { // if FlairStore failed, fall back to just groupId
+                    return Promise.resolve({
+                        name: '',
+                        groupId,
+                        avatarUrl: '',
+                        shortDescription: '',
+                    });
+                }
+            })));
+
+            this.matcher.setObjects(groups);
+
+            const matchedString = command[0];
+            completions = this.matcher.match(matchedString);
+            completions = _sortBy(completions, [
+                (c) => score(matchedString, c.groupId),
+                (c) => c.groupId.length,
+            ]).map(({avatarUrl, groupId, name}) => ({
+                completion: groupId,
+                suffix: ' ',
+                href: makeGroupPermalink(groupId),
+                component: (
+                    <PillCompletion initialComponent={
+                        <BaseAvatar name={name || groupId}
+                                    width={24} height={24}
+                                    url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 24, 24) : null} />
+                    } title={name} description={groupId} />
+                ),
+                range,
+            }))
+            .slice(0, 4);
+        }
+        return completions;
+    }
+
+    getName() {
+        return '💬 ' + _t('Communities');
+    }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate">
+            { completions }
+        </div>;
+    }
+}

src/autocomplete/DuckDuckGoProvider.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,6 +22,7 @@ import AutocompleteProvider from './AutocompleteProvider';
 import 'whatwg-fetch';
 
 import {TextualCompletion} from './Components';
+import type {SelectionRange} from "./Autocompleter";
 
 const DDG_REGEX = /\/ddg\s+(.+)$/g;
 const REFERRER = 'vector';
@@ -36,7 +37,7 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
          + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERRER)}`;
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false) {
         const {command, range} = this.getCurrentCommand(query, selection);
         if (!query || !command) {
             return [];

src/autocomplete/EmojiProvider.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,11 +19,11 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../languageHandler';
 import AutocompleteProvider from './AutocompleteProvider';
-import {emojioneList, shortnameToImage, shortnameToUnicode, asciiRegexp, unicodeRegexp} from 'emojione';
+import {shortnameToUnicode, asciiRegexp, unicodeRegexp} from 'emojione';
 import FuzzyMatcher from './FuzzyMatcher';
 import sdk from '../index';
 import {PillCompletion} from './Components';
-import type {SelectionRange, Completion} from './Autocompleter';
+import type {Completion, SelectionRange} from './Autocompleter';
 import _uniq from 'lodash/uniq';
 import _sortBy from 'lodash/sortBy';
 import SettingsStore from "../settings/SettingsStore";
@@ -95,7 +95,7 @@ export default class EmojiProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: SelectionRange) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean): Array<Completion> {
         if (SettingsStore.getValue("MessageComposerInput.dontSuggestEmoji")) {
             return []; // don't give any suggestions if the user doesn't want them
         }

src/autocomplete/NotifProvider.js

@@ -20,6 +20,7 @@ import { _t } from '../languageHandler';
 import MatrixClientPeg from '../MatrixClientPeg';
 import {PillCompletion} from './Components';
 import sdk from '../index';
+import type {Completion, SelectionRange} from "./Autocompleter";
 
 const AT_ROOM_REGEX = /@\S*/g;
 
@@ -29,7 +30,7 @@ export default class NotifProvider extends AutocompleteProvider {
         this.room = room;
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
+    async getCompletions(query: string, selection: SelectionRange, force?:boolean = false): Array<Completion> {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         const client = MatrixClientPeg.get();

src/autocomplete/QueryMatcher.js

@@ -1,6 +1,7 @@
 //@flow
 /*
 Copyright 2017 Aviral Dasgupta
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,6 +28,10 @@ class KeyMap {
     priorityMap = new Map();
 }
 
+function stripDiacritics(str: string): string {
+    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
 export default class QueryMatcher {
     /**
      * @param {object[]} objects the objects to perform a match on
@@ -46,10 +51,11 @@ export default class QueryMatcher {
         objects.forEach((object, i) => {
             const keyValues = _at(object, keys);
             for (const keyValue of keyValues) {
-                if (!map.hasOwnProperty(keyValue)) {
-                    map[keyValue] = [];
+                const key = stripDiacritics(keyValue).toLowerCase();
+                if (!map.hasOwnProperty(key)) {
+                    map[key] = [];
                 }
-                map[keyValue].push(object);
+                map[key].push(object);
             }
             keyMap.priorityMap.set(object, i);
         });
@@ -82,7 +88,7 @@ export default class QueryMatcher {
     }
 
     match(query: String): Array<Object> {
-        query = query.toLowerCase();
+        query = stripDiacritics(query).toLowerCase();
         if (this.options.shouldMatchWordsOnly) {
             query = query.replace(/[^\w]/g, '');
         }
@@ -91,7 +97,7 @@ export default class QueryMatcher {
         }
         const results = [];
         this.keyMap.keys.forEach((key) => {
-            let resultKey = key.toLowerCase();
+            let resultKey = key;
             if (this.options.shouldMatchWordsOnly) {
                 resultKey = resultKey.replace(/[^\w]/g, '');
             }

src/autocomplete/RoomProvider.js

@@ -1,7 +1,8 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,8 +27,9 @@ import {getDisplayAliasForRoom} from '../Rooms';
 import sdk from '../index';
 import _sortBy from 'lodash/sortBy';
 import {makeRoomPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
 
-const ROOM_REGEX = /(?=#)(\S*)/g;
+const ROOM_REGEX = /\B#\S*/g;
 
 function score(query, space) {
     const index = space.indexOf(query);
@@ -46,7 +48,7 @@ export default class RoomProvider extends AutocompleteProvider {
         });
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
         const RoomAvatar = sdk.getComponent('views.avatars.RoomAvatar');
 
         // Disable autocompletions when composing commands because of various issues

src/autocomplete/UserProvider.js

@@ -2,7 +2,8 @@
 /*
 Copyright 2016 Aviral Dasgupta
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,20 +24,20 @@ import AutocompleteProvider from './AutocompleteProvider';
 import {PillCompletion} from './Components';
 import sdk from '../index';
 import FuzzyMatcher from './FuzzyMatcher';
-import _pull from 'lodash/pull';
 import _sortBy from 'lodash/sortBy';
 import MatrixClientPeg from '../MatrixClientPeg';
 
-import type {Room, RoomMember} from 'matrix-js-sdk';
+import type {MatrixEvent, Room, RoomMember, RoomState} from 'matrix-js-sdk';
 import {makeUserPermalink} from "../matrix-to";
+import type {Completion, SelectionRange} from "./Autocompleter";
 
-const USER_REGEX = /@\S*/g;
+const USER_REGEX = /\B@\S*/g;
 
 export default class UserProvider extends AutocompleteProvider {
     users: Array<RoomMember> = null;
     room: Room = null;
 
-    constructor(room) {
+    constructor(room: Room) {
         super(USER_REGEX, {
             keys: ['name'],
         });
@@ -44,7 +45,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.matcher = new FuzzyMatcher([], {
             keys: ['name', 'userId'],
             shouldMatchPrefix: true,
-            shouldMatchWordsOnly: false
+            shouldMatchWordsOnly: false,
         });
 
         this._onRoomTimelineBound = this._onRoomTimeline.bind(this);
@@ -61,7 +62,7 @@ export default class UserProvider extends AutocompleteProvider {
         }
     }
 
-    _onRoomTimeline(ev, room, toStartOfTimeline, removed, data) {
+    _onRoomTimeline(ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed: boolean, data: Object) {
         if (!room) return;
         if (removed) return;
         if (room.roomId !== this.room.roomId) return;
@@ -77,7 +78,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.onUserSpoke(ev.sender);
     }
 
-    _onRoomStateMember(ev, state, member) {
+    _onRoomStateMember(ev: MatrixEvent, state: RoomState, member: RoomMember) {
         // ignore members in other rooms
         if (member.roomId !== this.room.roomId) {
             return;
@@ -87,7 +88,7 @@ export default class UserProvider extends AutocompleteProvider {
         this.users = null;
     }
 
-    async getCompletions(query: string, selection: {start: number, end: number}, force = false) {
+    async getCompletions(query: string, selection: SelectionRange, force?: boolean = false): Array<Completion> {
         const MemberAvatar = sdk.getComponent('views.avatars.MemberAvatar');
 
         // Disable autocompletions when composing commands because of various issues
@@ -128,7 +129,7 @@ export default class UserProvider extends AutocompleteProvider {
         return completions;
     }
 
-    getName() {
+    getName(): string {
         return '👥 ' + _t('Users');
     }
 
@@ -141,13 +142,9 @@ export default class UserProvider extends AutocompleteProvider {
         }
 
         const currentUserId = MatrixClientPeg.get().credentials.userId;
-        this.users = this.room.getJoinedMembers().filter((member) => {
-            if (member.userId !== currentUserId) return true;
-        });
+        this.users = this.room.getJoinedMembers().filter(({userId}) => userId !== currentUserId);
 
-        this.users = _sortBy(this.users, (member) =>
-            1E20 - lastSpoken[member.userId] || 1E20,
-        );
+        this.users = _sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
 
         this.matcher.setObjects(this.users);
     }

src/components/structures/ContextualMenu.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,12 +16,10 @@ limitations under the License.
 */
 
 
-'use strict';
-
-const classNames = require('classnames');
-const React = require('react');
-const ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -61,6 +60,54 @@ export default class ContextualMenu extends React.Component {
         // If true, insert an invisible screen-sized element behind the
         // menu that when clicked will close it.
         hasBackground: PropTypes.bool,
+
+        // The component to render as the context menu
+        elementClass: PropTypes.element.isRequired,
+        // on resize callback
+        windowResize: PropTypes.func,
+        // method to close menu
+        closeMenu: PropTypes.func,
+    };
+
+    constructor() {
+        super();
+        this.state = {
+            contextMenuRect: null,
+        };
+
+        this.onContextMenu = this.onContextMenu.bind(this);
+        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(),
+        });
+    }
+
+    onContextMenu(e) {
+        if (this.props.closeMenu) {
+            this.props.closeMenu();
+
+            e.preventDefault();
+            const x = e.clientX;
+            const y = e.clientY;
+
+            // XXX: This isn't pretty but the only way to allow opening a different context menu on right click whilst
+            // a context menu and its click-guard are up without completely rewriting how the context menus work.
+            setImmediate(() => {
+                const clickEvent = document.createEvent('MouseEvents');
+                clickEvent.initMouseEvent(
+                    'contextmenu', true, true, window, 0,
+                    0, 0, x, y, false, false,
+                    false, false, 0, null,
+                );
+                document.elementFromPoint(x, y).dispatchEvent(clickEvent);
+            });
+        }
     }
 
     render() {
@@ -83,6 +130,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 +140,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
@@ -112,7 +174,7 @@ export default class ContextualMenu extends React.Component {
             `;
         }
 
-        const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace}></div>;
+        const chevron = <div style={chevronOffset} className={"mx_ContextualMenu_chevron_" + chevronFace} />;
         const className = 'mx_ContextualMenu_wrapper';
 
         const menuClasses = classNames({
@@ -154,17 +216,17 @@ 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>
-            { props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu}></div> }
+            { props.hasBackground && <div className="mx_ContextualMenu_background" onClick={props.closeMenu} onContextMenu={this.onContextMenu} /> }
             <style>{ chevronCSS }</style>
         </div>;
     }
 }
 
-export function createMenu(ElementClass, props) {
+export function createMenu(ElementClass, props, hasBackground=true) {
     const closeMenu = function(...args) {
         ReactDOM.unmountComponentAtNode(getOrCreateContainer());
 
@@ -175,8 +237,8 @@ export function createMenu(ElementClass, props) {
 
     // We only reference closeMenu once per call to createMenu
     const menu = <ContextualMenu
+        hasBackground={hasBackground}
         {...props}
-        hasBackground={true}
         elementClass={ElementClass}
         closeMenu={closeMenu} // eslint-disable-line react/jsx-no-bind
         windowResize={closeMenu} // eslint-disable-line react/jsx-no-bind

src/components/structures/FilePanel.js

@@ -68,8 +68,8 @@ const FilePanel = React.createClass({
                     "room": {
                         "timeline": {
                             "contains_url": true,
-                            "not_types": [
-                                "m.sticker",
+                            "types": [
+                                "m.room.message",
                             ],
                         },
                     },

src/components/structures/GroupView.js

@@ -562,6 +562,13 @@ export default React.createClass({
         });
     },
 
+    _onShareClick: function() {
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share community dialog', '', ShareDialog, {
+            target: this._matrixClient.getGroup(this.props.groupId),
+        });
+    },
+
     _onCancelClick: function() {
         this._closeSettings();
     },
@@ -1052,7 +1059,7 @@ export default React.createClass({
                     <input type="radio"
                         value={GROUP_JOINPOLICY_INVITE}
                         checked={this.state.joinableForm.policyType === GROUP_JOINPOLICY_INVITE}
-                        onClick={this._onJoinableChange}
+                        onChange={this._onJoinableChange}
                     />
                     <div className="mx_GroupView_label_text">
                         { _t('Only people who have been invited') }
@@ -1064,7 +1071,7 @@ export default React.createClass({
                     <input type="radio"
                         value={GROUP_JOINPOLICY_OPEN}
                         checked={this.state.joinableForm.policyType === GROUP_JOINPOLICY_OPEN}
-                        onClick={this._onJoinableChange}
+                        onChange={this._onJoinableChange}
                     />
                     <div className="mx_GroupView_label_text">
                         { _t('Everyone') }
@@ -1127,10 +1134,6 @@ export default React.createClass({
             let avatarNode;
             let nameNode;
             let shortDescNode;
-            const bodyNodes = [
-                this._getMembershipSection(),
-                this._getGroupSection(),
-            ];
             const rightButtons = [];
             if (this.state.editing && this.state.isUserPrivileged) {
                 let avatarImage;
@@ -1207,6 +1210,7 @@ export default React.createClass({
                     shortDescNode = <span onClick={onGroupHeaderItemClick}>{ summary.profile.short_description }</span>;
                 }
             }
+
             if (this.state.editing) {
                 rightButtons.push(
                     <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
@@ -1231,6 +1235,11 @@ export default React.createClass({
                         </AccessibleButton>,
                     );
                 }
+                rightButtons.push(
+                    <AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
+                        <TintableSvg src="img/icons-share.svg" width="16" height="16" />
+                    </AccessibleButton>,
+                );
                 if (this.props.collapsedRhs) {
                     rightButtons.push(
                         <AccessibleButton className="mx_GroupHeader_button"
@@ -1269,7 +1278,8 @@ export default React.createClass({
                         </div>
                     </div>
                     <GeminiScrollbarWrapper className="mx_GroupView_body">
-                        { bodyNodes }
+                        { this._getMembershipSection() }
+                        { this._getGroupSection() }
                     </GeminiScrollbarWrapper>
                 </div>
             );

src/components/structures/LeftPanel.js

@@ -82,17 +82,26 @@ var LeftPanel = React.createClass({
 
     _onKeyDown: function(ev) {
         if (!this.focusedElement) return;
-        let handled = false;
+        let handled = true;
 
         switch (ev.keyCode) {
+            case KeyCode.TAB:
+                this._onMoveFocus(ev.shiftKey);
+                break;
             case KeyCode.UP:
                 this._onMoveFocus(true);
-                handled = true;
                 break;
             case KeyCode.DOWN:
                 this._onMoveFocus(false);
-                handled = true;
                 break;
+            case KeyCode.ENTER:
+                this._onMoveFocus(false);
+                if (this.focusedElement) {
+                    this.focusedElement.click();
+                }
+                break;
+            default:
+                handled = false;
         }
 
         if (handled) {
@@ -102,37 +111,33 @@ var LeftPanel = React.createClass({
     },
 
     _onMoveFocus: function(up) {
-        var element = this.focusedElement;
+        let element = this.focusedElement;
 
         // unclear why this isn't needed
         // var descending = (up == this.focusDirection) ? this.focusDescending : !this.focusDescending;
         // this.focusDirection = up;
 
-        var descending = false; // are we currently descending or ascending through the DOM tree?
-        var classes;
+        let descending = false; // are we currently descending or ascending through the DOM tree?
+        let classes;
 
         do {
-            var child = up ? element.lastElementChild : element.firstElementChild;
-            var sibling = up ? element.previousElementSibling : element.nextElementSibling;
+            const child = up ? element.lastElementChild : element.firstElementChild;
+            const sibling = up ? element.previousElementSibling : element.nextElementSibling;
 
             if (descending) {
                 if (child) {
                     element = child;
-                }
-                else if (sibling) {
+                } else if (sibling) {
                     element = sibling;
-                }
-                else {
+                } else {
                     descending = false;
                     element = element.parentElement;
                 }
-            }
-            else {
+            } else {
                 if (sibling) {
                     element = sibling;
                     descending = true;
-                }
-                else {
+                } else {
                     element = element.parentElement;
                 }
             }
@@ -144,8 +149,7 @@ var LeftPanel = React.createClass({
                     descending = true;
                 }
             }
-
-        } while(element && !(
+        } while (element && !(
             classes.contains("mx_RoomTile") ||
             classes.contains("mx_SearchBox_search") ||
             classes.contains("mx_RoomSubList_ellipsis")));

src/components/structures/MatrixChat.js

@@ -23,6 +23,7 @@ import PropTypes from 'prop-types';
 import Matrix from "matrix-js-sdk";
 
 import Analytics from "../../Analytics";
+import DecryptionFailureTracker from "../../DecryptionFailureTracker";
 import MatrixClientPeg from "../../MatrixClientPeg";
 import PlatformPeg from "../../PlatformPeg";
 import SdkConfig from "../../SdkConfig";
@@ -1143,11 +1144,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,
@@ -1308,6 +1304,21 @@ export default React.createClass({
             }
         });
 
+        const dft = new DecryptionFailureTracker((total) => {
+            // TODO: Pass reason for failure as third argument to trackEvent
+            Analytics.trackEvent('E2E', 'Decryption failure', null, total);
+        });
+
+        // Shelved for later date when we have time to think about persisting history of
+        // tracked events across sessions.
+        // dft.loadTrackedEventHashMap();
+
+        dft.start();
+
+        // When logging out, stop tracking failures and destroy state
+        cli.on("Session.logged_out", () => dft.stop());
+        cli.on("Event.decrypted", (e) => dft.eventDecrypted(e));
+
         const krh = new KeyRequestHandler(cli);
         cli.on("crypto.roomKeyRequest", (req) => {
             krh.handleKeyRequest(req);

src/components/structures/MessagePanel.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,6 +26,9 @@ import sdk from '../../index';
 
 import MatrixClientPeg from '../../MatrixClientPeg';
 
+const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
+const continuedTypes = ['m.sticker', 'm.room.message'];
+
 /* (almost) stateless UI component which builds the event tiles in the room timeline.
  */
 module.exports = React.createClass({
@@ -189,7 +193,7 @@ module.exports = React.createClass({
     /**
      * Page up/down.
      *
-     * mult: -1 to page up, +1 to page down
+     * @param {number} mult: -1 to page up, +1 to page down
      */
     scrollRelative: function(mult) {
         if (this.refs.scrollPanel) {
@@ -199,6 +203,8 @@ module.exports = React.createClass({
 
     /**
      * Scroll up/down in response to a scroll key
+     *
+     * @param {KeyboardEvent} ev: the keyboard event to handle
      */
     handleScrollKey: function(ev) {
         if (this.refs.scrollPanel) {
@@ -257,6 +263,7 @@ module.exports = React.createClass({
 
         this.eventNodes = {};
 
+        let visible = false;
         let i;
 
         // first figure out which is the last event in the list which we're
@@ -297,7 +304,7 @@ module.exports = React.createClass({
         // if the readmarker has moved, cancel any active ghost.
         if (this.currentReadMarkerEventId && this.props.readMarkerEventId &&
                 this.props.readMarkerVisible &&
-                this.currentReadMarkerEventId != this.props.readMarkerEventId) {
+                this.currentReadMarkerEventId !== this.props.readMarkerEventId) {
             this.currentGhostEventId = null;
         }
 
@@ -404,8 +411,8 @@ module.exports = React.createClass({
 
             let isVisibleReadMarker = false;
 
-            if (eventId == this.props.readMarkerEventId) {
-                var visible = this.props.readMarkerVisible;
+            if (eventId === this.props.readMarkerEventId) {
+                visible = this.props.readMarkerVisible;
 
                 // if the read marker comes at the end of the timeline (except
                 // for local echoes, which are excluded from RMs, because they
@@ -423,11 +430,11 @@ module.exports = React.createClass({
 
             // XXX: there should be no need for a ghost tile - we should just use a
             // a dispatch (user_activity_end) to start the RM animation.
-            if (eventId == this.currentGhostEventId) {
+            if (eventId === this.currentGhostEventId) {
                 // if we're showing an animation, continue to show it.
                 ret.push(this._getReadMarkerGhostTile());
             } else if (!isVisibleReadMarker &&
-                       eventId == this.currentReadMarkerEventId) {
+                       eventId === this.currentReadMarkerEventId) {
                 // there is currently a read-up-to marker at this point, but no
                 // more. Show an animation of it disappearing.
                 ret.push(this._getReadMarkerGhostTile());
@@ -449,16 +456,17 @@ module.exports = React.createClass({
 
         // Some events should appear as continuations from previous events of
         // different types.
-        const continuedTypes = ['m.sticker', 'm.room.message'];
+
         const eventTypeContinues =
             prevEvent !== null &&
             continuedTypes.includes(mxEv.getType()) &&
             continuedTypes.includes(prevEvent.getType());
 
-        if (prevEvent !== null
-                && prevEvent.sender && mxEv.sender
-                && mxEv.sender.userId === prevEvent.sender.userId
-                && (mxEv.getType() == prevEvent.getType() || eventTypeContinues)) {
+        // if there is a previous event and it has the same sender as this event
+        // and the types are the same/is in continuedTypes and the time between them is <= CONTINUATION_MAX_INTERVAL
+        if (prevEvent !== null && prevEvent.sender && mxEv.sender && mxEv.sender.userId === prevEvent.sender.userId &&
+            (mxEv.getType() === prevEvent.getType() || eventTypeContinues) &&
+            (mxEv.getTs() - prevEvent.getTs() <= CONTINUATION_MAX_INTERVAL)) {
             continuation = true;
         }
 
@@ -493,7 +501,7 @@ module.exports = React.createClass({
         }
 
         const eventId = mxEv.getId();
-        const highlight = (eventId == this.props.highlightedEventId);
+        const highlight = (eventId === this.props.highlightedEventId);
 
         // we can't use local echoes as scroll tokens, because their event IDs change.
         // Local echos have a send "status".
@@ -632,7 +640,8 @@ module.exports = React.createClass({
     render: function() {
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
         const Spinner = sdk.getComponent("elements.Spinner");
-        let topSpinner, bottomSpinner;
+        let topSpinner;
+        let bottomSpinner;
         if (this.props.backPaginating) {
             topSpinner = <li key="_topSpinner"><Spinner /></li>;
         }

src/components/structures/MyGroups.js

@@ -70,7 +70,7 @@ export default withMatrixClient(React.createClass({
         if (this.state.groups) {
             const groupNodes = [];
             this.state.groups.forEach((g) => {
-                groupNodes.push(<GroupTile groupId={g} />);
+                groupNodes.push(<GroupTile key={g} groupId={g} />);
             });
             contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
@@ -124,7 +124,7 @@ export default withMatrixClient(React.createClass({
                         ) }
                     </div>
                 </div>
-                <div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
+                {/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
                         <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
                     </AccessibleButton>
@@ -140,7 +140,7 @@ export default withMatrixClient(React.createClass({
                             { 'i': (sub) => <i>{ sub }</i> })
                         }
                     </div>
-                </div>
+                </div>*/}
             </div>
             <div className="mx_MyGroups_content">
                 { contentHeader }

src/components/structures/RoomStatusBar.js

@@ -25,6 +25,7 @@ import MatrixClientPeg from '../../MatrixClientPeg';
 import MemberAvatar from '../views/avatars/MemberAvatar';
 import Resend from '../../Resend';
 import * as cryptodevices from '../../cryptodevices';
+import dis from '../../dispatcher';
 
 const STATUS_BAR_HIDDEN = 0;
 const STATUS_BAR_EXPANDED = 1;
@@ -157,10 +158,12 @@ module.exports = React.createClass({
 
     _onResendAllClick: function() {
         Resend.resendUnsentEvents(this.props.room);
+        dis.dispatch({action: 'focus_composer'});
     },
 
     _onCancelAllClick: function() {
         Resend.cancelUnsentEvents(this.props.room);
+        dis.dispatch({action: 'focus_composer'});
     },
 
     _onShowDevicesClick: function() {
@@ -305,7 +308,26 @@ module.exports = React.createClass({
                 },
             );
         } else {
-            if (
+            let consentError = null;
+            for (const m of unsentMessages) {
+                if (m.error && m.error.errcode === 'M_CONSENT_NOT_GIVEN') {
+                    consentError = m.error;
+                    break;
+                }
+            }
+            if (consentError) {
+                title = _t(
+                    "You can't send any messages until you review and agree to " +
+                    "<consentLink>our terms and conditions</consentLink>.",
+                    {},
+                    {
+                        'consentLink': (sub) =>
+                            <a href={consentError.data && consentError.data.consent_uri} target="_blank">
+                                { sub }
+                            </a>,
+                    },
+                );
+            } else if (
                 unsentMessages.length === 1 &&
                 unsentMessages[0].error &&
                 unsentMessages[0].error.data &&
@@ -329,11 +351,13 @@ module.exports = React.createClass({
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
             <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt={_t("Warning")} />
-            <div className="mx_RoomStatusBar_connectionLostBar_title">
-                { title }
-            </div>
-            <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                { content }
+            <div>
+                <div className="mx_RoomStatusBar_connectionLostBar_title">
+                    { title }
+                </div>
+                <div className="mx_RoomStatusBar_connectionLostBar_desc">
+                    { content }
+                </div>
             </div>
         </div>;
     },
@@ -350,11 +374,13 @@ module.exports = React.createClass({
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
                     <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
-                    <div className="mx_RoomStatusBar_connectionLostBar_title">
-                        { _t('Connectivity to the server has been lost.') }
-                    </div>
-                    <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                        { _t('Sent messages will be stored until your connection has returned.') }
+                    <div>
+                        <div className="mx_RoomStatusBar_connectionLostBar_title">
+                            { _t('Connectivity to the server has been lost.') }
+                        </div>
+                        <div className="mx_RoomStatusBar_connectionLostBar_desc">
+                            { _t('Sent messages will be stored until your connection has returned.') }
+                        </div>
                     </div>
                 </div>
             );

src/components/structures/RoomSubList.js

@@ -1,6 +1,7 @@
 /*
-Copyright 2017 Vector Creations Ltd
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,30 +16,25 @@ 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');
+import React from 'react';
+import classNames from 'classnames';
+import sdk from '../../index';
 import { Droppable } from 'react-beautiful-dnd';
 import { _t } from '../../languageHandler';
-var dis = require('../../dispatcher');
-var Unread = require('../../Unread');
-var MatrixClientPeg = require('../../MatrixClientPeg');
-var RoomNotifs = require('../../RoomNotifs');
-var FormattingUtils = require('../../utils/FormattingUtils');
-var AccessibleButton = require('../../components/views/elements/AccessibleButton');
-import Modal from '../../Modal';
+import dis from '../../dispatcher';
+import Unread from '../../Unread';
+import * as RoomNotifs from '../../RoomNotifs';
+import * as FormattingUtils from '../../utils/FormattingUtils';
 import { KeyCode } from '../../Keyboard';
+import { Group } from 'matrix-js-sdk';
 
 
 // turn this on for drop & drag console debugging galore
-var debug = false;
+const debug = false;
 
 const TRUNCATE_AT = 10;
 
-var RoomSubList = React.createClass({
+const RoomSubList = React.createClass({
     displayName: 'RoomSubList',
 
     debug: debug,
@@ -77,8 +73,10 @@ var RoomSubList = React.createClass({
 
     getDefaultProps: function() {
         return {
-            onHeaderClick: function() {}, // NOP
-            onShowMoreRooms: function() {}, // NOP
+            onHeaderClick: function() {
+            }, // NOP
+            onShowMoreRooms: function() {
+            }, // NOP
             extraTiles: [],
             isInvite: false,
         };
@@ -105,15 +103,17 @@ var RoomSubList = React.createClass({
 
     applySearchFilter: function(list, filter) {
         if (filter === "") return list;
-        return list.filter((room) => {
-            return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0
-        });
+        const lcFilter = filter.toLowerCase();
+        // case insensitive if room name includes filter,
+        // or if starts with `#` and one of room's aliases starts with filter
+        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
+            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
     },
 
     // The header is collapsable if it is hidden or not stuck
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
-        var stuck = this.refs.header.dataset.stuck;
+        const stuck = this.refs.header.dataset.stuck;
         if (this.state.hidden || stuck === undefined || stuck === "none") {
             return true;
         } else {
@@ -139,12 +139,12 @@ var RoomSubList = React.createClass({
     onClick: function(ev) {
         if (this.isCollapsableOnClick()) {
             // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic
-            var isHidden = !this.state.hidden;
-            this.setState({ hidden : isHidden });
+            const isHidden = !this.state.hidden;
+            this.setState({hidden: isHidden});
 
             if (isHidden) {
                 // as good a way as any to reset the truncate state
-                this.setState({ truncateAt : TRUNCATE_AT });
+                this.setState({truncateAt: TRUNCATE_AT});
             }
 
             this.props.onShowMoreRooms();
@@ -159,7 +159,7 @@ var RoomSubList = React.createClass({
         dis.dispatch({
             action: 'view_room',
             room_id: roomId,
-            clear_search: (ev && (ev.keyCode == KeyCode.ENTER || ev.keyCode == KeyCode.SPACE)),
+            clear_search: (ev && (ev.keyCode === KeyCode.ENTER || ev.keyCode === KeyCode.SPACE)),
         });
     },
 
@@ -169,17 +169,17 @@ var RoomSubList = React.createClass({
     },
 
     _shouldShowMentionBadge: function(roomNotifState) {
-        return roomNotifState != RoomNotifs.MUTE;
+        return roomNotifState !== RoomNotifs.MUTE;
     },
 
     /**
      * Total up all the notification counts from the rooms
      *
-     * @param {Number} If supplied will only total notifications for rooms outside the truncation number
+     * @param {Number} truncateAt If supplied will only total notifications for rooms outside the truncation number
      * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
      */
     roomNotificationCount: function(truncateAt) {
-        var self = this;
+        const self = this;
 
         if (this.props.isInvite) {
             return [0, true];
@@ -187,9 +187,9 @@ var RoomSubList = React.createClass({
 
         return this.props.list.reduce(function(result, room, index) {
             if (truncateAt === undefined || index >= truncateAt) {
-                var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
-                var highlight = room.getUnreadNotificationCount('highlight') > 0;
-                var notificationCount = room.getUnreadNotificationCount();
+                const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+                const highlight = room.getUnreadNotificationCount('highlight') > 0;
+                const notificationCount = room.getUnreadNotificationCount();
 
                 const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
                 const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
@@ -238,38 +238,83 @@ var RoomSubList = React.createClass({
         });
     },
 
+    _onNotifBadgeClick: function(e) {
+        // prevent the roomsublist collapsing
+        e.preventDefault();
+        e.stopPropagation();
+        // find first room which has notifications and switch to it
+        for (const room of this.state.sortedList) {
+            const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+            const highlight = room.getUnreadNotificationCount('highlight') > 0;
+            const notificationCount = room.getUnreadNotificationCount();
+
+            const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge(roomNotifState);
+            const mentionBadges = highlight && this._shouldShowMentionBadge(roomNotifState);
+
+            if (notifBadges || mentionBadges) {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: room.roomId,
+                });
+                return;
+            }
+        }
+    },
+
+    _onInviteBadgeClick: function(e) {
+        // prevent the roomsublist collapsing
+        e.preventDefault();
+        e.stopPropagation();
+        // switch to first room in sortedList as that'll be the top of the list for the user
+        if (this.state.sortedList && this.state.sortedList.length > 0) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.sortedList[0].roomId,
+            });
+        } else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
+            // Group Invites are different in that they are all extra tiles and not rooms
+            // XXX: this is a horrible special case because Group Invite sublist is a hack
+            if (this.props.extraTiles[0].props && this.props.extraTiles[0].props.group instanceof Group) {
+                dis.dispatch({
+                    action: 'view_group',
+                    group_id: this.props.extraTiles[0].props.group.groupId,
+                });
+            }
+        }
+    },
+
     _getHeaderJsx: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const subListNotifications = this.roomNotificationCount();
+        const subListNotifCount = subListNotifications[0];
+        const subListNotifHighlight = subListNotifications[1];
 
-        var subListNotifications = this.roomNotificationCount();
-        var subListNotifCount = subListNotifications[0];
-        var subListNotifHighlight = subListNotifications[1];
+        const totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
+        const roomCount = totalTiles > 0 ? totalTiles : '';
 
-        var totalTiles = this.props.list.length + (this.props.extraTiles || []).length;
-        var roomCount = totalTiles > 0 ? totalTiles : '';
-
-        var chevronClasses = classNames({
+        const chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronRight': this.state.hidden,
             'mx_RoomSubList_chevronDown': !this.state.hidden,
         });
 
-        var badgeClasses = classNames({
+        const badgeClasses = classNames({
             'mx_RoomSubList_badge': true,
             'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
         });
 
-        var badge;
+        let badge;
         if (subListNotifCount > 0) {
-            badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
+            badge = <div className={badgeClasses} onClick={this._onNotifBadgeClick}>
+                { FormattingUtils.formatCount(subListNotifCount) }
+            </div>;
         } else if (this.props.isInvite) {
             // no notifications but highlight anyway because this is an invite badge
-            badge = <div className={badgeClasses}>!</div>;
+            badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>!</div>;
         }
 
         // When collapsed, allow a long hover on the header to show user
         // the full tag name and room count
-        var title;
+        let title;
         if (this.props.collapsed) {
             title = this.props.label;
             if (roomCount !== '') {
@@ -277,63 +322,66 @@ var RoomSubList = React.createClass({
             }
         }
 
-        var incomingCall;
+        let incomingCall;
         if (this.props.incomingCall) {
-            var self = this;
+            const self = this;
             // Check if the incoming call is for this section
-            var incomingCallRoom = this.props.list.filter(function(room) {
+            const incomingCallRoom = this.props.list.filter(function(room) {
                 return self.props.incomingCall.roomId === room.roomId;
             });
 
             if (incomingCallRoom.length === 1) {
-                var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
-                incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
+                const IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+                incomingCall =
+                    <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={this.props.incomingCall} />;
             }
         }
 
-        var tabindex = this.props.searchFilter === "" ? "0" : "-1";
+        const tabindex = this.props.searchFilter === "" ? "0" : "-1";
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
-            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
-                <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
-                    { this.props.collapsed ? '' : this.props.label }
-                    <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
-                    <div className={chevronClasses}></div>
-                    { badge }
-                    { incomingCall }
+            <div className="mx_RoomSubList_labelContainer" title={title} ref="header">
+                <AccessibleButton onClick={this.onClick} className="mx_RoomSubList_label" tabIndex={tabindex}>
+                    {this.props.collapsed ? '' : this.props.label}
+                    <div className="mx_RoomSubList_roomCount">{roomCount}</div>
+                    <div className={chevronClasses} />
+                    {badge}
+                    {incomingCall}
                 </AccessibleButton>
             </div>
         );
     },
 
     _createOverflowTile: function(overflowCount, totalCount) {
-        var content = <div className="mx_RoomSubList_chevronDown"></div>;
+        let content = <div className="mx_RoomSubList_chevronDown" />;
 
-        var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
-        var overflowNotifCount = overflowNotifications[0];
-        var overflowNotifHighlight = overflowNotifications[1];
+        const overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
+        const overflowNotifCount = overflowNotifications[0];
+        const overflowNotifHighlight = overflowNotifications[1];
         if (overflowNotifCount && !this.props.collapsed) {
             content = FormattingUtils.formatCount(overflowNotifCount);
         }
 
-        var badgeClasses = classNames({
+        const badgeClasses = classNames({
             'mx_RoomSubList_moreBadge': true,
             'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
             'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
         });
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <AccessibleButton className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
-                <div className="mx_RoomSubList_line"></div>
-                <div className="mx_RoomSubList_more">{ _t("more") }</div>
-                <div className={ badgeClasses }>{ content }</div>
+                <div className="mx_RoomSubList_line" />
+                <div className="mx_RoomSubList_more">{_t("more")}</div>
+                <div className={badgeClasses}>{content}</div>
             </AccessibleButton>
         );
     },
 
     _showFullMemberList: function() {
         this.setState({
-            truncateAt: -1
+            truncateAt: -1,
         });
 
         this.props.onShowMoreRooms();
@@ -341,37 +389,39 @@ var RoomSubList = React.createClass({
     },
 
     render: function() {
-        var connectDropTarget = this.props.connectDropTarget;
-        var TruncatedList = sdk.getComponent('elements.TruncatedList');
-
-        var label = this.props.collapsed ? null : this.props.label;
+        const TruncatedList = sdk.getComponent('elements.TruncatedList');
 
         let content;
-        if (this.state.sortedList.length === 0 && !this.props.searchFilter && this.props.extraTiles.length === 0) {
-            content = this.props.emptyContent;
+        if (this.state.sortedList.length === 0 && this.props.extraTiles.length === 0) {
+            // if no search filter is applied and there is a placeholder defined then show it, otherwise show nothing
+            if (!this.props.searchFilter && this.props.emptyContent) {
+                content = this.props.emptyContent;
+            } else {
+                // don't show an empty sublist
+                return null;
+            }
         } else {
             content = this.makeRoomTiles();
             content.push(...this.props.extraTiles);
         }
 
         if (this.state.sortedList.length > 0 || this.props.extraTiles.length > 0 || this.props.editable) {
-            var subList;
-            var classes = "mx_RoomSubList";
+            let subList;
+            const classes = "mx_RoomSubList";
 
             if (!this.state.hidden) {
-                subList = <TruncatedList className={ classes } truncateAt={this.state.truncateAt}
-                                         createOverflowElement={this._createOverflowTile} >
-                                { content }
-                          </TruncatedList>;
-            }
-            else {
-                subList = <TruncatedList className={ classes }>
-                          </TruncatedList>;
+                subList = <TruncatedList className={classes} truncateAt={this.state.truncateAt}
+                                         createOverflowElement={this._createOverflowTile}>
+                    {content}
+                </TruncatedList>;
+            } else {
+                subList = <TruncatedList className={classes}>
+                </TruncatedList>;
             }
 
             const subListContent = <div>
-                { this._getHeaderJsx() }
-                { subList }
+                {this._getHeaderJsx()}
+                {subList}
             </div>;
 
             return this.props.editable ?
@@ -379,23 +429,26 @@ var RoomSubList = React.createClass({
                     droppableId={"room-sub-list-droppable_" + this.props.tagName}
                     type="draggable-RoomTile"
                 >
-                    { (provided, snapshot) => (
+                    {(provided, snapshot) => (
                         <div ref={provided.innerRef}>
-                            { subListContent }
+                            {subListContent}
                         </div>
-                    ) }
+                    )}
                 </Droppable> : subListContent;
-        }
-        else {
-            var Loader = sdk.getComponent("elements.Spinner");
+        } else {
+            const Loader = sdk.getComponent("elements.Spinner");
+            if (this.props.showSpinner) {
+                content = <Loader />;
+            }
+
             return (
                 <div className="mx_RoomSubList">
-                    { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
-                    { (this.props.showSpinner && !this.state.hidden) ? <Loader /> : undefined }
+                    {this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined}
+                    { this.state.hidden ? undefined : content }
                 </div>
             );
         }
-    }
+    },
 });
 
 module.exports = RoomSubList;

src/components/structures/RoomView.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -44,7 +45,8 @@ 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";
+import WidgetUtils from '../../utils/WidgetUtils';
 
 const DEBUG = false;
 let debuglog = function() {};
@@ -115,6 +117,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 +185,7 @@ module.exports = React.createClass({
             isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
             forwardingEvent: RoomViewStore.getForwardingEvent(),
             shouldPeek: RoomViewStore.shouldPeek(),
+            showingPinned: SettingsStore.getValue("PinnedEvents.isOpen", RoomViewStore.getRoomId()),
             editingRoomSettings: RoomViewStore.isEditingSettings(),
         };
 
@@ -315,14 +319,7 @@ module.exports = React.createClass({
             return false;
         }
 
-        const appsStateEvents = room.currentState.getStateEvents('im.vector.modular.widgets');
-        // any valid widget = show apps
-        for (let i = 0; i < appsStateEvents.length; i++) {
-            if (appsStateEvents[i].getContent().type && appsStateEvents[i].getContent().url) {
-                return true;
-            }
-        }
-        return false;
+        return WidgetUtils.getRoomWidgets(room).length > 0;
     },
 
     componentDidMount: function() {
@@ -616,9 +613,11 @@ module.exports = React.createClass({
         }
     },
 
-    _updatePreviewUrlVisibility: function(room) {
+    _updatePreviewUrlVisibility: function({roomId}) {
+        // URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
+        const key = MatrixClientPeg.get().isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
         this.setState({
-            showUrlPreview: SettingsStore.getValue("urlPreviewsEnabled", room.roomId),
+            showUrlPreview: SettingsStore.getValue(key, roomId),
         });
     },
 
@@ -643,19 +642,23 @@ module.exports = React.createClass({
     },
 
     onAccountData: function(event) {
-        if (event.getType() === "org.matrix.preview_urls" && this.state.room) {
+        const type = event.getType();
+        if ((type === "org.matrix.preview_urls" || type === "im.vector.web.settings") && this.state.room) {
+            // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
             this._updatePreviewUrlVisibility(this.state.room);
         }
     },
 
     onRoomAccountData: function(event, room) {
         if (room.roomId == this.state.roomId) {
-            if (event.getType() === "org.matrix.room.color_scheme") {
+            const type = event.getType();
+            if (type === "org.matrix.room.color_scheme") {
                 const color_scheme = event.getContent();
                 // XXX: we should validate the event
                 console.log("Tinter.tint from onRoomAccountData");
                 Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
-            } else if (event.getType() === "org.matrix.room.preview_urls") {
+            } else if (type === "org.matrix.room.preview_urls" || type === "im.vector.web.settings") {
+                // non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
                 this._updatePreviewUrlVisibility(room);
             }
         }
@@ -673,6 +676,7 @@ module.exports = React.createClass({
         }
 
         this._updateRoomMembers();
+        this._checkIfAlone(this.state.room);
     },
 
     onRoomMemberMembership: function(ev, member, oldMembership) {
@@ -910,6 +914,8 @@ module.exports = React.createClass({
     },
 
     uploadFile: async function(file) {
+        dis.dispatch({action: 'focus_composer'});
+
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'view_set_mxid'});
             return;
@@ -1136,7 +1142,10 @@ 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() {

src/components/structures/TagPanel.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd.
+Copyright 2017, 2018 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,6 +26,7 @@ import dis from '../../dispatcher';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
 
 const TagPanel = React.createClass({
     displayName: 'TagPanel',
@@ -84,7 +85,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 +117,26 @@ 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 />;
+        const itemsSelected = this.state.selectedTags.length > 0;
 
-        return <div className="mx_TagPanel">
-            <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
+        let clearButton;
+        if (itemsSelected) {
+            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>;
+        }
+
+        const classes = classNames('mx_TagPanel', {
+            mx_TagPanel_items_selected: itemsSelected,
+        });
+
+        return <div className={classes}>
+            <div className="mx_TagPanel_clearButton_container">
                 { clearButton }
-            </AccessibleButton>
+            </div>
             <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) => {
@@ -292,6 +298,7 @@ module.exports = React.createClass({
             if (this._unmounted) return;
             this.setState({
                 mediaDevices,
+                activeAudioOutput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_audiooutput'),
                 activeAudioInput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_audioinput'),
                 activeVideoInput: SettingsStore.getValueAt(SettingLevel.DEVICE, 'webrtc_videoinput'),
             });
@@ -422,7 +429,6 @@ module.exports = React.createClass({
                 "push notifications on other devices until you log back in to them",
             ) + ".",
         });
-        dis.dispatch({action: 'password_changed'});
     },
 
     _onAddEmailEditFinished: function(value, shouldSubmit) {
@@ -970,6 +976,11 @@ module.exports = React.createClass({
         return devices.map((device) => <span key={device.deviceId}>{ device.label }</span>);
     },
 
+    _setAudioOutput: function(deviceId) {
+        this.setState({activeAudioOutput: deviceId});
+        CallMediaHandler.setAudioOutput(deviceId);
+    },
+
     _setAudioInput: function(deviceId) {
         this.setState({activeAudioInput: deviceId});
         CallMediaHandler.setAudioInput(deviceId);
@@ -1010,6 +1021,7 @@ module.exports = React.createClass({
 
         const Dropdown = sdk.getComponent('elements.Dropdown');
 
+        let speakerDropdown = <p>{ _t('No Audio Outputs detected') }</p>;
         let microphoneDropdown = <p>{ _t('No Microphones detected') }</p>;
         let webcamDropdown = <p>{ _t('No Webcams detected') }</p>;
 
@@ -1018,6 +1030,26 @@ module.exports = React.createClass({
             label: _t('Default Device'),
         };
 
+        const audioOutputs = this.state.mediaDevices.audiooutput.slice(0);
+        if (audioOutputs.length > 0) {
+            let defaultOutput = '';
+            if (!audioOutputs.some((input) => input.deviceId === 'default')) {
+                audioOutputs.unshift(defaultOption);
+            } else {
+                defaultOutput = 'default';
+            }
+
+            speakerDropdown = <div>
+                <h4>{ _t('Audio Output') }</h4>
+                <Dropdown
+                    className="mx_UserSettings_webRtcDevices_dropdown"
+                    value={this.state.activeAudioOutput || defaultOutput}
+                    onOptionChange={this._setAudioOutput}>
+                    { this._mapWebRtcDevicesToSpans(audioOutputs) }
+                </Dropdown>
+            </div>;
+        }
+
         const audioInputs = this.state.mediaDevices.audioinput.slice(0);
         if (audioInputs.length > 0) {
             let defaultInput = '';
@@ -1059,8 +1091,9 @@ module.exports = React.createClass({
         }
 
         return <div>
-                { microphoneDropdown }
-                { webcamDropdown }
+            { speakerDropdown }
+            { microphoneDropdown }
+            { webcamDropdown }
         </div>;
     },
 
@@ -1074,6 +1107,14 @@ module.exports = React.createClass({
         </div>;
     },
 
+    onSelfShareClick: function() {
+        const cli = MatrixClientPeg.get();
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share self dialog', '', ShareDialog, {
+            target: cli.getUser(this._me),
+        });
+    },
+
     _showSpoiler: function(event) {
         const target = event.target;
         target.innerHTML = target.getAttribute('data-spoiler');
@@ -1295,10 +1336,13 @@ module.exports = React.createClass({
 
                 <div className="mx_UserSettings_section">
                     <div className="mx_UserSettings_advanced">
-                        { _t("Logged in as:") } { this._me }
+                        { _t("Logged in as:") + ' ' }
+                        <a onClick={this.onSelfShareClick} className="mx_UserSettings_link">
+                            { this._me }
+                        </a>
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        { _t('Access Token:') }
+                        { _t('Access Token:') + ' ' }
                         <span className="mx_UserSettings_advanced_spoiler"
                                 onClick={this._showSpoiler}
                                 data-spoiler={MatrixClientPeg.get().getAccessToken()}>

src/components/structures/login/ForgotPassword.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
@@ -45,6 +43,8 @@ module.exports = React.createClass({
             enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
             enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
             progress: null,
+            password: null,
+            password2: null,
         };
     },
 
@@ -103,7 +103,7 @@ module.exports = React.createClass({
                     </div>,
                 button: _t('Continue'),
                 extraButtons: [
-                    <button className="mx_Dialog_primary"
+                    <button key="export_keys" className="mx_Dialog_primary"
                             onClick={this._onExportE2eKeysClicked}>
                         { _t('Export E2E room keys') }
                     </button>,
@@ -169,7 +169,8 @@ module.exports = React.createClass({
         } else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
                 <div className="mx_Login_prompt">
-                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.", { emailAddress: this.state.email }) }
+                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
+                        "click below.", { emailAddress: this.state.email }) }
                     <br />
                     <input className="mx_Login_submit" type="button" onClick={this.onVerify}
                         value={_t('I have verified my email address')} />
@@ -179,14 +180,15 @@ module.exports = React.createClass({
             resetPasswordJsx = (
                 <div className="mx_Login_prompt">
                     <p>{ _t('Your password has been reset') }.</p>
-                    <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. To re-enable notifications, sign in again on each device') }.</p>
+                    <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. ' +
+                        'To re-enable notifications, sign in again on each device') }.</p>
                     <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
                         value={_t('Return to login screen')} />
                 </div>
             );
         } else {
             let serverConfigSection;
-            if (!SdkConfig.get().disable_custom_urls) {
+            if (!SdkConfig.get()['disable_custom_urls']) {
                 serverConfigSection = (
                     <ServerConfig ref="serverConfig"
                         withToggleButton={true}
@@ -199,6 +201,8 @@ module.exports = React.createClass({
                 );
             }
 
+            const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+
             resetPasswordJsx = (
             <div>
                 <div className="mx_Login_prompt">
@@ -233,6 +237,7 @@ module.exports = React.createClass({
                     <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
                         { _t('Create an account') }
                     </a>
+                    <LanguageSelector />
                     <LoginFooter />
                 </div>
             </div>

src/components/structures/login/LanguageSelector.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2018 New Vector 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.
+*/
+
+import SdkConfig from "../../../SdkConfig";
+import {getCurrentLanguage} from "../../../languageHandler";
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import PlatformPeg from "../../../PlatformPeg";
+import sdk from '../../../index';
+import React from 'react';
+
+function onChange(newLang) {
+    if (getCurrentLanguage() !== newLang) {
+        SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
+        PlatformPeg.get().reload();
+    }
+}
+
+export default function LanguageSelector() {
+    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
+
+    const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+    return <div className="mx_Login_language_div">
+        <LanguageDropdown onOptionChange={onChange} className="mx_Login_language" value={getCurrentLanguage()} />
+    </div>;
+}

src/components/structures/login/Login.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,15 +21,13 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import * as languageHandler from '../../../languageHandler';
 import sdk from '../../../index';
 import Login from '../../../Login';
-import PlatformPeg from '../../../PlatformPeg';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import SettingsStore from "../../../settings/SettingsStore";
 
 // For validating phone numbers without country codes
-const PHONE_NUMBER_REGEX = /^[0-9\(\)\-\s]*$/;
+const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
 
 /**
  * A wire component which glues together login UI components and Login logic
@@ -94,6 +93,13 @@ module.exports = React.createClass({
         this._unmounted = true;
     },
 
+    onPasswordLoginError: function(errorText) {
+        this.setState({
+            errorText,
+            loginIncorrect: Boolean(errorText),
+        });
+    },
+
     onPasswordLogin: function(username, phoneCountry, phoneNumber, password) {
         this.setState({
             busy: true,
@@ -113,10 +119,10 @@ module.exports = React.createClass({
 
             // Some error strings only apply for logging in
             const usingEmail = username.indexOf("@") > 0;
-            if (error.httpStatus == 400 && usingEmail) {
+            if (error.httpStatus === 400 && usingEmail) {
                 errorText = _t('This Home Server does not support login using email address.');
             } else if (error.httpStatus === 401 || error.httpStatus === 403) {
-                if (SdkConfig.get().disable_custom_urls) {
+                if (SdkConfig.get()['disable_custom_urls']) {
                     errorText = (
                         <div>
                             <div>{ _t('Incorrect username and/or password.') }</div>
@@ -143,7 +149,7 @@ module.exports = React.createClass({
                 // but the login API gives a 403 https://matrix.org/jira/browse/SYN-744
                 // mentions this (although the bug is for UI auth which is not this)
                 // We treat both as an incorrect password
-                loginIncorrect: error.httpStatus === 401 || error.httpStatus == 403,
+                loginIncorrect: error.httpStatus === 401 || error.httpStatus === 403,
             });
         }).finally(() => {
             if (this._unmounted) {
@@ -231,7 +237,7 @@ module.exports = React.createClass({
         hsUrl = hsUrl || this.state.enteredHomeserverUrl;
         isUrl = isUrl || this.state.enteredIdentityServerUrl;
 
-        const fallbackHsUrl = hsUrl == this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
+        const fallbackHsUrl = hsUrl === this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
 
         const loginLogic = new Login(hsUrl, isUrl, fallbackHsUrl, {
             defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
@@ -310,19 +316,27 @@ module.exports = React.createClass({
                  !this.state.enteredHomeserverUrl.startsWith("http"))
             ) {
                 errorText = <span>
-                    {
-                        _t("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
-                            "Either use HTTPS or <a>enable unsafe scripts</a>.",
-                            {},
-                            { 'a': (sub) => { return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">{ sub }</a>; } },
+                    { _t("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
+                        "Either use HTTPS or <a>enable unsafe scripts</a>.", {},
+                        {
+                            'a': (sub) => {
+                                return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">
+                                    { sub }
+                                </a>;
+                            },
+                        },
                     ) }
                 </span>;
             } else {
                 errorText = <span>
-                    {
-                        _t("Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
-                            {},
-                            { 'a': (sub) => { return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>; } },
+                    { _t("Can't connect to homeserver - please check your connectivity, ensure your " +
+                        "<a>homeserver's SSL certificate</a> is trusted, and that a browser extension " +
+                        "is not blocking requests.", {},
+                        {
+                            'a': (sub) => {
+                                return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>;
+                            },
+                        },
                     ) }
                 </span>;
             }
@@ -350,6 +364,7 @@ module.exports = React.createClass({
         return (
             <PasswordLogin
                onSubmit={this.onPasswordLogin}
+               onError={this.onPasswordLoginError}
                initialUsername={this.state.username}
                initialPhoneCountry={this.state.phoneCountry}
                initialPhoneNumber={this.state.phoneNumber}
@@ -370,23 +385,6 @@ module.exports = React.createClass({
         );
     },
 
-    _onLanguageChange: function(newLang) {
-        if (languageHandler.getCurrentLanguage() !== newLang) {
-            SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
-            PlatformPeg.get().reload();
-        }
-    },
-
-    _renderLanguageSetting: function() {
-        const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
-        return <div className="mx_Login_language_div">
-            <LanguageDropdown onOptionChange={this._onLanguageChange}
-                          className="mx_Login_language"
-                          value={languageHandler.getCurrentLanguage()}
-            />
-        </div>;
-    },
-
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
         const LoginPage = sdk.getComponent("login.LoginPage");
@@ -399,25 +397,14 @@ 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>;
         }
 
-        let returnToAppJsx;
-        /*
-        // with the advent of ILAG I don't think we need this any more
-        if (this.props.onCancelClick) {
-            returnToAppJsx =
-                <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
-                    { _t('Return to app') }
-                </a>;
-        }
-        */
-
         let serverConfig;
         let header;
 
-        if (!SdkConfig.get().disable_custom_urls) {
+        if (!SdkConfig.get()['disable_custom_urls']) {
             serverConfig = <ServerConfig ref="serverConfig"
                 withToggleButton={true}
                 customHsUrl={this.props.customHsUrl}
@@ -447,6 +434,8 @@ module.exports = React.createClass({
             );
         }
 
+        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+
         return (
             <LoginPage>
                 <div className="mx_Login_box">
@@ -460,8 +449,7 @@ module.exports = React.createClass({
                             { _t('Create an account') }
                         </a>
                         { loginAsGuestJsx }
-                        { returnToAppJsx }
-                        { !SdkConfig.get().disable_login_language_selector ? this._renderLanguageSetting() : '' }
+                        <LanguageSelector />
                         <LoginFooter />
                     </div>
                 </div>

src/components/structures/login/Registration.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,7 +23,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
-import ServerConfig from '../../views/login/ServerConfig';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import RegistrationForm from '../../views/login/RegistrationForm';
 import RtsClient from '../../../RtsClient';
@@ -62,6 +62,12 @@ module.exports = React.createClass({
         onLoginClick: PropTypes.func.isRequired,
         onCancelClick: PropTypes.func,
         onServerConfigChange: PropTypes.func.isRequired,
+
+        rtsClient: PropTypes.shape({
+            getTeamsConfig: PropTypes.func.isRequired,
+            trackReferral: PropTypes.func.isRequired,
+            getTeam: PropTypes.func.isRequired,
+        }),
     },
 
     getInitialState: function() {
@@ -133,7 +139,7 @@ module.exports = React.createClass({
             newState.isUrl = config.isUrl;
         }
         this.props.onServerConfigChange(config);
-        this.setState(newState, function() {
+        this.setState(newState, () => {
             this._replaceClient();
         });
     },
@@ -159,11 +165,11 @@ module.exports = React.createClass({
             let msg = response.message || response.toString();
             // can we give a better error message?
             if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
-                let msisdn_available = false;
+                let msisdnAvailable = false;
                 for (const flow of response.available_flows) {
-                    msisdn_available |= flow.stages.indexOf('m.login.msisdn') > -1;
+                    msisdnAvailable |= flow.stages.indexOf('m.login.msisdn') > -1;
                 }
-                if (!msisdn_available) {
+                if (!msisdnAvailable) {
                     msg = _t('This server does not support authentication with a phone number.');
                 }
             }
@@ -242,7 +248,7 @@ module.exports = React.createClass({
         return matrixClient.getPushers().then((resp)=>{
             const pushers = resp.pushers;
             for (let i = 0; i < pushers.length; ++i) {
-                if (pushers[i].kind == 'email') {
+                if (pushers[i].kind === 'email') {
                     const emailPusher = pushers[i];
                     emailPusher.data = { brand: this.props.brand };
                     matrixClient.setPusher(emailPusher).done(() => {
@@ -267,7 +273,7 @@ module.exports = React.createClass({
                 errMsg = _t('Passwords don\'t match.');
                 break;
             case "RegistrationForm.ERR_PASSWORD_LENGTH":
-                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH: MIN_PASSWORD_LENGTH});
+                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH});
                 break;
             case "RegistrationForm.ERR_EMAIL_INVALID":
                 errMsg = _t('This doesn\'t look like a valid email address.');
@@ -353,7 +359,7 @@ module.exports = React.createClass({
             registerBody = <Spinner />;
         } else {
             let serverConfigSection;
-            if (!SdkConfig.get().disable_custom_urls) {
+            if (!SdkConfig.get()['disable_custom_urls']) {
                 serverConfigSection = (
                     <ServerConfig ref="serverConfig"
                         withToggleButton={true}
@@ -385,18 +391,6 @@ module.exports = React.createClass({
             );
         }
 
-        let returnToAppJsx;
-        /*
-        // with the advent of ILAG I don't think we need this any more
-        if (this.props.onCancelClick) {
-            returnToAppJsx = (
-                <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
-                    { _t('Return to app') }
-                </a>
-            );
-        }
-        */
-
         let header;
         let errorText;
         // FIXME: remove hardcoded Status team tweaks at some point
@@ -418,6 +412,8 @@ module.exports = React.createClass({
             );
         }
 
+        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+
         return (
             <LoginPage>
                 <div className="mx_Login_box">
@@ -431,7 +427,7 @@ module.exports = React.createClass({
                     { registerBody }
                     { signIn }
                     { errorText }
-                    { returnToAppJsx }
+                    <LanguageSelector />
                     <LoginFooter />
                 </div>
             </LoginPage>

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -0,0 +1,87 @@
+/*
+Copyright 2018 Vector Creations 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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import {Group} from 'matrix-js-sdk';
+import GroupStore from "../../../stores/GroupStore";
+
+export default class GroupInviteTileContextMenu extends React.Component {
+    static propTypes = {
+        group: PropTypes.instanceOf(Group).isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: PropTypes.func,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this._onClickReject = this._onClickReject.bind(this);
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    _onClickReject() {
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+        Modal.createTrackedDialog('Reject community invite', '', QuestionDialog, {
+            title: _t('Reject invitation'),
+            description: _t('Are you sure you want to reject the invitation?'),
+            onFinished: async (shouldLeave) => {
+                if (!shouldLeave) return;
+
+                // FIXME: controller shouldn't be loading a view :(
+                const Loader = sdk.getComponent("elements.Spinner");
+                const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
+
+                try {
+                    await GroupStore.leaveGroup(this.props.group.groupId);
+                } catch (e) {
+                    console.error("Error rejecting community invite: ", e);
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Error rejecting invite', '', ErrorDialog, {
+                        title: _t("Error"),
+                        description: _t("Unable to reject invite"),
+                    });
+                } finally {
+                    modal.close();
+                }
+            },
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    render() {
+        return <div>
+            <div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
+                <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                { _t('Reject') }
+            </div>
+        </div>;
+    }
+}

src/components/views/context_menus/MessageContextMenu.js

@@ -15,10 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import {EventStatus} from 'matrix-js-sdk';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher';
@@ -184,6 +183,15 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    onPermalinkClick: function(e: Event) {
+        e.preventDefault();
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
+            target: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
     onReplyClick: function() {
         dis.dispatch({
             action: 'reply_to_event',
@@ -211,7 +219,10 @@ module.exports = React.createClass({
         let replyButton;
         let collapseReplyThread;
 
-        if (eventStatus === 'not_sent') {
+        // status is SENT before remote-echo, null after
+        const isSent = !eventStatus || eventStatus === EventStatus.SENT;
+
+        if (eventStatus === EventStatus.NOT_SENT) {
             resendButton = (
                 <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
                     { _t('Resend') }
@@ -219,7 +230,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (!eventStatus && this.state.canRedact) {
+        if (isSent && this.state.canRedact) {
             redactButton = (
                 <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
                     { _t('Remove') }
@@ -227,7 +238,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (eventStatus === "queued" || eventStatus === "not_sent") {
+        if (eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT) {
             cancelButton = (
                 <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
                     { _t('Cancel Sending') }
@@ -235,7 +246,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (!eventStatus && this.props.mxEvent.getType() === 'm.room.message') {
+        if (isSent && this.props.mxEvent.getType() === 'm.room.message') {
             const content = this.props.mxEvent.getContent();
             if (content.msgtype && content.msgtype !== 'm.bad.encrypted' && content.hasOwnProperty('body')) {
                 forwardButton = (
@@ -244,13 +255,11 @@ module.exports = React.createClass({
                     </div>
                 );
 
-                if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) {
-                    replyButton = (
-                        <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
-                            { _t('Reply') }
-                        </div>
-                    );
-                }
+                replyButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
+                        { _t('Reply') }
+                    </div>
+                );
 
                 if (this.state.canPin) {
                     pinButton = (
@@ -290,7 +299,7 @@ module.exports = React.createClass({
         const permalinkButton = (
             <div className="mx_MessageContextMenu_field">
                 <a href={makeEventPermalink(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId())}
-                  target="_blank" rel="noopener" onClick={this.closeMenu}>{ _t('Permalink') }</a>
+                  target="_blank" rel="noopener" onClick={this.onPermalinkClick}>{ _t('Share Message') }</a>
             </div>
         );
 

src/components/views/dialogs/AddressPickerDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Promise from 'bluebird';
@@ -27,6 +27,13 @@ import GroupStore from '../../../stores/GroupStore';
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
 
+const addressTypeName = {
+    'mx-user-id': _td("Matrix ID"),
+    'mx-room-id': _td("Matrix Room ID"),
+    'email': _td("email address"),
+};
+
+
 module.exports = React.createClass({
     displayName: "AddressPickerDialog",
 
@@ -66,7 +73,7 @@ module.exports = React.createClass({
 
             // List of UserAddressType objects representing
             // the list of addresses we're going to invite
-            userList: [],
+            selectedList: [],
 
             // Whether a search is ongoing
             busy: false,
@@ -76,10 +83,9 @@ module.exports = React.createClass({
             serverSupportsUserDirectory: true,
             // The query being searched for
             query: "",
-            // List of UserAddressType objects representing
-            // the set of auto-completion results for the current search
-            // query.
-            queryList: [],
+            // List of UserAddressType objects representing the set of
+            // auto-completion results for the current search query.
+            suggestedList: [],
         };
     },
 
@@ -91,14 +97,14 @@ module.exports = React.createClass({
     },
 
     onButtonClick: function() {
-        let userList = this.state.userList.slice();
+        let selectedList = this.state.selectedList.slice();
         // Check the text input field to see if user has an unconverted address
-        // If there is and it's valid add it to the local userList
+        // If there is and it's valid add it to the local selectedList
         if (this.refs.textinput.value !== '') {
-            userList = this._addInputToList();
-            if (userList === null) return;
+            selectedList = this._addInputToList();
+            if (selectedList === null) return;
         }
-        this.props.onFinished(true, userList);
+        this.props.onFinished(true, selectedList);
     },
 
     onCancel: function() {
@@ -118,18 +124,18 @@ module.exports = React.createClass({
             e.stopPropagation();
             e.preventDefault();
             if (this.addressSelector) this.addressSelector.moveSelectionDown();
-        } else if (this.state.queryList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
+        } else if (this.state.suggestedList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
             e.stopPropagation();
             e.preventDefault();
             if (this.addressSelector) this.addressSelector.chooseSelection();
-        } else if (this.refs.textinput.value.length === 0 && this.state.userList.length && e.keyCode === 8) { // backspace
+        } else if (this.refs.textinput.value.length === 0 && this.state.selectedList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
-            this.onDismissed(this.state.userList.length - 1)();
+            this.onDismissed(this.state.selectedList.length - 1)();
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.refs.textinput.value == '') {
+            if (this.refs.textinput.value === '') {
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
             } else {
@@ -148,7 +154,7 @@ module.exports = React.createClass({
             clearTimeout(this.queryChangedDebouncer);
         }
         // Only do search if there is something to search
-        if (query.length > 0 && query != '@' && query.length >= 2) {
+        if (query.length > 0 && query !== '@' && query.length >= 2) {
             this.queryChangedDebouncer = setTimeout(() => {
                 if (this.props.pickerType === 'user') {
                     if (this.props.groupId) {
@@ -170,7 +176,7 @@ module.exports = React.createClass({
             }, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
         } else {
             this.setState({
-                queryList: [],
+                suggestedList: [],
                 query: "",
                 searchError: null,
             });
@@ -179,11 +185,11 @@ module.exports = React.createClass({
 
     onDismissed: function(index) {
         return () => {
-            const userList = this.state.userList.slice();
-            userList.splice(index, 1);
+            const selectedList = this.state.selectedList.slice();
+            selectedList.splice(index, 1);
             this.setState({
-                userList: userList,
-                queryList: [],
+                selectedList,
+                suggestedList: [],
                 query: "",
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
@@ -197,11 +203,11 @@ module.exports = React.createClass({
     },
 
     onSelected: function(index) {
-        const userList = this.state.userList.slice();
-        userList.push(this.state.queryList[index]);
+        const selectedList = this.state.selectedList.slice();
+        selectedList.push(this.state.suggestedList[index]);
         this.setState({
-            userList: userList,
-            queryList: [],
+            selectedList,
+            suggestedList: [],
             query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
@@ -379,10 +385,10 @@ module.exports = React.createClass({
     },
 
     _processResults: function(results, query) {
-        const queryList = [];
+        const suggestedList = [];
         results.forEach((result) => {
             if (result.room_id) {
-                queryList.push({
+                suggestedList.push({
                     addressType: 'mx-room-id',
                     address: result.room_id,
                     displayName: result.name,
@@ -399,7 +405,7 @@ module.exports = React.createClass({
 
             // Return objects, structure of which is defined
             // by UserAddressType
-            queryList.push({
+            suggestedList.push({
                 addressType: 'mx-user-id',
                 address: result.user_id,
                 displayName: result.display_name,
@@ -413,18 +419,18 @@ module.exports = React.createClass({
         // a perfectly valid address if there are close matches.
         const addrType = getAddressType(query);
         if (this.props.validAddressTypes.includes(addrType)) {
-            queryList.unshift({
+            suggestedList.unshift({
                 addressType: addrType,
                 address: query,
                 isKnown: false,
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-            if (addrType == 'email') {
+            if (addrType === 'email') {
                 this._lookupThreepid(addrType, query).done();
             }
         }
         this.setState({
-            queryList,
+            suggestedList,
             error: false,
         }, () => {
             if (this.addressSelector) this.addressSelector.moveSelectionTop();
@@ -442,14 +448,14 @@ module.exports = React.createClass({
         if (!this.props.validAddressTypes.includes(addrType)) {
             this.setState({ error: true });
             return null;
-        } else if (addrType == 'mx-user-id') {
+        } else if (addrType === 'mx-user-id') {
             const user = MatrixClientPeg.get().getUser(addrObj.address);
             if (user) {
                 addrObj.displayName = user.displayName;
                 addrObj.avatarMxc = user.avatarUrl;
                 addrObj.isKnown = true;
             }
-        } else if (addrType == 'mx-room-id') {
+        } else if (addrType === 'mx-room-id') {
             const room = MatrixClientPeg.get().getRoom(addrObj.address);
             if (room) {
                 addrObj.displayName = room.name;
@@ -458,15 +464,15 @@ module.exports = React.createClass({
             }
         }
 
-        const userList = this.state.userList.slice();
-        userList.push(addrObj);
+        const selectedList = this.state.selectedList.slice();
+        selectedList.push(addrObj);
         this.setState({
-            userList: userList,
-            queryList: [],
+            selectedList,
+            suggestedList: [],
             query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-        return userList;
+        return selectedList;
     },
 
     _lookupThreepid: function(medium, address) {
@@ -492,7 +498,7 @@ module.exports = React.createClass({
             if (res === null) return null;
             if (cancelled) return null;
             this.setState({
-                queryList: [{
+                suggestedList: [{
                     // a UserAddressType
                     addressType: medium,
                     address: address,
@@ -510,15 +516,27 @@ module.exports = React.createClass({
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
+        // map addressType => set of addresses to avoid O(n*m) operation
+        const selectedAddresses = {};
+        this.state.selectedList.forEach(({address, addressType}) => {
+            if (!selectedAddresses[addressType]) selectedAddresses[addressType] = new Set();
+            selectedAddresses[addressType].add(address);
+        });
+
+        // Filter out any addresses in the above already selected addresses (matching both type and address)
+        const filteredSuggestedList = this.state.suggestedList.filter(({address, addressType}) => {
+            return !(selectedAddresses[addressType] && selectedAddresses[addressType].has(address));
+        });
+
         const query = [];
         // create the invite list
-        if (this.state.userList.length > 0) {
+        if (this.state.selectedList.length > 0) {
             const AddressTile = sdk.getComponent("elements.AddressTile");
-            for (let i = 0; i < this.state.userList.length; i++) {
+            for (let i = 0; i < this.state.selectedList.length; i++) {
                 query.push(
                     <AddressTile
                         key={i}
-                        address={this.state.userList[i]}
+                        address={this.state.selectedList[i]}
                         canDismiss={true}
                         onDismissed={this.onDismissed(i)}
                         showAddress={this.props.pickerType === 'user'} />,
@@ -528,7 +546,7 @@ module.exports = React.createClass({
 
         // Add the query at the end
         query.push(
-            <textarea key={this.state.userList.length}
+            <textarea key={this.state.selectedList.length}
                 rows="1"
                 id="textinput"
                 ref="textinput"
@@ -543,34 +561,22 @@ module.exports = React.createClass({
         let error;
         let addressSelector;
         if (this.state.error) {
-            let tryUsing = '';
-            const validTypeDescriptions = this.props.validAddressTypes.map((t) => {
-                return {
-                    'mx-user-id': _t("Matrix ID"),
-                    'mx-room-id': _t("Matrix Room ID"),
-                    'email': _t("email address"),
-                }[t];
-            });
-            tryUsing = _t("Try using one of the following valid address types: %(validTypesList)s.", {
-                validTypesList: validTypeDescriptions.join(", "),
-            });
+            const validTypeDescriptions = this.props.validAddressTypes.map((t) => _t(addressTypeName[t]));
             error = <div className="mx_ChatInviteDialog_error">
                 { _t("You have entered an invalid address.") }
                 <br />
-                { tryUsing }
+                { _t("Try using one of the following valid address types: %(validTypesList)s.", {
+                    validTypesList: validTypeDescriptions.join(", "),
+                }) }
             </div>;
         } else if (this.state.searchError) {
             error = <div className="mx_ChatInviteDialog_error">{ this.state.searchError }</div>;
-        } else if (
-            this.state.query.length > 0 &&
-            this.state.queryList.length === 0 &&
-            !this.state.busy
-        ) {
+        } else if (this.state.query.length > 0 && filteredSuggestedList.length === 0 && !this.state.busy) {
             error = <div className="mx_ChatInviteDialog_error">{ _t("No results") }</div>;
         } else {
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
-                    addressList={this.state.queryList}
+                    addressList={filteredSuggestedList}
                     showAddress={this.props.pickerType === 'user'}
                     onSelected={this.onSelected}
                     truncateAt={TRUNCATE_QUERY_LIST}

src/components/views/dialogs/BaseDialog.js

@@ -18,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import FocusTrap from 'focus-trap-react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import { MatrixClient } from 'matrix-js-sdk';
 
@@ -64,7 +65,10 @@ export default React.createClass({
 
         // Id of content element
         // If provided, this is used to add a aria-describedby attribute
-        contentId: React.PropTypes.string,
+        contentId: PropTypes.string,
+
+        // optional additional class for the title element
+        titleClass: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -105,25 +109,28 @@ export default React.createClass({
     render: function() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
+        let cancelButton;
+        if (this.props.hasCancel) {
+            cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
+                <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
+            </AccessibleButton>;
+        }
+
         return (
             <FocusTrap onKeyDown={this._onKeyDown}
                 className={this.props.className}
                 role="dialog"
                 aria-labelledby='mx_BaseDialog_title'
                 // This should point to a node describing the dialog.
-                // If we were about to completelly follow this recommendation we'd need to
+                // If we were about to completely follow this recommendation we'd need to
                 // make all the components relying on BaseDialog to be aware of it.
                 // So instead we will use the whole content as the description.
                 // Description comes first and if the content contains more text,
                 // AT users can skip its presentation.
                 aria-describedby={this.props.contentId}
             >
-                { this.props.hasCancel ? <AccessibleButton onClick={this._onCancelClick}
-                    className="mx_Dialog_cancelButton"
-                >
-                    <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </AccessibleButton> : null }
-                <div className={'mx_Dialog_title ' + this.props.titleClass} id='mx_BaseDialog_title'>
+                { cancelButton }
+                <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
                     { this.props.title }
                 </div>
                 { this.props.children }

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -28,6 +29,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
 
     constructor(props) {
         super(props);
+        this.onFinished = this.onFinished.bind(this);
         this.onRoomTileClick = this.onRoomTileClick.bind(this);
 
         this.state = {
@@ -53,10 +55,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
             const room = client.getRoom(roomId);
             if (room) {
                 const me = room.getMember(client.credentials.userId);
-                const highlight = (
-                    room.getUnreadNotificationCount('highlight') > 0 ||
-                    me.membership == "invite"
-                );
+                const highlight = room.getUnreadNotificationCount('highlight') > 0 || me.membership === "invite";
                 tiles.push(
                     <RoomTile key={room.roomId} room={room}
                         transparent={true}
@@ -64,7 +63,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                         selected={false}
                         unread={Unread.doesRoomHaveUnreadMessages(room)}
                         highlight={highlight}
-                        isInvite={me.membership == "invite"}
+                        isInvite={me.membership === "invite"}
                         onClick={this.onRoomTileClick}
                     />,
                 );
@@ -110,6 +109,10 @@ export default class ChatCreateOrReuseDialog extends React.Component {
         this.props.onExistingRoomSelected(roomId);
     }
 
+    onFinished() {
+        this.props.onFinished(false);
+    }
+
     render() {
         let title = '';
         let content = null;
@@ -170,14 +173,14 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                     { profile }
                 </div>
                 <DialogButtons primaryButton={_t('Start Chatting')}
-                    onPrimaryButtonClick={this.props.onNewDMClick} focus="true" />
+                    onPrimaryButtonClick={this.props.onNewDMClick} focus={true} />
             </div>;
         }
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className='mx_ChatCreateOrReuseDialog'
-                onFinished={this.props.onFinished.bind(false)}
+                onFinished={this.onFinished}
                 title={title}
                 contentId='mx_Dialog_content'
             >
@@ -187,7 +190,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
     }
 }
 
-ChatCreateOrReuseDialog.propTyps = {
+ChatCreateOrReuseDialog.propTypes = {
     userId: PropTypes.string.isRequired,
     // Called when clicking outside of the dialog
     onFinished: PropTypes.func.isRequired,

src/components/views/dialogs/CreateRoomDialog.js

@@ -52,8 +52,8 @@ export default React.createClass({
                         <div className="mx_CreateRoomDialog_label">
                             <label htmlFor="textinput"> { _t('Room name (optional)') } </label>
                         </div>
-                        <div>
-                            <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} size="64" />
+                        <div className="mx_CreateRoomDialog_input_container">
+                            <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} />
                         </div>
                         <br />
 

src/components/views/dialogs/QuestionDialog.js

@@ -67,9 +67,10 @@ export default React.createClass({
                     { this.props.description }
                 </div>
                 <DialogButtons primaryButton={this.props.button || _t('OK')}
-                    cancelButton={this.props.cancelButton}
-                    onPrimaryButtonClick={this.onOk}
                     primaryButtonClass={primaryButtonClass}
+                    cancelButton={this.props.cancelButton}
+                    hasCancel={this.props.hasCancelButton}
+                    onPrimaryButtonClick={this.onOk}
                     focus={this.props.focus}
                     onCancel={this.onCancel}
                 >

src/components/views/dialogs/SetEmailDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -36,7 +37,7 @@ export default React.createClass({
 
     getInitialState: function() {
         return {
-            emailAddress: null,
+            emailAddress: '',
             emailBusy: false,
         };
     },
@@ -127,6 +128,7 @@ export default React.createClass({
         const EditableText = sdk.getComponent('elements.EditableText');
 
         const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
+            initialValue={this.state.emailAddress}
             className="mx_SetEmailDialog_email_input"
             autoFocus="true"
             placeholder={_t("Email address")}

src/components/views/dialogs/SetPasswordDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -79,15 +80,11 @@ export default React.createClass({
         Modal.createDialog(WarmFuzzy, {
             didSetEmail: res.didSetEmail,
             onFinished: () => {
-                this._onContinueClicked();
+                this.props.onFinished();
             },
         });
     },
 
-    _onContinueClicked: function() {
-        this.props.onFinished(true);
-    },
-
     _onPasswordChangeError: function(err) {
         let errMsg = err.error || "";
         if (err.httpStatus === 403) {

src/components/views/dialogs/ShareDialog.js

@@ -0,0 +1,224 @@
+/*
+Copyright 2018 New Vector 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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import QRCode from 'qrcode-react';
+import {makeEventPermalink, makeGroupPermalink, makeRoomPermalink, makeUserPermalink} from "../../../matrix-to";
+import * as ContextualMenu from "../../structures/ContextualMenu";
+
+const socials = [
+    {
+        name: 'Facebook',
+        img: 'img/social/facebook.png',
+        url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+    }, {
+        name: 'Twitter',
+        img: 'img/social/twitter-2.png',
+        url: (url) => `https://twitter.com/home?status=${url}`,
+    }, /* // icon missing
+        name: 'Google Plus',
+        img: 'img/social/',
+        url: (url) => `https://plus.google.com/share?url=${url}`,
+    },*/ {
+        name: 'LinkedIn',
+        img: 'img/social/linkedin.png',
+        url: (url) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
+    }, {
+        name: 'Reddit',
+        img: 'img/social/reddit.png',
+        url: (url) => `http://www.reddit.com/submit?url=${url}`,
+    }, {
+        name: 'email',
+        img: 'img/social/email-1.png',
+        url: (url) => `mailto:?body=${url}`,
+    },
+];
+
+export default class ShareDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+        target: PropTypes.oneOfType([
+            PropTypes.instanceOf(Room),
+            PropTypes.instanceOf(User),
+            PropTypes.instanceOf(Group),
+            PropTypes.instanceOf(RoomMember),
+            PropTypes.instanceOf(MatrixEvent),
+        ]).isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.onCopyClick = this.onCopyClick.bind(this);
+        this.onLinkSpecificEventCheckboxClick = this.onLinkSpecificEventCheckboxClick.bind(this);
+
+        this.state = {
+            // MatrixEvent defaults to share linkSpecificEvent
+            linkSpecificEvent: this.props.target instanceof MatrixEvent,
+        };
+    }
+
+    static _selectText(target) {
+        const range = document.createRange();
+        range.selectNodeContents(target);
+
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+
+    static onLinkClick(e) {
+        e.preventDefault();
+        const {target} = e;
+        ShareDialog._selectText(target);
+    }
+
+    onCopyClick(e) {
+        e.preventDefault();
+
+        ShareDialog._selectText(this.refs.link);
+
+        let successful;
+        try {
+            successful = document.execCommand('copy');
+        } catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+
+        const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
+        const buttonRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = buttonRect.right + window.pageXOffset;
+        const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
+        const {close} = ContextualMenu.createMenu(GenericTextContextMenu, {
+            chevronOffset: 10,
+            left: x,
+            top: y,
+            message: successful ? _t('Copied!') : _t('Failed to copy'),
+        }, false);
+        e.target.onmouseleave = close;
+    }
+
+    onLinkSpecificEventCheckboxClick() {
+        this.setState({
+            linkSpecificEvent: !this.state.linkSpecificEvent,
+        });
+    }
+
+    render() {
+        let title;
+        let matrixToUrl;
+
+        let checkbox;
+
+        if (this.props.target instanceof Room) {
+            title = _t('Share Room');
+
+            const events = this.props.target.getLiveTimeline().getEvents();
+            if (events.length > 0) {
+                checkbox = <div>
+                    <input type="checkbox"
+                           id="mx_ShareDialog_checkbox"
+                           checked={this.state.linkSpecificEvent}
+                           onClick={this.onLinkSpecificEventCheckboxClick} />
+                    <label htmlFor="mx_ShareDialog_checkbox">
+                        { _t('Link to most recent message') }
+                    </label>
+                </div>;
+            }
+
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = makeEventPermalink(this.props.target.roomId, events[events.length - 1].getId());
+            } else {
+                matrixToUrl = makeRoomPermalink(this.props.target.roomId);
+            }
+        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
+            title = _t('Share User');
+            matrixToUrl = makeUserPermalink(this.props.target.userId);
+        } else if (this.props.target instanceof Group) {
+            title = _t('Share Community');
+            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
+        } else if (this.props.target instanceof MatrixEvent) {
+            title = _t('Share Room Message');
+            checkbox = <div>
+                <input type="checkbox"
+                       id="mx_ShareDialog_checkbox"
+                       checked={this.state.linkSpecificEvent}
+                       onClick={this.onLinkSpecificEventCheckboxClick} />
+                <label htmlFor="mx_ShareDialog_checkbox">
+                    { _t('Link to selected message') }
+                </label>
+            </div>;
+
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = makeEventPermalink(this.props.target.getRoomId(), this.props.target.getId());
+            } else {
+                matrixToUrl = makeRoomPermalink(this.props.target.getRoomId());
+            }
+        }
+
+        const encodedUrl = encodeURIComponent(matrixToUrl);
+
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        return <BaseDialog title={title}
+                           className='mx_ShareDialog'
+                           contentId='mx_Dialog_content'
+                           onFinished={this.props.onFinished}
+        >
+            <div className="mx_ShareDialog_content">
+                <div className="mx_ShareDialog_matrixto">
+                    <a ref="link"
+                       href={matrixToUrl}
+                       onClick={ShareDialog.onLinkClick}
+                       className="mx_ShareDialog_matrixto_link"
+                    >
+                        { matrixToUrl }
+                    </a>
+                    <a href={matrixToUrl} className="mx_ShareDialog_matrixto_copy" onClick={this.onCopyClick}>
+                        { _t('COPY') }
+                        <div>&nbsp;</div>
+                    </a>
+                </div>
+                { checkbox }
+                <hr />
+
+                <div className="mx_ShareDialog_split">
+                    <div className="mx_ShareDialog_qrcode_container">
+                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo="img/matrix-m.svg" />
+                    </div>
+                    <div className="mx_ShareDialog_social_container">
+                        {
+                            socials.map((social) => <a rel="noopener"
+                                                       target="_blank"
+                                                       key={social.name}
+                                                       name={social.name}
+                                                       href={social.url(encodedUrl)}
+                                                       className="mx_ShareDialog_social_icon"
+                            >
+                                <img src={social.img} alt={social.name} height={64} width={64} />
+                            </a>)
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseDialog>;
+    }
+}

src/components/views/elements/AppPermission.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import url from 'url';
 import { _t } from '../../../languageHandler';
-import WidgetUtils from "../../../WidgetUtils";
+import WidgetUtils from "../../../utils/WidgetUtils";
 
 export default class AppPermission extends React.Component {
     constructor(props) {

src/components/views/elements/AppTile.js

@@ -31,7 +31,7 @@ import sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
-import WidgetUtils from '../../../WidgetUtils';
+import WidgetUtils from '../../../utils/WidgetUtils';
 import dis from '../../../dispatcher';
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
@@ -319,10 +319,9 @@ export default class AppTile extends React.Component {
                             return;
                         }
                         this.setState({deleting: true});
-                        MatrixClientPeg.get().sendStateEvent(
+
+                        WidgetUtils.setRoomWidget(
                             this.props.room.roomId,
-                            'im.vector.modular.widgets',
-                            {}, // empty content
                             this.props.id,
                         ).catch((e) => {
                             console.error('Failed to delete widget', e);

src/components/views/elements/EditableItemList.js

@@ -139,8 +139,11 @@ module.exports = React.createClass({
             </div>
             { editableItems }
             { this.props.canEdit ?
+                // This is slightly evil; we want a new instance of
+                // EditableItem when the list grows. To make sure it's
+                // reset to its initial state.
                 <EditableItem
-                    key={-1}
+                    key={editableItems.length}
                     initialValue={this.props.newItem}
                     onAdd={this.onItemAdded}
                     onChange={this.onNewItemChanged}

src/components/views/elements/EditableText.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,15 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
 
-const KEY_TAB = 9;
-const KEY_SHIFT = 16;
-const KEY_WINDOWS = 91;
-
 module.exports = React.createClass({
     displayName: 'EditableText',
 
@@ -66,9 +61,7 @@ module.exports = React.createClass({
     },
 
     componentWillReceiveProps: function(nextProps) {
-        if (nextProps.initialValue !== this.props.initialValue ||
-            nextProps.initialValue !== this.value
-        ) {
+        if (nextProps.initialValue !== this.props.initialValue) {
             this.value = nextProps.initialValue;
             if (this.refs.editable_div) {
                 this.showPlaceholder(!this.value);
@@ -139,7 +132,7 @@ module.exports = React.createClass({
             this.showPlaceholder(false);
         }
 
-        if (ev.key == "Enter") {
+        if (ev.key === "Enter") {
             ev.stopPropagation();
             ev.preventDefault();
         }
@@ -156,9 +149,9 @@ module.exports = React.createClass({
             this.value = ev.target.textContent;
         }
 
-        if (ev.key == "Enter") {
+        if (ev.key === "Enter") {
             this.onFinish(ev);
-        } else if (ev.key == "Escape") {
+        } else if (ev.key === "Escape") {
             this.cancelEdit();
         }
 
@@ -193,7 +186,7 @@ module.exports = React.createClass({
         const submit = (ev.key === "Enter") || shouldSubmit;
         this.setState({
             phase: this.Phases.Display,
-        }, function() {
+        }, () => {
             if (this.value !== this.props.initialValue) {
                 self.onValueChanged(submit);
             }
@@ -204,23 +197,35 @@ module.exports = React.createClass({
         const sel = window.getSelection();
         sel.removeAllRanges();
 
-        if (this.props.blurToCancel) {this.cancelEdit();} else {this.onFinish(ev, this.props.blurToSubmit);}
+        if (this.props.blurToCancel) {
+            this.cancelEdit();
+        } else {
+            this.onFinish(ev, this.props.blurToSubmit);
+        }
 
         this.showPlaceholder(!this.value);
     },
 
     render: function() {
-        let editable_el;
+        const {className, editable, initialValue, label, labelClassName} = this.props;
+        let editableEl;
 
-        if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) {
+        if (!editable || (this.state.phase === this.Phases.Display && (label || labelClassName) && !this.value)) {
             // show the label
-            editable_el = <div className={this.props.className + " " + this.props.labelClassName} onClick={this.onClickDiv}>{ this.props.label || this.props.initialValue }</div>;
+            editableEl = <div className={className + " " + labelClassName} onClick={this.onClickDiv}>
+                { label || initialValue }
+            </div>;
         } else {
             // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
-            editable_el = <div ref="editable_div" contentEditable="true" className={this.props.className}
-                               onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onBlur}></div>;
+            editableEl = <div ref="editable_div"
+                              contentEditable={true}
+                              className={className}
+                              onKeyDown={this.onKeyDown}
+                              onKeyUp={this.onKeyUp}
+                              onFocus={this.onFocus}
+                              onBlur={this.onBlur} />;
         }
 
-        return editable_el;
+        return editableEl;
     },
 });

src/components/views/elements/PersistedElement.js

@@ -36,7 +36,7 @@ function getOrCreateContainer() {
 }
 
 // Greater than that of the ContextualMenu
-const PE_Z_INDEX = 3000;
+const PE_Z_INDEX = 5000;
 
 /*
  * Class of component that renders its children in a separate ReactDOM virtual tree

src/components/views/elements/Pill.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,12 +23,13 @@ import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { MATRIXTO_URL_PATTERN } from '../../../linkify-matrix';
 import { getDisplayAliasForRoom } from '../../../Rooms';
+import FlairStore from "../../../stores/FlairStore";
 
 const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 
 // For URLs of matrix.to links in the timeline which have been reformatted by
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
-const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room)\/(([\#\!\@\+])[^\/]*)$/;
+const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room|group)\/(([#!@+])[^\/]*)$/;
 
 const Pill = React.createClass({
     statics: {
@@ -45,6 +47,7 @@ const Pill = React.createClass({
         },
         TYPE_USER_MENTION: 'TYPE_USER_MENTION',
         TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
+        TYPE_GROUP_MENTION: 'TYPE_GROUP_MENTION',
         TYPE_AT_ROOM_MENTION: 'TYPE_AT_ROOM_MENTION', // '@room' mention
     },
 
@@ -81,12 +84,14 @@ const Pill = React.createClass({
 
             // The member related to the user pill
             member: null,
+            // The group related to the group pill
+            group: null,
             // The room related to the room pill
             room: null,
         };
     },
 
-    componentWillReceiveProps(nextProps) {
+    async componentWillReceiveProps(nextProps) {
         let regex = REGEX_MATRIXTO;
         if (nextProps.inMessage) {
             regex = REGEX_LOCAL_MATRIXTO;
@@ -109,9 +114,11 @@ const Pill = React.createClass({
             '@': Pill.TYPE_USER_MENTION,
             '#': Pill.TYPE_ROOM_MENTION,
             '!': Pill.TYPE_ROOM_MENTION,
+            '+': Pill.TYPE_GROUP_MENTION,
         }[prefix];
 
         let member;
+        let group;
         let room;
         switch (pillType) {
             case Pill.TYPE_AT_ROOM_MENTION: {
@@ -140,8 +147,21 @@ const Pill = React.createClass({
                 }
             }
                 break;
+            case Pill.TYPE_GROUP_MENTION: {
+                const cli = MatrixClientPeg.get();
+
+                try {
+                    group = await FlairStore.getGroupProfileCached(cli, resourceId);
+                } catch (e) { // if FlairStore failed, fall back to just groupId
+                    group = {
+                        groupId: resourceId,
+                        avatarUrl: null,
+                        name: null,
+                    };
+                }
+            }
         }
-        this.setState({resourceId, pillType, member, room});
+        this.setState({resourceId, pillType, member, group, room});
     },
 
     componentWillMount() {
@@ -179,6 +199,7 @@ const Pill = React.createClass({
         });
     },
     render: function() {
+        const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
@@ -229,6 +250,20 @@ const Pill = React.createClass({
                 }
             }
                 break;
+            case Pill.TYPE_GROUP_MENTION: {
+                if (this.state.group) {
+                    const {avatarUrl, groupId, name} = this.state.group;
+                    const cli = MatrixClientPeg.get();
+
+                    linkText = groupId;
+                    if (this.props.shouldShowPillAvatar) {
+                        avatar = <BaseAvatar name={name || groupId} width={16} height={16}
+                                             url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />;
+                    }
+                    pillClass = 'mx_GroupPill';
+                }
+            }
+                break;
         }
 
         const classes = classNames(pillClass, {

src/components/views/elements/ReplyThread.js

@@ -160,7 +160,7 @@ export default class ReplyThread extends React.Component {
     }
 
     static makeThread(parentEv, onWidgetLoad, ref) {
-        if (!SettingsStore.isFeatureEnabled("feature_rich_quoting") || !ReplyThread.getParentEventId(parentEv)) {
+        if (!ReplyThread.getParentEventId(parentEv)) {
             return <div />;
         }
         return <ReplyThread parentEv={parentEv} onWidgetLoad={onWidgetLoad} ref={ref} />;

src/components/views/elements/TagTile.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 New Vector Ltd.
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -103,14 +104,27 @@ export default React.createClass({
         }
     },
 
-    onContextButtonClick: function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
+    _openContextMenu: function(x, y, chevronOffset) {
         // Hide the (...) immediately
         this.setState({ hover: false });
 
         const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        ContextualMenu.createMenu(TagTileContextMenu, {
+            chevronOffset: chevronOffset,
+            left: x,
+            top: y,
+            tag: this.props.tag,
+            onFinished: () => {
+                this.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    },
+
+    onContextButtonClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
         const elementRect = e.target.getBoundingClientRect();
 
         // The window X and Y offsets are to adjust position when zoomed in to page
@@ -119,17 +133,14 @@ export default React.createClass({
         let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
         y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
 
-        const self = this;
-        ContextualMenu.createMenu(TagTileContextMenu, {
-            chevronOffset: chevronOffset,
-            left: x,
-            top: y,
-            tag: this.props.tag,
-            onFinished: function() {
-                self.setState({ menuDisplayed: false });
-            },
-        });
-        this.setState({ menuDisplayed: true });
+        this._openContextMenu(x, y, chevronOffset);
+    },
+
+    onContextMenu: function(e) {
+        e.preventDefault();
+
+        const chevronOffset = 12;
+        this._openContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
     },
 
     onMouseOver: function() {
@@ -164,7 +175,7 @@ export default React.createClass({
             <div className="mx_TagTile_context_button" onClick={this.onContextButtonClick}>
                 { "\u00B7\u00B7\u00B7" }
             </div> : <div />;
-        return <AccessibleButton className={className} onClick={this.onClick}>
+        return <AccessibleButton className={className} onClick={this.onClick} onContextMenu={this.onContextMenu}>
             <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
                 <BaseAvatar
                     name={name}

src/components/views/globals/PasswordNagBar.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,28 +15,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
-import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     onUpdateClicked: function() {
         const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
-        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog, {
-            onFinished: (passwordChanged) => {
-                if (!passwordChanged) {
-                    return;
-                }
-                // Notify SessionStore that the user's password was changed
-                dis.dispatch({
-                    action: 'password_changed',
-                });
-            },
-        });
+        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog);
     },
 
     render: function() {

src/components/views/groups/GroupInviteTile.js

@@ -1,5 +1,6 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,6 +21,9 @@ import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
+import classNames from 'classnames';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import {createMenu} from "../../structures/ContextualMenu";
 
 export default React.createClass({
     displayName: 'GroupInviteTile',
@@ -32,6 +36,15 @@ export default React.createClass({
         matrixClient: PropTypes.instanceOf(MatrixClient),
     },
 
+    getInitialState: function() {
+        return ({
+            hover: false,
+            badgeHover: false,
+            menuDisplayed: false,
+            selected: this.props.group.groupId === null, // XXX: this needs linking to LoggedInView/GroupView state
+        });
+    },
+
     onClick: function(e) {
         dis.dispatch({
             action: 'view_group',
@@ -39,6 +52,69 @@ export default React.createClass({
         });
     },
 
+    onMouseEnter: function() {
+        const state = {hover: true};
+        // Only allow non-guests to access the context menu
+        if (!this.context.matrixClient.isGuest()) {
+            state.badgeHover = true;
+        }
+        this.setState(state);
+    },
+
+    onMouseLeave: function() {
+        this.setState({
+            badgeHover: false,
+            hover: false,
+        });
+    },
+
+    _showContextMenu: function(x, y, chevronOffset) {
+        const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
+
+        createMenu(GroupInviteTileContextMenu, {
+            chevronOffset,
+            left: x,
+            top: y,
+            group: this.props.group,
+            onFinished: () => {
+                this.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    },
+
+    onContextMenu: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        e.preventDefault();
+        // Only allow non-guests to access the context menu
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        const chevronOffset = 12;
+        this._showContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
+    },
+
+    onBadgeClicked: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        e.stopPropagation();
+        // Only allow non-guests to access the context menu
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        // If the badge is clicked, then no longer show tooltip
+        if (this.props.collapsed) {
+            this.setState({ hover: false });
+        }
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        this._showContextMenu(x, y, chevronOffset);
+    },
+
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
@@ -49,19 +125,40 @@ export default React.createClass({
 
         const av = <BaseAvatar name={groupName} width={24} height={24} url={httpAvatarUrl} />;
 
-        const label = <EmojiText
-            element="div"
-            title={this.props.group.groupId}
-            className="mx_RoomTile_name mx_RoomTile_badgeShown"
-            dir="auto"
-        >
+        const nameClasses = classNames('mx_RoomTile_name mx_RoomTile_invite mx_RoomTile_badgeShown', {
+            'mx_RoomTile_badgeShown': this.state.badgeHover || this.state.menuDisplayed,
+        });
+
+        const label = <EmojiText element="div" title={this.props.group.groupId} className={nameClasses} dir="auto">
             { groupName }
         </EmojiText>;
 
-        const badge = <div className="mx_RoomSubList_badge mx_RoomSubList_badgeHighlight">!</div>;
+        const badgeEllipsis = this.state.badgeHover || this.state.menuDisplayed;
+        const badgeClasses = classNames('mx_RoomTile_badge mx_RoomTile_highlight', {
+            'mx_RoomTile_badgeButton': badgeEllipsis,
+        });
+
+        const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
+        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+
+        let tooltip;
+        if (this.props.collapsed && this.state.hover) {
+            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            tooltip = <RoomTooltip className="mx_RoomTile_tooltip" label={groupName} dir="auto" />;
+        }
+
+        const classes = classNames('mx_RoomTile mx_RoomTile_highlight', {
+            'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
+            'mx_RoomTile_selected': this.state.selected,
+        });
 
         return (
-            <AccessibleButton className="mx_RoomTile mx_RoomTile_highlight" onClick={this.onClick}>
+            <AccessibleButton className={classes}
+                              onClick={this.onClick}
+                              onMouseEnter={this.onMouseEnter}
+                              onMouseLeave={this.onMouseLeave}
+                              onContextMenu={this.onContextMenu}
+            >
                 <div className="mx_RoomTile_avatar">
                     { av }
                 </div>
@@ -69,6 +166,7 @@ export default React.createClass({
                     { label }
                     { badge }
                 </div>
+                { tooltip }
             </AccessibleButton>
         );
     },

src/components/views/groups/GroupMemberInfo.js

@@ -187,7 +187,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
-                    <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
+                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
                         <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
                     <div className="mx_MemberInfo_avatar">

src/components/views/groups/GroupPublicityToggle.js

@@ -69,7 +69,7 @@ export default React.createClass({
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
         const input = <input type="checkbox"
-            onClick={this._onPublicityToggle}
+            onChange={this._onPublicityToggle}
             checked={this.state.isGroupPublicised}
         />;
         const labelText = !this.state.ready ? _t("Loading...") :

src/components/views/groups/GroupTile.js

@@ -22,6 +22,7 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import FlairStore from '../../../stores/FlairStore';
 
+function nop() {}
 
 const GroupTile = React.createClass({
     displayName: 'GroupTile',
@@ -81,7 +82,7 @@ const GroupTile = React.createClass({
         ) : null;
         // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
         // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6156
-        return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown}>
+        return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown} onClick={nop}>
             <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
                 { (droppableProvided, droppableSnapshot) => (
                     <div ref={droppableProvided.innerRef}>

src/components/views/login/PasswordLogin.js

@@ -28,6 +28,7 @@ import SdkConfig from '../../../SdkConfig';
  */
 class PasswordLogin extends React.Component {
     static defaultProps = {
+        onError: function() {},
         onUsernameChanged: function() {},
         onPasswordChanged: function() {},
         onPhoneCountryChanged: function() {},
@@ -56,33 +57,64 @@ class PasswordLogin extends React.Component {
         this.onPhoneCountryChanged = this.onPhoneCountryChanged.bind(this);
         this.onPhoneNumberChanged = this.onPhoneNumberChanged.bind(this);
         this.onPasswordChanged = this.onPasswordChanged.bind(this);
+        this.isLoginEmpty = this.isLoginEmpty.bind(this);
     }
 
     componentWillMount() {
         this._passwordField = null;
+        this._loginField = null;
     }
 
     componentWillReceiveProps(nextProps) {
         if (!this.props.loginIncorrect && nextProps.loginIncorrect) {
-            field_input_incorrect(this._passwordField);
+            field_input_incorrect(this.isLoginEmpty() ? this._loginField : this._passwordField);
         }
     }
 
     onSubmitForm(ev) {
         ev.preventDefault();
-        if (this.state.loginType === PasswordLogin.LOGIN_FIELD_PHONE) {
-            this.props.onSubmit(
-                '', // XXX: Synapse breaks if you send null here:
-                this.state.phoneCountry,
-                this.state.phoneNumber,
-                this.state.password,
-            );
+
+        let username = ''; // XXX: Synapse breaks if you send null here:
+        let phoneCountry = null;
+        let phoneNumber = null;
+        let error;
+
+        switch (this.state.loginType) {
+            case PasswordLogin.LOGIN_FIELD_EMAIL:
+                username = this.state.username;
+                if (!username) {
+                    error = _t('The email field must not be blank.');
+                }
+                break;
+            case PasswordLogin.LOGIN_FIELD_MXID:
+                username = this.state.username;
+                if (!username) {
+                    error = _t('The user name field must not be blank.');
+                }
+                break;
+            case PasswordLogin.LOGIN_FIELD_PHONE:
+                phoneCountry = this.state.phoneCountry;
+                phoneNumber = this.state.phoneNumber;
+                if (!phoneNumber) {
+                    error = _t('The phone number field must not be blank.');
+                }
+                break;
+        }
+
+        if (error) {
+            this.props.onError(error);
             return;
         }
+
+        if (!this.state.password) {
+            this.props.onError(_t('The password field must not be blank.'));
+            return;
+        }
+
         this.props.onSubmit(
-            this.state.username,
-            null,
-            null,
+            username,
+            phoneCountry,
+            phoneNumber,
             this.state.password,
         );
     }
@@ -93,6 +125,7 @@ class PasswordLogin extends React.Component {
     }
 
     onLoginTypeChange(loginType) {
+        this.props.onError(null); // send a null error to clear any error messages
         this.setState({
             loginType: loginType,
             username: "", // Reset because email and username use the same state
@@ -126,8 +159,10 @@ class PasswordLogin extends React.Component {
         switch (loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
                 classes.mx_Login_email = true;
+                classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
                     className={classNames(classes)}
+                    ref={(e) => {this._loginField = e;}}
                     key="email_input"
                     type="text"
                     name="username" // make it a little easier for browser's remember-password
@@ -139,8 +174,10 @@ class PasswordLogin extends React.Component {
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
                 classes.mx_Login_username = true;
+                classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
                     className={classNames(classes)}
+                    ref={(e) => {this._loginField = e;}}
                     key="username_input"
                     type="text"
                     name="username" // make it a little easier for browser's remember-password
@@ -153,14 +190,14 @@ class PasswordLogin extends React.Component {
                     autoFocus
                     disabled={disabled}
                 />;
-            case PasswordLogin.LOGIN_FIELD_PHONE:
+            case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
                 classes.mx_Login_phoneNumberField = true;
                 classes.mx_Login_field_has_prefix = true;
+                classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
                 return <div className="mx_Login_phoneSection">
                     <CountryDropdown
                         className="mx_Login_phoneCountry mx_Login_field_prefix"
-                        ref="phone_country"
                         onOptionChange={this.onPhoneCountryChanged}
                         value={this.state.phoneCountry}
                         isSmall={true}
@@ -169,7 +206,7 @@ class PasswordLogin extends React.Component {
                     />
                     <input
                         className={classNames(classes)}
-                        ref="phoneNumber"
+                        ref={(e) => {this._loginField = e;}}
                         key="phone_input"
                         type="text"
                         name="phoneNumber"
@@ -180,6 +217,17 @@ class PasswordLogin extends React.Component {
                         disabled={disabled}
                     />
                 </div>;
+            }
+        }
+    }
+
+    isLoginEmpty() {
+        switch (this.state.loginType) {
+            case PasswordLogin.LOGIN_FIELD_EMAIL:
+            case PasswordLogin.LOGIN_FIELD_MXID:
+                return !this.state.username;
+            case PasswordLogin.LOGIN_FIELD_PHONE:
+                return !this.state.phoneCountry || !this.state.phoneNumber;
         }
     }
 
@@ -207,7 +255,7 @@ class PasswordLogin extends React.Component {
         const pwFieldClass = classNames({
             mx_Login_field: true,
             mx_Login_field_disabled: matrixIdText === '',
-            error: this.props.loginIncorrect,
+            error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
         const Dropdown = sdk.getComponent('elements.Dropdown');
@@ -258,6 +306,7 @@ PasswordLogin.LOGIN_FIELD_PHONE = "login_field_phone";
 
 PasswordLogin.propTypes = {
     onSubmit: PropTypes.func.isRequired, // fn(username, password)
+    onError: PropTypes.func,
     onForgotPasswordClick: PropTypes.func, // fn()
     initialUsername: PropTypes.string,
     initialPhoneCountry: PropTypes.string,

src/components/views/messages/MFileBody.js

@@ -327,6 +327,7 @@ module.exports = React.createClass({
                     // will have the correct name when the user tries to download it.
                     // We can't provide a Content-Disposition header like we would for HTTP.
                     download: fileName,
+                    rel: "noopener",
                     target: "_blank",
                     textContent: _t("Download %(text)s", { text: text }),
                 }, "*");

src/components/views/messages/MImageBody.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,48 +16,43 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
 
 import MFileBody from './MFileBody';
-import ImageUtils from '../../../ImageUtils';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
-import dis from '../../../dispatcher';
 import { decryptFile } from '../../../utils/DecryptFile';
 import Promise from 'bluebird';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 
-export default class extends React.Component {
-    displayName: 'MImageBody'
-
+export default class MImageBody extends React.Component {
     static propTypes = {
         /* the MatrixEvent to show */
         mxEvent: PropTypes.object.isRequired,
 
         /* called when the image has loaded */
         onWidgetLoad: PropTypes.func.isRequired,
-    }
+
+        /* the maximum image height to use */
+        maxImageHeight: PropTypes.number,
+    };
 
     static contextTypes = {
         matrixClient: PropTypes.instanceOf(MatrixClient),
-    }
+    };
 
     constructor(props) {
         super(props);
 
-        this.onAction = this.onAction.bind(this);
         this.onImageError = this.onImageError.bind(this);
         this.onImageLoad = this.onImageLoad.bind(this);
         this.onImageEnter = this.onImageEnter.bind(this);
         this.onImageLeave = this.onImageLeave.bind(this);
         this.onClientSync = this.onClientSync.bind(this);
         this.onClick = this.onClick.bind(this);
-        this.fixupHeight = this.fixupHeight.bind(this);
         this._isGif = this._isGif.bind(this);
 
         this.state = {
@@ -65,6 +61,9 @@ export default class extends React.Component {
             decryptedBlob: null,
             error: null,
             imgError: false,
+            imgLoaded: false,
+            loadedImageDimensions: null,
+            hover: false,
         };
     }
 
@@ -88,7 +87,7 @@ export default class extends React.Component {
     }
 
     onClick(ev) {
-        if (ev.button == 0 && !ev.metaKey) {
+        if (ev.button === 0 && !ev.metaKey) {
             ev.preventDefault();
             const content = this.props.mxEvent.getContent();
             const httpUrl = this._getContentUrl();
@@ -119,6 +118,8 @@ export default class extends React.Component {
     }
 
     onImageEnter(e) {
+        this.setState({ hover: true });
+
         if (!this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
             return;
         }
@@ -127,6 +128,8 @@ export default class extends React.Component {
     }
 
     onImageLeave(e) {
+        this.setState({ hover: false });
+
         if (!this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
             return;
         }
@@ -142,6 +145,16 @@ export default class extends React.Component {
 
     onImageLoad() {
         this.props.onWidgetLoad();
+
+        let loadedImageDimensions;
+
+        if (this.refs.image) {
+            const { naturalWidth, naturalHeight } = this.refs.image;
+
+            loadedImageDimensions = { naturalWidth, naturalHeight };
+        }
+
+        this.setState({ imgLoaded: true, loadedImageDimensions });
     }
 
     _getContentUrl() {
@@ -161,9 +174,7 @@ export default class extends React.Component {
                 return this.state.decryptedThumbnailUrl;
             }
             return this.state.decryptedUrl;
-        } else if (content.info &&
-                   content.info.mimetype == "image/svg+xml" &&
-                   content.info.thumbnail_url) {
+        } else if (content.info && content.info.mimetype === "image/svg+xml" && content.info.thumbnail_url) {
             // special case to return client-generated thumbnails for SVGs, if any,
             // given we deliberately don't thumbnail them serverside to prevent
             // billion lol attacks and similar
@@ -176,11 +187,10 @@ export default class extends React.Component {
     }
 
     componentDidMount() {
-        this.dispatcherRef = dis.register(this.onAction);
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);
-            if (content.info.thumbnail_file) {
+            if (content.info && content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
                     content.info.thumbnail_file,
                 ).then(function(blob) {
@@ -207,7 +217,6 @@ export default class extends React.Component {
                 });
             }).done();
         }
-        this.fixupHeight();
         this._afterComponentDidMount();
     }
 
@@ -218,7 +227,6 @@ export default class extends React.Component {
 
     componentWillUnmount() {
         this.unmounted = true;
-        dis.unregister(this.dispatcherRef);
         this.context.matrixClient.removeListener('sync', this.onClientSync);
         this._afterComponentWillUnmount();
 
@@ -235,59 +243,113 @@ export default class extends React.Component {
     _afterComponentWillUnmount() {
     }
 
-    onAction(payload) {
-        if (payload.action === "timeline_resize") {
-            this.fixupHeight();
-        }
-    }
-
-    fixupHeight() {
-        if (!this.refs.image) {
-            console.warn(`Refusing to fix up height on ${this.displayName} with no image element`);
-            return;
-        }
-
-        const content = this.props.mxEvent.getContent();
-        const timelineWidth = this.refs.body.offsetWidth;
-        const maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
-        // the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
-
-        // FIXME: this will break on clientside generated thumbnails (as per e2e rooms)
-        // which may well be much smaller than the 800x600 bounding box.
-
-        // FIXME: It will also break really badly for images with broken or missing thumbnails
-
-        // FIXME: Because we don't know what size of thumbnail the server's actually going to send
-        // us, we can't even really layout the page nicely for it.  Instead we have to assume
-        // it'll target 800x600 and we'll downsize if needed to make things fit.
-
-        // console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
-        let thumbHeight = null;
-        if (content.info) {
-            thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
-        }
-        this.refs.image.style.height = thumbHeight + "px";
-        // console.log("Image height now", thumbHeight);
-    }
-
     _messageContent(contentUrl, thumbUrl, content) {
+        let infoWidth;
+        let infoHeight;
+
+        if (content && content.info && content.info.w && content.info.h) {
+            infoWidth = content.info.w;
+            infoHeight = content.info.h;
+        } else {
+            // Whilst the image loads, display nothing.
+            //
+            // Once loaded, use the loaded image dimensions stored in `loadedImageDimensions`.
+            //
+            // By doing this, the image "pops" into the timeline, but is still restricted
+            // by the same width and height logic below.
+            if (!this.state.loadedImageDimensions) {
+                return this.wrapImage(contentUrl,
+                    <img style={{display: 'none'}} src={thumbUrl} ref="image"
+                        alt={content.body}
+                        onError={this.onImageError}
+                        onLoad={this.onImageLoad}
+                    />,
+                );
+            }
+            infoWidth = this.state.loadedImageDimensions.naturalWidth;
+            infoHeight = this.state.loadedImageDimensions.naturalHeight;
+        }
+
+        // The maximum height of the thumbnail as it is rendered as an <img>
+        const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight);
+        // The maximum width of the thumbnail, as dictated by its natural
+        // maximum height.
+        const maxWidth = infoWidth * maxHeight / infoHeight;
+
+        let img = null;
+        let placeholder = null;
+
+        // e2e image hasn't been decrypted yet
+        if (content.file !== undefined && this.state.decryptedUrl === null) {
+            placeholder = <img src="img/spinner.gif" alt={content.body} width="32" height="32" />;
+        } else if (!this.state.imgLoaded) {
+            // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
+            placeholder = this.getPlaceholder();
+        }
+
+        const showPlaceholder = Boolean(placeholder);
+
+        if (thumbUrl && !this.state.imgError) {
+            // Restrict the width of the thumbnail here, otherwise it will fill the container
+            // which has the same width as the timeline
+            // mx_MImageBody_thumbnail resizes img to exactly container size
+            img = <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
+                style={{ maxWidth: maxWidth + "px" }}
+                alt={content.body}
+                onError={this.onImageError}
+                onLoad={this.onImageLoad}
+                onMouseEnter={this.onImageEnter}
+                onMouseLeave={this.onImageLeave} />;
+        }
+
         const thumbnail = (
-            <a href={contentUrl} onClick={this.onClick}>
-                <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
-                    alt={content.body}
-                    onError={this.onImageError}
-                    onLoad={this.onImageLoad}
-                    onMouseEnter={this.onImageEnter}
-                    onMouseLeave={this.onImageLeave} />
-            </a>
+            <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
+                { /* Calculate aspect ratio, using %padding will size _container correctly */ }
+                <div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
+
+                { showPlaceholder &&
+                    <div className="mx_MImageBody_thumbnail" style={{
+                        // Constrain width here so that spinner appears central to the loaded thumbnail
+                        maxWidth: infoWidth + "px",
+                    }}>
+                        <div className="mx_MImageBody_thumbnail_spinner">
+                            { placeholder }
+                        </div>
+                    </div>
+                }
+
+                <div style={{display: !showPlaceholder ? undefined : 'none'}}>
+                    { img }
+                </div>
+
+                { this.state.hover && this.getTooltip() }
+            </div>
         );
 
-        return (
-            <span className="mx_MImageBody" ref="body">
-                { thumbUrl && !this.state.imgError ? thumbnail : '' }
-                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
-            </span>
-      );
+        return this.wrapImage(contentUrl, thumbnail);
+    }
+
+    // Overidden by MStickerBody
+    wrapImage(contentUrl, children) {
+        return <a href={contentUrl} onClick={this.onClick}>
+            {children}
+        </a>;
+    }
+
+    // Overidden by MStickerBody
+    getPlaceholder() {
+        // MImageBody doesn't show a placeholder whilst the image loads, (but it could do)
+        return null;
+    }
+
+    // Overidden by MStickerBody
+    getTooltip() {
+        return null;
+    }
+
+    // Overidden by MStickerBody
+    getFileBody() {
+        return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />;
     }
 
     render() {
@@ -302,25 +364,6 @@ export default class extends React.Component {
             );
         }
 
-        if (content.file !== undefined && this.state.decryptedUrl === null) {
-            // Need to decrypt the attachment
-            // The attachment is decrypted in componentDidMount.
-            // For now add an img tag with a spinner.
-            return (
-                <span className="mx_MImageBody" ref="body">
-                    <div className="mx_MImageBody_thumbnail" ref="image" style={{
-                        "display": "flex",
-                        "alignItems": "center",
-                        "width": "100%",
-                    }}>
-                        <img src="img/spinner.gif" alt={content.body} width="32" height="32" style={{
-                            "margin": "auto",
-                        }} />
-                    </div>
-                </span>
-            );
-        }
-
         const contentUrl = this._getContentUrl();
         let thumbUrl;
         if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
@@ -329,6 +372,12 @@ export default class extends React.Component {
           thumbUrl = this._getThumbUrl();
         }
 
-        return this._messageContent(contentUrl, thumbUrl, content);
+        const thumbnail = this._messageContent(contentUrl, thumbUrl, content);
+        const fileBody = this.getFileBody();
+
+        return <span className="mx_MImageBody" ref="body">
+            { thumbnail }
+            { fileBody }
+        </span>;
     }
 }

src/components/views/messages/MStickerBody.js

@@ -18,143 +18,39 @@ limitations under the License.
 
 import MImageBody from './MImageBody';
 import sdk from '../../../index';
-import TintableSVG from '../elements/TintableSvg';
 
 export default class MStickerBody extends MImageBody {
-    displayName: 'MStickerBody'
-
-    constructor(props) {
-      super(props);
-
-      this._onMouseEnter = this._onMouseEnter.bind(this);
-      this._onMouseLeave = this._onMouseLeave.bind(this);
-      this._onImageLoad = this._onImageLoad.bind(this);
-    }
-
-    _onMouseEnter() {
-        this.setState({showTooltip: true});
-    }
-
-    _onMouseLeave() {
-        this.setState({showTooltip: false});
-    }
-
-    _onImageLoad() {
-        this.setState({
-            placeholderClasses: 'mx_MStickerBody_placeholder_invisible',
-        });
-        const hidePlaceholderTimer = setTimeout(() => {
-            this.setState({
-                placeholderVisible: false,
-                imageClasses: 'mx_MStickerBody_image_visible',
-            });
-        }, 500);
-        this.setState({hidePlaceholderTimer});
-        if (this.props.onWidgetLoad) {
-            this.props.onWidgetLoad();
-        }
-    }
-
-    _afterComponentDidMount() {
-        if (this.refs.image.complete) {
-            // Image already loaded
-            this.setState({
-                placeholderVisible: false,
-                placeholderClasses: '.mx_MStickerBody_placeholder_invisible',
-                imageClasses: 'mx_MStickerBody_image_visible',
-            });
-        } else {
-            // Image not already loaded
-            this.setState({
-                placeholderVisible: true,
-                placeholderClasses: '',
-                imageClasses: '',
-            });
-        }
-    }
-
-    _afterComponentWillUnmount() {
-        if (this.state.hidePlaceholderTimer) {
-            clearTimeout(this.state.hidePlaceholderTimer);
-            this.setState({hidePlaceholderTimer: null});
-        }
-    }
-
-    _messageContent(contentUrl, thumbUrl, content) {
-        let tooltip;
-        const tooltipBody = (
-            this.props.mxEvent &&
-            this.props.mxEvent.getContent() &&
-            this.props.mxEvent.getContent().body) ?
-            this.props.mxEvent.getContent().body : null;
-        if (this.state.showTooltip && tooltipBody) {
-            const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
-            tooltip = <RoomTooltip
-                className='mx_RoleButton_tooltip'
-                label={tooltipBody} />;
-        }
-
-        const gutterSize = 0;
-        let placeholderSize = 75;
-        let placeholderFixupHeight = '100px';
-        let placeholderTop = 0;
-        let placeholderLeft = 0;
-
-        if (content.info) {
-            placeholderTop = Math.floor((content.info.h/2) - (placeholderSize/2)) + 'px';
-            placeholderLeft = Math.floor((content.info.w/2) - (placeholderSize/2) + gutterSize) + 'px';
-            placeholderFixupHeight = content.info.h + 'px';
-        }
-
-        // The pixel size of sticker images is generally larger than their intended display
-        // size so they render at native reolution on HiDPI displays. We therefore need to
-        // explicity set the size so they render at the intended size.
-        // XXX: This will be clobberred when we run fixupHeight(), but we need to do it
-        // here otherwise the stickers are momentarily displayed at the pixel size.
-        const imageStyle = {
-            height: content.info.h,
-            // leave the browser the calculate the width automatically
-        };
-
-        placeholderSize = placeholderSize + 'px';
-
-        // Body 'ref' required by MImageBody
-        return (
-            <span className='mx_MStickerBody' ref='body'
-                style={{
-                    height: placeholderFixupHeight,
-                }}>
-                <div className={'mx_MStickerBody_image_container'}>
-                  { this.state.placeholderVisible &&
-                    <div
-                        className={'mx_MStickerBody_placeholder ' + this.state.placeholderClasses}
-                        style={{
-                            top: placeholderTop,
-                            left: placeholderLeft,
-                        }}
-                    >
-                        <TintableSVG
-                            src={'img/icons-show-stickers.svg'}
-                            width={placeholderSize}
-                            height={placeholderSize} />
-                    </div> }
-                    <img
-                        className={'mx_MStickerBody_image ' + this.state.imageClasses}
-                        src={contentUrl}
-                        style={imageStyle}
-                        ref='image'
-                        alt={content.body}
-                        onLoad={this._onImageLoad}
-                        onMouseEnter={this._onMouseEnter}
-                        onMouseLeave={this._onMouseLeave}
-                    />
-                    { tooltip }
-                </div>
-            </span>
-        );
-    }
-
     // Empty to prevent default behaviour of MImageBody
     onClick() {
     }
+
+    // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
+    // which is added by mx_MStickerBody_wrapper
+    wrapImage(contentUrl, children) {
+        return <div className="mx_MStickerBody_wrapper"> { children } </div>;
+    }
+
+    // Placeholder to show in place of the sticker image if
+    // img onLoad hasn't fired yet.
+    getPlaceholder() {
+        const TintableSVG = sdk.getComponent('elements.TintableSvg');
+        return <TintableSVG src="img/icons-show-stickers.svg" width="75" height="75" />;
+    }
+
+    // Tooltip to show on mouse over
+    getTooltip() {
+        const content = this.props.mxEvent && this.props.mxEvent.getContent();
+
+        if (!content || !content.body || !content.info || !content.info.w) return null;
+
+        const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
+        return <div style={{left: content.info.w + 'px'}} className="mx_MStickerBody_tooltip">
+            <RoomTooltip label={content.body} />
+        </div>;
+    }
+
+    // Don't show "Download this_file.png ..."
+    getFileBody() {
+        return null;
+    }
 }

src/components/views/messages/MVideoBody.js

@@ -147,12 +147,7 @@ module.exports = React.createClass({
             // For now add an img tag with a spinner.
             return (
                 <span className="mx_MVideoBody" ref="body">
-                    <div className="mx_MImageBody_thumbnail" ref="image" style={{
-                        "display": "flex",
-                        "align-items": "center",
-                        "justify-items": "center",
-                        "width": "100%",
-                    }}>
+                    <div className="mx_MImageBody_thumbnail mx_MImageBody_thumbnail_spinner" ref="image">
                         <img src="img/spinner.gif" alt={content.body} width="16" height="16" />
                     </div>
                 </span>

src/components/views/messages/MessageEvent.js

@@ -39,8 +39,11 @@ module.exports = React.createClass({
         /* callback called when dynamic content in events are loaded */
         onWidgetLoad: PropTypes.func,
 
-        /* the shsape of the tile, used */
+        /* the shape of the tile, used */
         tileShape: PropTypes.string,
+
+        /* the maximum image height to use, if the event is an image */
+        maxImageHeight: PropTypes.number,
     },
 
     getEventTileOps: function() {
@@ -59,17 +62,24 @@ module.exports = React.createClass({
             'm.audio': sdk.getComponent('messages.MAudioBody'),
             'm.video': sdk.getComponent('messages.MVideoBody'),
         };
+        const evTypes = {
+            'm.sticker': sdk.getComponent('messages.MStickerBody'),
+        };
 
         const content = this.props.mxEvent.getContent();
+        const type = this.props.mxEvent.getType();
         const msgtype = content.msgtype;
         let BodyType = UnknownBody;
-        if (msgtype && bodyTypes[msgtype]) {
-            BodyType = bodyTypes[msgtype];
-        } else if (this.props.mxEvent.getType() === 'm.sticker') {
-            BodyType = sdk.getComponent('messages.MStickerBody');
-        } else if (content.url) {
-            // Fallback to MFileBody if there's a content URL
-            BodyType = bodyTypes['m.file'];
+        if (!this.props.mxEvent.isRedacted()) {
+            // only resolve BodyType if event is not redacted
+            if (type && evTypes[type]) {
+                BodyType = evTypes[type];
+            } else if (msgtype && bodyTypes[msgtype]) {
+                BodyType = bodyTypes[msgtype];
+            } else if (content.url) {
+                // Fallback to MFileBody if there's a content URL
+                BodyType = bodyTypes['m.file'];
+            }
         }
 
         return <BodyType
@@ -78,6 +88,7 @@ module.exports = React.createClass({
             highlightLink={this.props.highlightLink}
             showUrlPreview={this.props.showUrlPreview}
             tileShape={this.props.tileShape}
+            maxImageHeight={this.props.maxImageHeight}
             onWidgetLoad={this.props.onWidgetLoad} />;
     },
 });

src/components/views/messages/SenderProfile.js

@@ -72,14 +72,12 @@ export default React.createClass({
 
     _updateRelatedGroups() {
         if (this.unmounted) return;
-        const relatedGroupsEvent = this.context.matrixClient
-            .getRoom(this.props.mxEvent.getRoomId())
-            .currentState
-            .getStateEvents('m.room.related_groups', '');
+        const room = this.context.matrixClient.getRoom(this.props.mxEvent.getRoomId());
+        if (!room) return;
+
+        const relatedGroupsEvent = room.currentState.getStateEvents('m.room.related_groups', '');
         this.setState({
-            relatedGroups: relatedGroupsEvent ?
-                relatedGroupsEvent.getContent().groups || []
-                : [],
+            relatedGroups: relatedGroupsEvent ? relatedGroupsEvent.getContent().groups || [] : [],
         });
     },
 

src/components/views/messages/TextualBody.js

@@ -36,6 +36,7 @@ import * as ContextualMenu from '../../structures/ContextualMenu';
 import SettingsStore from "../../../settings/SettingsStore";
 import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
 import ReplyThread from "../elements/ReplyThread";
+import {host as matrixtoHost} from '../../../matrix-to';
 
 linkifyMatrix(linkify);
 
@@ -304,7 +305,7 @@ module.exports = React.createClass({
             // never preview matrix.to links (if anything we should give a smart
             // preview of the room/user they point to: nobody needs to be reminded
             // what the matrix.to site looks like).
-            if (host == 'matrix.to') return false;
+            if (host === matrixtoHost) return false;
 
             if (node.textContent.toLowerCase().trim().startsWith(host.toLowerCase())) {
                 // it's a "foo.pl" style link
@@ -336,10 +337,21 @@ module.exports = React.createClass({
                     left: x,
                     top: y,
                     message: successful ? _t('Copied!') : _t('Failed to copy'),
-                });
-                e.target.onmouseout = close;
+                }, false);
+                e.target.onmouseleave = close;
             };
-            p.appendChild(button);
+
+            // Wrap a div around <pre> so that the copy button can be correctly positioned
+            // when the <pre> overflows and is scrolled horizontally.
+            const div = document.createElement("div");
+            div.className = "mx_EventTile_pre_container";
+
+            // Insert containing div in place of <pre> block
+            p.parentNode.replaceChild(div, p);
+
+            // Append <pre> block and copy button to container
+            div.appendChild(p);
+            div.appendChild(button);
         });
     },
 
@@ -422,8 +434,7 @@ module.exports = React.createClass({
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
 
-        const stripReply = SettingsStore.isFeatureEnabled("feature_rich_quoting") &&
-            ReplyThread.getParentEventId(mxEvent);
+        const stripReply = ReplyThread.getParentEventId(mxEvent);
         let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
             disableBigEmoji: SettingsStore.getValue('TextualBody.disableBigEmoji'),
             // Part of Replies fallback support

src/components/views/room_settings/UrlPreviewSettings.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Travis Ralston
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,6 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import {MatrixClient} from "matrix-js-sdk";
 const React = require('react');
 import PropTypes from 'prop-types';
 const sdk = require("../../../index");
@@ -29,6 +31,10 @@ module.exports = React.createClass({
         room: PropTypes.object,
     },
 
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    },
+
     saveSettings: function() {
         const promises = [];
         if (this.refs.urlPreviewsRoom) promises.push(this.refs.urlPreviewsRoom.save());
@@ -39,42 +45,58 @@ module.exports = React.createClass({
     render: function() {
         const SettingsFlag = sdk.getComponent("elements.SettingsFlag");
         const roomId = this.props.room.roomId;
+        const isEncrypted = this.context.matrixClient.isRoomEncrypted(roomId);
 
         let previewsForAccount = null;
-        if (SettingsStore.getValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled")) {
-            previewsForAccount = (
-                _t("You have <a>enabled</a> URL previews by default.", {}, { 'a': (sub)=><a href="#/settings">{ sub }</a> })
-            );
-        } else {
-            previewsForAccount = (
-                _t("You have <a>disabled</a> URL previews by default.", {}, { 'a': (sub)=><a href="#/settings">{ sub }</a> })
-            );
-        }
-
         let previewsForRoom = null;
-        if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
-            previewsForRoom = (
-                <label>
-                    <SettingsFlag name="urlPreviewsEnabled"
-                                  level={SettingLevel.ROOM}
-                                  roomId={this.props.room.roomId}
-                                  isExplicit={true}
-                                  manualSave={true}
-                                  ref="urlPreviewsRoom" />
-                </label>
-            );
-        } else {
-            let str = _td("URL previews are enabled by default for participants in this room.");
-            if (!SettingsStore.getValueAt(SettingLevel.ROOM, "urlPreviewsEnabled", roomId, /*explicit=*/true)) {
-                str = _td("URL previews are disabled by default for participants in this room.");
+
+        if (!isEncrypted) {
+            // Only show account setting state and room state setting state in non-e2ee rooms where they apply
+            const accountEnabled = SettingsStore.getValueAt(SettingLevel.ACCOUNT, "urlPreviewsEnabled");
+            if (accountEnabled) {
+                previewsForAccount = (
+                    _t("You have <a>enabled</a> URL previews by default.", {}, {
+                        'a': (sub)=><a href="#/settings">{ sub }</a>,
+                    })
+                );
+            } else if (accountEnabled) {
+                previewsForAccount = (
+                    _t("You have <a>disabled</a> URL previews by default.", {}, {
+                        'a': (sub)=><a href="#/settings">{ sub }</a>,
+                    })
+                );
             }
-            previewsForRoom = (<label>{ _t(str) }</label>);
+
+            if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
+                previewsForRoom = (
+                    <label>
+                        <SettingsFlag name="urlPreviewsEnabled"
+                                      level={SettingLevel.ROOM}
+                                      roomId={roomId}
+                                      isExplicit={true}
+                                      manualSave={true}
+                                      ref="urlPreviewsRoom" />
+                    </label>
+                );
+            } else {
+                let str = _td("URL previews are enabled by default for participants in this room.");
+                if (!SettingsStore.getValueAt(SettingLevel.ROOM, "urlPreviewsEnabled", roomId, /*explicit=*/true)) {
+                    str = _td("URL previews are disabled by default for participants in this room.");
+                }
+                previewsForRoom = (<label>{ _t(str) }</label>);
+            }
+        } else {
+            previewsForAccount = (
+                _t("In encrypted rooms, like this one, URL previews are disabled by default to ensure that your " +
+                    "homeserver (where the previews are generated) cannot gather information about links you see in " +
+                    "this room.")
+            );
         }
 
-        const previewsForRoomAccount = (
-            <SettingsFlag name="urlPreviewsEnabled"
+        const previewsForRoomAccount = ( // in an e2ee room we use a special key to enforce per-room opt-in
+            <SettingsFlag name={isEncrypted ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled'}
                           level={SettingLevel.ROOM_ACCOUNT}
-                          roomId={this.props.room.roomId}
+                          roomId={roomId}
                           manualSave={true}
                           ref="urlPreviewsSelf"
             />
@@ -83,8 +105,13 @@ module.exports = React.createClass({
         return (
             <div className="mx_RoomSettings_toggles">
                 <h3>{ _t("URL Previews") }</h3>
-
-                <label>{ previewsForAccount }</label>
+                <div>
+                    { _t('When someone puts a URL in their message, a URL preview can be shown to give more ' +
+                        'information about that link such as the title, description, and an image from the website.') }
+                </div>
+                <div>
+                    { previewsForAccount }
+                </div>
                 { previewsForRoom }
                 <label>{ previewsForRoomAccount }</label>
             </div>

src/components/views/rooms/AppsDrawer.js

@@ -27,7 +27,7 @@ import SdkConfig from '../../../SdkConfig';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import ScalarMessaging from '../../../ScalarMessaging';
 import { _t } from '../../../languageHandler';
-import WidgetUtils from '../../../WidgetUtils';
+import WidgetUtils from '../../../utils/WidgetUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 
 // The maximum number of widgets that can be added in a room
@@ -94,15 +94,7 @@ module.exports = React.createClass({
         const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
             case 'appsDrawer':
-                // When opening the app drawer when there aren't any apps,
-                // auto-launch the integrations manager to skip the awkward
-                // click on "Add widget"
                 if (action.show) {
-                    const apps = this._getApps();
-                    if (apps.length === 0) {
-                        this._launchManageIntegrations();
-                    }
-
                     localStorage.removeItem(hideWidgetKey);
                 } else {
                     // Store hidden state of widget
@@ -171,14 +163,7 @@ module.exports = React.createClass({
     },
 
     _getApps: function() {
-        const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets');
-        if (!appsStateEvents) {
-            return [];
-        }
-
-        return appsStateEvents.filter((ev) => {
-            return ev.getContent().type && ev.getContent().url;
-        }).map((ev) => {
+        return WidgetUtils.getRoomWidgets(this.props.room).map((ev) => {
             return this._initAppConfig(ev.getStateKey(), ev.getContent(), ev.sender);
         });
     },

src/components/views/rooms/EventTile.js

@@ -34,6 +34,7 @@ const ContextualMenu = require('../../structures/ContextualMenu');
 import dis from '../../../dispatcher';
 import {makeEventPermalink} from "../../../matrix-to";
 import SettingsStore from "../../../settings/SettingsStore";
+import {EventStatus} from 'matrix-js-sdk';
 
 const ObjectUtils = require('../../../ObjectUtils');
 
@@ -442,26 +443,27 @@ module.exports = withMatrixClient(React.createClass({
         const ev = this.props.mxEvent;
         const props = {onClick: this.onCryptoClicked};
 
-
+        // event could not be decrypted
         if (ev.getContent().msgtype === 'm.bad.encrypted') {
             return <E2ePadlockUndecryptable {...props} />;
-        } else if (ev.isEncrypted()) {
-            if (this.state.verified) {
-                return <E2ePadlockVerified {...props} />;
-            } else {
-                return <E2ePadlockUnverified {...props} />;
-            }
-        } else {
-            // XXX: if the event is being encrypted (ie eventSendStatus ===
-            // encrypting), it might be nice to show something other than the
-            // open padlock?
+        }
 
-            // if the event is not encrypted, but it's an e2e room, show the
-            // open padlock
-            const e2eEnabled = this.props.matrixClient.isRoomEncrypted(ev.getRoomId());
-            if (e2eEnabled) {
-                return <E2ePadlockUnencrypted {...props} />;
+        // event is encrypted, display padlock corresponding to whether or not it is verified
+        if (ev.isEncrypted()) {
+            return this.state.verified ? <E2ePadlockVerified {...props} /> : <E2ePadlockUnverified {...props} />;
+        }
+
+        if (this.props.matrixClient.isRoomEncrypted(ev.getRoomId())) {
+            // else if room is encrypted
+            // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
+            if (ev.status === EventStatus.ENCRYPTING) {
+                return <E2ePadlockEncrypting {...props} />;
             }
+            if (ev.status === EventStatus.NOT_SENT) {
+                return <E2ePadlockNotSent {...props} />;
+            }
+            // if the event is not encrypted, but it's an e2e room, show the open padlock
+            return <E2ePadlockUnencrypted {...props} />;
         }
 
         // no padlock needed
@@ -490,7 +492,7 @@ module.exports = withMatrixClient(React.createClass({
         }
 
         const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
-        const isRedacted = (eventType === 'm.room.message') && this.props.isRedacted;
+        const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
         const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
 
         const classes = classNames({
@@ -608,13 +610,14 @@ module.exports = withMatrixClient(React.createClass({
 
         switch (this.props.tileShape) {
             case 'notif': {
+                const EmojiText = sdk.getComponent('elements.EmojiText');
                 const room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
                 return (
                     <div className={classes}>
                         <div className="mx_EventTile_roomName">
-                            <a href={permalink} onClick={this.onPermalinkClicked}>
+                            <EmojiText element="a" href={permalink} onClick={this.onPermalinkClicked}>
                                 { room ? room.name : '' }
-                            </a>
+                            </EmojiText>
                         </div>
                         <div className="mx_EventTile_senderDetails">
                             { avatar }
@@ -715,9 +718,15 @@ module.exports = withMatrixClient(React.createClass({
     },
 }));
 
+// XXX this'll eventually be dynamic based on the fields once we have extensible event types
+const messageTypes = ['m.room.message', 'm.sticker'];
+function isMessageEvent(ev) {
+    return (messageTypes.includes(ev.getType()));
+}
+
 module.exports.haveTileForEvent = function(e) {
     // Only messages have a tile (black-rectangle) if redacted
-    if (e.isRedacted() && e.getType() !== 'm.room.message') return false;
+    if (e.isRedacted() && !isMessageEvent(e)) return false;
 
     const handler = getHandlerTile(e);
     if (handler === undefined) return false;
@@ -736,6 +745,14 @@ function E2ePadlockUndecryptable(props) {
     );
 }
 
+function E2ePadlockEncrypting(props) {
+    return <E2ePadlock alt={_t("Encrypting")} src="img/e2e-encrypting.svg" width="10" height="12" {...props} />;
+}
+
+function E2ePadlockNotSent(props) {
+    return <E2ePadlock alt={_t("Encrypted, not sent")} src="img/e2e-not_sent.svg" width="10" height="12" {...props} />;
+}
+
 function E2ePadlockVerified(props) {
     return (
         <E2ePadlock alt={_t("Encrypted by a verified device")}

src/components/views/rooms/MemberInfo.js

@@ -632,6 +632,13 @@ module.exports = withMatrixClient(React.createClass({
         );
     },
 
+    onShareUserClick: function() {
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share room member dialog', '', ShareDialog, {
+            target: this.props.member,
+        });
+    },
+
     _renderUserOptions: function() {
         const cli = this.props.matrixClient;
         const member = this.props.member;
@@ -705,13 +712,18 @@ module.exports = withMatrixClient(React.createClass({
             }
         }
 
-        if (!ignoreButton && !readReceiptButton && !insertPillButton && !inviteUserButton) return null;
+        const shareUserButton = (
+            <AccessibleButton onClick={this.onShareUserClick} className="mx_MemberInfo_field">
+                { _t('Share Link to User') }
+            </AccessibleButton>
+        );
 
         return (
             <div>
                 <h3>{ _t("User Options") }</h3>
                 <div className="mx_MemberInfo_buttons">
                     { readReceiptButton }
+                    { shareUserButton }
                     { insertPillButton }
                     { ignoreButton }
                     { inviteUserButton }
@@ -902,7 +914,9 @@ module.exports = withMatrixClient(React.createClass({
         return (
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
-                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
+                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                    </AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
                         <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                     </div>

src/components/views/rooms/MessageComposer.js

@@ -159,54 +159,20 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    // _startCallApp(isAudioConf) {
-        // dis.dispatch({
-        //     action: 'appsDrawer',
-        //     show: true,
-        // });
-
-        // const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets', '');
-        // let appsStateEvent = {};
-        // if (appsStateEvents) {
-        //     appsStateEvent = appsStateEvents.getContent();
-        // }
-        // if (!appsStateEvent.videoConf) {
-        //     appsStateEvent.videoConf = {
-        //         type: 'jitsi',
-        //         // FIXME -- This should not be localhost
-        //         url: 'http://localhost:8000/jitsi.html',
-        //         data: {
-        //             confId: this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(),
-        //             isAudioConf: isAudioConf,
-        //         },
-        //     };
-        //     MatrixClientPeg.get().sendStateEvent(
-        //         this.props.room.roomId,
-        //         'im.vector.modular.widgets',
-        //         appsStateEvent,
-        //         '',
-        //     ).then(() => console.log('Sent state'), (e) => console.error(e));
-        // }
-    // }
-
     onCallClick(ev) {
-        // NOTE -- Will be replaced by Jitsi code (currently commented)
         dis.dispatch({
             action: 'place_call',
             type: ev.shiftKey ? "screensharing" : "video",
             room_id: this.props.room.roomId,
         });
-        // this._startCallApp(false);
     }
 
     onVoiceCallClick(ev) {
-        // NOTE -- Will be replaced by Jitsi code (currently commented)
         dis.dispatch({
             action: 'place_call',
             type: "voice",
             room_id: this.props.room.roomId,
         });
-        // this._startCallApp(true);
     }
 
     onInputContentChanged(content: string, selection: {start: number, end: number}) {

src/components/views/rooms/MessageComposerInput.js

@@ -28,7 +28,7 @@ import Promise from 'bluebird';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
-import SlashCommands from '../../../SlashCommands';
+import {processCommandInput} from '../../../SlashCommands';
 import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../../Keyboard';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
@@ -45,8 +45,7 @@ import Markdown from '../../../Markdown';
 import ComposerHistoryManager from '../../../ComposerHistoryManager';
 import MessageComposerStore from '../../../stores/MessageComposerStore';
 
-import {MATRIXTO_URL_PATTERN, MATRIXTO_MD_LINK_PATTERN} from '../../../linkify-matrix';
-const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
+import {MATRIXTO_MD_LINK_PATTERN} from '../../../linkify-matrix';
 const REGEX_MATRIXTO_MARKDOWN_GLOBAL = new RegExp(MATRIXTO_MD_LINK_PATTERN, 'g');
 
 import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
@@ -158,6 +157,7 @@ export default class MessageComposerInput extends React.Component {
         this.setDisplayedCompletion = this.setDisplayedCompletion.bind(this);
         this.onMarkdownToggleClicked = this.onMarkdownToggleClicked.bind(this);
         this.onTextPasted = this.onTextPasted.bind(this);
+        this.focusComposer = this.focusComposer.bind(this);
 
         const isRichtextEnabled = SettingsStore.getValue('MessageComposerInput.isRichTextEnabled');
 
@@ -271,13 +271,12 @@ export default class MessageComposerInput extends React.Component {
     }
 
     onAction = (payload) => {
-        const editor = this.refs.editor;
         let contentState = this.state.editorState.getCurrentContent();
 
         switch (payload.action) {
             case 'reply_to_event':
             case 'focus_composer':
-                editor.focus();
+                this.focusComposer();
                 break;
             case 'insert_mention': {
                 // Pretend that we've autocompleted this user because keeping two code
@@ -320,7 +319,7 @@ export default class MessageComposerInput extends React.Component {
                     let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
                     editorState = EditorState.moveSelectionToEnd(editorState);
                     this.onEditorContentChanged(editorState);
-                    editor.focus();
+                    this.focusComposer();
                 }
             }
                 break;
@@ -722,7 +721,7 @@ export default class MessageComposerInput extends React.Component {
 
         // Some commands (/join) require pills to be replaced with their text content
         const commandText = this.removeMDLinks(contentState, ['#']);
-        const cmd = SlashCommands.processInput(this.props.room.roomId, commandText);
+        const cmd = processCommandInput(this.props.room.roomId, commandText);
         if (cmd) {
             if (!cmd.error) {
                 this.historyManager.save(contentState, this.state.isRichtextEnabled ? 'html' : 'markdown');
@@ -1156,6 +1155,10 @@ export default class MessageComposerInput extends React.Component {
         this.handleKeyCommand('toggle-mode');
     };
 
+    focusComposer() {
+        this.refs.editor.focus();
+    }
+
     render() {
         const activeEditorState = this.state.originalEditorState || this.state.editorState;
 
@@ -1180,9 +1183,9 @@ export default class MessageComposerInput extends React.Component {
             activeEditorState.getCurrentContent().getBlocksAsArray());
 
         return (
-            <div className="mx_MessageComposer_input_wrapper">
+            <div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}>
                 <div className="mx_MessageComposer_autocomplete_wrapper">
-                    { SettingsStore.isFeatureEnabled("feature_rich_quoting") && <ReplyPreview /> }
+                    <ReplyPreview />
                     <Autocomplete
                         ref={(e) => this.autocomplete = e}
                         room={this.props.room}

src/components/views/rooms/PinnedEventTile.js

@@ -22,6 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import MessageEvent from "../messages/MessageEvent";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from '../../../languageHandler';
+import {formatFullDate} from '../../../DateUtils';
 
 module.exports = React.createClass({
     displayName: 'PinnedEventTile',
@@ -80,11 +81,20 @@ module.exports = React.createClass({
                     { unpinButton }
                 </div>
 
-                <MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
+                <span className="mx_PinnedEventTile_senderAvatar">
+                    <MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
+                </span>
                 <span className="mx_PinnedEventTile_sender">
                     { sender.name }
                 </span>
-                <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" />
+                <span className="mx_PinnedEventTile_timestamp">
+                    { formatFullDate(new Date(this.props.mxEvent.getTs())) }
+                </span>
+                <div className="mx_PinnedEventTile_message">
+                    <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150}
+                                  onWidgetLoad={() => {}} // we need to give this, apparently
+                    />
+                </div>
             </div>
         );
     },

src/components/views/rooms/RoomHeader.js

@@ -149,6 +149,13 @@ module.exports = React.createClass({
         dis.dispatch({ action: 'show_right_panel' });
     },
 
+    onShareRoomClick: function(ev) {
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share room dialog', '', ShareDialog, {
+            target: this.props.room,
+        });
+    },
+
     _hasUnreadPins: function() {
         const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
         if (!currentPinEvent) return false;
@@ -379,6 +386,14 @@ module.exports = React.createClass({
                 </AccessibleButton>;
         }
 
+        let shareRoomButton;
+        if (this.props.inRoom) {
+            shareRoomButton =
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShareRoomClick} title={_t('Share room')}>
+                    <TintableSvg src="img/icons-share.svg" width="16" height="16" />
+                </AccessibleButton>;
+        }
+
         let rightPanelButtons;
         if (this.props.collapsedRhs) {
             rightPanelButtons =
@@ -400,6 +415,7 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settingsButton }
                     { pinnedEventsButton }
+                    { shareRoomButton }
                     { manageIntegsButton }
                     { forgetButton }
                     { searchButton }

src/components/views/rooms/RoomList.js

@@ -583,14 +583,18 @@ module.exports = React.createClass({
         }
     },
 
-    _makeGroupInviteTiles() {
+    _makeGroupInviteTiles(filter) {
         const ret = [];
+        const lcFilter = filter && filter.toLowerCase();
 
         const GroupInviteTile = sdk.getComponent('groups.GroupInviteTile');
         for (const group of MatrixClientPeg.get().getGroups()) {
-            if (group.myMembership !== 'invite') continue;
-
-            ret.push(<GroupInviteTile key={group.groupId} group={group} />);
+            const {groupId, name, myMembership} = group;
+            // filter to only groups in invite state and group_id starts with filter or group name includes it
+            if (myMembership !== 'invite') continue;
+            if (lcFilter && !groupId.toLowerCase().startsWith(lcFilter) &&
+                !(name && name.toLowerCase().includes(lcFilter))) continue;
+            ret.push(<GroupInviteTile key={groupId} group={group} collapsed={this.props.collapsed} />);
         }
 
         return ret;
@@ -607,10 +611,10 @@ module.exports = React.createClass({
         const self = this;
         return (
             <GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
-                autoshow={true} onScroll={self._whenScrolling} wrappedRef={this._collectGemini}>
+                autoshow={true} onScroll={self._whenScrolling} onResize={self._whenScrolling} wrappedRef={this._collectGemini}>
             <div className="mx_RoomList">
                 <RoomSubList list={[]}
-                             extraTiles={this._makeGroupInviteTiles()}
+                             extraTiles={this._makeGroupInviteTiles(self.props.searchFilter)}
                              label={_t('Community Invites')}
                              editable={false}
                              order="recent"
@@ -701,6 +705,13 @@ module.exports = React.createClass({
                              onShowMoreRooms={self.onShowMoreRooms} />
 
                 <RoomSubList list={self.state.lists['im.vector.fake.archived']}
+                             emptyContent={self.props.collapsed ? null :
+                                 <div className="mx_RoomList_emptySubListTip_container">
+                                     <div className="mx_RoomList_emptySubListTip">
+                                         { _t('You have no historical rooms') }
+                                     </div>
+                                 </div>
+                             }
                              label={_t('Historical')}
                              editable={false}
                              order="recent"
@@ -708,7 +719,7 @@ module.exports = React.createClass({
                              alwaysShowHeader={true}
                              startAsHidden={true}
                              showSpinner={self.state.isLoadingLeftRooms}
-                             onHeaderClick= {self.onArchivedHeaderClick}
+                             onHeaderClick={self.onArchivedHeaderClick}
                              incomingCall={self.state.incomingCall}
                              searchFilter={self.props.searchFilter}
                              onShowMoreRooms={self.onShowMoreRooms} />

src/components/views/rooms/RoomTile.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 New Vector Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,19 +16,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
 
-const React = require('react');
-const ReactDOM = require("react-dom");
+import React from 'react';
 import PropTypes from 'prop-types';
-const classNames = require('classnames');
+import classNames from 'classnames';
 import dis from '../../../dispatcher';
-const MatrixClientPeg = require('../../../MatrixClientPeg');
+import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
-const sdk = require('../../../index');
-const ContextualMenu = require('../../structures/ContextualMenu');
-const RoomNotifs = require('../../../RoomNotifs');
-const FormattingUtils = require('../../../utils/FormattingUtils');
+import sdk from '../../../index';
+import {createMenu} from '../../structures/ContextualMenu';
+import * as RoomNotifs from '../../../RoomNotifs';
+import * as FormattingUtils from '../../../utils/FormattingUtils';
 import AccessibleButton from '../elements/AccessibleButton';
 import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
@@ -72,16 +71,12 @@ module.exports = React.createClass({
     },
 
     _shouldShowMentionBadge: function() {
-        return this.state.notifState != RoomNotifs.MUTE;
+        return this.state.notifState !== RoomNotifs.MUTE;
     },
 
     _isDirectMessageRoom: function(roomId) {
         const dmRooms = DMRoomMap.shared().getUserIdForRoomId(roomId);
-        if (dmRooms) {
-            return true;
-        } else {
-            return false;
-        }
+        return Boolean(dmRooms);
     },
 
     onRoomTimeline: function(ev, room) {
@@ -99,7 +94,7 @@ module.exports = React.createClass({
     },
 
     onAccountData: function(accountDataEvent) {
-        if (accountDataEvent.getType() == 'm.push_rules') {
+        if (accountDataEvent.getType() === 'm.push_rules') {
             this.setState({
                 notifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
             });
@@ -187,6 +182,32 @@ module.exports = React.createClass({
         this.badgeOnMouseLeave();
     },
 
+    _showContextMenu: function(x, y, chevronOffset) {
+        const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
+
+        createMenu(RoomTileContextMenu, {
+            chevronOffset,
+            left: x,
+            top: y,
+            room: this.props.room,
+            onFinished: () => {
+                this.setState({ menuDisplayed: false });
+                this.props.refreshSubList();
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    },
+
+    onContextMenu: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        e.preventDefault();
+        // Only allow non-guests to access the context menu
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        const chevronOffset = 12;
+        this._showContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
+    },
+
     badgeOnMouseEnter: function() {
         // Only allow non-guests to access the context menu
         // and only change it if it needs to change
@@ -200,37 +221,25 @@ module.exports = React.createClass({
     },
 
     onBadgeClicked: function(e) {
-        // Only allow none guests to access the context menu
-        if (!MatrixClientPeg.get().isGuest()) {
-            // If the badge is clicked, then no longer show tooltip
-            if (this.props.collapsed) {
-                this.setState({ hover: false });
-            }
-
-            const RoomTileContextMenu = sdk.getComponent('context_menus.RoomTileContextMenu');
-            const elementRect = e.target.getBoundingClientRect();
-
-            // The window X and Y offsets are to adjust position when zoomed in to page
-            const x = elementRect.right + window.pageXOffset + 3;
-            const chevronOffset = 12;
-            let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
-            y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
-
-            const self = this;
-            ContextualMenu.createMenu(RoomTileContextMenu, {
-                chevronOffset: chevronOffset,
-                left: x,
-                top: y,
-                room: this.props.room,
-                onFinished: function() {
-                    self.setState({ menuDisplayed: false });
-                    self.props.refreshSubList();
-                },
-            });
-            this.setState({ menuDisplayed: true });
-        }
         // Prevent the RoomTile onClick event firing as well
         e.stopPropagation();
+        // Only allow non-guests to access the context menu
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        // If the badge is clicked, then no longer show tooltip
+        if (this.props.collapsed) {
+            this.setState({ hover: false });
+        }
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        this._showContextMenu(x, y, chevronOffset);
     },
 
     render: function() {
@@ -250,7 +259,7 @@ module.exports = React.createClass({
             'mx_RoomTile_unread': this.props.unread,
             'mx_RoomTile_unreadNotify': notifBadges,
             'mx_RoomTile_highlight': mentionBadges,
-            'mx_RoomTile_invited': (me && me.membership == 'invite'),
+            'mx_RoomTile_invited': (me && me.membership === 'invite'),
             'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_noBadges': !badges,
             'mx_RoomTile_transparent': this.props.transparent,
@@ -268,7 +277,6 @@ module.exports = React.createClass({
         let name = this.state.roomName;
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
 
-        let badge;
         let badgeContent;
 
         if (this.state.badgeHover || this.state.menuDisplayed) {
@@ -280,7 +288,7 @@ module.exports = React.createClass({
             badgeContent = '\u200B';
         }
 
-        badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
         let label;
@@ -301,7 +309,7 @@ module.exports = React.createClass({
             }
         } else if (this.state.hover) {
             const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            tooltip = <RoomTooltip className="mx_RoomTile_tooltip" room={this.props.room} dir="auto" />;
+            tooltip = <RoomTooltip className="mx_RoomTile_tooltip" label={this.props.room.name} dir="auto" />;
         }
 
         //var incomingCallBox;
@@ -312,16 +320,22 @@ module.exports = React.createClass({
 
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
-        let directMessageIndicator;
+        let dmIndicator;
         if (this._isDirectMessageRoom(this.props.room.roomId)) {
-         directMessageIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
+            dmIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
         }
 
-        return <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        return <AccessibleButton tabIndex="0"
+                                 className={classes}
+                                 onClick={this.onClick}
+                                 onMouseEnter={this.onMouseEnter}
+                                 onMouseLeave={this.onMouseLeave}
+                                 onContextMenu={this.onContextMenu}
+        >
             <div className={avatarClasses}>
                 <div className="mx_RoomTile_avatar_container">
                     <RoomAvatar room={this.props.room} width={24} height={24} />
-                    { directMessageIndicator }
+                    { dmIndicator }
                 </div>
             </div>
             <div className="mx_RoomTile_nameContainer">

src/components/views/rooms/RoomTooltip.js

@@ -14,11 +14,10 @@ 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 dis = require('../../../dispatcher');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import dis from '../../../dispatcher';
 import classNames from 'classnames';
 
 const MIN_TOOLTIP_HEIGHT = 25;
@@ -77,25 +76,21 @@ module.exports = React.createClass({
     },
 
     _renderTooltip: function() {
-        var label = this.props.room ? this.props.room.name : this.props.label;
-
         // Add the parent's position to the tooltips, so it's correctly
         // positioned, also taking into account any window zoom
         // NOTE: The additional 6 pixels for the left position, is to take account of the
         // tooltips chevron
-        var parent = ReactDOM.findDOMNode(this).parentNode;
-        var style = {};
+        const parent = ReactDOM.findDOMNode(this).parentNode;
+        let style = {};
         style = this._updatePosition(style);
         style.display = "block";
 
-        const tooltipClasses = classNames(
-            "mx_RoomTooltip", this.props.tooltipClassName,
-        );
+        const tooltipClasses = classNames("mx_RoomTooltip", this.props.tooltipClassName);
 
-        var tooltip = (
-            <div className={tooltipClasses} style={style} >
-                <div className="mx_RoomTooltip_chevron"></div>
-                { label }
+        const tooltip = (
+            <div className={tooltipClasses} style={style}>
+                <div className="mx_RoomTooltip_chevron" />
+                { this.props.label }
             </div>
         );
 

src/components/views/rooms/Stickerpicker.js

@@ -15,7 +15,6 @@ limitations under the License.
 */
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import Widgets from '../../../utils/widgets';
 import AppTile from '../elements/AppTile';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
@@ -24,6 +23,7 @@ import SdkConfig from '../../../SdkConfig';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
+import WidgetUtils from '../../../utils/WidgetUtils';
 
 const widgetType = 'm.stickerpicker';
 
@@ -67,7 +67,7 @@ export default class Stickerpicker extends React.Component {
         }
 
         this.setState({showStickers: false});
-        Widgets.removeStickerpickerWidgets().then(() => {
+        WidgetUtils.removeStickerpickerWidgets().then(() => {
             this.forceUpdate();
         }).catch((e) => {
             console.error('Failed to remove sticker picker widget', e);
@@ -119,7 +119,7 @@ export default class Stickerpicker extends React.Component {
     }
 
     _updateWidget() {
-        const stickerpickerWidget = Widgets.getStickerpickerWidgets()[0];
+        const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets()[0];
         this.setState({
             stickerpickerWidget,
             widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,

src/components/views/settings/ChangeDisplayName.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,36 +15,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-const React = require('react');
-const sdk = require('../../../index');
-const MatrixClientPeg = require("../../../MatrixClientPeg");
+import React from 'react';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'ChangeDisplayName',
 
-    _getDisplayName: function() {
+    _getDisplayName: async function() {
         const cli = MatrixClientPeg.get();
-        return cli.getProfileInfo(cli.credentials.userId).then(function(result) {
-            let displayname = result.displayname;
-            if (!displayname) {
-                if (MatrixClientPeg.get().isGuest()) {
-                    displayname = "Guest " + MatrixClientPeg.get().getUserIdLocalpart();
-                } else {
-                    displayname = MatrixClientPeg.get().getUserIdLocalpart();
-                }
-            }
-            return displayname;
-        }, function(error) {
+        try {
+            const res = await cli.getProfileInfo(cli.getUserId());
+            return res.displayname;
+        } catch (e) {
             throw new Error("Failed to fetch display name");
-        });
+        }
     },
 
-    _changeDisplayName: function(new_displayname) {
+    _changeDisplayName: function(newDisplayname) {
         const cli = MatrixClientPeg.get();
-        return cli.setDisplayName(new_displayname).catch(function(e) {
-            throw new Error("Failed to set display name");
+        return cli.setDisplayName(newDisplayname).catch(function(e) {
+            throw new Error("Failed to set display name", e);
         });
     },
 

src/components/views/settings/ChangePassword.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,14 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 const React = require('react');
 import PropTypes from 'prop-types';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const Modal = require("../../../Modal");
 const sdk = require("../../../index");
 
+import dis from "../../../dispatcher";
 import Promise from 'bluebird';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
@@ -143,6 +143,9 @@ module.exports = React.createClass({
         });
 
         cli.setPassword(authDict, newPassword).then(() => {
+            // Notify SessionStore that the user's password was changed
+            dis.dispatch({action: 'password_changed'});
+
             if (this.props.shouldAskForEmail) {
                 return this._optionallySetEmail().then((confirmed) => {
                     this.props.onFinished({

src/cryptodevices.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import Resend from './Resend';
 import sdk from './index';
+import dis from './dispatcher';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 
@@ -65,6 +66,10 @@ export function getUnknownDevicesForRoom(matrixClient, room) {
     });
 }
 
+function focusComposer() {
+    dis.dispatch({action: 'focus_composer'});
+}
+
 /**
  * Show the UnknownDeviceDialog for a given room. The dialog will inform the user
  * that messages they sent to this room have not been sent due to unknown devices
@@ -86,6 +91,7 @@ export function showUnknownDeviceDialogForMessages(matrixClient, room) {
             sendAnywayLabel: _t("Send anyway"),
             sendLabel: _t("Send"),
             onSend: onSendClicked,
+            onFinished: focusComposer,
         }, 'mx_Dialog_unknownDevice');
     });
 }

src/i18n/strings/be.json

@@ -31,7 +31,6 @@
     "Noisy": "Шумна",
     "Resend": "Паўторна",
     "On": "Уключыць",
-    "Permalink": "Пастаянная спасылка",
     "remove %(name)s from the directory.": "выдаліць %(name)s з каталога.",
     "Off": "Выключыць",
     "Delete the room alias %(alias)s and remove %(name)s from the directory?": "Выдаліць псеўданім пакоя %(alias)s і выдаліць %(name)s з каталога?",

src/i18n/strings/bg.json

@@ -136,7 +136,6 @@
     "Missing room_id in request": "Липсва room_id в заявката",
     "Room %(roomId)s not visible": "Стая %(roomId)s не е видима",
     "Missing user_id in request": "Липсва user_id в заявката",
-    "Failed to lookup current room": "Неуспешно намиране на текущата стая",
     "/ddg is not a command": "/ddg не е команда",
     "To use it, just wait for autocomplete results to load and tab through them.": "За използване, изчакайте зареждането на списъка с предложения и изберете от него.",
     "Unrecognised room alias:": "Непознат псевдоним на стая:",
@@ -204,9 +203,7 @@
     "Not a valid Riot keyfile": "Невалиден файл с ключ за Riot",
     "Authentication check failed: incorrect password?": "Неуспешна автентикация: неправилна парола?",
     "Failed to join room": "Неуспешно присъединяване към стаята",
-    "Message Replies": "Отговори на съобщението",
     "Message Pinning": "Функция за закачане на съобщения",
-    "Tag Panel": "Панел с етикети",
     "Disable Emoji suggestions while typing": "Изключване на предложенията за емотиконите при писане",
     "Use compact timeline layout": "Използване на компактно оформление за списъка със съобщения",
     "Hide removed messages": "Скриване на премахнати съобщения",
@@ -491,7 +488,6 @@
     "Decrypt %(text)s": "Разшифровай %(text)s",
     "Download %(text)s": "Изтегли %(text)s",
     "(could not connect media)": "(неуспешно свързване на медийните устройства)",
-    "Must be viewing a room": "Трябва да извършите това в стая",
     "Usage": "Употреба",
     "Remove from community": "Премахни от общността",
     "Disinvite this user from community?": "Оттегляне на поканата към този потребител от общността?",
@@ -520,8 +516,6 @@
     "Community %(groupId)s not found": "Общност %(groupId)s не е намерена",
     "Create a new community": "Създаване на нова общност",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Създайте общност, за да групирате потребители и стаи! Изградете персонализирана начална страница, за да маркирате своето пространство в Matrix Вселената.",
-    "Join an existing community": "Присъединяване към съществуваща общност",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "За да се присъедините към вече съществуваща общност, трябва да знаете нейния идентификатор; той изглежда нещо подобно на <i>+example:matrix.org</i>.",
     "Unknown (user, device) pair:": "Непозната двойка (потребител, устройство):",
     "The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.": "Подписващият ключ, който сте предоставили, съвпада с подписващия ключ, който сте получили от устройството %(deviceId)s на %(userId)s. Устройството е маркирано като потвърдено.",
     "Hide avatars in user and room mentions": "Скриване на аватара на потребители и стаи при споменаването им",
@@ -888,7 +882,6 @@
     "This homeserver doesn't offer any login flows which are supported by this client.": "Този Home сървър не предлага методи за влизане, които се поддържат от този клиент.",
     "Error: Problem communicating with the given homeserver.": "Грешка: Проблем при комуникацията с дадения Home сървър.",
     "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "Не е възможно свързване към Home сървъра чрез HTTP, когато има HTTPS адрес в лентата на браузъра Ви. Или използвайте HTTPS или <a>включете функция небезопасни скриптове</a>.",
-    "Login as guest": "Влез като гост",
     "Sign in to get started": "Влезте в профила си, за да започнете",
     "Set a display name:": "Задаване на име:",
     "Upload an avatar:": "Качване на профилна снимка:",
@@ -1125,7 +1118,6 @@
     "Set Password": "Задаване на парола",
     "An error occurred whilst saving your email notification preferences.": "Възникна грешка при запазване на настройките за имейл известяване.",
     "Enable audible notifications in web client": "Включване на звукови известия в уеб клиент",
-    "Permalink": "Permalink",
     "Off": "Изключено",
     "Riot does not know how to join a room on this network": "Riot не знае как да се присъедини към стая от тази мрежа",
     "Mentions only": "Само при споменаване",
@@ -1188,5 +1180,6 @@
     "Terms and Conditions": "Правила и условия",
     "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "За да продължите да ползвате %(homeserverDomain)s е необходимо да прегледате и да се съгласите с правилата и условията за ползване.",
     "Review terms and conditions": "Прегледай правилата и условията",
-    "Failed to indicate account erasure": "Неуспешно указване на желанието за изтриване на акаунта"
+    "Failed to indicate account erasure": "Неуспешно указване на желанието за изтриване на акаунта",
+    "Try the app first": "Първо пробвайте приложението"
 }

src/i18n/strings/ca.json

@@ -134,10 +134,8 @@
     "You are not in this room.": "No heu entrat a aquesta sala.",
     "You do not have permission to do that in this room.": "No teniu el permís per realitzar aquesta acció en aquesta sala.",
     "Missing room_id in request": "Falta l'ID de la sala en la vostra sol·licitud",
-    "Must be viewing a room": "Hauríeu de veure una sala",
     "Room %(roomId)s not visible": "La sala %(roomId)s no és visible",
     "Missing user_id in request": "Falta l'ID d'usuari a la vostre sol·licitud",
-    "Failed to lookup current room": "No s'ha pogut buscar la sala actual",
     "Usage": "Ús",
     "/ddg is not a command": "/ddg no és un comandament",
     "To use it, just wait for autocomplete results to load and tab through them.": "Per utilitzar-lo, simplement espereu que es completin els resultats automàticament i seleccioneu-ne el desitjat.",
@@ -211,9 +209,7 @@
     "Not a valid Riot keyfile": "El fitxer no és un fitxer de claus de Riot valid",
     "Authentication check failed: incorrect password?": "Ha fallat l'autenticació: heu introduït correctament la contrasenya?",
     "Failed to join room": "No s'ha pogut entrar a la sala",
-    "Message Replies": "Respostes del missatge",
     "Message Pinning": "Fixació de missatges",
-    "Tag Panel": "Tauler d'etiquetes",
     "Disable Emoji suggestions while typing": "Desactiva els suggeriments d'Emoji mentre s'escriu",
     "Use compact timeline layout": "Utilitza el disseny compacte de la línia de temps",
     "Hide join/leave messages (invites/kicks/bans unaffected)": "Amaga els missatges d'entrada i sortida (no afecta a les invitacions, expulsions o prohibicions)",
@@ -579,7 +575,6 @@
     "%(nameList)s %(transitionList)s": "%(transitionList)s%(nameList)s",
     "%(severalUsers)sjoined %(count)s times|one": "%(severalUsers)s han entrat",
     "Guest access is disabled on this Home Server.": "L'accés a usuaris d'altres xarxes no està permès en aquest servidor.",
-    "Login as guest": "Inicia sessió com a convidat",
     "Unblacklist": "Treure de la llista negre",
     "%(oneUser)sjoined %(count)s times|one": "%(oneUser)s s'ha unit",
     "%(severalUsers)sleft %(count)s times|one": "%(severalUsers)s han sortit",
@@ -772,8 +767,6 @@
     "Error whilst fetching joined communities": "S'ha produït un error en buscar comunitats unides",
     "Create a new community": "Crea una nova comunitat",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Crea una comunitat per agrupar usuaris i sales! Creeu una pàgina d'inici personalitzada per definir el vostre espai a l'univers Matrix.",
-    "Join an existing community": "Uneix-te a una comunitat existent",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "Per unir-se a una comunitat existent, haureu de conèixer l'identificador de la comunitat; això es veurà com <i>+exemple:matrix.org</i>.",
     "You have no visible notifications": "No teniu cap notificació visible",
     "Scroll to bottom of page": "Desplaça't fins a la part inferior de la pàgina",
     "Message not sent due to unknown devices being present": "El missatge no s'ha enviat perquè hi ha dispositius desconeguts presents",
@@ -1004,7 +997,6 @@
     "Unable to fetch notification target list": "No s'ha pogut obtenir la llista d'objectius de les notificacions",
     "Set Password": "Establiu una contrasenya",
     "Enable audible notifications in web client": "Habilita les notificacions d'àudio al client web",
-    "Permalink": "Enllaç permanent",
     "Off": "Apagat",
     "Riot does not know how to join a room on this network": "El Riot no sap com unir-se a una sala en aquesta xarxa",
     "Mentions only": "Només mencions",

src/i18n/strings/cs.json

@@ -239,7 +239,6 @@
     "Level:": "Úroveň:",
     "Local addresses for this room:": "Místní adresy této místnosti:",
     "Logged in as:": "Přihlášen/a jako:",
-    "Login as guest": "Přihlášen/a jako host",
     "matrix-react-sdk version:": "Verze matrix-react-sdk:",
     "Mobile phone number": "Číslo mobilního telefonu",
     "Mobile phone number (optional)": "Číslo mobilního telefonu (nepovinné)",
@@ -633,9 +632,7 @@
     "Show these rooms to non-members on the community page and room list?": "Zobrazovat tyto místnosti na domovské stránce skupiny a v seznamu místností i pro nečleny?",
     "Restricted": "Omezené",
     "Missing room_id in request": "V zadání chybí room_id",
-    "Must be viewing a room": "Musí být zobrazena místnost",
     "Missing user_id in request": "V zadání chybí user_id",
-    "Failed to lookup current room": "Nepodařilo se vyhledat aktuální místnost",
     "(could not connect media)": "(média se nepodařilo spojit)",
     "%(senderName)s placed a %(callType)s call.": "%(senderName)s uskutečnil %(callType)s hovor.",
     "%(senderName)s made future room history visible to unknown (%(visibility)s).": "%(senderName)s zpřístupnil budoucí historii místnosti neznámým (%(visibility)s).",
@@ -860,8 +857,6 @@
     "Error whilst fetching joined communities": "Při získávání vašich skupin se vyskytla chyba",
     "Create a new community": "Vytvořit novou skupinu",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Vytvořte skupinu s cílem seskupit uživatele a místnosti! Vytvořte si vlastní domovskou stránku a vymezte tak váš prostor ve světe Matrix.",
-    "Join an existing community": "Vstoupit do existující skupiny",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "Aby jste mohli vstoupit do existující skupiny, musíte znát její identifikátor; Měl by vypadat asi takto <i>+priklad:matrix.org</i>.",
     "You have no visible notifications": "Nejsou dostupná žádná oznámení",
     "Connectivity to the server has been lost.": "Spojení se serverem bylo přerušené.",
     "Sent messages will be stored until your connection has returned.": "Odeslané zprávy zůstanou uložené, dokud se spojení znovu neobnoví.",
@@ -919,7 +914,6 @@
     "Claimed Ed25519 fingerprint key": "Údajný klíč s otiskem prstu Ed25519",
     "This process allows you to import encryption keys that you had previously exported from another Matrix client. You will then be able to decrypt any messages that the other client could decrypt.": "Tento proces vás provede importem šifrovacích klíčů, které jste si stáhli z jiného Matrix klienta. Po úspěšném naimportování budete v tomto klientovi moci dešifrovat všechny zprávy, které jste mohli dešifrovat v původním klientovi.",
     "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "Stažený soubor je chráněn heslem. Soubor můžete naimportovat pouze pokud zadáte odpovídající heslo.",
-    "Tag Panel": "Připnout panel",
     "Call Failed": "Hovor selhal",
     "There are unknown devices in this room: if you proceed without verifying them, it will be possible for someone to eavesdrop on your call.": "V této místnosti jsou neznámá zařízení: Pokud budete pokračovat bez jejich ověření, někdo může Váš hovor odposlouchávat.",
     "Review Devices": "Ověřit zařízení",
@@ -1062,7 +1056,6 @@
     "Set Password": "Nastavit heslo",
     "An error occurred whilst saving your email notification preferences.": "Při ukládání nastavení e-mailových upozornění nastala chyba.",
     "Enable audible notifications in web client": "Povolit zvuková upozornění ve webové aplikaci",
-    "Permalink": "Trvalý odkaz",
     "Off": "Vypnout",
     "#example": "#příklad",
     "Mentions only": "Pouze zmínky",

src/i18n/strings/da.json

@@ -39,7 +39,6 @@
     "Searches DuckDuckGo for results": "Søger DuckDuckGo for resultater",
     "Commands": "kommandoer",
     "Emoji": "Emoji",
-    "Login as guest": "Log ind som gæst",
     "Sign in": "Log ind",
     "Warning!": "Advarsel!",
     "Account": "Konto",
@@ -194,10 +193,8 @@
     "You are not in this room.": "Du er ikke i dette rum.",
     "You do not have permission to do that in this room.": "Du har ikke tilladelse til at gøre dét i dette rum.",
     "Missing room_id in request": "Mangler room_id i forespørgsel",
-    "Must be viewing a room": "Du skal være i gang med at se på rummet",
     "Room %(roomId)s not visible": "rum %(roomId)s ikke synligt",
     "Missing user_id in request": "Manglende user_id i forespørgsel",
-    "Failed to lookup current room": "Kunne ikke slå nuværende rum op",
     "Usage": "Brug",
     "/ddg is not a command": "/ddg er ikke en kommando",
     "To use it, just wait for autocomplete results to load and tab through them.": "For at bruge det skal du bare vente på autocomplete resultaterne indlæser og tab'e igennem dem.",
@@ -371,7 +368,6 @@
     "Unable to fetch notification target list": "Kan ikke hente meddelelsesmålliste",
     "Set Password": "Indstil Password",
     "Enable audible notifications in web client": "Aktivér hørbare underretninger i webklienten",
-    "Permalink": "Permanent link",
     "Resend": "Send igen",
     "Riot does not know how to join a room on this network": "Riot ved ikke, hvordan man kan deltage i et rum på dette netværk",
     "Mentions only": "Kun nævninger",

src/i18n/strings/de_DE.json

@@ -40,7 +40,6 @@
     "Searches DuckDuckGo for results": "Verwendet DuckDuckGo für Suchergebnisse",
     "Commands": "Kommandos",
     "Emoji": "Emoji",
-    "Login as guest": "Als Gast anmelden",
     "Sign in": "Anmelden",
     "Warning!": "Warnung!",
     "Error": "Fehler",
@@ -250,7 +249,6 @@
     "%(senderDisplayName)s changed the topic to \"%(topic)s\".": "%(senderDisplayName)s hat das Thema geändert in \"%(topic)s\".",
     "/ddg is not a command": "/ddg ist kein Kommando",
     "%(senderName)s ended the call.": "%(senderName)s hat den Anruf beendet.",
-    "Failed to lookup current room": "Fehler beim Nachschlagen des Raums",
     "Failed to send request.": "Anfrage konnte nicht gesendet werden.",
     "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s von %(fromPowerLevel)s zu %(toPowerLevel)s",
     "%(senderName)s invited %(targetName)s.": "%(senderName)s hat %(targetName)s eingeladen.",
@@ -265,7 +263,6 @@
     "%(senderName)s made future room history visible to unknown (%(visibility)s).": "%(senderName)s hat den zukünftigen Chatverlauf sichtbar gemacht für unbekannt (%(visibility)s).",
     "Missing room_id in request": "Fehlende room_id in Anfrage",
     "Missing user_id in request": "Fehlende user_id in Anfrage",
-    "Must be viewing a room": "Muss einen Raum ansehen",
     "(not supported by this browser)": "(wird von diesem Browser nicht unterstützt)",
     "%(senderName)s placed a %(callType)s call.": "%(senderName)s startete einen %(callType)s-Anruf.",
     "Power level must be positive integer.": "Berechtigungslevel muss eine positive ganze Zahl sein.",
@@ -785,8 +782,6 @@
     "Failed to load %(groupId)s": "'%(groupId)s' konnte nicht geladen werden",
     "Error whilst fetching joined communities": "Fehler beim Laden beigetretener Communities",
     "Create a new community": "Neue Community erstellen",
-    "Join an existing community": "Einer bestehenden Community beitreten",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "Um einer bereits bestehenden Community beitreten zu können, musst dir deren Community-ID bekannt sein. Diese sieht z. B. aus wie <i>+example:matrix.org</i>.",
     "Your Communities": "Deine Communities",
     "You're not currently a member of any communities.": "Du gehörst aktuell keiner Community an.",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Erstelle eine Community, um Benutzer und Räume miteinander zu verbinden! Erstelle zusätzlich eine eigene Homepage, um deinen individuellen Bereich im Matrix-Universum zu gestalten.",
@@ -951,8 +946,6 @@
     "Your homeserver's URL": "Die URL deines Homeservers",
     "Your identity server's URL": "Die URL deines Identitätsservers",
     "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
-    "Tag Panel": "Beschriftungsfeld",
-    "Message Replies": "Antworten auf Nachrichten",
     "You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the room it will be impossible to regain privileges.": "Du wirst nicht in der Lage sein, die Änderung zurückzusetzen, da du dich degradierst. Wenn du der letze Nutzer mit Berechtigungen bist, wird es unmöglich sein die Privilegien zurückzubekommen.",
     "Community IDs cannot not be empty.": "Community-IDs können nicht leer sein.",
     "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.": "<showDevicesText>Geräte anzeigen</showDevicesText>, <sendAnywayText>trotzdem senden</sendAnywayText> oder <cancelText>abbrechen</cancelText>.",
@@ -1126,7 +1119,6 @@
     "Unable to fetch notification target list": "Liste der Benachrichtigungsempfänger konnte nicht abgerufen werden",
     "Set Password": "Passwort einrichten",
     "Enable audible notifications in web client": "Audio-Benachrichtigungen im Web-Client aktivieren",
-    "Permalink": "Permanenter Link",
     "Off": "Aus",
     "Riot does not know how to join a room on this network": "Riot weiß nicht, wie es einem Raum auf diesem Netzwerk beitreten soll",
     "Mentions only": "Nur, wenn du erwähnt wirst",
@@ -1169,9 +1161,6 @@
     "At this time it is not possible to reply with an emote.": "An dieser Stelle ist es nicht möglich mit einer Umschreibung zu antworten.",
     "Enable widget screenshots on supported widgets": "Widget-Screenshots bei unterstützten Widgets aktivieren",
     "Send analytics data": "Analysedaten senden",
-    "Help improve Riot by sending usage data? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Möchtest du Riot helfen indem du Nutzungsdaten sendest? Dies wird ein Cookie verwenden. (Siehe unsere <PolicyLink>Datenschutzerklärung</PolicyLink>).",
-    "Help improve Riot by sending usage data? This will use a cookie.": "Möchtest du Riot helfen indem du Nutzungsdaten sendest? Dies wird ein Cookie verwenden.",
-    "Yes please": "Ja, bitte",
     "e.g. %(exampleValue)s": "z.B. %(exampleValue)s",
     "Reload widget": "Widget neu laden",
     "To notify everyone in the room, you must be a": "Notwendiges Berechtigungslevel, um jeden im Raum zu benachrichten:",
@@ -1191,5 +1180,20 @@
     "This room is used for important messages from the Homeserver, so you cannot leave it.": "Du kannst diesen Raum nicht verlassen, da dieser Raum für wichtige Nachrichten vom Heimserver verwendet wird.",
     "Terms and Conditions": "Geschäftsbedingungen",
     "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "Um den %(homeserverDomain)s -Heimserver weiter zu verwenden, musst du die Geschäftsbedingungen sichten und ihnen zustimmen.",
-    "Review terms and conditions": "Geschäftsbedingungen anzeigen"
+    "Review terms and conditions": "Geschäftsbedingungen anzeigen",
+    "Encrypting": "Verschlüssele",
+    "Encrypted, not sent": "Verschlüsselt, nicht gesendet",
+    "Share Link to User": "Sende Link an Benutzer",
+    "Share room": "Teile Raum",
+    "Share Room": "Teile Raum",
+    "Link to most recent message": "Link zur aktuellsten Nachricht",
+    "Share User": "Teile Benutzer",
+    "Share Community": "Teile Community",
+    "Share Room Message": "Teile Raumnachricht",
+    "Link to selected message": "Link zur ausgewählten Nachricht",
+    "COPY": "KOPIEREN",
+    "Share Message": "Teile Nachricht",
+    "No Audio Outputs detected": "Keine Ton-Ausgabe erkannt",
+    "Audio Output": "Ton-Ausgabe",
+    "Try the app first": "App erst ausprobieren"
 }

src/i18n/strings/el.json

@@ -107,7 +107,7 @@
     "Failed to reject invitation": "Δεν ήταν δυνατή η απόρριψη της πρόσκλησης",
     "Failed to save settings": "Δεν ήταν δυνατή η αποθήκευση των ρυθμίσεων",
     "Failed to send email": "Δεν ήταν δυνατή η αποστολή ηλ. αλληλογραφίας",
-    "Failed to verify email address: make sure you clicked the link in the email": "Δεν ήταν δυνατή η επιβεβαίωση του μηνύματος ηλεκτρονικής αλληλογραφίας βεβαιωθείτε οτι κάνατε κλικ στον σύνδεσμο που σας στάλθηκε",
+    "Failed to verify email address: make sure you clicked the link in the email": "Δεν ήταν δυνατή η επιβεβαίωση της διεύθυνσης ηλεκτρονικής αλληλογραφίας: βεβαιωθείτε οτι κάνατε κλικ στον σύνδεσμο που σας στάλθηκε",
     "Favourite": "Αγαπημένο",
     "Favourites": "Αγαπημένα",
     "Fill screen": "Γέμισε την οθόνη",
@@ -142,7 +142,6 @@
     "%(targetName)s left the room.": "Ο χρήστης %(targetName)s έφυγε από το δωμάτιο.",
     "Local addresses for this room:": "Τοπική διεύθυνση για το δωμάτιο:",
     "Logged in as:": "Συνδεθήκατε ως:",
-    "Login as guest": "Σύνδεση ως επισκέπτης",
     "Logout": "Αποσύνδεση",
     "Low priority": "Χαμηλής προτεραιότητας",
     "matrix-react-sdk version:": "Έκδοση matrix-react-sdk:",
@@ -265,7 +264,7 @@
     "Room %(roomId)s not visible": "Το δωμάτιο %(roomId)s δεν είναι ορατό",
     "%(roomName)s does not exist.": "Το %(roomName)s δεν υπάρχει.",
     "Searches DuckDuckGo for results": "Γίνεται αναζήτηση στο DuckDuckGo για αποτελέσματα",
-    "Seen by %(userName)s at %(dateTime)s": "Διαβάστηκε από %(userName)s στις %(dateTime)s",
+    "Seen by %(userName)s at %(dateTime)s": "Διαβάστηκε από τον/την %(userName)s στις %(dateTime)s",
     "Send anyway": "Αποστολή ούτως ή άλλως",
     "Send Invites": "Αποστολή προσκλήσεων",
     "Send Reset Email": "Αποστολή μηνύματος επαναφοράς",
@@ -425,7 +424,6 @@
     "Failed to ban user": "Δεν ήταν δυνατό ο αποκλεισμός του χρήστη",
     "Failed to change power level": "Δεν ήταν δυνατή η αλλαγή του επιπέδου δύναμης",
     "Failed to fetch avatar URL": "Δεν ήταν δυνατή η ανάκτηση της διεύθυνσης εικόνας",
-    "Failed to lookup current room": "Δεν ήταν δυνατή η εύρεση του τρέχοντος δωματίου",
     "Failed to unban": "Δεν ήταν δυνατή η άρση του αποκλεισμού",
     "%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s": "%(userId)s από %(fromPowerLevel)s σε %(toPowerLevel)s",
     "Guest access is disabled on this Home Server.": "Έχει απενεργοποιηθεί η πρόσβαση στους επισκέπτες σε αυτόν τον διακομιστή.",
@@ -448,7 +446,6 @@
     "%(senderName)s made future room history visible to unknown (%(visibility)s).": "Ο %(senderName)s έκανε το μελλοντικό ιστορικό του δωματίου δημόσιο άγνωστο (%(visibility)s).",
     "Missing user_id in request": "Λείπει το user_id στο αίτημα",
     "Mobile phone number (optional)": "Αριθμός κινητού τηλεφώνου (προαιρετικό)",
-    "Must be viewing a room": "Πρέπει να βλέπετε ένα δωμάτιο",
     "Never send encrypted messages to unverified devices from this device": "Να μη γίνει ποτέ αποστολή κρυπτογραφημένων μηνυμάτων σε ανεπιβεβαίωτες συσκευές από αυτή τη συσκευή",
     "Never send encrypted messages to unverified devices in this room from this device": "Να μη γίνει ποτέ αποστολή κρυπτογραφημένων μηνυμάτων σε ανεπιβεβαίωτες συσκευές, σε αυτό το δωμάτιο, από αυτή τη συσκευή",
     "not set": "δεν έχει οριστεί",
@@ -466,7 +463,7 @@
     "%(senderName)s removed their profile picture.": "Ο %(senderName)s αφαίρεσε τη φωτογραφία του προφίλ του.",
     "%(senderName)s requested a VoIP conference.": "Ο %(senderName)s αιτήθηκε μια συνδιάσκεψη VoIP.",
     "Riot does not have permission to send you notifications - please check your browser settings": "Το Riot δεν έχει δικαιώματα για αποστολή ειδοποιήσεων - παρακαλούμε ελέγξτε τις ρυθμίσεις του περιηγητή σας",
-    "Riot was not given permission to send notifications - please try again": "Δεν δόθηκαν δικαιώματα στο Riot να αποστείλει ειδοποιήσεις - παρακαλούμε προσπαθήστε ξανά",
+    "Riot was not given permission to send notifications - please try again": "Δεν δόθηκαν δικαιώματα αποστολής ειδοποιήσεων στο Riot - παρακαλούμε προσπαθήστε ξανά",
     "Room contains unknown devices": "Το δωμάτιο περιέχει άγνωστες συσκευές",
     "%(roomName)s is not accessible at this time.": "Το %(roomName)s δεν είναι προσβάσιμο αυτή τη στιγμή.",
     "Scroll to bottom of page": "Μετάβαση στο τέλος της σελίδας",
@@ -746,7 +743,6 @@
     "What's New": "Τι νέο υπάρχει",
     "Set Password": "Ορισμός κωδικού πρόσβασης",
     "Enable audible notifications in web client": "Ενεργοποίηση ηχητικών ειδοποιήσεων",
-    "Permalink": "Μόνιμος σύνδεσμος",
     "Off": "Ανενεργό",
     "#example": "#παράδειγμα",
     "Mentions only": "Μόνο αναφορές",
@@ -774,5 +770,84 @@
     "e.g. <CurrentPageURL>": "π.χ. <CurrentPageURL>",
     "Your device resolution": "Η ανάλυση της συσκευής σας",
     "The information being sent to us to help make Riot.im better includes:": "Οι πληροφορίες που στέλνονται σε εμάς με σκοπό την βελτίωση του Riot.im περιλαμβάνουν:",
-    "Call Failed": "Η κλήση απέτυχε"
+    "Call Failed": "Η κλήση απέτυχε",
+    "Whether or not you're logged in (we don't record your user name)": "Εάν είστε συνδεδεμένος/η ή όχι (δεν καταγράφουμε το όνομα χρήστη σας)",
+    "e.g. %(exampleValue)s": "π.χ. %(exampleValue)s",
+    "Review Devices": "Ανασκόπηση συσκευών",
+    "Call Anyway": "Κλήση όπως και να 'χει",
+    "Answer Anyway": "Απάντηση όπως και να 'χει",
+    "Call": "Κλήση",
+    "Answer": "Απάντηση",
+    "AM": "ΠΜ",
+    "PM": "ΜΜ",
+    "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s": "%(weekDayName)s, %(monthName)s %(day)s %(fullYear)s",
+    "Who would you like to add to this community?": "Ποιον/α θα θέλατε να προσθέσετε σε αυτή την κοινότητα;",
+    "Warning: any person you add to a community will be publicly visible to anyone who knows the community ID": "Προσοχή: κάθε άτομο που προσθέτετε στην κοινότητα θε είναι δημοσίως ορατό σε οποιονδήποτε γνωρίζει το αναγνωριστικό της κοινότητας",
+    "Invite new community members": "Προσκαλέστε νέα μέλη στην κοινότητα",
+    "Name or matrix ID": "Όνομα ή αναγνωριστικό του matrix",
+    "Invite to Community": "Πρόσκληση στην κοινότητα",
+    "Which rooms would you like to add to this community?": "Ποια δωμάτια θα θέλατε να προσθέσετε σε αυτή την κοινότητα;",
+    "Add rooms to the community": "Προσθήκη δωματίων στην κοινότητα",
+    "Add to community": "Προσθήκη στην κοινότητα",
+    "Failed to invite the following users to %(groupId)s:": "Αποτυχία πρόσκλησης των ακόλουθων χρηστών στο %(groupId)s :",
+    "Failed to invite users to community": "Αποτυχία πρόσκλησης χρηστών στην κοινότητα",
+    "Failed to invite users to %(groupId)s": "Αποτυχία πρόσκλησης χρηστών στο %(groupId)s",
+    "Failed to add the following rooms to %(groupId)s:": "Αποτυχία προσθήκης των ακόλουθων δωματίων στο %(groupId)s:",
+    "There are unknown devices in this room: if you proceed without verifying them, it will be possible for someone to eavesdrop on your call.": "Υπάρχουν άγνωστες συσκευές στο δωμάτιο: εάν συνεχίσετε χωρίς να τις επιβεβαιώσετε, θα μπορούσε κάποιος να κρυφακούει την κλήση σας.",
+    "Show these rooms to non-members on the community page and room list?": "Εμφάνιση αυτών των δωματίων σε μη-μέλη στην σελίδα της κοινότητας και στη λίστα δωματίων;",
+    "Room name or alias": "Όνομα η ψευδώνυμο δωματίου",
+    "Restricted": "Περιορισμένο",
+    "Unable to create widget.": "Αδυναμία δημιουργίας widget.",
+    "Reload widget": "Ανανέωση widget",
+    "You are not in this room.": "Δεν είστε μέλος αυτού του δωματίου.",
+    "You do not have permission to do that in this room.": "Δεν έχετε την άδεια να το κάνετε αυτό σε αυτό το δωμάτιο.",
+    "You are now ignoring %(userId)s": "Τώρα αγνοείτε τον/την %(userId)s",
+    "You are no longer ignoring %(userId)s": "Δεν αγνοείτε πια τον/την %(userId)s",
+    "%(oldDisplayName)s changed their display name to %(displayName)s.": "Ο/Η %(oldDisplayName)s άλλαξε το εμφανιζόμενο όνομά του/της σε %(displayName)s.",
+    "%(senderName)s changed the pinned messages for the room.": "Ο/Η %(senderName)s άλλαξε τα καρφιτσωμένα μηνύματα του δωματίου.",
+    "%(widgetName)s widget modified by %(senderName)s": "Έγινε αλλαγή στο widget %(widgetName)s από τον/την %(senderName)s",
+    "%(widgetName)s widget added by %(senderName)s": "Προστέθηκε το widget %(widgetName)s από τον/την %(senderName)s",
+    "%(widgetName)s widget removed by %(senderName)s": "Το widget %(widgetName)s αφαιρέθηκε από τον/την %(senderName)s",
+    "%(names)s and %(count)s others are typing|other": "Ο/Η %(names)s και άλλοι/ες %(count)s πληκτρολογούν",
+    "%(names)s and %(count)s others are typing|one": "Ο/Η %(names)s και άλλος ένας πληκτρολογούν",
+    "Message Pinning": "Καρφίτσωμα Μηνυμάτων",
+    "Hide avatar changes": "Απόκρυψη αλλαγών εικονιδίων χρηστών",
+    "Hide display name changes": "Απόκρυψη αλλαγών εμφανιζόμενων ονομάτων",
+    "Hide avatars in user and room mentions": "Απόκρυψη εικονιδίων στις αναφορές χρηστών και δωματίων",
+    "Enable URL previews for this room (only affects you)": "Ενεργοποίηση προεπισκόπισης URL για αυτό το δωμάτιο (επηρεάζει μόνο εσάς)",
+    "Delete %(count)s devices|other": "Διαγραφή %(count)s συσκευών",
+    "Delete %(count)s devices|one": "Διαγραφή συσκευής",
+    "Select devices": "Επιλογή συσκευών",
+    "Cannot add any more widgets": "Δεν είναι δυνατή η προσθήκη άλλων widget",
+    "The maximum permitted number of widgets have already been added to this room.": "Ο μέγιστος επιτρεπτός αριθμός widget έχει ήδη προστεθεί σε αυτό το δωμάτιο.",
+    "Add a widget": "Προσθήκη widget",
+    "%(senderName)s sent an image": "Ο/Η %(senderName)s έστειλε μία εικόνα",
+    "%(senderName)s sent a video": "Ο/Η %(senderName)s έστειλε ένα βίντεο",
+    "%(senderName)s uploaded a file": "Ο/Η %(senderName)s αναφόρτωσε ένα αρχείο",
+    "If your other devices do not have the key for this message you will not be able to decrypt them.": "Εάν οι άλλες συσκευές σας δεν έχουν το κλειδί για αυτό το μήνυμα, τότε δεν θα μπορείτε να το αποκρυπτογραφήσετε.",
+    "Disinvite this user?": "Ακύρωση πρόσκλησης αυτού του χρήστη;",
+    "Mention": "Αναφορά",
+    "Invite": "Πρόσκληση",
+    "User Options": "Επιλογές Χρήστη",
+    "Send an encrypted reply…": "Αποστολή κρυπτογραφημένης απάντησης…",
+    "Send a reply (unencrypted)…": "Αποστολή απάντησης (μη κρυπτογραφημένης)…",
+    "Send an encrypted message…": "Αποστολή κρυπτογραφημένου μηνύματος…",
+    "Send a message (unencrypted)…": "Αποστολή μηνύματος (μη κρυπτογραφημένου)…",
+    "Unable to reply": "Αδυναμία απάντησης",
+    "Unpin Message": "Ξεκαρφίτσωμα μηνύματος",
+    "Jump to message": "Πηγαίντε στο μήνυμα",
+    "No pinned messages.": "Κανένα καρφιτσωμένο μήνυμα.",
+    "Loading...": "Φόρτωση...",
+    "Pinned Messages": "Καρφιτσωμένα Μηνύματα",
+    "%(duration)ss": "%(duration)sδ",
+    "%(duration)sm": "%(duration)sλ",
+    "%(duration)sh": "%(duration)sω",
+    "%(duration)sd": "%(duration)sμ",
+    "Online for %(duration)s": "Σε σύνδεση για %(duration)s",
+    "Idle for %(duration)s": "Αδρανής για %(duration)s",
+    "Offline for %(duration)s": "Εκτός σύνδεσης για %(duration)s",
+    "Seen by %(displayName)s (%(userName)s) at %(dateTime)s": "Διαβάστηκε από τον/την %(displayName)s (%(userName)s) στις %(dateTime)s",
+    "Room Notification": "Ειδοποίηση Δωματίου",
+    "Notify the whole room": "Ειδοποιήστε όλο το δωμάτιο",
+    "Sets the room topic": "Ορίζει το θέμα του δωματίου"
 }

src/i18n/strings/en_EN.json

@@ -33,12 +33,14 @@
     "VoIP is unsupported": "VoIP is unsupported",
     "You cannot place VoIP calls in this browser.": "You cannot place VoIP calls in this browser.",
     "You cannot place a call with yourself.": "You cannot place a call with yourself.",
-    "Conference calls are not supported in this client": "Conference calls are not supported in this client",
     "Conference calls are not supported in encrypted rooms": "Conference calls are not supported in encrypted rooms",
+    "Conference calls are not supported in this client": "Conference calls are not supported in this client",
     "Warning!": "Warning!",
     "Conference calling is in development and may not be reliable.": "Conference calling is in development and may not be reliable.",
     "Failed to set up conference call": "Failed to set up conference call",
     "Conference call failed.": "Conference call failed.",
+    "Call in Progress": "Call in Progress",
+    "A call is already in progress!": "A call is already in progress!",
     "The file '%(fileName)s' failed to upload": "The file '%(fileName)s' failed to upload",
     "The file '%(fileName)s' exceeds this home server's size limit for uploads": "The file '%(fileName)s' exceeds this home server's size limit for uploads",
     "Upload Failed": "Upload Failed",
@@ -104,7 +106,6 @@
     "You need to be logged in.": "You need to be logged in.",
     "You need to be able to invite users to do that.": "You need to be able to invite users to do that.",
     "Unable to create widget.": "Unable to create widget.",
-    "Reload widget": "Reload widget",
     "Missing roomId.": "Missing roomId.",
     "Failed to send request.": "Failed to send request.",
     "This room is not recognised.": "This room is not recognised.",
@@ -112,24 +113,39 @@
     "You are not in this room.": "You are not in this room.",
     "You do not have permission to do that in this room.": "You do not have permission to do that in this room.",
     "Missing room_id in request": "Missing room_id in request",
-    "Must be viewing a room": "Must be viewing a room",
     "Room %(roomId)s not visible": "Room %(roomId)s not visible",
     "Missing user_id in request": "Missing user_id in request",
-    "Failed to lookup current room": "Failed to lookup current room",
     "Usage": "Usage",
+    "Searches DuckDuckGo for results": "Searches DuckDuckGo for results",
     "/ddg is not a command": "/ddg is not a command",
     "To use it, just wait for autocomplete results to load and tab through them.": "To use it, just wait for autocomplete results to load and tab through them.",
+    "Changes your display nickname": "Changes your display nickname",
+    "Changes colour scheme of current room": "Changes colour scheme of current room",
+    "Sets the room topic": "Sets the room topic",
+    "Invites user with given id to current room": "Invites user with given id to current room",
+    "Joins room with given alias": "Joins room with given alias",
+    "Leave room": "Leave room",
     "Unrecognised room alias:": "Unrecognised room alias:",
+    "Kicks user with given id": "Kicks user with given id",
+    "Bans user with given id": "Bans user with given id",
+    "Unbans user with given id": "Unbans user with given id",
+    "Ignores a user, hiding their messages from you": "Ignores a user, hiding their messages from you",
     "Ignored user": "Ignored user",
     "You are now ignoring %(userId)s": "You are now ignoring %(userId)s",
+    "Stops ignoring a user, showing their messages going forward": "Stops ignoring a user, showing their messages going forward",
     "Unignored user": "Unignored user",
     "You are no longer ignoring %(userId)s": "You are no longer ignoring %(userId)s",
+    "Define the power level of a user": "Define the power level of a user",
+    "Deops user with given id": "Deops user with given id",
+    "Opens the Developer Tools dialog": "Opens the Developer Tools dialog",
+    "Verifies a user, device, and pubkey tuple": "Verifies a user, device, and pubkey tuple",
     "Unknown (user, device) pair:": "Unknown (user, device) pair:",
     "Device already verified!": "Device already verified!",
     "WARNING: Device already verified, but keys do NOT MATCH!": "WARNING: Device already verified, but keys do NOT MATCH!",
     "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!": "WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device %(deviceId)s is \"%(fprint)s\" which does not match the provided key \"%(fingerprint)s\". This could mean your communications are being intercepted!",
     "Verified key": "Verified key",
     "The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.": "The signing key you provided matches the signing key you received from %(userId)s's device %(deviceId)s. Device marked as verified.",
+    "Displays action": "Displays action",
     "Unrecognised command:": "Unrecognised command:",
     "Reason": "Reason",
     "%(targetName)s accepted the invitation for %(displayName)s.": "%(targetName)s accepted the invitation for %(displayName)s.",
@@ -189,9 +205,8 @@
     "Not a valid Riot keyfile": "Not a valid Riot keyfile",
     "Authentication check failed: incorrect password?": "Authentication check failed: incorrect password?",
     "Failed to join room": "Failed to join room",
-    "Message Replies": "Message Replies",
     "Message Pinning": "Message Pinning",
-    "Tag Panel": "Tag Panel",
+    "Jitsi Conference Calling": "Jitsi Conference Calling",
     "Disable Emoji suggestions while typing": "Disable Emoji suggestions while typing",
     "Use compact timeline layout": "Use compact timeline layout",
     "Hide removed messages": "Hide removed messages",
@@ -316,6 +331,8 @@
     "Key request sent.": "Key request sent.",
     "<requestLink>Re-request encryption keys</requestLink> from your other devices.": "<requestLink>Re-request encryption keys</requestLink> from your other devices.",
     "Undecryptable": "Undecryptable",
+    "Encrypting": "Encrypting",
+    "Encrypted, not sent": "Encrypted, not sent",
     "Encrypted by a verified device": "Encrypted by a verified device",
     "Encrypted by an unverified device": "Encrypted by an unverified device",
     "Unencrypted message": "Unencrypted message",
@@ -347,6 +364,7 @@
     "Jump to read receipt": "Jump to read receipt",
     "Mention": "Mention",
     "Invite": "Invite",
+    "Share Link to User": "Share Link to User",
     "User Options": "User Options",
     "Direct chats": "Direct chats",
     "Unmute": "Unmute",
@@ -428,6 +446,7 @@
     "Settings": "Settings",
     "Forget room": "Forget room",
     "Search": "Search",
+    "Share room": "Share room",
     "Show panel": "Show panel",
     "Drop here to favourite": "Drop here to favourite",
     "Drop here to tag direct chat": "Drop here to tag direct chat",
@@ -442,6 +461,7 @@
     "People": "People",
     "Rooms": "Rooms",
     "Low priority": "Low priority",
+    "You have no historical rooms": "You have no historical rooms",
     "Historical": "Historical",
     "Unable to ascertain that the address this invite was sent to matches one associated with your account.": "Unable to ascertain that the address this invite was sent to matches one associated with your account.",
     "This invitation was sent to an email address which is not associated with this account:": "This invitation was sent to an email address which is not associated with this account:",
@@ -498,7 +518,6 @@
     "Muted Users": "Muted Users",
     "Banned users": "Banned users",
     "This room is not accessible by remote Matrix servers": "This room is not accessible by remote Matrix servers",
-    "Leave room": "Leave room",
     "Favourite": "Favourite",
     "Tagged as: ": "Tagged as: ",
     "To link to a room it must have <a>an address</a>.": "To link to a room it must have <a>an address</a>.",
@@ -553,7 +572,9 @@
     "You have <a>disabled</a> URL previews by default.": "You have <a>disabled</a> URL previews by default.",
     "URL previews are enabled by default for participants in this room.": "URL previews are enabled by default for participants in this room.",
     "URL previews are disabled by default for participants in this room.": "URL previews are disabled by default for participants in this room.",
+    "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
     "URL Previews": "URL Previews",
+    "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
     "Sunday": "Sunday",
     "Monday": "Monday",
     "Tuesday": "Tuesday",
@@ -598,6 +619,10 @@
     "Code": "Code",
     "Start authentication": "Start authentication",
     "powered by Matrix": "powered by Matrix",
+    "The email field must not be blank.": "The email field must not be blank.",
+    "The user name field must not be blank.": "The user name field must not be blank.",
+    "The phone number field must not be blank.": "The phone number field must not be blank.",
+    "The password field must not be blank.": "The password field must not be blank.",
     "Username on %(hs)s": "Username on %(hs)s",
     "User name": "User name",
     "Mobile phone number": "Mobile phone number",
@@ -664,6 +689,7 @@
     "Delete widget": "Delete widget",
     "Revoke widget access": "Revoke widget access",
     "Minimize apps": "Minimize apps",
+    "Reload widget": "Reload widget",
     "Popout widget": "Popout widget",
     "Picture": "Picture",
     "Edit": "Edit",
@@ -748,8 +774,8 @@
     "Matrix ID": "Matrix ID",
     "Matrix Room ID": "Matrix Room ID",
     "email address": "email address",
-    "Try using one of the following valid address types: %(validTypesList)s.": "Try using one of the following valid address types: %(validTypesList)s.",
     "You have entered an invalid address.": "You have entered an invalid address.",
+    "Try using one of the following valid address types: %(validTypesList)s.": "Try using one of the following valid address types: %(validTypesList)s.",
     "Preparing to send logs": "Preparing to send logs",
     "Logs sent": "Logs sent",
     "Thank you!": "Thank you!",
@@ -856,6 +882,13 @@
     "(HTTP status %(httpStatus)s)": "(HTTP status %(httpStatus)s)",
     "Please set a password!": "Please set a password!",
     "This will allow you to return to your account after signing out, and sign in on other devices.": "This will allow you to return to your account after signing out, and sign in on other devices.",
+    "Share Room": "Share Room",
+    "Link to most recent message": "Link to most recent message",
+    "Share User": "Share User",
+    "Share Community": "Share Community",
+    "Share Room Message": "Share Room Message",
+    "Link to selected message": "Link to selected message",
+    "COPY": "COPY",
     "You are currently blacklisting unverified devices; to send messages to these devices you must verify them.": "You are currently blacklisting unverified devices; to send messages to these devices you must verify them.",
     "We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.": "We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.",
     "Room contains unknown devices": "Room contains unknown devices",
@@ -865,6 +898,10 @@
     "Public Chat": "Public Chat",
     "Custom": "Custom",
     "Alias (optional)": "Alias (optional)",
+    "Reject invitation": "Reject invitation",
+    "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
+    "Unable to reject invite": "Unable to reject invite",
+    "Reject": "Reject",
     "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)",
     "Resend": "Resend",
     "Cancel Sending": "Cancel Sending",
@@ -874,7 +911,7 @@
     "View Source": "View Source",
     "View Decrypted Source": "View Decrypted Source",
     "Unhide Preview": "Unhide Preview",
-    "Permalink": "Permalink",
+    "Share Message": "Share Message",
     "Quote": "Quote",
     "Source URL": "Source URL",
     "Collapse Reply Thread": "Collapse Reply Thread",
@@ -884,7 +921,6 @@
     "Mentions only": "Mentions only",
     "Leave": "Leave",
     "Forget": "Forget",
-    "Reject": "Reject",
     "Low Priority": "Low Priority",
     "Direct Chat": "Direct Chat",
     "View Community": "View Community",
@@ -919,7 +955,6 @@
     "Failed to upload image": "Failed to upload image",
     "Failed to update community": "Failed to update community",
     "Unable to accept invite": "Unable to accept invite",
-    "Unable to reject invite": "Unable to reject invite",
     "Unable to join community": "Unable to join community",
     "Leave Community": "Leave Community",
     "Leave %(groupName)s?": "Leave %(groupName)s?",
@@ -945,8 +980,6 @@
     "Failed to load %(groupId)s": "Failed to load %(groupId)s",
     "Couldn't load home page": "Couldn't load home page",
     "Login": "Login",
-    "Reject invitation": "Reject invitation",
-    "Are you sure you want to reject the invitation?": "Are you sure you want to reject the invitation?",
     "Failed to reject invitation": "Failed to reject invitation",
     "This room is not public. You will not be able to rejoin without an invite.": "This room is not public. You will not be able to rejoin without an invite.",
     "Are you sure you want to leave the room '%(roomName)s'?": "Are you sure you want to leave the room '%(roomName)s'?",
@@ -967,8 +1000,6 @@
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
-    "Join an existing community": "Join an existing community",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.",
     "You have no visible notifications": "You have no visible notifications",
     "Members": "Members",
     "%(count)s Members|other": "%(count)s Members",
@@ -999,6 +1030,7 @@
     "Scroll to bottom of page": "Scroll to bottom of page",
     "Message not sent due to unknown devices being present": "Message not sent due to unknown devices being present",
     "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.": "<showDevicesText>Show devices</showDevicesText>, <sendAnywayText>send anyway</sendAnywayText> or <cancelText>cancel</cancelText>.",
+    "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.": "You can't send any messages until you review and agree to <consentLink>our terms and conditions</consentLink>.",
     "%(count)s of your messages have not been sent.|other": "Some of your messages have not been sent.",
     "%(count)s of your messages have not been sent.|one": "Your message was not sent.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|other": "<resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.",
@@ -1077,9 +1109,11 @@
     "No media permissions": "No media permissions",
     "You may need to manually permit Riot to access your microphone/webcam": "You may need to manually permit Riot to access your microphone/webcam",
     "Missing Media Permissions, click here to request.": "Missing Media Permissions, click here to request.",
+    "No Audio Outputs detected": "No Audio Outputs detected",
     "No Microphones detected": "No Microphones detected",
     "No Webcams detected": "No Webcams detected",
     "Default Device": "Default Device",
+    "Audio Output": "Audio Output",
     "Microphone": "Microphone",
     "Camera": "Camera",
     "VoIP": "VoIP",
@@ -1121,7 +1155,7 @@
     "Error: Problem communicating with the given homeserver.": "Error: Problem communicating with the given homeserver.",
     "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.",
     "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
-    "Login as guest": "Login as guest",
+    "Try the app first": "Try the app first",
     "Sign in to get started": "Sign in to get started",
     "Failed to fetch avatar URL": "Failed to fetch avatar URL",
     "Set a display name:": "Set a display name:",
@@ -1135,22 +1169,6 @@
     "You need to enter a user name.": "You need to enter a user name.",
     "An unknown error occurred.": "An unknown error occurred.",
     "I already have an account": "I already have an account",
-    "Displays action": "Displays action",
-    "Bans user with given id": "Bans user with given id",
-    "Unbans user with given id": "Unbans user with given id",
-    "Define the power level of a user": "Define the power level of a user",
-    "Deops user with given id": "Deops user with given id",
-    "Invites user with given id to current room": "Invites user with given id to current room",
-    "Joins room with given alias": "Joins room with given alias",
-    "Sets the room topic": "Sets the room topic",
-    "Kicks user with given id": "Kicks user with given id",
-    "Changes your display nickname": "Changes your display nickname",
-    "Searches DuckDuckGo for results": "Searches DuckDuckGo for results",
-    "Changes colour scheme of current room": "Changes colour scheme of current room",
-    "Verifies a user, device, and pubkey tuple": "Verifies a user, device, and pubkey tuple",
-    "Ignores a user, hiding their messages from you": "Ignores a user, hiding their messages from you",
-    "Stops ignoring a user, showing their messages going forward": "Stops ignoring a user, showing their messages going forward",
-    "Opens the Developer Tools dialog": "Opens the Developer Tools dialog",
     "Commands": "Commands",
     "Results from DuckDuckGo": "Results from DuckDuckGo",
     "Emoji": "Emoji",

src/i18n/strings/en_US.json

@@ -135,7 +135,6 @@
     "Failed to kick": "Failed to kick",
     "Failed to leave room": "Failed to leave room",
     "Failed to load timeline position": "Failed to load timeline position",
-    "Failed to lookup current room": "Failed to lookup current room",
     "Failed to mute user": "Failed to mute user",
     "Failed to reject invite": "Failed to reject invite",
     "Failed to reject invitation": "Failed to reject invitation",
@@ -209,7 +208,6 @@
     "Publish this room to the public in %(domain)s's room directory?": "Publish this room to the public in %(domain)s's room directory?",
     "Local addresses for this room:": "Local addresses for this room:",
     "Logged in as:": "Logged in as:",
-    "Login as guest": "Login as guest",
     "Logout": "Logout",
     "Low priority": "Low priority",
     "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s made future room history visible to all room members, from the point they are invited.",
@@ -228,7 +226,6 @@
     "Mobile phone number": "Mobile phone number",
     "Mobile phone number (optional)": "Mobile phone number (optional)",
     "Moderator": "Moderator",
-    "Must be viewing a room": "Must be viewing a room",
     "Mute": "Mute",
     "Name": "Name",
     "Never send encrypted messages to unverified devices from this device": "Never send encrypted messages to unverified devices from this device",
@@ -816,7 +813,6 @@
     "Unable to fetch notification target list": "Unable to fetch notification target list",
     "Set Password": "Set Password",
     "Enable audible notifications in web client": "Enable audible notifications in web client",
-    "Permalink": "Permalink",
     "Off": "Off",
     "Riot does not know how to join a room on this network": "Riot does not know how to join a room on this network",
     "Mentions only": "Mentions only",

src/i18n/strings/eo.json

@@ -90,10 +90,8 @@
     "You are not in this room.": "Vi ne estas en tiu ĉi ĉambro.",
     "You do not have permission to do that in this room.": "Vi ne havas permeson fari tion en tiu ĉi ĉambro.",
     "Missing room_id in request": "En peto mankas «room_id»",
-    "Must be viewing a room": "Necesas vidi ĉambron",
     "Room %(roomId)s not visible": "Ĉambro %(roomId)s ne videblas",
     "Missing user_id in request": "En peto mankas «user_id»",
-    "Failed to lookup current room": "Malsukcesis trovi nunan ĉambron",
     "Usage": "Uzo",
     "/ddg is not a command": "/ddg ne estas komando",
     "To use it, just wait for autocomplete results to load and tab through them.": "Por uzi ĝin, atendu aperon de sugestaj rezultoj, kaj tabu tra ili.",
@@ -165,7 +163,6 @@
     "Authentication check failed: incorrect password?": "Aŭtentiga kontrolo malsukcesis: ĉu pro malĝusta pasvorto?",
     "Failed to join room": "Malsukcesis aliĝi al ĉambro",
     "Message Pinning": "Fikso de mesaĝoj",
-    "Tag Panel": "Etikeda panelo",
     "Disable Emoji suggestions while typing": "Malŝalti mienetajn sugestojn dum tajpado",
     "Use compact timeline layout": "Uzi densan okazordan aranĝon",
     "Hide removed messages": "Kaŝi forigitajn mesaĝojn",
@@ -746,8 +743,6 @@
     "Error whilst fetching joined communities": "Okazis eraro dum venigado de viaj komunumoj",
     "Create a new community": "Krei novan komunumon",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Kreu komunumon por kunigi uzantojn kaj ĉambrojn! Fari propran hejmpaĝon por montri vian spacon en la universo de Matrix.",
-    "Join an existing community": "Aliĝi al jama komunumo",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "Por aliĝi al jama komunumo, vi devos scii ĝian komunuman identigilon; ĝi aspektas proksimume tiel ĉi: <i>+ekzemplo:matrix.org</i>.",
     "You have no visible notifications": "Neniuj videblaj sciigoj",
     "Scroll to bottom of page": "Rulumi al susbo de la paĝo",
     "Message not sent due to unknown devices being present": "Mesaĝoj ne sendiĝis pro ĉeesto de nekonataj aparatoj",
@@ -862,7 +857,6 @@
     "Error: Problem communicating with the given homeserver.": "Eraro: Estas problemo en komunikado kun la hejmservilo.",
     "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "Hejmservilo ne alkonekteblas per HTTP kun HTTPS URL en via adresbreto. Aŭ uzu HTTPS aŭ <a>ŝaltu malsekurajn skriptojn</a>.",
     "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Ne eblas konekti al hejmservilo – bonvolu kontroli vian konekton, certigi ke <a>la SSL-atestilo de via hejmservilo</a> estas fidata, kaj ke neniu foliumila kromprogramo baras petojn.",
-    "Login as guest": "Saluti kiel gasto",
     "Sign in to get started": "Komencu per saluto",
     "Failed to fetch avatar URL": "Malsukcesis venigi adreson de profilbildo",
     "Set a display name:": "Agordi vidigan nomon:",
@@ -1077,7 +1071,6 @@
     "Unable to fetch notification target list": "Malsukcesis akiri la liston de celoj por sciigoj",
     "Set Password": "Agordi pasvorton",
     "Enable audible notifications in web client": "Ŝalti aŭdeblajn sciigojn en la retkliento",
-    "Permalink": "Konstanta ligilo",
     "Off": "For",
     "Riot does not know how to join a room on this network": "Riot ne scias aliĝi al ĉambroj en tiu ĉi reto",
     "Mentions only": "Nur mencioj",

src/i18n/strings/es.json

@@ -108,7 +108,6 @@
     "Failed to kick": "Falló al expulsar",
     "Failed to leave room": "Falló al dejar la sala",
     "Failed to load timeline position": "Falló al cargar el historico",
-    "Failed to lookup current room": "Falló al buscar la actual sala",
     "Failed to mute user": "Falló al silenciar el usuario",
     "Failed to reject invite": "Falló al rechazar invitación",
     "Failed to reject invitation": "Falló al rechazar la invitación",
@@ -166,7 +165,6 @@
     "%(targetName)s left the room.": "%(targetName)s ha dejado la sala.",
     "Local addresses for this room:": "Direcciones locales para esta sala:",
     "Logged in as:": "Sesión iniciada como:",
-    "Login as guest": "Iniciar sesión como invitado",
     "Logout": "Cerrar Sesión",
     "Low priority": "Baja prioridad",
     "Accept": "Aceptar",
@@ -314,7 +312,6 @@
     "Mobile phone number": "Número de teléfono móvil",
     "Mobile phone number (optional)": "Número de teléfono móvil (opcional)",
     "Moderator": "Moderador",
-    "Must be viewing a room": "Debe estar viendo una sala",
     "Mute": "Silenciar",
     "%(serverName)s Matrix ID": "%(serverName)s ID de Matrix",
     "Name": "Nombre",
@@ -717,7 +714,6 @@
     "Riot does not know how to join a room on this network": "Riot no sabe cómo unirse a una sala en esta red",
     "Set Password": "Establecer contraseña",
     "Enable audible notifications in web client": "Habilitar notificaciones audibles en el cliente web",
-    "Permalink": "Enlace permanente",
     "Off": "Apagado",
     "#example": "#ejemplo",
     "Mentions only": "Sólo menciones",

src/i18n/strings/eu.json

@@ -140,7 +140,6 @@
     "Identity Server is": "Identitate zerbitzaria:",
     "Mobile phone number (optional)": "Mugikor zenbakia (aukerazkoa)",
     "Moderator": "Moderatzailea",
-    "Must be viewing a room": "Gela bat ikusten egon behar da",
     "Account": "Kontua",
     "Access Token:": "Sarbide tokena:",
     "Active call (%(roomName)s)": "Dei aktiboa (%(roomName)s)",
@@ -243,7 +242,6 @@
     "Failed to kick": "Huts egin du kanporatzean",
     "Failed to leave room": "Huts egin du gelatik ateratzean",
     "Failed to load timeline position": "Huts egin du denbora-lerroko puntua kargatzean",
-    "Failed to lookup current room": "Huts egin du uneko gela bilatzean",
     "Failed to mute user": "Huts egin du erabiltzailea mututzean",
     "Failed to reject invite": "Huts egin du gonbidapena baztertzean",
     "Failed to reject invitation": "Huts egin du gonbidapena baztertzean",
@@ -298,7 +296,6 @@
     "Level:": "Maila:",
     "Local addresses for this room:": "Gela honen tokiko helbideak:",
     "Logged in as:": "Saioa hasteko erabiltzailea:",
-    "Login as guest": "Hasi saioa bisitari gisa",
     "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s erabiltzaileak etorkizuneko gelaren historiala ikusgai jarri du gelako kide guztientzat, gonbidapena egiten zaienetik.",
     "%(senderName)s made future room history visible to all room members, from the point they joined.": "%(senderName)s erabiltzaileak etorkizuneko gelaren historiala ikusgai jarri du gelako kide guztientzat, elkartzen direnetik.",
     "%(senderName)s made future room history visible to all room members.": "%(senderName)s erabiltzaileak etorkizuneko gelaren historiala ikusgai jarri du gelako kide guztientzat.",
@@ -587,7 +584,7 @@
     "Please enter the code it contains:": "Sartu dakarren kodea:",
     "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "Ez baduzu e-mail helbide bat zehazten, ezin izango duzu zure pasahitza berrezarri. Ziur zaude?",
     "You are registering with %(SelectedTeamName)s": "%(SelectedTeamName)s erabiliz erregistratzen ari zara",
-    "Default server": "Zerbitzari lenetetsia",
+    "Default server": "Zerbitzari lehenetsia",
     "Custom server": "Zerbitzari aukeratua",
     "Home server URL": "Hasiera zerbitzariaren URLa",
     "Identity server URL": "Identitate zerbitzariaren URLa",
@@ -723,7 +720,6 @@
     "%(names)s and %(count)s others are typing|one": "%(names)s eta beste bat idazten ari dira",
     "Send": "Bidali",
     "Message Pinning": "Mezuak finkatzea",
-    "Tag Panel": "Etiketen panela",
     "Hide avatar changes": "Ezkutatu abatar aldaketak",
     "Hide display name changes": "Ezkutatu pantaila izenen aldaketak",
     "Disable big emoji in chat": "Desgaitu emoji handiak txatean",
@@ -808,7 +804,6 @@
     "Old cryptography data detected": "Kriptografia datu zaharrak atzeman dira",
     "Your Communities": "Zure komunitateak",
     "Create a new community": "Sortu komunitate berria",
-    "Join an existing community": "Elkartu badagoen komunitate batetara",
     "Warning": "Abisua",
     "Please note you are logging into the %(hs)s server, not matrix.org.": "Kontuan izan %(hs)s zerbitzarira elkartu zarela, ez matrix.org.",
     "Sign in to get started": "Hasi saioa hasteko",
@@ -845,8 +840,8 @@
     "were unbanned %(count)s times|one": "debekua kendu zaie",
     "was unbanned %(count)s times|other": "%(count)s aldiz kendu zaio debekua",
     "was unbanned %(count)s times|one": "debekua kendu zaio",
-    "were kicked %(count)s times|other": "%(count)s kanporatu zaie",
-    "were kicked %(count)s times|one": "kanporatu zaie",
+    "were kicked %(count)s times|other": "%(count)s aldiz kanporatu zaie",
+    "were kicked %(count)s times|one": "(r) kanporatu zaie",
     "was kicked %(count)s times|other": "%(count)s aldiz kanporatu zaio",
     "was kicked %(count)s times|one": "kanporatu zaio",
     "%(severalUsers)schanged their name %(count)s times|other": "%(severalUsers)s erabiltzaileek bere izena aldatu dute %(count)s aldiz",
@@ -927,7 +922,6 @@
     "Custom of %(powerLevel)s": "%(powerLevel)s pertsonalizatua",
     "Data from an older version of Riot has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.": "Riot bertsio zahar batek datuak antzeman dira. Honek bertsio zaharrean  muturretik muturrerako zifratzea ez funtzionatzea eragingo du. Azkenaldian bertsio zaharrean bidali edo jasotako zifratutako mezuak agian ezin izango dira deszifratu bertsio honetan. Honek ere Bertsio honekin egindako mezu trukeak huts egitea ekar dezake. Arazoak badituzu, amaitu saioa eta hasi berriro saioa. Mezuen historiala gordetzeko, esportatu eta berriro inportatu zure gakoak.",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Sortu komunitate bat erabiltzaileak eta gelak biltzeko! Sortu zure hasiera orria eta markatu zure espazioa Matrix unibertsoan.",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "Bdagoen komunitate batera elkartzeko, komunitatearen identifikatzailea jakin behar duzu; honen antza izango du <i>+adibidea:matrix.org</i>.",
     "There's no one else here! Would you like to <inviteText>invite others</inviteText> or <nowarnText>stop warning about the empty room</nowarnText>?": "Ez dago beste inor hemen! <inviteText>Beste batzuk gonbidatu</inviteText> nahi dituzu edo <nowarnText>gela hutsik dagoela abisatzeari utzi</nowarnText>?",
     "Light theme": "Itxura argia",
     "Dark theme": "Itxura iluna",
@@ -938,7 +932,6 @@
     "%(count)s of your messages have not been sent.|one": "Zure mezua ez da bidali.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|other": "<resendText>Birbidali guztiak</resendText> edo <cancelText>baztertu guztiak</cancelText> orain. Mezuak banaka birbidali edo baztertu ditzakezu ere.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|one": "<resendText>Birbidali mezua</resendText> edo <cancelText>baztertu mezua</cancelText> orain.",
-    "Message Replies": "Mezuei erantzunak",
     "Send an encrypted reply…": "Bidali zifratutako erantzun bat…",
     "Send a reply (unencrypted)…": "Bidali erantzun bat (zifratu gabea)…",
     "Send an encrypted message…": "Bidali zifratutako mezu bat…",
@@ -1127,7 +1120,6 @@
     "Unable to fetch notification target list": "Ezin izan da jakinarazpen helburuen zerrenda eskuratu",
     "Set Password": "Ezarri pasahitza",
     "Enable audible notifications in web client": "Gaitu jakinarazpen entzungarriak web bezeroan",
-    "Permalink": "Esteka iraunkorra",
     "Off": "Ez",
     "Riot does not know how to join a room on this network": "Riotek ez daki nola elkartu gela batetara sare honetan",
     "Mentions only": "Aipamenak besterik ez",
@@ -1170,20 +1162,13 @@
     "Enable widget screenshots on supported widgets": "Gaitu trepeten pantaila-argazkiak onartzen duten trepetetan",
     "Send analytics data": "Bidali datu analitikoak",
     "Muted Users": "Mutututako erabiltzaileak",
-    "Help improve Riot by sending usage data? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Riot hobetzen lagundu nahi erabilera datuak bidaliz? Honek cookie bat erabiliko du. (Ikusi gure <PolicyLink>Cookie eta pribatutasun politikak</PolicyLink>).",
-    "Help improve Riot by sending usage data? This will use a cookie.": "Riot hobetzen lagundu nahi erabilera datuak bidaliz? Honek cookie bat erabiliko du.",
-    "Yes please": "Bai mesedez",
     "Warning: This widget might use cookies.": "Abisua: Trepeta honek cookie-ak erabili litzake.",
     "Terms and Conditions": "Termino eta baldintzak",
     "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "%(homeserverDomain)s hasiera-zerbitzaria erabiltzen jarraitzeko gure termino eta baldintzak irakurri eta onartu behar dituzu.",
     "Review terms and conditions": "Irakurri termino eta baldintzak",
     "Failed to indicate account erasure": "Ezin izan da kontuaren ezabaketa jakinarazi",
-    "This will make your account permanently unusable. You will not be able to log in, and no one will be able to re-register the same user ID. <b>This action is irreversible.</b>": "Honek zure kontua betiko erabilgaitz bihurtuko du. Ezin izango duzu saioa hasi, eta beste inork ezin izango du erabiltzaile ID bera erabili. <b>Ez dago ekintza hau desegiterik.</b>",
-    "Deactivating your account <b>does not by default erase messages you have sent.</b> If you would like to erase your messages, please tick the box below.": "Zure kontua desaktibatzean <b>ez dira lehenetsita zuk bidalitako mezuak ezabatuko.</b> Zuk bidalitako mezuak ezabatu nahi badituzu, markatu beheko kutxa.",
-    "Message visibility in Matrix is similar to email. Erasing your messages means that messages have you sent will not be shared with any new or unregistered users, but registered users who already had access to these messages will still have access to their copy.": "Matrix-eko mezuen ikusgaitasuna, e-mail mezuen antzekoa da. Zure mezuak ezabatzeak esan nahi du bidali dituzun mezuak ez direla erabiltzaile berriekin partekatuko, baina aurretik zure mezuak jaso dituzten erabiltzaile erregistratuek bere kopia izango dute.",
     "To continue, please enter your password:": "Jarraitzeko, sartu zure pasahitza:",
     "password": "pasahitza",
-    "Please erase all messages I have sent when my account is deactivated. (Warning: this will cause future users to see an incomplete view of conversations, which is a bad experience).": "Ezabatu bidali ditudan mezu guztiak nire kontua desaktibatzean. (Abisua: Etorkizuneko erabiltzaileek elkarrizketa partzialak ikusiko dituzte, esperientzia kaskarra sortuz).",
     "e.g. %(exampleValue)s": "adib. %(exampleValue)s",
     "Reload widget": "Birkargatu trepeta",
     "To notify everyone in the room, you must be a": "Gelan dauden guztiei jakinarazteko",
@@ -1195,5 +1180,20 @@
     "Message visibility in Matrix is similar to email. Our forgetting your messages means that messages you have sent will not be shared with any new or unregistered users, but registered users who already have access to these messages will still have access to their copy.": "Matrix-eko mezuen ikusgaitasuna e-mail sistemaren antekoa da. Guk zure mezuak ahaztean ez dizkiogu erabiltzaile berriei edo izena eman ez dutenei erakutsiko, baina jada zure mezuak jaso dituzten erregistratutako erabiltzaileen bere kopia izaten jarraituko dute.",
     "Please forget all messages I have sent when my account is deactivated (<b>Warning:</b> this will cause future users to see an incomplete view of conversations)": "Ahaztu bidali ditudan mezu guztiak kontua desaktibatzean (Abisua: Honekin etorkizuneko erabiltzaileek elkarrizketaren bertsio ez oso bat ikusiko dute)",
     "Can't leave Server Notices room": "Ezin zara Server Notices gelatik atera",
-    "This room is used for important messages from the Homeserver, so you cannot leave it.": "Gela hau mezu hasiera zerbitzariaren garrantzitsuak bidaltzeko erabiltzen da, eta ezin zara atera."
+    "This room is used for important messages from the Homeserver, so you cannot leave it.": "Gela hau mezu hasiera zerbitzariaren garrantzitsuak bidaltzeko erabiltzen da, eta ezin zara atera.",
+    "Try the app first": "Probatu aplikazioa aurretik",
+    "Encrypting": "Zifratzen",
+    "Encrypted, not sent": "Zifratua, bidali gabe",
+    "Share Link to User": "Partekatu esteka erabiltzailearekin",
+    "Share room": "Partekatu gela",
+    "Share Room": "Partekatu gela",
+    "Link to most recent message": "Esteka azken mezura",
+    "Share User": "Partekatu erabiltzailea",
+    "Share Community": "Partekatu komunitatea",
+    "Share Room Message": "Partekatu gelako mezua",
+    "Link to selected message": "Esteka hautatutako mezura",
+    "COPY": "KOPIATU",
+    "Share Message": "Partekatu mezua",
+    "No Audio Outputs detected": "Ez da audio irteerarik antzeman",
+    "Audio Output": "Audio irteera"
 }

src/i18n/strings/fa.json

@@ -124,7 +124,6 @@
     "Set Password": "پسوردتان را انتخاب کنید",
     "An error occurred whilst saving your email notification preferences.": "خطایی در حین ذخیره‌ی ترجیجات شما درباره‌ی رایانامه رخ داد.",
     "Enable audible notifications in web client": "آگاه‌سازی صدادار را در کارگزار وب فعال کن",
-    "Permalink": "پایاپیوند",
     "Off": "خاموش",
     "Riot does not know how to join a room on this network": "رایوت از چگونگی ورود به یک گپ در این شبکه اطلاعی ندارد",
     "Mentions only": "فقط نام‌بردن‌ها",

src/i18n/strings/fi.json

@@ -198,7 +198,6 @@
     "Level:": "Taso:",
     "Local addresses for this room:": "Tämän huoneen paikalliset osoitteet:",
     "Logged in as:": "Kirjautunut käyttäjänä:",
-    "Login as guest": "Kirjaudu vieraana",
     "Logout": "Kirjaudu ulos",
     "Low priority": "Alhainen prioriteetti",
     "Manage Integrations": "Hallinoi integraatioita",
@@ -451,7 +450,6 @@
     "End-to-end encryption is in beta and may not be reliable": "Päästä päähän salaus on vielä testausvaiheessa ja saattaa toimia epävarmasti",
     "Error: Problem communicating with the given homeserver.": "Virhe: Ongelma yhteydenpidossa kotipalvelimeen.",
     "Existing Call": "Käynnissä oleva puhelu",
-    "Failed to lookup current room": "Nykyisen huoneen löytäminen epäonnistui",
     "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.": "Liity käyttäen <voiceText>ääntä</voiceText> tai <videoText>videota</videoText>.",
     "%(targetName)s joined the room.": "%(targetName)s liittyi huoneeseen.",
     "%(senderName)s kicked %(targetName)s.": "%(senderName)s poisti käyttäjän %(targetName)s huoneesta.",
@@ -459,7 +457,6 @@
     "Publish this room to the public in %(domain)s's room directory?": "Julkaise tämä huone domainin %(domain)s huoneluettelossa?",
     "Missing room_id in request": "room_id puuttuu kyselystä",
     "Missing user_id in request": "user_id puuttuu kyselystä",
-    "Must be viewing a room": "Pakko olla huoneessa",
     "Never send encrypted messages to unverified devices from this device": "Älä koskaa lähetä salattuja viestejä varmentamattomiin laitteisiin tältä laitteelta",
     "Never send encrypted messages to unverified devices in this room from this device": "Älä koskaa lähetä salattuja viestejä varmentamattomiin laitteisiin tässä huoneessa tältä laitteelta",
     "New address (e.g. #foo:%(localDomain)s)": "Uusi osoite (esim. #foo:%(localDomain)s)",
@@ -790,7 +787,6 @@
     "You're not currently a member of any communities.": "Et ole minkään yhteisön jäsen tällä hetkellä.",
     "Error whilst fetching joined communities": "Virhe ladatessa listaa yhteistöistä joihin olet liittynyt",
     "Create a new community": "Luo uusi yhteisö",
-    "Join an existing community": "Liity olemassaolevaan yhteisöön",
     "Light theme": "Vaalea ulkoasu",
     "Dark theme": "Tumma ulkoasu",
     "Status.im theme": "Status.im ulkoasu",
@@ -824,7 +820,6 @@
     "%(widgetName)s widget added by %(senderName)s": "%(widgetName)s pienoisohjelman lisännyt %(senderName)s",
     "%(widgetName)s widget removed by %(senderName)s": "%(widgetName)s pienoisohjelman poistanut %(senderName)s",
     "Send": "Lähetä",
-    "Tag Panel": "Tagit",
     "Delete %(count)s devices|other": "Poista %(count)s laitetta",
     "Delete %(count)s devices|one": "Poista laite",
     "Select devices": "Valitse laitteet",
@@ -1050,7 +1045,6 @@
     "Set Password": "Aseta salasana",
     "An error occurred whilst saving your email notification preferences.": "Sähköposti-ilmoitusasetuksia tallettaessa tapahtui virhe.",
     "Enable audible notifications in web client": "Ota käyttöön äänelliset ilmoitukset",
-    "Permalink": "Pysyvä linkki",
     "remove %(name)s from the directory.": "poista %(name)s hakemistosta.",
     "Off": "Pois päältä",
     "Riot does not know how to join a room on this network": "Riot ei tiedä miten liittya huoneeseen tässä verkossa",

src/i18n/strings/fr.json

@@ -105,7 +105,6 @@
     "Failed to kick": "Échec de l'exclusion",
     "Failed to leave room": "Échec du départ du salon",
     "Failed to load timeline position": "Échec du chargement de la position dans l'historique",
-    "Failed to lookup current room": "Échec de la recherche du salon actuel",
     "Failed to mute user": "Échec de la mise en sourdine de l'utilisateur",
     "Failed to reject invite": "Échec du rejet de l'invitation",
     "Failed to reject invitation": "Échec du rejet de l'invitation",
@@ -166,7 +165,6 @@
     "%(targetName)s left the room.": "%(targetName)s a quitté le salon.",
     "Local addresses for this room:": "Adresses locales pour ce salon :",
     "Logged in as:": "Identifié en tant que :",
-    "Login as guest": "Se connecter en tant que visiteur",
     "Logout": "Se déconnecter",
     "Low priority": "Priorité basse",
     "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s a rendu l'historique visible à tous les membres du salon, depuis le moment où ils ont été invités.",
@@ -183,7 +181,6 @@
     "Missing user_id in request": "Absence du user_id dans la requête",
     "Mobile phone number": "Numéro de téléphone mobile",
     "Moderator": "Modérateur",
-    "Must be viewing a room": "Doit être en train de visualiser un salon",
     "%(serverName)s Matrix ID": "%(serverName)s identifiant Matrix",
     "Name": "Nom",
     "Never send encrypted messages to unverified devices from this device": "Ne jamais envoyer de message chiffré aux appareils non vérifiés depuis cet appareil",
@@ -864,8 +861,6 @@
     "Error whilst fetching joined communities": "Erreur lors de l'obtention des communautés rejointes",
     "Create a new community": "Créer une nouvelle communauté",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Créez une communauté pour grouper des utilisateurs et des salons ! Construisez une page d'accueil personnalisée pour distinguer votre espace dans l'univers Matrix.",
-    "Join an existing community": "Rejoindre une communauté existante",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "Pour rejoindre une communauté existante, vous devrez connaître son identifiant. Cela ressemblera à <i>+exemple:matrix.org</i>.",
     "Disable Emoji suggestions while typing": "Désactiver les suggestions d'emojis lors de la saisie",
     "Disable big emoji in chat": "Désactiver les gros emojis dans les discussions",
     "Mirror local video feed": "Refléter le flux vidéo local",
@@ -919,7 +914,6 @@
     "Flair will appear if enabled in room settings": "Les badges n'apparaîtront que s'ils sont activés dans les paramètres de chaque salon",
     "Flair will not appear": "Les badges n'apparaîtront pas",
     "Display your community flair in rooms configured to show it.": "Sélectionnez les badges dans les paramètres de chaque salon pour les afficher.",
-    "Tag Panel": "Panneau des étiquettes",
     "Addresses": "Adresses",
     "expand": "développer",
     "collapse": "réduire",
@@ -938,7 +932,6 @@
     "%(count)s of your messages have not been sent.|one": "Votre message n'a pas été envoyé.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|other": "<resendText>Tout renvoyer</resendText> ou <cancelText>tout annuler</cancelText> maintenant. Vous pouvez aussi choisir des messages individuels à renvoyer ou annuler.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|one": "<resendText>Renvoyer le message</resendText> ou <cancelText>annuler le message</cancelText> maintenant.",
-    "Message Replies": "Réponses",
     "Send an encrypted reply…": "Envoyer une réponse chiffrée…",
     "Send a reply (unencrypted)…": "Envoyer une réponse (non chiffrée)…",
     "Send an encrypted message…": "Envoyer un message chiffré…",
@@ -1121,7 +1114,6 @@
     "Unable to fetch notification target list": "Impossible de récupérer la liste des appareils recevant les notifications",
     "Set Password": "Définir un mot de passe",
     "Enable audible notifications in web client": "Activer les notifications sonores pour le client web",
-    "Permalink": "Permalien",
     "Off": "Désactivé",
     "Riot does not know how to join a room on this network": "Riot ne peut pas joindre un salon sur ce réseau",
     "Mentions only": "Seulement les mentions",
@@ -1169,25 +1161,17 @@
     "Collapse Reply Thread": "Dévoiler le fil de réponse",
     "Enable widget screenshots on supported widgets": "Activer les captures d'écran des widgets pris en charge",
     "Send analytics data": "Envoyer les données analytiques",
-    "Help improve Riot by sending usage data? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Aider Riot à s'améliorer en envoyant des données d'utilisation ? Ceci utilisera un cookie. (Voir nos <PolicyLink>politiques de cookie et de confidentialité</PolicyLink>).",
-    "Help improve Riot by sending usage data? This will use a cookie.": "Aider Riot à s'améliorer en envoyant des données d'utilisation ? Ceci utilisera un cookie.",
-    "Yes please": "Oui, s'il vous plaît",
     "Muted Users": "Utilisateurs ignorés",
     "Warning: This widget might use cookies.": "Avertissement : ce widget utilise peut-être des cookies.",
     "Terms and Conditions": "Conditions générales",
     "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "Pour continuer à utiliser le serveur d'accueil %(homeserverDomain)s, vous devez lire et accepter nos conditions générales.",
     "Review terms and conditions": "Voir les conditions générales",
     "Failed to indicate account erasure": "Échec de notification de la suppression du compte",
-    "This will make your account permanently unusable. You will not be able to log in, and no one will be able to re-register the same user ID. <b>This action is irreversible.</b>": "Cela rendra votre compte inutilisable de façon permanente. Vous ne pourrez plus vous connecter et ne pourrez plus vous enregistrer avec le même identifiant d'utilisateur. <b>Cette action est irréversible.</b>",
-    "Deactivating your account <b>does not by default erase messages you have sent.</b> If you would like to erase your messages, please tick the box below.": "Désactiver votre compte <b>ne supprime pas les messages que vous avez envoyés par défaut.</b> Si vous souhaitez supprimer vos messages, cochez la case ci-dessous.",
-    "Message visibility in Matrix is similar to email. Erasing your messages means that messages have you sent will not be shared with any new or unregistered users, but registered users who already had access to these messages will still have access to their copy.": "La visibilité des messages dans Matrix est la même que celle des e-mails. Supprimer vos messages signifie que les messages que vous avez envoyés ne seront pas partagés avec de nouveaux utilisateurs ou les utilisateurs non enregistrés, mais les utilisateurs enregistrés qui ont déjà eu accès à vos messages continueront d'en avoir une copie.",
     "To continue, please enter your password:": "Pour continuer, veuillez renseigner votre mot de passe :",
     "password": "mot de passe",
-    "Please erase all messages I have sent when my account is deactivated. (Warning: this will cause future users to see an incomplete view of conversations, which is a bad experience).": "Veuillez supprimer tous les messages que j'ai envoyé quand mon compte est désactivé. (Attention : les futurs utilisateurs verront alors des conversations incomplètes, ce qui est une mauvaise expérience).",
     "This will make your account permanently unusable. You will not be able to log in, and no one will be able to re-register the same user ID. This will cause your account to leave all rooms it is participating in, and it will remove your account details from your identity server. <b>This action is irreversible.</b>": "Votre compte sera inutilisable de façon permanente. Vous ne pourrez plus vous reconnecter et personne ne pourra se réenregistrer avec le même identifiant d'utilisateur. Votre compte quittera tous les salons auxquels il participe et tous ses détails seront supprimés du serveur d'identité. <b>Cette action est irréversible.</b>",
     "Deactivating your account <b>does not by default cause us to forget messages you have sent.</b> If you would like us to forget your messages, please tick the box below.": "La désactivation du compte <b>ne nous fait pas oublier les messages que vous avez envoyés par défaut.</b> Si vous souhaitez que nous les oubliions, cochez la case ci-dessous.",
     "e.g. %(exampleValue)s": "par ex. %(exampleValue)s",
-    "Help improve Riot by sending <UsageDataLink>usage data</UsageDataLink>? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Aider Riot à s'améliorer en envoyant <UsageDataLink>des données d'utilisation</UsageDataLink> ? Cela utilisera un cookie. (Voir nos <PolicyLink>politiques de cookie et de confidentialité</PolicyLink>).",
     "Message visibility in Matrix is similar to email. Our forgetting your messages means that messages you have sent will not be shared with any new or unregistered users, but registered users who already have access to these messages will still have access to their copy.": "La visibilité des messages dans Matrix est la même que celle des e-mails. Quand nous oublions vos messages, cela signifie que les messages que vous avez envoyés ne seront partagés avec aucun nouvel utilisateur ou avec les utilisateurs non enregistrés, mais les utilisateurs enregistrés qui ont déjà eu accès à ces messages en conserveront leur propre copie.",
     "Please forget all messages I have sent when my account is deactivated (<b>Warning:</b> this will cause future users to see an incomplete view of conversations)": "Veuillez oublier tous les messages que j'ai envoyé quand mon compte sera désactivé (<b>Avertissement :</b> les futurs utilisateurs verront des conversations incomplètes)",
     "Reload widget": "Recharger le widget",
@@ -1196,5 +1180,20 @@
     "Yes, I want to help!": "Oui, je veux aider !",
     "Can't leave Server Notices room": "Impossible de quitter le salon des Annonces du serveur",
     "This room is used for important messages from the Homeserver, so you cannot leave it.": "Ce salon est utilisé pour les messages importants du serveur d'accueil, donc vous ne pouvez pas en partir.",
-    "To notify everyone in the room, you must be a": "Pour notifier tout le monde dans le salon, vous devez être un(e)"
+    "To notify everyone in the room, you must be a": "Pour notifier tout le monde dans le salon, vous devez être un(e)",
+    "Try the app first": "Essayer d'abord l'application",
+    "Encrypting": "Chiffrement en cours",
+    "Encrypted, not sent": "Chiffré, pas envoyé",
+    "No Audio Outputs detected": "Aucune sortie audio détectée",
+    "Audio Output": "Sortie audio",
+    "Share Link to User": "Partager le lien vers l'utilisateur",
+    "Share room": "Partager le salon",
+    "Share Room": "Partager le salon",
+    "Link to most recent message": "Lien vers le message le plus récent",
+    "Share User": "Partager l'utilisateur",
+    "Share Community": "Partager la communauté",
+    "Share Room Message": "Partager le message du salon",
+    "Link to selected message": "Lien vers le message sélectionné",
+    "COPY": "COPIER",
+    "Share Message": "Partager le message"
 }

src/i18n/strings/he.json

@@ -221,7 +221,6 @@
     "Unable to fetch notification target list": "לא ניתן לאחזר רשימת יעדי התראה",
     "Set Password": "הגדר סיסמא",
     "Enable audible notifications in web client": "אפשר התראות קוליות בדפדפן",
-    "Permalink": "קישור קבוע",
     "Off": "סגור",
     "Riot does not know how to join a room on this network": "Riot אינו יודע כיצד להצטרף לחדר ברשת זו",
     "Mentions only": "מאזכר בלבד",

src/i18n/strings/hu.json

@@ -168,7 +168,6 @@
     "Failed to kick": "Kirúgás nem sikerült",
     "Failed to leave room": "A szobát nem sikerült elhagyni",
     "Failed to load timeline position": "Az idővonal pozíciót nem sikerült betölteni",
-    "Failed to lookup current room": "Az aktuális szoba felkeresése sikertelen",
     "Failed to mute user": "A felhasználót nem sikerült hallgatásra bírni",
     "Failed to reject invite": "A meghívót nem sikerült elutasítani",
     "Failed to reject invitation": "A meghívót nem sikerült elutasítani",
@@ -238,7 +237,6 @@
     "Level:": "Szint:",
     "Local addresses for this room:": "A szoba helyi címe:",
     "Logged in as:": "Bejelentkezve mint:",
-    "Login as guest": "Belépés vendégként",
     "Logout": "Kilép",
     "Low priority": "Alacsony prioritás",
     "%(senderName)s made future room history visible to all room members, from the point they are invited.": "%(senderName)s elérhetővé tette a szoba új üzeneteit nekik minden résztvevő a szobában, amióta meg van hívva.",
@@ -256,7 +254,6 @@
     "Mobile phone number": "Mobil telefonszám",
     "Mobile phone number (optional)": "Mobill telefonszám (opcionális)",
     "Moderator": "Moderátor",
-    "Must be viewing a room": "Meg kell nézni a szobát",
     "%(serverName)s Matrix ID": "%(serverName)s Matrix azonosítóm",
     "Name": "Név",
     "Never send encrypted messages to unverified devices from this device": "Soha ne küldj titkosított üzenetet ellenőrizetlen eszközre erről az eszközről",
@@ -783,8 +780,6 @@
     "This Home server does not support communities": "Ez a saját szerver nem támogatja a közösségeket",
     "Error whilst fetching joined communities": "Hiba a csatlakozott közösségek betöltésénél",
     "Create a new community": "Új közösség létrehozása",
-    "Join an existing community": "Meglévő közösséghez csatlakozás",
-    "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "Ahhoz hogy csatlakozni tudj egy meglévő közösséghez ismerned kell a közösségi azonosítót ami például így nézhet ki: <i>+pelda:matrix.org</i>.",
     "example": "példa",
     "Failed to load %(groupId)s": "Nem sikerült betölteni: %(groupId)s",
     "Your Communities": "Közösségeid",
@@ -919,7 +914,6 @@
     "Something went wrong when trying to get your communities.": "Valami nem sikerült a közösségeid elérésénél.",
     "Display your community flair in rooms configured to show it.": "Közösségi jelvényeid megjelenítése azokban a szobákban ahol ez engedélyezett.",
     "This homeserver doesn't offer any login flows which are supported by this client.": "Ez a saját szerver egyetlen bejelentkezési metódust sem támogat amit ez a kliens ismer.",
-    "Tag Panel": "Címke panel",
     "Addresses": "Címek",
     "collapse": "becsuk",
     "expand": "kinyit",
@@ -938,7 +932,6 @@
     "%(count)s of your messages have not been sent.|one": "Az üzeneted nem lett elküldve.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|other": "<resendText>Újraküldöd mind</resendText> vagy <cancelText>elveted mind</cancelText>. Az üzeneteket egyenként is elküldheted vagy elvetheted.",
     "%(count)s <resendText>Resend all</resendText> or <cancelText>cancel all</cancelText> now. You can also select individual messages to resend or cancel.|one": "<resendText>Üzenet újraküldése</resendText> vagy <cancelText>üzenet elvetése</cancelText> most.",
-    "Message Replies": "Üzenet válaszok",
     "Send an encrypted reply…": "Titkosított válasz küldése…",
     "Send a reply (unencrypted)…": "Válasz küldése (titkosítatlanul)…",
     "Send an encrypted message…": "Titkosított üzenet küldése…",
@@ -1126,7 +1119,6 @@
     "Unable to fetch notification target list": "Nem sikerült letölteni az értesítési célok listáját",
     "Set Password": "Jelszó beállítása",
     "Enable audible notifications in web client": "Hangértesítések engedélyezése a webkliensben",
-    "Permalink": "Állandó hivatkozás",
     "Off": "Ki",
     "Riot does not know how to join a room on this network": "A Riot nem tud csatlakozni szobához ezen a hálózaton",
     "Mentions only": "Csak ha megemlítenek",
@@ -1169,32 +1161,39 @@
     "Collapse Reply Thread": "Beszélgetés szál becsukása",
     "Enable widget screenshots on supported widgets": "Ahol az a kisalkalmazásban támogatott ott képernyőkép készítés engedélyezése",
     "Send analytics data": "Analitikai adatok küldése",
-    "Help improve Riot by sending usage data? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Szeretnél segíteni a Riot javításában analitikai adatok elküldésével? Ez sütit (cookie) használ. (Nézd meg a <PolicyLink>sütikről és titoktartási irányelvekről</PolicyLink> szóló leírást).",
-    "Help improve Riot by sending usage data? This will use a cookie.": "Szeretnél segíteni a Riot javításában analitikai adatok elküldésével? Ez sütit (cookie) használ.",
-    "Yes please": "Igen, kérlek",
     "Muted Users": "Elnémított felhasználók",
     "Warning: This widget might use cookies.": "Figyelmeztetés: Ez a kisalkalmazás sütiket (cookies) használhat.",
     "Terms and Conditions": "Általános Szerződési Feltételek",
     "To continue using the %(homeserverDomain)s homeserver you must review and agree to our terms and conditions.": "A %(homeserverDomain)s szerver használatának folytatásához el kell olvasnod és el kell fogadnod az általános szerződési feltételeket.",
     "Review terms and conditions": "Általános Szerződési Feltételek elolvasása",
     "Failed to indicate account erasure": "A fiók törlésének jelzése sikertelen",
-    "This will make your account permanently unusable. You will not be able to log in, and no one will be able to re-register the same user ID. <b>This action is irreversible.</b>": "Ezzel a felhasználói fiókod végleg használhatatlanná válik. Nem tudsz bejelentkezni, és senki más sem fog tudni újra regisztrálni ugyanezzel az azonosítóval. <b>Ez a művelet visszafordíthatatlan.</b>",
-    "Deactivating your account <b>does not by default erase messages you have sent.</b> If you would like to erase your messages, please tick the box below.": "A felhasználói fiók felfüggesztése <b>alapértelmezetten nem töröli semelyik általad küldött üzenetet.</b> Ha az elküldött üzeneteidet törölni szeretnéd pipáld be a jelölőnégyzetet alul.",
-    "Message visibility in Matrix is similar to email. Erasing your messages means that messages have you sent will not be shared with any new or unregistered users, but registered users who already had access to these messages will still have access to their copy.": "Az üzenetek láthatósága a Matrixban olyan mint az e-mail. Az üzeneted törlése azt jelenti, hogy amit elküldtél már nem lesz megosztva új- vagy vendég felhasználóval, de azok a regisztrált felhasználók akik már látták az üzenetet továbbra is hozzáférnek a saját példányukhoz.",
     "To continue, please enter your password:": "Folytatáshoz add meg a jelszavad:",
     "password": "jelszó",
-    "Please erase all messages I have sent when my account is deactivated. (Warning: this will cause future users to see an incomplete view of conversations, which is a bad experience).": "Töröld az összes üzenetet amit küldtem amikor felfüggeszted a felhasználói fiókomat. (Figyelem: ezzel a jövőbeni felhasználók csak részleges beszélgetést láthatnak majd, ami rosszul eshet).",
     "This will make your account permanently unusable. You will not be able to log in, and no one will be able to re-register the same user ID. This will cause your account to leave all rooms it is participating in, and it will remove your account details from your identity server. <b>This action is irreversible.</b>": "Ez végleg használhatatlanná teszi a fiókodat. Ezután nem fogsz tudni bejelentkezni, és más sem tud majd ezzel az azonosítóval fiókot létrehozni. Minden szobából amibe beléptél ki fogsz lépni, és törölni fogja minden fiók adatod az \"identity\" szerverről. <b>Ez a művelet visszafordíthatatlan.</b>",
     "Deactivating your account <b>does not by default cause us to forget messages you have sent.</b> If you would like us to forget your messages, please tick the box below.": "A fiókod felfüggesztése <b>nem jelenti alapértelmezetten azt, hogy az általad küldött üzenetek elfelejtődnek.</b> Ha törölni szeretnéd az általad küldött üzeneteket, pipáld be a jelölőnégyzetet alul.",
     "Message visibility in Matrix is similar to email. Our forgetting your messages means that messages you have sent will not be shared with any new or unregistered users, but registered users who already have access to these messages will still have access to their copy.": "Az üzenetek láthatósága a Matrixban hasonlít az emailhez. Az általad küldött üzenet törlése azt jelenti, hogy nem osztjuk meg új-, vagy vendég felhasználóval de a már regisztrált felhasználók akik már hozzáfértek az üzenethez továbbra is elérik a saját másolatukat.",
     "Please forget all messages I have sent when my account is deactivated (<b>Warning:</b> this will cause future users to see an incomplete view of conversations)": "Kérlek töröld az összes általam küldött üzenetet amikor a fiókomat felfüggesztem (<b>Figyelem:</b> ez azt eredményezheti, hogy a jövőbeni felhasználók csak részleges beszélgetést látnak majd)",
     "e.g. %(exampleValue)s": "pl. %(exampleValue)s",
-    "Help improve Riot by sending <UsageDataLink>usage data</UsageDataLink>? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Segítesz jobbá tenni a Riotot <UsageDataLink>használati adat</UsageDataLink> küldésével? Ez sütit (cookie) fog használni. (Nézd meg az <PolicyLink>Általános Szerződési Feltételeket</PolicyLink>).",
     "Reload widget": "Kisalkalmazás újratöltése",
     "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. This will use a cookie (please see our <PolicyLink>Cookie Policy</PolicyLink>).": "Kérlek segíts javítani a Riot.im-et azzal, hogy <UsageDataLink>anonim felhasználási adatokat</UsageDataLink> küldesz. Ez szütit (cookie) fog használni (lásd a <PolicyLink>sütire vonatkozó szabályozásunkat</PolicyLink>).",
     "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. This will use a cookie.": "Kérlek segíts javítani a Riot.im-et azzal, hogy <UsageDataLink>anonim felhasználási adatokat</UsageDataLink> küldesz. Ez szütit (cookie) fog használni.",
     "Yes, I want to help!": "Igen, segítek!",
     "Can't leave Server Notices room": "Nem lehet elhagyni a Szerver Üzenetek szobát",
     "This room is used for important messages from the Homeserver, so you cannot leave it.": "Ez a szoba fontos szerverüzenetek közlésére jött létre, nem tudsz kilépni belőle.",
-    "To notify everyone in the room, you must be a": "Hogy mindenkinek tudj üzenni ahhoz ilyen szinten kell lenned:"
+    "To notify everyone in the room, you must be a": "Hogy mindenkinek tudj üzenni ahhoz ilyen szinten kell lenned:",
+    "Try the app first": "Először próbáld ki az alkalmazást",
+    "Encrypting": "Titkosít",
+    "Encrypted, not sent": "Titkosítva, de nincs elküldve",
+    "No Audio Outputs detected": "Nem található hang kimenet",
+    "Audio Output": "Hang kimenet",
+    "Share Link to User": "Hivatkozás megosztása felhasználóval",
+    "Share room": "Szoba megosztása",
+    "Share Room": "Szoba megosztása",
+    "Link to most recent message": "A legfrissebb üzenetre hivatkozás",
+    "Share User": "Felhasználó megosztás",
+    "Share Community": "Közösség megosztás",
+    "Share Room Message": "Szoba üzenet megosztás",
+    "Link to selected message": "Hivatkozás a kijelölt üzenetre",
+    "COPY": "Másol",
+    "Share Message": "Üzenet megosztása"
 }

src/i18n/strings/id.json

@@ -62,7 +62,6 @@
     "Sign in with": "Masuk dengan",
     "Leave room": "Meninggalkan ruang",
     "Level:": "Tingkat:",
-    "Login as guest": "Masuk sebagai tamu",
     "Logout": "Keluar",
     "Low priority": "Prioritas rendah",
     "Markdown is disabled": "Markdown dinonaktifkan",
@@ -324,7 +323,6 @@
     "Unable to fetch notification target list": "Tidak dapat mengambil daftar notifikasi target",
     "Set Password": "Ubah Password",
     "Enable audible notifications in web client": "Aktifkan notifikasi suara di klien web",
-    "Permalink": "Permalink",
     "Off": "Mati",
     "Riot does not know how to join a room on this network": "Riot tidak tau bagaimana gabung ruang di jaringan ini",
     "Mentions only": "Hanya jika disinggung",