/* Copyright 2021 - 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 React, { useContext } from "react"; import { Room } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { IProps as IContextMenuProps } from "../../structures/ContextMenu"; import IconizedContextMenu, { IconizedContextMenuCheckbox, IconizedContextMenuOption, IconizedContextMenuOptionList, } from "./IconizedContextMenu"; import { _t } from "../../../languageHandler"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { ButtonEvent } from "../elements/AccessibleButton"; import { DefaultTagID, TagID } from "../../../stores/room-list/models"; import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore"; import dis from "../../../dispatcher/dispatcher"; import RoomListActions from "../../../actions/RoomListActions"; import { EchoChamber } from "../../../stores/local-echo/EchoChamber"; import { RoomNotifState } from "../../../RoomNotifs"; import Modal from "../../../Modal"; import ExportDialog from "../dialogs/ExportDialog"; import { useFeatureEnabled } from "../../../hooks/useSettings"; import { usePinnedEvents } from "../right_panel/PinnedMessagesCard"; import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog"; import { useEventEmitterState } from "../../../hooks/useEventEmitter"; import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; import DMRoomMap from "../../../utils/DMRoomMap"; import { Action } from "../../../dispatcher/actions"; import PosthogTrackers from "../../../PosthogTrackers"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; import SettingsStore from "../../../settings/SettingsStore"; import { SdkContextClass } from "../../../contexts/SDKContext"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; import { DeveloperToolsOption } from "./DeveloperToolsOption"; interface IProps extends IContextMenuProps { room: Room; } /** * Room context menu accessible via the room header. * @deprecated will be removed as part of `feature_new_room_decoration_ui` */ const RoomContextMenu: React.FC = ({ room, onFinished, ...props }) => { const cli = useContext(MatrixClientContext); const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () => RoomListStore.instance.getTagsForRoom(room), ); let leaveOption: JSX.Element | undefined; if (roomTags.includes(DefaultTagID.Archived)) { const onForgetRoomClick = (ev: ButtonEvent): void => { ev.preventDefault(); ev.stopPropagation(); dis.dispatch({ action: "forget_room", room_id: room.roomId, }); onFinished(); }; leaveOption = ( ); } else { const onLeaveRoomClick = (ev: ButtonEvent): void => { ev.preventDefault(); ev.stopPropagation(); dis.dispatch({ action: "leave_room", room_id: room.roomId, }); onFinished(); PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuLeaveItem", ev); }; leaveOption = ( ); } 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())); let inviteOption: JSX.Element | undefined; if (room.canInvite(cli.getUserId()!) && !isDm && shouldShowComponent(UIComponent.InviteUsers)) { const onInviteClick = (ev: ButtonEvent): void => { ev.preventDefault(); ev.stopPropagation(); dis.dispatch({ action: "view_invite", roomId: room.roomId, }); onFinished(); PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuInviteItem", ev); }; inviteOption = ( ); } let favouriteOption: JSX.Element | undefined; let lowPriorityOption: JSX.Element | undefined; let notificationOption: JSX.Element | undefined; if (room.getMyMembership() === "join") { const isFavorite = roomTags.includes(DefaultTagID.Favourite); favouriteOption = ( { onTagRoom(e, DefaultTagID.Favourite); PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuFavouriteToggle", e); }} active={isFavorite} label={isFavorite ? _t("Favourited") : _t("Favourite")} iconClassName="mx_RoomTile_iconStar" /> ); const isLowPriority = roomTags.includes(DefaultTagID.LowPriority); lowPriorityOption = ( onTagRoom(e, DefaultTagID.LowPriority)} active={isLowPriority} label={_t("Low priority")} iconClassName="mx_RoomTile_iconArrowDown" /> ); const echoChamber = EchoChamber.forRoom(room); let notificationLabel: string | undefined; let iconClassName: string | undefined; switch (echoChamber.notificationVolume) { case RoomNotifState.AllMessages: notificationLabel = _t("Default"); iconClassName = "mx_RoomTile_iconNotificationsDefault"; break; case RoomNotifState.AllMessagesLoud: notificationLabel = _t("All messages"); iconClassName = "mx_RoomTile_iconNotificationsAllMessages"; break; case RoomNotifState.MentionsOnly: notificationLabel = _t("Mentions only"); iconClassName = "mx_RoomTile_iconNotificationsMentionsKeywords"; break; case RoomNotifState.Mute: notificationLabel = _t("Mute"); iconClassName = "mx_RoomTile_iconNotificationsNone"; break; } notificationOption = ( { ev.preventDefault(); ev.stopPropagation(); dis.dispatch({ action: "open_room_settings", room_id: room.roomId, initial_tab_id: RoomSettingsTab.Notifications, }); onFinished(); PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuNotificationsItem", ev); }} label={_t("Notifications")} iconClassName={iconClassName} > {notificationLabel} ); } let peopleOption: JSX.Element | undefined; let copyLinkOption: JSX.Element | undefined; if (!isDm) { peopleOption = ( { ev.preventDefault(); ev.stopPropagation(); ensureViewingRoom(ev); RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, false); onFinished(); PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuPeopleItem", ev); }} label={_t("People")} iconClassName="mx_RoomTile_iconPeople" > {room.getJoinedMemberCount()} ); copyLinkOption = ( { ev.preventDefault(); ev.stopPropagation(); dis.dispatch({ action: "copy_room", room_id: room.roomId, }); onFinished(); }} label={_t("Copy room link")} iconClassName="mx_RoomTile_iconCopyLink" /> ); } let filesOption: JSX.Element | undefined; if (!isVideoRoom) { filesOption = ( { ev.preventDefault(); ev.stopPropagation(); ensureViewingRoom(ev); RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, false); onFinished(); }} label={_t("Files")} iconClassName="mx_RoomTile_iconFiles" /> ); } const pinningEnabled = useFeatureEnabled("feature_pinning"); const pinCount = usePinnedEvents(pinningEnabled ? room : undefined)?.length; let pinsOption: JSX.Element | undefined; if (pinningEnabled && !isVideoRoom) { pinsOption = ( { ev.preventDefault(); ev.stopPropagation(); ensureViewingRoom(ev); RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, false); onFinished(); }} label={_t("Pinned")} iconClassName="mx_RoomTile_iconPins" > {pinCount > 0 && {pinCount}} ); } let widgetsOption: JSX.Element | undefined; if (!isVideoRoom) { widgetsOption = ( { ev.preventDefault(); ev.stopPropagation(); ensureViewingRoom(ev); RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }, false); onFinished(); }} label={_t("Widgets")} iconClassName="mx_RoomTile_iconWidgets" /> ); } let exportChatOption: JSX.Element | undefined; if (!isVideoRoom) { exportChatOption = ( { ev.preventDefault(); ev.stopPropagation(); Modal.createDialog(ExportDialog, { room }); onFinished(); }} label={_t("Export chat")} iconClassName="mx_RoomTile_iconExport" /> ); } const onTagRoom = (ev: ButtonEvent, tagId: TagID): void => { ev.preventDefault(); ev.stopPropagation(); if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) { const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite; const isApplied = RoomListStore.instance.getTagsForRoom(room).includes(tagId); const removeTag = isApplied ? tagId : inverseTag; const addTag = isApplied ? null : tagId; dis.dispatch(RoomListActions.tagRoom(cli, room, removeTag, addTag, 0)); } else { logger.warn(`Unexpected tag ${tagId} applied to ${room.roomId}`); } const action = getKeyBindingsManager().getAccessibilityAction(ev as React.KeyboardEvent); switch (action) { case KeyBindingAction.Enter: // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12 onFinished(); break; } }; const ensureViewingRoom = (ev: ButtonEvent): void => { if (SdkContextClass.instance.roomViewStore.getRoomId() === room.roomId) return; dis.dispatch( { action: Action.ViewRoom, room_id: room.roomId, metricsTrigger: "RoomList", metricsViaKeyboard: ev.type !== "click", }, true, ); }; return ( {inviteOption} {notificationOption} {favouriteOption} {peopleOption} {filesOption} {pinsOption} {widgetsOption} {lowPriorityOption} {copyLinkOption} { ev.preventDefault(); ev.stopPropagation(); dis.dispatch({ action: "open_room_settings", room_id: room.roomId, }); onFinished(); PosthogTrackers.trackInteraction("WebRoomHeaderContextMenuSettingsItem", ev); }} label={_t("Settings")} iconClassName="mx_RoomTile_iconSettings" /> {exportChatOption} {SettingsStore.getValue("developerMode") && ( )} {leaveOption} ); }; export default RoomContextMenu;