AttachmentThumbs: click to expand post

app/soapbox/components/attachment_thumbs.js

@@ -13,6 +13,7 @@ class AttachmentThumbs extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     media: ImmutablePropTypes.list.isRequired,
+    onClick: PropTypes.func,
   };
 
   renderLoading() {
@@ -24,19 +25,24 @@ class AttachmentThumbs extends ImmutablePureComponent {
   }
 
   render() {
-    const { media } = this.props;
+    const { media, onClick } = this.props;
 
     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>
     );
   }
 

app/soapbox/components/status.js

@@ -389,7 +389,7 @@ class Status extends ImmutablePureComponent {
     if (size > 0) {
       if (this.props.muted) {
         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') {
         const video = status.getIn(['media_attachments', 0]);

app/styles/components/status.scss

@@ -714,3 +714,18 @@ a.status-card.compact:hover {
     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;
+  }
+}