diff --git a/web/component/adsSticky/index.js b/web/component/adsSticky/index.js index fef07fec1..e5afb4835 100644 --- a/web/component/adsSticky/index.js +++ b/web/component/adsSticky/index.js @@ -1,8 +1,7 @@ import { connect } from 'react-redux'; -import * as SETTINGS from 'constants/settings'; import { doSetAdBlockerFound } from 'redux/actions/app'; import { selectAdBlockerFound } from 'redux/selectors/app'; -import { selectClientSetting } from 'redux/selectors/settings'; +import { selectHomepageData } from 'redux/selectors/settings'; import { selectOdyseeMembershipIsPremiumPlus, selectUserCountry } from 'redux/selectors/user'; import AdsSticky from './view'; @@ -10,7 +9,7 @@ const select = (state, props) => ({ isAdBlockerFound: selectAdBlockerFound(state), userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state), userCountry: selectUserCountry(state), - currentTheme: selectClientSetting(state, SETTINGS.THEME), + homepageData: selectHomepageData(state), }); const perform = { diff --git a/web/component/adsSticky/view.jsx b/web/component/adsSticky/view.jsx index 3e4478317..b86be993f 100644 --- a/web/component/adsSticky/view.jsx +++ b/web/component/adsSticky/view.jsx @@ -1,22 +1,13 @@ // @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'; +import { platform } from 'util/platform'; // **************************************************************************** // 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; @@ -24,40 +15,29 @@ type Props = { isAdBlockerFound: ?boolean, userHasPremiumPlus: boolean, userCountry: string, - currentTheme: string, + homepageData: any, 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 { isAdBlockerFound, userHasPremiumPlus, userCountry, homepageData, doSetAdBlockerFound } = props; + const { location } = useHistory(); const [refresh, setRefresh] = React.useState(0); + const inAllowedPath = isPathAllowed(location.pathname); + const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound); + const shouldLoadSticky = inAllowedPath && !gScript && !inIFrame() && !platform.isMobile(); + 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; + const categoryValues = Object.values(homepageData); + // $FlowIssue: mixed type + const pathIsCategory = categoryValues.some((x) => pathname.startsWith(`/$/${x?.name}`)); + return pathIsCategory; } // -- 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()) { + if (shouldShowAds && shouldLoadSticky) { gScript = document.createElement('script'); gScript.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js'; gScript.async = true; @@ -65,7 +45,7 @@ export default function AdsSticky(props: Props) { // $FlowFixMe document.body.appendChild(gScript); } - }, [shouldShowAds, inAllowedPath]); + }, [shouldShowAds, shouldLoadSticky]); // -- Update visibility per pathname React.useEffect(() => {