Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #417 from Stremio/scroll-up-on-options-change

Browse source 
Discover: Scroll Up on Options Change
This commit is contained in:
Alexandru Branza 2023-07-11 12:01:35 +02:00 committed by GitHub
commit 41755d0cc6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/routes/Discover/Discover.js
View file

@ -19,6 +19,12 @@ const Discover = ({ urlParams, queryParams }) => {
const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false); const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false); const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0); const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0);
const metasContainerRef = React.useRef();
React.useEffect(() => {
if (discover.catalog?.content.type === 'Loading') {
metasContainerRef.current.scrollTop = 0;
}
}, [discover.catalog]);
const selectedMetaItem = React.useMemo(() => { const selectedMetaItem = React.useMemo(() => {
return discover.catalog !== null && return discover.catalog !== null &&
discover.catalog.content.type === 'Ready' && discover.catalog.content.type === 'Ready' &&
@ -122,7 +128,7 @@ const Discover = ({ urlParams, queryParams }) => {
</div> </div>
: :
discover.catalog.content.type === 'Loading' ? discover.catalog.content.type === 'Loading' ?
<div className={classnames(styles['meta-items-container'], 'animation-fade-in')}> <div ref={metasContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')}>
{Array(CONSTANTS.CATALOG_PAGE_SIZE).fill(null).map((_, index) => ( {Array(CONSTANTS.CATALOG_PAGE_SIZE).fill(null).map((_, index) => (
<div key={index} className={styles['meta-item-placeholder']}> <div key={index} className={styles['meta-item-placeholder']}>
<div className={styles['poster-container']} /> <div className={styles['poster-container']} />
@ -133,7 +139,7 @@ const Discover = ({ urlParams, queryParams }) => {
))} ))}
</div> </div>
: :
<div className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}> <div ref={metasContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
{discover.catalog.content.content.map((metaItem, index) => ( {discover.catalog.content.content.map((metaItem, index) => (
<MetaItem <MetaItem
key={index} key={index}