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

refactor(Discover): use a reference instead

Browse source
This commit is contained in:
Timothy Z. 2025-05-22 14:59:31 +03:00
parent 2e72f5af9d
commit fa07709d31
3 changed files with 31 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/MetaPreview/MetaPreview.js
View file

@ -24,7 +24,7 @@ const ALLOWED_LINK_REDIRECTS = [
routesRegexp.metadetails.regexp
];
const MetaPreview = ({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary }) => {
const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary }, ref) => {
const { t } = useTranslation();
const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
const linksGroups = React.useMemo(() => {
@ -98,7 +98,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
<div className={styles['logo-placeholder']}>{name}</div>
), [name]);
return (
<div className={classnames(className, styles['meta-preview-container'], { [styles['compact']]: compact })}>
<div className={classnames(className, styles['meta-preview-container'], { [styles['compact']]: compact })} ref={ref}>
{
typeof background === 'string' && background.length > 0 ?
<div className={styles['background-image-layer']}>
@ -261,7 +261,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
</div>
</div>
);
};
});
MetaPreview.Placeholder = MetaPreviewPlaceholder;

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

@ -20,18 +20,9 @@ const Discover = ({ urlParams, queryParams }) => {
const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false);
const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0);
const [showMetaPreview, setShowMetaPreview] = React.useState(window.innerWidth > 1000);
const metasContainerRef = React.useRef();
React.useEffect(() => {
const handleResize = () => {
setShowMetaPreview(window.innerWidth > 1000);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
const metaPreviewRef = React.useRef();
React.useEffect(() => {
if (discover.catalog?.content.type === 'Loading') {
@ -87,7 +78,8 @@ const Discover = ({ urlParams, queryParams }) => {
}
}, []);
const metaItemOnClick = React.useCallback((event) => {
if (event.currentTarget.dataset.index !== selectedMetaItemIndex.toString() && showMetaPreview) {
const visible = window.getComputedStyle(metaPreviewRef.current).display !== 'none';
if (event.currentTarget.dataset.index !== selectedMetaItemIndex.toString() && visible) {
event.preventDefault();
event.currentTarget.focus();
}
@ -184,24 +176,23 @@ const Discover = ({ urlParams, queryParams }) => {
</div>
{
selectedMetaItem !== null ?
showMetaPreview ?
<MetaPreview
className={styles['meta-preview-container']}
compact={true}
name={selectedMetaItem.name}
logo={selectedMetaItem.logo}
background={selectedMetaItem.poster}
runtime={selectedMetaItem.runtime}
releaseInfo={selectedMetaItem.releaseInfo}
released={selectedMetaItem.released}
description={selectedMetaItem.description}
links={selectedMetaItem.links}
deepLinks={selectedMetaItem.deepLinks}
trailerStreams={selectedMetaItem.trailerStreams}
inLibrary={selectedMetaItem.inLibrary}
toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary}
/>
: null
<MetaPreview
className={styles['meta-preview-container']}
compact={true}
ref={metaPreviewRef}
name={selectedMetaItem.name}
logo={selectedMetaItem.logo}
background={selectedMetaItem.poster}
runtime={selectedMetaItem.runtime}
releaseInfo={selectedMetaItem.releaseInfo}
released={selectedMetaItem.released}
description={selectedMetaItem.description}
links={selectedMetaItem.links}
deepLinks={selectedMetaItem.deepLinks}
trailerStreams={selectedMetaItem.trailerStreams}
inLibrary={selectedMetaItem.inLibrary}
toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary}
/>
:
discover.catalog !== null && discover.catalog.content.type === 'Loading' ?
<div className={styles['meta-preview-container']} />

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

@ -341,6 +341,10 @@
}
}
}
.meta-preview-container {
display: none;
}
}
}
@ -354,6 +358,10 @@
}
}
}
.meta-preview-container {
display: none;
}
}
}