add ad to channel pages

ui/page/discover/view.jsx

@@ -181,6 +181,132 @@ function DiscoverPage(props: Props) {
     );
   }
 
+  // returns true if passed element is fully visible on screen
+  function isScrolledIntoView(el) {
+    const rect = el.getBoundingClientRect();
+    const elemTop = rect.top;
+    const elemBottom = rect.bottom;
+
+    // Only completely visible elements return true:
+    const isVisible = elemTop >= 0 && elemBottom <= window.innerHeight;
+    return isVisible;
+  }
+
+  React.useEffect(() => {
+    if (isAuthenticated || !SHOW_ADS) {
+      return;
+    }
+
+    (async function () {
+      // test if adblock is enabled
+      let adBlockEnabled = false;
+      const googleAdUrl = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
+      try {
+        await fetch(new Request(googleAdUrl)).catch((_) => {
+          adBlockEnabled = true;
+        });
+      } catch (e) {
+        adBlockEnabled = true;
+      } finally {
+        if (!adBlockEnabled) {
+          // select the cards on page
+          let cards = document.getElementsByClassName('card claim-preview--tile');
+
+          // eslint-disable-next-line no-inner-declarations
+          function checkFlag() {
+            if (cards.length === 0) {
+              window.setTimeout(checkFlag, 100);
+            } else {
+              // find the last fully visible card
+              let lastCard;
+
+              // 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
+              // $FlowFixMe
+              const clonedCard = lastCard.cloneNode(true);
+
+              // insert cloned card
+              // $FlowFixMe
+              lastCard.parentNode.insertBefore(clonedCard, lastCard);
+
+              // delete last card so that it doesn't mess up formatting
+              // $FlowFixMe
+              // lastCard.remove();
+
+              // change the appearance of the cloned card
+              // $FlowFixMe
+              clonedCard.querySelector('.claim__menu-button').remove();
+
+              // $FlowFixMe
+              clonedCard.querySelector('.truncated-text').innerHTML = __(
+                'Hate these? Login to Odysee for an ad free experience'
+              );
+
+              // $FlowFixMe
+              clonedCard.querySelector('.claim-tile__info').remove();
+
+              // $FlowFixMe
+              clonedCard.querySelector('[role="none"]').removeAttribute('href');
+
+              // $FlowFixMe
+              clonedCard.querySelector('.claim-tile__header').firstChild.href = '/$/signin';
+
+              // $FlowFixMe
+              clonedCard.querySelector('.claim-tile__title').firstChild.removeAttribute('aria-label');
+
+              // $FlowFixMe
+              clonedCard.querySelector('.claim-tile__title').firstChild.removeAttribute('title');
+
+              // $FlowFixMe
+              clonedCard.querySelector('.claim-tile__header').firstChild.removeAttribute('aria-label');
+
+              // $FlowFixMe
+              clonedCard
+                .querySelector('.media__thumb')
+                .replaceWith(document.getElementsByClassName('homepageAdContainer')[0]);
+
+              // show the homepage ad which is not displayed at first
+              document.getElementsByClassName('homepageAdContainer')[0].style.display = 'block';
+
+              // $FlowFixMe
+              const imageHeight = window.getComputedStyle(lastCard.querySelector('.media__thumb')).height;
+              // $FlowFixMe
+              const imageWidth = window.getComputedStyle(lastCard.querySelector('.media__thumb')).width;
+
+              const styles = `#av-container, #AVcontent, #aniBox {
+                height: ${imageHeight} !important;
+                width: ${imageWidth} !important;
+              }`;
+
+              const styleSheet = document.createElement('style');
+              styleSheet.type = 'text/css';
+              styleSheet.id = 'customAniviewStyling';
+              styleSheet.innerText = styles;
+              // $FlowFixMe
+              document.head.appendChild(styleSheet);
+            }
+          }
+          checkFlag();
+        }
+      }
+    })();
+  }, []);
+
+
   // Sync liveSection --> liveSectionStore
   React.useEffect(() => {
     if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) {
@@ -230,6 +356,8 @@ function DiscoverPage(props: Props) {
         </>
       )}
 
+      <Ads type="homepage" />
+
       <ClaimListDiscover
         prefixUris={useDualList ? undefined : livestreamUris}
         pins={useDualList ? undefined : getPins(dynamicRouteProps)}