Bi-directional widget postMessaging API (stickerpacks) [WIP]

src/ContentMessages.js

@@ -275,6 +275,12 @@ class ContentMessages {
         this.nextId = 0;
     }
 
+    sendStickerContentToRoom(url, roomId, info, text, matrixClient) {
+      return MatrixClientPeg.get().sendStickerMessage(roomId, url, info, text).catch((e) => {
+        console.warn(`Failed to send content with URL ${url} to room ${roomId}`, e);
+      });
+    }
+
     sendContentToRoom(file, roomId, matrixClient) {
         const content = {
             body: file.name || 'Attachment',

src/IntegrationManager.js

@@ -0,0 +1,76 @@
+/*
+Copyright 2017 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 Modal from './Modal';
+import sdk from './index';
+import SdkConfig from './SdkConfig';
+import ScalarMessaging from './ScalarMessaging';
+import ScalarAuthClient from './ScalarAuthClient';
+import RoomViewStore from './stores/RoomViewStore';
+
+if (!global.mxIntegrationManager) {
+  global.mxIntegrationManager = {};
+}
+
+export default class IntegrationManager {
+  static async _init() {
+    if (!global.mxIntegrationManager.client || !global.mxIntegrationManager.connected) {
+      if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
+        ScalarMessaging.startListening();
+        global.mxIntegrationManager.client = new ScalarAuthClient();
+
+        await global.mxIntegrationManager.client.connect().then(() => {
+          global.mxIntegrationManager.connected = true;
+        }).catch((e) => {
+          console.error("Failed to connect to integrations server", e);
+          global.mxIntegrationManager.error = e;
+        });
+      } else {
+        console.error('Invalid integration manager config', SdkConfig.get());
+      }
+    }
+  }
+
+  /**
+   * Launch the integrations manager on the stickers integration page
+   * @param  {string} integType integration / widget type
+   * @param  {string} integId   integration / widget ID
+   * @param  {function} onClose Callback to invoke on integration manager close
+   */
+  static async open(integType, integId, onClose) {
+    await IntegrationManager._init();
+    const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+    if (global.mxIntegrationManager.error ||
+        !(global.mxIntegrationManager.client && global.mxIntegrationManager.client.hasCredentials())) {
+      console.error("Scalar error", global.mxIntegrationManager);
+      return;
+    }
+    integType = 'type_' + integType;
+    const src = (global.mxIntegrationManager.client && global.mxIntegrationManager.client.hasCredentials()) ?
+      global.mxIntegrationManager.client.getScalarInterfaceUrlForRoom(
+        RoomViewStore.getRoomId(),
+        integType,
+        integId,
+      ) :
+      null;
+    Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+      src: src,
+    }, "mx_IntegrationsManager");
+
+    if (onClose) {
+      onClose();
+    }
+  }
+}

src/MatrixPostMessageApi.js

