Create banner ads and add to homepage

## Behavior in homepage
- Mobile: show after every other category
- Desktop: show after first category, then every 2 categories.

## Known issue:
- "FYP" is not part of the categories array at the moment, so it does mess up the behavior.

## Notes
I think this is also called "in-content" by adnim (not 100% sure of the terminology).

ui/page/home/view.jsx

@@ -15,12 +15,13 @@ import Icon from 'component/common/icon';
 import WaitUntilOnPage from 'component/common/wait-until-on-page';
 import RecommendedPersonal from 'component/recommendedPersonal';
 import Yrbl from 'component/yrbl';
-import { useIsLargeScreen } from 'effects/use-screensize';
+import { useIsLargeScreen, useIsMobile } from 'effects/use-screensize';
 import { GetLinksData } from 'util/buildHomepage';
 import { getLivestreamUris } from 'util/livestream';
 import ScheduledStreams from 'component/scheduledStreams';
 import { splitBySeparator } from 'util/lbryURI';
 import Ads from 'web/component/ads';
+import AdsBanner from 'web/component/adsBanner';
 import Meme from 'web/component/meme';
 
 const CATEGORY_LIVESTREAM_LIMIT = 3;
@@ -68,6 +69,7 @@ function HomePage(props: Props) {
   const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
   const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
   const isLargeScreen = useIsLargeScreen();
+  const isMobileScreen = useIsMobile();
   const subscriptionChannelIds = subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1]);
 
   const rowData: Array<RowDataItem> = GetLinksData(
@@ -182,6 +184,8 @@ function HomePage(props: Props) {
                 label={__('View More')}
               />
             )}
+            {isMobileScreen && <AdsBanner />}
+            {!isMobileScreen && (index === 0 || index % 2 === 0) && <AdsBanner />}
           </>
         )}
       </div>

ui/scss/component/_ads.scss

@@ -366,3 +366,82 @@
 #av-container #av-inner #gui #timeline #timeline-progress {
   background: var(--color-primary) !important;
 }
+
+// ****************************************************************************
+// Banner
+// ****************************************************************************
+
+$BANNER_BORDER: 1px;
+
+.banner-ad {
+  margin-top: var(--spacing-l);
+  background-color: var(--color-ads-background);
+  border: $BANNER_BORDER solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+
+.banner-ad__container {
+  padding: var(--spacing-xxs) var(--spacing-m);
+  @media (max-width: $breakpoint-small) {
+    padding: var(--spacing-xxs) var(--spacing-xxs);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    margin: auto;
+    width: 100%;
+    max-width: 386px;
+  }
+}
+
+.banner-ad__driver {
+  display: none; // "= flex" when ads are fetched ('ob_holder' exists)
+  flex-direction: row;
+  align-items: center;
+
+  border-left: $BANNER_BORDER solid var(--color-border);
+  border-top: $BANNER_BORDER solid var(--color-border);
+  border-radius: var(--border-radius) 0 var(--border-radius) 0;
+  max-width: 95%;
+  float: right;
+
+  font-size: var(--font-xsmall);
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-xxsmall);
+  }
+
+  > * {
+    padding: 0 var(--spacing-xxxs);
+  }
+}
+
+#ob_holder ~ .banner-ad__driver,
+.banner-ad__container[data-ob-mark='true'] ~ .banner-ad__driver {
+  display: flex;
+}
+
+.banner-ad__driver-label {
+  color: var(--color-text-subtitle);
+}
+
+.banner-ad__driver-value {
+  color: var(--color-text-subtitle);
+  border-left: $BANNER_BORDER solid var(--color-border);
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @supports (-webkit-line-clamp: 3) {
+    white-space: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  @media (max-width: $breakpoint-small) {
+    line-height: 1.2;
+    padding: calc(var(--spacing-xxxs) / 2) var(--spacing-xxxs);
+  }
+}

web/component/adsBanner/index.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import * as SETTINGS from 'constants/settings';
+import { doSetAdBlockerFound } from 'redux/actions/app';
+import { selectClientSetting } from 'redux/selectors/settings';
+import { selectOdyseeMembershipIsPremiumPlus, selectUserCountry } from 'redux/selectors/user';
+import AdsBanner from './view';
+
+const select = (state, props) => ({
+  userHasPremiumPlus: selectOdyseeMembershipIsPremiumPlus(state),
+  userCountry: selectUserCountry(state),
+  currentTheme: selectClientSetting(state, SETTINGS.THEME),
+});
+
+const perform = {
+  doSetAdBlockerFound,
+};
+
+export default connect(select, perform)(AdsBanner);

web/component/adsBanner/view.jsx

@@ -0,0 +1,86 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import I18nMessage from 'component/i18nMessage';
+import * as PAGES from 'constants/pages';
+import useShouldShowAds from 'effects/use-should-show-ads';
+
+const AD_SCRIPT_URL = 'https://widgets.outbrain.com/outbrain.js';
+
+// ****************************************************************************
+// ****************************************************************************
+
+const adsSignInDriver = (
+  <I18nMessage
+    tokens={{
+      sign_up_for_premium: (
+        <Button button="link" label={__('Get Odysee Premium+')} navigate={`/$/${PAGES.ODYSEE_MEMBERSHIP}`} />
+      ),
+    }}
+  >
+    %sign_up_for_premium% for an ad free experience.
+  </I18nMessage>
+);
+
+// ****************************************************************************
+// AdsBanner
+// ****************************************************************************
+
+let gReferenceCounter = 0;
+
+type Props = {
+  userHasPremiumPlus: boolean,
+  userCountry: string,
+  currentTheme: string,
+  doSetAdBlockerFound: (boolean) => void,
+};
+
+export default function AdsBanner(props: Props) {
+  const { userHasPremiumPlus, userCountry, currentTheme, doSetAdBlockerFound } = props;
+  const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, doSetAdBlockerFound);
+
+  React.useEffect(() => {
+    if (shouldShowAds) {
+      try {
+        const script = document.createElement('script');
+        script.src = AD_SCRIPT_URL;
+        script.async = true;
+        script.onload = () => {
+          ++gReferenceCounter;
+        };
+
+        // $FlowFixMe
+        document.body.appendChild(script);
+        return () => {
+          // $FlowFixMe
+          document.body.removeChild(script);
+
+          if (--gReferenceCounter <= 0) {
+            delete window.OBR;
+            // TODO: clear styles after the team adds an ID or class for us to query.
+          }
+        };
+      } catch (e) {}
+    }
+  }, [shouldShowAds]);
+
+  if (!shouldShowAds) {
+    return null;
+  }
+
+  return (
+    <div className="banner-ad">
+      <div
+        className="banner-ad__container OUTBRAIN"
+        data-ob-contenturl="DROP_PERMALINK_HERE"
+        data-widget-id="AR_6"
+        data-ob-installation-key="ADNIMKAJDGAG4GAO6AGG6H5KP"
+        data-dark-mode={currentTheme === 'dark' ? 'true' : 'false'}
+      />
+      <div className="banner-ad__driver">
+        <div className="banner-ad__driver-label">Ad</div>
+        <div className="banner-ad__driver-value">{adsSignInDriver}</div>
+      </div>
+    </div>
+  );
+}