Show media on report UI (#6619)

signup-info-prompt
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 PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import Toggle from 'react-toggle'; 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 { export default class StatusCheckBox extends React.PureComponent {
@ -14,18 +18,48 @@ export default class StatusCheckBox extends React.PureComponent {
render () { render () {
const { status, checked, onToggle, disabled } = this.props; const { status, checked, onToggle, disabled } = this.props;
const content = { __html: status.get('contentHtml') }; let media = null;
if (status.get('reblog')) { if (status.get('reblog')) {
return null; 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 ( return (
<div className='status-check-box'> <div className='status-check-box'>
<div <div className='status-check-box__status'>
className='status__content' <StatusContent status={status} />
dangerouslySetInnerHTML={content} {media}
/> </div>
<div className='status-check-box-toggle'> <div className='status-check-box-toggle'>
<Toggle checked={checked} onChange={onToggle} disabled={disabled} /> <Toggle checked={checked} onChange={onToggle} disabled={disabled} />

View File

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