Show media on report UI

Ports 219aac7800 to glitch-soc
signup-info-prompt
Thibaut Girka 2018-03-12 19:43:31 +01:00
parent 22870985da
commit 19f7bd1582
2 changed files with 59 additions and 15 deletions

View File

@ -2,6 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Toggle from 'react-toggle';
import noop from 'lodash/noop';
import StatusContent from 'flavours/glitch/components/status_content';
import { MediaGallery, Video } from 'flavours/glitch/util/async-components';
import Bundle from 'flavours/glitch/features/ui/components/bundle';
export default class StatusCheckBox extends React.PureComponent {
@ -14,18 +18,50 @@ export default class StatusCheckBox extends React.PureComponent {
render () {
const { status, checked, onToggle, disabled } = this.props;
const content = { __html: status.get('contentHtml') };
let media = null;
if (status.get('reblog')) {
return null;
}
if (status.get('media_attachments').size > 0) {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const video = status.getIn(['media_attachments', 0]);
media = (
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
{Component => (
<Component
preview={video.get('preview_url')}
src={video.get('url')}
width={239}
height={110}
inline
sensitive={status.get('sensitive')}
onOpenVideo={noop}
/>
)}
</Bundle>
);
} else {
media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >
{Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={noop} />}
</Bundle>
);
}
}
return (
<div className='status-check-box'>
<div
className='status__content'
dangerouslySetInnerHTML={content}
/>
<div className='status-check-box__status'>
<StatusContent
status={status}
media={media}
/>
</div>
<div className='status-check-box-toggle'>
<Toggle checked={checked} onChange={onToggle} disabled={disabled} />

View File

@ -314,18 +314,26 @@
border-bottom: 1px solid $ui-secondary-color;
display: flex;
.status__content {
flex: 1 1 auto;
padding: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.status-check-box__status {
margin: 10px 0 10px 10px;
flex: 1;
.media-gallery {
max-width: 250px;
}
.status__content {
color: #3a3a3a;
a {
color: #005aa9;
}
padding: 0;
white-space: normal;
}
.video-player {
margin-top: 8px;
max-width: 250px;
}
.media-gallery__item-thumbnail {
cursor: default;
}
}
}