Merge pull request #15102 from vector-im/travis/widget-api

Switch to using the Widget API SDK for Jitsi widgets

package.json

@@ -62,6 +62,7 @@
     "jsrsasign": "^9.1.5",
     "matrix-js-sdk": "8.4.1",
     "matrix-react-sdk": "3.5.0",
+    "matrix-widget-api": "^0.1.0-beta.2",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",

src/vector/jitsi/index.ts

@@ -18,8 +18,14 @@ limitations under the License.
 require("./index.scss");
 
 import * as qs from 'querystring';
-import {Capability, WidgetApi} from 'matrix-react-sdk/src/widgets/WidgetApi';
 import {KJUR} from 'jsrsasign';
+import {
+    IOpenIDCredentials,
+    IWidgetApiRequest,
+    VideoConferenceCapabilities,
+    WidgetApi,
+} from "matrix-widget-api";
+import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
 
 const JITSI_OPENIDTOKEN_JWT_AUTH = 'openidtoken-jwt';
 
@@ -38,6 +44,7 @@ let avatarUrl: string;
 let userId: string;
 let jitsiAuth: string;
 let roomId: string;
+let openIdToken: IOpenIDCredentials;
 
 let widgetApi: WidgetApi;
 let meetApi: any; // JitsiMeetExternalAPI
@@ -62,11 +69,26 @@ let meetApi: any; // JitsiMeetExternalAPI
         const widgetId = qsParam('widgetId', true);
 
         // Set this up as early as possible because Element will be hitting it almost immediately.
+        let readyPromise: Promise<[void, void]>;
         if (parentUrl && widgetId) {
-            widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), [
+            const parentOrigin = new URL(qsParam('parentUrl')).origin;
-                Capability.AlwaysOnScreen,
+            widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
+            widgetApi.requestCapabilities(VideoConferenceCapabilities);
+            readyPromise = Promise.all([
+                new Promise<void>(resolve => {
+                    widgetApi.once<CustomEvent<IWidgetApiRequest>>(`action:${ElementWidgetActions.ClientReady}`, ev => {
+                        ev.preventDefault();
+                        widgetApi.transport.reply(ev.detail, {});
+                        resolve();
+                    });
+                }),
+                new Promise<void>(resolve => {
+                    widgetApi.once("ready", () => resolve());
+                }),
             ]);
-            widgetApi.expectingExplicitReady = true;
+            widgetApi.start();
+        } else {
+            throw new Error("No parent URL or no widget ID");
         }
 
         // Populate the Jitsi params now
@@ -79,44 +101,33 @@ let meetApi: any; // JitsiMeetExternalAPI
         roomId = qsParam('roomId', true);
 
         if (widgetApi) {
-            await widgetApi.waitReady();
+            await readyPromise;
             await widgetApi.setAlwaysOnScreen(false); // start off as detachable from the screen
 
             // See https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
             if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
                 // Request credentials, give callback to continue when received
-                widgetApi.requestOpenIDCredentials(credentialsResponseCallback);
+                openIdToken = await widgetApi.requestOpenIDConnectToken();
-            } else {
+                console.log("Got OpenID Connect token");
-                enableJoinButton();
             }
 
             // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795)
 
-            widgetApi.on('hangup', () => {
+            widgetApi.addEventListener(`action:${ElementWidgetActions.HangupCall}`,
+                (ev: CustomEvent<IWidgetApiRequest>) => {
                     if (meetApi) meetApi.executeCommand('hangup');
-            });
+                    widgetApi.transport.reply(ev.detail, {}); // ack
-        } else {
+                },
-            enableJoinButton();
+            );
         }
+
+        enableJoinButton(); // always enable the button
     } catch (e) {
         console.error("Error setting up Jitsi widget", e);
         document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
     }
 })();
 
-/**
- * Enable or show error depending on what the credentials response is.
- */
-function credentialsResponseCallback() {
-    if (widgetApi.openIDCredentials) {
-        console.info('Successfully got OpenID credentials.');
-        enableJoinButton();
-    } else {
-        console.warn('OpenID credentials request was blocked by user.');
-        document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
-    }
-}
-
 function enableJoinButton() {
     document.getElementById("joinButton").onclick = () => joinConference();
 }
@@ -146,7 +157,7 @@ function createJWTToken() {
         room: "*",
         context: {
             matrix: {
-                token: widgetApi.openIDCredentials.accessToken,
+                token: openIdToken.access_token,
                 room_id: roomId,
             },
             user: {
@@ -169,7 +180,7 @@ function createJWTToken() {
 function joinConference() { // event handler bound in HTML
     let jwt;
     if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
-        if (!widgetApi.openIDCredentials || !widgetApi.openIDCredentials.accessToken) {
+        if (!openIdToken?.access_token) { // eslint-disable-line camelcase
             // We've failing to get a token, don't try to init conference
             console.warn('Expected to have an OpenID credential, cannot initialize widget.');
             document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";

yarn.lock

@@ -7431,6 +7431,11 @@ matrix-react-test-utils@^0.2.2:
   resolved "https://registry.yarnpkg.com/matrix-react-test-utils/-/matrix-react-test-utils-0.2.2.tgz#c87144d3b910c7edc544a6699d13c7c2bf02f853"
   integrity sha512-49+7gfV6smvBIVbeloql+37IeWMTD+fiywalwCqk8Dnz53zAFjKSltB3rmWHso1uecLtQEcPtCijfhzcLXAxTQ==
 
+matrix-widget-api@^0.1.0-beta.2:
+  version "0.1.0-beta.2"
+  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-0.1.0-beta.2.tgz#367da1ccd26b711f73fc5b6e02edf55ac2ea2692"
+  integrity sha512-q5g5RZN+RRjM4HmcJ+LYoQAYrB1wzyERmoQ+LvKbTV/+9Ov36Kp0QEP8CleSXEd5WLp6bkRlt60axDaY6pWGmg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"