cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

Fix #1004 - Temporarily pause timeline if there's been recent mouse movement (#4859)

Browse source
This commit is contained in:
Eugen Rochko 2017-09-09 02:26:41 +02:00 • committed by GitHub
parent 4b460bc571
commit baa8b82179
1 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/javascript/mastodon/components/scrollable_list.js
View file

@ -27,6 +27,10 @@ export default class ScrollableList extends PureComponent {
trackScroll: true, trackScroll: true,
}; };
state = {
lastMouseMove: null,
};
intersectionObserverWrapper = new IntersectionObserverWrapper(); intersectionObserverWrapper = new IntersectionObserverWrapper();
handleScroll = throttle(() => { handleScroll = throttle(() => {
@ -47,6 +51,14 @@ export default class ScrollableList extends PureComponent {
trailing: true, trailing: true,
}); });
handleMouseMove = throttle(() => {
this.setState({ lastMouseMove: new Date() });
}, 300);
handleMouseLeave = () => {
this.setState({ lastMouseMove: null });
}
componentDidMount () { componentDidMount () {
this.attachScrollListener(); this.attachScrollListener();
this.attachIntersectionObserver(); this.attachIntersectionObserver();
@ -58,9 +70,10 @@ export default class ScrollableList extends PureComponent {
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
// Reset the scroll position when a new child comes in in order not to // Reset the scroll position when a new child comes in in order not to
// jerk the scrollbar around if you're already scrolled down the page. // jerk the scrollbar around if you're already scrolled down the page.
if (React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this._oldScrollPosition && this.node.scrollTop > 0) { if (React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) {
if (this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props)) { if (this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props)) {
const newScrollTop = this.node.scrollHeight - this._oldScrollPosition; const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
if (this.node.scrollTop !== newScrollTop) { if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop; this.node.scrollTop = newScrollTop;
} }
@ -114,6 +127,10 @@ export default class ScrollableList extends PureComponent {
this.props.onScrollToBottom(); this.props.onScrollToBottom();
} }
_recentlyMoved () {
return this.state.lastMouseMove === null || ((new Date()) - this.state.lastMouseMove < 600);
}
handleKeyDown = (e) => { handleKeyDown = (e) => {
if (['PageDown', 'PageUp'].includes(e.key) || (e.ctrlKey && ['End', 'Home'].includes(e.key))) { if (['PageDown', 'PageUp'].includes(e.key) || (e.ctrlKey && ['End', 'Home'].includes(e.key))) {
const article = (() => { const article = (() => {
@ -149,7 +166,7 @@ export default class ScrollableList extends PureComponent {
if (isLoading || childrenCount > 0 || !emptyMessage) { if (isLoading || childrenCount > 0 || !emptyMessage) {
scrollableArea = ( scrollableArea = (
<div className='scrollable' ref={this.setRef}> <div className='scrollable' ref={this.setRef} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
<div role='feed' className='item-list' onKeyDown={this.handleKeyDown}> <div role='feed' className='item-list' onKeyDown={this.handleKeyDown}>
{prepend} {prepend}