diff --git a/docs/url-params.md b/docs/url-params.md index 72b26fdd..266eee8f 100644 --- a/docs/url-params.md +++ b/docs/url-params.md @@ -189,3 +189,13 @@ with the join widget action. ``` skipLobby: boolean; (default: false) ``` + +**returnToLobby** +Setting this flag makes element call show the lobby in widget mode after leaving +a call. +This is useful for video rooms. +If set to false, the widget will show a blank page after leaving the call. + +``` +returnToLobby: boolean; (default: false) +``` diff --git a/src/UrlParams.ts b/src/UrlParams.ts index 68d10d7a..da2a8aae 100644 --- a/src/UrlParams.ts +++ b/src/UrlParams.ts @@ -125,6 +125,11 @@ export interface UrlParams { * with the join widget action. */ skipLobby: boolean; + /** + * Setting this flag makes element call show the lobby after leaving a call. + * This is useful for video rooms. + */ + returnToLobby: boolean; } // This is here as a stopgap, but what would be far nicer is a function that @@ -223,6 +228,7 @@ export const getUrlParams = ( allowIceFallback: parser.getFlagParam("allowIceFallback"), perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"), skipLobby: parser.getFlagParam("skipLobby"), + returnToLobby: parser.getFlagParam("returnToLobby"), }; }; diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index 2073dd20..9b65ac7b 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -87,7 +87,7 @@ export const GroupCallView: FC = ({ const roomName = useRoomName(rtcSession.room); const roomAvatar = useRoomAvatar(rtcSession.room); const e2eeSharedKey = useRoomSharedKey(rtcSession.room.roomId); - const { perParticipantE2EE } = useUrlParams(); + const { perParticipantE2EE, returnToLobby } = useUrlParams(); const roomEncrypted = useIsRoomE2EE(rtcSession.room.roomId) || perParticipantE2EE; @@ -137,9 +137,6 @@ export const GroupCallView: FC = ({ }, [perParticipantE2EE, e2eeSharedKey]); useEffect(() => { - // this effect is only if we don't want to show the lobby (skipLobby = true) - if (!skipLobby) return; - const defaultDeviceSetup = async ( requestedDeviceData: JoinCallData, ): Promise => { @@ -189,24 +186,22 @@ export const GroupCallView: FC = ({ } } }; - if (widget && preload) { - // In preload mode, wait for a join action before entering + + if (widget && preload && skipLobby) { + // In preload mode without lobby we wait for a join action before entering const onJoin = async ( ev: CustomEvent, ): Promise => { defaultDeviceSetup(ev.detail.data as unknown as JoinCallData); enterRTCSession(rtcSession, perParticipantE2EE); - await Promise.all([ - widget!.api.setAlwaysOnScreen(true), - widget!.api.transport.reply(ev.detail, {}), - ]); + await widget!.api.transport.reply(ev.detail, {}); }; widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin); return () => { widget!.lazyActions.off(ElementWidgetActions.JoinCall, onJoin); }; - } else { - // if we don't use preload and only skipLobby we enter the rtc session right away + } else if (widget && !preload && skipLobby) { + // No lobby and no preload: we enter the rtc session right away defaultDeviceSetup({ audioInput: null, videoInput: null }); enterRTCSession(rtcSession, perParticipantE2EE); } @@ -246,6 +241,9 @@ export const GroupCallView: FC = ({ useEffect(() => { if (widget && isJoined) { + // set widget to sticky once joined. + widget!.api.setAlwaysOnScreen(true); + const onHangup = async ( ev: CustomEvent, ): Promise => { @@ -319,6 +317,21 @@ export const GroupCallView: FC = ({ onDismiss={onDismissInviteModal} /> ); + const lobbyView = ( + <> + {shareModal} + enterRTCSession(rtcSession, perParticipantE2EE)} + confineToRoom={confineToRoom} + hideHeader={hideHeader} + participantCount={participantCount} + onShareClick={onShareClick} + /> + + ); if (isJoined) { return ( @@ -338,7 +351,9 @@ export const GroupCallView: FC = ({ /> ); - } else if (left) { + } else if (left && widget === null) { + // Left in SPA mode: + // The call ended view is shown for two reasons: prompting guests to create // an account, and prompting users that have opted into analytics to provide // feedback. We don't show a feedback prompt to widget users however (at @@ -366,23 +381,14 @@ export const GroupCallView: FC = ({ // LobbyView again which would open capture devices again. return null; } - } else if (preload) { + } else if (left && widget !== null) { + // Left in widget mode: + if (!returnToLobby) { + return null; + } + } else if (preload || skipLobby) { return null; - } else { - return ( - <> - {shareModal} - enterRTCSession(rtcSession, perParticipantE2EE)} - confineToRoom={confineToRoom} - hideHeader={hideHeader} - participantCount={participantCount} - onShareClick={onShareClick} - /> - - ); } + + return lobbyView; };