@@ -0,0 +1,85 @@
+/*
+Copyright 2017 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 Promise from "bluebird";
+
+// NOTE: PostMessageApi only handles message events with a data payload with a
+// response field
+export default class PostMessageApi {
+    constructor(targetWindow, timeoutMs) {
+        this._window = targetWindow || window.parent; // default to parent window
+        this._timeoutMs = timeoutMs || 5000; // default to 5s timer
+        this._counter = 0;
+        this._requestMap = {
+            // $ID: {resolve, reject}
+        };
+    }
+
+    start() {
+        addEventListener('message', this.getOnMessageCallback());
+    }
+
+    stop() {
+        removeEventListener('message', this.getOnMessageCallback());
+    }
+
+    // Somewhat convoluted so we can successfully capture the PostMessageApi 'this' instance.
+    getOnMessageCallback() {
+        if (this._onMsgCallback) {
+            return this._onMsgCallback;
+        }
+        const self = this;
+        this._onMsgCallback = function(ev) {
+            // THIS IS ALL UNSAFE EXECUTION.
+            // We do not verify who the sender of `ev` is!
+            const payload = ev.data;
+            // NOTE: Workaround for running in a mobile WebView where a
+            // postMessage immediately triggers this callback even though it is
+            // not the response.
+            if (payload.response === undefined) {
+                return;
+            }
+            const promise = self._requestMap[payload._id];
+            if (!promise) {
+                return;
+            }
+            delete self._requestMap[payload._id];
+            promise.resolve(payload);
+        };
+        return this._onMsgCallback;
+    }
+
+    exec(action, target) {
+        this._counter += 1;
+        target = target || "*";
+        action._id = Date.now() + "-" + Math.random().toString(36) + "-" + this._counter;
+
+        return new Promise((resolve, reject) => {
+            this._requestMap[action._id] = {resolve, reject};
+            this._window.postMessage(action, target);
+
+            if (this._timeoutMs > 0) {
+                setTimeout(() => {
+                    if (!this._requestMap[action._id]) {
+                        return;
+                    }
+                    console.error("postMessage request timed out. Sent object: " + JSON.stringify(action));
+                    this._requestMap[action._id].reject(new Error("Timed out"));
+                }, this._timeoutMs);
+            }
+        });
+    }
+}

src/ScalarAuthClient.js

@@ -148,10 +148,48 @@ class ScalarAuthClient {
         return defer.promise;
     }
 
-    getScalarInterfaceUrlForRoom(roomId, screen, id) {
+    /**
+     * Mark all assets associated with the specified widget as "disabled" in the
+     * integration manager database.
+     * This can be useful to temporarily prevent purchased assets from being displayed.
+     * @param  {string} widgetType [description]
+     * @param  {string} widgetId   [description]
+     * @return {Promise}           Resolves on completion
+     */
+    disableWidgetAssets(widgetType, widgetId) {
+        let url = SdkConfig.get().integrations_rest_url + '/widgets/set_assets_state';
+        url = this.getStarterLink(url);
+        return new Promise((resolve, reject) => {
+            request({
+                method: 'GET',
+                uri: url,
+                json: true,
+                qs: {
+                    'widget_type': widgetType,
+                    'widget_id': widgetId,
+                    'state': 'disable',
+                },
+            }, (err, response, body) => {
+                if (err) {
+                    reject(err);
+                } else if (response.statusCode / 100 !== 2) {
+                    reject({statusCode: response.statusCode});
+                } else if (!body) {
+                    reject(new Error("Failed to set widget assets state"));
+                } else {
+                    resolve();
+                }
+            });
+        });
+    }
+
+    getScalarInterfaceUrlForRoom(room, screen, id) {
+        const roomId = room.roomId;
+        const roomName = room.name;
         let url = SdkConfig.get().integrations_ui_url;
         url += "?scalar_token=" + encodeURIComponent(this.scalarToken);
         url += "&room_id=" + encodeURIComponent(roomId);
+        url += "&room_name=" + encodeURIComponent(roomName);
         url += "&theme=" + encodeURIComponent(SettingsStore.getValue("theme"));
         if (id) {
             url += '&integ_id=' + encodeURIComponent(id);

src/ScalarMessaging.js

@@ -235,6 +235,7 @@ 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 { _t } from './languageHandler';
 
 function sendResponse(event, res) {
@@ -291,6 +292,7 @@ function setWidget(event, roomId) {
     const widgetUrl = event.data.url;
     const widgetName = event.data.name; // optional
     const widgetData = event.data.data; // optional
+    const userWidget = event.data.userWidget;
 
     const client = MatrixClientPeg.get();
     if (!client) {
@@ -330,17 +332,51 @@ function setWidget(event, roomId) {
         name: widgetName,
         data: widgetData,
     };
-    if (widgetUrl === null) { // widget is being deleted
-        content = {};
-    }
 
-    client.sendStateEvent(roomId, "im.vector.modular.widgets", content, widgetId).done(() => {
+    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(),
+                stateKey: widgetId,
+                type: 'im.vector.modular.widgets',
+                id: widgetId,
+            };
+        }
+
+        client.setAccountData('m.widgets', userWidgets);
         sendResponse(event, {
             success: true,
         });
-    }, (err) => {
-        sendError(event, _t('Failed to send request.'), err);
-    });
+
+        dis.dispatch({ action: "user_widget_updated" });
+    } else { // Room widget
+        if (!roomId) {
+            sendError(event, _t('Missing roomId.'), null);
+        }
+
+        if (widgetUrl === null) { // widget is being deleted
+            content = {};
+        }
+        client.sendStateEvent(roomId, "im.vector.modular.widgets", content, widgetId).done(() => {
+            sendResponse(event, {
+                success: true,
+            });
+        }, (err) => {
+            sendError(event, _t('Failed to send request.'), err);
+        });
+    }
 }
 
 function getWidgets(event, roomId) {
@@ -349,19 +385,28 @@ function getWidgets(event, roomId) {
         sendError(event, _t('You need to be logged in.'));
         return;
     }
-    const room = client.getRoom(roomId);
-    if (!room) {
-        sendError(event, _t('This room is not recognised.'));
-        return;
-    }
-    const stateEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
-    // Only return widgets which have required fields
-    const widgetStateEvents = [];
-    stateEvents.forEach((ev) => {
-        if (ev.getContent().type && ev.getContent().url) {
-            widgetStateEvents.push(ev.event); // return the raw event
+    let widgetStateEvents = [];
+
+    if (roomId) {
+        const room = client.getRoom(roomId);
+        if (!room) {
+            sendError(event, _t('This room is not recognised.'));
+            return;
         }
-    });
+        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
+                }
+            });
+        }
+    }
+
+    // Add user widgets (not linked to a specific room)
+    const userWidgets = Widgets.getUserWidgetsArray();
+    widgetStateEvents = widgetStateEvents.concat(userWidgets);
 
     sendResponse(event, widgetStateEvents);
 }
@@ -578,9 +623,22 @@ const onMessage = function(event) {
 
     const roomId = event.data.room_id;
     const userId = event.data.user_id;
+
     if (!roomId) {
-        sendError(event, _t('Missing room_id in request'));
-        return;
+        // These APIs don't require roomId
+        // Get and set user widgets (not associated with a specific room)
+        // If roomId is specified, it must be validated, so room-based widgets agreed
+        // handled further down.
+        if (event.data.action === "get_widgets") {
+            getWidgets(event, null);
+            return;
+        } else if (event.data.action === "set_widget") {
+            setWidget(event, null);
+            return;
+        } else {
+            sendError(event, _t('Missing room_id in request'));
+            return;
+        }
     }
     let promise = Promise.resolve(currentRoomId);
     if (!currentRoomId) {
@@ -601,6 +659,15 @@ const onMessage = function(event) {
             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);
@@ -611,12 +678,6 @@ const onMessage = function(event) {
         } else if (event.data.action === "get_membership_count") {
             getMembershipCount(event, roomId);
             return;
-        } else if (event.data.action === "set_widget") {
-            setWidget(event, roomId);
-            return;
-        } else if (event.data.action === "get_widgets") {
-            getWidgets(event, roomId);
-            return;
         } else if (event.data.action === "get_room_enc_state") {
             getRoomEncState(event, roomId);
             return;