Call Guest Access, give user the option to change the acces level so they can generate a call link.

res/css/_components.pcss

@@ -272,6 +272,7 @@
 @import "./views/rooms/_Autocomplete.pcss";
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
+@import "./views/rooms/_CallGuestLinkButton.pcss";
 @import "./views/rooms/_DecryptionFailureBar.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";

res/css/views/rooms/_CallGuestLinkButton.pcss

@@ -0,0 +1,7 @@
+.mx_JoinRuleDialog {
+    .mx_JoinRuleDialogButtons {
+        display: flex;
+        column-gap: 5px;
+        justify-content: center;
+    }
+}

src/components/views/context_menus/RoomContextMenu.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { useContext } from "react";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { Room, RoomMemberEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
@@ -117,9 +117,9 @@ const RoomContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
     const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
     const isVideoRoom =
         videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()));
-
+    const canInvite = useEventEmitterState(cli, RoomMemberEvent.PowerLevel, () => room.canInvite(cli.getUserId()!));
     let inviteOption: JSX.Element | undefined;
-    if (room.canInvite(cli.getUserId()!) && !isDm && shouldShowComponent(UIComponent.InviteUsers)) {
+    if (canInvite && !isDm && shouldShowComponent(UIComponent.InviteUsers)) {
         const onInviteClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -32,7 +32,7 @@ import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-s
 import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
 import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
 import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
-import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
+import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
@@ -393,6 +393,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
     const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () =>
         RoomListStore.instance.getTagsForRoom(room),
     );
+    const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room));
     const isFavorite = roomTags.includes(DefaultTagID.Favourite);
 
     return (
@@ -439,7 +440,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
             <MenuItem
                 Icon={UserAddIcon}
                 label={_t("action|invite")}
-                disabled={!canInviteTo(room)}
+                disabled={!canInviteToState}
                 onSelect={() => inviteToRoom(room)}
             />
             <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />

src/components/views/rooms/RoomHeader.tsx

@@ -18,7 +18,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
 import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
-import { Icon as ExternalLinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
 import { Icon as CloseCallIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
 import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
 import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
@@ -27,7 +26,6 @@ import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error
 import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
 import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import { useRoomName } from "../../../hooks/useRoomName";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
@@ -56,8 +54,7 @@ import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
 import { RoomKnocksBar } from "./RoomKnocksBar";
 import { isVideoRoom } from "../../../utils/video-rooms";
 import { notificationLevelToIndicator } from "../../../utils/notifications";
-import Modal from "../../../Modal";
-import ShareDialog from "../dialogs/ShareDialog";
+import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
 
 export default function RoomHeader({
     room,
@@ -82,8 +79,6 @@ export default function RoomHeader({
         videoCallClick,
         toggleCallMaximized: toggleCall,
         isViewingCall,
-        generateCallLink,
-        canGenerateCallLink,
         isConnectedToCall,
         hasActiveCallSession,
         callOptions,
@@ -124,34 +119,14 @@ export default function RoomHeader({
 
     const videoClick = useCallback((ev) => videoCallClick(ev, callOptions[0]), [callOptions, videoCallClick]);
 
-    const shareClick = useCallback(() => {
-        try {
-            // generateCallLink throws if the permissions are not met
-            const target = generateCallLink();
-            Modal.createDialog(ShareDialog, {
-                target,
-                customTitle: _t("share|share_call"),
-                subtitle: _t("share|share_call_subtitle"),
-            });
-        } catch (e) {
-            logger.error("Could not generate call link.", e);
-        }
-    }, [generateCallLink]);
-
     const toggleCallButton = (
         <Tooltip label={isViewingCall ? _t("voip|minimise_call") : _t("voip|maximise_call")}>
             <IconButton onClick={toggleCall}>
                 <VideoCallIcon />
             </IconButton>
         </Tooltip>
     );
-    const createExternalLinkButton = (
-        <Tooltip label={_t("voip|get_call_link")}>
-            <IconButton onClick={shareClick} aria-label={_t("voip|get_call_link")}>
-                <ExternalLinkIcon />
-            </IconButton>
-        </Tooltip>
-    );
+
     const joinCallButton = (
         <Tooltip label={videoCallDisabledReason ?? _t("voip|video_call")}>
             <Button
@@ -227,7 +202,10 @@ export default function RoomHeader({
     const voiceCallButton = (
         <Tooltip label={voiceCallDisabledReason ?? _t("voip|voice_call")}>
             <IconButton
-                disabled={!!voiceCallDisabledReason}
+                // We need both: isViewingCall and isConnectedToCall
+                //  - in the Lobby we are viewing a call but are not connected to it.
+                //  - in pip view we are connected to the call but not viewing it.
+                disabled={!!voiceCallDisabledReason || isViewingCall || isConnectedToCall}
                 aria-label={voiceCallDisabledReason ?? _t("voip|voice_call")}
                 onClick={(ev) => voiceCallClick(ev, callOptions[0])}
             >
@@ -335,7 +313,8 @@ export default function RoomHeader({
                             </Tooltip>
                         );
                     })}
-                    {isViewingCall && canGenerateCallLink && createExternalLinkButton}
+
+                    {isViewingCall && <CallGuestLinkButton room={room} />}
                     {((isConnectedToCall && isViewingCall) || isVideoRoom(room)) && <VideoRoomChatButton room={room} />}
 
                     {hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (

src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx

@@ -0,0 +1,167 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Icon as ExternalLinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
+import { Button, IconButton, Tooltip } from "@vector-im/compound-web";
+import React, { useCallback } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+import { EventType, IJoinRuleEventContent, JoinRule, Room } from "matrix-js-sdk/src/matrix";
+
+import Modal from "../../../../Modal";
+import ShareDialog from "../../dialogs/ShareDialog";
+import { _t } from "../../../../languageHandler";
+import SettingsStore from "../../../../settings/SettingsStore";
+import { calculateRoomVia } from "../../../../utils/permalinks/Permalinks";
+import BaseDialog from "../../dialogs/BaseDialog";
+import { useGuestAccessInformation } from "../../../../hooks/room/useGuestAccessInformation";
+
+/**
+ * Display a button to open a dialog to share a link to the call using a element call guest spa url (`element_call:guest_spa_url` in the EW config).
+ * @param room
+ * @returns Nothing if there is not the option to share a link (No guest_spa_url is set) or a button to open a dialog to share the link.
+ */
+export const CallGuestLinkButton: React.FC<{ room: Room }> = ({ room }) => {
+    const { canInviteGuests, guestSpaUrl, isRoomJoinable, canInvite } = useGuestAccessInformation(room);
+
+    const generateCallLink = useCallback(() => {
+        if (!isRoomJoinable()) throw new Error("Cannot create link for room that users can not join without invite.");
+        if (!guestSpaUrl) throw new Error("No guest SPA url for external links provided.");
+        const url = new URL(guestSpaUrl);
+        url.pathname = "/room/";
+        // Set params for the sharable url
+        url.searchParams.set("roomId", room.roomId);
+        if (room.hasEncryptionStateEvent()) url.searchParams.set("perParticipantE2EE", "true");
+        for (const server of calculateRoomVia(room)) {
+            url.searchParams.set("viaServers", server);
+        }
+
+        // Move params into hash
+        url.hash = "/" + room.name + url.search;
+        url.search = "";
+
+        logger.info("Generated element call external url:", url);
+        return url;
+    }, [guestSpaUrl, isRoomJoinable, room]);
+
+    const showLinkModal = useCallback(() => {
+        try {
+            // generateCallLink throws if the invite rules are not met
+            const target = generateCallLink();
+            Modal.createDialog(ShareDialog, {
+                target,
+                customTitle: _t("share|share_call"),
+                subtitle: _t("share|share_call_subtitle"),
+            });
+        } catch (e) {
+            logger.error("Could not generate call link.", e);
+        }
+    }, [generateCallLink]);
+
+    const shareClick = useCallback(() => {
+        if (isRoomJoinable()) {
+            showLinkModal();
+        } else {
+            // the room needs to be set to public or knock to generate a link
+            Modal.createDialog(JoinRuleDialog, {
+                room,
+                // If the user cannot invite the Knocking is not given as an option.
+                canInvite,
+            }).finished.then(() => {
+                // we need to use the function here because the callback got called before the state was updated.
+                if (isRoomJoinable()) showLinkModal();
+            });
+        }
+    }, [isRoomJoinable, showLinkModal, room, canInvite]);
+
+    return (
+        <>
+            {canInviteGuests && (
+                <Tooltip label={_t("voip|get_call_link")}>
+                    <IconButton onClick={shareClick} aria-label={_t("voip|get_call_link")}>
+                        <ExternalLinkIcon />
+                    </IconButton>
+                </Tooltip>
+            )}
+        </>
+    );
+};
+
+/**
+ * A dialog to change the join rule of a room to public or knock.
+ * @param room The room to change the join rule of.
+ * @param onFinished Callback that is getting called if the dialog wants to close.
+ */
+export const JoinRuleDialog: React.FC<{
+    onFinished(): void;
+    room: Room;
+    canInvite: boolean;
+}> = ({ onFinished, room, canInvite }) => {
+    const askToJoinEnabled = SettingsStore.getValue("feature_ask_to_join");
+    const [isUpdating, setIsUpdating] = React.useState<undefined | JoinRule>(undefined);
+    const changeJoinRule = useCallback(
+        async (newRule: JoinRule) => {
+            if (isUpdating !== undefined) return;
+            setIsUpdating(newRule);
+            await room.client.sendStateEvent(
+                room.roomId,
+                EventType.RoomJoinRules,
+                {
+                    join_rule: newRule,
+                } as IJoinRuleEventContent,
+                "",
+            );
+            // Show the dialog for a bit to give the user feedback
+            setTimeout(() => onFinished(), 500);
+        },
+        [isUpdating, onFinished, room.client, room.roomId],
+    );
+    return (
+        <BaseDialog title={_t("update_room_access_modal|title")} onFinished={onFinished} className="mx_JoinRuleDialog">
+            <p>{_t("update_room_access_modal|description")}</p>
+            <div className="mx_JoinRuleDialogButtons">
+                {askToJoinEnabled && canInvite && (
+                    <Button
+                        kind="secondary"
+                        className="mx_Dialog_nonDialogButton"
+                        disabled={isUpdating === JoinRule.Knock}
+                        onClick={() => changeJoinRule(JoinRule.Knock)}
+                    >
+                        {_t("action|ask_to_join")}
+                    </Button>
+                )}
+                <Button
+                    className="mx_Dialog_nonDialogButton"
+                    kind="destructive"
+                    disabled={isUpdating === JoinRule.Public}
+                    onClick={() => changeJoinRule(JoinRule.Public)}
+                >
+                    {_t("common|public")}
+                </Button>
+            </div>
+            <p>{_t("update_room_access_modal|dont_change_description")}</p>
+            <div className="mx_JoinRuleDialogButtons">
+                <Button
+                    kind="tertiary"
+                    className="mx_Dialog_nonDialogButton"
+                    onClick={() => {
+                        if (isUpdating === undefined) onFinished();
+                    }}
+                >
+                    {_t("update_room_access_modal|no_change")}
+                </Button>
+            </div>
+        </BaseDialog>
+    );
+};

src/hooks/room/useGuestAccessInformation.ts

@@ -0,0 +1,58 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useMemo } from "react";
+import { EventType, JoinRule, Room } from "matrix-js-sdk/src/matrix";
+
+import SdkConfig from "../../SdkConfig";
+import { useRoomState } from "../useRoomState";
+
+interface GuestAccessInformation {
+    canInviteGuests: boolean;
+    guestSpaUrl?: string;
+    isRoomJoinable: () => boolean;
+    canInvite: boolean;
+}
+
+/**
+ * Helper to retrieve the guest access related information for a room.
+ * @param room
+ * @returns The GuestAccessInformation which helps decide what options the user should be given.
+ */
+export const useGuestAccessInformation = (room: Room): GuestAccessInformation => {
+    const guestSpaUrl = useMemo(() => {
+        return SdkConfig.get("element_call").guest_spa_url;
+    }, []);
+
+    // We use the direct function only in functions triggered by user interaction to avoid computation on every render.
+    const { joinRule, canInvite, canChangeJoinRule } = useRoomState(room, (roomState) => ({
+        joinRule: room.getJoinRule(),
+        canInvite: room.canInvite(room.myUserId),
+        canChangeJoinRule: roomState.maySendStateEvent(EventType.RoomJoinRules, room.myUserId),
+    }));
+    const isRoomJoinable = useMemo(
+        () => joinRule === JoinRule.Public || (joinRule === JoinRule.Knock && canInvite),
+        [canInvite, joinRule],
+    );
+    const canInviteGuests = useMemo(
+        () => (canChangeJoinRule || isRoomJoinable) && guestSpaUrl !== undefined,
+        [canChangeJoinRule, isRoomJoinable, guestSpaUrl],
+    );
+
+    const isRoomJoinableFunction = (): boolean =>
+        room.getJoinRule() === JoinRule.Public || (joinRule === JoinRule.Knock && room.canInvite(room.myUserId));
+    return { canInviteGuests, guestSpaUrl, isRoomJoinable: isRoomJoinableFunction, canInvite };
+};