diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index c4580f6f2..d2e2ce462 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -5,15 +5,17 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('@stremio/stremio-icons/dom'); const { useServices } = require('stremio/services'); -const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, PaginationInput, CONSTANTS, useBinaryState } = require('stremio/common'); +const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, CONSTANTS, useBinaryState, useOnScrollToBottom } = require('stremio/common'); const useDiscover = require('./useDiscover'); const useSelectableInputs = require('./useSelectableInputs'); const styles = require('./styles'); +const SCROLL_TO_BOTTOM_TRESHOLD = 400; + const Discover = ({ urlParams, queryParams }) => { const { core } = useServices(); - const discover = useDiscover(urlParams, queryParams); - const [selectInputs, paginationInput] = useSelectableInputs(discover); + const [discover, loadNextPage] = useDiscover(urlParams, queryParams); + const [selectInputs, hasNextPage] = useSelectableInputs(discover); const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false); const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false); const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0); @@ -62,6 +64,12 @@ const Discover = ({ urlParams, queryParams }) => { event.currentTarget.focus(); } }, [selectedMetaItemIndex]); + const onScrollToBottom = React.useCallback(() => { + if (hasNextPage) { + loadNextPage(); + } + }, [hasNextPage, loadNextPage]); + const onScroll = useOnScrollToBottom(onScrollToBottom, SCROLL_TO_BOTTOM_TRESHOLD); React.useEffect(() => { closeInputsModal(); closeAddonModal(); @@ -94,13 +102,6 @@ const Discover = ({ urlParams, queryParams }) => { -
- { - paginationInput !== null ? - - : - - }
: null @@ -141,7 +142,7 @@ const Discover = ({ urlParams, queryParams }) => { ))} : -
+
{discover.catalog.content.content.map((metaItem, index) => ( ({ types: [], catalogs: [], extra: [], - prevPage: null, - nextPage: null + nextPage: false }, catalog: null, defaultRequest: null, - page: 1, }); const map = (discover) => ({ @@ -38,6 +36,14 @@ const map = (discover) => ({ const useDiscover = (urlParams, queryParams) => { const { core } = useServices(); + const loadNextPage = React.useCallback(() => { + core.transport.dispatch({ + action: 'CatalogWithFilters', + args: { + action: 'LoadNextPage' + } + }, 'discover'); + }, []); const action = React.useMemo(() => { if (typeof urlParams.transportUrl === 'string' && typeof urlParams.type === 'string' && typeof urlParams.catalogId === 'string') { const { hostname } = UrlUtils.parse(urlParams.transportUrl); @@ -79,7 +85,8 @@ const useDiscover = (urlParams, queryParams) => { action: 'Unload' }; }, [urlParams, queryParams]); - return useModelState({ model: 'discover', action, map, init }); + const discover = useModelState({ model: 'discover', action, map, init }); + return [discover, loadNextPage]; }; module.exports = useDiscover;