diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index a67a6f02c..8ae3919bb 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -560,7 +560,7 @@ function App(props: Props) { {getStatusNag()} - + )} diff --git a/web/component/adsSticky/index.js b/web/component/adsSticky/index.js index e5afb4835..bd1a7d399 100644 --- a/web/component/adsSticky/index.js +++ b/web/component/adsSticky/index.js @@ -1,16 +1,25 @@ import { connect } from 'react-redux'; +import AdsSticky from './view'; import { doSetAdBlockerFound } from 'redux/actions/app'; +import { selectClaimForUri } from 'redux/selectors/claims'; import { selectAdBlockerFound } from 'redux/selectors/app'; import { selectHomepageData } from 'redux/selectors/settings'; -import { selectOdyseeMembershipIsPremiumPlus, selectUserCountry } from 'redux/selectors/user'; -import AdsSticky from './view'; +import { selectOdyseeMembershipIsPremiumPlus, selectUserCountry, selectUserVerifiedEmail } from 'redux/selectors/user'; +import { isChannelClaim, isStreamPlaceholderClaim } from 'util/claim'; -const select = (state, props) => ({ - isAdBlockerFound: selectAdBlockerFound(state), - userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state), - userCountry: selectUserCountry(state), - homepageData: selectHomepageData(state), -}); +const select = (state, props) => { + const claim = selectClaimForUri(state, props.uri); + + return { + isContentClaim: isStreamPlaceholderClaim(claim) || Boolean(claim?.value?.source?.media_type), + isChannelClaim: isChannelClaim(claim), + authenticated: selectUserVerifiedEmail(state), + isAdBlockerFound: selectAdBlockerFound(state), + userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state), + userCountry: selectUserCountry(state), + homepageData: selectHomepageData(state), + }; +}; const perform = { doSetAdBlockerFound, diff --git a/web/component/adsSticky/view.jsx b/web/component/adsSticky/view.jsx index b86be993f..7a9a5050a 100644 --- a/web/component/adsSticky/view.jsx +++ b/web/component/adsSticky/view.jsx @@ -12,6 +12,11 @@ const OUTBRAIN_CONTAINER_KEY = 'outbrainSizeDiv'; let gScript; type Props = { + uri: ?string, + // --- redux --- + isContentClaim: boolean, + isChannelClaim: boolean, + authenticated: ?boolean, isAdBlockerFound: ?boolean, userHasPremiumPlus: boolean, userCountry: string, @@ -20,24 +25,35 @@ type Props = { }; export default function AdsSticky(props: Props) { - const { isAdBlockerFound, userHasPremiumPlus, userCountry, homepageData, doSetAdBlockerFound } = props; + const { + isContentClaim, + isChannelClaim, + authenticated, + isAdBlockerFound, + userHasPremiumPlus, + userCountry, + homepageData, + doSetAdBlockerFound, + } = props; + const { location } = useHistory(); const [refresh, setRefresh] = React.useState(0); - const inAllowedPath = isPathAllowed(location.pathname); + // Global condition on whether ads should be activated: const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound); - const shouldLoadSticky = inAllowedPath && !gScript && !inIFrame() && !platform.isMobile(); + // Global conditions aside, should the Sticky be shown for this path: + const inAllowedPath = shouldShowAdsForPath(location.pathname, isContentClaim, isChannelClaim, authenticated); + // Final answer: + const shouldLoadSticky = shouldShowAds && inAllowedPath && !gScript && !inIFrame() && !platform.isMobile(); - function isPathAllowed(pathname) { - const categoryValues = Object.values(homepageData); + function shouldShowAdsForPath(pathname, isContentClaim, isChannelClaim, authenticated) { // $FlowIssue: mixed type - const pathIsCategory = categoryValues.some((x) => pathname.startsWith(`/$/${x?.name}`)); - return pathIsCategory; + const pathIsCategory = Object.values(homepageData).some((x) => pathname.startsWith(`/$/${x?.name}`)); + return pathIsCategory || isChannelClaim || (isContentClaim && !authenticated); } - // -- Mount script; 1 per session. React.useEffect(() => { - if (shouldShowAds && shouldLoadSticky) { + if (shouldLoadSticky) { gScript = document.createElement('script'); gScript.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js'; gScript.async = true; @@ -45,9 +61,8 @@ export default function AdsSticky(props: Props) { // $FlowFixMe document.body.appendChild(gScript); } - }, [shouldShowAds, shouldLoadSticky]); + }, [shouldLoadSticky]); - // -- Update visibility per pathname React.useEffect(() => { const container = window[OUTBRAIN_CONTAINER_KEY]; if (container) { @@ -55,8 +70,7 @@ export default function AdsSticky(props: Props) { } }, [inAllowedPath, refresh]); - // Nothing for us to mount; the ad script will handle everything. - return null; + return null; // Nothing for us to mount; the ad script will handle everything. } // ****************************************************************************