add ad to channel page

This commit is contained in:
Anthony 2021-12-08 20:59:30 +01:00 committed by Thomas Zarebczan
parent 22f2053324
commit 1b6dc0fd8b
2 changed files with 130 additions and 2 deletions

View file

@ -76,6 +76,133 @@ function ChannelContent(props: Props) {
setSearchQuery(value); 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;
}
(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(() => { React.useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
if (searchQuery === '' || !claimId) { if (searchQuery === '' || !claimId) {
@ -142,6 +269,8 @@ function ChannelContent(props: Props) {
{!channelIsMine && claimsInChannel > 0 && <HiddenNsfwClaims uri={uri} />} {!channelIsMine && claimsInChannel > 0 && <HiddenNsfwClaims uri={uri} />}
<Ads type="homepage" />
<ClaimListDiscover <ClaimListDiscover
hasSource hasSource
defaultFreshness={CS.FRESH_ALL} defaultFreshness={CS.FRESH_ALL}

View file

@ -299,7 +299,7 @@ function DiscoverPage(props: Props) {
// $FlowFixMe // $FlowFixMe
document.head.appendChild(styleSheet); document.head.appendChild(styleSheet);
window.dispatchEvent(new CustomEvent('scroll')) window.dispatchEvent(new CustomEvent('scroll'));
} }
} }
checkFlag(); checkFlag();
@ -308,7 +308,6 @@ function DiscoverPage(props: Props) {
})(); })();
}, []); }, []);
// Sync liveSection --> liveSectionStore // Sync liveSection --> liveSectionStore
React.useEffect(() => { React.useEffect(() => {
if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) { if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) {