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

selected meta item in discover implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-23 17:20:58 +03:00
parent 517d8820e3
commit 5d46a6276a
1 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,10 +7,20 @@ const styles = require('./styles');
const Discover = ({ urlParams, queryParams }) => {
const [pickers, metaItems] = useCatalog(urlParams, queryParams);
const [selectedItem, setSelectedItem] = React.useState(metaItems[0]);
const changeMetaItem = React.useCallback((event) => {
const { id: metaItemId } = event.currentTarget.dataset;
const metaItem = metaItems.find(({ id }) => id === metaItemId);
const [selectedItem, setSelectedItem] = React.useState(null);
const metaItemsOnMouseDown = React.useCallback((event) => {
event.nativeEvent.blurPrevented = true;
}, []);
const metaItemsOnFocus = React.useCallback((event) => {
const metaItem = metaItems.find(({ id }) => {
return id === event.target.dataset.id;
});
if (metaItem) {
setSelectedItem(metaItem);
}
}, []);
React.useEffect(() => {
const metaItem = metaItems.length > 0 ? metaItems[0] : null;
setSelectedItem(metaItem);
}, [metaItems]);
return (
@ -22,18 +32,17 @@ const Discover = ({ urlParams, queryParams }) => {
<PickerMenu {...picker} key={picker.name} className={'picker'} />
))}
</div>
<div className={styles['meta-items-container']} tabIndex={-1}>
<div className={styles['meta-items-container']} tabIndex={-1} onFocusCapture={metaItemsOnFocus} onMouseDownCapture={metaItemsOnMouseDown}>
{metaItems.map((metaItem) => (
<MetaItem
{...metaItem}
key={metaItem.id}
className={classnames('meta-item', { 'active': metaItem.id === selectedItem.id })}
onClick={changeMetaItem}
className={classnames('meta-item', { 'active': selectedItem !== null && metaItem.id === selectedItem.id })}
/>
))}
</div>
{
selectedItem ?
selectedItem !== null ?
<MetaPreview
{...selectedItem}
className={styles['meta-preview-container']}