Merge tootsuite/master at 3023725936
This commit is contained in:
187
app/javascript/glitch/components/status/action_bar.js
Normal file
187
app/javascript/glitch/components/status/action_bar.js
Normal file
@@ -0,0 +1,187 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
import RelativeTimestamp from '../../../mastodon/components/relative_timestamp';
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import DropdownMenuContainer from '../../../mastodon/containers/dropdown_menu_container';
|
||||
import { me } from '../../../mastodon/initial_state';
|
||||
|
||||
const messages = defineMessages({
|
||||
delete: { id: 'status.delete', defaultMessage: 'Delete' },
|
||||
mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
|
||||
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
|
||||
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
||||
reply: { id: 'status.reply', defaultMessage: 'Reply' },
|
||||
share: { id: 'status.share', defaultMessage: 'Share' },
|
||||
replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
|
||||
reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
|
||||
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
|
||||
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
||||
open: { id: 'status.open', defaultMessage: 'Expand this status' },
|
||||
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
|
||||
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
|
||||
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
|
||||
pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
|
||||
unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
|
||||
embed: { id: 'status.embed', defaultMessage: 'Embed' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusActionBar extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
onReply: PropTypes.func,
|
||||
onFavourite: PropTypes.func,
|
||||
onReblog: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onMention: PropTypes.func,
|
||||
onMute: PropTypes.func,
|
||||
onBlock: PropTypes.func,
|
||||
onReport: PropTypes.func,
|
||||
onEmbed: PropTypes.func,
|
||||
onMuteConversation: PropTypes.func,
|
||||
onPin: PropTypes.func,
|
||||
withDismiss: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
// Avoid checking props that are functions (and whose equality will always
|
||||
// evaluate to false. See react-immutable-pure-component for usage.
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'withDismiss',
|
||||
]
|
||||
|
||||
handleReplyClick = () => {
|
||||
this.props.onReply(this.props.status, this.context.router.history);
|
||||
}
|
||||
|
||||
handleShareClick = () => {
|
||||
navigator.share({
|
||||
text: this.props.status.get('search_index'),
|
||||
url: this.props.status.get('url'),
|
||||
});
|
||||
}
|
||||
|
||||
handleFavouriteClick = () => {
|
||||
this.props.onFavourite(this.props.status);
|
||||
}
|
||||
|
||||
handleReblogClick = (e) => {
|
||||
this.props.onReblog(this.props.status, e);
|
||||
}
|
||||
|
||||
handleDeleteClick = () => {
|
||||
this.props.onDelete(this.props.status);
|
||||
}
|
||||
|
||||
handlePinClick = () => {
|
||||
this.props.onPin(this.props.status);
|
||||
}
|
||||
|
||||
handleMentionClick = () => {
|
||||
this.props.onMention(this.props.status.get('account'), this.context.router.history);
|
||||
}
|
||||
|
||||
handleMuteClick = () => {
|
||||
this.props.onMute(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleBlockClick = () => {
|
||||
this.props.onBlock(this.props.status.get('account'));
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
|
||||
}
|
||||
|
||||
handleEmbed = () => {
|
||||
this.props.onEmbed(this.props.status);
|
||||
}
|
||||
|
||||
handleReport = () => {
|
||||
this.props.onReport(this.props.status);
|
||||
}
|
||||
|
||||
handleConversationMuteClick = () => {
|
||||
this.props.onMuteConversation(this.props.status);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { status, intl, withDismiss } = this.props;
|
||||
|
||||
const mutingConversation = status.get('muted');
|
||||
const anonymousAccess = !me;
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
||||
|
||||
let menu = [];
|
||||
let reblogIcon = 'retweet';
|
||||
let replyIcon;
|
||||
let replyTitle;
|
||||
|
||||
menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
|
||||
|
||||
if (publicStatus) {
|
||||
menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
|
||||
}
|
||||
|
||||
menu.push(null);
|
||||
|
||||
if (status.getIn(['account', 'id']) === me || withDismiss) {
|
||||
menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
|
||||
menu.push(null);
|
||||
}
|
||||
|
||||
if (status.getIn(['account', 'id']) === me) {
|
||||
if (publicStatus) {
|
||||
menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
|
||||
}
|
||||
|
||||
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
|
||||
menu.push(null);
|
||||
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
|
||||
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
|
||||
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
|
||||
}
|
||||
|
||||
if (status.get('in_reply_to_id', null) === null) {
|
||||
replyIcon = 'reply';
|
||||
replyTitle = intl.formatMessage(messages.reply);
|
||||
} else {
|
||||
replyIcon = 'reply-all';
|
||||
replyTitle = intl.formatMessage(messages.replyAll);
|
||||
}
|
||||
|
||||
const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && (
|
||||
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='status__action-bar'>
|
||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
|
||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
||||
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||
{shareButton}
|
||||
|
||||
<div className='status__action-bar-dropdown'>
|
||||
<DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
|
||||
</div>
|
||||
|
||||
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
263
app/javascript/glitch/components/status/container.js
Normal file
263
app/javascript/glitch/components/status/container.js
Normal file
@@ -0,0 +1,263 @@
|
||||
/*
|
||||
|
||||
`<StatusContainer>`
|
||||
===================
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
|
||||
detecting reblogs has been moved here from <Status>.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
defineMessages,
|
||||
injectIntl,
|
||||
FormattedMessage,
|
||||
} from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import { makeGetStatus } from '../../../mastodon/selectors';
|
||||
import {
|
||||
replyCompose,
|
||||
mentionCompose,
|
||||
} from '../../../mastodon/actions/compose';
|
||||
import {
|
||||
reblog,
|
||||
favourite,
|
||||
unreblog,
|
||||
unfavourite,
|
||||
pin,
|
||||
unpin,
|
||||
} from '../../../mastodon/actions/interactions';
|
||||
import { blockAccount } from '../../../mastodon/actions/accounts';
|
||||
import { initMuteModal } from '../../../mastodon/actions/mutes';
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
deleteStatus,
|
||||
} from '../../../mastodon/actions/statuses';
|
||||
import { initReport } from '../../../mastodon/actions/reports';
|
||||
import { openModal } from '../../../mastodon/actions/modal';
|
||||
|
||||
// Our imports //
|
||||
import Status from '.';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Inital setup:
|
||||
-------------
|
||||
|
||||
The `messages` constant is used to define any messages that we will
|
||||
need in our component. In our case, these are the various confirmation
|
||||
messages used with statuses.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteConfirm : {
|
||||
id : 'confirmations.delete.confirm',
|
||||
defaultMessage : 'Delete',
|
||||
},
|
||||
deleteMessage : {
|
||||
id : 'confirmations.delete.message',
|
||||
defaultMessage : 'Are you sure you want to delete this status?',
|
||||
},
|
||||
blockConfirm : {
|
||||
id : 'confirmations.block.confirm',
|
||||
defaultMessage : 'Block',
|
||||
},
|
||||
});
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
State mapping:
|
||||
--------------
|
||||
|
||||
The `mapStateToProps()` function maps various state properties to the
|
||||
props of our component. We wrap this in a `makeMapStateToProps()`
|
||||
function to give us closure and preserve `getStatus()` across function
|
||||
calls.
|
||||
|
||||
*/
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
let status = getStatus(state, ownProps.id);
|
||||
|
||||
if(status === null) {
|
||||
console.error(`ERROR! NULL STATUS! ${ownProps.id}`);
|
||||
// work-around: find first good status
|
||||
for (let k of state.get('statuses').keys()) {
|
||||
status = getStatus(state, k);
|
||||
if (status !== null) break;
|
||||
}
|
||||
}
|
||||
|
||||
let reblogStatus = status.get('reblog', null);
|
||||
let account = undefined;
|
||||
let prepend = undefined;
|
||||
|
||||
/*
|
||||
|
||||
Here we process reblogs. If our status is a reblog, then we create a
|
||||
`prependMessage` to pass along to our `<Status>` along with the
|
||||
reblogger's `account`, and set `coreStatus` (the one we will actually
|
||||
render) to the status which has been reblogged.
|
||||
|
||||
*/
|
||||
|
||||
if (reblogStatus !== null && typeof reblogStatus === 'object') {
|
||||
account = status.get('account');
|
||||
status = reblogStatus;
|
||||
prepend = 'reblogged_by';
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Here are the props we pass to `<Status>`.
|
||||
|
||||
*/
|
||||
|
||||
return {
|
||||
status : status,
|
||||
account : account || ownProps.account,
|
||||
settings : state.get('local_settings'),
|
||||
prepend : prepend || ownProps.prepend,
|
||||
reblogModal : state.getIn(['meta', 'boost_modal']),
|
||||
deleteModal : state.getIn(['meta', 'delete_modal']),
|
||||
};
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We need to provide dispatches for all
|
||||
of the things you can do with a status: reply, reblog, favourite, et
|
||||
cetera.
|
||||
|
||||
For a few of these dispatches, we open up confirmation modals; the rest
|
||||
just immediately execute their corresponding actions.
|
||||
|
||||
*/
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
|
||||
onReply (status, router) {
|
||||
dispatch(replyCompose(status, router));
|
||||
},
|
||||
|
||||
onModalReblog (status) {
|
||||
dispatch(reblog(status));
|
||||
},
|
||||
|
||||
onReblog (status, e) {
|
||||
if (status.get('reblogged')) {
|
||||
dispatch(unreblog(status));
|
||||
} else {
|
||||
if (e.shiftKey || !this.reblogModal) {
|
||||
this.onModalReblog(status);
|
||||
} else {
|
||||
dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onFavourite (status) {
|
||||
if (status.get('favourited')) {
|
||||
dispatch(unfavourite(status));
|
||||
} else {
|
||||
dispatch(favourite(status));
|
||||
}
|
||||
},
|
||||
|
||||
onPin (status) {
|
||||
if (status.get('pinned')) {
|
||||
dispatch(unpin(status));
|
||||
} else {
|
||||
dispatch(pin(status));
|
||||
}
|
||||
},
|
||||
|
||||
onEmbed (status) {
|
||||
dispatch(openModal('EMBED', { url: status.get('url') }));
|
||||
},
|
||||
|
||||
onDelete (status) {
|
||||
if (!this.deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.deleteMessage),
|
||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'))),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
onMention (account, router) {
|
||||
dispatch(mentionCompose(account, router));
|
||||
},
|
||||
|
||||
onOpenMedia (media, index) {
|
||||
dispatch(openModal('MEDIA', { media, index }));
|
||||
},
|
||||
|
||||
onOpenVideo (media, time) {
|
||||
dispatch(openModal('VIDEO', { media, time }));
|
||||
},
|
||||
|
||||
onBlock (account) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
|
||||
confirm: intl.formatMessage(messages.blockConfirm),
|
||||
onConfirm: () => dispatch(blockAccount(account.get('id'))),
|
||||
}));
|
||||
},
|
||||
|
||||
onReport (status) {
|
||||
dispatch(initReport(status.get('account'), status));
|
||||
},
|
||||
|
||||
onMute (account) {
|
||||
dispatch(initMuteModal(account));
|
||||
},
|
||||
|
||||
onMuteConversation (status) {
|
||||
if (status.get('muted')) {
|
||||
dispatch(unmuteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(muteStatus(status.get('id')));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default injectIntl(
|
||||
connect(makeMapStateToProps, mapDispatchToProps)(Status)
|
||||
);
|
241
app/javascript/glitch/components/status/content.js
Normal file
241
app/javascript/glitch/components/status/content.js
Normal file
@@ -0,0 +1,241 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import classnames from 'classnames';
|
||||
|
||||
// Mastodon imports //
|
||||
import { isRtl } from '../../../mastodon/rtl';
|
||||
import Permalink from '../../../mastodon/components/permalink';
|
||||
|
||||
export default class StatusContent extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
expanded: PropTypes.oneOf([true, false, null]),
|
||||
setExpansion: PropTypes.func,
|
||||
onHeightUpdate: PropTypes.func,
|
||||
media: PropTypes.element,
|
||||
mediaIcon: PropTypes.string,
|
||||
parseClick: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
state = {
|
||||
hidden: true,
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
const node = this.node;
|
||||
const links = node.querySelectorAll('a');
|
||||
|
||||
for (let i = 0; i < links.length; ++i) {
|
||||
let link = links[i];
|
||||
let mention = this.props.status.get('mentions').find(item => link.href === item.get('url'));
|
||||
|
||||
if (mention) {
|
||||
link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
|
||||
link.setAttribute('title', mention.get('acct'));
|
||||
} else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
|
||||
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
|
||||
} else {
|
||||
link.addEventListener('click', this.onLinkClick.bind(this), false);
|
||||
link.setAttribute('title', link.href);
|
||||
}
|
||||
|
||||
link.setAttribute('target', '_blank');
|
||||
link.setAttribute('rel', 'noopener');
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (this.props.onHeightUpdate) {
|
||||
this.props.onHeightUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
onLinkClick = (e) => {
|
||||
if (this.props.expanded === false) {
|
||||
if (this.props.parseClick) this.props.parseClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
onMentionClick = (mention, e) => {
|
||||
if (this.props.parseClick) {
|
||||
this.props.parseClick(e, `/accounts/${mention.get('id')}`);
|
||||
}
|
||||
}
|
||||
|
||||
onHashtagClick = (hashtag, e) => {
|
||||
hashtag = hashtag.replace(/^#/, '').toLowerCase();
|
||||
|
||||
if (this.props.parseClick) {
|
||||
this.props.parseClick(e, `/timelines/tag/${hashtag}`);
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseDown = (e) => {
|
||||
this.startXY = [e.clientX, e.clientY];
|
||||
}
|
||||
|
||||
handleMouseUp = (e) => {
|
||||
const { parseClick } = this.props;
|
||||
|
||||
if (!this.startXY) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [ startX, startY ] = this.startXY;
|
||||
const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
|
||||
|
||||
if (e.target.localName === 'button' || e.target.localName === 'a' || (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (deltaX + deltaY < 5 && e.button === 0 && parseClick) {
|
||||
parseClick(e);
|
||||
}
|
||||
|
||||
this.startXY = null;
|
||||
}
|
||||
|
||||
handleSpoilerClick = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.props.setExpansion) {
|
||||
this.props.setExpansion(this.props.expanded ? null : true);
|
||||
} else {
|
||||
this.setState({ hidden: !this.state.hidden });
|
||||
}
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
status,
|
||||
media,
|
||||
mediaIcon,
|
||||
parseClick,
|
||||
disabled,
|
||||
} = this.props;
|
||||
|
||||
const hidden = (
|
||||
this.props.setExpansion ?
|
||||
!this.props.expanded :
|
||||
this.state.hidden
|
||||
);
|
||||
|
||||
const content = { __html: status.get('contentHtml') };
|
||||
const spoilerContent = { __html: status.get('spoilerHtml') };
|
||||
const directionStyle = { direction: 'ltr' };
|
||||
const classNames = classnames('status__content', {
|
||||
'status__content--with-action': parseClick && !disabled,
|
||||
});
|
||||
|
||||
if (isRtl(status.get('search_index'))) {
|
||||
directionStyle.direction = 'rtl';
|
||||
}
|
||||
|
||||
if (status.get('spoiler_text').length > 0) {
|
||||
let mentionsPlaceholder = '';
|
||||
|
||||
const mentionLinks = status.get('mentions').map(item => (
|
||||
<Permalink
|
||||
to={`/accounts/${item.get('id')}`}
|
||||
href={item.get('url')}
|
||||
key={item.get('id')}
|
||||
className='mention'
|
||||
>
|
||||
@<span>{item.get('username')}</span>
|
||||
</Permalink>
|
||||
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
|
||||
|
||||
const toggleText = hidden ? [
|
||||
<FormattedMessage
|
||||
id='status.show_more'
|
||||
defaultMessage='Show more'
|
||||
key='0'
|
||||
/>,
|
||||
mediaIcon ? (
|
||||
<i
|
||||
className={
|
||||
`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`
|
||||
}
|
||||
aria-hidden='true'
|
||||
key='1'
|
||||
/>
|
||||
) : null,
|
||||
] : [
|
||||
<FormattedMessage
|
||||
id='status.show_less'
|
||||
defaultMessage='Show less'
|
||||
key='0'
|
||||
/>,
|
||||
];
|
||||
|
||||
if (hidden) {
|
||||
mentionsPlaceholder = <div>{mentionLinks}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames}>
|
||||
<p
|
||||
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
>
|
||||
<span dangerouslySetInnerHTML={spoilerContent} />
|
||||
{' '}
|
||||
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
|
||||
{toggleText}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
{mentionsPlaceholder}
|
||||
|
||||
<div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
|
||||
<div
|
||||
ref={this.setRef}
|
||||
style={directionStyle}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
dangerouslySetInnerHTML={content}
|
||||
/>
|
||||
{media}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
} else if (parseClick) {
|
||||
return (
|
||||
<div
|
||||
className={classNames}
|
||||
style={directionStyle}
|
||||
>
|
||||
<div
|
||||
ref={this.setRef}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
dangerouslySetInnerHTML={content}
|
||||
/>
|
||||
{media}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
className='status__content'
|
||||
style={directionStyle}
|
||||
>
|
||||
<div ref={this.setRef} dangerouslySetInnerHTML={content} />
|
||||
{media}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
79
app/javascript/glitch/components/status/gallery/index.js
Normal file
79
app/javascript/glitch/components/status/gallery/index.js
Normal file
@@ -0,0 +1,79 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import IconButton from '../../../../mastodon/components/icon_button';
|
||||
|
||||
// Our imports //
|
||||
import StatusGalleryItem from './item';
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusGallery extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
sensitive: PropTypes.bool,
|
||||
media: ImmutablePropTypes.list.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
fullwidth: PropTypes.bool,
|
||||
height: PropTypes.number.isRequired,
|
||||
onOpenMedia: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
autoPlayGif: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: !this.props.sensitive,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ visible: !this.state.visible });
|
||||
}
|
||||
|
||||
handleClick = (index) => {
|
||||
this.props.onOpenMedia(this.props.media, index);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { media, intl, sensitive, letterbox, fullwidth } = this.props;
|
||||
|
||||
let children;
|
||||
|
||||
if (!this.state.visible) {
|
||||
let warning;
|
||||
|
||||
if (sensitive) {
|
||||
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
|
||||
} else {
|
||||
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
|
||||
}
|
||||
|
||||
children = (
|
||||
<div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
|
||||
<span className='media-spoiler__warning'>{warning}</span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const size = media.take(4).size;
|
||||
children = media.take(4).map((attachment, i) => <StatusGalleryItem key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
|
||||
<div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
|
||||
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
158
app/javascript/glitch/components/status/gallery/item.js
Normal file
158
app/javascript/glitch/components/status/gallery/item.js
Normal file
@@ -0,0 +1,158 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// Mastodon imports //
|
||||
import { isIOS } from '../../../../mastodon/is_mobile';
|
||||
|
||||
export default class StatusGalleryItem extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
attachment: ImmutablePropTypes.map.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
autoPlayGif: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
handleMouseEnter = (e) => {
|
||||
if (this.hoverToPlay()) {
|
||||
e.target.play();
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseLeave = (e) => {
|
||||
if (this.hoverToPlay()) {
|
||||
e.target.pause();
|
||||
e.target.currentTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
hoverToPlay () {
|
||||
const { attachment, autoPlayGif } = this.props;
|
||||
return !autoPlayGif && attachment.get('type') === 'gifv';
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
const { index, onClick } = this.props;
|
||||
|
||||
if (e.button === 0) {
|
||||
e.preventDefault();
|
||||
onClick(index);
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { attachment, index, size, letterbox } = this.props;
|
||||
|
||||
let width = 50;
|
||||
let height = 100;
|
||||
let top = 'auto';
|
||||
let left = 'auto';
|
||||
let bottom = 'auto';
|
||||
let right = 'auto';
|
||||
|
||||
if (size === 1) {
|
||||
width = 100;
|
||||
}
|
||||
|
||||
if (size === 4 || (size === 3 && index > 0)) {
|
||||
height = 50;
|
||||
}
|
||||
|
||||
if (size === 2) {
|
||||
if (index === 0) {
|
||||
right = '2px';
|
||||
} else {
|
||||
left = '2px';
|
||||
}
|
||||
} else if (size === 3) {
|
||||
if (index === 0) {
|
||||
right = '2px';
|
||||
} else if (index > 0) {
|
||||
left = '2px';
|
||||
}
|
||||
|
||||
if (index === 1) {
|
||||
bottom = '2px';
|
||||
} else if (index > 1) {
|
||||
top = '2px';
|
||||
}
|
||||
} else if (size === 4) {
|
||||
if (index === 0 || index === 2) {
|
||||
right = '2px';
|
||||
}
|
||||
|
||||
if (index === 1 || index === 3) {
|
||||
left = '2px';
|
||||
}
|
||||
|
||||
if (index < 2) {
|
||||
bottom = '2px';
|
||||
} else {
|
||||
top = '2px';
|
||||
}
|
||||
}
|
||||
|
||||
let thumbnail = '';
|
||||
|
||||
if (attachment.get('type') === 'image') {
|
||||
const previewUrl = attachment.get('preview_url');
|
||||
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
|
||||
|
||||
const originalUrl = attachment.get('url');
|
||||
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
|
||||
|
||||
const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
|
||||
const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`;
|
||||
|
||||
thumbnail = (
|
||||
<a
|
||||
className='media-gallery__item-thumbnail'
|
||||
href={attachment.get('remote_url') || originalUrl}
|
||||
onClick={this.handleClick}
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
className={letterbox ? 'letterbox' : ''}
|
||||
src={previewUrl} srcSet={srcSet}
|
||||
sizes={sizes}
|
||||
alt={attachment.get('description')}
|
||||
title={attachment.get('description')}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
} else if (attachment.get('type') === 'gifv') {
|
||||
const autoPlay = !isIOS() && this.props.autoPlayGif;
|
||||
|
||||
thumbnail = (
|
||||
<div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
|
||||
<video
|
||||
className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`}
|
||||
role='application'
|
||||
src={attachment.get('url')}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
autoPlay={autoPlay}
|
||||
loop
|
||||
muted
|
||||
/>
|
||||
|
||||
<span className='media-gallery__gifv__label'>GIF</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
|
||||
{thumbnail}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
146
app/javascript/glitch/components/status/header.js
Normal file
146
app/javascript/glitch/components/status/header.js
Normal file
@@ -0,0 +1,146 @@
|
||||
/*
|
||||
|
||||
`<StatusHeader>`
|
||||
================
|
||||
|
||||
Originally a part of `<Status>`, but extracted into a separate
|
||||
component for better documentation and maintainance by
|
||||
@kibi@glitch.social as a part of glitch-soc/mastodon.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Imports
|
||||
// -------
|
||||
|
||||
// Package imports.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
// Mastodon imports.
|
||||
import Avatar from '../../../mastodon/components/avatar';
|
||||
import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
|
||||
import DisplayName from '../../../mastodon/components/display_name';
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import VisibilityIcon from './visibility_icon';
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Initial setup
|
||||
// -------------
|
||||
|
||||
// Messages for use with internationalization stuff.
|
||||
const messages = defineMessages({
|
||||
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
|
||||
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
|
||||
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
|
||||
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
|
||||
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
|
||||
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
|
||||
});
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// The component
|
||||
// -------------
|
||||
|
||||
@injectIntl
|
||||
export default class StatusHeader extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
friend: ImmutablePropTypes.map,
|
||||
mediaIcon: PropTypes.string,
|
||||
collapsible: PropTypes.bool,
|
||||
collapsed: PropTypes.bool,
|
||||
parseClick: PropTypes.func.isRequired,
|
||||
setExpansion: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
// Handles clicks on collapsed button
|
||||
handleCollapsedClick = (e) => {
|
||||
const { collapsed, setExpansion } = this.props;
|
||||
if (e.button === 0) {
|
||||
setExpansion(collapsed ? null : false);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// Handles clicks on account name/image
|
||||
handleAccountClick = (e) => {
|
||||
const { status, parseClick } = this.props;
|
||||
parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
|
||||
}
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
status,
|
||||
friend,
|
||||
mediaIcon,
|
||||
collapsible,
|
||||
collapsed,
|
||||
intl,
|
||||
} = this.props;
|
||||
|
||||
const account = status.get('account');
|
||||
|
||||
return (
|
||||
<header className='status__info'>
|
||||
<a
|
||||
href={account.get('url')}
|
||||
target='_blank'
|
||||
className='status__avatar'
|
||||
onClick={this.handleAccountClick}
|
||||
>
|
||||
{
|
||||
friend ? (
|
||||
<AvatarOverlay account={account} friend={friend} />
|
||||
) : (
|
||||
<Avatar account={account} size={48} />
|
||||
)
|
||||
}
|
||||
</a>
|
||||
<a
|
||||
href={account.get('url')}
|
||||
target='_blank'
|
||||
className='status__display-name'
|
||||
onClick={this.handleAccountClick}
|
||||
>
|
||||
<DisplayName account={account} />
|
||||
</a>
|
||||
<div className='status__info__icons'>
|
||||
{mediaIcon ? (
|
||||
<i
|
||||
className={`fa fa-fw fa-${mediaIcon}`}
|
||||
aria-hidden='true'
|
||||
/>
|
||||
) : null}
|
||||
{(
|
||||
<VisibilityIcon visibility={status.get('visibility')} />
|
||||
)}
|
||||
{collapsible ? (
|
||||
<IconButton
|
||||
className='status__collapse-button'
|
||||
animate flip
|
||||
active={collapsed}
|
||||
title={
|
||||
collapsed ?
|
||||
intl.formatMessage(messages.uncollapse) :
|
||||
intl.formatMessage(messages.collapse)
|
||||
}
|
||||
icon='angle-double-up'
|
||||
onClick={this.handleCollapsedClick}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
760
app/javascript/glitch/components/status/index.js
Normal file
760
app/javascript/glitch/components/status/index.js
Normal file
@@ -0,0 +1,760 @@
|
||||
/*
|
||||
|
||||
`<Status>`
|
||||
==========
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. *Heavily* rewritten (and documented!) by
|
||||
@kibi@glitch.social as a part of glitch-soc/mastodon. The following
|
||||
features have been added:
|
||||
|
||||
- Better separating the "guts" of statuses from their wrapper(s)
|
||||
- Collapsing statuses
|
||||
- Moving images inside of CWs
|
||||
|
||||
A number of aspects of this original file have been split off into
|
||||
their own components for better maintainance; for these, see:
|
||||
|
||||
- <StatusHeader>
|
||||
- <StatusPrepend>
|
||||
|
||||
…And, of course, the other <Status>-related components as well.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
import scheduleIdleTask from '../../../mastodon/features/ui/util/schedule_idle_task';
|
||||
import { autoPlayGif } from '../../../mastodon/initial_state';
|
||||
|
||||
// Our imports //
|
||||
import StatusPrepend from './prepend';
|
||||
import StatusHeader from './header';
|
||||
import StatusContent from './content';
|
||||
import StatusActionBar from './action_bar';
|
||||
import StatusGallery from './gallery';
|
||||
import StatusPlayer from './player';
|
||||
import NotificationOverlayContainer from '../notification/overlay/container';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
The `<Status>` component:
|
||||
-------------------------
|
||||
|
||||
The `<Status>` component is a container for statuses. It consists of a
|
||||
few parts:
|
||||
|
||||
- The `<StatusPrepend>`, which contains tangential information about
|
||||
the status, such as who reblogged it.
|
||||
- The `<StatusHeader>`, which contains the avatar and username of the
|
||||
status author, as well as a media icon and the "collapse" toggle.
|
||||
- The `<StatusContent>`, which contains the content of the status.
|
||||
- The `<StatusActionBar>`, which provides actions to be performed
|
||||
on statuses, like reblogging or sending a reply.
|
||||
|
||||
### Context
|
||||
|
||||
- __`router` (`PropTypes.object`) :__
|
||||
We need to get our router from the surrounding React context.
|
||||
|
||||
### Props
|
||||
|
||||
- __`id` (`PropTypes.number`) :__
|
||||
The id of the status.
|
||||
|
||||
- __`status` (`ImmutablePropTypes.map`) :__
|
||||
The status object, straight from the store.
|
||||
|
||||
- __`account` (`ImmutablePropTypes.map`) :__
|
||||
Don't be confused by this one! This is **not** the account which
|
||||
posted the status, but the associated account with any further
|
||||
action (eg, a reblog or a favourite).
|
||||
|
||||
- __`settings` (`ImmutablePropTypes.map`) :__
|
||||
These are our local settings, fetched from our store. We need this
|
||||
to determine how best to collapse our statuses, among other things.
|
||||
|
||||
- __`onFavourite`, `onReblog`, `onModalReblog`, `onDelete`,
|
||||
`onMention`, `onMute`, `onMuteConversation`, onBlock`, `onReport`,
|
||||
`onOpenMedia`, `onOpenVideo` (`PropTypes.func`) :__
|
||||
These are all functions passed through from the
|
||||
`<StatusContainer>`. We don't deal with them directly here.
|
||||
|
||||
- __`reblogModal`, `deleteModal` (`PropTypes.bool`) :__
|
||||
These tell whether or not the user has modals activated for
|
||||
reblogging and deleting statuses. They are used by the `onReblog`
|
||||
and `onDelete` functions, but we don't deal with them here.
|
||||
|
||||
- __`muted` (`PropTypes.bool`) :__
|
||||
This has nothing to do with a user or conversation mute! "Muted" is
|
||||
what Mastodon internally calls the subdued look of statuses in the
|
||||
notifications column. This should be `true` for notifications, and
|
||||
`false` otherwise.
|
||||
|
||||
- __`collapse` (`PropTypes.bool`) :__
|
||||
This prop signals a directive from a higher power to (un)collapse
|
||||
a status. Most of the time it should be `undefined`, in which case
|
||||
we do nothing.
|
||||
|
||||
- __`prepend` (`PropTypes.string`) :__
|
||||
The type of prepend: `'reblogged_by'`, `'reblog'`, or
|
||||
`'favourite'`.
|
||||
|
||||
- __`withDismiss` (`PropTypes.bool`) :__
|
||||
Whether or not the status can be dismissed. Used for notifications.
|
||||
|
||||
- __`intersectionObserverWrapper` (`PropTypes.object`) :__
|
||||
This holds our intersection observer. In Mastodon parlance,
|
||||
an "intersection" is just when the status is viewable onscreen.
|
||||
|
||||
### State
|
||||
|
||||
- __`isExpanded` :__
|
||||
Should be either `true`, `false`, or `null`. The meanings of
|
||||
these values are as follows:
|
||||
|
||||
- __`true` :__ The status contains a CW and the CW is expanded.
|
||||
- __`false` :__ The status is collapsed.
|
||||
- __`null` :__ The status is not collapsed or expanded.
|
||||
|
||||
- __`isIntersecting` :__
|
||||
This boolean tells us whether or not the status is currently
|
||||
onscreen.
|
||||
|
||||
- __`isHidden` :__
|
||||
This boolean tells us if the status has been unrendered to save
|
||||
CPUs.
|
||||
|
||||
*/
|
||||
|
||||
export default class Status extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router : PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
id : PropTypes.string,
|
||||
status : ImmutablePropTypes.map,
|
||||
account : ImmutablePropTypes.map,
|
||||
settings : ImmutablePropTypes.map,
|
||||
notification : ImmutablePropTypes.map,
|
||||
onFavourite : PropTypes.func,
|
||||
onReblog : PropTypes.func,
|
||||
onModalReblog : PropTypes.func,
|
||||
onDelete : PropTypes.func,
|
||||
onPin : PropTypes.func,
|
||||
onMention : PropTypes.func,
|
||||
onMute : PropTypes.func,
|
||||
onMuteConversation : PropTypes.func,
|
||||
onBlock : PropTypes.func,
|
||||
onEmbed : PropTypes.func,
|
||||
onHeightChange : PropTypes.func,
|
||||
onReport : PropTypes.func,
|
||||
onOpenMedia : PropTypes.func,
|
||||
onOpenVideo : PropTypes.func,
|
||||
reblogModal : PropTypes.bool,
|
||||
deleteModal : PropTypes.bool,
|
||||
muted : PropTypes.bool,
|
||||
collapse : PropTypes.bool,
|
||||
prepend : PropTypes.string,
|
||||
withDismiss : PropTypes.bool,
|
||||
intersectionObserverWrapper : PropTypes.object,
|
||||
};
|
||||
|
||||
state = {
|
||||
isExpanded : null,
|
||||
isIntersecting : true,
|
||||
isHidden : false,
|
||||
markedForDelete : false,
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
### Implementation
|
||||
|
||||
#### `updateOnProps` and `updateOnStates`.
|
||||
|
||||
`updateOnProps` and `updateOnStates` tell the component when to update.
|
||||
We specify them explicitly because some of our props are dynamically=
|
||||
generated functions, which would otherwise always trigger an update.
|
||||
Of course, this means that if we add an important prop, we will need
|
||||
to remember to specify it here.
|
||||
|
||||
*/
|
||||
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'account',
|
||||
'settings',
|
||||
'prepend',
|
||||
'boostModal',
|
||||
'muted',
|
||||
'collapse',
|
||||
'notification',
|
||||
]
|
||||
|
||||
updateOnStates = [
|
||||
'isExpanded',
|
||||
'markedForDelete',
|
||||
]
|
||||
|
||||
/*
|
||||
|
||||
#### `componentWillReceiveProps()`.
|
||||
|
||||
If our settings have changed to disable collapsed statuses, then we
|
||||
need to make sure that we uncollapse every one. We do that by watching
|
||||
for changes to `settings.collapsed.enabled` in
|
||||
`componentWillReceiveProps()`.
|
||||
|
||||
We also need to watch for changes on the `collapse` prop---if this
|
||||
changes to anything other than `undefined`, then we need to collapse or
|
||||
uncollapse our status accordingly.
|
||||
|
||||
*/
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
|
||||
if (this.state.isExpanded === false) {
|
||||
this.setExpansion(null);
|
||||
}
|
||||
} else if (
|
||||
nextProps.collapse !== this.props.collapse &&
|
||||
nextProps.collapse !== undefined
|
||||
) this.setExpansion(nextProps.collapse ? false : null);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentDidMount()`.
|
||||
|
||||
When mounting, we just check to see if our status should be collapsed,
|
||||
and collapse it if so. We don't need to worry about whether collapsing
|
||||
is enabled here, because `setExpansion()` already takes that into
|
||||
account.
|
||||
|
||||
The cases where a status should be collapsed are:
|
||||
|
||||
- The `collapse` prop has been set to `true`
|
||||
- The user has decided in local settings to collapse all statuses.
|
||||
- The user has decided to collapse all notifications ('muted'
|
||||
statuses).
|
||||
- The user has decided to collapse long statuses and the status is
|
||||
over 400px (without media, or 650px with).
|
||||
- The status is a reply and the user has decided to collapse all
|
||||
replies.
|
||||
- The status contains media and the user has decided to collapse all
|
||||
statuses with media.
|
||||
|
||||
We also start up our intersection observer to monitor our statuses.
|
||||
`componentMounted` lets us know that everything has been set up
|
||||
properly and our intersection observer is good to go.
|
||||
|
||||
*/
|
||||
|
||||
componentDidMount () {
|
||||
const { node, handleIntersection } = this;
|
||||
const {
|
||||
status,
|
||||
settings,
|
||||
collapse,
|
||||
muted,
|
||||
id,
|
||||
intersectionObserverWrapper,
|
||||
prepend,
|
||||
} = this.props;
|
||||
const autoCollapseSettings = settings.getIn(['collapsed', 'auto']);
|
||||
|
||||
if (
|
||||
collapse ||
|
||||
autoCollapseSettings.get('all') || (
|
||||
autoCollapseSettings.get('notifications') && muted
|
||||
) || (
|
||||
autoCollapseSettings.get('lengthy') &&
|
||||
node.clientHeight > (
|
||||
status.get('media_attachments').size && !muted ? 650 : 400
|
||||
)
|
||||
) || (
|
||||
autoCollapseSettings.get('reblogs') &&
|
||||
prepend === 'reblogged_by'
|
||||
) || (
|
||||
autoCollapseSettings.get('replies') &&
|
||||
status.get('in_reply_to_id', null) !== null
|
||||
) || (
|
||||
autoCollapseSettings.get('media') &&
|
||||
!(status.get('spoiler_text').length) &&
|
||||
status.get('media_attachments').size
|
||||
)
|
||||
) this.setExpansion(false);
|
||||
|
||||
if (!intersectionObserverWrapper) return;
|
||||
else intersectionObserverWrapper.observe(
|
||||
id,
|
||||
node,
|
||||
handleIntersection
|
||||
);
|
||||
|
||||
this.componentMounted = true;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `shouldComponentUpdate()`.
|
||||
|
||||
If the status is about to be both offscreen (not intersecting) and
|
||||
hidden, then we only need to update it if it's not that way currently.
|
||||
If the status is moving from offscreen to onscreen, then we *have* to
|
||||
re-render, so that we can unhide the element if necessary.
|
||||
|
||||
If neither of these cases are true, we can leave it up to our
|
||||
`updateOnProps` and `updateOnStates` arrays.
|
||||
|
||||
*/
|
||||
|
||||
shouldComponentUpdate (nextProps, nextState) {
|
||||
switch (true) {
|
||||
case !nextState.isIntersecting && nextState.isHidden:
|
||||
return this.state.isIntersecting || !this.state.isHidden;
|
||||
case nextState.isIntersecting && !this.state.isIntersecting:
|
||||
return true;
|
||||
default:
|
||||
return super.shouldComponentUpdate(nextProps, nextState);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentDidUpdate()`.
|
||||
|
||||
If our component is being rendered for any reason and an update has
|
||||
triggered, this will save its height.
|
||||
|
||||
This is, frankly, a bit overkill, as the only instance when we
|
||||
actually *need* to update the height right now should be when the
|
||||
value of `isExpanded` has changed. But it makes for more readable
|
||||
code and prevents bugs in the future where the height isn't set
|
||||
properly after some change.
|
||||
|
||||
*/
|
||||
|
||||
componentDidUpdate () {
|
||||
if (
|
||||
this.state.isIntersecting || !this.state.isHidden
|
||||
) this.saveHeight();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentWillUnmount()`.
|
||||
|
||||
If our component is about to unmount, then we'd better unset
|
||||
`this.componentMounted`.
|
||||
|
||||
*/
|
||||
|
||||
componentWillUnmount () {
|
||||
this.componentMounted = false;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `handleIntersection()`.
|
||||
|
||||
`handleIntersection()` either hides the status (if it is offscreen) or
|
||||
unhides it (if it is onscreen). It's called by
|
||||
`intersectionObserverWrapper.observe()`.
|
||||
|
||||
If our status isn't intersecting, we schedule an idle task (using the
|
||||
aptly-named `scheduleIdleTask()`) to hide the status at the next
|
||||
available opportunity.
|
||||
|
||||
tootsuite/mastodon left us with the following enlightening comment
|
||||
regarding this function:
|
||||
|
||||
> Edge 15 doesn't support isIntersecting, but we can infer it
|
||||
|
||||
It then implements a polyfill (intersectionRect.height > 0) which isn't
|
||||
actually sufficient. The short answer is, this behaviour isn't really
|
||||
supported on Edge but we can get kinda close.
|
||||
|
||||
*/
|
||||
|
||||
handleIntersection = (entry) => {
|
||||
const isIntersecting = (
|
||||
typeof entry.isIntersecting === 'boolean' ?
|
||||
entry.isIntersecting :
|
||||
entry.intersectionRect.height > 0
|
||||
);
|
||||
this.setState(
|
||||
(prevState) => {
|
||||
if (prevState.isIntersecting && !isIntersecting) {
|
||||
scheduleIdleTask(this.hideIfNotIntersecting);
|
||||
}
|
||||
return {
|
||||
isIntersecting : isIntersecting,
|
||||
isHidden : false,
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `hideIfNotIntersecting()`.
|
||||
|
||||
This function will hide the status if we're still not intersecting.
|
||||
Hiding the status means that it will just render an empty div instead
|
||||
of actual content, which saves RAMS and CPUs or some such.
|
||||
|
||||
*/
|
||||
|
||||
hideIfNotIntersecting = () => {
|
||||
if (!this.componentMounted) return;
|
||||
this.setState(
|
||||
(prevState) => ({ isHidden: !prevState.isIntersecting })
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `saveHeight()`.
|
||||
|
||||
`saveHeight()` saves the height of our status so that when whe hide it
|
||||
we preserve its dimensions. We only want to store our height, though,
|
||||
if our status has content (otherwise, it would imply that it is
|
||||
already hidden).
|
||||
|
||||
*/
|
||||
|
||||
saveHeight = () => {
|
||||
if (this.node && this.node.children.length) {
|
||||
this.height = this.node.getBoundingClientRect().height;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `setExpansion()`.
|
||||
|
||||
`setExpansion()` sets the value of `isExpanded` in our state. It takes
|
||||
one argument, `value`, which gives the desired value for `isExpanded`.
|
||||
The default for this argument is `null`.
|
||||
|
||||
`setExpansion()` automatically checks for us whether toot collapsing
|
||||
is enabled, so we don't have to.
|
||||
|
||||
We use a `switch` statement to simplify our code.
|
||||
|
||||
*/
|
||||
|
||||
setExpansion = (value) => {
|
||||
switch (true) {
|
||||
case value === undefined || value === null:
|
||||
this.setState({ isExpanded: null });
|
||||
break;
|
||||
case !value && this.props.settings.getIn(['collapsed', 'enabled']):
|
||||
this.setState({ isExpanded: false });
|
||||
break;
|
||||
case !!value:
|
||||
this.setState({ isExpanded: true });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `handleRef()`.
|
||||
|
||||
`handleRef()` just saves a reference to our status node to `this.node`.
|
||||
It also saves our height, in case the height of our node has changed.
|
||||
|
||||
*/
|
||||
|
||||
handleRef = (node) => {
|
||||
this.node = node;
|
||||
this.saveHeight();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `parseClick()`.
|
||||
|
||||
`parseClick()` takes a click event and responds appropriately.
|
||||
If our status is collapsed, then clicking on it should uncollapse it.
|
||||
If `Shift` is held, then clicking on it should collapse it.
|
||||
Otherwise, we open the url handed to us in `destination`, if
|
||||
applicable.
|
||||
|
||||
*/
|
||||
|
||||
parseClick = (e, destination) => {
|
||||
const { router } = this.context;
|
||||
const { status } = this.props;
|
||||
const { isExpanded } = this.state;
|
||||
if (!router) return;
|
||||
if (destination === undefined) {
|
||||
destination = `/statuses/${
|
||||
status.getIn(['reblog', 'id'], status.get('id'))
|
||||
}`;
|
||||
}
|
||||
if (e.button === 0) {
|
||||
if (isExpanded === false) this.setExpansion(null);
|
||||
else if (e.shiftKey) {
|
||||
this.setExpansion(false);
|
||||
document.getSelection().removeAllRanges();
|
||||
} else router.history.push(destination);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `render()`.
|
||||
|
||||
`render()` actually puts our element on the screen. The particulars of
|
||||
this operation are further explained in the code below.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const {
|
||||
parseClick,
|
||||
setExpansion,
|
||||
saveHeight,
|
||||
handleRef,
|
||||
} = this;
|
||||
const { router } = this.context;
|
||||
const {
|
||||
status,
|
||||
account,
|
||||
settings,
|
||||
collapsed,
|
||||
muted,
|
||||
prepend,
|
||||
intersectionObserverWrapper,
|
||||
onOpenVideo,
|
||||
onOpenMedia,
|
||||
notification,
|
||||
...other
|
||||
} = this.props;
|
||||
const { isExpanded, isIntersecting, isHidden } = this.state;
|
||||
let background = null;
|
||||
let attachments = null;
|
||||
let media = null;
|
||||
let mediaIcon = null;
|
||||
|
||||
/*
|
||||
|
||||
If we don't have a status, then we don't render anything.
|
||||
|
||||
*/
|
||||
|
||||
if (status === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
If our status is offscreen and hidden, then we render an empty <div> in
|
||||
its place. We fill it with "content" but note that opacity is set to 0.
|
||||
|
||||
*/
|
||||
|
||||
if (!isIntersecting && isHidden) {
|
||||
return (
|
||||
<div
|
||||
ref={this.handleRef}
|
||||
data-id={status.get('id')}
|
||||
style={{
|
||||
height : `${this.height}px`,
|
||||
opacity : 0,
|
||||
overflow : 'hidden',
|
||||
}}
|
||||
>
|
||||
{
|
||||
status.getIn(['account', 'display_name']) ||
|
||||
status.getIn(['account', 'username'])
|
||||
}
|
||||
{status.get('content')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
If user backgrounds for collapsed statuses are enabled, then we
|
||||
initialize our background accordingly. This will only be rendered if
|
||||
the status is collapsed.
|
||||
|
||||
*/
|
||||
|
||||
if (
|
||||
settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])
|
||||
) background = status.getIn(['account', 'header']);
|
||||
|
||||
/*
|
||||
|
||||
This handles our media attachments. Note that we don't show media on
|
||||
muted (notification) statuses. If the media type is unknown, then we
|
||||
simply ignore it.
|
||||
|
||||
After we have generated our appropriate media element and stored it in
|
||||
`media`, we snatch the thumbnail to use as our `background` if media
|
||||
backgrounds for collapsed statuses are enabled.
|
||||
|
||||
*/
|
||||
|
||||
attachments = status.get('media_attachments');
|
||||
if (attachments.size && !muted) {
|
||||
if (attachments.some((item) => item.get('type') === 'unknown')) {
|
||||
|
||||
} else if (
|
||||
attachments.getIn([0, 'type']) === 'video'
|
||||
) {
|
||||
media = ( // Media type is 'video'
|
||||
<StatusPlayer
|
||||
media={attachments.get(0)}
|
||||
sensitive={status.get('sensitive')}
|
||||
letterbox={settings.getIn(['media', 'letterbox'])}
|
||||
fullwidth={settings.getIn(['media', 'fullwidth'])}
|
||||
height={250}
|
||||
onOpenVideo={onOpenVideo}
|
||||
/>
|
||||
);
|
||||
mediaIcon = 'video-camera';
|
||||
} else { // Media type is 'image' or 'gifv'
|
||||
media = (
|
||||
<StatusGallery
|
||||
media={attachments}
|
||||
sensitive={status.get('sensitive')}
|
||||
letterbox={settings.getIn(['media', 'letterbox'])}
|
||||
fullwidth={settings.getIn(['media', 'fullwidth'])}
|
||||
height={250}
|
||||
onOpenMedia={onOpenMedia}
|
||||
autoPlayGif={autoPlayGif}
|
||||
/>
|
||||
);
|
||||
mediaIcon = 'picture-o';
|
||||
}
|
||||
|
||||
if (
|
||||
!status.get('sensitive') &&
|
||||
!(status.get('spoiler_text').length > 0) &&
|
||||
settings.getIn(['collapsed', 'backgrounds', 'preview_images'])
|
||||
) background = attachments.getIn([0, 'preview_url']);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Here we prepare extra data-* attributes for CSS selectors.
|
||||
Users can use those for theming, hiding avatars etc via UserStyle
|
||||
|
||||
*/
|
||||
|
||||
const selectorAttribs = {
|
||||
'data-status-by': `@${status.getIn(['account', 'acct'])}`,
|
||||
};
|
||||
|
||||
if (prepend && account) {
|
||||
const notifKind = {
|
||||
favourite: 'favourited',
|
||||
reblog: 'boosted',
|
||||
reblogged_by: 'boosted',
|
||||
}[prepend];
|
||||
|
||||
selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Finally, we can render our status. We just put the pieces together
|
||||
from above. We only render the action bar if the status isn't
|
||||
collapsed.
|
||||
|
||||
*/
|
||||
|
||||
return (
|
||||
<article
|
||||
className={
|
||||
`status${
|
||||
muted ? ' muted' : ''
|
||||
} status-${status.get('visibility')}${
|
||||
isExpanded === false ? ' collapsed' : ''
|
||||
}${
|
||||
isExpanded === false && background ? ' has-background' : ''
|
||||
}${
|
||||
this.state.markedForDelete ? ' marked-for-delete' : ''
|
||||
}`
|
||||
}
|
||||
style={{
|
||||
backgroundImage: (
|
||||
isExpanded === false && background ?
|
||||
`url(${background})` :
|
||||
'none'
|
||||
),
|
||||
}}
|
||||
ref={handleRef}
|
||||
{...selectorAttribs}
|
||||
>
|
||||
{prepend && account ? (
|
||||
<StatusPrepend
|
||||
type={prepend}
|
||||
account={account}
|
||||
parseClick={parseClick}
|
||||
notificationId={this.props.notificationId}
|
||||
/>
|
||||
) : null}
|
||||
<StatusHeader
|
||||
status={status}
|
||||
friend={account}
|
||||
mediaIcon={mediaIcon}
|
||||
collapsible={settings.getIn(['collapsed', 'enabled'])}
|
||||
collapsed={isExpanded === false}
|
||||
parseClick={parseClick}
|
||||
setExpansion={setExpansion}
|
||||
/>
|
||||
<StatusContent
|
||||
status={status}
|
||||
media={media}
|
||||
mediaIcon={mediaIcon}
|
||||
expanded={isExpanded}
|
||||
setExpansion={setExpansion}
|
||||
onHeightUpdate={saveHeight}
|
||||
parseClick={parseClick}
|
||||
disabled={!router}
|
||||
/>
|
||||
{isExpanded !== false ? (
|
||||
<StatusActionBar
|
||||
{...other}
|
||||
status={status}
|
||||
account={status.get('account')}
|
||||
/>
|
||||
) : null}
|
||||
{notification ? (
|
||||
<NotificationOverlayContainer
|
||||
notification={notification}
|
||||
/>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
203
app/javascript/glitch/components/status/player.js
Normal file
203
app/javascript/glitch/components/status/player.js
Normal file
@@ -0,0 +1,203 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import { isIOS } from '../../../mastodon/is_mobile';
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
|
||||
toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusPlayer extends React.PureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
media: ImmutablePropTypes.map.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
fullwidth: PropTypes.bool,
|
||||
height: PropTypes.number,
|
||||
sensitive: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
autoplay: PropTypes.bool,
|
||||
onOpenVideo: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
height: 110,
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: !this.props.sensitive,
|
||||
preview: true,
|
||||
muted: true,
|
||||
hasAudio: true,
|
||||
videoError: false,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.setState({ muted: !this.state.muted });
|
||||
}
|
||||
|
||||
handleVideoClick = (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const node = this.video;
|
||||
|
||||
if (node.paused) {
|
||||
node.play();
|
||||
} else {
|
||||
node.pause();
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ preview: !this.state.preview });
|
||||
}
|
||||
|
||||
handleVisibility = () => {
|
||||
this.setState({
|
||||
visible: !this.state.visible,
|
||||
preview: true,
|
||||
});
|
||||
}
|
||||
|
||||
handleExpand = () => {
|
||||
this.video.pause();
|
||||
this.props.onOpenVideo(this.props.media, this.video.currentTime);
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.video = c;
|
||||
}
|
||||
|
||||
handleLoadedData = () => {
|
||||
if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
|
||||
this.setState({ hasAudio: false });
|
||||
}
|
||||
}
|
||||
|
||||
handleVideoError = () => {
|
||||
this.setState({ videoError: true });
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.addEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.addEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.addEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.addEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.removeEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.removeEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
|
||||
|
||||
let spoilerButton = (
|
||||
<div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
|
||||
<IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
|
||||
</div>
|
||||
);
|
||||
|
||||
let expandButton = !this.context.router ? '' : (
|
||||
<div className='status__video-player-expand'>
|
||||
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
|
||||
</div>
|
||||
);
|
||||
|
||||
let muteButton = '';
|
||||
|
||||
if (this.state.hasAudio) {
|
||||
muteButton = (
|
||||
<div className='status__video-player-mute'>
|
||||
<IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.state.visible) {
|
||||
if (sensitive) {
|
||||
return (
|
||||
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
|
||||
{spoilerButton}
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
|
||||
{spoilerButton}
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.preview && !autoplay) {
|
||||
return (
|
||||
<div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
|
||||
{spoilerButton}
|
||||
<div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.videoError) {
|
||||
return (
|
||||
<div style={{ height: `${height}px` }} className='video-error-cover' >
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
|
||||
{spoilerButton}
|
||||
{muteButton}
|
||||
{expandButton}
|
||||
|
||||
<video
|
||||
className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
ref={this.setRef}
|
||||
src={media.get('url')}
|
||||
autoPlay={!isIOS()}
|
||||
loop
|
||||
muted={this.state.muted}
|
||||
onClick={this.handleVideoClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
159
app/javascript/glitch/components/status/prepend.js
Normal file
159
app/javascript/glitch/components/status/prepend.js
Normal file
@@ -0,0 +1,159 @@
|
||||
/*
|
||||
|
||||
`<StatusPrepend>`
|
||||
=================
|
||||
|
||||
Originally a part of `<Status>`, but extracted into a separate
|
||||
component for better documentation and maintainance by
|
||||
@kibi@glitch.social as a part of glitch-soc/mastodon.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
The `<StatusPrepend>` component:
|
||||
--------------------------------
|
||||
|
||||
The `<StatusPrepend>` component holds a status's prepend, ie the text
|
||||
that says “X reblogged this,” etc. It is represented by an `<aside>`
|
||||
element.
|
||||
|
||||
### Props
|
||||
|
||||
- __`type` (`PropTypes.string`) :__
|
||||
The type of prepend. One of `'reblogged_by'`, `'reblog'`,
|
||||
`'favourite'`.
|
||||
|
||||
- __`account` (`ImmutablePropTypes.map`) :__
|
||||
The account associated with the prepend.
|
||||
|
||||
- __`parseClick` (`PropTypes.func.isRequired`) :__
|
||||
Our click parsing function.
|
||||
|
||||
*/
|
||||
|
||||
export default class StatusPrepend extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
type: PropTypes.string.isRequired,
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
parseClick: PropTypes.func.isRequired,
|
||||
notificationId: PropTypes.number,
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
### Implementation
|
||||
|
||||
#### `handleClick()`.
|
||||
|
||||
This is just a small wrapper for `parseClick()` that gets fired when
|
||||
an account link is clicked.
|
||||
|
||||
*/
|
||||
|
||||
handleClick = (e) => {
|
||||
const { account, parseClick } = this.props;
|
||||
parseClick(e, `/accounts/${+account.get('id')}`);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `<Message>`.
|
||||
|
||||
`<Message>` is a quick functional React component which renders the
|
||||
actual prepend message based on our provided `type`. First we create a
|
||||
`link` for the account's name, and then use `<FormattedMessage>` to
|
||||
generate the message.
|
||||
|
||||
*/
|
||||
|
||||
Message = () => {
|
||||
const { type, account } = this.props;
|
||||
let link = (
|
||||
<a
|
||||
onClick={this.handleClick}
|
||||
href={account.get('url')}
|
||||
className='status__display-name'
|
||||
>
|
||||
<b
|
||||
dangerouslySetInnerHTML={{
|
||||
__html : account.get('display_name_html') || account.get('username'),
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
switch (type) {
|
||||
case 'reblogged_by':
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='status.reblogged_by'
|
||||
defaultMessage='{name} boosted'
|
||||
values={{ name : link }}
|
||||
/>
|
||||
);
|
||||
case 'favourite':
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='notification.favourite'
|
||||
defaultMessage='{name} favourited your status'
|
||||
values={{ name : link }}
|
||||
/>
|
||||
);
|
||||
case 'reblog':
|
||||
return (
|
||||
<FormattedMessage
|
||||
id='notification.reblog'
|
||||
defaultMessage='{name} boosted your status'
|
||||
values={{ name : link }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `render()`.
|
||||
|
||||
Our `render()` is incredibly simple; we just render the icon and then
|
||||
the `<Message>` inside of an <aside>.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const { Message } = this;
|
||||
const { type } = this.props;
|
||||
|
||||
return !type ? null : (
|
||||
<aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
|
||||
<div className={type === 'reblogged_by' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}>
|
||||
<i
|
||||
className={`fa fa-fw fa-${
|
||||
type === 'favourite' ? 'star star-icon' : 'retweet'
|
||||
} status__prepend-icon`}
|
||||
/>
|
||||
</div>
|
||||
<Message />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
48
app/javascript/glitch/components/status/visibility_icon.js
Normal file
48
app/javascript/glitch/components/status/visibility_icon.js
Normal file
@@ -0,0 +1,48 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
const messages = defineMessages({
|
||||
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
|
||||
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
|
||||
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
|
||||
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class VisibilityIcon extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
visibility: PropTypes.string,
|
||||
intl: PropTypes.object.isRequired,
|
||||
withLabel: PropTypes.bool,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { withLabel, visibility, intl } = this.props;
|
||||
|
||||
const visibilityClass = {
|
||||
public: 'globe',
|
||||
unlisted: 'unlock-alt',
|
||||
private: 'lock',
|
||||
direct: 'envelope',
|
||||
}[visibility];
|
||||
|
||||
const label = intl.formatMessage(messages[visibility]);
|
||||
|
||||
const icon = (<i
|
||||
className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
|
||||
title={label}
|
||||
aria-hidden='true'
|
||||
/>);
|
||||
|
||||
if (withLabel) {
|
||||
return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>);
|
||||
} else {
|
||||
return icon;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
Reference in New Issue
Block a user