Permalink
Browse files

[FC] Images go behind CW cut, not toggled off

This commit changes the way media is rendered in the timeline.
Previously a status with media was formatted like this:

StatusContainer
  StatusContent
  MediaGallery

Now it's formatted like

StatusContainer
  StatusContent
    MediaGallery

So when you toggle statuscontent, you also toggle the MediaGallery. This
required moving the MediaGallery stuff into the status_content.js
from status.js. It also required a change to how detailed statuses work.
As of this commit, detailed statuses still require the extra click
because it's complicated and this solves most of my users' problems with
this whole thing.

CWs with an image show the "eye" icon next to them so you know an image
is coming.
  • Loading branch information...
dariusk committed Aug 23, 2018
1 parent 6761fce commit cce958df00a500bf834b68a4467abe57881ad672
@@ -137,7 +137,6 @@ export default class Status extends ImmutablePureComponent {
}
render () {
let media = null;
let statusAvatar, prepend;
const { hidden, featured } = this.props;
@@ -193,41 +192,6 @@ export default class Status extends ImmutablePureComponent {
status = status.get('reblog');
}
if (status.get('media_attachments').size > 0) {
if (this.props.muted || status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
media = (
<AttachmentList
compact
media={status.get('media_attachments')}
/>
);
} 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={this.handleOpenVideo}
/>
)}
</Bundle>
);
} else {
media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
{Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.props.onOpenMedia} />}
</Bundle>
);
}
}
if (account === undefined || account === null) {
statusAvatar = <Avatar account={status.get('account')} size={48} />;
}else{
@@ -264,9 +228,7 @@ export default class Status extends ImmutablePureComponent {
</a>
</div>
<StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />
{media}
<StatusContent status={status} onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} onOpenMedia={this.props.onOpenMedia} />
<StatusActionBar status={status} account={account} {...other} />
</div>
@@ -5,6 +5,9 @@ import { isRtl } from '../rtl';
import { FormattedMessage } from 'react-intl';
import Permalink from './permalink';
import classnames from 'classnames';
import { MediaGallery, Video } from '../features/ui/util/async-components';
import Bundle from '../features/ui/components/bundle';
import ReactDOMServer from 'react-dom/server';
export default class StatusContent extends React.PureComponent {
@@ -17,6 +20,8 @@ export default class StatusContent extends React.PureComponent {
expanded: PropTypes.bool,
onExpandedToggle: PropTypes.func,
onClick: PropTypes.func,
onOpenMedia: PropTypes.func,
detailed: PropTypes.bool,
};
state = {
@@ -69,6 +74,10 @@ export default class StatusContent extends React.PureComponent {
this._updateStatusLinks();
}
handleOpenVideo = (media, startTime) => {
this.props.onOpenVideo(media, startTime);
}
onMentionClick = (mention, e) => {
if (this.context.router && e.button === 0) {
e.preventDefault();
@@ -126,7 +135,9 @@ export default class StatusContent extends React.PureComponent {
render () {
const { status } = this.props;
if (status.get('content').length === 0) {
let media = null;
if (status.get('content').length === 0 && status.get('media_attachments').size === 0) {
return null;
}
@@ -144,6 +155,41 @@ export default class StatusContent extends React.PureComponent {
directionStyle.direction = 'rtl';
}
if (!this.props.detailed && status.get('media_attachments').size > 0) {
if (this.props.muted || status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
media = (
<AttachmentList
compact
media={status.get('media_attachments')}
/>
);
} 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={false}
onOpenVideo={this.handleOpenVideo}
/>
)}
</Bundle>
);
} else {
media = (
<Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
{Component => <Component media={status.get('media_attachments')} sensitive={false} height={110} onOpenMedia={this.props.onOpenMedia.bind(this)} />}
</Bundle>
);
}
}
if (status.get('spoiler_text').length > 0) {
let mentionsPlaceholder = '';
@@ -164,12 +210,15 @@ export default class StatusContent extends React.PureComponent {
<p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
<span dangerouslySetInnerHTML={spoilerContent} />
{' '}
<button tabIndex='0' className={`status__content__spoiler-link ${hidden ? 'status__content__spoiler-link--show-more' : 'status__content__spoiler-link--show-less'}`} onClick={this.handleSpoilerClick}>{toggleText}</button>
<button tabIndex='0' className={`status__content__spoiler-link ${hidden ? 'status__content__spoiler-link--show-more' : 'status__content__spoiler-link--show-less'}`} onClick={this.handleSpoilerClick}>{toggleText}</button> <span>{media ? <i className='fa fa-eye' /> : ''}</span>
</p>
{mentionsPlaceholder}
<div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle} dangerouslySetInnerHTML={content} />
<div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} style={directionStyle}>
<span dangerouslySetInnerHTML={content}></span>
{media}
</div>
</div>
);
} else if (this.props.onClick) {
@@ -181,8 +230,10 @@ export default class StatusContent extends React.PureComponent {
style={directionStyle}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
dangerouslySetInnerHTML={content}
/>
>
<span dangerouslySetInnerHTML={content} />
{media ? media : <span></span>}
</div>
);
} else {
return (
@@ -191,8 +242,10 @@ export default class StatusContent extends React.PureComponent {
ref={this.setRef}
className='status__content'
style={directionStyle}
dangerouslySetInnerHTML={content}
/>
>
<span dangerouslySetInnerHTML={content} />
{media ? media : <span></span>}
</div>
);
}
}
@@ -110,7 +110,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<DisplayName account={status.get('account')} />
</a>
<StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />
<StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} onOpenMedia={this.props.onOpenMedia} detailed/>
{media}

0 comments on commit cce958d

Please sign in to comment.