From 421fcb115f22668320c101efcc7f5915e85ee0f6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 1 Apr 2020 10:38:49 +0100 Subject: [PATCH 1/2] Give the jitsi wrapper its own external api script --- config.sample.json | 3 +-- docs/config.md | 3 --- package.json | 5 +++-- src/vector/jitsi/index.html | 2 ++ src/vector/jitsi/index.ts | 9 --------- 5 files changed, 6 insertions(+), 16 deletions(-) diff --git a/config.sample.json b/config.sample.json index b8dc2fbb..87fc63de 100644 --- a/config.sample.json +++ b/config.sample.json @@ -53,7 +53,6 @@ "breadcrumbs": true }, "jitsi": { - "preferredDomain": "jitsi.riot.im", - "externalApiUrl": "https://jitsi.riot.im/libs/external_api.min.js" + "preferredDomain": "jitsi.riot.im" } } diff --git a/docs/config.md b/docs/config.md index 40e71361..1471faf9 100644 --- a/docs/config.md +++ b/docs/config.md @@ -88,9 +88,6 @@ For a good example, see https://riot.im/develop/config.json. 1. `preferredDomain`: The domain name of the preferred Jitsi instance. Defaults to `jitsi.riot.im`. This is used whenever a user clicks on the voice/video call buttons - integration managers may use a different domain. - 1. `externalApiUrl`: The URL to the Jitsi Meet API script. This is required - for showing any Jitsi widgets, no matter the source. Defaults to - `https://jitsi.riot.im/libs/external_api.min.js`. Note that `index.html` also has an og:image meta tag that is set to an image hosted on riot.im. This is the image used if links to your copy of Riot diff --git a/package.json b/package.json index 50f6808e..81813fcf 100644 --- a/package.json +++ b/package.json @@ -38,8 +38,9 @@ "clean": "rimraf lib webapp electron_app/dist", "build": "yarn clean && yarn build:genfiles && yarn build:compile && yarn build:types && yarn build:bundle", "build-stats": "yarn clean && yarn build:genfiles && yarn build:compile && yarn build:types && yarn build:bundle-stats", + "build:jitsi": "curl -s https://jitsi.riot.im/libs/external_api.min.js > ./webapp/jitsi_external_api.min.js", "build:res": "node scripts/copy-res.js", - "build:genfiles": "yarn reskindex && yarn build:res", + "build:genfiles": "yarn reskindex && yarn build:res && yarn build:jitsi", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", "build:compile": "babel -d lib --verbose --extensions \".ts,.js,.tsx\" src", "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production", @@ -52,7 +53,7 @@ "install:electron": "electron-builder install-app-deps", "dist": "scripts/package.sh", "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,riot-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js\"", - "start:res": "node scripts/copy-res.js -w", + "start:res": "yarn build:jitsi && node scripts/copy-res.js -w", "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development", "electron": "yarn build && yarn install:electron && electron .", "lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style", diff --git a/src/vector/jitsi/index.html b/src/vector/jitsi/index.html index 58184e0a..b9fc950e 100644 --- a/src/vector/jitsi/index.html +++ b/src/vector/jitsi/index.html @@ -15,5 +15,7 @@ + + diff --git a/src/vector/jitsi/index.ts b/src/vector/jitsi/index.ts index 75b017a2..1108e70c 100644 --- a/src/vector/jitsi/index.ts +++ b/src/vector/jitsi/index.ts @@ -52,7 +52,6 @@ let widgetApi: WidgetApi; // Set this up as early as possible because Riot will be hitting it almost immediately. widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), [ Capability.AlwaysOnScreen, - Capability.GetRiotWebConfig, ]); widgetApi.expectingExplicitReady = true; @@ -66,14 +65,6 @@ let widgetApi: WidgetApi; await widgetApi.waitReady(); await widgetApi.setAlwaysOnScreen(false); // start off as detachable from the screen - const riotConfig = await widgetApi.getRiotConfig(); - - // Get the Jitsi Meet API loaded up as fast as possible, but ensure that the widget's postMessage - // receiver (WidgetApi) is up and running first. - const scriptTag = document.createElement("script"); - scriptTag.src = riotConfig['jitsi']['externalApiUrl']; - document.body.appendChild(scriptTag); - // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795) document.getElementById("joinButton").onclick = () => joinConference(); From 0bf05e3c7b762f88c9e6a4610b9804c65761ecf2 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 1 Apr 2020 11:08:53 +0100 Subject: [PATCH 2/2] Make widget API use optional So we can work when popped out into a browser --- src/vector/jitsi/index.ts | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/vector/jitsi/index.ts b/src/vector/jitsi/index.ts index 1108e70c..8150a399 100644 --- a/src/vector/jitsi/index.ts +++ b/src/vector/jitsi/index.ts @@ -49,11 +49,19 @@ let widgetApi: WidgetApi; return query[name]; }; + // If we have these params, expect a widget API to be available (ie. to be in an iframe + // inside a matrix client). Otherwise, assume we're on our own, eg. have been popped + // out into a browser. + const parentUrl = qsParam('parentUrl', true); + const widgetId = qsParam('widgetId', true); + // Set this up as early as possible because Riot will be hitting it almost immediately. - widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), [ - Capability.AlwaysOnScreen, - ]); - widgetApi.expectingExplicitReady = true; + if (parentUrl && widgetId) { + widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), [ + Capability.AlwaysOnScreen, + ]); + widgetApi.expectingExplicitReady = true; + } // Populate the Jitsi params now jitsiDomain = qsParam('conferenceDomain'); @@ -62,8 +70,10 @@ let widgetApi: WidgetApi; avatarUrl = qsParam('avatarUrl', true); // http not mxc userId = qsParam('userId'); - await widgetApi.waitReady(); - await widgetApi.setAlwaysOnScreen(false); // start off as detachable from the screen + if (widgetApi) { + await widgetApi.waitReady(); + await widgetApi.setAlwaysOnScreen(false); // start off as detachable from the screen + } // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795) @@ -85,7 +95,7 @@ function joinConference() { // event handler bound in HTML switchVisibleContainers(); // noinspection JSIgnoredPromiseFromCall - widgetApi.setAlwaysOnScreen(true); // ignored promise because we don't care if it works + if (widgetApi) widgetApi.setAlwaysOnScreen(true); // ignored promise because we don't care if it works const meetApi = new JitsiMeetExternalAPI(jitsiDomain, { width: "100%", @@ -107,7 +117,7 @@ function joinConference() { // event handler bound in HTML switchVisibleContainers(); // noinspection JSIgnoredPromiseFromCall - widgetApi.setAlwaysOnScreen(false); // ignored promise because we don't care if it works + if (widgetApi) widgetApi.setAlwaysOnScreen(false); // ignored promise because we don't care if it works document.getElementById("jitsiContainer").innerHTML = ""; });