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

Bottom-Ad: change to only hide for Premium+

Browse source 
Previously, we hide when authenticated.

We still need the `isAuthenticated` flag, because `hasPremiumPlus` stays at the unfetched (`undefined`) state for Incognito.
This commit is contained in:
infinite-persistence 2022-05-04 10:23:10 +08:00
parent 4ae3fe7ea0
commit bf7dcbe344
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 14 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/app/view.jsx
View file

@ -509,7 +509,7 @@ function App(props: Props) {
useDegradedPerformance(setLbryTvApiStatus, user); useDegradedPerformance(setLbryTvApiStatus, user);
useAdOutbrain(Boolean(hasPremiumPlus), isAuthenticated, history?.location?.pathname); useAdOutbrain(hasPremiumPlus, isAuthenticated, history?.location?.pathname);
useEffect(() => { useEffect(() => {
// When language is changed or translations are fetched, we render. // When language is changed or translations are fetched, we render.

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

@ -17,25 +17,25 @@ const OUTBRAIN_CONTAINER_KEY = 'outbrainSizeDiv';
let script; let script;
/** /**
* @param hasPremiumPlus * @param hasPremiumPlus `undefined` if not yet fetched, boolean otherwise.
* @param isAuthenticated * @param isAuthenticated `undefined` if email is not fetched, boolean
* otherwise.
* @param pathname Reminder: the component using this effect must be listening * @param pathname Reminder: the component using this effect must be listening
* to path changes (e.g. useHistory, etc.). This value must not * to path changes (e.g. useHistory, etc.). This value must not
* come from window.location.pathname, which doesn't spark an * come from window.location.pathname, which doesn't spark an
* update. * update.
*/ */
export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated: boolean, pathname: string) { export default function useAdOutbrain(hasPremiumPlus: ?boolean, isAuthenticated: ?boolean, pathname: string) {
// Only look at authentication for now. Eventually, we'll only use 'hasPremiumPlus'. // Still need to look at `isAuthenticated` because `hasPremiumPlus` remains
// Authenticated will return undefined if not yet populated, so wait and only show // in unfetched (`undefined) state in Incognito.
// when returned as false const loadScript = isAuthenticated === false || hasPremiumPlus === false;
const isNotAuthenticated = isAuthenticated === false;
const propRef = React.useRef({ isAuthenticated, pathname }); const propRef = React.useRef({ hasPremiumPlus, pathname });
propRef.current = { isAuthenticated, pathname }; propRef.current = { hasPremiumPlus, pathname };
function resolveVisibility() { function resolveVisibility() {
if (window[OUTBRAIN_CONTAINER_KEY]) { if (window[OUTBRAIN_CONTAINER_KEY]) {
if (propRef.current.isAuthenticated) { if (propRef.current.hasPremiumPlus) {
window[OUTBRAIN_CONTAINER_KEY].style.display = 'none'; window[OUTBRAIN_CONTAINER_KEY].style.display = 'none';
} else { } else {
window[OUTBRAIN_CONTAINER_KEY].style.display = EXCLUDED_PATHS.includes(propRef.current.pathname) ? 'none' : ''; window[OUTBRAIN_CONTAINER_KEY].style.display = EXCLUDED_PATHS.includes(propRef.current.pathname) ? 'none' : '';
@ -44,7 +44,7 @@ export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated:
} }
React.useEffect(() => { React.useEffect(() => {
if (!inIFrame() && isNotAuthenticated && !script) { if (!inIFrame() && loadScript && !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';
@ -57,10 +57,9 @@ export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated:
return () => clearTimeout(loadTimer); return () => clearTimeout(loadTimer);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps }, [loadScript]);
}, [isNotAuthenticated]);
React.useEffect(() => { React.useEffect(() => {
resolveVisibility(); resolveVisibility();
}, [isAuthenticated, pathname]); }, [hasPremiumPlus, pathname]);
} }