Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

dicover adapted to changes in core

Browse source
This commit is contained in:
nklhrstv 2022-06-27 16:22:55 +03:00
parent b4a72b96a0
commit 874abf6ffa
3 changed files with 29 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 [selectInputs, paginationInput] = useSelectableInputs(discover);
const [discover, loadNextPage] = useDiscover(urlParams, queryParams);
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}

57
src/routes/Discover/styles.less
View file

@ -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 {
display: flex;
}
.spacing {
display: none;
}
.pagination-input {
margin-left: 0;
&~.filter-container {
display: flex;
}
}
}
}

15
src/routes/Discover/useDiscover.js
View file

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