PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Switch to using the Widget API SDK for Jitsi widgets
This commit is contained in:
Travis Ralston 2020-10-01 10:16:11 -06:00 committed by GitHub
commit 5f353c4907
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

67
src/vector/jitsi/index.ts
View file

@ -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<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);
} 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<IWidgetApiRequest>) => {
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";

5
yarn.lock
View file

@ -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"