Move blocker flag to redux

Was trying to save 1 state by assuming the homepage will be in a busy state and the ad-detection code will finish first. But this is not true for those with a small Following count.

ui/constants/action_types.js

@@ -33,6 +33,7 @@ export const TOGGLE_SPLASH_ANIMATION = 'TOGGLE_SPLASH_ANIMATION';
 export const SET_ACTIVE_CHANNEL = 'SET_ACTIVE_CHANNEL';
 export const SET_INCOGNITO = 'SET_INCOGNITO';
 export const SET_MOBILE_PLAYER_DIMENSIONS = 'SET_MOBILE_PLAYER_DIMENSIONS';
+export const SET_AD_BLOCKER_FOUND = 'SET_AD_BLOCKER_FOUND';
 export const RELOAD_REQUIRED = 'RELOAD_REQUIRED';
 
 // Navigation

ui/page/home/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import * as SETTINGS from 'constants/settings';
 import { doFetchActiveLivestreams } from 'redux/actions/livestream';
+import { selectAdBlockerFound } from 'redux/selectors/app';
 import { selectActiveLivestreams, selectFetchingActiveLivestreams } from 'redux/selectors/livestream';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
@@ -18,6 +19,7 @@ const select = (state) => ({
   activeLivestreams: selectActiveLivestreams(state),
   fetchingActiveLivestreams: selectFetchingActiveLivestreams(state),
   hideScheduledLivestreams: selectClientSetting(state, SETTINGS.HIDE_SCHEDULED_LIVESTREAMS),
+  adBlockerFound: selectAdBlockerFound(state),
 });
 
 const perform = (dispatch) => ({

ui/page/home/view.jsx

@@ -32,6 +32,7 @@ type Props = {
   doFetchActiveLivestreams: () => void,
   fetchingActiveLivestreams: boolean,
   hideScheduledLivestreams: boolean,
+  adBlockerFound: ?boolean,
 };
 
 function HomePage(props: Props) {
@@ -45,6 +46,7 @@ function HomePage(props: Props) {
     doFetchActiveLivestreams,
     fetchingActiveLivestreams,
     hideScheduledLivestreams,
+    adBlockerFound,
   } = props;
 
   const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
@@ -104,7 +106,7 @@ function HomePage(props: Props) {
         injectedItem={
           index === 0 && {
             node: <Ads small type="video" tileLayout />,
-            replace: window.odysee_ad_blocker_detected === false,
+            replace: adBlockerFound === false,
           }
         }
       />

ui/redux/actions/app.js

@@ -741,3 +741,10 @@ export const doSetMobilePlayerDimensions = ({ height, width }) => ({
   type: ACTIONS.SET_MOBILE_PLAYER_DIMENSIONS,
   data: { heightWidth: { height, width } },
 });
+
+export function doSetAdBlockerFound(found) {
+  return {
+    type: ACTIONS.SET_AD_BLOCKER_FOUND,
+    data: found,
+  };
+}

ui/redux/reducers/app.js

@@ -47,6 +47,7 @@ export type AppState = {
   activeChannel: ?string,
   incognito: boolean,
   mobilePlayerDimensions?: { height: number, width: number },
+  adBlockerFound: ?boolean, // undefined = unknown; true/false = yes/no;
 };
 
 const defaultState: AppState = {
@@ -87,6 +88,7 @@ const defaultState: AppState = {
   activeChannel: undefined,
   incognito: false,
   mobilePlayerDimensions: undefined,
+  adBlockerFound: undefined,
 };
 
 // @@router comes from react-router
@@ -333,6 +335,13 @@ reducers[ACTIONS.SET_MOBILE_PLAYER_DIMENSIONS] = (state, action) => {
   };
 };
 
+reducers[ACTIONS.SET_AD_BLOCKER_FOUND] = (state, action) => {
+  return {
+    ...state,
+    adBlockerFound: action.data,
+  };
+};
+
 reducers[ACTIONS.USER_STATE_POPULATE] = (state, action) => {
   const { welcomeVersion, allowAnalytics } = action.data;
   return {

ui/redux/selectors/app.js

@@ -108,3 +108,4 @@ export const selectActiveChannelStakedLevel = (state) => {
 export const selectIncognito = (state) => selectState(state).incognito;
 
 export const selectMobilePlayerDimensions = (state) => selectState(state).mobilePlayerDimensions;
+export const selectAdBlockerFound = (state) => selectState(state).adBlockerFound;

web/component/ads/index.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { doSetAdBlockerFound } from 'redux/actions/app';
 import { selectTheme } from 'redux/selectors/settings';
 import { makeSelectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
 import { selectOdyseeMembershipIsPremiumPlus } from 'redux/selectors/user';
@@ -11,4 +12,8 @@ const select = (state, props) => ({
   userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
 });
 
-export default connect(select)(Ads);
+const perform = {
+  doSetAdBlockerFound,
+};
+
+export default connect(select, perform)(Ads);

web/component/ads/view.jsx

@@ -32,6 +32,9 @@ const IS_ANDROID = /Android/i.test(navigator.userAgent);
 
 // const isFirefoxAndroid = IS_ANDROID && IS_FIREFOX;
 
+// Internal use only. One-time update flag.
+let ad_blocker_detected;
+
 type Props = {
   type: string,
   tileLayout?: boolean,
@@ -40,6 +43,7 @@ type Props = {
   isMature: boolean,
   userHasPremiumPlus: boolean,
   className?: string,
+  doSetAdBlockerFound: (boolean) => void,
 };
 
 function removeIfExists(querySelector) {
@@ -48,7 +52,7 @@ function removeIfExists(querySelector) {
 }
 
 function Ads(props: Props) {
-  const { type = 'video', tileLayout, small, userHasPremiumPlus, className } = props;
+  const { type = 'video', tileLayout, small, userHasPremiumPlus, className, doSetAdBlockerFound } = props;
 
   const [shouldShowAds, setShouldShowAds] = React.useState(resolveAdVisibility());
   const mobileAds = IS_ANDROID || IS_IOS;
@@ -58,23 +62,26 @@ function Ads(props: Props) {
   const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT;
 
   function resolveAdVisibility() {
-    // 'window.odysee_ad_blocker_detected' will be undefined at startup.
-    // We'll wait until we are sure it is not blocked (i.e. === false) before
-    // showing the component.
-    return window.odysee_ad_blocker_detected === false && SHOW_ADS && !userHasPremiumPlus;
+    // 'ad_blocker_detected' will be undefined at startup. Wait until we are
+    // sure it is not blocked (i.e. === false) before showing the component.
+    return ad_blocker_detected === false && SHOW_ADS && !userHasPremiumPlus;
   }
 
   useEffect(() => {
-    if (window.odysee_ad_blocker_detected === undefined) {
+    if (ad_blocker_detected === undefined) {
       let mounted = true;
       const GOOGLE_AD_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
 
       fetch(GOOGLE_AD_URL)
         .then((response) => {
-          window.odysee_ad_blocker_detected = response.redirected === true;
+          const detected = response.redirected === true;
+          window.odysee_ad_blocker_detected = detected;
+          ad_blocker_detected = detected;
+          doSetAdBlockerFound(detected);
         })
         .catch(() => {
-          window.odysee_ad_blocker_detected = true;
+          ad_blocker_detected = true;
+          doSetAdBlockerFound(true);
         })
         .finally(() => {
           if (mounted) {