Show media on report UI (#6619)

pull/379/head
abcang 2018-03-05 04:29:12 +09:00 committed by Eugen Rochko
parent c110fa62ac
commit 219aac7800
2 changed files with 60 additions and 11 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 '../../../components/status_content';
import { MediaGallery, Video } from '../../ui/util/async-components';
import Bundle from '../../ui/components/bundle';
export default class StatusCheckBox extends React.PureComponent {
@ -14,18 +18,48 @@ 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}
</div>
<div className='status-check-box-toggle'>
<Toggle checked={checked} onChange={onToggle} disabled={disabled} />

View File

@ -862,12 +862,27 @@
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 {
padding: 0;
white-space: normal;
}
.video-player {
margin-top: 8px;
max-width: 250px;
}
.media-gallery__item-thumbnail {
cursor: default;
}
}
}