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 { } 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

View file

@ -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);

View file

@ -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"