treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Media previews for collapsed toots

lolsob-rspec
kibigo! 2017-06-25 13:57:52 -07:00
parent a988d0065a
commit d5cf3e5570
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/mastodon/components/status.js
View File

@ -175,6 +175,7 @@ class StatusUnextended extends ImmutablePureComponent {
render () { render () {
let media = null; let media = null;
let thumb = null;
let statusAvatar; let statusAvatar;
// Exclude intersectionObserverWrapper from `other` variable // Exclude intersectionObserverWrapper from `other` variable
@ -221,8 +222,10 @@ class StatusUnextended extends ImmutablePureComponent {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { } 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} />; 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 { } else {
media = <MediaGallery media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />; 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 ( 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'> <div className='status__info'>
<IconButton <IconButton

16
app/javascript/styles/components.scss
View File

@ -454,6 +454,7 @@
.status__content, .status__content,
.reply-indicator__content { .reply-indicator__content {
position: relative;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: $primary-text-color; color: $primary-text-color;
@ -604,6 +605,19 @@
&.status-collapsed { &.status-collapsed {
height: 48px; 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 { .status__content {
height: 20px; height: 20px;
@ -644,6 +658,7 @@
} }
.status__collapse-button { .status__collapse-button {
position: relative;
float: right; float: right;
} }
@ -1162,6 +1177,7 @@
.display-name { .display-name {
display: block; display: block;
position: relative;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;