Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix jump to bottom button being always displayed in non-overflowing timelines #8460

Merged
merged 4 commits into from
May 2, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions src/components/structures/RoomView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -179,9 +179,7 @@ export interface IRoomState {
// this is true if we are fully scrolled-down, and are looking at
// the end of the live timeline. It has the effect of hiding the
// 'scroll to bottom' knob, among a couple of other things.
atEndOfLiveTimeline: boolean;
// used by componentDidUpdate to avoid unnecessary checks
atEndOfLiveTimelineInit: boolean;
atEndOfLiveTimeline?: boolean;
showTopUnreadMessagesBar: boolean;
statusBarVisible: boolean;
// We load this later by asking the js-sdk to suggest a version for us.
Expand Down Expand Up @@ -257,8 +255,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
isPeeking: false,
showRightPanel: false,
joining: false,
atEndOfLiveTimeline: true,
atEndOfLiveTimelineInit: false,
showTopUnreadMessagesBar: false,
statusBarVisible: false,
canReact: false,
Expand Down Expand Up @@ -692,9 +688,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
// in render() prevents the ref from being set on first mount, so we try and
// catch the messagePanel when it does mount. Because we only want the ref once,
// we use a boolean flag to avoid duplicate work.
if (this.messagePanel && !this.state.atEndOfLiveTimelineInit) {
if (this.messagePanel && this.state.atEndOfLiveTimeline === undefined) {
this.setState({
atEndOfLiveTimelineInit: true,
atEndOfLiveTimeline: this.messagePanel.isAtEndOfLiveTimeline(),
});
}
Expand Down Expand Up @@ -2102,7 +2097,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
}
let jumpToBottom;
// Do not show JumpToBottomButton if we have search results showing, it makes no sense
if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) {
if (this.state.atEndOfLiveTimeline === false && !this.state.searchResults) {
jumpToBottom = (<JumpToBottomButton
highlight={this.state.room.getUnreadNotificationCount(NotificationCountType.Highlight) > 0}
numUnreadMessages={this.state.numUnreadMessages}
Expand Down
2 changes: 1 addition & 1 deletion src/components/structures/TimelinePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1043,7 +1043,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
/* return true if the content is fully scrolled down and we are
* at the end of the live timeline.
*/
public isAtEndOfLiveTimeline = (): boolean => {
public isAtEndOfLiveTimeline = (): boolean | undefined => {
return this.messagePanel.current?.isAtBottom()
&& this.timelineWindow
&& !this.timelineWindow.canPaginate(EventTimeline.FORWARDS);
Expand Down
2 changes: 0 additions & 2 deletions src/contexts/RoomContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,6 @@ const RoomContext = createContext<IRoomState>({
isPeeking: false,
showRightPanel: true,
joining: false,
atEndOfLiveTimeline: true,
atEndOfLiveTimelineInit: false,
showTopUnreadMessagesBar: false,
statusBarVisible: false,
canReact: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,6 @@ function createRoomState(room: Room, narrow: boolean): IRoomState {
showRightPanel: true,
joining: false,
atEndOfLiveTimeline: true,
atEndOfLiveTimelineInit: false,
showTopUnreadMessagesBar: false,
statusBarVisible: false,
canReact: false,
Expand Down