diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features')
-rw-r--r-- | app/javascript/flavours/glitch/features/report/components/status_check_box.js | 46 |
1 files changed, 41 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.js b/app/javascript/flavours/glitch/features/report/components/status_check_box.js index cc9232201..d72a0fd07 100644 --- a/app/javascript/flavours/glitch/features/report/components/status_check_box.js +++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.js @@ -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} /> |