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>

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<IProps> = ({ room, onFinished, ...props }) => {
     }
 
     const isDm = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-    const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
+    const isVideoRoom = useIsVideoRoom(room);
-    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
-    const isVideoRoom =
-        videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()));
     const canInvite = useEventEmitterState(cli, RoomMemberEvent.PowerLevel, () => room.canInvite(cli.getUserId()!));
     let inviteOption: JSX.Element | undefined;
     if (canInvite && !isDm && shouldShowComponent(UIComponent.InviteUsers)) {

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<IProps> = ({
     const isRoomEncrypted = useIsEncrypted(cli, room);
     const roomContext = useContext(RoomContext);
     const e2eStatus = roomContext.e2eStatus;
-    const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
+    const isVideoRoom = useIsVideoRoom(room);
-    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
-    const isVideoRoom =
-        videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()));
 
     const roomState = useRoomState(room);
     const directRoomsList = useAccountData<Record<string, string[]>>(room.client, EventType.Direct);

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<IProps> = ({ room }) => {
     const membership = useMyRoomMembership(room);
     const memberCount = useRoomMemberCount(room);
 
-    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
+    const isVideoRoom = useIsVideoRoom(room, true);
-    const isVideoRoom = room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom());
 
     let iconClass: string;
     let roomType: string;

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<IProps> = ({ room, onJoinButtonClicked, onRejectButtonClicked }) => {
     const cli = useContext(MatrixClientContext);
     const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
-    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
+    const isVideoRoom = useIsVideoRoom(room, true);
-    const isVideoRoom = room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom());
     const myMembership = useMyRoomMembership(room);
     useDispatcher(defaultDispatcher, (payload) => {
         if (payload.action === Action.JoinRoomError && payload.roomId === room.roomId) {

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);
+};