diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index 35049d435..5eba212f1 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -64,6 +64,17 @@ export function doHistoryBack() { if (!history.state) return; history.back(); + dispatch({ + type: types.HISTORY_BACK, + }); + }; +} + +export function doHistoryBackCompleted() { + return function(dispatch, getState) { + dispatch({ + type: types.HISTORY_BACK_COMPLETED, + }); }; } diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 7d38568f3..0b9a48b0b 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -2,6 +2,7 @@ export const CHANGE_PATH = "CHANGE_PATH"; export const OPEN_MODAL = "OPEN_MODAL"; export const CLOSE_MODAL = "CLOSE_MODAL"; export const HISTORY_BACK = "HISTORY_BACK"; +export const HISTORY_BACK_COMPLETED = "HISTORY_BACK_COMPLETED"; export const SHOW_SNACKBAR = "SHOW_SNACKBAR"; export const REMOVE_SNACKBAR_SNACK = "REMOVE_SNACKBAR_SNACK"; export const WINDOW_FOCUSED = "WINDOW_FOCUSED"; diff --git a/ui/js/page/discover/index.js b/ui/js/page/discover/index.js index be49b892d..eb8d4d0bc 100644 --- a/ui/js/page/discover/index.js +++ b/ui/js/page/discover/index.js @@ -1,20 +1,24 @@ import React from "react"; import { connect } from "react-redux"; +import { doHistoryBackCompleted } from "actions/app"; import { doFetchFeaturedUris, doCancelAllResolvingUris } from "actions/content"; import { selectFeaturedUris, selectFetchingFeaturedUris, } from "selectors/content"; +import { selectNavigatingBack } from "selectors/app"; import DiscoverPage from "./view"; const select = state => ({ featuredUris: selectFeaturedUris(state), fetchingFeaturedUris: selectFetchingFeaturedUris(state), + isNavigatingBack: selectNavigatingBack(state), }); const perform = dispatch => ({ fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()), cancelResolvingUris: () => dispatch(doCancelAllResolvingUris()), + finishedNavigatingBack: () => dispatch(doHistoryBackCompleted()), }); export default connect(select, perform)(DiscoverPage); diff --git a/ui/js/page/discover/view.jsx b/ui/js/page/discover/view.jsx index fc57a5ba8..52bbd1442 100644 --- a/ui/js/page/discover/view.jsx +++ b/ui/js/page/discover/view.jsx @@ -1,4 +1,5 @@ import React from "react"; +import lbry from "lbry.js"; import lbryio from "lbryio.js"; import lbryuri from "lbryuri"; import FileCard from "component/fileCard"; @@ -37,10 +38,31 @@ const FeaturedCategory = props => { class DiscoverPage extends React.PureComponent { componentWillMount() { this.props.fetchFeaturedUris(); + this.scrollListener = this.handleScroll.bind(this); + } + + componentDidMount() { + if (this.props.isNavigatingBack) { + const scrollY = parseInt(lbry.getClientSetting("prefs_scrolly")); + if (!isNaN(scrollY)) { + const restoreScrollPosition = () => { + window.scrollTo(0, scrollY); + }; + setTimeout(restoreScrollPosition, 100); + } + + this.props.finishedNavigatingBack(); + } + window.addEventListener("scroll", this.scrollListener); + } + + handleScroll() { + lbry.setClientSetting("prefs_scrolly", window.scrollY); } componentWillUnmount() { this.props.cancelResolvingUris(); + window.removeEventListener("scroll", this.scrollListener); } render() { diff --git a/ui/js/reducers/app.js b/ui/js/reducers/app.js index fe8c9adae..f2c50d2ec 100644 --- a/ui/js/reducers/app.js +++ b/ui/js/reducers/app.js @@ -141,6 +141,18 @@ reducers[types.WINDOW_FOCUSED] = function(state, action) { }); }; +reducers[types.HISTORY_BACK] = function(state, action) { + return Object.assign({}, state, { + navigatingBack: true, + }); +}; + +reducers[types.HISTORY_BACK_COMPLETED] = function(state, action) { + return Object.assign({}, state, { + navigatingBack: false, + }); +}; + export default function reducer(state = defaultState, action) { const handler = reducers[action.type]; if (handler) return handler(state, action); diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js index f6acd6d07..c36ccc18c 100644 --- a/ui/js/selectors/app.js +++ b/ui/js/selectors/app.js @@ -191,3 +191,8 @@ export const selectBadgeNumber = createSelector( _selectState, state => state.badgeNumber ); + +export const selectNavigatingBack = createSelector( + _selectState, + state => state.navigatingBack +);