forked from treehouse/mastodon
Media previews for collapsed toots
parent
8ea779e59a
commit
efacfec3ed
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue