LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Add ads to category pages (#451)

Browse source
This commit is contained in:
infinite-persistence 2021-12-09 08:32:17 +08:00
commit 2a4a84197a
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 264 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
ui/component/channelContent/view.jsx
View file

@ -76,6 +76,139 @@ 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) {
@ -142,6 +275,8 @@ function ChannelContent(props: Props) {
{!channelIsMine && claimsInChannel > 0 && <HiddenNsfwClaims uri={uri} />}
<Ads type="homepage" />
<ClaimListDiscover
hasSource
defaultFreshness={CS.FRESH_ALL}

129
ui/page/discover/view.jsx
View file

@ -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
React.useEffect(() => {
if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) {
@ -230,6 +357,8 @@ function DiscoverPage(props: Props) {
</>
)}
<Ads type="homepage" />
<ClaimListDiscover
prefixUris={useDualList ? undefined : livestreamUris}
pins={useDualList ? undefined : getPins(dynamicRouteProps)}