mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
switch to react-virtual
This commit is contained in:
nklhrstv
parent
68cb143671
commit
24589034df
4 changed files with 74 additions and 123 deletions
50
package-lock.json
generated
50
package-lock.json
generated
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Component {...props} ref={ref} />
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className={styles['board-container']}>
|
||||
<MainNavBars className={styles['board-content-container']} route={'board'}>
|
||||
<div className={styles['board-content']}>
|
||||
<AutoSizer>
|
||||
{({ width, height }) => (
|
||||
<List
|
||||
deferredMeasurementCache={cache}
|
||||
width={width}
|
||||
height={height}
|
||||
rowCount={board.catalogs.length}
|
||||
rowHeight={cache.rowHeight}
|
||||
onRowsRendered={(args) => console.log('onRowsRendered', args)}
|
||||
rowRenderer={({ index, key, style, parent }) => {
|
||||
const catalog = board.catalogs[index];
|
||||
return (
|
||||
<CellMeasurer
|
||||
key={key}
|
||||
parent={parent}
|
||||
cache={cache}
|
||||
rowIndex={index}
|
||||
columnIndex={0}
|
||||
>
|
||||
{({ registerChild, measure }) => (
|
||||
catalog.content.type === 'Ready' ?
|
||||
<MetaRowWithMeasure
|
||||
ref={registerChild}
|
||||
measure={measure}
|
||||
style={style}
|
||||
className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`])}
|
||||
title={catalog.title}
|
||||
items={catalog.content.content}
|
||||
itemComponent={MetaItem}
|
||||
deepLinks={catalog.deepLinks}
|
||||
/>
|
||||
:
|
||||
catalog.content.type === 'Err' ?
|
||||
<MetaRowWithMeasure
|
||||
ref={registerChild}
|
||||
measure={measure}
|
||||
style={style}
|
||||
className={styles['board-row']}
|
||||
title={catalog.title}
|
||||
message={catalog.content.content}
|
||||
deepLinks={catalog.deepLinks}
|
||||
/>
|
||||
:
|
||||
<MetaRowPlaceholderWithMeasure
|
||||
ref={registerChild}
|
||||
measure={measure}
|
||||
style={style}
|
||||
className={classnames(styles['board-row'], styles['board-row-poster'])}
|
||||
title={catalog.title}
|
||||
deepLinks={catalog.deepLinks}
|
||||
/>
|
||||
)}
|
||||
</CellMeasurer>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
<div ref={scrollContainerRef} className={styles['board-content']}>
|
||||
<div style={{ height: virtualizer.totalSize }} className={styles['board-rows-window']}>
|
||||
{virtualizer.virtualItems.map(({ index, measureRef, start }) => (
|
||||
<div key={index} ref={measureRef} style={{ transform: `translateY(${start}px)` }} className={styles['board-row-container']}>
|
||||
{
|
||||
index === 0 && continueWatchingPreview.libraryItems.length > 0 ?
|
||||
<MetaRow
|
||||
className={classnames(styles['board-row'], styles['continue-watching-row'])}
|
||||
title={'Continue Watching'}
|
||||
items={continueWatchingPreview.libraryItems}
|
||||
itemComponent={LibItem}
|
||||
deepLinks={continueWatchingPreview.deepLinks}
|
||||
/>
|
||||
:
|
||||
board.catalogs[index - boardCatalogsOffset].content.type === 'Ready' ?
|
||||
<MetaRow
|
||||
className={classnames(styles['board-row'], styles[`board-row-${board.catalogs[index - boardCatalogsOffset].content.content[0].posterShape}`])}
|
||||
title={board.catalogs[index - boardCatalogsOffset].title}
|
||||
items={board.catalogs[index - boardCatalogsOffset].content.content}
|
||||
itemComponent={MetaItem}
|
||||
deepLinks={board.catalogs[index - boardCatalogsOffset].deepLinks}
|
||||
/>
|
||||
:
|
||||
board.catalogs[index - boardCatalogsOffset].content.type === 'Err' ?
|
||||
<MetaRow
|
||||
className={styles['board-row']}
|
||||
title={board.catalogs[index - boardCatalogsOffset].title}
|
||||
message={board.catalogs[index - boardCatalogsOffset].content.content}
|
||||
deepLinks={board.catalogs[index - boardCatalogsOffset].deepLinks}
|
||||
/>
|
||||
:
|
||||
<MetaRow.Placeholder
|
||||
className={classnames(styles['board-row'], styles['board-row-poster'])}
|
||||
title={board.catalogs[index - boardCatalogsOffset].title}
|
||||
deepLinks={board.catalogs[index - boardCatalogsOffset].deepLinks}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</MainNavBars>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue