many stupid thinkos and bugfixes; make it work

src/UserSettingsStore.js

@@ -115,7 +115,7 @@ module.exports = {
 
     getUrlPreviewsDisabled: function() {
         var event = MatrixClientPeg.get().getAccountData("org.matrix.preview_urls");
-        return (event && event.disable);
+        return (event && event.getContent().disable);
     },
 
     setUrlPreviewsDisabled: function(disabled) {
@@ -126,7 +126,8 @@ module.exports = {
     },
 
     getSyncedSettings: function() {
-        return MatrixClientPeg.get().getAccountData("im.vector.web.settings") || {};
+        var event = MatrixClientPeg.get().getAccountData("im.vector.web.settings");
+        return event ? event.getContent() : {};
     },
 
     getSyncedSetting: function(type) {

src/components/structures/RoomView.js

@@ -239,8 +239,6 @@ module.exports = React.createClass({
             MatrixClientPeg.get().stopPeeking();
             this._onRoomLoaded(this.state.room);
         }
-
-        this._updatePreviewUrlVisibility(this.state.room);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -372,6 +370,7 @@ module.exports = React.createClass({
     // after a successful peek, or after we join the room).
     _onRoomLoaded: function(room) {
         this._calculatePeekRules(room);
+        this._updatePreviewUrlVisibility(room);
     },
 
     _calculatePeekRules: function(room) {
@@ -391,18 +390,20 @@ module.exports = React.createClass({
     },
 
     _updatePreviewUrlVisibility: function(room) {
+        console.log("_updatePreviewUrlVisibility");
+
         // check our per-room overrides
         var roomPreviewUrls = room.getAccountData("org.matrix.room.preview_urls");
-        if (roomPreviewUrls && roomPreviewUrls.disabled !== undefined) {
+        if (roomPreviewUrls && roomPreviewUrls.getContent().disable !== undefined) {
             this.setState({
-                showUrlPreview: !roomPreviewUrls.disabled
+                showUrlPreview: !roomPreviewUrls.getContent().disable
             });
             return;
         }
 
         // check our global disable override
-        var userRoomPreviewUrls = MatrixClientPeg().get().getAccountData("org.matrix.preview_urls");
+        var userRoomPreviewUrls = MatrixClientPeg.get().getAccountData("org.matrix.preview_urls");
-        if (userRoomPreviewUrls && userRoomPreviewUrls.disabled) {
+        if (userRoomPreviewUrls && userRoomPreviewUrls.getContent().disable) {
             this.setState({
                 showUrlPreview: false
             });
@@ -411,7 +412,7 @@ module.exports = React.createClass({
 
         // check the room state event
         var roomStatePreviewUrls = room.currentState.getStateEvents('org.matrix.room.preview_urls', '');
-        if (roomStatePreviewUrls && roomStatePreviewUrls.disabled) {
+        if (roomStatePreviewUrls && roomStatePreviewUrls.getContent().disable) {
             this.setState({
                 showUrlPreview: false
             });
@@ -454,8 +455,8 @@ module.exports = React.createClass({
         Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
     },
 
-    onRoomAccountData: function(room, event) {
+    onRoomAccountData: function(event, room) {
-        if (room.roomId == this.props.roomId) {
+        if (room.roomId == this.state.roomId) {
             if (event.getType() === "org.matrix.room.color_scheme") {
                 var color_scheme = event.getContent();
                 // XXX: we should validate the event
@@ -463,7 +464,7 @@ module.exports = React.createClass({
                 Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
             }
             else if (event.getType() === "org.matrix.room.preview_urls") {
-                _updatePreviewUrlVisibility(room);
+                this._updatePreviewUrlVisibility(room);
             }
         }
     },
@@ -1557,6 +1558,8 @@ module.exports = React.createClass({
             hideMessagePanel = true;
         }
 
+        console.log("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
+
         var messagePanel = (
             <TimelinePanel ref={this._gatherTimelinePanelRef}
                 room={this.state.room}

src/components/structures/TimelinePanel.js

@@ -937,7 +937,7 @@ var TimelinePanel = React.createClass({
                     readMarkerEventId={ this.state.readMarkerEventId }
                     readMarkerVisible={ this.state.readMarkerVisible }
                     suppressFirstDateSeparator={ this.state.canBackPaginate }
-                    showUrlPreview = { this.state.showUrlPreview }
+                    showUrlPreview = { this.props.showUrlPreview }
                     ourUserId={ MatrixClientPeg.get().credentials.userId }
                     stickyBottom={ stickyBottom }
                     onScroll={ this.onMessageListScroll }

src/components/views/messages/TextualBody.js

@@ -59,8 +59,32 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         linkifyElement(this.refs.content, linkifyMatrix.options);
+        this.calculateUrlPreview();
 
-        if (this.props.showUrlPreview) {
+        if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
+            HtmlUtils.highlightDom(ReactDOM.findDOMNode(this));
+    },
+
+    componentDidUpdate: function() {
+        this.calculateUrlPreview();
+    },
+
+    shouldComponentUpdate: function(nextProps, nextState) {
+        //console.log("shouldComponentUpdate: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
+
+        // exploit that events are immutable :)
+        return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
+                nextProps.highlights !== this.props.highlights ||
+                nextProps.highlightLink !== this.props.highlightLink ||
+                nextProps.showUrlPreview !== this.props.showUrlPreview ||
+                nextState.links !== this.state.links ||
+                nextState.widgetHidden !== this.state.widgetHidden);
+    },
+
+    calculateUrlPreview: function() {
+        //console.log("calculateUrlPreview: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
+
+        if (this.props.showUrlPreview && !this.state.links.length) {
             var links = this.findLinks(this.refs.content.children);
             if (links.length) {
                 this.setState({ links: links.map((link)=>{
@@ -74,19 +98,6 @@ module.exports = React.createClass({
                 }
             }
         }
-
-        if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
-            HtmlUtils.highlightDom(ReactDOM.findDOMNode(this));
-    },
-
-    shouldComponentUpdate: function(nextProps, nextState) {
-        // exploit that events are immutable :)
-        // ...and that .links is only ever set in componentDidMount and never changes
-        return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
-                nextProps.highlights !== this.props.highlights ||
-                nextProps.highlightLink !== this.props.highlightLink ||
-                nextState.links !== this.state.links ||
-                nextState.widgetHidden !== this.state.widgetHidden);
     },
 
     findLinks: function(nodes) {
@@ -175,7 +186,7 @@ module.exports = React.createClass({
         }
 
         var widgets;
-        if (this.state.links.length && !this.state.widgetHidden) {
+        if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) {
             var LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
             widgets = this.state.links.map((link)=>{
                 return <LinkPreviewWidget

src/components/views/room_settings/UrlPreviewSettings.js

@@ -0,0 +1,157 @@
+/*
+Copyright 2016 OpenMarket 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.
+*/
+
+var q = require("q");
+var React = require('react');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var sdk = require("../../../index");
+var Modal = require("../../../Modal");
+var UserSettingsStore = require('../../../UserSettingsStore');
+
+
+module.exports = React.createClass({
+    displayName: 'UrlPreviewSettings',
+
+    propTypes: {
+        room: React.PropTypes.object,
+    },
+
+    getInitialState: function() {
+        var cli = MatrixClientPeg.get();
+        var roomState = this.props.room.currentState;
+
+        var roomPreviewUrls = this.props.room.currentState.getStateEvents('org.matrix.room.preview_urls', '');
+        var 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() {
+        var 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
+                    }, ""
+                )
+            );
+        }
+
+        var 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() {
+        var self = this;
+        var roomState = this.props.room.currentState;
+        var cli = MatrixClientPeg.get();
+
+        var maySetRoomPreviewUrls = roomState.mayClientSendStateEvent('org.matrix.room.preview_urls', cli);
+        var disableRoomPreviewUrls;
+        if (maySetRoomPreviewUrls) {
+            disableRoomPreviewUrls =
+                <label>
+                    <input type="checkbox" ref="globalDisableUrlPreview"
+                           onChange={ this.onGlobalDisableUrlPreviewChange }
+                           checked={ this.state.globalDisableUrlPreview } />
+                    Disable URL previews by default for participants in this room
+                </label>
+        }
+        else {
+            disableRoomPreviewUrls =
+                <label>
+                    URL previews are { this.state.globalDisableUrlPreview ? "disabled" : "enabled" } by default for participants in this room.
+                </label>
+        }
+
+        return (
+            <div className="mx_RoomSettings_toggles">
+                <h3>URL Previews</h3>
+
+                <label>
+                    You have <a href="#/settings">{ UserSettingsStore.getUrlPreviewsDisabled() ? 'disabled' : 'enabled' }</a> URL previews by default.
+                </label>
+                { disableRoomPreviewUrls }
+                <label>
+                    <input type="checkbox" ref="userEnableUrlPreview"
+                           onChange={ this.onUserEnableUrlPreviewChange }
+                           checked={ this.state.userEnableUrlPreview } />
+                    Enable URL previews for this room (affects only you)
+                </label>
+                <label>
+                    <input type="checkbox" ref="userDisableUrlPreview"
+                           onChange={ this.onUserDisableUrlPreviewChange }
+                           checked={ this.state.userDisableUrlPreview } />
+                    Disable URL previews for this room (affects only you)
+                </label>
+            </div>
+        );
+
+    }
+});

src/components/views/rooms/EventTile.js

@@ -362,6 +362,8 @@ module.exports = React.createClass({
         var SenderProfile = sdk.getComponent('messages.SenderProfile');
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
 
+        //console.log("EventTile showUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
+
         var content = this.props.mxEvent.getContent();
         var msgtype = content.msgtype;
 

src/components/views/rooms/RoomSettings.js

@@ -211,10 +211,13 @@ module.exports = React.createClass({
         // color scheme
         promises.push(this.saveColor());
 
+        // url preview settings
+        promises.push(this.saveUrlPreviewSettings());
+
         // encryption
         promises.push(this.saveEncryption());
 
-        console.log("Performing %s operations", promises.length);
+        console.log("Performing %s operations: %s", promises.length, JSON.stringify(promises));
         return q.allSettled(promises);
     },
 
@@ -228,6 +231,11 @@ module.exports = React.createClass({
         return this.refs.color_settings.saveSettings();
     },
 
+    saveUrlPreviewSettings: function() {
+        if (!this.refs.url_preview_settings) { return q(); }
+        return this.refs.url_preview_settings.saveSettings();
+    },
+
     saveEncryption: function () {
         if (!this.refs.encrypt) { return q(); }