Ad: simplification and alignment fixes #1064

ui/component/channelContent/index.js

@@ -11,7 +11,6 @@ import { doResolveUris } from 'redux/actions/claims';
 import * as SETTINGS from 'constants/settings';
 import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { withRouter } from 'react-router';
-import { selectOdyseeMembershipIsPremiumPlus } from 'redux/selectors/user';
 import { selectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
 import { doFetchChannelLiveStatus } from 'redux/actions/livestream';
 import { selectActiveLivestreamForChannel, selectActiveLivestreamInitialized } from 'redux/selectors/livestream';
@@ -36,7 +35,6 @@ const select = (state, props) => {
     tileLayout: selectClientSetting(state, SETTINGS.TILE_LAYOUT),
     activeLivestreamForChannel: selectActiveLivestreamForChannel(state, channelClaimId),
     activeLivestreamInitialized: selectActiveLivestreamInitialized(state),
-    userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
   };
 };
 

ui/component/channelContent/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { SHOW_ADS, SIMPLE_SITE } from 'config';
+import { SIMPLE_SITE } from 'config';
 import * as CS from 'constants/claim_search';
 import * as ICONS from 'constants/icons';
 import React, { Fragment } from 'react';
@@ -39,7 +39,6 @@ type Props = {
   doFetchChannelLiveStatus: (string) => void,
   activeLivestreamForChannel: any,
   activeLivestreamInitialized: boolean,
-  userHasPremiumPlus: boolean,
 };
 
 function ChannelContent(props: Props) {
@@ -61,7 +60,6 @@ function ChannelContent(props: Props) {
     doFetchChannelLiveStatus,
     activeLivestreamForChannel,
     activeLivestreamInitialized,
-    userHasPremiumPlus,
   } = props;
   // const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
 
@@ -162,7 +160,7 @@ function ChannelContent(props: Props) {
           defaultOrderBy={CS.ORDER_BY_NEW}
           pageSize={defaultPageSize}
           infiniteScroll={defaultInfiniteScroll}
-          injectedItem={SHOW_ADS && !userHasPremiumPlus && { node: <Ads type="video" tileLayout={tileLayout} small /> }}
+          injectedItem={{ node: <Ads type="video" tileLayout={tileLayout} small /> }}
           meta={
             showFilters && (
               <Form onSubmit={() => {}} className="wunderbar--inline">

ui/page/discover/index.js

@@ -5,7 +5,6 @@ import { makeSelectClaimForUri } from 'redux/selectors/claims';
 import * as SETTINGS from 'constants/settings';
 import { doFetchActiveLivestreams } from 'redux/actions/livestream';
 import { selectActiveLivestreams } from 'redux/selectors/livestream';
-import { selectOdyseeMembershipIsPremiumPlus } from 'redux/selectors/user';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { selectClientSetting, selectLanguage } from 'redux/selectors/settings';
@@ -22,7 +21,6 @@ const select = (state, props) => {
     repostedClaim: repostedUri ? makeSelectClaimForUri(repostedUri)(state) : null,
     tileLayout: selectClientSetting(state, SETTINGS.TILE_LAYOUT),
     activeLivestreams: selectActiveLivestreams(state),
-    userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
     languageSetting: selectLanguage(state),
     searchInLanguage: selectClientSetting(state, SETTINGS.SEARCH_IN_LANGUAGE),
   };

ui/page/discover/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { SHOW_ADS, DOMAIN, SIMPLE_SITE } from 'config';
+import { DOMAIN, SIMPLE_SITE } from 'config';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import * as CS from 'constants/claim_search';
@@ -31,7 +31,6 @@ type Props = {
   tileLayout: boolean,
   activeLivestreams: ?LivestreamInfo,
   doFetchActiveLivestreams: (orderBy: ?Array<string>, lang: ?Array<string>) => void,
-  userHasPremiumPlus: boolean,
 };
 
 function DiscoverPage(props: Props) {
@@ -48,7 +47,6 @@ function DiscoverPage(props: Props) {
     activeLivestreams,
     doFetchActiveLivestreams,
     dynamicRouteProps,
-    userHasPremiumPlus,
   } = props;
 
   const buttonRef = useRef();
@@ -190,9 +188,7 @@ function DiscoverPage(props: Props) {
         tags={tags}
         hiddenNsfwMessage={<HiddenNsfw type="page" />}
         repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
-        injectedItem={
-          SHOW_ADS && !userHasPremiumPlus && !isWildWest && { node: <Ads small type="video" tileLayout={tileLayout} /> }
-        }
+        injectedItem={!isWildWest && { node: <Ads small type="video" tileLayout={tileLayout} /> }}
         // Assume wild west page if no dynamicRouteProps
         // Not a very good solution, but just doing it for now
         // until we are sure this page will stay around

ui/page/home/index.js

@@ -3,7 +3,7 @@ import * as SETTINGS from 'constants/settings';
 import { doFetchActiveLivestreams } from 'redux/actions/livestream';
 import { selectActiveLivestreams, selectFetchingActiveLivestreams } from 'redux/selectors/livestream';
 import { selectFollowedTags } from 'redux/selectors/tags';
-import { selectUserVerifiedEmail, selectOdyseeMembershipIsPremiumPlus } from 'redux/selectors/user';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { selectShowMatureContent, selectHomepageData, selectClientSetting } from 'redux/selectors/settings';
 
@@ -18,7 +18,6 @@ const select = (state) => ({
   activeLivestreams: selectActiveLivestreams(state),
   fetchingActiveLivestreams: selectFetchingActiveLivestreams(state),
   hideScheduledLivestreams: selectClientSetting(state, SETTINGS.HIDE_SCHEDULED_LIVESTREAMS),
-  userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
 });
 
 const perform = (dispatch) => ({

ui/page/home/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
-import { SHOW_ADS, SITE_NAME, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
+import { SITE_NAME, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import React, { useState } from 'react';
 import Page from 'component/page';
 import Button from 'component/button';
@@ -31,7 +31,6 @@ type Props = {
   doFetchActiveLivestreams: () => void,
   fetchingActiveLivestreams: boolean,
   hideScheduledLivestreams: boolean,
-  userHasPremiumPlus: boolean,
 };
 
 function HomePage(props: Props) {
@@ -45,7 +44,6 @@ function HomePage(props: Props) {
     doFetchActiveLivestreams,
     fetchingActiveLivestreams,
     hideScheduledLivestreams,
-    userHasPremiumPlus,
   } = props;
   const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
   const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
@@ -101,11 +99,7 @@ function HomePage(props: Props) {
         hasSource
         prefixUris={getLivestreamUris(activeLivestreams, options.channelIds)}
         pinUrls={pinUrls}
-        injectedItem={
-          index === 0 &&
-          SHOW_ADS &&
-          !userHasPremiumPlus && { node: <Ads small type="video" tileLayout />, replace: true }
-        }
+        injectedItem={index === 0 && { node: <Ads small type="video" tileLayout />, replace: true }}
       />
     );
 

ui/page/search/index.js

@@ -8,7 +8,6 @@ import {
   makeSelectHasReachedMaxResultsLength,
 } from 'redux/selectors/search';
 import { selectShowMatureContent } from 'redux/selectors/settings';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { getSearchQueryString } from 'util/query-params';
 import SearchPage from './view';
 
@@ -36,7 +35,6 @@ const select = (state, props) => {
     searchOptions,
     isSearching: selectIsSearching(state),
     uris: uris,
-    isAuthenticated: selectUserVerifiedEmail(state),
     hasReachedMaxResultsLength: hasReachedMaxResultsLength,
   };
 };

ui/page/search/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { SIMPLE_SITE, SHOW_ADS } from 'config';
+import { SIMPLE_SITE } from 'config';
 import React, { useEffect } from 'react';
 import Lbry from 'lbry';
 import { parseURI, isNameValid } from 'util/lbryURI';
@@ -23,7 +23,7 @@ type Props = {
 };
 
 export default function SearchPage(props: Props) {
-  const { urlQuery, searchOptions, search, uris, isSearching, isAuthenticated, hasReachedMaxResultsLength } = props;
+  const { urlQuery, searchOptions, search, uris, isSearching, hasReachedMaxResultsLength } = props;
   const { push } = useHistory();
   const [from, setFrom] = React.useState(0);
 
@@ -103,13 +103,7 @@ export default function SearchPage(props: Props) {
                   onSearchOptionsChanged={resetPage}
                 />
               }
-              injectedItem={
-                SHOW_ADS &&
-                !isAuthenticated && {
-                  node: <Ads small type="video" />,
-                  index: 3,
-                }
-              }
+              injectedItem={{ node: <Ads small type="video" />, index: 3 }}
             />
 
             <div className="main--empty help">{__('These search results are provided by Odysee.')}</div>

ui/scss/component/_ads.scss

@@ -66,6 +66,10 @@
       transition: unset !important;
     }
 
+    #aniBox[style*='height: 1px'] {
+      display: none;
+    }
+
     #aniBox,
     #av-container {
       width: 100% !important;

web/component/ads/view.jsx

@@ -50,7 +50,61 @@ function removeIfExists(querySelector) {
   if (element) element.remove();
 }
 
-function clearAdElements() {
+function Ads(props: Props) {
+  const { type = 'video', tileLayout, small, userHasPremiumPlus, className } = props;
+
+  const [shouldShowAds, setShouldShowAds] = React.useState(resolveAdVisibility());
+  const mobileAds = IS_ANDROID || IS_IOS;
+
+  // this is populated from app based on location
+  const isInEu = localStorage.getItem('gdprRequired') === 'true';
+  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;
+  }
+
+  useEffect(() => {
+    if (window.odysee_ad_blocker_detected === undefined) {
+      let mounted = true;
+      const GOOGLE_AD_URL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
+
+      fetch(GOOGLE_AD_URL)
+        .then(() => {
+          window.odysee_ad_blocker_detected = false;
+        })
+        .catch(() => {
+          window.odysee_ad_blocker_detected = true;
+        })
+        .finally(() => {
+          if (mounted) {
+            setShouldShowAds(resolveAdVisibility());
+          }
+        });
+
+      return () => {
+        mounted = false;
+      };
+    }
+  }, []);
+
+  // add script to DOM
+  useEffect(() => {
+    if (shouldShowAds) {
+      let script;
+      try {
+        script = document.createElement('script');
+        script.src = adConfig.url;
+        // $FlowFixMe
+        document.head.appendChild(script);
+
+        return () => {
+          // $FlowFixMe
+          document.head.removeChild(script);
+
           // clear aniview state to allow ad reload
           delete window.aniplayerPos;
           delete window.storageAni;
@@ -62,37 +116,10 @@ function clearAdElements() {
           removeIfExists('[src^="https://player.aniview.com/script/6.1/aniview.js"]');
           removeIfExists('[id^="AVLoaderaniplayer_vidcrunch"]');
           removeIfExists('#av_css_id');
-}
-
-function Ads(props: Props) {
-  const { type = 'video', tileLayout, small, userHasPremiumPlus, className } = props;
-
-  const shouldShowAds = SHOW_ADS && !userHasPremiumPlus;
-  const mobileAds = IS_ANDROID || IS_IOS;
-
-  // this is populated from app based on location
-  const isInEu = localStorage.getItem('gdprRequired') === 'true';
-  const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT;
-
-  // add script to DOM
-  useEffect(() => {
-    if (shouldShowAds) {
-      let script;
-      try {
-        clearAdElements();
-        script = document.createElement('script');
-        script.src = adConfig.url;
-        // $FlowFixMe
-        document.head.appendChild(script);
-
-        return () => {
-          // $FlowFixMe
-          document.head.removeChild(script);
-          clearAdElements();
         };
       } catch (e) {}
     }
-  }, []);
+  }, [shouldShowAds]);
 
   const adsSignInDriver = (
     <I18nMessage