me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Media previews for collapsed toots

Browse source
This commit is contained in:
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 () {
let media = null;
let thumb = null;
let statusAvatar;
// Exclude intersectionObserverWrapper from `other` variable
@ -221,8 +222,10 @@ 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} />;
if (!status.get('sensitive')) 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} />;
if (!status.get('sensitive')) thumb = status.getIn(['media_attachments', 0]).get('preview_url');
}
}
@ -233,7 +236,7 @@ class StatusUnextended extends ImmutablePureComponent {
}
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'>
<IconButton

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

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