diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-03-12 19:43:31 +0100 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2018-03-16 15:27:13 +0100 |
commit | 19f7bd1582c549a274ebe0a0b5cc3d79604ac33c (patch) | |
tree | ab6a4ba8d8365e0939f3d271836583dafdf7e75f /app/javascript/flavours/glitch/features | |
parent | 22870985dac47d4162bbe63d445cee8f7a1567bb (diff) |
Show media on report UI
Ports 219aac7800a086a75f3ef36f71955bb8b6ccc2c0 to glitch-soc
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} /> |