diff options
| -rw-r--r-- | app/javascript/flavours/glitch/components/media_gallery.js | 34 |
1 files changed, 24 insertions, 10 deletions
diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 194800d52..3478766d2 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -354,19 +354,33 @@ export default class MediaGallery extends React.PureComponent { ); } + let descriptions; + descriptions = media.take(4).map( + (attachment, i) => { + if (attachment.get('description')) + return <p className='media-spoiler__trigger'>Attachment {1+i}: {attachment.get('description')}</p> + } + ); + return ( - <div className={computedClass} style={style} ref={this.handleRef}> - <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}> - {spoilerButton} - {visible && sensitive && ( - <span className='sensitive-marker'> - <FormattedMessage {...messages.sensitive} /> - </span> - )} + <React.Fragment> + <div className={computedClass} style={style} ref={this.handleRef}> + <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}> + {spoilerButton} + {visible && sensitive && ( + <span className='sensitive-marker'> + <FormattedMessage {...messages.sensitive} /> + </span> + )} + </div> + + {children} </div> - {children} - </div> + <div className='status__content' tabIndex='0'> + {descriptions} + </div> + </React.Fragment> ); } |