Stick images inside of CWs

app/javascript/mastodon/components/status.js

@@ -225,11 +225,11 @@ 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} />;
         mediaType = <i className='fa fa-fw fa-video-camera' aria-hidden='true' />;
-        if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
+        if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0)) 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} />;
         mediaType = status.get('media_attachments').size > 1 ? <i className='fa fa-fw fa-th-large' aria-hidden='true' /> : <i className='fa fa-fw fa-picture-o' aria-hidden='true' />;
-        if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
+        if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0)) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
       }
     }
 
@@ -265,10 +265,12 @@ class StatusUnextended extends ImmutablePureComponent {
 
         </div>
 
-        <StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight} />
+        <StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}>
 
           {isCollapsed ? null : media}
 
+        </StatusContent>
+
         {isCollapsed ? null : <StatusActionBar status={status} account={account} {...other} />}
       </div>
     );

app/javascript/mastodon/components/status_content.js

@@ -19,6 +19,7 @@ export default class StatusContent extends React.PureComponent {
     onExpandedToggle: PropTypes.func,
     onHeightUpdate: PropTypes.func,
     onClick: PropTypes.func,
+    children: PropTypes.element,
   };
 
   state = {
@@ -107,7 +108,7 @@ export default class StatusContent extends React.PureComponent {
   }
 
   render () {
-    const { status } = this.props;
+    const { status, children } = this.props;
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
 
@@ -144,7 +145,14 @@ export default class StatusContent extends React.PureComponent {
 
           {mentionsPlaceholder}
 
-          <div className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} />
+          <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
+
+            <div style={directionStyle} dangerouslySetInnerHTML={content} />
+
+            {children}
+
+          </div>
+
         </div>
       );
     } else if (this.props.onClick) {
@@ -155,8 +163,10 @@ export default class StatusContent extends React.PureComponent {
           style={directionStyle}
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
-          dangerouslySetInnerHTML={content}
+        >
-        />
+          <div dangerouslySetInnerHTML={content} />
+          {children}
+        </div>
       );
     } else {
       return (
@@ -164,8 +174,12 @@ export default class StatusContent extends React.PureComponent {
           ref={this.setRef}
           className='status__content'
           style={directionStyle}
-          dangerouslySetInnerHTML={content}
+          onMouseDown={this.handleMouseDown}
-        />
+          onMouseUp={this.handleMouseUp}
+        >
+          <div dangerouslySetInnerHTML={content} />
+          {children}
+        </div>
       );
     }
   }

app/javascript/styles/components.scss

@@ -460,8 +460,7 @@
   color: $primary-text-color;
   word-wrap: break-word;
   font-weight: 400;
-  overflow: hidden;
+  overflow: visible;
-  text-overflow: ellipsis;
   white-space: pre-wrap;
 
   .emojione {
@@ -504,10 +503,10 @@
     }
   }
 
-  .status__content__text {
+  .status__content__spoiler {
     display: none;
 
-    &.status__content__text--visible {
+    &.status__content__spoiler--visible {
       display: block;
     }
   }
@@ -517,23 +516,20 @@
   display: inline-block;
   border-radius: 2px;
   background: lighten($ui-base-color, 30%);
-  border: 1px lighten($ui-base-color, 30%) solid;
+  border: none;
   color: lighten($ui-base-color, 8%);
   font-weight: 500;
   font-size: 11px;
   padding: 0 5px;
   text-transform: uppercase;
-  line-height: 18px;
+  line-height: inherit;
   cursor: pointer;
+  vertical-align: bottom;
 
     &:hover {
       background: lighten($ui-base-color, 33%);
       text-decoration: none;
     }
-
-  .status-collapsed & {
-    vertical-align: bottom;
-  }
 }
 
 .status__prepend-icon-wrapper {
@@ -621,6 +617,9 @@
 
     .status__content {
       height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }