ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-14 17:41:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: make backlog height only reflect loaded messages

Browse Source 
fixes #3496
This commit is contained in:
Tyler Brown Cifu Shuster 2020-09-17 20:00:45 -07:00
parent 6f5663bcd3
commit 04ce994157
2 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx
View File

@ -20,6 +20,7 @@ import { BacklogElement } from "./backlog-element";
const INITIAL_LOAD = 20; const INITIAL_LOAD = 20;
const DEFAULT_BACKLOG_SIZE = 100; const DEFAULT_BACKLOG_SIZE = 100;
const IDLE_THRESHOLD = 64; const IDLE_THRESHOLD = 64;
const MAX_BACKLOG_SIZE = 1000;
type ChatWindowProps = RouteComponentProps<{ type ChatWindowProps = RouteComponentProps<{
ship: Patp; ship: Patp;
@ -188,8 +189,11 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
this.setState({ fetchPending: true }); this.setState({ fetchPending: true });
start = Math.min(mailboxSize - start, mailboxSize);
end = Math.max(mailboxSize - end, 0, start - MAX_BACKLOG_SIZE);
return api.chat return api.chat
.fetchMessages(Math.max(mailboxSize - end, 0), Math.min(mailboxSize - start, mailboxSize), station) .fetchMessages(end, start, station)
.finally(() => { .finally(() => {
this.setState({ fetchPending: false }); this.setState({ fetchPending: false });
}); });

14
pkg/interface/src/views/components/VirtualScroller.tsx
View File

@ -149,13 +149,13 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
} }
}); });
endgap += Math.abs(totalSize - data.size) * averageHeight; // endgap += Math.abs(totalSize - data.size) * averageHeight; // Uncomment to make full height of backlog
startBuffer = new Map([...startBuffer].reverse().slice(0, visibleItems.size)); startBuffer = new Map([...startBuffer].reverse().slice(0, visibleItems.size));
startBuffer.forEach((datum, index) => { startBuffer.forEach((datum, index) => {
startgap -= this.heightOf(index); startgap -= this.heightOf(index);
}); });
visibleItems = new Map([...visibleItems].reverse()); visibleItems = new Map([...visibleItems].reverse());
endBuffer = new Map([...endBuffer].reverse()); endBuffer = new Map([...endBuffer].reverse());
const firstVisibleKey = Array.from(visibleItems.keys())[0] ?? this.estimateIndexFromScrollTop(scrollTop); const firstVisibleKey = Array.from(visibleItems.keys())[0] ?? this.estimateIndexFromScrollTop(scrollTop);
@ -214,7 +214,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('keydown', this.invertedKeyHandler, true); window.removeEventListener('keydown', this.invertedKeyHandler, true);
} }
setWindow(element) { setWindow(element) {
if (this.window) return; if (this.window) return;
this.window = element; this.window = element;
@ -256,7 +256,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
if (scrollTop !== scrollHeight) { if (scrollTop !== scrollHeight) {
this.setState({ scrollTop }); this.setState({ scrollTop });
} }
this.calculateVisibleItems(); this.calculateVisibleItems();
onScroll ? onScroll({ scrollTop, scrollHeight, windowHeight }) : null; onScroll ? onScroll({ scrollTop, scrollHeight, windowHeight }) : null;
if (scrollTop === 0) { if (scrollTop === 0) {
@ -272,7 +272,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
endgap, endgap,
visibleItems visibleItems
} = this.state; } = this.state;
const { const {
origin = 'top', origin = 'top',
loadRows, loadRows,
@ -280,7 +280,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
style, style,
data data
} = this.props; } = this.props;
const indexesToRender = Array.from(visibleItems.keys()); const indexesToRender = Array.from(visibleItems.keys());
const transform = origin === 'top' ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)'; const transform = origin === 'top' ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)';