|
|
|
@ -9,6 +9,7 @@ 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';
|
|
|
|
|
import LoadingIndicator from 'soapbox/components/loading_indicator';
|
|
|
|
|
|
|
|
|
|
class ProfileMediaPanel extends ImmutablePureComponent {
|
|
|
|
|
|
|
|
|
@ -18,6 +19,10 @@ class ProfileMediaPanel extends ImmutablePureComponent {
|
|
|
|
|
dispatch: PropTypes.func.isRequired,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
state = {
|
|
|
|
|
isLoading: true,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleOpenMedia = attachment => {
|
|
|
|
|
if (attachment.get('type') === 'video') {
|
|
|
|
|
this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
|
|
|
|
@ -29,17 +34,64 @@ class ProfileMediaPanel extends ImmutablePureComponent {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
fetchMedia = () => {
|
|
|
|
|
const { account } = this.props;
|
|
|
|
|
const accountId = account.get('id');
|
|
|
|
|
this.props.dispatch(expandAccountMediaTimeline(accountId));
|
|
|
|
|
|
|
|
|
|
if (account) {
|
|
|
|
|
const accountId = account.get('id');
|
|
|
|
|
|
|
|
|
|
this.props.dispatch(expandAccountMediaTimeline(accountId))
|
|
|
|
|
.then(() => this.setState({ isLoading: false }))
|
|
|
|
|
.catch(() => {});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { attachments, account } = this.props;
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
this.fetchMedia();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
|
const oldId = prevProps.account && prevProps.account.get('id');
|
|
|
|
|
const newId = this.props.account && this.props.account.get('id');
|
|
|
|
|
|
|
|
|
|
if (newId !== oldId) {
|
|
|
|
|
this.setState({ isLoading: true });
|
|
|
|
|
this.fetchMedia();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderAttachments() {
|
|
|
|
|
const { attachments } = this.props;
|
|
|
|
|
const publicAttachments = attachments.filter(attachment => attachment.getIn(['status', 'visibility']) === 'public');
|
|
|
|
|
const nineAttachments = publicAttachments.slice(0, 9);
|
|
|
|
|
|
|
|
|
|
if (!nineAttachments.isEmpty()) {
|
|
|
|
|
return (
|
|
|
|
|
<div className='media-panel__list'>
|
|
|
|
|
{nineAttachments.map((attachment, index) => (
|
|
|
|
|
<MediaItem
|
|
|
|
|
key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
|
|
|
|
|
attachment={attachment}
|
|
|
|
|
displayWidth={255}
|
|
|
|
|
onOpenMedia={this.handleOpenMedia}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
return (
|
|
|
|
|
<div className='media-panel__empty'>
|
|
|
|
|
<FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { account } = this.props;
|
|
|
|
|
const { isLoading } = this.state;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='media-panel'>
|
|
|
|
|
<div className='media-panel-header'>
|
|
|
|
@ -50,16 +102,11 @@ class ProfileMediaPanel extends ImmutablePureComponent {
|
|
|
|
|
</div>
|
|
|
|
|
{account &&
|
|
|
|
|
<div className='media-panel__content'>
|
|
|
|
|
<div className='media-panel__list'>
|
|
|
|
|
{!nineAttachments.isEmpty() && nineAttachments.map((attachment, index) => (
|
|
|
|
|
<MediaItem
|
|
|
|
|
key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
|
|
|
|
|
attachment={attachment}
|
|
|
|
|
displayWidth={255}
|
|
|
|
|
onOpenMedia={this.handleOpenMedia}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
{isLoading ? (
|
|
|
|
|
<LoadingIndicator />
|
|
|
|
|
) : (
|
|
|
|
|
this.renderAttachments()
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|