Call guest access link creation to join calls as a non registered user via the EC SPA (#12259)

* Add externall call link button if in public call room

Signed-off-by: Timo K <toger5@hotmail.de>

* Allow configuring a spa homeserver url.

Signed-off-by: Timo K <toger5@hotmail.de>

* temp

Signed-off-by: Timo K <toger5@hotmail.de>

* remove homeserver url

Signed-off-by: Timo K <toger5@hotmail.de>

* Add custom title to share dialog.
So that we can use it as a "share call" dialog.

Signed-off-by: Timo K <toger5@hotmail.de>

* - rename config options
- only show link button if a guest url is provided
- share dialog custom Title
- rename call share labels

Signed-off-by: Timo K <toger5@hotmail.de>

* rename to title_link

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for ShareDialog

Signed-off-by: Timo K <toger5@hotmail.de>

* add tests for share call button

Signed-off-by: Timo K <toger5@hotmail.de>

* review

Signed-off-by: Timo K <toger5@hotmail.de>

* remove comment

Signed-off-by: Timo K <toger5@hotmail.de>

* Update src/components/views/dialogs/ShareDialog.tsx

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>

src/components/views/rooms/RoomHeader.tsx

@@ -18,6 +18,7 @@ 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";
@@ -26,6 +27,7 @@ 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";
@@ -54,6 +56,8 @@ 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";
 
 export default function RoomHeader({
     room,
@@ -78,6 +82,8 @@ export default function RoomHeader({
         videoCallClick,
         toggleCallMaximized: toggleCall,
         isViewingCall,
+        generateCallLink,
+        canGenerateCallLink,
         isConnectedToCall,
         hasActiveCallSession,
         callOptions,
@@ -118,6 +124,20 @@ 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}>
@@ -125,7 +145,13 @@ export default function RoomHeader({
             </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
@@ -309,7 +335,7 @@ export default function RoomHeader({
                             </Tooltip>
                         );
                     })}
-
+                    {isViewingCall && canGenerateCallLink && createExternalLinkButton}
                     {((isConnectedToCall && isViewingCall) || isVideoRoom(room)) && <VideoRoomChatButton room={room} />}
 
                     {hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (