From 7b372b88cc7bfe0837ef6d01a24a1d2c6aba691f Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 11:57:27 +0300 Subject: [PATCH 01/20] removeAllListeners added to services transport --- src/services/Chromecast/ChromecastTransport.js | 3 +++ src/services/Core/CoreTransport.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/services/Chromecast/ChromecastTransport.js b/src/services/Chromecast/ChromecastTransport.js index 0d3f7041c..8cd84eeba 100644 --- a/src/services/Chromecast/ChromecastTransport.js +++ b/src/services/Chromecast/ChromecastTransport.js @@ -106,6 +106,9 @@ function ChromecastTransport() { this.off = function(name, listener) { events.off(name, listener); }; + this.removeAllListeners = function() { + events.removeAllListeners(); + }; this.getCastState = function() { return cast.framework.CastContext.getInstance().getCastState(); }; diff --git a/src/services/Core/CoreTransport.js b/src/services/Core/CoreTransport.js index 5a74eedd3..0e220c23d 100644 --- a/src/services/Core/CoreTransport.js +++ b/src/services/Core/CoreTransport.js @@ -31,6 +31,9 @@ function CoreTransport() { this.off = function(name, listener) { events.off(name, listener); }; + this.removeAllListeners = function() { + events.removeAllListeners(); + }; this.getState = function(field) { return get_state(field); }; From b083548587c3eab7e9b91057a51b1fef1cbe3890 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 11:57:58 +0300 Subject: [PATCH 02/20] react-virtualized installed --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 38 insertions(+) diff --git a/package-lock.json b/package-lock.json index 0986d2e18..a1b3190e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3187,6 +3187,11 @@ "shallow-clone": "^3.0.0" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -3676,6 +3681,11 @@ } } }, + "csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" + }, "data-urls": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", @@ -3871,6 +3881,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", @@ -8501,6 +8520,24 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-virtualized": { + "version": "9.22.3", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz", + "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==", + "requires": { + "@babel/runtime": "^7.7.2", + "clsx": "^1.0.4", + "dom-helpers": "^5.1.3", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.4" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", diff --git a/package.json b/package.json index ad1a598d9..b10ac51e2 100755 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react": "16.12.0", "react-dom": "16.12.0", "react-focus-lock": "2.2.1", + "react-virtualized": "9.22.3", "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#40204ad9942fe786794c62f99ea5ab2b52b24096" }, "devDependencies": { From 92ed0cdaa725482f60e5c7a1d3ea28aef2dba779 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 12:07:22 +0300 Subject: [PATCH 03/20] extra props expanded in MetaRow --- src/common/MetaRow/MetaRow.js | 4 ++-- src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index 9aeb530d7..512a39983 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -10,9 +10,9 @@ const CONSTANTS = require('stremio/common/CONSTANTS'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); const styles = require('./styles'); -const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => { +const MetaRow = ({ className, title, message, items, itemComponent, deepLinks, ...props }) => { return ( -
+
{ (typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
diff --git a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js index 5ad9ccea5..53012d3ca 100644 --- a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js +++ b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js @@ -8,9 +8,9 @@ const Button = require('stremio/common/Button'); const CONSTANTS = require('stremio/common/CONSTANTS'); const styles = require('./styles'); -const MetaRowPlaceholder = ({ className, title, deepLinks }) => { +const MetaRowPlaceholder = ({ className, title, deepLinks, ...props }) => { return ( -
+
0 ? title : null}> {typeof title === 'string' && title.length > 0 ? title : null} From 473ccafee361d20237828383857ddffa01d64c19 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 12:10:15 +0300 Subject: [PATCH 04/20] forward ref to MetaRow --- src/common/MetaRow/MetaRow.js | 8 +++++--- .../MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index 512a39983..207aea15d 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -10,9 +10,9 @@ const CONSTANTS = require('stremio/common/CONSTANTS'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); const styles = require('./styles'); -const MetaRow = ({ className, title, message, items, itemComponent, deepLinks, ...props }) => { +const MetaRow = React.forwardRef(({ className, title, message, items, itemComponent, deepLinks, ...props }, ref) => { return ( -
+
{ (typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
@@ -59,7 +59,9 @@ const MetaRow = ({ className, title, message, items, itemComponent, deepLinks, . }
); -}; +}); + +MetaRow.displayName = 'MetaRow'; MetaRow.Placeholder = MetaRowPlaceholder; diff --git a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js index 53012d3ca..3b008ea9e 100644 --- a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js +++ b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js @@ -8,9 +8,9 @@ const Button = require('stremio/common/Button'); const CONSTANTS = require('stremio/common/CONSTANTS'); const styles = require('./styles'); -const MetaRowPlaceholder = ({ className, title, deepLinks, ...props }) => { +const MetaRowPlaceholder = React.forwardRef(({ className, title, deepLinks, ...props }, ref) => { return ( -
+
0 ? title : null}> {typeof title === 'string' && title.length > 0 ? title : null} @@ -37,7 +37,9 @@ const MetaRowPlaceholder = ({ className, title, deepLinks, ...props }) => {
); -}; +}); + +MetaRowPlaceholder.displayName = 'MetaRowPlaceholder'; MetaRowPlaceholder.propTypes = { className: PropTypes.string, From 68cb143671f05b09658c54032ca81186595851ca Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 12:40:52 +0300 Subject: [PATCH 05/20] poc react-virtualized list adapted to the board --- src/routes/Board/Board.js | 123 +++++++++++++++++++++-------------- src/routes/Board/styles.less | 7 +- 2 files changed, 78 insertions(+), 52 deletions(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index fef7ae766..c517f966b 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -2,69 +2,96 @@ const React = require('react'); const classnames = require('classnames'); +const { AutoSizer, List, CellMeasurer, CellMeasurerCache } = require('react-virtualized'); const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useProfile, useStreamingServer } = require('stremio/common'); const useBoard = require('./useBoard'); const useContinueWatchingPreview = require('./useContinueWatchingPreview'); const styles = require('./styles'); +const withMeasure = (Component) => { + return React.forwardRef(function withMeasure({ measure, ...props }, ref) { + React.useLayoutEffect(() => { + measure(); + }, [measure]); + return ( + + ); + }); +}; + +const MetaRowWithMeasure = withMeasure(MetaRow); +const MetaRowPlaceholderWithMeasure = withMeasure(MetaRow.Placeholder); + const Board = () => { const board = useBoard(); const profile = useProfile(); const streamingServer = useStreamingServer(); const continueWatchingPreview = useContinueWatchingPreview(); + const cache = React.useMemo(() => new CellMeasurerCache({ + fixedWidth: true + }), []); return (
- { - continueWatchingPreview.libraryItems.length > 0 ? - + {({ width, height }) => ( + console.log('onRowsRendered', args)} + rowRenderer={({ index, key, style, parent }) => { + const catalog = board.catalogs[index]; + return ( + + {({ registerChild, measure }) => ( + catalog.content.type === 'Ready' ? + + : + catalog.content.type === 'Err' ? + + : + + )} + + ); + }} /> - : - null - } - {board.catalogs.map((catalog, index) => { - switch (catalog.content.type) { - case 'Ready': { - return ( - - ); - } - case 'Err': { - return ( - - ); - } - case 'Loading': { - return ( - - ); - } - } - })} + )} +
{ diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index d473d81a0..99015d6f6 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -25,17 +25,16 @@ .board-content { width: 100%; height: 100%; - overflow-y: auto; .board-row { - margin: 4rem 2rem; + padding: 2rem; &:first-child { - margin-top: 2rem; + padding-top: 2rem; } &:last-child { - margin-bottom: 2rem; + padding-bottom: 2rem; } } } From 24589034df072b5ae69d2425936ee8f070470535 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 15:56:17 +0300 Subject: [PATCH 06/20] switch to react-virtual --- package-lock.json | 50 ++++---------- package.json | 2 +- src/routes/Board/Board.js | 126 +++++++++++++---------------------- src/routes/Board/styles.less | 19 ++++-- 4 files changed, 74 insertions(+), 123 deletions(-) diff --git a/package-lock.json b/package-lock.json index a1b3190e4..9fe1f4c27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1752,6 +1752,11 @@ "fastq": "^1.6.0" } }, + "@reach/observe-rect": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz", + "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==" + }, "@sentry/browser": { "version": "6.13.3", "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.13.3.tgz", @@ -3061,9 +3066,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001274", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz", - "integrity": "sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==", + "version": "1.0.30001341", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz", + "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==", "dev": true }, "chalk": { @@ -3187,11 +3192,6 @@ "shallow-clone": "^3.0.0" } }, - "clsx": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", - "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" - }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -3681,11 +3681,6 @@ } } }, - "csstype": { - "version": "3.0.11", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", - "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" - }, "data-urls": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", @@ -3881,15 +3876,6 @@ "utila": "~0.4" } }, - "dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "requires": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "dom-serializer": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", @@ -8520,22 +8506,12 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, - "react-virtualized": { - "version": "9.22.3", - "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz", - "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==", + "react-virtual": { + "version": "2.10.4", + "resolved": "https://registry.npmjs.org/react-virtual/-/react-virtual-2.10.4.tgz", + "integrity": "sha512-Ir6+oPQZTVHfa6+JL9M7cvMILstFZH/H3jqeYeKI4MSUX+rIruVwFC6nGVXw9wqAw8L0Kg2KvfXxI85OvYQdpQ==", "requires": { - "@babel/runtime": "^7.7.2", - "clsx": "^1.0.4", - "dom-helpers": "^5.1.3", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.4" + "@reach/observe-rect": "^1.1.0" } }, "readable-stream": { diff --git a/package.json b/package.json index b10ac51e2..afdf26c18 100755 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "react": "16.12.0", "react-dom": "16.12.0", "react-focus-lock": "2.2.1", - "react-virtualized": "9.22.3", + "react-virtual": "2.10.4", "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#40204ad9942fe786794c62f99ea5ab2b52b24096" }, "devDependencies": { diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index c517f966b..6280eb18d 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -2,96 +2,66 @@ const React = require('react'); const classnames = require('classnames'); -const { AutoSizer, List, CellMeasurer, CellMeasurerCache } = require('react-virtualized'); +const { useVirtual } = require('react-virtual'); const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useProfile, useStreamingServer } = require('stremio/common'); const useBoard = require('./useBoard'); const useContinueWatchingPreview = require('./useContinueWatchingPreview'); const styles = require('./styles'); -const withMeasure = (Component) => { - return React.forwardRef(function withMeasure({ measure, ...props }, ref) { - React.useLayoutEffect(() => { - measure(); - }, [measure]); - return ( - - ); - }); -}; - -const MetaRowWithMeasure = withMeasure(MetaRow); -const MetaRowPlaceholderWithMeasure = withMeasure(MetaRow.Placeholder); - const Board = () => { - const board = useBoard(); const profile = useProfile(); const streamingServer = useStreamingServer(); + const board = useBoard(); const continueWatchingPreview = useContinueWatchingPreview(); - const cache = React.useMemo(() => new CellMeasurerCache({ - fixedWidth: true - }), []); + const boardCatalogsOffset = continueWatchingPreview.libraryItems.length > 0 ? 1 : 0; + const scrollContainerRef = React.useRef(); + const virtualizer = useVirtual({ + size: board.catalogs.length + boardCatalogsOffset, + parentRef: scrollContainerRef, + }); return (
-
- - {({ width, height }) => ( - console.log('onRowsRendered', args)} - rowRenderer={({ index, key, style, parent }) => { - const catalog = board.catalogs[index]; - return ( - - {({ registerChild, measure }) => ( - catalog.content.type === 'Ready' ? - - : - catalog.content.type === 'Err' ? - - : - - )} - - ); - }} - /> - )} - +
+
+ {virtualizer.virtualItems.map(({ index, measureRef, start }) => ( +
+ { + index === 0 && continueWatchingPreview.libraryItems.length > 0 ? + + : + board.catalogs[index - boardCatalogsOffset].content.type === 'Ready' ? + + : + board.catalogs[index - boardCatalogsOffset].content.type === 'Err' ? + + : + + } +
+ ))} +
{ diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 99015d6f6..d875e6925 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -25,16 +25,21 @@ .board-content { width: 100%; height: 100%; + overflow-y: auto; - .board-row { - padding: 2rem; + .board-rows-window { + position: relative; + width: 100%; - &:first-child { - padding-top: 2rem; - } + .board-row-container { + position: absolute; + top: 0; + left: 0; + width: 100%; - &:last-child { - padding-bottom: 2rem; + .board-row { + padding: 2rem; + } } } } From 9bd9b18365c0ecfb17af80c07a60751f112055cb Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 18:36:49 +0300 Subject: [PATCH 07/20] LoadRange action dispatched on scroll --- src/routes/Board/Board.js | 18 ++++++++++++++++-- src/routes/Board/useBoard.js | 15 ++++++++++++++- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 6280eb18d..80cb289e0 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -11,14 +11,28 @@ const styles = require('./styles'); const Board = () => { const profile = useProfile(); const streamingServer = useStreamingServer(); - const board = useBoard(); + const [board, loadBoardCatalogs] = useBoard(); const continueWatchingPreview = useContinueWatchingPreview(); const boardCatalogsOffset = continueWatchingPreview.libraryItems.length > 0 ? 1 : 0; const scrollContainerRef = React.useRef(); const virtualizer = useVirtual({ - size: board.catalogs.length + boardCatalogsOffset, parentRef: scrollContainerRef, + size: board.catalogs.length + boardCatalogsOffset, + overscan: 1 }); + React.useEffect(() => { + if (virtualizer.virtualItems.length === 0) { + return; + } + + const start = Math.max(0, virtualizer.virtualItems[0].index - boardCatalogsOffset); + const end = virtualizer.virtualItems[virtualizer.virtualItems.length - 1].index - boardCatalogsOffset; + if (end < start) { + return; + } + + loadBoardCatalogs(start, end); + }, [virtualizer.virtualItems, boardCatalogsOffset]); return (
diff --git a/src/routes/Board/useBoard.js b/src/routes/Board/useBoard.js index d0d78ed2c..7262d9fc6 100644 --- a/src/routes/Board/useBoard.js +++ b/src/routes/Board/useBoard.js @@ -1,6 +1,8 @@ // Copyright (C) 2017-2022 Smart code 203358507 const React = require('react'); +const debounce = require('lodash.debounce'); +const { useServices } = require('stremio/services'); const { useModelState } = require('stremio/common'); const init = () => ({ @@ -9,6 +11,7 @@ const init = () => ({ }); const useBoard = () => { + const { core } = useServices(); const action = React.useMemo(() => ({ action: 'Load', args: { @@ -16,7 +19,17 @@ const useBoard = () => { args: { extra: [] } } }), []); - return useModelState({ model: 'board', timeout: 1500, action, init }); + const loadRange = React.useCallback(debounce((start, end) => { + core.transport.dispatch({ + action: 'CatalogsWithExtra', + args: { + action: 'LoadRange', + args: { start, end } + } + }, 'board'); + }, 100), []); + const board = useModelState({ model: 'board', timeout: 1500, action, init }); + return [board, loadRange]; }; module.exports = useBoard; From 5ad5b8c8603a9f1d4c3386e81a6ce93b320ed318 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 21:17:50 +0300 Subject: [PATCH 08/20] install react-window --- package-lock.json | 21 +++++++++++---------- package.json | 2 +- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9fe1f4c27..d542dfcb7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1752,11 +1752,6 @@ "fastq": "^1.6.0" } }, - "@reach/observe-rect": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz", - "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==" - }, "@sentry/browser": { "version": "6.13.3", "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.13.3.tgz", @@ -7268,6 +7263,11 @@ "fs-monkey": "1.0.3" } }, + "memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -8506,12 +8506,13 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "react-virtual": { - "version": "2.10.4", - "resolved": "https://registry.npmjs.org/react-virtual/-/react-virtual-2.10.4.tgz", - "integrity": "sha512-Ir6+oPQZTVHfa6+JL9M7cvMILstFZH/H3jqeYeKI4MSUX+rIruVwFC6nGVXw9wqAw8L0Kg2KvfXxI85OvYQdpQ==", + "react-window": { + "version": "1.8.7", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.7.tgz", + "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==", "requires": { - "@reach/observe-rect": "^1.1.0" + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" } }, "readable-stream": { diff --git a/package.json b/package.json index afdf26c18..ad4cf5d8f 100755 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "react": "16.12.0", "react-dom": "16.12.0", "react-focus-lock": "2.2.1", - "react-virtual": "2.10.4", + "react-window": "1.8.7", "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#40204ad9942fe786794c62f99ea5ab2b52b24096" }, "devDependencies": { From 5b12f1f16cf5b447bd4091b3c06466d17bc93760 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 21:18:14 +0300 Subject: [PATCH 09/20] revert board --- src/routes/Board/Board.js | 113 ++++++++++++++++------------------- src/routes/Board/styles.less | 18 +++--- 2 files changed, 58 insertions(+), 73 deletions(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 80cb289e0..fef7ae766 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -2,80 +2,69 @@ const React = require('react'); const classnames = require('classnames'); -const { useVirtual } = require('react-virtual'); const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useProfile, useStreamingServer } = require('stremio/common'); const useBoard = require('./useBoard'); const useContinueWatchingPreview = require('./useContinueWatchingPreview'); const styles = require('./styles'); const Board = () => { + const board = useBoard(); const profile = useProfile(); const streamingServer = useStreamingServer(); - const [board, loadBoardCatalogs] = useBoard(); const continueWatchingPreview = useContinueWatchingPreview(); - const boardCatalogsOffset = continueWatchingPreview.libraryItems.length > 0 ? 1 : 0; - const scrollContainerRef = React.useRef(); - const virtualizer = useVirtual({ - parentRef: scrollContainerRef, - size: board.catalogs.length + boardCatalogsOffset, - overscan: 1 - }); - React.useEffect(() => { - if (virtualizer.virtualItems.length === 0) { - return; - } - - const start = Math.max(0, virtualizer.virtualItems[0].index - boardCatalogsOffset); - const end = virtualizer.virtualItems[virtualizer.virtualItems.length - 1].index - boardCatalogsOffset; - if (end < start) { - return; - } - - loadBoardCatalogs(start, end); - }, [virtualizer.virtualItems, boardCatalogsOffset]); return (
-
-
- {virtualizer.virtualItems.map(({ index, measureRef, start }) => ( -
- { - index === 0 && continueWatchingPreview.libraryItems.length > 0 ? - - : - board.catalogs[index - boardCatalogsOffset].content.type === 'Ready' ? - - : - board.catalogs[index - boardCatalogsOffset].content.type === 'Err' ? - - : - - } -
- ))} -
+
+ { + continueWatchingPreview.libraryItems.length > 0 ? + + : + null + } + {board.catalogs.map((catalog, index) => { + switch (catalog.content.type) { + case 'Ready': { + return ( + + ); + } + case 'Err': { + return ( + + ); + } + case 'Loading': { + return ( + + ); + } + } + })}
{ diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index d875e6925..d473d81a0 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -27,19 +27,15 @@ height: 100%; overflow-y: auto; - .board-rows-window { - position: relative; - width: 100%; + .board-row { + margin: 4rem 2rem; - .board-row-container { - position: absolute; - top: 0; - left: 0; - width: 100%; + &:first-child { + margin-top: 2rem; + } - .board-row { - padding: 2rem; - } + &:last-child { + margin-bottom: 2rem; } } } From b609124819a784cdf179316488013d21b89b9d14 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 21:22:29 +0300 Subject: [PATCH 10/20] use padding for board rows --- src/routes/Board/styles.less | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index d473d81a0..985907c71 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -28,15 +28,7 @@ overflow-y: auto; .board-row { - margin: 4rem 2rem; - - &:first-child { - margin-top: 2rem; - } - - &:last-child { - margin-bottom: 2rem; - } + padding: 2rem; } } } From 469491f09c6c831a7ca23be545d7b618c449268c Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Tue, 17 May 2022 21:22:48 +0300 Subject: [PATCH 11/20] adapt to new api of board hook --- src/routes/Board/Board.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index fef7ae766..0f8f123fc 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -8,7 +8,7 @@ const useContinueWatchingPreview = require('./useContinueWatchingPreview'); const styles = require('./styles'); const Board = () => { - const board = useBoard(); + const [board] = useBoard(); const profile = useProfile(); const streamingServer = useStreamingServer(); const continueWatchingPreview = useContinueWatchingPreview(); From 76482681bd4b1c4b5e3f4935df0aa9572a7d6d69 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Wed, 18 May 2022 09:21:23 +0300 Subject: [PATCH 12/20] react-window removed --- package-lock.json | 14 -------------- package.json | 1 - 2 files changed, 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index d542dfcb7..637dee56a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7263,11 +7263,6 @@ "fs-monkey": "1.0.3" } }, - "memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" - }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", @@ -8506,15 +8501,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "react-window": { - "version": "1.8.7", - "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.7.tgz", - "integrity": "sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==", - "requires": { - "@babel/runtime": "^7.0.0", - "memoize-one": ">=3.1.1 <6" - } - }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", diff --git a/package.json b/package.json index ad4cf5d8f..ad1a598d9 100755 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "react": "16.12.0", "react-dom": "16.12.0", "react-focus-lock": "2.2.1", - "react-window": "1.8.7", "spatial-navigation-polyfill": "git+https://git@github.com/Stremio/spatial-navigation.git#40204ad9942fe786794c62f99ea5ab2b52b24096" }, "devDependencies": { From cdb6a4d3bc2be8f5c4eacd6e938e60b637dce49f Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Wed, 18 May 2022 09:32:50 +0300 Subject: [PATCH 13/20] checkout package-lock --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 637dee56a..0986d2e18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3061,9 +3061,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001341", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz", - "integrity": "sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==", + "version": "1.0.30001274", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz", + "integrity": "sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==", "dev": true }, "chalk": { From a6b51e69cb286b33e8b38977b3d22e509a7e2158 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Wed, 18 May 2022 12:40:35 +0300 Subject: [PATCH 14/20] change loadRange function api --- src/routes/Board/useBoard.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/routes/Board/useBoard.js b/src/routes/Board/useBoard.js index 7262d9fc6..1233b9a10 100644 --- a/src/routes/Board/useBoard.js +++ b/src/routes/Board/useBoard.js @@ -1,7 +1,6 @@ // Copyright (C) 2017-2022 Smart code 203358507 const React = require('react'); -const debounce = require('lodash.debounce'); const { useServices } = require('stremio/services'); const { useModelState } = require('stremio/common'); @@ -19,15 +18,15 @@ const useBoard = () => { args: { extra: [] } } }), []); - const loadRange = React.useCallback(debounce((start, end) => { + const loadRange = React.useCallback((range) => { core.transport.dispatch({ action: 'CatalogsWithExtra', args: { action: 'LoadRange', - args: { start, end } + args: range } }, 'board'); - }, 100), []); + }, []); const board = useModelState({ model: 'board', timeout: 1500, action, init }); return [board, loadRange]; }; From d812e50bd285c0610e37662164042a783f267301 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Wed, 18 May 2022 14:07:58 +0300 Subject: [PATCH 15/20] Board rows loaded on scroll --- src/common/getVisibleChildrenRange.js | 28 ++++++++++++++++++++++++++ src/common/index.js | 2 ++ src/routes/Board/Board.js | 29 ++++++++++++++++++++++++--- 3 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 src/common/getVisibleChildrenRange.js diff --git a/src/common/getVisibleChildrenRange.js b/src/common/getVisibleChildrenRange.js new file mode 100644 index 000000000..8e32374f4 --- /dev/null +++ b/src/common/getVisibleChildrenRange.js @@ -0,0 +1,28 @@ +const isChildVisible = (container, element, threshold) => { + const elementTop = element.offsetTop; + const elementBottom = element.offsetTop + element.clientHeight; + const containerTop = container.scrollTop - threshold; + const containerBottom = container.scrollTop + container.clientHeight + threshold; + return (elementTop >= containerTop && elementBottom <= containerBottom) || + (elementTop < containerTop && containerTop < elementBottom) || + (elementTop < containerBottom && containerBottom < elementBottom); +}; + +const getVisibleChildrenRange = (container, threshold) => { + return Array.from(container.children).reduce((result, child, index) => { + if (isChildVisible(container, child, threshold)) { + if (result === null) { + result = { + start: index, + end: index + }; + } else { + result.end = index; + } + } + + return result; + }, null); +}; + +module.exports = getVisibleChildrenRange; diff --git a/src/common/index.js b/src/common/index.js index bcd66a99b..24868a2c7 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -24,6 +24,7 @@ const TextInput = require('./TextInput'); const { ToastProvider, useToast } = require('./Toast'); const comparatorWithPriorities = require('./comparatorWithPriorities'); const CONSTANTS = require('./CONSTANTS'); +const getVisibleChildrenRange = require('./getVisibleChildrenRange'); const languageNames = require('./languageNames'); const routesRegexp = require('./routesRegexp'); const sanitizeLocationPath = require('./sanitizeLocationPath'); @@ -65,6 +66,7 @@ module.exports = { useToast, comparatorWithPriorities, CONSTANTS, + getVisibleChildrenRange, languageNames, routesRegexp, sanitizeLocationPath, diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 0f8f123fc..b3b7860f8 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -2,20 +2,43 @@ const React = require('react'); const classnames = require('classnames'); -const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useProfile, useStreamingServer } = require('stremio/common'); +const debounce = require('lodash.debounce'); +const { MainNavBars, MetaRow, LibItem, MetaItem, StreamingServerWarning, useProfile, useStreamingServer, getVisibleChildrenRange } = require('stremio/common'); const useBoard = require('./useBoard'); const useContinueWatchingPreview = require('./useContinueWatchingPreview'); const styles = require('./styles'); +const THRESHOLD = 300; + const Board = () => { - const [board] = useBoard(); const profile = useProfile(); const streamingServer = useStreamingServer(); const continueWatchingPreview = useContinueWatchingPreview(); + const [board, loadBoardRows] = useBoard(); + const boardCatalogsOffset = continueWatchingPreview.libraryItems.length > 0 ? 1 : 0; + const scrollContainerRef = React.useRef(); + const onVisibleRangeChange = React.useCallback(() => { + const range = getVisibleChildrenRange(scrollContainerRef.current, THRESHOLD); + if (range === null) { + return; + } + + const start = Math.max(0, range.start - boardCatalogsOffset); + const end = range.end - boardCatalogsOffset; + if (end < start) { + return; + } + + loadBoardRows({ start, end }); + }, [boardCatalogsOffset]); + const onScroll = React.useCallback(debounce(onVisibleRangeChange, 250), [onVisibleRangeChange]); + React.useLayoutEffect(() => { + onVisibleRangeChange(); + }, [board.catalogs, onVisibleRangeChange]); return (
-
+
{ continueWatchingPreview.libraryItems.length > 0 ? Date: Wed, 18 May 2022 14:09:24 +0300 Subject: [PATCH 16/20] revert MetaRow changes --- src/common/MetaRow/MetaRow.js | 8 +++----- .../MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js | 8 +++----- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index 207aea15d..9aeb530d7 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -10,9 +10,9 @@ const CONSTANTS = require('stremio/common/CONSTANTS'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); const styles = require('./styles'); -const MetaRow = React.forwardRef(({ className, title, message, items, itemComponent, deepLinks, ...props }, ref) => { +const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => { return ( -
+
{ (typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
@@ -59,9 +59,7 @@ const MetaRow = React.forwardRef(({ className, title, message, items, itemCompon }
); -}); - -MetaRow.displayName = 'MetaRow'; +}; MetaRow.Placeholder = MetaRowPlaceholder; diff --git a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js index 3b008ea9e..5ad9ccea5 100644 --- a/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js +++ b/src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js @@ -8,9 +8,9 @@ const Button = require('stremio/common/Button'); const CONSTANTS = require('stremio/common/CONSTANTS'); const styles = require('./styles'); -const MetaRowPlaceholder = React.forwardRef(({ className, title, deepLinks, ...props }, ref) => { +const MetaRowPlaceholder = ({ className, title, deepLinks }) => { return ( -
+
0 ? title : null}> {typeof title === 'string' && title.length > 0 ? title : null} @@ -37,9 +37,7 @@ const MetaRowPlaceholder = React.forwardRef(({ className, title, deepLinks, ...p
); -}); - -MetaRowPlaceholder.displayName = 'MetaRowPlaceholder'; +}; MetaRowPlaceholder.propTypes = { className: PropTypes.string, From fe216a3bd1e74359488a49a22a1261d4200fd31e Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Wed, 18 May 2022 14:34:59 +0300 Subject: [PATCH 17/20] LoadRange implemented in search --- src/routes/Search/Search.js | 26 +++++++++++++++++++++++--- src/routes/Search/styles.less | 10 +--------- src/routes/Search/useSearch.js | 12 +++++++++++- 3 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/routes/Search/Search.js b/src/routes/Search/Search.js index 1bbd2492f..b2913f638 100644 --- a/src/routes/Search/Search.js +++ b/src/routes/Search/Search.js @@ -3,13 +3,16 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); +const debounce = require('lodash.debounce'); const Icon = require('@stremio/stremio-icons/dom'); -const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo } = require('stremio/common'); +const { Image, MainNavBars, MetaRow, MetaItem, useDeepEqualMemo, getVisibleChildrenRange } = require('stremio/common'); const useSearch = require('./useSearch'); const styles = require('./styles'); +const THRESHOLD = 100; + const Search = ({ queryParams }) => { - const search = useSearch(queryParams); + const [search, loadSearchRows] = useSearch(queryParams); const query = useDeepEqualMemo(() => { return search.selected !== null ? search.selected.extra.reduceRight((query, [name, value]) => { @@ -22,9 +25,26 @@ const Search = ({ queryParams }) => { : null; }, [search.selected]); + const scrollContainerRef = React.useRef(); + const onVisibleRangeChange = React.useCallback(() => { + if (search.catalogs.length === 0) { + return; + } + + const range = getVisibleChildrenRange(scrollContainerRef.current, THRESHOLD); + if (range === null) { + return; + } + + loadSearchRows(range); + }, [search.catalogs]); + const onScroll = React.useCallback(debounce(onVisibleRangeChange, 250), [onVisibleRangeChange]); + React.useLayoutEffect(() => { + onVisibleRangeChange(); + }, [search.catalogs, onVisibleRangeChange]); return ( -
+
{ query === null ?
diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less index e1db94c97..6d9b87a49 100644 --- a/src/routes/Search/styles.less +++ b/src/routes/Search/styles.less @@ -22,15 +22,7 @@ overflow-y: auto; .search-row { - margin: 4rem 2rem; - - &:first-child { - margin-top: 2rem; - } - - &:last-child { - margin-bottom: 2rem; - } + padding: 2rem; } .search-hints-container { diff --git a/src/routes/Search/useSearch.js b/src/routes/Search/useSearch.js index 3bc2ed78a..b3902555e 100644 --- a/src/routes/Search/useSearch.js +++ b/src/routes/Search/useSearch.js @@ -54,7 +54,17 @@ const useSearch = (queryParams) => { }; } }, [queryParams]); - return useModelState({ model: 'search', action, init }); + const loadRange = React.useCallback((range) => { + core.transport.dispatch({ + action: 'CatalogsWithExtra', + args: { + action: 'LoadRange', + args: range + } + }, 'search'); + }, []); + const search = useModelState({ model: 'search', action, init }); + return [search, loadRange]; }; module.exports = useSearch; From 435ebdb3fa8a1783af11a6cb66a7784b2323d6a4 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Thu, 19 May 2022 16:24:07 +0300 Subject: [PATCH 18/20] checks for catalogs which are not yet started to load --- src/routes/Board/Board.js | 4 ++-- src/routes/Search/Search.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index b3b7860f8..2cbe193c9 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -52,7 +52,7 @@ const Board = () => { null } {board.catalogs.map((catalog, index) => { - switch (catalog.content.type) { + switch (catalog.content?.type) { case 'Ready': { return ( { /> ); } - case 'Loading': { + default: { return ( {
: search.catalogs.map((catalog, index) => { - switch (catalog.content.type) { + switch (catalog.content?.type) { case 'Ready': { return ( { /> ); } - case 'Loading': { + default: { return ( Date: Thu, 19 May 2022 16:24:23 +0300 Subject: [PATCH 19/20] update stremio-core-web --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0986d2e18..bca5effec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1833,9 +1833,9 @@ "integrity": "sha512-yT3No1gIWKLV2BhQIeSgG94EzXxmEqXJLulO+pFpziqWNUbmmEKeE+nRvW5wtoIK4SLy+v0bLd0b6HBH3KFfWw==" }, "@stremio/stremio-core-web": { - "version": "0.35.0", - "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.35.0.tgz", - "integrity": "sha512-MN5Mb+5yYV5MQXjzeShqJJeRXc4QLoLP/6TbE6ay6kq8PQ8bT7BreFiFVJunICVo/OmXjYNS3CiJhM5q1J4xZw==", + "version": "0.36.0", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.36.0.tgz", + "integrity": "sha512-A63yB+Pml/c6jtK4l5r7aacZ2Jm+ofaj60MfVCZfzSE4csBPMuoROYx6TM6nI6NU8iUDTcIU+OYoWcMfaT7v7A==", "requires": { "@babel/runtime": "7.15.4" }, diff --git a/package.json b/package.json index ad1a598d9..d40b607a4 100755 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@babel/runtime": "7.16.0", "@sentry/browser": "6.13.3", "@stremio/stremio-colors": "4.0.1", - "@stremio/stremio-core-web": "0.35.0", + "@stremio/stremio-core-web": "0.36.0", "@stremio/stremio-icons": "3.0.5", "@stremio/stremio-video": "0.0.19-rc.1", "a-color-picker": "1.2.1", From d4928c05d9edcdcc3430c672afea61a136adeb72 Mon Sep 17 00:00:00 2001 From: nklhrstv Date: Thu, 19 May 2022 16:28:52 +0300 Subject: [PATCH 20/20] copyright header added --- src/common/getVisibleChildrenRange.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/common/getVisibleChildrenRange.js b/src/common/getVisibleChildrenRange.js index 8e32374f4..f389349e6 100644 --- a/src/common/getVisibleChildrenRange.js +++ b/src/common/getVisibleChildrenRange.js @@ -1,3 +1,5 @@ +// Copyright (C) 2017-2022 Smart code 203358507 + const isChildVisible = (container, element, threshold) => { const elementTop = element.offsetTop; const elementBottom = element.offsetTop + element.clientHeight;