d5910c8172
## 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.
92 lines
3 KiB
JavaScript
92 lines
3 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { useHistory } from 'react-router-dom';
|
|
import * as PAGES from 'constants/pages';
|
|
import useShouldShowAds from 'effects/use-should-show-ads';
|
|
|
|
// ****************************************************************************
|
|
// AdsSticky
|
|
// ****************************************************************************
|
|
|
|
const PATH_BLACKLIST = [
|
|
// Don't show sticky in these paths:
|
|
{ path: `/`, exact: true },
|
|
{ path: `/$/${PAGES.AUTH}`, exact: false },
|
|
{ path: `/$/${PAGES.AUTH_SIGNIN}`, exact: false },
|
|
{ path: `/$/${PAGES.AUTH_VERIFY}`, exact: false },
|
|
{ path: `/$/${PAGES.SETTINGS}`, exact: false },
|
|
];
|
|
|
|
const OUTBRAIN_CONTAINER_KEY = 'outbrainSizeDiv';
|
|
let gScript;
|
|
|
|
type Props = {
|
|
isAdBlockerFound: ?boolean,
|
|
userHasPremiumPlus: boolean,
|
|
userCountry: string,
|
|
currentTheme: string,
|
|
doSetAdBlockerFound: (boolean) => void,
|
|
};
|
|
|
|
export default function AdsSticky(props: Props) {
|
|
const { isAdBlockerFound, userHasPremiumPlus, userCountry, doSetAdBlockerFound } = props;
|
|
const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound);
|
|
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(() => {
|
|
// 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, inAllowedPath]);
|
|
|
|
// -- Update visibility per pathname
|
|
React.useEffect(() => {
|
|
const container = window[OUTBRAIN_CONTAINER_KEY];
|
|
if (container) {
|
|
container.style.display = inAllowedPath ? '' : 'none';
|
|
}
|
|
}, [inAllowedPath, refresh]);
|
|
|
|
// Nothing for us to mount; the ad script will handle everything.
|
|
return null;
|
|
}
|
|
|
|
// ****************************************************************************
|
|
// Helpers
|
|
// ****************************************************************************
|
|
|
|
function inIFrame() {
|
|
try {
|
|
return window.self !== window.top;
|
|
} catch (e) {
|
|
return true;
|
|
}
|
|
}
|