diff --git a/package.json b/package.json index 936116180c..63b0398ca0 100644 --- a/package.json +++ b/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", diff --git a/src/vector/jitsi/index.ts b/src/vector/jitsi/index.ts index ca32ea7540..e1b6a58bc9 100644 --- a/src/vector/jitsi/index.ts +++ b/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'), [ - Capability.AlwaysOnScreen, + const parentOrigin = new URL(qsParam('parentUrl')).origin; + widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin); + widgetApi.requestCapabilities(VideoConferenceCapabilities); + readyPromise = Promise.all([ + new Promise(resolve => { + widgetApi.once>(`action:${ElementWidgetActions.ClientReady}`, ev => { + ev.preventDefault(); + widgetApi.transport.reply(ev.detail, {}); + resolve(); + }); + }), + new Promise(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); - } else { - enableJoinButton(); + openIdToken = await widgetApi.requestOpenIDConnectToken(); + console.log("Got OpenID Connect token"); } // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795) - widgetApi.on('hangup', () => { - if (meetApi) meetApi.executeCommand('hangup'); - }); - } else { - enableJoinButton(); + widgetApi.addEventListener(`action:${ElementWidgetActions.HangupCall}`, + (ev: CustomEvent) => { + if (meetApi) meetApi.executeCommand('hangup'); + widgetApi.transport.reply(ev.detail, {}); // ack + }, + ); } + + 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"; diff --git a/yarn.lock b/yarn.lock index 2dcb2ad22e..5227b9e11b 100644 --- a/yarn.lock +++ b/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"