From 6d3ec149b3080ac4bdc4c4aca58607c0a6c5cbd4 Mon Sep 17 00:00:00 2001
From: mayeaux <instacoins@gmail.com>
Date: Wed, 1 Dec 2021 15:52:03 +0100
Subject: [PATCH] use second card on small screens and dont load script if
 authenticated (#406)

---
 ui/page/home/view.jsx      | 18 ++++++++++++++----
 web/component/ads/index.js |  2 ++
 web/component/ads/view.jsx |  6 +++---
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx
index f7ab6bd9c..d7a10ba5d 100644
--- a/ui/page/home/view.jsx
+++ b/ui/page/home/view.jsx
@@ -149,10 +149,20 @@ function HomePage(props: Props) {
             } else {
               // find the last fully visible card
               let lastCard;
-              for (const card of cards) {
-                const isFullyVisible = isScrolledIntoView(card);
-                if (!isFullyVisible) break;
-                lastCard = card;
+
+              // width of browser window
+              const windowWidth = window.innerWidth;
+
+              // on small screens, grab the second item
+              if (windowWidth <= 900) {
+                lastCard = cards[1];
+              } else {
+                // otherwise, get the last fully visible card
+                for (const card of cards) {
+                  const isFullyVisible = isScrolledIntoView(card);
+                  if (!isFullyVisible) break;
+                  lastCard = card;
+                }
               }
 
               // clone the last card
diff --git a/web/component/ads/index.js b/web/component/ads/index.js
index 46be5182f..a66fc6b69 100644
--- a/web/component/ads/index.js
+++ b/web/component/ads/index.js
@@ -1,12 +1,14 @@
 import { connect } from 'react-redux';
 import { selectTheme } from 'redux/selectors/settings';
 import { makeSelectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import Ads from './view';
 
 const select = (state, props) => ({
   theme: selectTheme(state),
   claim: makeSelectClaimForUri(props.uri)(state),
   isMature: selectClaimIsNsfwForUri(state, props.uri),
+  authenticated: selectUserVerifiedEmail(state),
 });
 
 export default connect(select)(Ads);
diff --git a/web/component/ads/view.jsx b/web/component/ads/view.jsx
index 88ef7c502..7cc23e47a 100644
--- a/web/component/ads/view.jsx
+++ b/web/component/ads/view.jsx
@@ -29,6 +29,7 @@ type Props = {
   small: boolean,
   claim: Claim,
   isMature: boolean,
+  authenticated: boolean,
 };
 
 function Ads(props: Props) {
@@ -36,6 +37,7 @@ function Ads(props: Props) {
     location: { pathname },
     type = 'video',
     small,
+    authenticated,
   } = props;
 
   // load ad and tags here
@@ -56,7 +58,7 @@ function Ads(props: Props) {
 
   // add script to DOM
   useEffect(() => {
-    if (SHOW_ADS) {
+    if (SHOW_ADS && !authenticated) {
       let script;
       try {
         script = document.createElement('script');
@@ -70,8 +72,6 @@ function Ads(props: Props) {
         };
       } catch (e) {}
     }
-
-    // TODO: remove the script when it exists?
   }, []);
 
   // display to say "sign up to not see these"