From 2e6f8511f23fb8f56a5b704a56563556d0af4580 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 30 Jul 2024 18:36:04 +0100 Subject: [PATCH] Extract useIsVideoRoom hook (#12843) * Extract useIsVideoRoom hook Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update RoomInfoLine.tsx --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/context_menus/RoomContextMenu.tsx | 6 ++--- .../views/right_panel/RoomSummaryCard.tsx | 6 ++--- src/components/views/rooms/RoomInfoLine.tsx | 5 ++--- .../views/rooms/RoomPreviewCard.tsx | 4 ++-- src/utils/video-rooms.ts | 22 ++++++++++++++++++- 5 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/components/views/context_menus/RoomContextMenu.tsx b/src/components/views/context_menus/RoomContextMenu.tsx index 3c77f32cb3..0dbd4b5395 100644 --- a/src/components/views/context_menus/RoomContextMenu.tsx +++ b/src/components/views/context_menus/RoomContextMenu.tsx @@ -52,6 +52,7 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent import { UIComponent } from "../../../settings/UIFeature"; import { DeveloperToolsOption } from "./DeveloperToolsOption"; import { tagRoom } from "../../../utils/room/tagRoom"; +import { useIsVideoRoom } from "../../../utils/video-rooms"; interface IProps extends IContextMenuProps { room: Room; @@ -113,10 +114,7 @@ const RoomContextMenu: React.FC = ({ room, onFinished, ...props }) => { } const isDm = DMRoomMap.shared().getUserIdForRoomId(room.roomId); - const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms"); - const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms"); - const isVideoRoom = - videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom())); + const isVideoRoom = useIsVideoRoom(room); const canInvite = useEventEmitterState(cli, RoomMemberEvent.PowerLevel, () => room.canInvite(cli.getUserId()!)); let inviteOption: JSX.Element | undefined; if (canInvite && !isDm && shouldShowComponent(UIComponent.InviteUsers)) { diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 2552a8a408..ff35202b34 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -101,6 +101,7 @@ import { useDispatcher } from "../../../hooks/useDispatcher"; import { Action } from "../../../dispatcher/actions"; import { Key } from "../../../Keyboard"; import { useTransition } from "../../../hooks/useTransition"; +import { useIsVideoRoom } from "../../../utils/video-rooms"; interface IProps { room: Room; @@ -416,10 +417,7 @@ const RoomSummaryCard: React.FC = ({ const isRoomEncrypted = useIsEncrypted(cli, room); const roomContext = useContext(RoomContext); const e2eStatus = roomContext.e2eStatus; - const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms"); - const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms"); - const isVideoRoom = - videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom())); + const isVideoRoom = useIsVideoRoom(room); const roomState = useRoomState(room); const directRoomsList = useAccountData>(room.client, EventType.Direct); diff --git a/src/components/views/rooms/RoomInfoLine.tsx b/src/components/views/rooms/RoomInfoLine.tsx index b443ecfada..b026054acb 100644 --- a/src/components/views/rooms/RoomInfoLine.tsx +++ b/src/components/views/rooms/RoomInfoLine.tsx @@ -23,9 +23,9 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; import { useAsyncMemo } from "../../../hooks/useAsyncMemo"; import { useRoomState } from "../../../hooks/useRoomState"; -import { useFeatureEnabled } from "../../../hooks/useSettings"; import { useRoomMemberCount, useMyRoomMembership } from "../../../hooks/useRoomMembers"; import AccessibleButton from "../elements/AccessibleButton"; +import { useIsVideoRoom } from "../../../utils/video-rooms"; interface IProps { room: Room; @@ -45,8 +45,7 @@ const RoomInfoLine: FC = ({ room }) => { const membership = useMyRoomMembership(room); const memberCount = useRoomMemberCount(room); - const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms"); - const isVideoRoom = room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()); + const isVideoRoom = useIsVideoRoom(room, true); let iconClass: string; let roomType: string; diff --git a/src/components/views/rooms/RoomPreviewCard.tsx b/src/components/views/rooms/RoomPreviewCard.tsx index ee31206c38..2fc9a57aa6 100644 --- a/src/components/views/rooms/RoomPreviewCard.tsx +++ b/src/components/views/rooms/RoomPreviewCard.tsx @@ -37,6 +37,7 @@ import RoomAvatar from "../avatars/RoomAvatar"; import MemberAvatar from "../avatars/MemberAvatar"; import { BetaPill } from "../beta/BetaCard"; import RoomInfoLine from "./RoomInfoLine"; +import { useIsVideoRoom } from "../../../utils/video-rooms"; interface IProps { room: Room; @@ -51,8 +52,7 @@ interface IProps { const RoomPreviewCard: FC = ({ room, onJoinButtonClicked, onRejectButtonClicked }) => { const cli = useContext(MatrixClientContext); const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms"); - const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms"); - const isVideoRoom = room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()); + const isVideoRoom = useIsVideoRoom(room, true); const myMembership = useMyRoomMembership(room); useDispatcher(defaultDispatcher, (payload) => { if (payload.action === Action.JoinRoomError && payload.roomId === room.roomId) { diff --git a/src/utils/video-rooms.ts b/src/utils/video-rooms.ts index 4e17a39662..eae0ca0cd0 100644 --- a/src/utils/video-rooms.ts +++ b/src/utils/video-rooms.ts @@ -16,6 +16,26 @@ limitations under the License. import type { Room } from "matrix-js-sdk/src/matrix"; import SettingsStore from "../settings/SettingsStore"; +import { useFeatureEnabled } from "../hooks/useSettings"; + +function checkIsVideoRoom(room: Room, elementCallVideoRoomsEnabled: boolean): boolean { + return room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()); +} export const isVideoRoom = (room: Room): boolean => - room.isElementVideoRoom() || (SettingsStore.getValue("feature_element_call_video_rooms") && room.isCallRoom()); + checkIsVideoRoom(room, SettingsStore.getValue("feature_element_call_video_rooms")); + +/** + * Returns whether the given room is a video room based on the current feature flags. + * @param room The room to check. + * @param skipVideoRoomsEnabledCheck If true, the check for the video rooms feature flag is skipped, + * useful for suggesting to the user to enable the labs flag. + */ +export const useIsVideoRoom = (room?: Room, skipVideoRoomsEnabledCheck = false): boolean => { + const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms"); + const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms"); // react to updates as isVideoRoom reads the value itself + + if (!room) return false; + if (!videoRoomsEnabled && !skipVideoRoomsEnabledCheck) return false; + return checkIsVideoRoom(room, elementCallVideoRoomsEnabled); +};