From 77a468f8e8f98aabebd01aaa972143043432febd Mon Sep 17 00:00:00 2001 From: Germain Date: Thu, 31 Aug 2023 14:27:15 +0100 Subject: [PATCH] Extract place call logic to its own file (#11494) * Extract place call logic to its own file * Simplify makeCall by not using useCallback * lint fix --- src/components/views/rooms/RoomHeader.tsx | 41 +++-------------- src/hooks/room/useRoomCallStatus.ts | 10 ++--- src/utils/room/placeCall.ts | 55 +++++++++++++++++++++++ 3 files changed, 65 insertions(+), 41 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 e2227e5bd3..05e649bddb 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"; @@ -37,15 +37,12 @@ import { _t, getCurrentLanguage } from "../../../languageHandler"; 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 { 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"; import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus"; import { E2EStatus } from "../../../utils/ShieldUtils"; import FacePile from "../elements/FacePile"; @@ -94,34 +91,6 @@ 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; - } - }, - [room.roomId], - ); - const threadNotifications = useRoomThreadNotifications(room); const globalNotificationState = useGlobalNotificationState(); @@ -193,8 +162,8 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { { - placeCall(CallType.Voice, voiceCallType); + onClick={() => { + placeCall(room, CallType.Voice, voiceCallType); }} > @@ -204,7 +173,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { disabled={!!videoCallDisabledReason} title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!} onClick={() => { - placeCall(CallType.Video, videoCallType); + placeCall(room, CallType.Video, videoCallType); }} > diff --git a/src/hooks/room/useRoomCallStatus.ts b/src/hooks/room/useRoomCallStatus.ts index 5de205ba76..1f96395a35 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 0000000000..b684b494ea --- /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; + } +};