Show media on report UI

Ports deba74063f to glitch-soc
This commit is contained in:
Thibaut Girka 2018-03-12 19:43:31 +01:00
parent 8e7394c876
commit 5ac00cbf1f
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 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 '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 { export default class StatusCheckBox extends React.PureComponent {
@ -14,18 +18,50 @@ 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
dangerouslySetInnerHTML={content} status={status}
media={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

@ -314,18 +314,26 @@
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 { .status__content {
color: #3a3a3a; padding: 0;
a { white-space: normal;
color: #005aa9;
} }
.video-player {
margin-top: 8px;
max-width: 250px;
}
.media-gallery__item-thumbnail {
cursor: default;
} }
} }
} }