Support room color in settings

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

src/components/structures/RoomView.js

@@ -625,12 +625,7 @@ module.exports = React.createClass({
         const room = this.state.room;
         if (!room) return;
 
-        const color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
-        let color_scheme = {};
-        if (color_scheme_event) {
-            color_scheme = color_scheme_event.getContent();
-            // XXX: we should validate the event
-        }
+        const color_scheme = SettingsStore.getValue("roomColor", room.room_id);
         console.log("Tinter.tint from updateTint");
         Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
     },

src/components/views/room_settings/ColorSettings.js

@@ -22,6 +22,7 @@ const MatrixClientPeg = require("../../../MatrixClientPeg");
 const Modal = require("../../../Modal");
 
 import dis from '../../../dispatcher';
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 
 const ROOM_COLORS = [
     // magic room default values courtesy of Ribot
@@ -47,17 +48,17 @@ module.exports = React.createClass({
     getInitialState: function() {
         const data = {
             index: 0,
-            primary_color: ROOM_COLORS[0].primary_color,
-            secondary_color: ROOM_COLORS[0].secondary_color,
+            primary_color: ROOM_COLORS[0][0],
+            secondary_color: ROOM_COLORS[0][1],
             hasChanged: false,
         };
-        const event = this.props.room.getAccountData("org.matrix.room.color_scheme");
-        if (!event) {
-            return data;
+        const scheme = SettingsStore.getValueAt(SettingLevel.ROOM_ACCOUNT, "roomColor", this.props.room.roomId);
+
+        if (scheme.primary_color && scheme.secondary_color) {
+            // We only use the user's scheme if the scheme is valid.
+            data.primary_color = scheme.primary_color;
+            data.secondary_color = scheme.secondary_color;
         }
-        const scheme = event.getContent();
-        data.primary_color = scheme.primary_color;
-        data.secondary_color = scheme.secondary_color;
         data.index = this._getColorIndex(data);
 
         if (data.index === -1) {
@@ -81,13 +82,13 @@ module.exports = React.createClass({
             // We would like guests to be able to set room colour but currently
             // they can't, so we still send the request but display a sensible
             // error if it fails.
-            return MatrixClientPeg.get().setRoomAccountData(
-                this.props.room.roomId, "org.matrix.room.color_scheme", {
-                    primary_color: this.state.primary_color,
-                    secondary_color: this.state.secondary_color,
-                },
-            ).catch(function(err) {
-                if (err.errcode == 'M_GUEST_ACCESS_FORBIDDEN') {
+            // TODO: Support guests for room color. Technically this is possible via granular settings
+            // Granular settings would mean the guest is forced to use the DEVICE level though.
+            SettingsStore.setValue("roomColor", this.props.room.roomId, SettingLevel.ROOM_ACCOUNT, {
+                primary_color: this.state.primary_color,
+                secondary_color: this.state.secondary_color,
+            }).catch(function(err) {
+                if (err.errcode === 'M_GUEST_ACCESS_FORBIDDEN') {
                     dis.dispatch({action: 'view_set_mxid'});
                 }
             });

src/settings/RoomAccountSettingsHandler.js

@@ -28,6 +28,13 @@ export default class RoomAccountSettingsHandler extends SettingsHandler {
             return !content['disable'];
         }
 
+        // Special case room color
+        if (settingName === "roomColor") {
+            // The event content should already be in an appropriate format, we just need
+            // to get the right value.
+            return this._getSettings(roomId, "org.matrix.room.color_scheme");
+        }
+
         return this._getSettings(roomId)[settingName];
     }
 
@@ -39,6 +46,12 @@ export default class RoomAccountSettingsHandler extends SettingsHandler {
             return MatrixClientPeg.get().setRoomAccountData(roomId, "org.matrix.room.preview_urls", content);
         }
 
+        // Special case room color
+        if (settingName === "roomColor") {
+            // The new value should match our requirements, we just need to store it in the right place.
+            return MatrixClientPeg.get().setRoomAccountData(roomId, "org.matrix.room.color_scheme", newValue);
+        }
+
         const content = this._getSettings(roomId);
         content[settingName] = newValue;
         return MatrixClientPeg.get().setRoomAccountData(roomId, "im.vector.web.settings", content);

src/settings/Settings.js

@@ -209,4 +209,12 @@ export const SETTINGS = {
         },
         default: true,
     },
+    "roomColor": {
+        supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,
+        displayName: _td("Room Colour"),
+        default: {
+            primary_color: null, // Hex string, eg: #000000
+            secondary_color: null, // Hex string, eg: #000000
+        },
+    },
 };