Fix tile misaligned due to ad-blockers.

This commit is contained in:
infinite-persistence 2022-03-10 21:38:19 +08:00
parent ea8af5aa89
commit ea7a6cb04f
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0

View file

@ -53,13 +53,44 @@ function removeIfExists(querySelector) {
function Ads(props: Props) {
const { type = 'video', tileLayout, small, userHasPremiumPlus, className } = props;
const shouldShowAds = SHOW_ADS && !userHasPremiumPlus;
const [shouldShowAds, setShouldShowAds] = React.useState(resolveAdVisibility());
const mobileAds = IS_ANDROID || IS_IOS;
// this is populated from app based on location
const isInEu = localStorage.getItem('gdprRequired') === 'true';
const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT;
function resolveAdVisibility() {
// 'window.odysee_ad_blocker_detected' will be undefined at startup.
// We'll wait until we are sure it is not blocked (i.e. === false) before
// showing the component.
return window.odysee_ad_blocker_detected === false && SHOW_ADS && !userHasPremiumPlus;
}
useEffect(() => {
if (window.odysee_ad_blocker_detected === undefined) {
let mounted = true;
const GOOGLE_AD_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
fetch(GOOGLE_AD_URL)
.then(() => {
window.odysee_ad_blocker_detected = false;
})
.catch(() => {
window.odysee_ad_blocker_detected = true;
})
.finally(() => {
if (mounted) {
setShouldShowAds(resolveAdVisibility());
}
});
return () => {
mounted = false;
};
}
}, []);
// add script to DOM
useEffect(() => {
if (shouldShowAds) {
@ -88,7 +119,7 @@ function Ads(props: Props) {
};
} catch (e) {}
}
}, []);
}, [shouldShowAds]);
const adsSignInDriver = (
<I18nMessage