From 331ae641d04bb77effe76252f2e960f6861af777 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 1 Jun 2022 21:47:14 +0800
Subject: [PATCH] No sticky in mobile, and only show in Category.

## Code changes
- Switch from blacklist to whitelist.
---
 web/component/adsSticky/index.js |  5 ++--
 web/component/adsSticky/view.jsx | 48 ++++++++++----------------------
 2 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/web/component/adsSticky/index.js b/web/component/adsSticky/index.js
index fef07fec1..e5afb4835 100644
--- a/web/component/adsSticky/index.js
+++ b/web/component/adsSticky/index.js
@@ -1,8 +1,7 @@
 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 { selectHomepageData } from 'redux/selectors/settings';
 import { selectOdyseeMembershipIsPremiumPlus, selectUserCountry } from 'redux/selectors/user';
 import AdsSticky from './view';
 
@@ -10,7 +9,7 @@ const select = (state, props) => ({
   isAdBlockerFound: selectAdBlockerFound(state),
   userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
   userCountry: selectUserCountry(state),
-  currentTheme: selectClientSetting(state, SETTINGS.THEME),
+  homepageData: selectHomepageData(state),
 });
 
 const perform = {
diff --git a/web/component/adsSticky/view.jsx b/web/component/adsSticky/view.jsx
index 3e4478317..b86be993f 100644
--- a/web/component/adsSticky/view.jsx
+++ b/web/component/adsSticky/view.jsx
@@ -1,22 +1,13 @@
 // @flow
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import * as PAGES from 'constants/pages';
 import useShouldShowAds from 'effects/use-should-show-ads';
+import { platform } from 'util/platform';
 
 // ****************************************************************************
 // 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';
 let gScript;
 
@@ -24,40 +15,29 @@ type Props = {
   isAdBlockerFound: ?boolean,
   userHasPremiumPlus: boolean,
   userCountry: string,
-  currentTheme: string,
+  homepageData: any,
   doSetAdBlockerFound: (boolean) => void,
 };
 
 export default function AdsSticky(props: Props) {
-  const { isAdBlockerFound, userHasPremiumPlus, userCountry, doSetAdBlockerFound } = props;
-  const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound);
-  const {
-    location: { pathname },
-  } = useHistory();
-  const inAllowedPath = isPathAllowed(pathname);
+  const { isAdBlockerFound, userHasPremiumPlus, userCountry, homepageData, doSetAdBlockerFound } = props;
+  const { location } = useHistory();
   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) {
-    for (const x of PATH_BLACKLIST) {
-      if ((x.exact && pathname === x.path) || (!x.exact && pathname.startsWith(x.path))) {
-        return false;
-      }
-    }
-    return true;
+    const categoryValues = Object.values(homepageData);
+    // $FlowIssue: mixed type
+    const pathIsCategory = categoryValues.some((x) => pathname.startsWith(`/$/${x?.name}`));
+    return pathIsCategory;
   }
 
   // -- Mount script; 1 per session.
   React.useEffect(() => {
-    // NOTE: there is a bug where AdsSticky cannot be loaded on a page where
-    // 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()) {
+    if (shouldShowAds && shouldLoadSticky) {
       gScript = document.createElement('script');
       gScript.src = 'https://adncdnend.azureedge.net/adtags/odysee.adn.js';
       gScript.async = true;
@@ -65,7 +45,7 @@ export default function AdsSticky(props: Props) {
       // $FlowFixMe
       document.body.appendChild(gScript);
     }
-  }, [shouldShowAds, inAllowedPath]);
+  }, [shouldShowAds, shouldLoadSticky]);
 
   // -- Update visibility per pathname
   React.useEffect(() => {