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,41 +114,44 @@ function checkAuthBusy() {
  */
 export function doCheckUserOdyseeMemberships(user) {
   return async (dispatch) => {
-    // get memberships for a given user
-    // TODO: in the future, can we specify this just to @odysee?
-
-    const response = await Lbryio.call(
-      'membership',
-      'mine',
-      {
-        environment: stripeEnvironment,
-      },
-      'post'
-    );
-
-    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
-    // loop through all memberships and save the @odysee ones
-    // maybe in the future we can only hit @odysee in the API call
-    for (const membership of response) {
-      if (membership.MembershipDetails && membership.MembershipDetails.channel_name === '@odysee') {
-        savedMemberships.push(membership.MembershipDetails.name);
-      }
-    }
+    if (user.odysee_member) {
+      // get memberships for a given user
+      // TODO: in the future, can we specify this just to @odysee?
 
-    // determine highest ranking membership based on returned data
-    // note: this is from an odd state in the API where a user can be both premium/Premium + at the same time
-    // I expect this can change once upgrade/downgrade is implemented
-    if (savedMemberships.length > 0) {
-      // if premium plus is a membership, return that, otherwise it's only premium
-      const premiumPlusExists = savedMemberships.includes('Premium+');
-      if (premiumPlusExists) {
-        highestMembershipRanking = 'Premium+';
-      } else {
-        highestMembershipRanking = 'Premium';
+      const response = await Lbryio.call(
+        'membership',
+        'mine',
+        {
+          environment: stripeEnvironment,
+        },
+        'post'
+      );
+
+      let savedMemberships = [];
+
+      // 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
+      // loop through all memberships and save the @odysee ones
+      // maybe in the future we can only hit @odysee in the API call
+      for (const membership of response) {
+        if (membership.MembershipDetails && membership.MembershipDetails.channel_name === '@odysee') {
+          savedMemberships.push(membership.MembershipDetails.name);
+        }
+      }
+
+      // determine highest ranking membership based on returned data
+      // note: this is from an odd state in the API where a user can be both premium/Premium + at the same time
+      // I expect this can change once upgrade/downgrade is implemented
+      if (savedMemberships.length > 0) {
+        // if premium plus is a membership, return that, otherwise it's only premium
+        const premiumPlusExists = savedMemberships.includes('Premium+');
+        if (premiumPlusExists) {
+          highestMembershipRanking = 'Premium+';
+        } else {
+          highestMembershipRanking = 'Premium';
+        }
       }
     }
 
@@ -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));
-          }
+          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(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) => {
+      dispatch(doCheckUserOdyseeMemberships(user));
+
       if (user.has_verified_email) {
-        // check premium membership
-        if (user.odysee_member) {
-          dispatch(doCheckUserOdyseeMemberships(user));
-        }
-
         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) {