Render the widget fully from room state

src/vector/thin_widget/app.tsx

@@ -15,30 +15,31 @@ limitations under the License.
 */
 
 import React from 'react';
+import AppTile from "matrix-react-sdk/src/components/views/elements/AppTile";
+import { IWidget } from "matrix-widget-api";
+import MatrixClientContext from "matrix-react-sdk/src/contexts/MatrixClientContext";
+import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
+
 // add React and ReactPerf to the global namespace, to make them easier to access via the console
 // this incidentally means we can forget our React imports in JSX files without penalty.
 window.React = React;
 
-import AppTile from "matrix-react-sdk/src/components/views/elements/AppTile";
-
 export interface IStartOpts {
-    accessToken: string;
     widgetId: string;
     roomId?: string;
 }
 
-export async function loadApp(opts: IStartOpts) {
-    // TODO: Actually use `opts` to populate the widget
-    return <AppTile
-        app={{
-            id: "test1234",
-            url: "http://localhost:8082/index.html#/?widgetId=$matrix_widget_id",
-            name: "Test Widget",
-            type: "m.custom",
-            data: {},
-        }}
-        fullWidth={true}
-        userId={"@test:example.org"}
-        userWidget={true}
-    />;
+export async function loadApp(widget: IWidget) {
+    return (
+        <MatrixClientContext.Provider value={MatrixClientPeg.get()}>
+            <div id="mx_ThinWrapper_container">
+                <AppTile
+                    app={widget}
+                    fullWidth={true}
+                    userId={MatrixClientPeg.get().getUserId()}
+                    userWidget={false}
+                />
+            </div>
+        </MatrixClientContext.Provider>
+    );
 }

src/vector/thin_widget/index.scss

@@ -42,3 +42,17 @@ body, html {
     padding: 0;
     margin: 0;
 }
+
+#mx_ThinWrapper_container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+
+    .mx_AppTileFullWidth {
+        width: unset !important;
+        height: calc(100% - 10px); // 5px top + bottom borders on the AppTile
+        margin: 0;
+    }
+}

src/vector/thin_widget/index.ts

@@ -19,6 +19,9 @@ require("./index.scss");
 import * as qs from 'querystring';
 import { settled } from "../promise_utils";
 import ReactDOM from 'react-dom';
+import { StopGapWidgetDriver, WidgetRenderMode } from "matrix-react-sdk/src/stores/widgets/StopGapWidgetDriver";
+import WidgetUtils from "matrix-react-sdk/src/utils/WidgetUtils";
+import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
 
 // The widget's options are encoded into the fragment to avoid leaking info to the server. The widget
 // spec on the other hand requires the widgetId and parentUrl to show up in the regular query string.
@@ -31,13 +34,18 @@ const qsParam = (name: string, optional = false): string => {
 };
 
 const accessToken = qsParam("accessToken");
+const homeserverUrl = qsParam("hsUrl");
 const roomId = qsParam("roomId", true);
 const widgetId = qsParam("widgetId"); // state_key or account data key
 
+// TODO: clear href so people don't accidentally copy/paste it
+//window.location.hash = '';
+
 (async function() {
     const {
         rageshakePromise,
         preparePlatform,
+        loadSkin,
         loadOlm, // to handle timelines
         loadLanguage,
         loadTheme,
@@ -54,18 +62,37 @@ const widgetId = qsParam("widgetId"); // state_key or account data key
         await settled(rageshakePromise);
 
         console.log("Running startup...");
+        StopGapWidgetDriver.RENDER_MODE = WidgetRenderMode.ThinWrapper;
+        await loadSkin();
         await loadOlm();
         preparePlatform();
+        await MatrixClientPeg.shim(homeserverUrl, accessToken);
         await loadTheme();
         await loadLanguage();
 
+        console.log("Locating widget...");
+        const stateEvent = await MatrixClientPeg.get()._http.authedRequest(
+            undefined, "GET",
+            `/rooms/${encodeURIComponent(roomId)}/state/im.vector.modular.widgets/${encodeURIComponent(widgetId)}`,
+            undefined, undefined, {},
+        );
+        if (!stateEvent?.url) {
+            throw new Error("Invalid widget");
+        }
+        const app = WidgetUtils.makeAppConfig(
+            widgetId,
+            stateEvent,
+            MatrixClientPeg.get().getUserId(), // assume we are the sender
+            roomId,
+            widgetId);
+
         // Now we can start our custom code
         console.log("Loading app...");
         const module = await import(
             /* webpackChunkName: "thin-wrapper-app" */
             /* webpackPreload: true */
             "./app");
-        window.matrixChat = ReactDOM.render(await module.loadApp({accessToken, roomId, widgetId}),
+        window.matrixChat = ReactDOM.render(await module.loadApp(app),
             document.getElementById('matrixchat'));
     } catch (err) {
         console.error(err);