LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix sticky not reliably opening when navigated into page

Browse source 
## Issue
Stickly loads fine when Category Page is opened directly (F5, open), but doesn't load if F5 was at Homepage and then navigated into Category Page.

## Root
There is a bug where AdsSticky cannot be loaded on a page where AdsBanner exists. As long as AdsSticky is loaded in a page without AdsBanner, they both can still be visible together later, says from navigating around.

## Temp fix
Adding inAllowedPath to the logic is a band-aid that relies on AdsBanner only being used in Homepage for now, which we currently happen to not place AdsSticky.
This commit is contained in:
infinite-persistence 2022-06-01 12:26:12 +08:00
parent 487d5c4a86
commit d5910c8172
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
web/component/adsSticky/view.jsx
View file

@ -34,34 +34,46 @@ export default function AdsSticky(props: Props) {
const {
location: { pathname },
} = useHistory();
const inAllowedPath = isPathAllowed(pathname);
const [refresh, setRefresh] = React.useState(0);
function isPathAllowed(pathname) {
for (const x of PATH_BLACKLIST) {
if ((x.exact && pathname === x.path) || (!x.exact && pathname.startsWith(x.path))) {
return false;
}
}
return true;
}
// -- Mount script; 1 per session.
React.useEffect(() => {
if (shouldShowAds && !gScript && !inIFrame()) {
// NOTE: there is a bug where AdsSticky cannot be loaded on a page where
// AdsBanner exists. As long as AdsSticky is loaded in a page without
// AdsBanner, they both can still be visible together later, says from
// navigating around.
//
// Adding inAllowedPath to the logic is a band-aid that relies on AdsBanner
// only being used in Homepage for now, which we currently happen to not
// place AdsSticky.
if (shouldShowAds && inAllowedPath && !gScript && !inIFrame()) {
gScript = document.createElement('script');
gScript.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js';
gScript.async = true;
gScript.addEventListener('load', () => setRefresh(Date.now()));
// $FlowFixMe
document.body.appendChild(gScript);
}
}, [shouldShowAds]);
}, [shouldShowAds, inAllowedPath]);
// -- Update visibility per pathname
React.useEffect(() => {
const container = window[OUTBRAIN_CONTAINER_KEY];
if (container) {
for (const x of PATH_BLACKLIST) {
const found = (x.exact && pathname === x.path) || (!x.exact && pathname.startsWith(x.path));
if (found) {
container.style.display = 'none';
return;
}
}
container.style.display = '';
container.style.display = inAllowedPath ? '' : 'none';
}
}, [pathname]);
}, [inAllowedPath, refresh]);
// Nothing for us to mount; the ad script will handle everything.
return null;