From 66ea75709986774f7dba9cb189ee1b1207ba88d8 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 12 Apr 2022 20:06:32 -0500 Subject: [PATCH 01/10] Ask to refresh timeline when historical messages are imported (MSC2716) Associated matrix-js-sdk PR: https://github.com/matrix-org/matrix-js-sdk/pull/2282 --- res/css/structures/_RoomStatusBar.scss | 6 ++ src/components/structures/RoomStatusBar.tsx | 64 ++++++++++++++++++++- src/i18n/strings/en_EN.json | 3 + 3 files changed, 71 insertions(+), 2 deletions(-) diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.scss index a54ceae49e9..8397353eb73 100644 --- a/res/css/structures/_RoomStatusBar.scss +++ b/res/css/structures/_RoomStatusBar.scss @@ -145,6 +145,12 @@ limitations under the License. mask-image: url('$(res)/img/element-icons/retry.svg'); } } + + &.mx_RoomStatusBar_refreshTimelineBtn { + &::before { + mask-image: url('$(res)/img/element-icons/retry.svg'); + } + } } .mx_InlineSpinner { diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 94b9905becc..86fce440f7c 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -79,6 +79,7 @@ interface IState { syncStateData: ISyncStateData; unsentMessages: MatrixEvent[]; isResending: boolean; + timelineNeedsRefresh: boolean; } export default class RoomStatusBar extends React.PureComponent { @@ -93,6 +94,8 @@ export default class RoomStatusBar extends React.PureComponent { syncStateData: this.context.getSyncStateData(), unsentMessages: getUnsentMessages(this.props.room), isResending: false, + // TODO: This should be `false` + timelineNeedsRefresh: true, }; } @@ -100,6 +103,7 @@ export default class RoomStatusBar extends React.PureComponent { const client = this.context; client.on("sync", this.onSyncStateChange); client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated); + client.on("Room.historyImportedWithinTimeline", this.onRoomHistoryImportedWithinTimeline); this.checkSize(); } @@ -115,6 +119,7 @@ export default class RoomStatusBar extends React.PureComponent { if (client) { client.removeListener("sync", this.onSyncStateChange); client.removeListener("Room.localEchoUpdated", this.onRoomLocalEchoUpdated); + client.removeListener("Room.historyImportedWithinTimeline", this.onRoomHistoryImportedWithinTimeline); } } @@ -142,6 +147,19 @@ export default class RoomStatusBar extends React.PureComponent { dis.fire(Action.FocusSendMessageComposer); }; + private onRefreshTimelineClick = (): void => { + console.log('TODO: Refresh timeline'); + // TODO: What's the best way to refresh the timeline? Something like + // `room.resetLiveTimeline(null, null);` although this just seems to + // clear the timeline. I also tried to split out + // `scrollbackFromPaginationToken` from the `scrollback` method in to + // paginate from the beginning of the room but it's just not right. + + this.setState({ + timelineNeedsRefresh: false + }); + } + private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room) => { if (room.roomId !== this.props.room.roomId) return; const messages = getUnsentMessages(this.props.room); @@ -151,6 +169,14 @@ export default class RoomStatusBar extends React.PureComponent { }); }; + private onRoomHistoryImportedWithinTimeline = (markerEv: MatrixEvent, room: Room) => { + if (room.roomId !== this.props.room.roomId) return; + + this.setState({ + timelineNeedsRefresh: true, + }); + }; + // Check whether current size is greater than 0, if yes call props.onVisible private checkSize(): void { if (this.getSize()) { @@ -166,7 +192,11 @@ export default class RoomStatusBar extends React.PureComponent { private getSize(): number { if (this.shouldShowConnectionError()) { return STATUS_BAR_EXPANDED; - } else if (this.state.unsentMessages.length > 0 || this.state.isResending) { + } else if ( + this.state.unsentMessages.length > 0 || + this.state.isResending || + this.state.timelineNeedsRefresh + ) { return STATUS_BAR_EXPANDED_LARGE; } return STATUS_BAR_HIDDEN; @@ -182,7 +212,7 @@ export default class RoomStatusBar extends React.PureComponent { this.state.syncStateData.error && this.state.syncStateData.error.name === 'M_RESOURCE_LIMIT_EXCEEDED', ); - return this.state.syncState === "ERROR" && !errorIsMauError; + return (this.state.syncState === "ERROR" && !errorIsMauError); } private getUnsentMessageContent(): JSX.Element { @@ -306,6 +336,36 @@ export default class RoomStatusBar extends React.PureComponent { return this.getUnsentMessageContent(); } + if(this.state.timelineNeedsRefresh) { + return ( +
+
+
+ /!\ +
+
+
+ { _t("History import detected.") } +
+
+ { _t("History was just imported somewhere in the room. In order to see the historical messages, refresh your timeline.") } +
+
+
+ + { _t("Refresh timeline") } + +
+
+
+ ) + } + return null; } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c5769f9902a..f533922de1c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3042,6 +3042,9 @@ "You can select all or individual messages to retry or delete": "You can select all or individual messages to retry or delete", "Connectivity to the server has been lost.": "Connectivity to the server has been lost.", "Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.", + "History import detected.": "History import detected.", + "History was just imported somewhere in the room. In order to see the historical messages, refresh your timeline.": "History was just imported somewhere in the room. In order to see the historical messages, refresh your timeline.", + "Refresh timeline": "Refresh timeline", "You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?", "You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?", "Search failed": "Search failed", From 6dba3dfbb6368c4b1d5aad8fbf9538c3fb64e301 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 12 Apr 2022 21:06:07 -0500 Subject: [PATCH 02/10] Back to false after getting screenshot --- src/components/structures/RoomStatusBar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 86fce440f7c..9cfb682b844 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -94,8 +94,7 @@ export default class RoomStatusBar extends React.PureComponent { syncStateData: this.context.getSyncStateData(), unsentMessages: getUnsentMessages(this.props.room), isResending: false, - // TODO: This should be `false` - timelineNeedsRefresh: true, + timelineNeedsRefresh: false, }; } From 12b011545e9b830934ba27f10703022b0e90ca1b Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 13 Apr 2022 01:18:28 -0500 Subject: [PATCH 03/10] Fix lints --- src/components/structures/RoomStatusBar.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 9cfb682b844..08507402d07 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -155,9 +155,9 @@ export default class RoomStatusBar extends React.PureComponent { // paginate from the beginning of the room but it's just not right. this.setState({ - timelineNeedsRefresh: false + timelineNeedsRefresh: false, }); - } + }; private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room) => { if (room.roomId !== this.props.room.roomId) return; @@ -335,7 +335,7 @@ export default class RoomStatusBar extends React.PureComponent { return this.getUnsentMessageContent(); } - if(this.state.timelineNeedsRefresh) { + if (this.state.timelineNeedsRefresh) { return (
@@ -352,17 +352,18 @@ export default class RoomStatusBar extends React.PureComponent { { _t("History import detected.") }
- { _t("History was just imported somewhere in the room. In order to see the historical messages, refresh your timeline.") } + { _t("History was just imported somewhere in the room. " + + "In order to see the historical messages, refresh your timeline.") }
- - { _t("Refresh timeline") } - + + { _t("Refresh timeline") } +
- ) + ); } return null; From eb5e899398364307a7bbaaf2c908cb1fae66cb17 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 13 Apr 2022 02:47:45 -0500 Subject: [PATCH 04/10] Fix room not showing refresh timeline banner if not switched to the room when the marker was sent --- src/components/structures/RoomStatusBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 08507402d07..840d7135d42 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -94,7 +94,7 @@ export default class RoomStatusBar extends React.PureComponent { syncStateData: this.context.getSyncStateData(), unsentMessages: getUnsentMessages(this.props.room), isResending: false, - timelineNeedsRefresh: false, + timelineNeedsRefresh: this.props.room.getTimelineNeedsRefresh(), }; } @@ -172,7 +172,7 @@ export default class RoomStatusBar extends React.PureComponent { if (room.roomId !== this.props.room.roomId) return; this.setState({ - timelineNeedsRefresh: true, + timelineNeedsRefresh: room.getTimelineNeedsRefresh(), }); }; From a50e011c40a80fea5fa1b1356e1e8802cfa8b50a Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 13 Apr 2022 02:47:53 -0500 Subject: [PATCH 05/10] Fix type lints --- src/components/structures/FilePanel.tsx | 4 +++- src/indexing/EventIndex.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index d248c6556fd..98f37c9e068 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -104,7 +104,9 @@ class FilePanel extends React.Component { } if (!this.state.timelineSet.eventIdToTimeline(ev.getId())) { - this.state.timelineSet.addEventToTimeline(ev, timeline, false); + this.state.timelineSet.addEventToTimeline(ev, timeline, { + toStartOfTimeline: false, + }); } } diff --git a/src/indexing/EventIndex.ts b/src/indexing/EventIndex.ts index 85ff7038de0..3a958f2af6b 100644 --- a/src/indexing/EventIndex.ts +++ b/src/indexing/EventIndex.ts @@ -808,7 +808,9 @@ export default class EventIndex extends EventEmitter { // Add the events to the timeline of the file panel. matrixEvents.forEach(e => { if (!timelineSet.eventIdToTimeline(e.getId())) { - timelineSet.addEventToTimeline(e, timeline, direction == EventTimeline.BACKWARDS); + timelineSet.addEventToTimeline(e, timeline, { + toStartOfTimeline: direction == EventTimeline.BACKWARDS, + }); } }); From ed910bb7ec71c7feae90d00ebca9b54263f98fd2 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Thu, 14 Apr 2022 01:43:48 -0500 Subject: [PATCH 06/10] Remove parenthesis change --- src/components/structures/RoomStatusBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 840d7135d42..1487b51b9dd 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -211,7 +211,7 @@ export default class RoomStatusBar extends React.PureComponent { this.state.syncStateData.error && this.state.syncStateData.error.name === 'M_RESOURCE_LIMIT_EXCEEDED', ); - return (this.state.syncState === "ERROR" && !errorIsMauError); + return this.state.syncState === "ERROR" && !errorIsMauError; } private getUnsentMessageContent(): JSX.Element { From 8d6122626ce48ba3d84c505a0c451fbb812f1acd Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Sat, 16 Apr 2022 02:17:55 -0500 Subject: [PATCH 07/10] Raw refreshLiveTimeline usage that seems to work --- src/components/structures/MessagePanel.tsx | 2 ++ src/components/structures/RoomStatusBar.tsx | 11 +++++++---- src/components/structures/RoomView.tsx | 5 ++++- src/components/structures/TimelinePanel.tsx | 17 ++++++++++++++++- 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index a4791a1ec57..2d8543c8b3a 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -1021,6 +1021,8 @@ export default class MessagePanel extends React.Component { "mx_MessagePanel_narrow": this.context.narrow, }); + //console.log('MessagePanel: render', this.props.events.length) + return ( { syncStateData: this.context.getSyncStateData(), unsentMessages: getUnsentMessages(this.props.room), isResending: false, - timelineNeedsRefresh: this.props.room.getTimelineNeedsRefresh(), + timelineNeedsRefresh: true // TODO: Put this back to this.props.room.getTimelineNeedsRefresh(), }; } @@ -153,10 +153,13 @@ export default class RoomStatusBar extends React.PureComponent { // clear the timeline. I also tried to split out // `scrollbackFromPaginationToken` from the `scrollback` method in to // paginate from the beginning of the room but it's just not right. + this.props.room.refreshLiveTimeline(); + //timelinePanel.refreshTimeline(); - this.setState({ - timelineNeedsRefresh: false, - }); + // TODO: Uncomment + // this.setState({ + // timelineNeedsRefresh: false, + // }); }; private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room) => { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 1d363b649ea..a28faa180e2 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2065,11 +2065,14 @@ export class RoomView extends React.Component { highlightedEventId = this.state.initialEventId; } + const timelineSet = this.state.room.getUnfilteredTimelineSet(); + console.log('RoomView: timelineSet', timelineSet); + // console.info("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview); const messagePanel = ( { const cli = MatrixClientPeg.get(); cli.on(RoomEvent.Timeline, this.onRoomTimeline); cli.on(RoomEvent.TimelineReset, this.onRoomTimelineReset); + this.props.timelineSet.room.on(RoomEvent.TimelineRefresh, this.onRoomTimelineRefresh); cli.on(RoomEvent.Redaction, this.onRoomRedaction); if (SettingsStore.getValue("feature_msc3531_hide_messages_pending_moderation")) { // Make sure that events are re-rendered when their visibility-pending-moderation changes. @@ -370,6 +371,8 @@ class TimelinePanel extends React.Component { client.removeListener(MatrixEventEvent.VisibilityChange, this.onEventVisibilityChange); client.removeListener(ClientEvent.Sync, this.onSync); } + + this.props.timelineSet.room.removeListener(RoomEvent.TimelineRefresh, this.onRoomTimelineRefresh); } private onMessageListUnfillRequest = (backwards: boolean, scrollToken: string): void => { @@ -627,10 +630,18 @@ class TimelinePanel extends React.Component { }); }; + private onRoomTimelineRefresh = (room: Room, timelineSet: EventTimelineSet): void => { + console.log(`onRoomTimelineRefresh skipping=${timelineSet !== this.props.timelineSet}`); + if (timelineSet !== this.props.timelineSet) return; + + this.refreshTimeline(); + }; + private onRoomTimelineReset = (room: Room, timelineSet: EventTimelineSet): void => { + console.log(`onRoomTimelineReset skipping=${timelineSet !== this.props.timelineSet} skippingBecauseAtBottom=${this.canResetTimeline()}`); if (timelineSet !== this.props.timelineSet) return; - if (this.messagePanel.current && this.messagePanel.current.isAtBottom()) { + if (this.canResetTimeline()) { this.loadTimeline(); } }; @@ -1181,6 +1192,9 @@ class TimelinePanel extends React.Component { * @param {boolean?} scrollIntoView whether to scroll the event into view. */ private loadTimeline(eventId?: string, pixelOffset?: number, offsetBase?: number, scrollIntoView = true): void { + console.log('TimelinePanel: loadTimeline', this.props.timelineSet.getTimelines(), this.props.timelineSet.getTimelines().map((timeline) => { + return timeline.getEvents().length; + })) this.timelineWindow = new TimelineWindow( MatrixClientPeg.get(), this.props.timelineSet, { windowLimit: this.props.timelineCap }); @@ -1319,6 +1333,7 @@ class TimelinePanel extends React.Component { // get the list of events from the timeline window and the pending event list private getEvents(): Pick { const events: MatrixEvent[] = this.timelineWindow.getEvents(); + console.log('TimelinePanel: getEvents', events.length); // `arrayFastClone` performs a shallow copy of the array // we want the last event to be decrypted first but displayed last From d8f94ed2ac9cf018ed57e16bbabda1b55101974d Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 18 Apr 2022 18:52:06 -0500 Subject: [PATCH 08/10] Clean up raw commit --- src/components/structures/MessagePanel.tsx | 2 -- src/components/structures/RoomStatusBar.tsx | 17 +++++------------ src/components/structures/RoomView.tsx | 5 +---- src/components/structures/TimelinePanel.tsx | 7 ++----- 4 files changed, 8 insertions(+), 23 deletions(-) diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index 2d8543c8b3a..a4791a1ec57 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -1021,8 +1021,6 @@ export default class MessagePanel extends React.Component { "mx_MessagePanel_narrow": this.context.narrow, }); - //console.log('MessagePanel: render', this.props.events.length) - return ( { syncStateData: this.context.getSyncStateData(), unsentMessages: getUnsentMessages(this.props.room), isResending: false, - timelineNeedsRefresh: true // TODO: Put this back to this.props.room.getTimelineNeedsRefresh(), + timelineNeedsRefresh: this.props.room.getTimelineNeedsRefresh(), }; } @@ -147,19 +147,12 @@ export default class RoomStatusBar extends React.PureComponent { }; private onRefreshTimelineClick = (): void => { - console.log('TODO: Refresh timeline'); - // TODO: What's the best way to refresh the timeline? Something like - // `room.resetLiveTimeline(null, null);` although this just seems to - // clear the timeline. I also tried to split out - // `scrollbackFromPaginationToken` from the `scrollback` method in to - // paginate from the beginning of the room but it's just not right. + // Empty out the current timeline and re-request it this.props.room.refreshLiveTimeline(); - //timelinePanel.refreshTimeline(); - // TODO: Uncomment - // this.setState({ - // timelineNeedsRefresh: false, - // }); + this.setState({ + timelineNeedsRefresh: false, + }); }; private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room) => { diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index a28faa180e2..1d363b649ea 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -2065,14 +2065,11 @@ export class RoomView extends React.Component { highlightedEventId = this.state.initialEventId; } - const timelineSet = this.state.room.getUnfilteredTimelineSet(); - console.log('RoomView: timelineSet', timelineSet); - // console.info("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview); const messagePanel = ( { }; private onRoomTimelineRefresh = (room: Room, timelineSet: EventTimelineSet): void => { - console.log(`onRoomTimelineRefresh skipping=${timelineSet !== this.props.timelineSet}`); + debuglog(`onRoomTimelineRefresh skipping=${timelineSet !== this.props.timelineSet}`); if (timelineSet !== this.props.timelineSet) return; this.refreshTimeline(); }; private onRoomTimelineReset = (room: Room, timelineSet: EventTimelineSet): void => { - console.log(`onRoomTimelineReset skipping=${timelineSet !== this.props.timelineSet} skippingBecauseAtBottom=${this.canResetTimeline()}`); + debuglog(`onRoomTimelineReset skipping=${timelineSet !== this.props.timelineSet} skippingBecauseAtBottom=${this.canResetTimeline()}`); if (timelineSet !== this.props.timelineSet) return; if (this.canResetTimeline()) { @@ -1192,9 +1192,6 @@ class TimelinePanel extends React.Component { * @param {boolean?} scrollIntoView whether to scroll the event into view. */ private loadTimeline(eventId?: string, pixelOffset?: number, offsetBase?: number, scrollIntoView = true): void { - console.log('TimelinePanel: loadTimeline', this.props.timelineSet.getTimelines(), this.props.timelineSet.getTimelines().map((timeline) => { - return timeline.getEvents().length; - })) this.timelineWindow = new TimelineWindow( MatrixClientPeg.get(), this.props.timelineSet, { windowLimit: this.props.timelineCap }); From 623960b4cfe1ac47f8a5eba6f976e8ec1ab8a808 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 18 Apr 2022 23:20:11 -0500 Subject: [PATCH 09/10] Clean up event usage See https://github.com/matrix-org/matrix-react-sdk/pull/8303#discussion_r850192080 --- src/components/structures/RoomStatusBar.tsx | 15 +++++++++++---- src/components/structures/TimelinePanel.tsx | 8 ++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index 7345b184add..d075b621482 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -17,7 +17,7 @@ limitations under the License. import React from 'react'; import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event"; import { SyncState, ISyncStateData } from "matrix-js-sdk/src/sync"; -import { Room } from "matrix-js-sdk/src/models/room"; +import { Room, RoomEvent } from "matrix-js-sdk/src/models/room"; import { _t, _td } from '../../languageHandler'; import Resend from '../../Resend'; @@ -102,13 +102,19 @@ export default class RoomStatusBar extends React.PureComponent { const client = this.context; client.on("sync", this.onSyncStateChange); client.on("Room.localEchoUpdated", this.onRoomLocalEchoUpdated); - client.on("Room.historyImportedWithinTimeline", this.onRoomHistoryImportedWithinTimeline); + this.props.room.on(RoomEvent.historyImportedWithinTimeline, this.onRoomHistoryImportedWithinTimeline); this.checkSize(); } - public componentDidUpdate(): void { + public componentDidUpdate(prevProps): void { this.checkSize(); + + // When the room changes, setup the new listener + if(prevProps.room !== this.props.room) { + prevProps.room.removeListener("Room.historyImportedWithinTimeline", this.onRoomHistoryImportedWithinTimeline); + this.props.room.on(RoomEvent.historyImportedWithinTimeline, this.onRoomHistoryImportedWithinTimeline); + } } public componentWillUnmount(): void { @@ -118,8 +124,9 @@ export default class RoomStatusBar extends React.PureComponent { if (client) { client.removeListener("sync", this.onSyncStateChange); client.removeListener("Room.localEchoUpdated", this.onRoomLocalEchoUpdated); - client.removeListener("Room.historyImportedWithinTimeline", this.onRoomHistoryImportedWithinTimeline); } + + this.props.room.removeListener(RoomEvent.historyImportedWithinTimeline, this.onRoomHistoryImportedWithinTimeline); } private onSyncStateChange = (state: SyncState, prevState: SyncState, data: ISyncStateData): void => { diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index 28338aaba8f..f37d4ebd36a 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -339,6 +339,14 @@ class TimelinePanel extends React.Component { } } + public componentDidUpdate(prevProps): void { + // When the room changes, setup the new listener + if(prevProps.timelineSet.room !== this.props.timelineSet.room) { + prevProps.timelineSet.room.removeListener(RoomEvent.TimelineRefresh, this.onRoomTimelineRefresh); + this.props.timelineSet.room.on(RoomEvent.TimelineRefresh, this.onRoomTimelineRefresh); + } + } + componentWillUnmount() { // set a boolean to say we've been unmounted, which any pending // promises can use to throw away their results. From d9001ce19fb4351651a38f5fc06098968a175c5d Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 18 Apr 2022 23:28:49 -0500 Subject: [PATCH 10/10] Remove unreadable image descriptions See https://github.com/matrix-org/matrix-react-sdk/pull/8303#discussion_r850188154 --- src/components/structures/RoomStatusBar.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomStatusBar.tsx b/src/components/structures/RoomStatusBar.tsx index d075b621482..02c4239e8a8 100644 --- a/src/components/structures/RoomStatusBar.tsx +++ b/src/components/structures/RoomStatusBar.tsx @@ -318,8 +318,7 @@ export default class RoomStatusBar extends React.PureComponent { src={require("../../../res/img/feather-customised/warning-triangle.svg").default} width="24" height="24" - title="/!\ " - alt="/!\ " /> + alt="" />
{ _t('Connectivity to the server has been lost.') } @@ -347,8 +346,7 @@ export default class RoomStatusBar extends React.PureComponent { src={require("../../../res/img/feather-customised/warning-triangle.svg").default} width="24" height="24" - title="/!\ " - alt="/!\ " /> + alt="" />