Merge remote-tracking branch 'parent/main' into kbtopic-fix-security
This commit is contained in:
KMY
commit
9a5f80c41d
36 changed files with 609 additions and 179 deletions
|
|
@ -1,46 +0,0 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import background from '@/images/friends-cropped.png';
|
||||
import { DismissableBanner } from 'mastodon/components/dismissable_banner';
|
||||
|
||||
export const ExplorePrompt = () => (
|
||||
<DismissableBanner id='home.explore_prompt'>
|
||||
<img
|
||||
src={background}
|
||||
alt=''
|
||||
className='dismissable-banner__background-image'
|
||||
/>
|
||||
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id='home.explore_prompt.title'
|
||||
defaultMessage='This is your home base within Mastodon.'
|
||||
/>
|
||||
</h1>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='home.explore_prompt.body'
|
||||
defaultMessage="Your home feed will have a mix of posts from the hashtags you've chosen to follow, the people you've chosen to follow, and the posts they boost. If that feels too quiet, you may want to:"
|
||||
/>
|
||||
</p>
|
||||
|
||||
<div className='dismissable-banner__message__wrapper'>
|
||||
<div className='dismissable-banner__message__actions'>
|
||||
<Link to='/explore' className='button'>
|
||||
<FormattedMessage
|
||||
id='home.actions.go_to_explore'
|
||||
defaultMessage="See what's trending"
|
||||
/>
|
||||
</Link>
|
||||
<Link to='/explore/suggestions' className='button button-tertiary'>
|
||||
<FormattedMessage
|
||||
id='home.actions.go_to_suggestions'
|
||||
defaultMessage='Find people to follow'
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</DismissableBanner>
|
||||
);
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { useEffect, useCallback, useRef, useState } from 'react';
|
||||
|
||||
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
|
||||
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
|
||||
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||
import InfoIcon from '@/material-icons/400-24px/info.svg?react';
|
||||
import { followAccount, unfollowAccount } from 'mastodon/actions/accounts';
|
||||
import { changeSetting } from 'mastodon/actions/settings';
|
||||
import { fetchSuggestions, dismissSuggestion } from 'mastodon/actions/suggestions';
|
||||
import { Avatar } from 'mastodon/components/avatar';
|
||||
import { Button } from 'mastodon/components/button';
|
||||
import { DisplayName } from 'mastodon/components/display_name';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import { IconButton } from 'mastodon/components/icon_button';
|
||||
import { VerifiedBadge } from 'mastodon/components/verified_badge';
|
||||
|
||||
const messages = defineMessages({
|
||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||
previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
|
||||
next: { id: 'lightbox.next', defaultMessage: 'Next' },
|
||||
dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" },
|
||||
});
|
||||
|
||||
const Source = ({ id }) => {
|
||||
let label;
|
||||
|
||||
switch (id) {
|
||||
case 'friends_of_friends':
|
||||
case 'similar_to_recently_followed':
|
||||
label = <FormattedMessage id='follow_suggestions.personalized_suggestion' defaultMessage='Personalized suggestion' />;
|
||||
break;
|
||||
case 'featured':
|
||||
label = <FormattedMessage id='follow_suggestions.curated_suggestion' defaultMessage="Editors' Choice" />;
|
||||
break;
|
||||
case 'most_followed':
|
||||
case 'most_interactions':
|
||||
label = <FormattedMessage id='follow_suggestions.popular_suggestion' defaultMessage='Popular suggestion' />;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='inline-follow-suggestions__body__scrollable__card__text-stack__source'>
|
||||
<Icon icon={InfoIcon} />
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Source.propTypes = {
|
||||
id: PropTypes.oneOf(['friends_of_friends', 'similar_to_recently_followed', 'featured', 'most_followed', 'most_interactions']),
|
||||
};
|
||||
|
||||
const Card = ({ id, source }) => {
|
||||
const intl = useIntl();
|
||||
const account = useSelector(state => state.getIn(['accounts', id]));
|
||||
const relationship = useSelector(state => state.getIn(['relationships', id]));
|
||||
const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
|
||||
const dispatch = useDispatch();
|
||||
const following = relationship?.get('following') ?? relationship?.get('requested');
|
||||
|
||||
const handleFollow = useCallback(() => {
|
||||
if (following) {
|
||||
dispatch(unfollowAccount(id));
|
||||
} else {
|
||||
dispatch(followAccount(id));
|
||||
}
|
||||
}, [id, following, dispatch]);
|
||||
|
||||
const handleDismiss = useCallback(() => {
|
||||
dispatch(dismissSuggestion(id));
|
||||
}, [id, dispatch]);
|
||||
|
||||
return (
|
||||
<div className='inline-follow-suggestions__body__scrollable__card'>
|
||||
<IconButton iconComponent={CloseIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
|
||||
|
||||
<div className='inline-follow-suggestions__body__scrollable__card__avatar'>
|
||||
<Link to={`/@${account.get('acct')}`}><Avatar account={account} size={72} /></Link>
|
||||
</div>
|
||||
|
||||
<div className='inline-follow-suggestions__body__scrollable__card__text-stack'>
|
||||
<Link to={`/@${account.get('acct')}`}><DisplayName account={account} /></Link>
|
||||
{firstVerifiedField ? <VerifiedBadge link={firstVerifiedField.get('value')} /> : <Source id={source.get(0)} />}
|
||||
</div>
|
||||
|
||||
<Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={handleFollow} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Card.propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
source: ImmutablePropTypes.list,
|
||||
};
|
||||
|
||||
const DISMISSIBLE_ID = 'home/follow-suggestions';
|
||||
|
||||
export const InlineFollowSuggestions = ({ hidden }) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useDispatch();
|
||||
const suggestions = useSelector(state => state.getIn(['suggestions', 'items']));
|
||||
const isLoading = useSelector(state => state.getIn(['suggestions', 'isLoading']));
|
||||
const dismissed = useSelector(state => state.getIn(['settings', 'dismissed_banners', DISMISSIBLE_ID]));
|
||||
const bodyRef = useRef();
|
||||
const [canScrollLeft, setCanScrollLeft] = useState(false);
|
||||
const [canScrollRight, setCanScrollRight] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchSuggestions());
|
||||
}, [dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!bodyRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCanScrollLeft(bodyRef.current.scrollLeft > 0);
|
||||
setCanScrollRight((bodyRef.current.scrollLeft + bodyRef.current.clientWidth) < bodyRef.current.scrollWidth);
|
||||
}, [setCanScrollRight, setCanScrollLeft, bodyRef, suggestions]);
|
||||
|
||||
const handleLeftNav = useCallback(() => {
|
||||
bodyRef.current.scrollLeft -= 200;
|
||||
}, [bodyRef]);
|
||||
|
||||
const handleRightNav = useCallback(() => {
|
||||
bodyRef.current.scrollLeft += 200;
|
||||
}, [bodyRef]);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (!bodyRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCanScrollLeft(bodyRef.current.scrollLeft > 0);
|
||||
setCanScrollRight((bodyRef.current.scrollLeft + bodyRef.current.clientWidth) < bodyRef.current.scrollWidth);
|
||||
}, [setCanScrollRight, setCanScrollLeft, bodyRef]);
|
||||
|
||||
const handleDismiss = useCallback(() => {
|
||||
dispatch(changeSetting(['dismissed_banners', DISMISSIBLE_ID], true));
|
||||
}, [dispatch]);
|
||||
|
||||
if (dismissed || (!isLoading && suggestions.isEmpty())) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (hidden) {
|
||||
return (
|
||||
<div className='inline-follow-suggestions' />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='inline-follow-suggestions'>
|
||||
<div className='inline-follow-suggestions__header'>
|
||||
<h3><FormattedMessage id='follow_suggestions.who_to_follow' defaultMessage='Who to follow' /></h3>
|
||||
|
||||
<div className='inline-follow-suggestions__header__actions'>
|
||||
<button className='link-button' onClick={handleDismiss}><FormattedMessage id='follow_suggestions.dismiss' defaultMessage="Don't show again" /></button>
|
||||
<Link to='/explore/suggestions' className='link-button'><FormattedMessage id='follow_suggestions.view_all' defaultMessage='View all' /></Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='inline-follow-suggestions__body'>
|
||||
<div className='inline-follow-suggestions__body__scrollable' ref={bodyRef} onScroll={handleScroll}>
|
||||
{suggestions.map(suggestion => (
|
||||
<Card
|
||||
key={suggestion.get('account')}
|
||||
id={suggestion.get('account')}
|
||||
source={suggestion.get('source')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{canScrollLeft && (
|
||||
<button className='inline-follow-suggestions__body__scroll-button left' onClick={handleLeftNav} aria-label={intl.formatMessage(messages.previous)}>
|
||||
<div className='inline-follow-suggestions__body__scroll-button__icon'><Icon icon={ChevronLeftIcon} /></div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{canScrollRight && (
|
||||
<button className='inline-follow-suggestions__body__scroll-button right' onClick={handleRightNav} aria-label={intl.formatMessage(messages.next)}>
|
||||
<div className='inline-follow-suggestions__body__scroll-button__icon'><Icon icon={ChevronRightIcon} /></div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
InlineFollowSuggestions.propTypes = {
|
||||
hidden: PropTypes.bool,
|
||||
};
|
||||
|
|
@ -6,8 +6,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|||
import classNames from 'classnames';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
|
||||
|
|
@ -16,7 +14,7 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/an
|
|||
import { IconWithBadge } from 'mastodon/components/icon_with_badge';
|
||||
import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
|
||||
import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container';
|
||||
import { me, criticalUpdatesPending } from 'mastodon/initial_state';
|
||||
import { criticalUpdatesPending } from 'mastodon/initial_state';
|
||||
|
||||
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
|
||||
import { expandHomeTimeline } from '../../actions/timelines';
|
||||
|
|
@ -26,7 +24,6 @@ import StatusListContainer from '../ui/containers/status_list_container';
|
|||
|
||||
import { ColumnSettings } from './components/column_settings';
|
||||
import { CriticalUpdateBanner } from './components/critical_update_banner';
|
||||
import { ExplorePrompt } from './components/explore_prompt';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.home', defaultMessage: 'Home' },
|
||||
|
|
@ -34,51 +31,12 @@ const messages = defineMessages({
|
|||
hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' },
|
||||
});
|
||||
|
||||
const getHomeFeedSpeed = createSelector([
|
||||
state => state.getIn(['timelines', 'home', 'items'], ImmutableList()),
|
||||
state => state.getIn(['timelines', 'home', 'pendingItems'], ImmutableList()),
|
||||
state => state.get('statuses'),
|
||||
], (statusIds, pendingStatusIds, statusMap) => {
|
||||
const recentStatusIds = pendingStatusIds.concat(statusIds);
|
||||
const statuses = recentStatusIds.filter(id => id !== null).map(id => statusMap.get(id)).filter(status => status?.get('account') !== me).take(20);
|
||||
|
||||
if (statuses.isEmpty()) {
|
||||
return {
|
||||
gap: 0,
|
||||
newest: new Date(0),
|
||||
};
|
||||
}
|
||||
|
||||
const datetimes = statuses.map(status => status.get('created_at', 0));
|
||||
const oldest = new Date(datetimes.min());
|
||||
const newest = new Date(datetimes.max());
|
||||
const averageGap = (newest - oldest) / (1000 * (statuses.size + 1)); // Average gap between posts on first page in seconds
|
||||
|
||||
return {
|
||||
gap: averageGap,
|
||||
newest,
|
||||
};
|
||||
});
|
||||
|
||||
const homeTooSlow = createSelector([
|
||||
state => state.getIn(['timelines', 'home', 'isLoading']),
|
||||
state => state.getIn(['timelines', 'home', 'isPartial']),
|
||||
getHomeFeedSpeed,
|
||||
], (isLoading, isPartial, speed) =>
|
||||
!isLoading && !isPartial // Only if the home feed has finished loading
|
||||
&& (
|
||||
(speed.gap > (30 * 60) // If the average gap between posts is more than 30 minutes
|
||||
|| (Date.now() - speed.newest) > (1000 * 3600)) // If the most recent post is from over an hour ago
|
||||
)
|
||||
);
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
|
||||
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
|
||||
hasAnnouncements: !state.getIn(['announcements', 'items']).isEmpty(),
|
||||
unreadAnnouncements: state.getIn(['announcements', 'items']).count(item => !item.get('read')),
|
||||
showAnnouncements: state.getIn(['announcements', 'show']),
|
||||
tooSlow: homeTooSlow(state),
|
||||
});
|
||||
|
||||
class HomeTimeline extends PureComponent {
|
||||
|
|
@ -97,7 +55,6 @@ class HomeTimeline extends PureComponent {
|
|||
hasAnnouncements: PropTypes.bool,
|
||||
unreadAnnouncements: PropTypes.number,
|
||||
showAnnouncements: PropTypes.bool,
|
||||
tooSlow: PropTypes.bool,
|
||||
};
|
||||
|
||||
handlePin = () => {
|
||||
|
|
@ -167,7 +124,7 @@ class HomeTimeline extends PureComponent {
|
|||
};
|
||||
|
||||
render () {
|
||||
const { intl, hasUnread, columnId, multiColumn, tooSlow, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props;
|
||||
const { intl, hasUnread, columnId, multiColumn, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props;
|
||||
const pinned = !!columnId;
|
||||
const { signedIn } = this.context.identity;
|
||||
const banners = [];
|
||||
|
|
@ -192,10 +149,6 @@ class HomeTimeline extends PureComponent {
|
|||
banners.push(<CriticalUpdateBanner key='critical-update-banner' />);
|
||||
}
|
||||
|
||||
if (tooSlow) {
|
||||
banners.push(<ExplorePrompt key='explore-prompt' />);
|
||||
}
|
||||
|
||||
return (
|
||||
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
|
||||
<ColumnHeader
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const makeGetStatusIds = (pending = false) => createSelector([
|
|||
(state) => state.get('statuses'),
|
||||
], (columnSettings, statusIds, statuses) => {
|
||||
return statusIds.filter(id => {
|
||||
if (id === null) return true;
|
||||
if (id === null || id === 'inline-follow-suggestions') return true;
|
||||
|
||||
const statusForId = statuses.get(id);
|
||||
let showStatus = true;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue