diff --git a/app/javascript/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js index bc2ac5e8237..1a634b55d95 100644 --- a/app/javascript/mastodon/actions/timelines.js +++ b/app/javascript/mastodon/actions/timelines.js @@ -17,6 +17,14 @@ export const TIMELINE_LOAD_PENDING = 'TIMELINE_LOAD_PENDING'; export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT'; export const TIMELINE_CONNECT = 'TIMELINE_CONNECT'; +export const CURRENTLY_VIEWING = 'CURRENTLY_VIEWING'; + +export const updateCurrentlyViewing = (timeline, id) => ({ + type: CURRENTLY_VIEWING, + timeline, + id, +}); + export const loadPending = timeline => ({ type: TIMELINE_LOAD_PENDING, timeline, diff --git a/app/javascript/mastodon/components/intersection_observer_article.js b/app/javascript/mastodon/components/intersection_observer_article.js index e453730ba4f..d475e5d1c03 100644 --- a/app/javascript/mastodon/components/intersection_observer_article.js +++ b/app/javascript/mastodon/components/intersection_observer_article.js @@ -20,6 +20,8 @@ export default class IntersectionObserverArticle extends React.Component { cachedHeight: PropTypes.number, onHeightChange: PropTypes.func, children: PropTypes.node, + currentlyViewing: PropTypes.number, + updateCurrentlyViewing: PropTypes.func, }; state = { @@ -48,6 +50,8 @@ export default class IntersectionObserverArticle extends React.Component { ); this.componentMounted = true; + + if(id === this.props.currentlyViewing) this.node.scrollIntoView(); } componentWillUnmount () { @@ -60,6 +64,8 @@ export default class IntersectionObserverArticle extends React.Component { handleIntersection = (entry) => { this.entry = entry; + if(entry.intersectionRatio > 0.75 && this.props.updateCurrentlyViewing) this.props.updateCurrentlyViewing(this.id); + scheduleIdleTask(this.calculateHeight); this.setState(this.updateStateAfterIntersection); } diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js index 421756803c9..6338ccd5c50 100644 --- a/app/javascript/mastodon/components/scrollable_list.js +++ b/app/javascript/mastodon/components/scrollable_list.js @@ -36,6 +36,8 @@ export default class ScrollableList extends PureComponent { emptyMessage: PropTypes.node, children: PropTypes.node, bindToDocument: PropTypes.bool, + currentlyViewing: PropTypes.number, + updateCurrentlyViewing: PropTypes.func, }; static defaultProps = { @@ -309,6 +311,8 @@ export default class ScrollableList extends PureComponent { listLength={childrenCount} intersectionObserverWrapper={this.intersectionObserverWrapper} saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null} + currentlyViewing={this.props.currentlyViewing} + updateCurrentlyViewing={this.props.updateCurrentlyViewing} > {React.cloneElement(child, { getScrollPosition: this.getScrollPosition, diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index e1b370c913c..ecfdddba83e 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -26,6 +26,8 @@ export default class StatusList extends ImmutablePureComponent { emptyMessage: PropTypes.node, alwaysPrepend: PropTypes.bool, timelineId: PropTypes.string, + currentlyViewing: PropTypes.number, + updateCurrentlyViewing: PropTypes.func, }; static defaultProps = { diff --git a/app/javascript/mastodon/features/ui/containers/status_list_container.js b/app/javascript/mastodon/features/ui/containers/status_list_container.js index 9f6cbf988ef..33af628ca7a 100644 --- a/app/javascript/mastodon/features/ui/containers/status_list_container.js +++ b/app/javascript/mastodon/features/ui/containers/status_list_container.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import StatusList from '../../../components/status_list'; -import { scrollTopTimeline, loadPending } from '../../../actions/timelines'; +import { scrollTopTimeline, loadPending, updateCurrentlyViewing } from '../../../actions/timelines'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import { createSelector } from 'reselect'; import { debounce } from 'lodash'; @@ -39,6 +39,7 @@ const makeMapStateToProps = () => { isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false), hasMore: state.getIn(['timelines', timelineId, 'hasMore']), numPending: getPendingStatusIds(state, { type: timelineId }).size, + currentlyViewing: state.getIn(['timelines', timelineId, 'currentlyViewing'], -1), }); return mapStateToProps; @@ -56,6 +57,7 @@ const mapDispatchToProps = (dispatch, { timelineId }) => ({ onLoadPending: () => dispatch(loadPending(timelineId)), + updateCurrentlyViewing: id => dispatch(updateCurrentlyViewing(timelineId, id)), }); export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList); diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index 0d7222e10a8..970db425e88 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -9,6 +9,7 @@ import { TIMELINE_CONNECT, TIMELINE_DISCONNECT, TIMELINE_LOAD_PENDING, + CURRENTLY_VIEWING, } from '../actions/timelines'; import { ACCOUNT_BLOCK_SUCCESS, @@ -28,6 +29,7 @@ const initialTimeline = ImmutableMap({ hasMore: true, pendingItems: ImmutableList(), items: ImmutableList(), + currentlyViewing: -1, }); const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => { @@ -168,6 +170,8 @@ export default function timelines(state = initialState, action) { initialTimeline, map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items) ); + case CURRENTLY_VIEWING: + return state.update(action.timeline, initialTimeline, map => map.set('currentlyViewing', action.id)); default: return state; }