From 54514abda7fa56502278c8f35f3059cf8890bfeb Mon Sep 17 00:00:00 2001 From: Germain Date: Wed, 30 Aug 2023 15:53:03 +0100 Subject: [PATCH 1/3] Extract place call logic to its own file --- src/components/views/rooms/RoomHeader.tsx | 40 ++++------------- src/hooks/room/useRoomCallStatus.ts | 10 ++--- src/utils/room/placeCall.ts | 55 +++++++++++++++++++++++ 3 files changed, 68 insertions(+), 37 deletions(-) create mode 100644 src/utils/room/placeCall.ts diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index eb324439645..2724d77e0fa 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -31,16 +31,13 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { useTopic } from "../../../hooks/room/useTopic"; import { Flex } from "../../utils/Flex"; import { Box } from "../../utils/Box"; -import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus"; -import LegacyCallHandler from "../../../LegacyCallHandler"; -import defaultDispatcher from "../../../dispatcher/dispatcher"; -import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; -import { Action } from "../../../dispatcher/actions"; +import { PlatformCallType, useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus"; import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState"; import SdkConfig from "../../../SdkConfig"; import { useFeatureEnabled } from "../../../hooks/useSettings"; +import { placeCall } from "../../../utils/room/placeCall"; /** * A helper to transform a notification color to the what the Compound Icon Button @@ -81,32 +78,11 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { return SdkConfig.get("element_call").use_exclusively && groupCallsEnabled; }, [groupCallsEnabled]); - const placeCall = useCallback( - async (callType: CallType, platformCallType: typeof voiceCallType) => { - switch (platformCallType) { - case "legacy_or_jitsi": - await LegacyCallHandler.instance.placeCall(room.roomId, callType); - break; - // TODO: Remove the jitsi_or_element_call case and - // use the commented code below - case "element_call": - case "jitsi_or_element_call": - defaultDispatcher.dispatch({ - action: Action.ViewRoom, - room_id: room.roomId, - view_call: true, - metricsTrigger: undefined, - }); - break; - - // case "jitsi_or_element_call": - // TODO: Open dropdown menu to choice between - // EC and Jitsi. Waiting on Compound's dropdown - // component - // break; - } + const makeCall = useCallback( + (callType: CallType, platformCallType: PlatformCallType) => { + placeCall(room, callType, platformCallType); }, - [room.roomId], + [room], ); const threadNotifications = useRoomThreadNotifications(room); @@ -150,7 +126,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { disabled={!!voiceCallDisabledReason} title={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!} onClick={async () => { - placeCall(CallType.Voice, voiceCallType); + makeCall(CallType.Voice, voiceCallType); }} > @@ -160,7 +136,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { disabled={!!videoCallDisabledReason} title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!} onClick={() => { - placeCall(CallType.Video, videoCallType); + makeCall(CallType.Video, videoCallType); }} > diff --git a/src/hooks/room/useRoomCallStatus.ts b/src/hooks/room/useRoomCallStatus.ts index 5de205ba768..1f96395a355 100644 --- a/src/hooks/room/useRoomCallStatus.ts +++ b/src/hooks/room/useRoomCallStatus.ts @@ -28,7 +28,7 @@ import { _t } from "../../languageHandler"; import { useRoomMemberCount } from "../useRoomMembers"; import { ElementCall } from "../../models/Call"; -type CallType = "element_call" | "jitsi_or_element_call" | "legacy_or_jitsi"; +export type PlatformCallType = "element_call" | "jitsi_or_element_call" | "legacy_or_jitsi"; const DEFAULT_DISABLED_REASON = null; const DEFAULT_CALL_TYPE = "jitsi_or_element_call"; @@ -42,14 +42,14 @@ export const useRoomCallStatus = ( room: Room, ): { voiceCallDisabledReason: string | null; - voiceCallType: CallType; + voiceCallType: PlatformCallType; videoCallDisabledReason: string | null; - videoCallType: CallType; + videoCallType: PlatformCallType; } => { const [voiceCallDisabledReason, setVoiceCallDisabledReason] = useState(DEFAULT_DISABLED_REASON); const [videoCallDisabledReason, setVideoCallDisabledReason] = useState(DEFAULT_DISABLED_REASON); - const [voiceCallType, setVoiceCallType] = useState(DEFAULT_CALL_TYPE); - const [videoCallType, setVideoCallType] = useState(DEFAULT_CALL_TYPE); + const [voiceCallType, setVoiceCallType] = useState(DEFAULT_CALL_TYPE); + const [videoCallType, setVideoCallType] = useState(DEFAULT_CALL_TYPE); const groupCallsEnabled = useFeatureEnabled("feature_group_calls"); const useElementCallExclusively = useMemo(() => { diff --git a/src/utils/room/placeCall.ts b/src/utils/room/placeCall.ts new file mode 100644 index 00000000000..b684b494ea6 --- /dev/null +++ b/src/utils/room/placeCall.ts @@ -0,0 +1,55 @@ +/* +Copyright 2023 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 { CallType } from "matrix-js-sdk/src/webrtc/call"; +import { Room } from "matrix-js-sdk/src/matrix"; + +import LegacyCallHandler from "../../LegacyCallHandler"; +import { PlatformCallType } from "../../hooks/room/useRoomCallStatus"; +import defaultDispatcher from "../../dispatcher/dispatcher"; +import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload"; +import { Action } from "../../dispatcher/actions"; + +/** + * Helper to place a call in a room that works with all the legacy modes + * @param room the room to place the call in + * @param callType the type of call + * @param platformCallType the platform to pass the call on + */ +export const placeCall = async (room: Room, callType: CallType, platformCallType: PlatformCallType): Promise => { + switch (platformCallType) { + case "legacy_or_jitsi": + await LegacyCallHandler.instance.placeCall(room.roomId, callType); + break; + // TODO: Remove the jitsi_or_element_call case and + // use the commented code below + case "element_call": + case "jitsi_or_element_call": + defaultDispatcher.dispatch({ + action: Action.ViewRoom, + room_id: room.roomId, + view_call: true, + metricsTrigger: undefined, + }); + break; + + // case "jitsi_or_element_call": + // TODO: Open dropdown menu to choice between + // EC and Jitsi. Waiting on Compound's dropdown + // component + // break; + } +}; From 484fda52825d21ed7fd0e178b263d7712129681c Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 31 Aug 2023 11:32:04 +0100 Subject: [PATCH 2/3] Simplify makeCall by not using useCallback --- src/components/views/rooms/RoomHeader.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 2724d77e0fa..0ebb1d5ea57 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useMemo } from "react"; +import React, { useMemo } from "react"; import { Body as BodyText, IconButton } from "@vector-im/compound-web"; import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg"; import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg"; @@ -31,7 +31,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { useTopic } from "../../../hooks/room/useTopic"; import { Flex } from "../../utils/Flex"; import { Box } from "../../utils/Box"; -import { PlatformCallType, useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus"; +import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus"; import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications"; import { NotificationColor } from "../../../stores/notifications/NotificationColor"; import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState"; @@ -78,13 +78,6 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { return SdkConfig.get("element_call").use_exclusively && groupCallsEnabled; }, [groupCallsEnabled]); - const makeCall = useCallback( - (callType: CallType, platformCallType: PlatformCallType) => { - placeCall(room, callType, platformCallType); - }, - [room], - ); - const threadNotifications = useRoomThreadNotifications(room); const globalNotificationState = useGlobalNotificationState(); @@ -125,8 +118,8 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { { - makeCall(CallType.Voice, voiceCallType); + onClick={() => { + placeCall(room, CallType.Voice, voiceCallType); }} > @@ -136,7 +129,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { disabled={!!videoCallDisabledReason} title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!} onClick={() => { - makeCall(CallType.Video, videoCallType); + placeCall(room, CallType.Video, videoCallType); }} > From d2ad3eb60b5225396111afd0777f7dd999f9efbb Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 31 Aug 2023 13:37:41 +0100 Subject: [PATCH 3/3] lint fix --- src/components/views/rooms/RoomHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 8aadb35ef6b..05e649bddb9 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { Body as BodyText, IconButton, Tooltip } from "@vector-im/compound-web"; import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call.svg"; import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";