diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx index b4f2606d598..381f7ec08bd 100644 --- a/src/components/views/elements/ReplyChain.tsx +++ b/src/components/views/elements/ReplyChain.tsx @@ -20,13 +20,13 @@ import classNames from 'classnames'; import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import { Room } from 'matrix-js-sdk/src/models/room'; import { Relations } from 'matrix-js-sdk/src/models/relations'; +import { MatrixClient } from 'matrix-js-sdk/src/client'; import { _t } from '../../../languageHandler'; import dis from '../../../dispatcher/dispatcher'; import { makeUserPermalink, RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import SettingsStore from "../../../settings/SettingsStore"; import { Layout } from "../../../settings/enums/Layout"; -import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import { Action } from "../../../dispatcher/actions"; import { replaceableComponent } from "../../../utils/replaceableComponent"; @@ -34,7 +34,9 @@ import Spinner from './Spinner'; import ReplyTile from "../rooms/ReplyTile"; import Pill from './Pill'; import { ButtonEvent } from './AccessibleButton'; -import { getParentEventId } from '../../../utils/Reply'; +import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply'; +import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext"; +import { MatrixClientPeg } from '../../../MatrixClientPeg'; /** * This number is based on the previous behavior - if we have message of height @@ -76,12 +78,14 @@ interface IState { // be low as each event being loaded (after the first) is triggered by an explicit user action. @replaceableComponent("views.elements.ReplyChain") export default class ReplyChain extends React.Component { - static contextType = MatrixClientContext; + static contextType = RoomContext; + public context!: React.ContextType; + private unmounted = false; private room: Room; private blockquoteRef = React.createRef(); - constructor(props, context) { + constructor(props: IProps, context: React.ContextType) { super(props, context); this.state = { @@ -91,7 +95,11 @@ export default class ReplyChain extends React.Component { err: false, }; - this.room = this.context.getRoom(this.props.parentEv.getRoomId()); + this.room = this.matrixClient.getRoom(this.props.parentEv.getRoomId()); + } + + private get matrixClient(): MatrixClient { + return MatrixClientPeg.get(); } componentDidMount() { @@ -158,7 +166,7 @@ export default class ReplyChain extends React.Component { try { // ask the client to fetch the event we want using the context API, only interface to do so is to ask // for a timeline with that event, but once it is loaded we can use findEventById to look up the ev map - await this.context.getEventTimeline(this.room.getUnfilteredTimelineSet(), eventId); + await this.matrixClient.getEventTimeline(this.room.getUnfilteredTimelineSet(), eventId); } catch (e) { // if it fails catch the error and return early, there's no point trying to find the event in this case. // Return null as it is falsey and thus should be treated as an error (as the event cannot be resolved). @@ -198,6 +206,7 @@ export default class ReplyChain extends React.Component { render() { let header = null; + const inThread = this.context.timelineRenderingType === TimelineRenderingType.Thread; if (this.state.err) { header =
{ @@ -205,9 +214,9 @@ export default class ReplyChain extends React.Component { 'it either does not exist or you do not have permission to view it.') }
; - } else if (this.state.loadedEv) { + } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0], inThread)) { const ev = this.state.loadedEv; - const room = this.context.getRoom(ev.getRoomId()); + const room = this.matrixClient.getRoom(ev.getRoomId()); header =
{ _t('In reply to ', {}, { diff --git a/src/utils/Reply.ts b/src/utils/Reply.ts index d8b6abc5eea..3c696e9aee6 100644 --- a/src/utils/Reply.ts +++ b/src/utils/Reply.ts @@ -149,7 +149,7 @@ export function makeReplyMixIn(ev?: MatrixEvent, inThread = false): RecursivePar 'm.relates_to': { 'm.in_reply_to': { 'event_id': ev.getId(), - 'io.element.is_falling_back': !inThread, // MSC3440 unstable `is_falling_back` field + 'io.element.show_reply': inThread, // MSC3440 unstable `is_falling_back` field }, }, }; @@ -177,6 +177,5 @@ export function shouldDisplayReply(event: MatrixEvent, inThread = false): boolea if (!inThread) return true; const inReplyTo = event.getRelation()?.["m.in_reply_to"]; - const isFallingBack = inReplyTo?.is_falling_back ?? inReplyTo?.["io.element.is_falling_back"]; - return !isFallingBack; + return inReplyTo?.is_falling_back ?? inReplyTo?.["io.element.show_reply"] ?? false; }