diff --git a/src/components/views/messages/ReactionsRow.tsx b/src/components/views/messages/ReactionsRow.tsx index c4f796e084..d2718c20b1 100644 --- a/src/components/views/messages/ReactionsRow.tsx +++ b/src/components/views/messages/ReactionsRow.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from "react"; import classNames from "classnames"; -import { EventType } from "matrix-js-sdk/src/@types/event"; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import { Relations } from "matrix-js-sdk/src/models/relations"; @@ -27,7 +26,7 @@ import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/Co import ContextMenu, { aboveLeftOf, useContextMenu } from "../../structures/ContextMenu"; import ReactionPicker from "../emojipicker/ReactionPicker"; import ReactionsRowButton from "./ReactionsRowButton"; -import MatrixClientContext from "../../../contexts/MatrixClientContext"; +import RoomContext from "../../../contexts/RoomContext"; // The maximum number of reactions to initially show on a message. const MAX_ITEMS_WHEN_LIMITED = 8; @@ -76,10 +75,12 @@ interface IState { @replaceableComponent("views.messages.ReactionsRow") export default class ReactionsRow extends React.PureComponent { - static contextType = MatrixClientContext; + static contextType = RoomContext; + public context!: React.ContextType; - constructor(props, context) { + constructor(props: IProps, context: React.ContextType) { super(props, context); + this.context = context; this.state = { myReactions: this.getMyReactions(), @@ -143,7 +144,7 @@ export default class ReactionsRow extends React.PureComponent { if (!reactions) { return null; } - const userId = this.context.getUserId(); + const userId = this.context.room.client.getUserId(); const myReactions = reactions.getAnnotationsBySender()[userId]; if (!myReactions) { return null; @@ -165,6 +166,11 @@ export default class ReactionsRow extends React.PureComponent { return null; } + const cli = this.context.room.client; + const room = cli.getRoom(mxEvent.getRoomId()); + const isPeeking = room.getMyMembership() !== "join"; + const canReact = !isPeeking && this.context.canReact; + let items = reactions.getSortedAnnotationsByKey().map(([content, events]) => { const count = events.size; if (!count) { @@ -183,6 +189,7 @@ export default class ReactionsRow extends React.PureComponent { mxEvent={mxEvent} reactionEvents={events} myReactionEvent={myReactionEvent} + disabled={!canReact} />; }).filter(item => !!item); @@ -203,11 +210,8 @@ export default class ReactionsRow extends React.PureComponent { ; } - const cli = this.context; - let addReactionButton; - const room = cli.getRoom(mxEvent.getRoomId()); - if (room.getMyMembership() === "join" && room.currentState.maySendEvent(EventType.Reaction, cli.getUserId())) { + if (room.getMyMembership() === "join" && this.context.canReact) { addReactionButton = ; } diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx index 8934b2b98f..242428ed36 100644 --- a/src/components/views/messages/ReactionsRowButton.tsx +++ b/src/components/views/messages/ReactionsRowButton.tsx @@ -37,6 +37,8 @@ interface IProps { reactionEvents: Set; // A possible Matrix event if the current user has voted for this type myReactionEvent?: MatrixEvent; + // Whether to prevent quick-reactions by clicking on this reaction + disabled?: boolean; } interface IState { @@ -121,12 +123,12 @@ export default class ReactionsRowButton extends React.PureComponent