From 8cf6a8c3112fb49c18a440bcadf8a775b72837ec Mon Sep 17 00:00:00 2001 From: thobyv-kismat Date: Sat, 11 Apr 2020 02:59:26 +0100 Subject: [PATCH 1/3] refactor RoomScrollStateStore to accomodate scrollmaps for file/notif panel --- src/components/structures/RoomView.js | 4 ++-- src/stores/RoomScrollStateStore.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 4a3666fc38..291297a815 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -269,7 +269,7 @@ export default createReactClass({ // If an event ID wasn't specified, default to the one saved for this room // in the scroll state store. Assume initialEventPixelOffset should be set. if (!newState.initialEventId) { - const roomScrollState = RoomScrollStateStore.getScrollState(newState.roomId); + const roomScrollState = RoomScrollStateStore.getRoomViewScrollState(newState.roomId); if (roomScrollState) { newState.initialEventId = roomScrollState.focussedEvent; newState.initialEventPixelOffset = roomScrollState.pixelOffset; @@ -470,7 +470,7 @@ export default createReactClass({ // update the scroll map before we get unmounted if (this.state.roomId) { - RoomScrollStateStore.setScrollState(this.state.roomId, this._getScrollState()); + RoomScrollStateStore.setRoomViewScrollState(this.state.roomId, this._getScrollState()); } if (this.state.shouldPeek) { diff --git a/src/stores/RoomScrollStateStore.js b/src/stores/RoomScrollStateStore.js index 07848283d1..37440c3e81 100644 --- a/src/stores/RoomScrollStateStore.js +++ b/src/stores/RoomScrollStateStore.js @@ -32,15 +32,15 @@ class RoomScrollStateStore { // // pixelOffset: the number of pixels the window is scrolled down // from the focussedEvent. - this._scrollStateMap = {}; + this._RoomViewScrollStateMap = {}; } - getScrollState(roomId) { - return this._scrollStateMap[roomId]; + getRoomViewScrollState(roomId) { + return this._RoomViewScrollStateMap[roomId]; } - setScrollState(roomId, scrollState) { - this._scrollStateMap[roomId] = scrollState; + setRoomViewScrollState(roomId, scrollState) { + this._RoomViewScrollStateMap[roomId] = scrollState; } } From 719165c67fd6771a8fbf428556dc2b04cf566248 Mon Sep 17 00:00:00 2001 From: thobyv-kismat Date: Sat, 11 Apr 2020 04:03:32 +0100 Subject: [PATCH 2/3] fix file panel scroll position lost on room change --- src/components/structures/FilePanel.js | 44 +++++++++++++++++++++++++- src/stores/RoomScrollStateStore.js | 9 ++++++ 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js index f8c03be864..926355dd88 100644 --- a/src/components/structures/FilePanel.js +++ b/src/components/structures/FilePanel.js @@ -25,6 +25,8 @@ import {MatrixClientPeg} from '../../MatrixClientPeg'; import EventIndexPeg from "../../indexing/EventIndexPeg"; import { _t } from '../../languageHandler'; +import RoomScrollStateStore from '../../stores/RoomScrollStateStore'; + /* * Component which shows the filtered file using a TimelinePanel */ @@ -41,6 +43,8 @@ const FilePanel = createReactClass({ getInitialState: function() { return { timelineSet: null, + initialEventId: null, + initialEventPixelOffset: null, }; }, @@ -84,6 +88,16 @@ const FilePanel = createReactClass({ await this.updateTimelineSet(this.props.roomId); + if (this.props.roomId) { + const filePanelScrollState = RoomScrollStateStore.getFilePanelScrollState(this.props.roomId); + if (filePanelScrollState) { + this.setState({ + initialEventId: filePanelScrollState.focussedEvent, + initialEventPixelOffset: filePanelScrollState.pixelOffset, + }); + } + } + if (!MatrixClientPeg.get().isRoomEncrypted(this.props.roomId)) return; // The timelineSets filter makes sure that encrypted events that contain @@ -101,6 +115,10 @@ const FilePanel = createReactClass({ }, componentWillUnmount() { + if (this.props.roomId) { + RoomScrollStateStore.setFilePanelScrollState(this.props.roomId, this._getScrollState()); + } + const client = MatrixClientPeg.get(); if (client === null) return; @@ -190,6 +208,26 @@ const FilePanel = createReactClass({ } }, + _getScrollState: function() { + const messagePanel = this._messagePanel; + const scrollState = messagePanel.getScrollState(); + + if (!messagePanel) return null; + + if (!scrollState || scrollState.stuckAtBottom) { + return null; + } + + return { + focussedEvent: scrollState.trackedScrollToken, + pixelOffset: scrollState.pixelOffset, + }; + }, + + _getTimelinePanelRef: function(ref) { + this._messagePanel = ref; + }, + render: function() { if (MatrixClientPeg.get().isGuest()) { return
@@ -215,11 +253,15 @@ const FilePanel = createReactClass({ // "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId); return (
- Date: Fri, 17 Apr 2020 15:15:51 -0600 Subject: [PATCH 3/3] Rename ref to timelinePanel --- src/components/structures/FilePanel.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js index 926355dd88..f073785df3 100644 --- a/src/components/structures/FilePanel.js +++ b/src/components/structures/FilePanel.js @@ -209,10 +209,10 @@ const FilePanel = createReactClass({ }, _getScrollState: function() { - const messagePanel = this._messagePanel; - const scrollState = messagePanel.getScrollState(); + const timelinePanel = this._timelinePanel; + const scrollState = timelinePanel.getScrollState(); - if (!messagePanel) return null; + if (!timelinePanel) return null; if (!scrollState || scrollState.stuckAtBottom) { return null; @@ -225,7 +225,7 @@ const FilePanel = createReactClass({ }, _getTimelinePanelRef: function(ref) { - this._messagePanel = ref; + this._timelinePanel = ref; }, render: function() {