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 { connect } from 'react-redux';
import * as SETTINGS from 'constants/settings';
import { doSetAdBlockerFound } from 'redux/actions/app'; import { doSetAdBlockerFound } from 'redux/actions/app';
import { selectAdBlockerFound } from 'redux/selectors/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 { selectOdyseeMembershipIsPremiumPlus, selectUserCountry } from 'redux/selectors/user';
import AdsSticky from './view'; import AdsSticky from './view';
@ -10,7 +9,7 @@ const select = (state, props) => ({
isAdBlockerFound: selectAdBlockerFound(state), isAdBlockerFound: selectAdBlockerFound(state),
userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state), userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
userCountry: selectUserCountry(state), userCountry: selectUserCountry(state),
currentTheme: selectClientSetting(state, SETTINGS.THEME), homepageData: selectHomepageData(state),
}); });
const perform = { const perform = {

View file

@ -1,22 +1,13 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import * as PAGES from 'constants/pages';
import useShouldShowAds from 'effects/use-should-show-ads'; import useShouldShowAds from 'effects/use-should-show-ads';
import { platform } from 'util/platform';
// **************************************************************************** // ****************************************************************************
// AdsSticky // 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'; const OUTBRAIN_CONTAINER_KEY = 'outbrainSizeDiv';
let gScript; let gScript;
@ -24,40 +15,29 @@ type Props = {
isAdBlockerFound: ?boolean, isAdBlockerFound: ?boolean,
userHasPremiumPlus: boolean, userHasPremiumPlus: boolean,
userCountry: string, userCountry: string,
currentTheme: string, homepageData: any,
doSetAdBlockerFound: (boolean) => void, doSetAdBlockerFound: (boolean) => void,
}; };
export default function AdsSticky(props: Props) { export default function AdsSticky(props: Props) {
const { isAdBlockerFound, userHasPremiumPlus, userCountry, doSetAdBlockerFound } = props; const { isAdBlockerFound, userHasPremiumPlus, userCountry, homepageData, doSetAdBlockerFound } = props;
const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound); const { location } = useHistory();
const {
location: { pathname },
} = useHistory();
const inAllowedPath = isPathAllowed(pathname);
const [refresh, setRefresh] = React.useState(0); 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) { function isPathAllowed(pathname) {
for (const x of PATH_BLACKLIST) { const categoryValues = Object.values(homepageData);
if ((x.exact && pathname === x.path) || (!x.exact && pathname.startsWith(x.path))) { // $FlowIssue: mixed type
return false; const pathIsCategory = categoryValues.some((x) => pathname.startsWith(`/$/${x?.name}`));
} return pathIsCategory;
}
return true;
} }
// -- Mount script; 1 per session. // -- Mount script; 1 per session.
React.useEffect(() => { React.useEffect(() => {
// NOTE: there is a bug where AdsSticky cannot be loaded on a page where if (shouldShowAds && shouldLoadSticky) {
// 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 = document.createElement('script');
gScript.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js'; gScript.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js';
gScript.async = true; gScript.async = true;
@ -65,7 +45,7 @@ export default function AdsSticky(props: Props) {
// $FlowFixMe // $FlowFixMe
document.body.appendChild(gScript); document.body.appendChild(gScript);
} }
}, [shouldShowAds, inAllowedPath]); }, [shouldShowAds, shouldLoadSticky]);
// -- Update visibility per pathname // -- Update visibility per pathname
React.useEffect(() => { React.useEffect(() => {