dicover adapted to changes in core

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 [discover, loadNextPage] = useDiscover(urlParams, queryParams);
-    const [selectInputs, paginationInput] = useSelectableInputs(discover);
+    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 }) => {
                                 <Button className={styles['filter-container']} title={'All filters'} onClick={openInputsModal}>
                                     <Icon className={styles['filter-icon']} icon={'ic_filter'} />
                                 </Button>
-                                <div className={styles['spacing']} />
-                                {
-                                    paginationInput !== null ?
-                                        <PaginationInput {...paginationInput} className={styles['pagination-input']} />
-                                        :
-                                        <PaginationInput label={'1'} className={classnames(styles['pagination-input'], styles['pagination-input-placeholder'])} />
-                                }
                             </div>
                             :
                             null
@@ -141,7 +142,7 @@ const Discover = ({ urlParams, queryParams }) => {
                                         ))}
                                     </div>
                                     :
-                                    <div ref={metaItemsContainerRef} className={styles['meta-items-container']} onFocusCapture={metaItemsOnFocusCapture}>
+                                    <div ref={metaItemsContainerRef} className={styles['meta-items-container']} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
                                         {discover.catalog.content.content.map((metaItem, index) => (
                                             <MetaItem
                                                 key={index}

src/routes/Discover/styles.less

@@ -87,44 +87,6 @@
                         fill: @color-secondaryvariant1-90;
                     }
                 }
-
-                .spacing {
-                    flex: 1;
-                }
-
-                .pagination-input {
-                    flex: none;
-                    height: 3.5rem;
-                    margin-left: 1.5rem;
-
-                    &.pagination-input-placeholder {
-                        pointer-events: none;
-
-                        .pagination-prev-button-container, .pagination-next-button-container {
-                            .pagination-button-icon {
-                                fill: @color-surface-dark5-90;
-                            }
-                        }
-
-                        .pagination-label {
-                            color: @color-surface-dark5-90;
-                        }
-                    }
-
-                    .pagination-prev-button-container, .pagination-next-button-container {
-                        width: 3.5rem;
-                        height: 3.5rem;
-
-                        .pagination-button-icon {
-                            width: 1rem;
-                            height: 1rem;
-                        }
-                    }
-
-                    .pagination-label {
-                        width: 3rem;
-                    }
-                }
             }
 
             .missing-addon-warning-container {
@@ -427,23 +389,16 @@
         .discover-content {
             .catalog-container {
                 .selectable-inputs-container {
-                    flex-direction: row-reverse;
                     justify-content: space-between;
 
                     .select-input {
-                        display: none;
+                        &:nth-child(n+3) {
-                    }
+                            display: none;
 
-                    .filter-container {
+                            &~.filter-container {
-                        display: flex;
+                                display: flex;
-                    }
+                            }
-
+                        }
-                    .spacing {
-                        display: none;
-                    }
-
-                    .pagination-input {
-                        margin-left: 0;
                     }
                 }
 

src/routes/Discover/useDiscover.js

@@ -11,12 +11,10 @@ const init = () => ({
         types: [],
         catalogs: [],
         extra: [],
-        prevPage: null,
+        nextPage: false
-        nextPage: null
     },
     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;