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

Exclude outbrain in certain pages

Browse source 
I don't think these pages should be serving ads.
This commit is contained in:
infinite-persistence 2022-04-05 20:28:51 +08:00 committed by Thomas Zarebczan
parent f7a6354399
commit e68bba1dc6
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/app/view.jsx
View file

@ -64,7 +64,7 @@ type Props = {
user: ?{ id: string, has_verified_email: boolean, is_reward_approved: boolean }, user: ?{ id: string, has_verified_email: boolean, is_reward_approved: boolean },
locale: ?LocaleInfo, locale: ?LocaleInfo,
location: { pathname: string, hash: string, search: string }, location: { pathname: string, hash: string, search: string },
history: { push: (string) => void }, history: { push: (string) => void, location: { pathname: string } },
fetchChannelListMine: () => void, fetchChannelListMine: () => void,
fetchCollectionListMine: () => void, fetchCollectionListMine: () => void,
signIn: () => void, signIn: () => void,
@ -469,7 +469,7 @@ function App(props: Props) {
useDegradedPerformance(setLbryTvApiStatus, user); useDegradedPerformance(setLbryTvApiStatus, user);
useAdOutbrain(Boolean(hasPremiumPlus), isAuthenticated); useAdOutbrain(Boolean(hasPremiumPlus), isAuthenticated, history?.location?.pathname);
useEffect(() => { useEffect(() => {
// When language is changed or translations are fetched, we render. // When language is changed or translations are fetched, we render.

24
ui/effects/use-ad-outbrain.js
View file

@ -1,5 +1,6 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import * as PAGES from 'constants/pages';
function inIFrame() { function inIFrame() {
try { try {
@ -9,12 +10,21 @@ function inIFrame() {
} }
} }
const EXCLUDED_PATHS = Object.freeze([`/$/${PAGES.AUTH}`, `/$/${PAGES.AUTH_SIGNIN}`, `/$/${PAGES.AUTH_VERIFY}`]);
const LOAD_AD_DELAY_MS = 3000; // Wait past boot-up and core-vitals period. const LOAD_AD_DELAY_MS = 3000; // Wait past boot-up and core-vitals period.
const OUTBRAIN_CONTAINER_KEY = 'outbrainSizeDiv'; const OUTBRAIN_CONTAINER_KEY = 'outbrainSizeDiv';
let script; let script;
export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated: boolean) { /**
* @param hasPremiumPlus
* @param isAuthenticated
* @param pathname Reminder: the component using this effect must be listening
* to path changes (e.g. useHistory, etc.). This value must not
* come from window.location.pathname, which doesn't spark an
* update.
*/
export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated: boolean, pathname: string) {
// Only look at authentication for now. Eventually, we'll only use 'hasPremiumPlus'. // Only look at authentication for now. Eventually, we'll only use 'hasPremiumPlus'.
// Authenticated will return undefined if not yet populated, so wait and only show // Authenticated will return undefined if not yet populated, so wait and only show
// when returned as false // when returned as false
@ -37,8 +47,12 @@ export default function useAdOutbrain(hasPremiumPlus: boolean, isAuthenticated:
}, [isNotAuthenticated]); }, [isNotAuthenticated]);
React.useEffect(() => { React.useEffect(() => {
if (isAuthenticated && window[OUTBRAIN_CONTAINER_KEY]) { if (window[OUTBRAIN_CONTAINER_KEY]) {
window[OUTBRAIN_CONTAINER_KEY].style.display = 'none'; if (isAuthenticated) {
window[OUTBRAIN_CONTAINER_KEY].style.display = 'none';
} else {
window[OUTBRAIN_CONTAINER_KEY].style.display = EXCLUDED_PATHS.includes(pathname) ? 'none' : '';
}
} }
}, [isAuthenticated]); }, [isAuthenticated, pathname]);
} }