Support URL previews (with bugs)

Known issues at this point:
* The room-level setting accepts the current user's default, which is wrong
* The checkboxes on RoomSettings are not independent
* The checkboxes in RoomSettings need some layout fixes

Signed-off-by: Travis Ralston <travpc@gmail.com>

src/UserSettingsStore.js

@@ -124,16 +124,4 @@ export default {
             append: true,  // We always append for email pushers since we don't want to stop other accounts notifying to the same email address
         });
     },
-
-    getUrlPreviewsDisabled: function() {
-        const event = MatrixClientPeg.get().getAccountData('org.matrix.preview_urls');
-        return (event && event.getContent().disable);
-    },
-
-    setUrlPreviewsDisabled: function(disabled) {
-        // FIXME: handle errors
-        return MatrixClientPeg.get().setAccountData('org.matrix.preview_urls', {
-            disable: disabled,
-        });
-    },
 };

src/components/structures/RoomView.js

@@ -614,38 +614,8 @@ module.exports = React.createClass({
     },
 
     _updatePreviewUrlVisibility: function(room) {
-        // console.log("_updatePreviewUrlVisibility");
-
-        // check our per-room overrides
-        const roomPreviewUrls = room.getAccountData("org.matrix.room.preview_urls");
-        if (roomPreviewUrls && roomPreviewUrls.getContent().disable !== undefined) {
-            this.setState({
-                showUrlPreview: !roomPreviewUrls.getContent().disable,
-            });
-            return;
-        }
-
-        // check our global disable override
-        const userRoomPreviewUrls = MatrixClientPeg.get().getAccountData("org.matrix.preview_urls");
-        if (userRoomPreviewUrls && userRoomPreviewUrls.getContent().disable) {
-            this.setState({
-                showUrlPreview: false,
-            });
-            return;
-        }
-
-        // check the room state event
-        const roomStatePreviewUrls = room.currentState.getStateEvents('org.matrix.room.preview_urls', '');
-        if (roomStatePreviewUrls && roomStatePreviewUrls.getContent().disable) {
-            this.setState({
-                showUrlPreview: false,
-            });
-            return;
-        }
-
-        // otherwise, we assume they're on.
         this.setState({
-            showUrlPreview: true,
+            showUrlPreview: SettingsStore.getValue("urlPreviewsEnabled", room.roomId),
         });
     },
 

src/components/structures/UserSettings.js

@@ -61,6 +61,7 @@ const gHVersionLabel = function(repo, token='') {
 // Enumerate some simple 'flip a bit' UI settings (if any). The strings provided here
 // must be settings defined in SettingsStore.
 const SIMPLE_SETTINGS = [
+    { id: "urlPreviewsEnabled" },
     { id: "autoplayGifsAndVideos" },
     { id: "hideReadReceipts" },
     { id: "dontSendTypingNotifications" },
@@ -640,7 +641,6 @@ module.exports = React.createClass({
             <div>
                 <h3>{ _t("User Interface") }</h3>
                 <div className="mx_UserSettings_section">
-                    { this._renderUrlPreviewSelector() }
                     { SIMPLE_SETTINGS.map( this._renderSyncedSetting ) }
                     { THEMES.map( this._renderThemeSelector ) }
                     <table>
@@ -663,23 +663,6 @@ module.exports = React.createClass({
         );
     },
 
-    _renderUrlPreviewSelector: function() {
-        return <div className="mx_UserSettings_toggle">
-            <input id="urlPreviewsDisabled"
-                   type="checkbox"
-                   defaultChecked={UserSettingsStore.getUrlPreviewsDisabled()}
-                   onChange={this._onPreviewsDisabledChanged}
-            />
-            <label htmlFor="urlPreviewsDisabled">
-                { _t("Disable inline URL previews by default") }
-            </label>
-        </div>;
-    },
-
-    _onPreviewsDisabledChanged: function(e) {
-         UserSettingsStore.setUrlPreviewsDisabled(e.target.checked);
-    },
-
     _renderSyncedSetting: function(setting) {
         const SettingsCheckbox = sdk.getComponent("elements.SettingsCheckbox");
         return (

src/components/views/elements/SettingsCheckbox.js

@@ -44,7 +44,7 @@ module.exports = React.createClass({
         let val = SettingsStore.getValueAt(this.props.level, this.props.name, this.props.roomId);
 
         let label = this.props.label;
-        if (!label) label = SettingsStore.getDisplayName(this.props.name);
+        if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
         else label = _t(label);
 
         let id = this.props.name;

src/components/views/room_settings/UrlPreviewSettings.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 Travis Ralston
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,13 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Promise from 'bluebird';
 const React = require('react');
-const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
-const Modal = require("../../../Modal");
-const UserSettingsStore = require('../../../UserSettingsStore');
 import { _t, _tJsx } from '../../../languageHandler';
+import SettingsStore from "../../../settings/SettingsStore";
 
 
 module.exports = React.createClass({
@@ -30,137 +28,52 @@ module.exports = React.createClass({
         room: React.PropTypes.object,
     },
 
-    getInitialState: function() {
-        const cli = MatrixClientPeg.get();
-        const roomState = this.props.room.currentState;
-
-        const roomPreviewUrls = this.props.room.currentState.getStateEvents('org.matrix.room.preview_urls', '');
-        const userPreviewUrls = this.props.room.getAccountData("org.matrix.room.preview_urls");
-
-        return {
-            globalDisableUrlPreview: (roomPreviewUrls && roomPreviewUrls.getContent().disable) || false,
-            userDisableUrlPreview: (userPreviewUrls && (userPreviewUrls.getContent().disable === true)) || false,
-            userEnableUrlPreview: (userPreviewUrls && (userPreviewUrls.getContent().disable === false)) || false,
-        };
-    },
-
-    componentDidMount: function() {
-        this.originalState = Object.assign({}, this.state);
-    },
-
-    saveSettings: function() {
-        const promises = [];
-
-        if (this.state.globalDisableUrlPreview !== this.originalState.globalDisableUrlPreview) {
-            console.log("UrlPreviewSettings: Updating room's preview_urls state event");
-            promises.push(
-                MatrixClientPeg.get().sendStateEvent(
-                    this.props.room.roomId, "org.matrix.room.preview_urls", {
-                        disable: this.state.globalDisableUrlPreview,
-                    }, "",
-                ),
-            );
-        }
-
-        let content = undefined;
-        if (this.state.userDisableUrlPreview !== this.originalState.userDisableUrlPreview) {
-            console.log("UrlPreviewSettings: Disabling user's per-room preview_urls");
-            content = this.state.userDisableUrlPreview ? { disable: true } : {};
-        }
-
-        if (this.state.userEnableUrlPreview !== this.originalState.userEnableUrlPreview) {
-            console.log("UrlPreviewSettings: Enabling user's per-room preview_urls");
-            if (!content || content.disable === undefined) {
-                content = this.state.userEnableUrlPreview ? { disable: false } : {};
-            }
-        }
-
-        if (content) {
-            promises.push(
-                MatrixClientPeg.get().setRoomAccountData(
-                    this.props.room.roomId, "org.matrix.room.preview_urls", content,
-                ),
-            );
-        }
-
-        console.log("UrlPreviewSettings: saveSettings: " + JSON.stringify(promises));
-
-        return promises;
-    },
-
-    onGlobalDisableUrlPreviewChange: function() {
-        this.setState({
-            globalDisableUrlPreview: this.refs.globalDisableUrlPreview.checked ? true : false,
-        });
-    },
-
-    onUserEnableUrlPreviewChange: function() {
-        this.setState({
-            userDisableUrlPreview: false,
-            userEnableUrlPreview: this.refs.userEnableUrlPreview.checked ? true : false,
-        });
-    },
-
-    onUserDisableUrlPreviewChange: function() {
-        this.setState({
-            userDisableUrlPreview: this.refs.userDisableUrlPreview.checked ? true : false,
-            userEnableUrlPreview: false,
-        });
-    },
-
     render: function() {
-        const self = this;
+        const SettingsCheckbox = sdk.getComponent("elements.SettingsCheckbox");
-        const roomState = this.props.room.currentState;
+        const roomId = this.props.room.roomId;
-        const cli = MatrixClientPeg.get();
 
-        const maySetRoomPreviewUrls = roomState.mayClientSendStateEvent('org.matrix.room.preview_urls', cli);
+        let previewsForAccount = null;
-        let disableRoomPreviewUrls;
+        if (SettingsStore.getValueAt("account", "urlPreviewsEnabled")) {
-        if (maySetRoomPreviewUrls) {
+            previewsForAccount = (
-            disableRoomPreviewUrls =
-                <label>
-                    <input type="checkbox" ref="globalDisableUrlPreview"
-                           onChange={this.onGlobalDisableUrlPreviewChange}
-                           checked={this.state.globalDisableUrlPreview} />
-                    { _t("Disable URL previews by default for participants in this room") }
-                </label>;
-        } else {
-            disableRoomPreviewUrls =
-                <label>
-                    { _t("URL previews are %(globalDisableUrlPreview)s by default for participants in this room.", {globalDisableUrlPreview: this.state.globalDisableUrlPreview ? _t("disabled") : _t("enabled")}) }
-                </label>;
-        }
-
-        let urlPreviewText = null;
-        if (UserSettingsStore.getUrlPreviewsDisabled()) {
-            urlPreviewText = (
-                _tJsx("You have <a>disabled</a> URL previews by default.", /<a>(.*?)<\/a>/, (sub)=><a href="#/settings">{ sub }</a>)
-            );
-        } else {
-            urlPreviewText = (
                 _tJsx("You have <a>enabled</a> URL previews by default.", /<a>(.*?)<\/a>/, (sub)=><a href="#/settings">{ sub }</a>)
             );
+        } else {
+            previewsForAccount = (
+                _tJsx("You have <a>disabled</a> URL previews by default.", /<a>(.*?)<\/a>/, (sub)=><a href="#/settings">{ sub }</a>)
+            );
         }
 
+        let previewsForRoom = null;
+        if (SettingsStore.canSetValue("urlPreviewsEnabled", roomId, "room")) {
+            previewsForRoom = (
+                <label>
+                    <SettingsCheckbox name="urlPreviewsEnabled"
+                                      level="room"
+                                      roomId={this.props.room.roomId} />
+                </label>
+            );
+        } else {
+            let str = "URL previews are enabled by default for participants in this room.";
+            if (!SettingsStore.getValueAt("room", "urlPreviewsEnabled")) {
+                str = "URL previews are disabled by default for participants in this room.";
+            }
+            previewsForRoom = (<label>{ _t(str) }</label>);
+        }
+
+        let previewsForRoomAccount = (
+            <SettingsCheckbox name="urlPreviewsEnabled"
+                              level="room-account"
+                              roomId={this.props.room.roomId}
+            />
+        );
+
         return (
             <div className="mx_RoomSettings_toggles">
                 <h3>{ _t("URL Previews") }</h3>
 
-                <label>
+                <label>{ previewsForAccount }</label>
-                { urlPreviewText }
+                { previewsForRoom }
-                </label>
+                <label>{ previewsForRoomAccount }</label>
-                { disableRoomPreviewUrls }
-                <label>
-                    <input type="checkbox" ref="userEnableUrlPreview"
-                           onChange={this.onUserEnableUrlPreviewChange}
-                           checked={this.state.userEnableUrlPreview} />
-                    { _t("Enable URL previews for this room (affects only you)") }
-                </label>
-                <label>
-                    <input type="checkbox" ref="userDisableUrlPreview"
-                           onChange={this.onUserDisableUrlPreviewChange}
-                           checked={this.state.userDisableUrlPreview} />
-                    { _t("Disable URL previews for this room (affects only you)") }
-                </label>
             </div>
         );
     },

src/settings/AccountSettingsHandler.js

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Promise from 'bluebird';
 import SettingsHandler from "./SettingsHandler";
 import MatrixClientPeg from '../MatrixClientPeg';
 
@@ -24,10 +23,23 @@ import MatrixClientPeg from '../MatrixClientPeg';
  */
 export default class AccountSettingHandler extends SettingsHandler {
     getValue(settingName, roomId) {
+        // Special case URL previews
+        if (settingName === "urlPreviewsEnabled") {
+            const content = this._getSettings("org.matrix.preview_urls");
+            return !content['disable'];
+        }
+
         return this._getSettings()[settingName];
     }
 
     setValue(settingName, roomId, newValue) {
+        // Special case URL previews
+        if (settingName === "urlPreviewsEnabled") {
+            const content = this._getSettings("org.matrix.preview_urls");
+            content['disable'] = !newValue;
+            return MatrixClientPeg.get().setAccountData("org.matrix.preview_urls", content);
+        }
+
         const content = this._getSettings();
         content[settingName] = newValue;
         return MatrixClientPeg.get().setAccountData("im.vector.web.settings", content);
@@ -41,8 +53,8 @@ export default class AccountSettingHandler extends SettingsHandler {
         return !!MatrixClientPeg.get();
     }
 
-    _getSettings() {
+    _getSettings(eventType = "im.vector.web.settings") {
-        const event = MatrixClientPeg.get().getAccountData("im.vector.web.settings");
+        const event = MatrixClientPeg.get().getAccountData(eventType);
         if (!event || !event.getContent()) return {};
         return event.getContent();
     }

src/settings/RoomAccountSettingsHandler.js

@@ -22,10 +22,23 @@ import MatrixClientPeg from '../MatrixClientPeg';
  */
 export default class RoomAccountSettingsHandler extends SettingsHandler {
     getValue(settingName, roomId) {
+        // Special case URL previews
+        if (settingName === "urlPreviewsEnabled") {
+            const content = this._getSettings(roomId, "org.matrix.room.preview_urls");
+            return !content['disable'];
+        }
+
         return this._getSettings(roomId)[settingName];
     }
 
     setValue(settingName, roomId, newValue) {
+        // Special case URL previews
+        if (settingName === "urlPreviewsEnabled") {
+            const content = this._getSettings(roomId, "org.matrix.room.preview_urls");
+            content['disable'] = !newValue;
+            return MatrixClientPeg.get().setRoomAccountData(roomId, "org.matrix.room.preview_urls", content);
+        }
+
         const content = this._getSettings(roomId);
         content[settingName] = newValue;
         return MatrixClientPeg.get().setRoomAccountData(roomId, "im.vector.web.settings", content);
@@ -40,11 +53,11 @@ export default class RoomAccountSettingsHandler extends SettingsHandler {
         return !!MatrixClientPeg.get();
     }
 
-    _getSettings(roomId) {
+    _getSettings(roomId, eventType = "im.vector.settings") {
         const room = MatrixClientPeg.get().getRoom(roomId);
         if (!room) return {};
 
-        const event = room.getAccountData("im.vector.settings");
+        const event = room.getAccountData(eventType);
         if (!event || !event.getContent()) return {};
         return event.getContent();
     }

src/settings/RoomSettingsHandler.js

@@ -22,10 +22,23 @@ import MatrixClientPeg from '../MatrixClientPeg';
  */
 export default class RoomSettingsHandler extends SettingsHandler {
     getValue(settingName, roomId) {
+        // Special case URL previews
+        if (settingName === "urlPreviewsEnabled") {
+            const content = this._getSettings(roomId, "org.matrix.room.preview_urls");
+            return !content['disable'];
+        }
+
         return this._getSettings(roomId)[settingName];
     }
 
     setValue(settingName, roomId, newValue) {
+        // Special case URL previews
+        if (settingName === "urlPreviewsEnabled") {
+            const content = this._getSettings(roomId, "org.matrix.room.preview_urls");
+            content['disable'] = !newValue;
+            return MatrixClientPeg.get().setRoomAccountData(roomId, "org.matrix.room.preview_urls", content);
+        }
+
         const content = this._getSettings(roomId);
         content[settingName] = newValue;
         return MatrixClientPeg.get().sendStateEvent(roomId, "im.vector.web.settings", content, "");
@@ -43,10 +56,10 @@ export default class RoomSettingsHandler extends SettingsHandler {
         return !!MatrixClientPeg.get();
     }
 
-    _getSettings(roomId) {
+    _getSettings(roomId, eventType = "im.vector.web.settings") {
         const room = MatrixClientPeg.get().getRoom(roomId);
         if (!room) return {};
-        const event = room.currentState.getStateEvents("im.vector.web.settings", "");
+        const event = room.currentState.getStateEvents(eventType, "");
         if (!event || !event.getContent()) return {};
         return event.getContent();
     }

src/settings/SettingsStore.js

@@ -194,6 +194,15 @@ const SETTINGS = {
         default: false,
         displayName: _td('Never send encrypted messages to unverified devices from this device'),
     },
+    "urlPreviewsEnabled": {
+        supportedLevels: LEVELS_PRESET_ROOM.concat("room"),
+        default: true,
+        displayName: {
+            "default": _td('Enable inline URL previews by default'),
+            "room-account": _td("Enable URL previews for this room (only affects you)"),
+            "room": _td("Enable URL previews by default for participants in this room"),
+        },
+    },
 };
 
 // Convert the above into simpler formats for the handlers
@@ -245,11 +254,20 @@ export default class SettingsStore {
     /**
      * Gets the translated display name for a given setting
      * @param {string} settingName The setting to look up.
+     * @param {"device"|"room-device"|"room-account"|"account"|"room"|"config"|"default"} atLevel
+     * The level to get the display name for; Defaults to 'default'.
      * @return {String} The display name for the setting, or null if not found.
      */
-    static getDisplayName(settingName) {
+    static getDisplayName(settingName, atLevel = "default") {
         if (!SETTINGS[settingName] || !SETTINGS[settingName].displayName) return null;
-        return _t(SETTINGS[settingName].displayName);
+
+        let displayName = SETTINGS[settingName].displayName;
+        if (displayName instanceof Object) {
+            if (displayName[atLevel]) displayName = displayName[atLevel];
+            else displayName = displayName["default"];
+        }
+
+        return _t(displayName);
     }
 
     /**
@@ -362,7 +380,7 @@ export default class SettingsStore {
         }
 
         if (!handler.canSetValue(settingName, roomId)) {
-            throw new Error("User cannot set " + settingName + " at level " + level);
+            throw new Error("User cannot set " + settingName + " at " + level + " in " + roomId);
         }
 
         return handler.setValue(settingName, roomId, value);