Many improvements to images in collapsed toots

- Now works on detailed and static pages
- Fixed bug with nested CW / Sensitive Media
- Now apparent which toots contain media

app/javascript/mastodon/components/status.js

@@ -152,6 +152,7 @@ export default class Status extends ImmutablePureComponent {
 
   render () {
     let media = null;
+    let mediaIcon = null;
     let statusAvatar;
 
     // Exclude intersectionObserverWrapper from `other` variable
@@ -198,8 +199,10 @@ export default class Status 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} />;
+        mediaIcon = 'video-camera';
       } else {
         media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
+        mediaIcon = 'picture-o';
       }
     }
 
@@ -223,9 +226,11 @@ export default class Status extends ImmutablePureComponent {
           </a>
         </div>
 
-        <StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight} />
+        <StatusContent status={status} mediaIcon={mediaIcon} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight}>
 
-        {media}
+          {media}
+
+        </StatusContent>
 
         <StatusActionBar {...this.props} />
       </div>

app/javascript/mastodon/components/status_content.js

@@ -19,6 +19,8 @@ export default class StatusContent extends React.PureComponent {
     onExpandedToggle: PropTypes.func,
     onHeightUpdate: PropTypes.func,
     onClick: PropTypes.func,
+    mediaIcon: PropTypes.string,
+    children: PropTypes.element,
   };
 
   state = {
@@ -107,7 +109,7 @@ export default class StatusContent extends React.PureComponent {
   }
 
   render () {
-    const { status } = this.props;
+    const { status, children, mediaIcon } = this.props;
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
 
@@ -128,15 +130,19 @@ export default class StatusContent extends React.PureComponent {
         </Permalink>
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
-      const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
+      const toggleText = hidden ? [<FormattedMessage id='status.show_more' defaultMessage='Show more' key='0' />, mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`} aria-hidden='true' key='1' /> : null] : [<FormattedMessage id='status.show_less' defaultMessage='Show less' key='0' />];
 
       if (hidden) {
         mentionsPlaceholder = <div>{mentionLinks}</div>;
       }
 
       return (
-        <div className='status__content status__content--with-action' ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
-          <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
+        <div className='status__content status__content--with-action' ref={this.setRef}>
+          <p
+            style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+          >
             <span dangerouslySetInnerHTML={spoilerContent} />
             {' '}
             <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>{toggleText}</button>
@@ -144,7 +150,15 @@ 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}
+              onMouseDown={this.handleMouseDown}
+              onMouseUp={this.handleMouseUp}
+              dangerouslySetInnerHTML={content}
+            />
+            {children}
+          </div>
         </div>
       );
     } else if (this.props.onClick) {
@@ -153,10 +167,14 @@ export default class StatusContent extends React.PureComponent {
           ref={this.setRef}
           className='status__content status__content--with-action'
           style={directionStyle}
-          onMouseDown={this.handleMouseDown}
-          onMouseUp={this.handleMouseUp}
-          dangerouslySetInnerHTML={content}
-        />
+        >
+          <div
+            onMouseDown={this.handleMouseDown}
+            onMouseUp={this.handleMouseUp}
+            dangerouslySetInnerHTML={content}
+          />
+          {children}
+        </div>
       );
     } else {
       return (
@@ -164,8 +182,10 @@ export default class StatusContent extends React.PureComponent {
           ref={this.setRef}
           className='status__content'
           style={directionStyle}
-          dangerouslySetInnerHTML={content}
-        />
+        >
+          <div dangerouslySetInnerHTML={content} />
+          {children}
+        </div>
       );
     }
   }

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -38,6 +38,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
     const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
 
     let media           = '';
+    let mediaIcon       = null;
     let applicationLink = '';
 
     if (status.get('media_attachments').size > 0) {
@@ -45,12 +46,12 @@ export default class DetailedStatus extends ImmutablePureComponent {
         media = <AttachmentList media={status.get('media_attachments')} />;
       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
         media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} onOpenVideo={this.props.onOpenVideo} autoplay />;
+        mediaIcon = 'video-camera';
       } else {
         media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
+        mediaIcon = 'picture-o';
       }
-    } else if (status.get('spoiler_text').length === 0) {
-      media = <CardContainer statusId={status.get('id')} />;
-    }
+    } else media = <CardContainer statusId={status.get('id')} />;
 
     if (status.get('application')) {
       applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>;
@@ -63,9 +64,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <DisplayName account={status.get('account')} />
         </a>
 
-        <StatusContent status={status} />
-
-        {media}
+        <StatusContent status={status} mediaIcon={mediaIcon}>{media}</StatusContent>
 
         <div className='detailed-status__meta'>
           <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>

app/javascript/styles/components.scss

@@ -427,7 +427,7 @@
   line-height: 20px;
   word-wrap: break-word;
   font-weight: 400;
-  overflow: hidden;
+  overflow: visible;
   white-space: pre-wrap;
 
   .emojione {
@@ -470,19 +470,10 @@
     }
   }
 
-  .status__content__spoiler-link {
-    background: lighten($ui-base-color, 30%);
-
-    &:hover {
-      background: lighten($ui-base-color, 33%);
-      text-decoration: none;
-    }
-  }
-
-  .status__content__text {
+  .status__content__spoiler {
     display: none;
 
-    &.status__content__text--visible {
+    &.status__content__spoiler--visible {
       display: block;
     }
   }
@@ -491,7 +482,7 @@
 .status__content__spoiler-link {
   display: inline-block;
   border-radius: 2px;
-  background: transparent;
+  background: lighten($ui-base-color, 30%);
   border: 0;
   color: lighten($ui-base-color, 8%);
   font-weight: 500;
@@ -500,6 +491,21 @@
   text-transform: uppercase;
   line-height: inherit;
   cursor: pointer;
+  vertical-align: bottom;
+
+  &:hover {
+    background: lighten($ui-base-color, 33%);
+    text-decoration: none;
+  }
+
+  .status__content__spoiler-icon {
+    display: inline-block;
+    margin: 0 0 0 5px;
+    border-left: 1px solid currentColor;
+    padding: 0 0 0 4px;
+    font-size: 16px;
+    vertical-align: -2px;
+  }
 }
 
 .status__prepend-icon-wrapper {

app/views/stream_entries/_content_spoiler.html.haml

@@ -1,3 +1,3 @@
-.media-spoiler
+.media-spoiler><
   %span= t('stream_entries.sensitive_content')
   %span= t('stream_entries.click_to_show')

app/views/stream_entries/_detailed_status.html.haml

@@ -12,21 +12,22 @@
       %p{ style: 'margin-bottom: 0' }<
         %span.p-summary> #{status.spoiler_text}&nbsp;
         %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more')
-    .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status)
+    .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }<
+      = Formatter.instance.format(status)
 
-  - unless status.media_attachments.empty?
-    - if status.media_attachments.first.video?
-      .video-player
-        - if status.sensitive?
-          = render partial: 'stream_entries/content_spoiler'
-        %video.u-video{ src: status.media_attachments.first.file.url(:original), loop: true }
-    - else
-      .detailed-status__attachments
-        - if status.sensitive?
-          = render partial: 'stream_entries/content_spoiler'
-        .status__attachments__inner
-          - status.media_attachments.each do |media|
-            = render partial: 'stream_entries/media', locals: { media: media }
+      - unless status.media_attachments.empty?
+        - if status.media_attachments.first.video?
+          .video-player><
+            - if status.sensitive?
+              = render partial: 'stream_entries/content_spoiler'
+            %video.u-video{ src: status.media_attachments.first.file.url(:original), loop: true }
+        - else
+          .detailed-status__attachments><
+            - if status.sensitive?
+              = render partial: 'stream_entries/content_spoiler'
+            .status__attachments__inner<
+              - status.media_attachments.each do |media|
+                = render partial: 'stream_entries/media', locals: { media: media }
 
   .detailed-status__meta
     %data.dt-published{ value: status.created_at.to_time.iso8601 }

app/views/stream_entries/_media.html.haml

@@ -1,4 +1,4 @@
-.media-item
+.media-item><
   = link_to media.remote_url.blank? ? media.file.url(:original) : media.remote_url, style: media.image? ? "background-image: url(#{media.file.url(:original)})" : '', target: '_blank', rel: 'noopener', class: "u-#{media.video? || media.gifv? ? 'video' : 'photo'}" do
     - unless media.image?
       %video{ src: media.file.url(:original), autoplay: true, loop: true }/

app/views/stream_entries/_simple_status.html.haml

@@ -18,19 +18,20 @@
       %p{ style: 'margin-bottom: 0' }<
         %span.p-summary> #{status.spoiler_text}&nbsp;
         %a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more')
-    .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status)
+    .e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }<
+      = Formatter.instance.format(status)
 
-  - unless status.media_attachments.empty?
-    .status__attachments
-      - if status.sensitive?
-        = render partial: 'stream_entries/content_spoiler'
-      - if status.media_attachments.first.video?
-        .status__attachments__inner
-          .video-item
-            = link_to (status.media_attachments.first.remote_url.blank? ? status.media_attachments.first.file.url(:original) : status.media_attachments.first.remote_url), style: "background-image: url(#{status.media_attachments.first.file.url(:small)})", target: '_blank', rel: 'noopener', class: 'u-video' do
-              .video-item__play
-                = fa_icon('play')
-      - else
-        .status__attachments__inner
-          - status.media_attachments.each do |media|
-            = render partial: 'stream_entries/media', locals: { media: media }
+      - unless status.media_attachments.empty?
+        .status__attachments><
+          - if status.sensitive?
+            = render partial: 'stream_entries/content_spoiler'
+          - if status.media_attachments.first.video?
+            .status__attachments__inner<
+              .video-item<
+                = link_to (status.media_attachments.first.remote_url.blank? ? status.media_attachments.first.file.url(:original) : status.media_attachments.first.remote_url), style: "background-image: url(#{status.media_attachments.first.file.url(:small)})", target: '_blank', rel: 'noopener', class: 'u-video' do
+                  .video-item__play
+                    = fa_icon('play')
+          - else
+            .status__attachments__inner<
+              - status.media_attachments.each do |media|
+                = render partial: 'stream_entries/media', locals: { media: media }