Ad: missing in incognito (1592)

ui/effects/use-should-show-ads.js

@@ -3,13 +3,12 @@ import React from 'react';
 import { SHOW_ADS } from 'config';
 
 const NO_COUNTRY_CHECK = true;
-
 const GOOGLE_AD_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
-let ad_blocker_detected;
 
 export default function useShouldShowAds(
   hasPremiumPlus: boolean,
   userCountry: string,
+  isAdBlockerFound: ?boolean,
   doSetAdBlockerFound: (boolean) => void
 ) {
   const [shouldShowAds, setShouldShowAds] = React.useState(resolveAdVisibility());
@@ -18,44 +17,26 @@ export default function useShouldShowAds(
     // 'ad_blocker_detected' and 'hasPremiumPlus' will be undefined until
     // fetched. Only show when it is exactly 'false'.
     return (
-      SHOW_ADS &&
-      (NO_COUNTRY_CHECK || userCountry === 'US') &&
-      ad_blocker_detected === false &&
-      hasPremiumPlus === false
+      SHOW_ADS && (NO_COUNTRY_CHECK || userCountry === 'US') && isAdBlockerFound === false && hasPremiumPlus === false
     );
   }
 
-  // -- Check for ad-blockers
   React.useEffect(() => {
-    if (ad_blocker_detected === undefined) {
-      let mounted = true;
-
+    if (isAdBlockerFound === undefined) {
       fetch(GOOGLE_AD_URL)
         .then((response) => {
           const detected = response.redirected === true;
-          ad_blocker_detected = detected;
-          doSetAdBlockerFound(detected); // Also stash in redux for components to listen to.
+          doSetAdBlockerFound(detected);
         })
         .catch(() => {
-          ad_blocker_detected = true;
           doSetAdBlockerFound(true);
-        })
-        .finally(() => {
-          if (mounted) {
-            setShouldShowAds(resolveAdVisibility());
-          }
         });
-
-      return () => {
-        mounted = false;
-      };
     }
   }, []);
 
-  // --- Check for Premium+
   React.useEffect(() => {
     setShouldShowAds(resolveAdVisibility());
-  }, [hasPremiumPlus]);
+  }, [hasPremiumPlus, isAdBlockerFound]);
 
   return shouldShowAds;
 }

ui/redux/actions/user.js

@@ -114,6 +114,9 @@ function checkAuthBusy() {
  */
 export function doCheckUserOdyseeMemberships(user) {
   return async (dispatch) => {
+    let highestMembershipRanking;
+
+    if (user.odysee_member) {
       // get memberships for a given user
       // TODO: in the future, can we specify this just to @odysee?
 
@@ -127,7 +130,6 @@ export function doCheckUserOdyseeMemberships(user) {
       );
 
       let savedMemberships = [];
-    let highestMembershipRanking;
 
       // TODO: this will work for now, but it should be adjusted
       // TODO: to check if it's active, or if it's cancelled if it's still valid past current date
@@ -151,6 +153,7 @@ export function doCheckUserOdyseeMemberships(user) {
           highestMembershipRanking = 'Premium';
         }
       }
+    }
 
     dispatch({
       type: ACTIONS.ADD_ODYSEE_MEMBERSHIP_DATA,
@@ -182,10 +185,7 @@ export function doAuthenticate(
             data: { user, accessToken: token },
           });
 
-          // if user is an Odysee member, get the membership details
-          if (user.odysee_member) {
           dispatch(doCheckUserOdyseeMemberships(user));
-          }
 
           if (shareUsageData) {
             dispatch(doRewardList());
@@ -218,11 +218,7 @@ export function doUserFetch() {
 
       Lbryio.getCurrentUser()
         .then((user) => {
-          // get user membership status
-          if (user.odysee_member) {
           dispatch(doCheckUserOdyseeMemberships(user));
-          }
-
           dispatch({
             type: ACTIONS.USER_FETCH_SUCCESS,
             data: { user },
@@ -243,14 +239,10 @@ export function doUserCheckEmailVerified() {
   // This will happen in the background so we don't need loading booleans
   return (dispatch) => {
     Lbryio.getCurrentUser().then((user) => {
-      if (user.has_verified_email) {
-        // check premium membership
-        if (user.odysee_member) {
       dispatch(doCheckUserOdyseeMemberships(user));
-        }
 
+      if (user.has_verified_email) {
         dispatch(doRewardList());
-
         dispatch({
           type: ACTIONS.USER_FETCH_SUCCESS,
           data: { user },

web/component/ads/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import { doSetAdBlockerFound } from 'redux/actions/app';
+import { selectAdBlockerFound } from 'redux/selectors/app';
 import { makeSelectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
 import { selectOdyseeMembershipIsPremiumPlus, selectUserCountry } from 'redux/selectors/user';
 import Ads from './view';
@@ -7,6 +8,7 @@ import Ads from './view';
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   isMature: selectClaimIsNsfwForUri(state, props.uri),
+  isAdBlockerFound: selectAdBlockerFound(state),
   userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
   userCountry: selectUserCountry(state),
 });

web/component/ads/view.jsx

@@ -59,6 +59,7 @@ type Props = {
   className?: string,
   noFallback?: boolean,
   // --- redux ---
+  isAdBlockerFound: ?boolean,
   userHasPremiumPlus: boolean,
   userCountry: string,
   doSetAdBlockerFound: (boolean) => void,
@@ -69,6 +70,7 @@ function Ads(props: Props) {
     type = 'video',
     tileLayout,
     small,
+    isAdBlockerFound,
     userHasPremiumPlus,
     userCountry,
     className,
@@ -76,7 +78,7 @@ function Ads(props: Props) {
     doSetAdBlockerFound,
   } = props;
 
-  const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, doSetAdBlockerFound);
+  const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound);
   const adConfig = USE_ADNIMATION ? AD_CONFIGS.ADNIMATION : resolveVidcrunchConfig();
 
   // add script to DOM

web/component/adsBanner/index.js

@@ -1,11 +1,13 @@
 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 { selectOdyseeMembershipIsPremiumPlus, selectUserCountry } from 'redux/selectors/user';
 import AdsBanner from './view';
 
 const select = (state, props) => ({
+  isAdBlockerFound: selectAdBlockerFound(state),
   userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
   userCountry: selectUserCountry(state),
   currentTheme: selectClientSetting(state, SETTINGS.THEME),

web/component/adsBanner/view.jsx

@@ -35,6 +35,7 @@ const adsSignInDriver = (
 let gReferenceCounter = 0;
 
 type Props = {
+  isAdBlockerFound: ?boolean,
   userHasPremiumPlus: boolean,
   userCountry: string,
   currentTheme: string,
@@ -42,8 +43,8 @@ type Props = {
 };
 
 export default function AdsBanner(props: Props) {
-  const { userHasPremiumPlus, userCountry, currentTheme, doSetAdBlockerFound } = props;
-  const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, doSetAdBlockerFound);
+  const { isAdBlockerFound, userHasPremiumPlus, userCountry, currentTheme, doSetAdBlockerFound } = props;
+  const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound);
 
   React.useEffect(() => {
     if (shouldShowAds) {