No sticky in mobile, and only show in Category.
## Code changes - Switch from blacklist to whitelist.
This commit is contained in:
parent
5fe5f7599f
commit
331ae641d0
2 changed files with 16 additions and 37 deletions
|
@ -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 = {
|
||||||
|
|
|
@ -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(() => {
|
||||||
|
|
Loading…
Reference in a new issue