No sticky in mobile, and only show in Category.

## Code changes
- Switch from blacklist to whitelist.
This commit is contained in:
infinite-persistence 2022-06-01 21:47:14 +08:00
parent 5fe5f7599f
commit 331ae641d0
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 16 additions and 37 deletions

View file

@ -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 = {

View file

@ -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(() => {