Merge pull request #12980 from vector-im/dbkr/jitsi_fix_popout_rel

Fix popout support for jitsi widgets
This commit is contained in:
David Baker 2020-04-01 13:59:48 +01:00 committed by GitHub
commit 511d18abec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 24 deletions

View file

@ -53,7 +53,6 @@
"breadcrumbs": true "breadcrumbs": true
}, },
"jitsi": { "jitsi": {
"preferredDomain": "jitsi.riot.im", "preferredDomain": "jitsi.riot.im"
"externalApiUrl": "https://jitsi.riot.im/libs/external_api.min.js"
} }
} }

View file

@ -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 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 to `jitsi.riot.im`. This is used whenever a user clicks on the voice/video
call buttons - integration managers may use a different domain. 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 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 hosted on riot.im. This is the image used if links to your copy of Riot

View file

@ -38,8 +38,9 @@
"clean": "rimraf lib webapp electron_app/dist", "clean": "rimraf lib webapp electron_app/dist",
"build": "yarn clean && yarn build:genfiles && yarn build:compile && yarn build:types && yarn build:bundle", "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-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: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:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:compile": "babel -d lib --verbose --extensions \".ts,.js,.tsx\" src", "build:compile": "babel -d lib --verbose --extensions \".ts,.js,.tsx\" src",
"build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production", "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
@ -52,7 +53,7 @@
"install:electron": "electron-builder install-app-deps", "install:electron": "electron-builder install-app-deps",
"dist": "scripts/package.sh", "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": "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", "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 .", "electron": "yarn build && yarn install:electron && electron .",
"lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style", "lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",

View file

@ -15,5 +15,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- This script is not webpacked, and the script is downloaded at build time -->
<script src="./jitsi_external_api.min.js"></script>
</body> </body>
</html> </html>

View file

@ -49,12 +49,19 @@ let widgetApi: WidgetApi;
return <string>query[name]; return <string>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. // Set this up as early as possible because Riot will be hitting it almost immediately.
if (parentUrl && widgetId) {
widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), [ widgetApi = new WidgetApi(qsParam('parentUrl'), qsParam('widgetId'), [
Capability.AlwaysOnScreen, Capability.AlwaysOnScreen,
Capability.GetRiotWebConfig,
]); ]);
widgetApi.expectingExplicitReady = true; widgetApi.expectingExplicitReady = true;
}
// Populate the Jitsi params now // Populate the Jitsi params now
jitsiDomain = qsParam('conferenceDomain'); jitsiDomain = qsParam('conferenceDomain');
@ -63,16 +70,10 @@ let widgetApi: WidgetApi;
avatarUrl = qsParam('avatarUrl', true); // http not mxc avatarUrl = qsParam('avatarUrl', true); // http not mxc
userId = qsParam('userId'); userId = qsParam('userId');
if (widgetApi) {
await widgetApi.waitReady(); await widgetApi.waitReady();
await widgetApi.setAlwaysOnScreen(false); // start off as detachable from the screen 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) // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795)
@ -94,7 +95,7 @@ function joinConference() { // event handler bound in HTML
switchVisibleContainers(); switchVisibleContainers();
// noinspection JSIgnoredPromiseFromCall // 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, { const meetApi = new JitsiMeetExternalAPI(jitsiDomain, {
width: "100%", width: "100%",
@ -116,7 +117,7 @@ function joinConference() { // event handler bound in HTML
switchVisibleContainers(); switchVisibleContainers();
// noinspection JSIgnoredPromiseFromCall // 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 = ""; document.getElementById("jitsiContainer").innerHTML = "";
}); });