sforkowany z mirror/soapbox
add profile media panel
rodzic
101f519d4b
commit
30983571b1
|
@ -0,0 +1,85 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import { getAccountGallery } from 'soapbox/selectors';
|
||||
import { openModal } from 'soapbox/actions/modal';
|
||||
import { expandAccountMediaTimeline } from '../../../actions/timelines';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import MediaItem from '../../account_gallery/components/media_item';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
class ProfileMediaPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
attachments: ImmutablePropTypes.list,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
width: 255,
|
||||
};
|
||||
|
||||
handleOpenMedia = attachment => {
|
||||
if (attachment.get('type') === 'video') {
|
||||
this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
|
||||
} else {
|
||||
const media = attachment.getIn(['status', 'media_attachments']);
|
||||
const index = media.findIndex(x => x.get('id') === attachment.get('id'));
|
||||
|
||||
this.props.dispatch(openModal('MEDIA', { media, index, status: attachment.get('status'), account: attachment.get('account') }));
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { account } = this.props;
|
||||
const accountId = account.get('id');
|
||||
this.props.dispatch(expandAccountMediaTimeline(accountId));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { attachments } = this.props;
|
||||
const { width } = this.state;
|
||||
const nineAttachments = attachments.slice(0, 9);
|
||||
|
||||
if (attachments.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='media-panel'>
|
||||
<div className='media-panel-header'>
|
||||
<Icon id='camera' className='media-panel-header__icon' />
|
||||
<span className='media-panel-header__label'>
|
||||
<FormattedMessage id='media_panel.title' defaultMessage='Media' />
|
||||
</span>
|
||||
</div>
|
||||
<div className='media-panel__content'>
|
||||
<div className='media-panel__list'>
|
||||
{nineAttachments.map((attachment, index) => (
|
||||
<MediaItem
|
||||
key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
|
||||
attachment={attachment}
|
||||
displayWidth={width}
|
||||
onOpenMedia={this.handleOpenMedia}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
const mapStateToProps = (state, { account }) => ({
|
||||
attachments: getAccountGallery(state, account.get('id')),
|
||||
});
|
||||
|
||||
export default injectIntl(
|
||||
connect(mapStateToProps, null, null, {
|
||||
forwardRef: true,
|
||||
}
|
||||
)(ProfileMediaPanel));
|
|
@ -9,9 +9,11 @@ import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
|
|||
import LinkFooter from '../features/ui/components/link_footer';
|
||||
import SignUpPanel from '../features/ui/components/sign_up_panel';
|
||||
import ProfileInfoPanel from '../features/ui/components/profile_info_panel';
|
||||
import ProfileMediaPanel from '../features/ui/components/profile_media_panel';
|
||||
import { acctFull } from 'soapbox/utils/accounts';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
import { makeGetAccount } from '../selectors';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
const mapStateToProps = (state, { params: { username }, withReplies = false }) => {
|
||||
const accounts = state.getIn(['accounts']);
|
||||
|
@ -48,9 +50,28 @@ class ProfilePage extends ImmutablePureComponent {
|
|||
features: PropTypes.object,
|
||||
};
|
||||
|
||||
state = {
|
||||
isSmallScreen: (window.innerWidth <= 1200),
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('resize', this.handleResize, { passive: true });
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
|
||||
handleResize = debounce(() => {
|
||||
this.setState({ isSmallScreen: (window.innerWidth <= 1200) });
|
||||
}, 5, {
|
||||
trailing: true,
|
||||
});
|
||||
|
||||
render() {
|
||||
const { children, accountId, account, accountUsername, features } = this.props;
|
||||
const bg = account ? account.getIn(['customizations', 'background']) : undefined;
|
||||
const { isSmallScreen } = this.state;
|
||||
|
||||
return (
|
||||
<div className={bg && `page page--customization page--${bg}` || 'page'}>
|
||||
|
@ -68,6 +89,7 @@ class ProfilePage extends ImmutablePureComponent {
|
|||
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<ProfileInfoPanel username={accountUsername} account={account} />
|
||||
{isSmallScreen && account && <ProfileMediaPanel account={account} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -81,6 +103,7 @@ class ProfilePage extends ImmutablePureComponent {
|
|||
<div className='columns-area__panels__pane__inner'>
|
||||
<SignUpPanel />
|
||||
{features.suggestions && <WhoToFollowPanel />}
|
||||
{account && <ProfileMediaPanel account={account} />}
|
||||
<LinkFooter />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -65,6 +65,7 @@
|
|||
@import 'components/theme-toggle';
|
||||
@import 'components/trends';
|
||||
@import 'components/wtf-panel';
|
||||
@import 'components/profile-media-panel';
|
||||
@import 'components/profile-info-panel';
|
||||
@import 'components/setting-toggle';
|
||||
@import 'components/spoiler-button';
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
.media-panel {
|
||||
@include standard-panel-shadow;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
background: var(--foreground-color);
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.media-panel-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px 15px 0;
|
||||
|
||||
&__icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 1 1;
|
||||
color: var(--primary-text-color);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
&__list {
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
Ładowanie…
Reference in New Issue