use second card on small screens and dont load script if authenticated (#406)

This commit is contained in:
mayeaux 2021-12-01 15:52:03 +01:00 committed by GitHub
parent 935eaa6edb
commit 6d3ec149b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 7 deletions

View file

@ -149,11 +149,21 @@ function HomePage(props: Props) {
} 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

View file

@ -1,12 +1,14 @@
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';
const select = (state, props) => ({
theme: selectTheme(state),
claim: makeSelectClaimForUri(props.uri)(state),
isMature: selectClaimIsNsfwForUri(state, props.uri),
authenticated: selectUserVerifiedEmail(state),
});
export default connect(select)(Ads);

View file

@ -29,6 +29,7 @@ type Props = {
small: boolean,
claim: Claim,
isMature: boolean,
authenticated: boolean,
};
function Ads(props: Props) {
@ -36,6 +37,7 @@ function Ads(props: Props) {
location: { pathname },
type = 'video',
small,
authenticated,
} = props;
// load ad and tags here
@ -56,7 +58,7 @@ function Ads(props: Props) {
// add script to DOM
useEffect(() => {
if (SHOW_ADS) {
if (SHOW_ADS && !authenticated) {
let script;
try {
script = document.createElement('script');
@ -70,8 +72,6 @@ function Ads(props: Props) {
};
} catch (e) {}
}
// TODO: remove the script when it exists?
}, []);
// display to say "sign up to not see these"