Add ads to category pages (#451)
This commit is contained in:
infinite-persistence
commit
2a4a84197a
2 changed files with 264 additions and 0 deletions
|
|
@ -76,6 +76,139 @@ 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;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// 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(() => {
|
React.useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
if (searchQuery === '' || !claimId) {
|
if (searchQuery === '' || !claimId) {
|
||||||
|
|
@ -142,6 +275,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}
|
||||||
|
|
|
||||||
|
|
@ -181,6 +181,133 @@ 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);
|
||||||
|
|
||||||
|
window.dispatchEvent(new CustomEvent('scroll'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
checkFlag();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, []);
|
||||||
|
|
||||||
// Sync liveSection --> liveSectionStore
|
// Sync liveSection --> liveSectionStore
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) {
|
if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) {
|
||||||
|
|
@ -230,6 +357,8 @@ function DiscoverPage(props: Props) {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<Ads type="homepage" />
|
||||||
|
|
||||||
<ClaimListDiscover
|
<ClaimListDiscover
|
||||||
prefixUris={useDualList ? undefined : livestreamUris}
|
prefixUris={useDualList ? undefined : livestreamUris}
|
||||||
pins={useDualList ? undefined : getPins(dynamicRouteProps)}
|
pins={useDualList ? undefined : getPins(dynamicRouteProps)}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue