Ported updates from #64
This commit is contained in:
parent
f48f42598f
commit
d5d6a8ad16
6 changed files with 51 additions and 29 deletions
|
@ -47,7 +47,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
|
||||||
onReport: PropTypes.func,
|
onReport: PropTypes.func,
|
||||||
onMuteConversation: PropTypes.func,
|
onMuteConversation: PropTypes.func,
|
||||||
onDeleteNotification: PropTypes.func,
|
onDeleteNotification: PropTypes.func,
|
||||||
me: PropTypes.number.isRequired,
|
me: PropTypes.number,
|
||||||
withDismiss: PropTypes.bool,
|
withDismiss: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
};
|
};
|
||||||
|
@ -108,6 +108,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
|
||||||
const { status, me, intl, withDismiss } = this.props;
|
const { status, me, intl, withDismiss } = this.props;
|
||||||
const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
|
const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
|
||||||
const mutingConversation = status.get('muted');
|
const mutingConversation = status.get('muted');
|
||||||
|
const anonymousAccess = !me;
|
||||||
|
|
||||||
let menu = [];
|
let menu = [];
|
||||||
let reblogIcon = 'retweet';
|
let reblogIcon = 'retweet';
|
||||||
|
@ -151,12 +152,12 @@ export default class StatusActionBar extends ImmutablePureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='status__action-bar'>
|
<div className='status__action-bar'>
|
||||||
<IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
|
<IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
|
||||||
<IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
<IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
||||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||||
|
|
||||||
<div className='status__action-bar-dropdown'>
|
<div className='status__action-bar-dropdown'>
|
||||||
<DropdownMenu items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
|
<DropdownMenu items={menu} disabled={anonymousAccess} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
|
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
|
||||||
|
|
|
@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import escapeTextContentForBrowser from 'escape-html';
|
import escapeTextContentForBrowser from 'escape-html';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
// Mastodon imports //
|
// Mastodon imports //
|
||||||
import emojify from '../../../mastodon/emoji';
|
import emojify from '../../../mastodon/emoji';
|
||||||
|
@ -12,10 +13,6 @@ import Permalink from '../../../mastodon/components/permalink';
|
||||||
|
|
||||||
export default class StatusContent extends React.PureComponent {
|
export default class StatusContent extends React.PureComponent {
|
||||||
|
|
||||||
static contextTypes = {
|
|
||||||
router: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
status: ImmutablePropTypes.map.isRequired,
|
status: ImmutablePropTypes.map.isRequired,
|
||||||
expanded: PropTypes.oneOf([true, false, null]),
|
expanded: PropTypes.oneOf([true, false, null]),
|
||||||
|
@ -24,6 +21,7 @@ export default class StatusContent extends React.PureComponent {
|
||||||
media: PropTypes.element,
|
media: PropTypes.element,
|
||||||
mediaIcon: PropTypes.string,
|
mediaIcon: PropTypes.string,
|
||||||
parseClick: PropTypes.func,
|
parseClick: PropTypes.func,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -45,10 +43,11 @@ export default class StatusContent extends React.PureComponent {
|
||||||
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
|
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
|
||||||
} else {
|
} else {
|
||||||
link.addEventListener('click', this.onLinkClick.bind(this), false);
|
link.addEventListener('click', this.onLinkClick.bind(this), false);
|
||||||
link.setAttribute('target', '_blank');
|
|
||||||
link.setAttribute('rel', 'noopener');
|
|
||||||
link.setAttribute('title', link.href);
|
link.setAttribute('title', link.href);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
link.setAttribute('target', '_blank');
|
||||||
|
link.setAttribute('rel', 'noopener');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -118,7 +117,13 @@ export default class StatusContent extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { status, media, mediaIcon } = this.props;
|
const {
|
||||||
|
status,
|
||||||
|
media,
|
||||||
|
mediaIcon,
|
||||||
|
parseClick,
|
||||||
|
disabled,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
const hidden = (
|
const hidden = (
|
||||||
this.props.setExpansion ?
|
this.props.setExpansion ?
|
||||||
|
@ -133,6 +138,9 @@ export default class StatusContent extends React.PureComponent {
|
||||||
)),
|
)),
|
||||||
};
|
};
|
||||||
const directionStyle = { direction: 'ltr' };
|
const directionStyle = { direction: 'ltr' };
|
||||||
|
const classNames = classnames('status__content', {
|
||||||
|
'status__content--with-action': parseClick && !disabled,
|
||||||
|
});
|
||||||
|
|
||||||
if (isRtl(status.get('search_index'))) {
|
if (isRtl(status.get('search_index'))) {
|
||||||
directionStyle.direction = 'rtl';
|
directionStyle.direction = 'rtl';
|
||||||
|
@ -180,7 +188,7 @@ export default class StatusContent extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='status__content status__content--with-action' ref={this.setRef}>
|
<div className={classNames} ref={this.setRef}>
|
||||||
<p
|
<p
|
||||||
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
|
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
|
||||||
onMouseDown={this.handleMouseDown}
|
onMouseDown={this.handleMouseDown}
|
||||||
|
@ -207,11 +215,11 @@ export default class StatusContent extends React.PureComponent {
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else if (this.props.parseClick) {
|
} else if (parseClick) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={this.setRef}
|
ref={this.setRef}
|
||||||
className='status__content status__content--with-action'
|
className={classNames}
|
||||||
style={directionStyle}
|
style={directionStyle}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -220,6 +220,7 @@ if we have a `friend` and a normal `<Avatar>` if we don't.
|
||||||
}
|
}
|
||||||
<a
|
<a
|
||||||
href={account.get('url')}
|
href={account.get('url')}
|
||||||
|
target='_blank'
|
||||||
className='status__display-name'
|
className='status__display-name'
|
||||||
onClick={this.handleAccountClick}
|
onClick={this.handleAccountClick}
|
||||||
>
|
>
|
||||||
|
|
|
@ -507,6 +507,7 @@ applicable.
|
||||||
const { router } = this.context;
|
const { router } = this.context;
|
||||||
const { status } = this.props;
|
const { status } = this.props;
|
||||||
const { isExpanded } = this.state;
|
const { isExpanded } = this.state;
|
||||||
|
if (!router) return;
|
||||||
if (destination === undefined) {
|
if (destination === undefined) {
|
||||||
destination = `/statuses/${
|
destination = `/statuses/${
|
||||||
status.getIn(['reblog', 'id'], status.get('id'))
|
status.getIn(['reblog', 'id'], status.get('id'))
|
||||||
|
@ -532,7 +533,13 @@ this operation are further explained in the code below.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { parseClick, setExpansion, handleRef } = this;
|
const {
|
||||||
|
parseClick,
|
||||||
|
setExpansion,
|
||||||
|
saveHeight,
|
||||||
|
handleRef,
|
||||||
|
} = this;
|
||||||
|
const { router } = this.context;
|
||||||
const {
|
const {
|
||||||
status,
|
status,
|
||||||
account,
|
account,
|
||||||
|
@ -706,9 +713,10 @@ collapsed.
|
||||||
media={media}
|
media={media}
|
||||||
mediaIcon={mediaIcon}
|
mediaIcon={mediaIcon}
|
||||||
expanded={isExpanded}
|
expanded={isExpanded}
|
||||||
setExpansion={this.setExpansion}
|
setExpansion={setExpansion}
|
||||||
onHeightUpdate={this.saveHeight}
|
onHeightUpdate={saveHeight}
|
||||||
parseClick={parseClick}
|
parseClick={parseClick}
|
||||||
|
disabled={!router}
|
||||||
/>
|
/>
|
||||||
{isExpanded !== false ? (
|
{isExpanded !== false ? (
|
||||||
<StatusActionBar
|
<StatusActionBar
|
||||||
|
|
|
@ -17,6 +17,10 @@ const messages = defineMessages({
|
||||||
@injectIntl
|
@injectIntl
|
||||||
export default class StatusPlayer extends React.PureComponent {
|
export default class StatusPlayer extends React.PureComponent {
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
router: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
media: ImmutablePropTypes.map.isRequired,
|
media: ImmutablePropTypes.map.isRequired,
|
||||||
letterbox: PropTypes.bool,
|
letterbox: PropTypes.bool,
|
||||||
|
@ -122,7 +126,7 @@ export default class StatusPlayer extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
let expandButton = (
|
let expandButton = !this.context.router ? '' : (
|
||||||
<div className='status__video-player-expand'>
|
<div className='status__video-player-expand'>
|
||||||
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
|
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -28,7 +28,7 @@ Imports
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Package imports //
|
// Package imports //
|
||||||
import Immutable from 'immutable';
|
import { Map as ImmutableMap } from 'immutable';
|
||||||
|
|
||||||
// Mastodon imports //
|
// Mastodon imports //
|
||||||
import { STORE_HYDRATE } from '../../mastodon/actions/store';
|
import { STORE_HYDRATE } from '../../mastodon/actions/store';
|
||||||
|
@ -48,27 +48,27 @@ These are only used if no previously-saved values exist.
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const initialState = Immutable.fromJS({
|
const initialState = ImmutableMap({
|
||||||
layout : 'auto',
|
layout : 'auto',
|
||||||
stretch : true,
|
stretch : true,
|
||||||
collapsed : {
|
collapsed : ImmutableMap({
|
||||||
enabled : true,
|
enabled : true,
|
||||||
auto : {
|
auto : ImmutableMap({
|
||||||
all : false,
|
all : false,
|
||||||
notifications : true,
|
notifications : true,
|
||||||
lengthy : true,
|
lengthy : true,
|
||||||
replies : false,
|
replies : false,
|
||||||
media : false,
|
media : false,
|
||||||
},
|
}),
|
||||||
backgrounds : {
|
backgrounds : ImmutableMap({
|
||||||
user_backgrounds : false,
|
user_backgrounds : false,
|
||||||
preview_images : false,
|
preview_images : false,
|
||||||
},
|
}),
|
||||||
},
|
}),
|
||||||
media : {
|
media : ImmutableMap({
|
||||||
letterbox : true,
|
letterbox : true,
|
||||||
fullwidth : true,
|
fullwidth : true,
|
||||||
},
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
/* * * * */
|
/* * * * */
|
||||||
|
|
Loading…
Reference in a new issue