Media previews for collapsed toots

app/javascript/mastodon/components/status.js

@@ -175,6 +175,7 @@ class StatusUnextended extends ImmutablePureComponent {
 
   render () {
     let media = null;
+    let thumb = null;
     let statusAvatar;
 
     // Exclude intersectionObserverWrapper from `other` variable
@@ -221,8 +222,10 @@ class StatusUnextended extends ImmutablePureComponent {
 
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
         media = <VideoPlayer media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />;
+        if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
       } else {
         media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
+        if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
       }
     }
 
@@ -233,7 +236,7 @@ class StatusUnextended extends ImmutablePureComponent {
     }
 
     return (
-      <div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef}>
+      <div className={`status ${this.props.muted ? 'muted' : ''} status-${status.get('visibility')} ${isCollapsed ? 'status-collapsed' : ''}`} data-id={status.get('id')} ref={this.handleRef} style={{ backgroundImage: thumb && isCollapsed ? 'url(' + thumb + ')' : 'none' }}>
         <div className='status__info'>
 
           <IconButton

app/javascript/styles/components.scss

@@ -454,6 +454,7 @@
 
 .status__content,
 .reply-indicator__content {
+  position: relative;
   font-size: 15px;
   line-height: 20px;
   color: $primary-text-color;
@@ -604,6 +605,19 @@
 
   &.status-collapsed {
     height: 48px;
+    background-position: center;
+    background-size: cover;
+
+    &::before {
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    	background-image: linear-gradient(to bottom, transparentize($ui-base-color, .15), transparentize($ui-base-color, .3) 24px, transparentize($ui-base-color, .35));
+      content: "";
+    }
 
     .status__content {
       height: 20px;
@@ -644,6 +658,7 @@
 }
 
 .status__collapse-button {
+  position: relative;
   float: right;
 }
 
@@ -1162,6 +1177,7 @@
 
 .display-name {
   display: block;
+  position: relative;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;