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.

Sign up for GitHub

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

Jump to bottom

Show a lobby screen in video rooms #21746

Merged
merged 8 commits into from
Apr 20, 2022
Merged

Show a lobby screen in video rooms #21746

Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d0c5730
No longer skip the prejoin screen in video rooms
robintown Apr 11, 2022
6d11720
Enable joining with specific devices
robintown Apr 11, 2022
2c1bb08
Start widget API listeners earlier
robintown Apr 11, 2022
dd74db7
Revert "Start widget API listeners earlier"
robintown Apr 12, 2022
ffdfdc2
Tell the client when the Jitsi wrapper is ready to receive events
robintown Apr 12, 2022
ab7080b
Merge branch 'develop' into video-room-lobby
robintown Apr 14, 2022
caefb5f
Fix video rooms getting stuck on Jitsi Meet's prejoin screen
robintown Apr 14, 2022
0c62d0d
Merge branch 'develop' into video-room-lobby
robintown Apr 20, 2022
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
89 changes: 48 additions & 41 deletions src/vector/jitsi/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
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(`action:${ElementWidgetActions.ClientReady}`, ev => {
Expand All @@ -106,46 +107,11 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
widgetApi.once("ready", () => resolve());
}),
]);
widgetApi.start();
} else {
logger.warn("No parent URL or no widget ID - assuming no widget API is available");
}

// Populate the Jitsi params now
jitsiDomain = qsParam('conferenceDomain');
conferenceId = qsParam('conferenceId');
displayName = qsParam('displayName', true);
avatarUrl = qsParam('avatarUrl', true); // http not mxc
userId = qsParam('userId');
jitsiAuth = qsParam('auth', true);
roomId = qsParam('roomId', true);
roomName = qsParam('roomName', true);
startAudioOnly = qsParam('isAudioOnly', true) === "true";
isVideoChannel = qsParam('isVideoChannel', true) === "true";

// We've reached the point where we have to wait for the config, so do that then parse it.
const instanceConfig = new SnakedObject<IConfigOptions>((await configPromise) ?? <IConfigOptions>{});
const jitsiConfig = instanceConfig.get("jitsi_widget") ?? {};
skipOurWelcomeScreen = (new SnakedObject<IConfigOptions["jitsi_widget"]>(jitsiConfig))
.get("skip_built_in_welcome_screen") || isVideoChannel;

// Either reveal the prejoin screen, or skip straight to Jitsi depending on the config.
// We don't set up the call yet though as this might lead to failure without the widget API.
toggleConferenceVisibility(skipOurWelcomeScreen);

if (widgetApi) {
await readyPromise;

// 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
openIdToken = await widgetApi.requestOpenIDConnectToken();
logger.log("Got OpenID Connect token");
}

widgetApi.on(`action:${ElementWidgetActions.JoinCall}`,
(ev: CustomEvent<IWidgetApiRequest>) => {
joinConference();
const { audioDevice, videoDevice } = ev.detail.data;
joinConference(audioDevice as string, videoDevice as string);
ack(ev);
},
);
Expand Down Expand Up @@ -203,6 +169,43 @@ const ack = (ev: CustomEvent<IWidgetApiRequest>) => widgetApi.transport.reply(ev
}
},
);

widgetApi.start();
robintown marked this conversation as resolved.
Show resolved Hide resolved
} else {
logger.warn("No parent URL or no widget ID - assuming no widget API is available");
}

// Populate the Jitsi params now
jitsiDomain = qsParam('conferenceDomain');
conferenceId = qsParam('conferenceId');
displayName = qsParam('displayName', true);
avatarUrl = qsParam('avatarUrl', true); // http not mxc
userId = qsParam('userId');
jitsiAuth = qsParam('auth', true);
roomId = qsParam('roomId', true);
roomName = qsParam('roomName', true);
startAudioOnly = qsParam('isAudioOnly', true) === "true";
isVideoChannel = qsParam('isVideoChannel', true) === "true";

// We've reached the point where we have to wait for the config, so do that then parse it.
const instanceConfig = new SnakedObject<IConfigOptions>((await configPromise) ?? <IConfigOptions>{});
const jitsiConfig = instanceConfig.get("jitsi_widget") ?? {};
skipOurWelcomeScreen = (new SnakedObject<IConfigOptions["jitsi_widget"]>(jitsiConfig))
.get("skip_built_in_welcome_screen") ?? false;

// Either reveal the prejoin screen, or skip straight to Jitsi depending on the config.
// We don't set up the call yet though as this might lead to failure without the widget API.
toggleConferenceVisibility(skipOurWelcomeScreen);

if (widgetApi) {
await readyPromise;

// 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
openIdToken = await widgetApi.requestOpenIDConnectToken();
logger.log("Got OpenID Connect token");
}
}

// Now that everything should be set up, skip to the Jitsi splash screen if needed
Expand Down Expand Up @@ -293,7 +296,8 @@ async function notifyHangup() {
}
}

function joinConference() { // event handler bound in HTML
// event handler bound in HTML
function joinConference(audioDevice?: string, videoDevice?: string) {
let jwt;
if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
if (!openIdToken?.access_token) { // eslint-disable-line camelcase
Expand All @@ -318,6 +322,10 @@ function joinConference() { // event handler bound in HTML
height: "100%",
parentNode: document.querySelector("#jitsiContainer"),
roomName: conferenceId,
devices: {
audioInput: audioDevice,
videoInput: videoDevice,
},
interfaceConfigOverwrite: {
SHOW_JITSI_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
Expand All @@ -326,15 +334,14 @@ function joinConference() { // event handler bound in HTML
},
configOverwrite: {
startAudioOnly,
startWithAudioMuted: !audioDevice,
startWithVideoMuted: !videoDevice,
} as any,
jwt: jwt,
};

// Video channel widgets need some more tailored config options
if (isVideoChannel) {
// Ensure that we start on Jitsi Meet's native prejoin screen, for
// deployments that skip straight to the conference by default
options.configOverwrite.prejoinConfig = { enabled: true };
// Use a simplified set of toolbar buttons
options.configOverwrite.toolbarButtons = [
"microphone", "camera", "desktop", "tileview", "hangup",
Expand Down