use second card on small screens and dont load script if authenticated (#406)
This commit is contained in:
parent
935eaa6edb
commit
6d3ec149b3
3 changed files with 19 additions and 7 deletions
|
@ -149,11 +149,21 @@ function HomePage(props: Props) {
|
||||||
} else {
|
} else {
|
||||||
// find the last fully visible card
|
// find the last fully visible card
|
||||||
let lastCard;
|
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) {
|
for (const card of cards) {
|
||||||
const isFullyVisible = isScrolledIntoView(card);
|
const isFullyVisible = isScrolledIntoView(card);
|
||||||
if (!isFullyVisible) break;
|
if (!isFullyVisible) break;
|
||||||
lastCard = card;
|
lastCard = card;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// clone the last card
|
// clone the last card
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectTheme } from 'redux/selectors/settings';
|
import { selectTheme } from 'redux/selectors/settings';
|
||||||
import { makeSelectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
|
import { makeSelectClaimForUri, selectClaimIsNsfwForUri } from 'redux/selectors/claims';
|
||||||
|
import { selectUserVerifiedEmail } from 'redux/selectors/user';
|
||||||
import Ads from './view';
|
import Ads from './view';
|
||||||
|
|
||||||
const select = (state, props) => ({
|
const select = (state, props) => ({
|
||||||
theme: selectTheme(state),
|
theme: selectTheme(state),
|
||||||
claim: makeSelectClaimForUri(props.uri)(state),
|
claim: makeSelectClaimForUri(props.uri)(state),
|
||||||
isMature: selectClaimIsNsfwForUri(state, props.uri),
|
isMature: selectClaimIsNsfwForUri(state, props.uri),
|
||||||
|
authenticated: selectUserVerifiedEmail(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select)(Ads);
|
export default connect(select)(Ads);
|
||||||
|
|
|
@ -29,6 +29,7 @@ type Props = {
|
||||||
small: boolean,
|
small: boolean,
|
||||||
claim: Claim,
|
claim: Claim,
|
||||||
isMature: boolean,
|
isMature: boolean,
|
||||||
|
authenticated: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
function Ads(props: Props) {
|
function Ads(props: Props) {
|
||||||
|
@ -36,6 +37,7 @@ function Ads(props: Props) {
|
||||||
location: { pathname },
|
location: { pathname },
|
||||||
type = 'video',
|
type = 'video',
|
||||||
small,
|
small,
|
||||||
|
authenticated,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
// load ad and tags here
|
// load ad and tags here
|
||||||
|
@ -56,7 +58,7 @@ function Ads(props: Props) {
|
||||||
|
|
||||||
// add script to DOM
|
// add script to DOM
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (SHOW_ADS) {
|
if (SHOW_ADS && !authenticated) {
|
||||||
let script;
|
let script;
|
||||||
try {
|
try {
|
||||||
script = document.createElement('script');
|
script = document.createElement('script');
|
||||||
|
@ -70,8 +72,6 @@ function Ads(props: Props) {
|
||||||
};
|
};
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: remove the script when it exists?
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// display to say "sign up to not see these"
|
// display to say "sign up to not see these"
|
||||||
|
|
Loading…
Add table
Reference in a new issue