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

Factor out ad-blocker detection into useShouldShowAds

Browse source 
... for it to be re-used on other ad components.
This commit is contained in:
infinite-persistence 2022-04-14 21:21:37 +08:00
parent 6576e8317e
commit b1dbac8f9b
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 46 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
ui/effects/use-should-show-ads.js Normal file
View file

@ -0,0 +1,44 @@
// @flow
import React from 'react';
import { SHOW_ADS } from 'config';
const GOOGLE_AD_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
let ad_blocker_detected;
export default function useShouldShowAds(hasPremiumPlus: boolean, userCountry: string, doSetAdBlockerFound: (boolean) => void) {
const [shouldShowAds, setShouldShowAds] = React.useState(resolveAdVisibility());
function resolveAdVisibility() {
// 'ad_blocker_detected' will be undefined at startup. Wait until we are
// sure it is not blocked (i.e. === false) before showing the component.
return ad_blocker_detected === false && SHOW_ADS && !hasPremiumPlus && userCountry === 'US';
}
React.useEffect(() => {
if (ad_blocker_detected === undefined) {
let mounted = true;
fetch(GOOGLE_AD_URL)
.then((response) => {
const detected = response.redirected === true;
ad_blocker_detected = detected;
doSetAdBlockerFound(detected); // Also stash in redux for components to listen to.
})
.catch(() => {
ad_blocker_detected = true;
doSetAdBlockerFound(true);
})
.finally(() => {
if (mounted) {
setShouldShowAds(resolveAdVisibility());
}
});
return () => {
mounted = false;
};
}
}, []);
return shouldShowAds;
}

42
web/component/ads/view.jsx
View file

@ -1,11 +1,11 @@
// @flow
import { SHOW_ADS } from 'config';
import * as PAGES from 'constants/pages';
import React, { useEffect } from 'react';
import I18nMessage from 'component/i18nMessage';
import Button from 'component/button';
import PremiumPlusTile from 'component/premiumPlusTile';
import classnames from 'classnames';
import useShouldShowAds from 'effects/use-should-show-ads';
import { platform } from 'util/platform';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
@ -52,8 +52,6 @@ function resolveVidcrunchConfig() {
// Ads
// ****************************************************************************
let ad_blocker_detected;
type Props = {
type: string,
tileLayout?: boolean,
@ -61,8 +59,6 @@ type Props = {
className?: string,
noFallback?: boolean,
// --- redux ---
claim: Claim,
isMature: boolean,
userHasPremiumPlus: boolean,
userCountry: string,
doSetAdBlockerFound: (boolean) => void,
@ -80,43 +76,9 @@ function Ads(props: Props) {
doSetAdBlockerFound,
} = props;
const [shouldShowAds, setShouldShowAds] = React.useState(resolveAdVisibility());
const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, doSetAdBlockerFound);
const adConfig = USE_ADNIMATION ? AD_CONFIGS.ADNIMATION : resolveVidcrunchConfig();
function resolveAdVisibility() {
// 'ad_blocker_detected' will be undefined at startup. Wait until we are
// sure it is not blocked (i.e. === false) before showing the component.
return ad_blocker_detected === false && SHOW_ADS && !userHasPremiumPlus && userCountry === 'US';
}
useEffect(() => {
if (ad_blocker_detected === undefined) {
let mounted = true;
const GOOGLE_AD_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
fetch(GOOGLE_AD_URL)
.then((response) => {
const detected = response.redirected === true;
window.odysee_ad_blocker_detected = detected;
ad_blocker_detected = detected;
doSetAdBlockerFound(detected);
})
.catch(() => {
ad_blocker_detected = true;
doSetAdBlockerFound(true);
})
.finally(() => {
if (mounted) {
setShouldShowAds(resolveAdVisibility());
}
});
return () => {
mounted = false;
};
}
}, []);
// add script to DOM
useEffect(() => {
if (shouldShowAds) {