Put always-on-screen widgets in top left

always-on-screen widgets now appear in the top-left where the
call preview normally is if you're not in the room that they're in.

Fixes https://github.com/vector-im/riot-web/issues/7007
Based off https://github.com/matrix-org/matrix-react-sdk/pull/2053

src/utils/WidgetUtils.js

@@ -19,6 +19,27 @@ import MatrixClientPeg from '../MatrixClientPeg';
 import SdkConfig from "../SdkConfig";
 import dis from '../dispatcher';
 import * as url from "url";
+import SettingsStore from "../settings/SettingsStore";
+
+/**
+ * Encodes a URI according to a set of template variables. Variables will be
+ * passed through encodeURIComponent.
+ * @param {string} pathTemplate The path with template variables e.g. '/foo/$bar'.
+ * @param {Object} variables The key/value pairs to replace the template
+ * variables with. E.g. { '$bar': 'baz' }.
+ * @return {string} The result of replacing all template variables e.g. '/foo/baz'.
+ */
+function encodeUri(pathTemplate, variables) {
+    for (const key in variables) {
+        if (!variables.hasOwnProperty(key)) {
+            continue;
+        }
+        pathTemplate = pathTemplate.replace(
+            key, encodeURIComponent(variables[key]),
+        );
+    }
+    return pathTemplate;
+}
 
 export default class WidgetUtils {
     /* Returns true if user is able to send state events to modify widgets in this room
@@ -324,4 +345,47 @@ export default class WidgetUtils {
         });
         return client.setAccountData('m.widgets', userWidgets);
     }
+
+    static makeAppConfig(appId, app, sender, roomId) {
+        const myUserId = MatrixClientPeg.get().credentials.userId;
+        const user = MatrixClientPeg.get().getUser(myUserId);
+        const params = {
+            '$matrix_user_id': myUserId,
+            '$matrix_room_id': roomId,
+            '$matrix_display_name': user ? user.displayName : myUserId,
+            '$matrix_avatar_url': user ? MatrixClientPeg.get().mxcUrlToHttp(user.avatarUrl) : '',
+
+            // TODO: Namespace themes through some standard
+            '$theme': SettingsStore.getValue("theme"),
+        };
+
+        app.id = appId;
+        app.name = app.name || app.type;
+
+        if (app.data) {
+            Object.keys(app.data).forEach((key) => {
+                params['$' + key] = app.data[key];
+            });
+
+            app.waitForIframeLoad = (app.data.waitForIframeLoad === 'false' ? false : true);
+        }
+
+        app.url = encodeUri(app.url, params);
+        app.creatorUserId = (sender && sender.userId) ? sender.userId : null;
+
+        return app;
+    }
+
+    static getCapWhitelistForAppTypeInRoomId(appType, roomId) {
+        const enableScreenshots = SettingsStore.getValue("enableWidgetScreenshots", roomId);
+
+        const capWhitelist = enableScreenshots ? ["m.capability.screenshot"] : [];
+
+        // Obviously anyone that can add a widget can claim it's a jitsi widget,
+        // so this doesn't really offer much over the set of domains we load
+        // widgets from at all, but it probably makes sense for sanity.
+        if (appType == 'jitsi') capWhitelist.push("m.always_on_screen");
+
+        return capWhitelist;
+    }
 }