diff --git a/ui/component/channelContent/view.jsx b/ui/component/channelContent/view.jsx index 52f692d2c..71b32e7d2 100644 --- a/ui/component/channelContent/view.jsx +++ b/ui/component/channelContent/view.jsx @@ -84,139 +84,6 @@ function ChannelContent(props: Props) { setSearchQuery(value); } - // 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; - // } - // - // const urlParams = new URLSearchParams(window.location.search); - // const viewType = urlParams.get('view'); - // - // // only insert ad if it's a content view - // if (viewType !== 'content') 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); - // - // window.dispatchEvent(new CustomEvent('scroll')); - // } - // } - // checkFlag(); - // } - // } - // })(); - // }, []); - React.useEffect(() => { const timer = setTimeout(() => { if (searchQuery === '' || !claimId) { @@ -307,7 +174,7 @@ function ChannelContent(props: Props) { {!channelIsMine && claimsInChannel > 0 && } - + {/**/} {!fetching && ( { - 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); - - window.dispatchEvent(new CustomEvent('scroll')); - } - } - checkFlag(); - } - } - })(); + injectAd(); }, [isAuthenticated]); // Sync liveSection --> liveSectionStore diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx index 6fcb4537c..f74134e70 100644 --- a/ui/page/home/view.jsx +++ b/ui/page/home/view.jsx @@ -1,8 +1,8 @@ // @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 Ads from 'web/component/ads'; +import { SITE_NAME, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config'; +import Ads, { injectAd } from 'web/component/ads'; import React from 'react'; import Page from 'component/page'; import Button from 'component/button'; @@ -132,119 +132,7 @@ function HomePage(props: Props) { } React.useEffect(() => { - if (authenticated || !SHOW_ADS) { - return; - } - - (async () => { - // 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; - } - - // if no last card was found, just exit the function to not cause errors - if (!lastCard) return; - } - - // clone the last card - // $FlowFixMe - const clonedCard = lastCard.cloneNode(true); - - // insert cloned card - // $FlowFixMe - lastCard.parentNode.insertBefore(clonedCard, lastCard); - - // 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'; - - const thumbnail = window.getComputedStyle(lastCard.querySelector('.media__thumb')); - - const styles = `#av-container, #AVcontent, #aniBox { - height: ${thumbnail.height} !important; - width: ${thumbnail.width} !important; - }`; - - const styleSheet = document.createElement('style'); - styleSheet.type = 'text/css'; - styleSheet.id = 'customAniviewStyling'; - styleSheet.innerText = styles; - // $FlowFixMe - document.head.appendChild(styleSheet); - - // delete last card to not introduce layout shifts - lastCard.remove(); - - // addresses bug where ad doesn't show up until a scroll event - document.dispatchEvent(new CustomEvent('scroll')); - } - } - checkFlag(); - } - } - })(); + injectAd() }, []); return ( diff --git a/web/component/ads/index.js b/web/component/ads/index.js index a66fc6b69..3f7a4e8e6 100644 --- a/web/component/ads/index.js +++ b/web/component/ads/index.js @@ -2,7 +2,7 @@ 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'; +import Ads, { injectAd } from './view'; const select = (state, props) => ({ theme: selectTheme(state), @@ -12,3 +12,4 @@ const select = (state, props) => ({ }); export default connect(select)(Ads); +export { injectAd }; diff --git a/web/component/ads/view.jsx b/web/component/ads/view.jsx index a9a43b2ed..0f18ec1b4 100644 --- a/web/component/ads/view.jsx +++ b/web/component/ads/view.jsx @@ -159,4 +159,128 @@ function Ads(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; +} + +async function injectAd() { + // don't inject on firefox android + if (isFirefoxAndroid) return; + // 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; + } + + // if no last card was found, just exit the function to not cause errors + if (!lastCard) return; + } + + // clone the last card + // $FlowFixMe + const clonedCard = lastCard.cloneNode(true); + + // insert cloned card + // $FlowFixMe + lastCard.parentNode.insertBefore(clonedCard, lastCard); + + // 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'; + + const thumbnail = window.getComputedStyle(lastCard.querySelector('.media__thumb')); + + const styles = `#av-container, #AVcontent, #aniBox { + height: ${thumbnail.height} !important; + width: ${thumbnail.width} !important; + }`; + + const styleSheet = document.createElement('style'); + styleSheet.type = 'text/css'; + styleSheet.id = 'customAniviewStyling'; + styleSheet.innerText = styles; + + // $FlowFixMe + document.head.appendChild(styleSheet); + + // delete last card to not introduce layout shifts + lastCard.remove(); + + // addresses bug where ad doesn't show up until a scroll event + document.dispatchEvent(new CustomEvent('scroll')); + } + } + checkFlag(); + } + } +} + export default withRouter(Ads); +export { injectAd };