library pagination added

src/routes/Library/Library.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const NotFound = require('stremio/routes/NotFound');
-const { Button, Multiselect, MainNavBars, LibItem, Image, useProfile, routesRegexp } = require('stremio/common');
+const { Button, Multiselect, MainNavBars, LibItem, Image, PaginationInput, useProfile, routesRegexp } = require('stremio/common');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@@ -12,7 +12,7 @@ const styles = require('./styles');
 const Library = ({ model, urlParams, queryParams }) => {
     const profile = useProfile();
     const library = useLibrary(model, urlParams, queryParams);
-    const [typeSelect, sortSelect] = useSelectableInputs(library);
+    const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library);
     return (
         <MainNavBars className={styles['library-container']} route={model}>
             <div className={styles['library-content']}>
@@ -21,6 +21,13 @@ const Library = ({ model, urlParams, queryParams }) => {
                         <div className={styles['selectable-inputs-container']}>
                             <Multiselect {...typeSelect} className={styles['select-input-container']} />
                             <Multiselect {...sortSelect} className={styles['select-input-container']} />
+                            <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

src/routes/Library/styles.less

@@ -7,6 +7,13 @@
     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;
+}
+
 .library-container {
     width: 100%;
     height: 100%;
@@ -41,6 +48,44 @@
                     overflow: auto;
                 }
             }
+
+            .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;
+                }
+            }
         }
 
         .message-container {

src/routes/Library/useLibrary.js

@@ -7,7 +7,9 @@ const init = () => ({
     selected: null,
     selectable: {
         types: [],
-        sorts: []
+        sorts: [],
+        prevPage: null,
+        nextPage: null
     },
     catalog: []
 });
@@ -20,7 +22,8 @@ const useLibrary = (model, urlParams, queryParams) => {
             args: {
                 request: {
                     type: typeof urlParams.type === 'string' ? urlParams.type : null,
-                    sort: queryParams.has('sort') ? queryParams.get('sort') : undefined
+                    sort: queryParams.has('sort') ? queryParams.get('sort') : undefined,
+                    page: queryParams.has('page') ? parseInt(queryParams.get('page'), 10) : 1
                 }
             }
         }

src/routes/Library/useSelectableInputs.js

@@ -31,7 +31,21 @@ const mapSelectableInputs = (library) => {
             window.location = event.value;
         }
     };
-    return [typeSelect, sortSelect];
+    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];
 };
 
 const useSelectableInputs = (library) => {