Displaying media attachments in timelines

app/assets/javascripts/components/components/drawer.jsx

@@ -6,7 +6,7 @@ const Drawer = React.createClass({
 
   render () {
     return (
-      <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '0', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ width: '280px', flex: '0', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '0', display: 'flex', flexDirection: 'column' }}>
         {this.props.children}
       </div>
     );

app/assets/javascripts/components/components/media_gallery.jsx

+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+
+const MediaGallery = React.createClass({
+
+  propTypes: {
+    media: ImmutablePropTypes.list.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    var children = this.props.media.take(4).map((attachment, i) => {
+      return <a key={attachment.get('id')} href={attachment.get('url')} style={{ float: 'left', marginRight: (i % 2 == 0 ? '5px' : '0'), marginBottom: '5px', textDecoration: 'none', border: 'none', display: 'block', width: '142px', height: '110px', background: `url(${attachment.get('preview_url')}) no-repeat`, backgroundSize: 'cover', cursor: 'zoom-in' }} />;
+    });
+
+    return (
+      <div style={{ marginTop: '8px', overflow: 'hidden', marginBottom: '-5px' }}>
+        {children}
+      </div>
+    );
+  }
+
+});
+
+export default MediaGallery;

app/assets/javascripts/components/components/status.jsx

@@ -4,6 +4,7 @@ import RelativeTimestamp  from './relative_timestamp';
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import IconButton         from './icon_button';
 import DisplayName        from './display_name';
+import MediaGallery       from './media_gallery';
 
 const Status = React.createClass({
 
@@ -30,6 +31,8 @@ const Status = React.createClass({
 
   render () {
     var content = { __html: this.props.status.get('content') };
+    var media   = '';
+
     var { status, ...other } = this.props;
 
     if (status.get('reblog') !== null) {
@@ -45,6 +48,10 @@ const Status = React.createClass({
       );
     }
 
+    if (status.get('media_attachments').size > 0) {
+      media = <MediaGallery media={status.get('media_attachments')} />;
+    }
+
     return (
       <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}>
         <div style={{ fontSize: '15px' }}>
@@ -63,6 +70,8 @@ const Status = React.createClass({
 
         <div className='status__content' dangerouslySetInnerHTML={content} />
 
+        {media}
+
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
           <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
           <div style={{ float: 'left', marginRight: '10px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>

app/views/api/statuses/show.rabl

@@ -18,7 +18,7 @@ child :account do
 end
 
 child :media_attachments, object_root: false do
-  attribute :remote_url
+  attributes :id, :remote_url
 
   node(:url) { |media| full_asset_url(media.file.url) }
   node(:preview_url) { |media| full_asset_url(media.file.url(:small)) }