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

Patch for outbrain visibility (e68bba1d)

Browse source 
## Issue
- Due to the timer used, the script could be loaded after the path-checking useEffect ran.
- Stale closure is also an issue.

## Approach
Create refs for the props, and listen to `onload` as well to resolve the visibility state.
This commit is contained in:
infinite-persistence 2022-04-06 11:26:42 +08:00
parent 59a0b9d490
commit ee03749574
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ui/effects/use-ad-outbrain.js
View file

@ -30,12 +30,26 @@ export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated:
// when returned as false // when returned as false
const isNotAuthenticated = isAuthenticated === false; const isNotAuthenticated = isAuthenticated === false;
const propRef = React.useRef({ isAuthenticated, pathname });
propRef.current = { isAuthenticated, pathname };
function resolveVisibility() {
if (window[OUTBRAIN_CONTAINER_KEY]) {
if (propRef.current.isAuthenticated) {
window[OUTBRAIN_CONTAINER_KEY].style.display = 'none';
} else {
window[OUTBRAIN_CONTAINER_KEY].style.display = EXCLUDED_PATHS.includes(propRef.current.pathname) ? 'none' : '';
}
}
}
React.useEffect(() => { React.useEffect(() => {
if (!inIFrame() && isNotAuthenticated && !script) { if (!inIFrame() && isNotAuthenticated && !script) {
const loadTimer = setTimeout(() => { const loadTimer = setTimeout(() => {
script = document.createElement('script'); script = document.createElement('script');
script.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js'; script.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js';
script.async = true; script.async = true;
script.addEventListener('load', resolveVisibility);
// $FlowFixMe // $FlowFixMe
document.body.appendChild(script); document.body.appendChild(script);
@ -43,16 +57,10 @@ export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated:
return () => clearTimeout(loadTimer); return () => clearTimeout(loadTimer);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps, (on mount only) // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isNotAuthenticated]); }, [isNotAuthenticated]);
React.useEffect(() => { React.useEffect(() => {
if (window[OUTBRAIN_CONTAINER_KEY]) { resolveVisibility();
if (isAuthenticated) {
window[OUTBRAIN_CONTAINER_KEY].style.display = 'none';
} else {
window[OUTBRAIN_CONTAINER_KEY].style.display = EXCLUDED_PATHS.includes(pathname) ? 'none' : '';
}
}
}, [isAuthenticated, pathname]); }, [isAuthenticated, pathname]);
} }