Merge branch 'develop' into wmwragg/chat-message-presentation

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -19,8 +19,8 @@ limitations under the License.
 var q = require("q");
 var React = require('react');
 var classNames = require('classnames');
+var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var dis = require('matrix-react-sdk/lib/dispatcher');
 
 module.exports = React.createClass({
     displayName: 'NotificationStateContextMenu',
@@ -31,95 +31,86 @@ module.exports = React.createClass({
         onFinished: React.PropTypes.func,
     },
 
-    getInitialState: function() {
-        var areNotifsMuted = false;
-        var cli = MatrixClientPeg.get();
-        if (!cli.isGuest()) {
-            var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId);
-            if (roomPushRule) {
-                if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
-                    areNotifsMuted = true;
-                }
-            }
-        }
-
+    getInitialState() {
         return {
-            areNotifsMuted: areNotifsMuted,
-        };
+            roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
+        }
     },
 
-    _save: function( areNotifsMuted ) {
-        var self = this;
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _save: function(newState) {
+        const oldState = this.state.roomNotifState;
         const roomId = this.props.room.roomId;
         var cli = MatrixClientPeg.get();
 
-        if (!cli.isGuest()) {
-            // Wrapping this in a q promise, as setRoomMutePushRule can return
-            // a promise or a value
-            q(cli.setRoomMutePushRule("global", roomId, areNotifsMuted))
-            .then(function() {
-                self.setState({areNotifsMuted: areNotifsMuted});
+        if (cli.isGuest()) return;
 
+        this.setState({
+            roomNotifState: newState,
+        });
+        RoomNotifs.setRoomNotifsState(this.props.room.roomId, newState).done(() => {
             // delay slightly so that the user can see their state change
             // before closing the menu
-                return q.delay(500).then(function() {
-                    // tell everyone that wants to know of the change in
-                    // notification state
-                    dis.dispatch({
-                        action: 'notification_change',
-                        roomId: self.props.room.roomId,
-                        areNotifsMuted: areNotifsMuted,
-                    });
-
+            return q.delay(500).then(() => {
+                if (this._unmounted) return;
                 // Close the context menu
-                    if (self.props.onFinished) {
-                        self.props.onFinished();
+                if (this.props.onFinished) {
+                    this.props.onFinished();
                 };
             });
-            }).fail(function(error) {
+        }, (error) => {
             // TODO: some form of error notification to the user
             // to inform them that their state change failed.
+            // For now we at least set the state back
+            if (this._unmounted) return;
+            this.setState({
+                roomNotifState: oldState,
+            });
         });
-        }
     },
 
     _onClickAlertMe: function() {
-        // Placeholder
+        this._save(RoomNotifs.ALL_MESSAGES_LOUD);
     },
 
     _onClickAllNotifs: function() {
-        this._save(false);
+        this._save(RoomNotifs.ALL_MESSAGES);
     },
 
     _onClickMentions: function() {
-        this._save(true);
+        this._save(RoomNotifs.MENTIONS_ONLY);
     },
 
     _onClickMute: function() {
-        // Placeholder
+        this._save(RoomNotifs.MUTE);
     },
 
     render: function() {
-        var cli = MatrixClientPeg.get();
-
         var alertMeClasses = classNames({
             'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldDisabled': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
         });
 
         var allNotifsClasses = classNames({
             'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
         });
 
         var mentionsClasses = classNames({
             'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
         });
 
         var muteNotifsClasses = classNames({
             'mx_NotificationStateContextMenu_field': true,
-            'mx_NotificationStateContextMenu_fieldDisabled': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
         });
 
         return (

src/components/views/elements/ImageView.js

@@ -80,7 +80,7 @@ module.exports = React.createClass({
     getName: function () {
         var name = this.props.name;
         if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank">{ name }</a>;
+            name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
         }
         return name;
     },
@@ -169,7 +169,7 @@ module.exports = React.createClass({
                                 { this.getName() }
                             </div>
                             { eventMeta }
-                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
+                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank" rel="noopener">
                                 <div className="mx_ImageView_download">
                                         Download this file<br/>
                                          <span className="mx_ImageView_size">{ size_res }</span>

src/notifications/VectorPushRulesDefinitions.js

@@ -65,7 +65,7 @@ module.exports = {
     // Messages containing user's display name
     // (skip contains_user_name which is too geeky)
     ".m.rule.contains_display_name": new VectorPushRuleDefinition({
-        kind: "underride",
+        kind: "override",
         description: "Messages containing my name",
         vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
             on: StandardActions.ACTION_NOTIFY,

src/skins/vector/img/icons-video.svg

@@ -8,8 +8,8 @@
         <g id="Extra-icons-sheet" transform="translate(-542.000000, -366.000000)">
             <g id="icons_video" transform="translate(542.000000, 366.000000)">
                 <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-109-Copy-2" fill="#EAF5F0"></path>
-                <g transform="translate(9.000000, 9.000000)" id="Rectangle-20-+-Path-16" stroke="#76CFA6">
-                    <g>
+                <g transform="translate(9.000000, 11.500000)" id="Rectangle-20-+-Path-16" stroke="#76CFA6">
+                    <g transform="scale(1.0, 0.8)">
                         <rect id="Rectangle-20" x="0" y="0" width="13" height="17" rx="4"></rect>
                         <path d="M13,8.50795206 C13,11.2533934 15.8192656,12.6412404 15.8192656,12.6412404 C16.8995921,13.391019 17.7753697,12.9258617 17.7753697,11.6159552 L17.7753697,5.39994895 C17.7753697,4.08392094 16.8771592,3.5920349 15.8192656,4.37466376 C15.8192656,4.37466376 13,5.76251076 13,8.50795206 Z" id="Path-16"></path>
                     </g>