From 455c8e314c22882906d35397555cfd87dd4732e2 Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 27 Feb 2024 09:53:05 +0100 Subject: [PATCH] refactor(Library): use LoadNextPage instead of pagination logic --- src/routes/Library/Library.js | 28 ++++++++++++-------- src/routes/Library/styles.less | 31 ----------------------- src/routes/Library/useLibrary.js | 14 ++++++++-- src/routes/Library/useSelectableInputs.js | 16 +----------- 4 files changed, 31 insertions(+), 58 deletions(-) diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js index e45dd585a..6fb71e85d 100644 --- a/src/routes/Library/Library.js +++ b/src/routes/Library/Library.js @@ -5,11 +5,13 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const { default: Icon } = require('@stremio/stremio-icons/react'); const NotFound = require('stremio/routes/NotFound'); -const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, useNotifications, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common'); +const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, useProfile, useNotifications, routesRegexp, useOnScrollToBottom, useBinaryState, withCoreSuspender } = require('stremio/common'); const useLibrary = require('./useLibrary'); const useSelectableInputs = require('./useSelectableInputs'); const styles = require('./styles'); +const SCROLL_TO_BOTTOM_TRESHOLD = 400; + function withModel(Library) { const withModel = ({ urlParams, queryParams }) => { const model = React.useMemo(() => { @@ -46,9 +48,21 @@ function withModel(Library) { const Library = ({ model, urlParams, queryParams }) => { const profile = useProfile(); const notifications = useNotifications(); - const library = useLibrary(model, urlParams, queryParams); - const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library); + const [library, loadNextPage] = useLibrary(model, urlParams, queryParams); + const [typeSelect, sortSelect, hasNextPage] = useSelectableInputs(library); const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false); + const scrollContainerRef = React.useRef(null); + const onScrollToBottom = React.useCallback(() => { + if (hasNextPage) { + loadNextPage(); + } + }, [hasNextPage, loadNextPage]); + const onScroll = useOnScrollToBottom(onScrollToBottom, SCROLL_TO_BOTTOM_TRESHOLD); + React.useLayoutEffect(() => { + if (library.selected && library.selected.request.page === 1) { + scrollContainerRef.current.scrollTop = 0; + } + }, [library.selected]); return (
@@ -58,12 +72,6 @@ const Library = ({ model, urlParams, queryParams }) => {
- { - paginationInput !== null ? - - : - null - } @@ -107,7 +115,7 @@ const Library = ({ model, urlParams, queryParams }) => {
Empty {model === 'library' ? 'Library' : 'Continue Watching'}
: -
+
{library.catalog.map((libItem, index) => ( ))} diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 87062fb9b..ee89347ae 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -7,13 +7,6 @@ multiselect-menu-container: menu-container; } -:import('~stremio/common/PaginationInput/styles.less') { - pagination-prev-button-container: prev-button-container; - pagination-next-button-container: next-button-container; - pagination-button-icon: icon; - pagination-label: label; -} - :import('~stremio/common/ModalDialog/styles.less') { selectable-inputs-modal-container: modal-dialog-container; selectable-inputs-modal-content: modal-dialog-content; @@ -75,26 +68,6 @@ .spacing { flex: 1; } - - .pagination-input { - flex: none; - height: 3rem; - margin-left: 1.5rem; - - .pagination-prev-button-container, .pagination-next-button-container { - width: 3rem; - height: 3rem; - - .pagination-button-icon { - width: 1rem; - height: 1rem; - } - } - - .pagination-label { - width: 3rem; - } - } } .message-container { @@ -277,10 +250,6 @@ display: none; } - .pagination-input { - margin-left: 0; - } - .filter-container { display: flex; } diff --git a/src/routes/Library/useLibrary.js b/src/routes/Library/useLibrary.js index 8b6dee216..a7e1aeb68 100644 --- a/src/routes/Library/useLibrary.js +++ b/src/routes/Library/useLibrary.js @@ -1,9 +1,19 @@ // Copyright (C) 2017-2023 Smart code 203358507 const React = require('react'); +const { useServices } = require('stremio/services'); const { useModelState } = require('stremio/common'); const useLibrary = (model, urlParams, queryParams) => { + const { core } = useServices(); + const loadNextPage = React.useCallback(() => { + core.transport.dispatch({ + action: 'LibraryWithFilters', + args: { + action: 'LoadNextPage', + } + }, 'library'); + }, []); const action = React.useMemo(() => ({ action: 'Load', args: { @@ -12,12 +22,12 @@ const useLibrary = (model, urlParams, queryParams) => { request: { type: typeof urlParams.type === 'string' ? urlParams.type : null, sort: queryParams.has('sort') ? queryParams.get('sort') : undefined, - page: queryParams.has('page') ? parseInt(queryParams.get('page'), 10) : undefined } } } }), [urlParams, queryParams]); - return useModelState({ model, action }); + const library = useModelState({ model, action }); + return [library, loadNextPage]; }; module.exports = useLibrary; diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js index f98307479..2121d1392 100644 --- a/src/routes/Library/useSelectableInputs.js +++ b/src/routes/Library/useSelectableInputs.js @@ -32,21 +32,7 @@ const mapSelectableInputs = (library, t) => { window.location = event.value; } }; - const paginationInput = library.selectable.prevPage || library.selectable.nextPage ? - { - label: library.selected.request.page.toString(), - onSelect: (event) => { - if (event.value === 'prev' && library.selectable.prevPage) { - window.location = library.selectable.prevPage.deepLinks.library; - } - if (event.value === 'next' && library.selectable.nextPage) { - window.location = library.selectable.nextPage.deepLinks.library; - } - } - } - : - null; - return [typeSelect, sortSelect, paginationInput]; + return [typeSelect, sortSelect, library.selectable.nextPage]; }; const useSelectableInputs = (library) => {