moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AttachmentThumbs: click to expand post

This commit is contained in:
Alex Gleason 2021-10-09 12:33:08 -05:00
parent 17f21c4106
commit 2608de7af4
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/soapbox/components/attachment_thumbs.js
View File

@ -13,6 +13,7 @@ class AttachmentThumbs extends ImmutablePureComponent {
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
media: ImmutablePropTypes.list.isRequired, media: ImmutablePropTypes.list.isRequired,
onClick: PropTypes.func,
}; };
renderLoading() { renderLoading() {
@ -24,19 +25,24 @@ class AttachmentThumbs extends ImmutablePureComponent {
} }
render() { render() {
const { media } = this.props; const { media, onClick } = this.props;
return ( return (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoading}> <div className='attachment-thumbs'>
{Component => ( <Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
<Component {Component => (
media={media} <Component
onOpenMedia={this.onOpenMedia} media={media}
height={50} onOpenMedia={this.onOpenMedia}
compact height={50}
/> compact
/>
)}
</Bundle>
{onClick && (
<div className='attachment-thumbs__clickable-region' onClick={onClick} />
)} )}
</Bundle> </div>
); );
} }

2
app/soapbox/components/status.js
View File

@ -389,7 +389,7 @@ class Status extends ImmutablePureComponent {
if (size > 0) { if (size > 0) {
if (this.props.muted) { if (this.props.muted) {
media = ( media = (
<AttachmentThumbs media={status.get('media_attachments')} /> <AttachmentThumbs media={status.get('media_attachments')} onClick={this.handleClick} />
); );
} else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') { } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
const video = status.getIn(['media_attachments', 0]); const video = status.getIn(['media_attachments', 0]);

15
app/styles/components/status.scss
View File

@ -714,3 +714,18 @@ a.status-card.compact:hover {
padding: 15px 0 10px; padding: 15px 0 10px;
} }
} }
.attachment-thumbs {
position: relative;
&__clickable-region {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}