Show correct call icon for joining a call. (#31489)

* Show correct call icon in header.

* fix import

* Simply useRoomCall output

* Add tests and a label

* update snap

* update test

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

@@ -21,6 +21,7 @@ import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/publi
 import { JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
 import { Flex, Box } from "@element-hq/web-shared-components";
+import { CallType } from "matrix-js-sdk/src/webrtc/call";
 
 import { useRoomName } from "../../../../hooks/useRoomName.ts";
 import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases.ts";
@@ -73,7 +74,7 @@ function RoomHeaderButtons({
         toggleCallMaximized: toggleCall,
         isViewingCall,
         isConnectedToCall,
-        hasActiveCallSession,
+        activeCallSessionType,
         callOptions,
         showVoiceCallButton,
         showVideoCallButton,
@@ -105,15 +106,26 @@ function RoomHeaderButtons({
     );
 
     const joinCallButton = (
-        <Tooltip label={videoCallDisabledReason ?? _t("voip|video_call")}>
+        <Tooltip
+            label={
+                videoCallDisabledReason ??
+                (activeCallSessionType === CallType.Voice ? _t("voip|voice_call") : _t("voip|video_call"))
+            }
+        >
             <Button
                 size="sm"
                 onClick={videoClick}
-                Icon={VideoCallIcon}
+                // If we know this is a voice session, show the voice call. All other kinds of call are video calls.
+                Icon={activeCallSessionType === CallType.Voice ? VoiceCallIcon : VideoCallIcon}
                 className="mx_RoomHeader_join_button"
                 disabled={!!videoCallDisabledReason}
                 color="primary"
-                aria-label={videoCallDisabledReason ?? _t("action|join")}
+                aria-label={
+                    videoCallDisabledReason ??
+                    (activeCallSessionType === CallType.Voice
+                        ? _t("room|header|join_voice_call")
+                        : _t("room|header|join_video_call"))
+                }
                 data-testId="join-call-button"
             >
                 {_t("action|join")}
@@ -303,7 +315,7 @@ function RoomHeaderButtons({
 
             {isViewingCall && <CallGuestLinkButton room={room} />}
 
-            {hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (
+            {activeCallSessionType && !isConnectedToCall && !isViewingCall ? (
                 joinCallButton
             ) : (
                 <>

src/hooks/room/useRoomCall.tsx

@@ -93,7 +93,10 @@ export const useRoomCall = (
     toggleCallMaximized: () => void;
     isViewingCall: boolean;
     isConnectedToCall: boolean;
-    hasActiveCallSession: boolean;
+    /**
+     * The type of call in progress, or `null` if no call is ongoing.
+     */
+    activeCallSessionType: CallType | null;
     callOptions: PlatformCallType[];
     showVideoCallButton: boolean;
     showVoiceCallButton: boolean;
@@ -123,13 +126,20 @@ export const useRoomCall = (
     const groupCall = useCall(room.roomId);
     const isConnectedToCall = useConnectionState(groupCall) === ConnectionState.Connected;
     const hasGroupCall = groupCall !== null;
-    const hasActiveCallSession = useParticipantCount(groupCall) > 0;
     const isViewingCall = useEventEmitterState(
         roomViewStore,
         UPDATE_EVENT,
         () => roomViewStore.isViewingCall() || isVideoRoom(room),
     );
 
+    const participantCount = useParticipantCount(groupCall);
+    const activeCallSessionType = useMemo(() => {
+        if (!groupCall || participantCount === 0) {
+            return null;
+        }
+        return groupCall.callType;
+    }, [participantCount, groupCall]);
+
     // room
     const memberCount = useRoomMemberCount(room);
 
@@ -307,7 +317,7 @@ export const useRoomCall = (
         toggleCallMaximized: toggleCallMaximized,
         isViewingCall: isViewingCall,
         isConnectedToCall: isConnectedToCall,
-        hasActiveCallSession: hasActiveCallSession,
+        activeCallSessionType: activeCallSessionType,
         callOptions,
         showVoiceCallButton: !hideVoiceCallButton,
         showVideoCallButton: !hideVideoCallButton,

src/i18n/strings/en_EN.json

@@ -2029,6 +2029,8 @@
         "forget_room": "Forget this room",
         "forget_space": "Forget this space",
         "header": {
+            "join_video_call": "Join video call",
+            "join_voice_call": "Join voice call",
             "n_people_asking_to_join": {
                 "one": "Asking to join",
                 "other": "%(count)s people asking to join"

test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx

@@ -582,12 +582,21 @@ describe("RoomHeader", () => {
             expect(videoButton).toHaveAttribute("aria-disabled", "true");
         });
 
-        it("join button is shown if there is an ongoing call", async () => {
+        it("join video call button is shown if there is an ongoing call", async () => {
             mockRoomMembers(room, 3);
             // Mock CallStore to return a call with 3 participants
             jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
             render(<RoomHeader room={room} />, getWrapper());
-            const joinButton = getByLabelText(document.body, "Join");
+            const joinButton = getByLabelText(document.body, "Join video call");
+            expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("join voice call button is shown if there is an ongoing call", async () => {
+            mockRoomMembers(room, 3);
+            // Mock CallStore to return a call with 3 participants
+            jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3, CallType.Voice));
+            render(<RoomHeader room={room} />, getWrapper());
+            const joinButton = getByLabelText(document.body, "Join voice call");
             expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
         });
 
@@ -859,7 +868,11 @@ describe("RoomHeader", () => {
 /**
  * Creates a mock Call object with stable participants to prevent React dependency errors
  */
-function createMockCall(roomId: string = "!1:example.org", participantCount: number = 0): Call {
+function createMockCall(
+    roomId: string = "!1:example.org",
+    participantCount: number = 0,
+    callType: CallType = CallType.Video,
+): Call {
     const participants = new Map();
 
     // Create mock participants with devices
@@ -878,6 +891,7 @@ function createMockCall(roomId: string = "!1:example.org", participantCount: num
         participants,
         widget: { id: "test-widget" },
         connectionState: "disconnected",
+        callType,
         on: jest.fn(),
         off: jest.fn(),
         emit: jest.fn(),

test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap

@@ -56,7 +56,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          aria-labelledby="_r_17e_"
+          aria-labelledby="_r_18c_"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -83,7 +83,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          aria-labelledby="_r_17j_"
+          aria-labelledby="_r_18h_"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -98,7 +98,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Threads"
-      aria-labelledby="_r_17o_"
+      aria-labelledby="_r_18m_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       role="button"
@@ -125,7 +125,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Room info"
-      aria-labelledby="_r_17t_"
+      aria-labelledby="_r_18r_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       role="button"