diff --git a/src/components/views/rooms/RoomHeader/RoomHeader.tsx b/src/components/views/rooms/RoomHeader/RoomHeader.tsx
index 02fbf678a3..e2cc00abda 100644
--- a/src/components/views/rooms/RoomHeader/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader/RoomHeader.tsx
@@ -1,4 +1,5 @@
/*
+Copyright (C) 2025 Element Creations Ltd
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
@@ -6,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
-import React, { type JSX, useCallback, useMemo, useState } from "react";
+import React, { type JSX, useCallback, useState } from "react";
import { Text, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call-solid";
@@ -29,7 +30,6 @@ import { _t } from "../../../../languageHandler.tsx";
import { getPlatformCallTypeProps, useRoomCall } from "../../../../hooks/room/useRoomCall.tsx";
import { useRoomThreadNotifications } from "../../../../hooks/room/useRoomThreadNotifications.ts";
import { useGlobalNotificationState } from "../../../../hooks/useGlobalNotificationState.ts";
-import SdkConfig from "../../../../SdkConfig.ts";
import { useFeatureEnabled } from "../../../../hooks/useSettings.ts";
import { useEncryptionStatus } from "../../../../hooks/useEncryptionStatus.ts";
import { E2EStatus } from "../../../../utils/ShieldUtils.ts";
@@ -78,16 +78,6 @@ function RoomHeaderButtons({
showVoiceCallButton,
showVideoCallButton,
} = useRoomCall(room);
-
- const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
- /**
- * A special mode where only Element Call is used. In this case we want to
- * hide the voice call button
- */
- const useElementCallExclusively = useMemo(() => {
- return SdkConfig.get("element_call").use_exclusively && groupCallsEnabled;
- }, [groupCallsEnabled]);
-
const threadNotifications = useRoomThreadNotifications(room);
const globalNotificationState = useGlobalNotificationState();
@@ -101,6 +91,11 @@ function RoomHeaderButtons({
[callOptions, videoCallClick],
);
+ const voiceClick = useCallback(
+ (ev: React.MouseEvent) => voiceCallClick(ev, callOptions[0]),
+ [callOptions, voiceCallClick],
+ );
+
const toggleCallButton = (
@@ -126,35 +121,50 @@ function RoomHeaderButtons({
);
- const callIconWithTooltip = (
+ const videoCallIconWithTooltip = (
);
- const [menuOpen, setMenuOpen] = useState(false);
+ const voiceCallIconWithTooltip = (
+
+
+
+ );
- const onOpenChange = useCallback(
+ const [videoMenuOpen, setVideoMenuOpen] = useState(false);
+
+ const onVideoOpenChange = useCallback(
(newOpen: boolean) => {
- if (!videoCallDisabledReason) setMenuOpen(newOpen);
+ if (!videoCallDisabledReason) setVideoMenuOpen(newOpen);
},
[videoCallDisabledReason],
);
+ const [voiceMenuOpen, setVoiceMenuOpen] = useState(false);
+
+ const onVoiceOpenChange = useCallback(
+ (newOpen: boolean) => {
+ if (!voiceCallDisabledReason) setVoiceMenuOpen(newOpen);
+ },
+ [voiceCallDisabledReason],
+ );
+
const startVideoCallButton = (
<>
{/* Can be either a menu or just a button depending on the number of call options.*/}
{callOptions.length > 1 ? (