Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a config.json option to skip the built-in Jitsi welcome screen #21190

Merged
merged 2 commits into from
Feb 28, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion docs/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,12 @@ For a good example, see https://develop.element.io/config.json.
`/.well-known/matrix/client` in its well-known location, and the JSON file
at that location has a key `m.vector.riot.jitsi`. In this case, the
configuration found in the well-known location is used instead.

1. `jitsiWidget`: Options to change the built-in Jitsi widget behaviour. `jitsi` controls
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be called something generic so the same config can be applied to new voip solutions? Next gen voip will also have some sort of 'join conference' button I think

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather not until we know precisely what it looks like in-app. Migrations of config settings are relatively easy, too.

how the widget gets created, but not how it behaves.
1. `skipBuiltInWelcomeScreen`: If you'd like to skip the default "Join Conference"
behaviour, set this to `true`. This will cause the widget to assume that there's
a Jitsi welcome screen set up and point the user towards that. Note that this can
cause the camera/microphone to flicker as "in use" while Jitsi tests the devices.
1. `enable_presence_by_hs_url`: The property key should be the URL of the homeserver
and its value defines whether to enable/disable the presence status display
from that homeserver. If no options are configured, presence is shown for all
Expand Down
40 changes: 40 additions & 0 deletions src/vector/jitsi/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import {
import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
import { logger } from "matrix-js-sdk/src/logger";

import { getVectorConfig } from "../getconfig";

// We have to trick webpack into loading our CSS for us.
require("./index.scss");

Expand All @@ -50,9 +52,14 @@ let startAudioOnly: boolean;

let widgetApi: WidgetApi;
let meetApi: any; // JitsiMeetExternalAPI
let skipOurWelcomeScreen = false;

(async function() {
try {
// Queue a config.json lookup asap, so we can use it later on. We want this to be concurrent with
// other setup work and therefore do not block.
const configPromise = getVectorConfig('..');

// The widget's options are encoded into the fragment to avoid leaking info to the server.
const widgetQuery = new URLSearchParams(window.location.hash.substring(1));
// The widget spec on the other hand requires the widgetId and parentUrl to show up in the regular query string.
Expand Down Expand Up @@ -110,6 +117,16 @@ let meetApi: any; // JitsiMeetExternalAPI
roomName = qsParam('roomName', true);
startAudioOnly = qsParam('isAudioOnly', true) === "true";

// We've reached the point where we have to wait for the config, so do that then parse it.
const instanceConfig = await configPromise;
skipOurWelcomeScreen = instanceConfig?.['jitsiWidget']?.['skipBuiltInWelcomeScreen'] || false;

// If we're meant to skip our screen, skip to the part where we show Jitsi instead of us.
// We don't set up the call yet though as this might lead to failure without the widget API.
if (skipOurWelcomeScreen) {
toggleConferenceVisibility(true);
}

if (widgetApi) {
await readyPromise;
await widgetApi.setAlwaysOnScreen(false); // start off as detachable from the screen
Expand Down Expand Up @@ -147,6 +164,11 @@ let meetApi: any; // JitsiMeetExternalAPI
);
}

// Now that everything should be set up, skip to the Jitsi splash screen if needed
if (skipOurWelcomeScreen) {
skipToJitsiSplashScreen();
}

enableJoinButton(); // always enable the button
} catch (e) {
logger.error("Error setting up Jitsi widget", e);
Expand All @@ -160,10 +182,24 @@ function enableJoinButton() {

function switchVisibleContainers() {
inConference = !inConference;

// Our welcome screen is managed by other code, so just don't switch to it ever
// if we're not supposed to.
if (!skipOurWelcomeScreen) {
toggleConferenceVisibility(inConference);
}
}

function toggleConferenceVisibility(inConference: boolean) {
document.getElementById("jitsiContainer").style.visibility = inConference ? 'unset' : 'hidden';
document.getElementById("joinButtonContainer").style.visibility = inConference ? 'hidden' : 'unset';
}

function skipToJitsiSplashScreen() {
// really just a function alias for self-documenting code
joinConference();
}

/**
* Create a JWT token fot jitsi openidtoken-jwt auth
*
Expand Down Expand Up @@ -267,5 +303,9 @@ function joinConference() { // event handler bound in HTML

document.getElementById("jitsiContainer").innerHTML = "";
meetApi = null;

if (skipOurWelcomeScreen) {
skipToJitsiSplashScreen();
}
});
}