Archos/masto-fe-archos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[build] upgrade eslint to 9.37.0 (#88)

Browse Source 
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/88
Co-authored-by: Zoë Bijl <moiety@noreply.codeberg.org>
Co-committed-by: Zoë Bijl <moiety@noreply.codeberg.org>
This commit is contained in:
Zoë Bijl
2025-10-12 13:42:02 +02:00
committed by tobi
parent 75d7a62693
commit 1ff70886a1
975 changed files with 22196 additions and 21964 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/flavours/glitch/features/status/components/action_bar.jsx
+64 -64
View File
@@ -1,46 +1,46 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import PropTypes from "prop-types";
import { PureComponent } from "react";
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages, injectIntl } from "react-intl";
import classNames from 'classnames';
import classNames from "classnames";
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePropTypes from "react-immutable-proptypes";
import { IconButton } from 'flavours/glitch/components/icon_button';
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
import { me } from 'flavours/glitch/initial_state';
import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
import { IconButton } from "flavours/glitch/components/icon_button";
import DropdownMenuContainer from "flavours/glitch/containers/dropdown_menu_container";
import { me } from "flavours/glitch/initial_state";
import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from "flavours/glitch/permissions";
import { accountAdminLink, statusAdminLink } from "flavours/glitch/utils/backend_links";
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
edit: { id: 'status.edit', defaultMessage: 'Edit' },
direct: { id: 'status.direct', defaultMessage: 'Privately mention @{name}' },
mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
reply: { id: 'status.reply', defaultMessage: 'Reply' },
reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
more: { id: 'status.more', defaultMessage: 'More' },
mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
block: { id: 'status.block', defaultMessage: 'Block @{name}' },
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
share: { id: 'status.share', defaultMessage: 'Share' },
pin: { id: 'status.pin', defaultMessage: 'Pin on profile' },
unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' },
embed: { id: 'status.embed', defaultMessage: 'Embed' },
admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
openOriginalPage: { id: 'account.open_original_page', defaultMessage: 'Open original page' },
delete: { id: "status.delete", defaultMessage: "Delete" },
redraft: { id: "status.redraft", defaultMessage: "Delete & re-draft" },
edit: { id: "status.edit", defaultMessage: "Edit" },
direct: { id: "status.direct", defaultMessage: "Privately mention @{name}" },
mention: { id: "status.mention", defaultMessage: "Mention @{name}" },
reply: { id: "status.reply", defaultMessage: "Reply" },
reblog: { id: "status.reblog", defaultMessage: "Boost" },
reblog_private: { id: "status.reblog_private", defaultMessage: "Boost with original visibility" },
cancel_reblog_private: { id: "status.cancel_reblog_private", defaultMessage: "Unboost" },
cannot_reblog: { id: "status.cannot_reblog", defaultMessage: "This post cannot be boosted" },
favourite: { id: "status.favourite", defaultMessage: "Favorite" },
bookmark: { id: "status.bookmark", defaultMessage: "Bookmark" },
more: { id: "status.more", defaultMessage: "More" },
mute: { id: "status.mute", defaultMessage: "Mute @{name}" },
muteConversation: { id: "status.mute_conversation", defaultMessage: "Mute conversation" },
unmuteConversation: { id: "status.unmute_conversation", defaultMessage: "Unmute conversation" },
block: { id: "status.block", defaultMessage: "Block @{name}" },
report: { id: "status.report", defaultMessage: "Report @{name}" },
share: { id: "status.share", defaultMessage: "Share" },
pin: { id: "status.pin", defaultMessage: "Pin on profile" },
unpin: { id: "status.unpin", defaultMessage: "Unpin from profile" },
embed: { id: "status.embed", defaultMessage: "Embed" },
admin_account: { id: "status.admin_account", defaultMessage: "Open moderation interface for @{name}" },
admin_status: { id: "status.admin_status", defaultMessage: "Open this post in the moderation interface" },
admin_domain: { id: "status.admin_domain", defaultMessage: "Open moderation interface for {domain}" },
copy: { id: "status.copy", defaultMessage: "Copy link to post" },
openOriginalPage: { id: "account.open_original_page", defaultMessage: "Open original page" },
});
class ActionBar extends PureComponent {
@@ -98,15 +98,15 @@ class ActionBar extends PureComponent {
};
handleDirectClick = () => {
this.props.onDirect(this.props.status.get('account'), this.context.router.history);
this.props.onDirect(this.props.status.get("account"), this.context.router.history);
};
handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.context.router.history);
this.props.onMention(this.props.status.get("account"), this.context.router.history);
};
handleMuteClick = () => {
this.props.onMute(this.props.status.get('account'));
this.props.onMute(this.props.status.get("account"));
};
handleConversationMuteClick = () => {
@@ -127,7 +127,7 @@ class ActionBar extends PureComponent {
handleShare = () => {
navigator.share({
url: this.props.status.get('url'),
url: this.props.status.get("url"),
});
};
@@ -136,7 +136,7 @@ class ActionBar extends PureComponent {
};
handleCopy = () => {
const url = this.props.status.get('url');
const url = this.props.status.get("url");
navigator.clipboard.writeText(url);
};
@@ -144,21 +144,21 @@ class ActionBar extends PureComponent {
const { status, intl } = this.props;
const { signedIn, permissions } = this.context.identity;
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
const pinnableStatus = ['public', 'unlisted', 'private'].includes(status.get('visibility'));
const mutingConversation = status.get('muted');
const writtenByMe = status.getIn(['account', 'id']) === me;
const isRemote = status.getIn(['account', 'username']) !== status.getIn(['account', 'acct']);
const publicStatus = ["public", "unlisted"].includes(status.get("visibility"));
const pinnableStatus = ["public", "unlisted", "private"].includes(status.get("visibility"));
const mutingConversation = status.get("muted");
const writtenByMe = status.getIn(["account", "id"]) === me;
const isRemote = status.getIn(["account", "username"]) !== status.getIn(["account", "acct"]);
let menu = [];
if (publicStatus && isRemote) {
menu.push({ text: intl.formatMessage(messages.openOriginalPage), href: status.get('url') });
menu.push({ text: intl.formatMessage(messages.openOriginalPage), href: status.get("url") });
}
menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy });
if (publicStatus && 'share' in navigator) {
if (publicStatus && "share" in navigator) {
menu.push({ text: intl.formatMessage(messages.share), action: this.handleShare });
}
@@ -171,7 +171,7 @@ class ActionBar extends PureComponent {
if (writtenByMe) {
if (pinnableStatus) {
menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick });
menu.push({ text: intl.formatMessage(status.get("pinned") ? messages.unpin : messages.pin), action: this.handlePinClick });
menu.push(null);
}
@@ -181,34 +181,34 @@ class ActionBar extends PureComponent {
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick, dangerous: true });
menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick, dangerous: true });
} else {
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(["account", "username"]) }), action: this.handleMentionClick });
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(["account", "username"]) }), action: this.handleDirectClick });
menu.push(null);
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick, dangerous: true });
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick, dangerous: true });
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport, dangerous: true });
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(["account", "username"]) }), action: this.handleMuteClick, dangerous: true });
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(["account", "username"]) }), action: this.handleBlockClick, dangerous: true });
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(["account", "username"]) }), action: this.handleReport, dangerous: true });
if (((permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS && (accountAdminLink || statusAdminLink)) || (isRemote && (permissions & PERMISSION_MANAGE_FEDERATION) === PERMISSION_MANAGE_FEDERATION)) {
menu.push(null);
if ((permissions & PERMISSION_MANAGE_USERS) === PERMISSION_MANAGE_USERS) {
if (accountAdminLink !== undefined) {
menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: accountAdminLink(status.getIn(['account', 'id'])) });
menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(["account", "username"]) }), href: accountAdminLink(status.getIn(["account", "id"])) });
}
if (statusAdminLink !== undefined) {
menu.push({ text: intl.formatMessage(messages.admin_status), href: statusAdminLink(status.getIn(['account', 'id']), status.get('id')) });
menu.push({ text: intl.formatMessage(messages.admin_status), href: statusAdminLink(status.getIn(["account", "id"]), status.get("id")) });
}
}
if (isRemote && (permissions & PERMISSION_MANAGE_FEDERATION) === PERMISSION_MANAGE_FEDERATION) {
const domain = status.getIn(['account', 'acct']).split('@')[1];
const domain = status.getIn(["account", "acct"]).split("@")[1];
menu.push({ text: intl.formatMessage(messages.admin_domain, { domain: domain }), href: `/admin/instances/${domain}` });
}
}
}
}
const reblogPrivate = status.getIn(['account', 'id']) === me && status.get('visibility') === 'private';
const reblogPrivate = status.getIn(["account", "id"]) === me && status.get("visibility") === "private";
let reblogTitle;
if (status.get('reblogged')) {
if (status.get("reblogged")) {
reblogTitle = intl.formatMessage(messages.cancel_reblog_private);
} else if (publicStatus) {
reblogTitle = intl.formatMessage(messages.reblog);
@@ -220,10 +220,10 @@ class ActionBar extends PureComponent {
return (
<div className='detailed-status__action-bar'>
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
<div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
<div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
<div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get("in_reply_to_id", null) === null ? "reply" : "reply-all"} onClick={this.handleReplyClick} /></div>
<div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get("reblogged")} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
<div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get("favourited")} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
<div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get("bookmarked")} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
<div className='detailed-status__action-bar-dropdown'>
<DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title={intl.formatMessage(messages.more)} />
app/javascript/flavours/glitch/features/status/components/card.jsx
+50 -50
View File
@@ -1,19 +1,19 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import PropTypes from "prop-types";
import { PureComponent } from "react";
import { FormattedMessage } from 'react-intl';
import { FormattedMessage } from "react-intl";
import classnames from 'classnames';
import classnames from "classnames";
import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Immutable from "immutable";
import ImmutablePropTypes from "react-immutable-proptypes";
import { Blurhash } from 'flavours/glitch/components/blurhash';
import { Icon } from 'flavours/glitch/components/icon';
import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
import { Blurhash } from "flavours/glitch/components/blurhash";
import { Icon } from "flavours/glitch/components/icon";
import { decode as decodeIDNA } from "flavours/glitch/utils/idna";
const getHostname = url => {
const parser = document.createElement('a');
const parser = document.createElement("a");
parser.href = url;
return parser.hostname;
};
@@ -21,21 +21,21 @@ const getHostname = url => {
const domParser = new DOMParser();
const addAutoPlay = html => {
const document = domParser.parseFromString(html, 'text/html').documentElement;
const iframe = document.querySelector('iframe');
const document = domParser.parseFromString(html, "text/html").documentElement;
const iframe = document.querySelector("iframe");
if (iframe) {
if (iframe.src.indexOf('?') !== -1) {
iframe.src += '&';
if (iframe.src.indexOf("?") !== -1) {
iframe.src += "&";
} else {
iframe.src += '?';
iframe.src += "?";
}
iframe.src += 'autoplay=1&auto_play=1';
iframe.src += "autoplay=1&auto_play=1";
// DOM parser creates html/body elements around original HTML fragment,
// so we need to get innerHTML out of the body and not the entire document
return document.querySelector('body').innerHTML;
return document.querySelector("body").innerHTML;
}
return html;
@@ -71,11 +71,11 @@ export default class Card extends PureComponent {
}
componentDidMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
window.addEventListener("resize", this.handleResize, { passive: true });
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
window.removeEventListener("resize", this.handleResize);
}
handlePhotoClick = () => {
@@ -84,13 +84,13 @@ export default class Card extends PureComponent {
onOpenMedia(
Immutable.fromJS([
{
type: 'image',
url: card.get('embed_url'),
description: card.get('title'),
type: "image",
url: card.get("embed_url"),
description: card.get("title"),
meta: {
original: {
width: card.get('width'),
height: card.get('height'),
width: card.get("width"),
height: card.get("height"),
},
},
},
@@ -102,7 +102,7 @@ export default class Card extends PureComponent {
handleEmbedClick = () => {
const { card } = this.props;
if (card.get('type') === 'photo') {
if (card.get("type") === "photo") {
this.handlePhotoClick();
} else {
this.setState({ embedded: true });
@@ -125,14 +125,14 @@ export default class Card extends PureComponent {
renderVideo () {
const { card } = this.props;
const content = { __html: addAutoPlay(card.get('html')) };
const content = { __html: addAutoPlay(card.get("html")) };
return (
<div
ref={this.setRef}
className='status-card__image status-card-video'
dangerouslySetInnerHTML={content}
style={{ aspectRatio: `${card.get('width')} / ${card.get('height')}` }}
style={{ aspectRatio: `${card.get("width")} / ${card.get("height")}` }}
/>
);
}
@@ -145,41 +145,41 @@ export default class Card extends PureComponent {
return null;
}
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
const horizontal = (!compact && card.get('width') > card.get('height')) || card.get('type') !== 'link' || embedded;
const interactive = card.get('type') !== 'link';
const className = classnames('status-card', { horizontal, compact, interactive });
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener noreferrer' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
const language = card.get('language') || '';
const provider = card.get("provider_name").length === 0 ? decodeIDNA(getHostname(card.get("url"))) : card.get("provider_name");
const horizontal = (!compact && card.get("width") > card.get("height")) || card.get("type") !== "link" || embedded;
const interactive = card.get("type") !== "link";
const className = classnames("status-card", { horizontal, compact, interactive });
const title = interactive ? <a className='status-card__title' href={card.get("url")} title={card.get("title")} rel='noopener noreferrer' target='_blank'><strong>{card.get("title")}</strong></a> : <strong className='status-card__title' title={card.get("title")}>{card.get("title")}</strong>;
const language = card.get("language") || "";
const description = (
<div className='status-card__content' lang={language}>
{title}
{!(horizontal || compact) && <p className='status-card__description' title={card.get('description')}>{card.get('description')}</p>}
{!(horizontal || compact) && <p className='status-card__description' title={card.get("description")}>{card.get("description")}</p>}
<span className='status-card__host'>{provider}</span>
</div>
);
const thumbnailStyle = {
visibility: revealed? null : 'hidden',
visibility: revealed? null : "hidden",
};
if (horizontal) {
thumbnailStyle.aspectRatio = (compact && !embedded) ? '16 / 9' : `${card.get('width')} / ${card.get('height')}`;
thumbnailStyle.aspectRatio = (compact && !embedded) ? "16 / 9" : `${card.get("width")} / ${card.get("height")}`;
}
let embed = '';
let embed = "";
let canvas = (
<Blurhash
className={classnames('status-card__image-preview', {
'status-card__image-preview--hidden': revealed && this.state.previewLoaded,
className={classnames("status-card__image-preview", {
"status-card__image-preview--hidden": revealed && this.state.previewLoaded,
})}
hash={card.get('blurhash')}
hash={card.get("blurhash")}
dummy={!useBlurhash}
/>
);
const thumbnailDescription = card.get('image_description');
const thumbnail = <img src={card.get('image')} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
const thumbnailDescription = card.get("image_description");
const thumbnail = <img src={card.get("image")} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'>
@@ -189,7 +189,7 @@ export default class Card extends PureComponent {
</button>
);
spoilerButton = (
<div className={classnames('spoiler-button', { 'spoiler-button--minified': revealed })}>
<div className={classnames("spoiler-button", { "spoiler-button--minified": revealed })}>
{spoilerButton}
</div>
);
@@ -198,10 +198,10 @@ export default class Card extends PureComponent {
if (embedded) {
embed = this.renderVideo();
} else {
let iconVariant = 'play';
let iconVariant = "play";
if (card.get('type') === 'photo') {
iconVariant = 'search-plus';
if (card.get("type") === "photo") {
iconVariant = "search-plus";
}
embed = (
@@ -213,7 +213,7 @@ export default class Card extends PureComponent {
<div className='status-card__actions'>
<div>
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>}
{horizontal && <a href={card.get("url")} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>}
</div>
</div>
)}
@@ -223,12 +223,12 @@ export default class Card extends PureComponent {
}
return (
<div className={className} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
<div className={className} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? "button" : null}>
{embed}
{!compact && description}
</div>
);
} else if (card.get('image')) {
} else if (card.get("image")) {
embed = (
<div className='status-card__image'>
{canvas}
@@ -244,7 +244,7 @@ export default class Card extends PureComponent {
}
return (
<a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
<a href={card.get("url")} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
{embed}
{description}
</a>
app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
+107 -107
View File
@@ -1,30 +1,30 @@
import PropTypes from 'prop-types';
import PropTypes from "prop-types";
import { injectIntl, FormattedDate } from 'react-intl';
import { injectIntl, FormattedDate } from "react-intl";
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import classNames from "classnames";
import { Link } from "react-router-dom";
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from "react-immutable-proptypes";
import ImmutablePureComponent from "react-immutable-pure-component";
import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import { Avatar } from 'flavours/glitch/components/avatar';
import { DisplayName } from 'flavours/glitch/components/display_name';
import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
import { Icon } from 'flavours/glitch/components/icon';
import MediaGallery from 'flavours/glitch/components/media_gallery';
import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
import StatusContent from 'flavours/glitch/components/status_content';
import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
import PollContainer from 'flavours/glitch/containers/poll_container';
import Audio from 'flavours/glitch/features/audio';
import Video from 'flavours/glitch/features/video';
import { AnimatedNumber } from "flavours/glitch/components/animated_number";
import AttachmentList from "flavours/glitch/components/attachment_list";
import { Avatar } from "flavours/glitch/components/avatar";
import { DisplayName } from "flavours/glitch/components/display_name";
import EditedTimestamp from "flavours/glitch/components/edited_timestamp";
import { Icon } from "flavours/glitch/components/icon";
import MediaGallery from "flavours/glitch/components/media_gallery";
import PictureInPicturePlaceholder from "flavours/glitch/components/picture_in_picture_placeholder";
import StatusContent from "flavours/glitch/components/status_content";
import VisibilityIcon from "flavours/glitch/components/status_visibility_icon";
import PollContainer from "flavours/glitch/containers/poll_container";
import Audio from "flavours/glitch/features/audio";
import Video from "flavours/glitch/features/video";
import scheduleIdleTask from '../../ui/util/schedule_idle_task';
import scheduleIdleTask from "../../ui/util/schedule_idle_task";
import Card from './card';
import Card from "./card";
@@ -63,7 +63,7 @@ class DetailedStatus extends ImmutablePureComponent {
handleAccountClick = (e) => {
if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
e.preventDefault();
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
this.context.router.history.push(`/@${this.props.status.getIn(["account", "acct"])}`);
}
e.stopPropagation();
@@ -79,7 +79,7 @@ class DetailedStatus extends ImmutablePureComponent {
};
handleOpenVideo = (options) => {
this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), options);
this.props.onOpenVideo(this.props.status.getIn(["media_attachments", 0]), options);
};
_measureHeight (heightJustChanged) {
@@ -110,13 +110,13 @@ class DetailedStatus extends ImmutablePureComponent {
let href;
if (e.target.nodeName !== 'A') {
if (e.target.nodeName !== "A") {
href = e.target.parentNode.href;
} else {
href = e.target.href;
}
window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
window.open(href, "mastodon-intent", "width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes");
};
handleTranslate = () => {
@@ -125,19 +125,19 @@ class DetailedStatus extends ImmutablePureComponent {
};
render () {
const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status;
const outerStyle = { boxSizing: 'border-box' };
const status = (this.props.status && this.props.status.get("reblog")) ? this.props.status.get("reblog") : this.props.status;
const outerStyle = { boxSizing: "border-box" };
const { compact, pictureInPicture, expanded, onToggleHidden, settings } = this.props;
if (!status) {
return null;
}
let applicationLink = '';
let reblogLink = '';
let reblogIcon = 'retweet';
let favouriteLink = '';
let edited = '';
let applicationLink = "";
let reblogLink = "";
let reblogIcon = "retweet";
let favouriteLink = "";
let edited = "";
// Depending on user settings, some media are considered as parts of the
// contents (affected by CW) while other will be displayed outside of the
@@ -149,7 +149,7 @@ class DetailedStatus extends ImmutablePureComponent {
let media = contentMedia;
let mediaIcons = contentMediaIcons;
if (settings.getIn(['content_warnings', 'media_outside'])) {
if (settings.getIn(["content_warnings", "media_outside"])) {
media = extraMedia;
mediaIcons = extraMediaIcons;
}
@@ -158,118 +158,118 @@ class DetailedStatus extends ImmutablePureComponent {
outerStyle.height = `${this.state.height}px`;
}
const language = status.getIn(['translation', 'language']) || status.get('language');
const language = status.getIn(["translation", "language"]) || status.get("language");
if (pictureInPicture.get('inUse')) {
if (pictureInPicture.get("inUse")) {
media.push(<PictureInPicturePlaceholder />);
mediaIcons.push('video-camera');
} else if (status.get('media_attachments').size > 0) {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
media.push(<AttachmentList media={status.get('media_attachments')} />);
} else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
const attachment = status.getIn(['media_attachments', 0]);
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
mediaIcons.push("video-camera");
} else if (status.get("media_attachments").size > 0) {
if (status.get("media_attachments").some(item => item.get("type") === "unknown")) {
media.push(<AttachmentList media={status.get("media_attachments")} />);
} else if (status.getIn(["media_attachments", 0, "type"]) === "audio") {
const attachment = status.getIn(["media_attachments", 0]);
const description = attachment.getIn(["translation", "description"]) || attachment.get("description");
media.push(
<Audio
src={attachment.get('url')}
src={attachment.get("url")}
alt={description}
lang={language}
duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
sensitive={status.get('sensitive')}
duration={attachment.getIn(["meta", "original", "duration"], 0)}
poster={attachment.get("preview_url") || status.getIn(["account", "avatar_static"])}
backgroundColor={attachment.getIn(["meta", "colors", "background"])}
foregroundColor={attachment.getIn(["meta", "colors", "foreground"])}
accentColor={attachment.getIn(["meta", "colors", "accent"])}
sensitive={status.get("sensitive")}
visible={this.props.showMedia}
blurhash={attachment.get('blurhash')}
blurhash={attachment.get("blurhash")}
height={150}
onToggleVisibility={this.props.onToggleMediaVisibility}
useBlurhash={settings.getIn(['media', 'use_blurhash'])}
useBlurhash={settings.getIn(["media", "use_blurhash"])}
/>,
);
mediaIcons.push('music');
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const attachment = status.getIn(['media_attachments', 0]);
const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
mediaIcons.push("music");
} else if (status.getIn(["media_attachments", 0, "type"]) === "video") {
const attachment = status.getIn(["media_attachments", 0]);
const description = attachment.getIn(["translation", "description"]) || attachment.get("description");
media.push(
<Video
preview={attachment.get('preview_url')}
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
blurhash={attachment.get('blurhash')}
src={attachment.get('url')}
preview={attachment.get("preview_url")}
frameRate={attachment.getIn(["meta", "original", "frame_rate"])}
blurhash={attachment.get("blurhash")}
src={attachment.get("url")}
alt={description}
lang={language}
inline
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
sensitive={status.get("sensitive")}
letterbox={settings.getIn(["media", "letterbox"])}
fullwidth={settings.getIn(["media", "fullwidth"])}
preventPlayback={!expanded}
onOpenVideo={this.handleOpenVideo}
autoplay
visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility}
useBlurhash={settings.getIn(['media', 'use_blurhash'])}
useBlurhash={settings.getIn(["media", "use_blurhash"])}
/>,
);
mediaIcons.push('video-camera');
mediaIcons.push("video-camera");
} else {
media.push(
<MediaGallery
standalone
sensitive={status.get('sensitive')}
media={status.get('media_attachments')}
sensitive={status.get("sensitive")}
media={status.get("media_attachments")}
lang={language}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
letterbox={settings.getIn(["media", "letterbox"])}
fullwidth={settings.getIn(["media", "fullwidth"])}
hidden={!expanded}
onOpenMedia={this.props.onOpenMedia}
visible={this.props.showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility}
useBlurhash={settings.getIn(['media', 'use_blurhash'])}
useBlurhash={settings.getIn(["media", "use_blurhash"])}
/>,
);
mediaIcons.push('picture-o');
mediaIcons.push("picture-o");
}
} else if (status.get('card')) {
} else if (status.get("card")) {
media.push(
<Card
sensitive={status.get('sensitive')}
sensitive={status.get("sensitive")}
onOpenMedia={this.props.onOpenMedia}
card={status.get('card')}
useBlurhash={settings.getIn(['media', 'use_blurhash'])} />
card={status.get("card")}
useBlurhash={settings.getIn(["media", "use_blurhash"])} />,
);
mediaIcons.push('link');
mediaIcons.push("link");
}
if (status.get('poll')) {
contentMedia.push(<PollContainer pollId={status.get('poll')} lang={status.get('language')} />);
contentMediaIcons.push('tasks');
if (status.get("poll")) {
contentMedia.push(<PollContainer pollId={status.get("poll")} lang={status.get("language")} />);
contentMediaIcons.push("tasks");
}
if (status.get('application')) {
applicationLink = <> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
if (status.get("application")) {
applicationLink = <> · <a className='detailed-status__application' href={status.getIn(["application", "website"])} target='_blank' rel='noopener noreferrer'>{status.getIn(["application", "name"])}</a></>;
}
const visibilityLink = <> · <VisibilityIcon visibility={status.get('visibility')} /></>;
const visibilityLink = <> · <VisibilityIcon visibility={status.get("visibility")} /></>;
if (status.get('visibility') === 'direct') {
reblogIcon = 'envelope';
} else if (status.get('visibility') === 'private') {
reblogIcon = 'lock';
if (status.get("visibility") === "direct") {
reblogIcon = "envelope";
} else if (status.get("visibility") === "private") {
reblogIcon = "lock";
}
if (!['unlisted', 'public'].includes(status.get('visibility'))) {
if (!["unlisted", "public"].includes(status.get("visibility"))) {
reblogLink = null;
} else if (this.context.router) {
reblogLink = (
<>
{' · '}
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
{" · "}
<Link to={`/@${status.getIn(["account", "acct"])}/${status.get("id")}/reblogs`} className='detailed-status__link'>
<Icon id={reblogIcon} />
<span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} />
<AnimatedNumber value={status.get("reblogs_count")} />
</span>
</Link>
</>
@@ -277,11 +277,11 @@ class DetailedStatus extends ImmutablePureComponent {
} else {
reblogLink = (
<>
{' · '}
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
{" · "}
<a href={`/interact/${status.get("id")}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
<Icon id={reblogIcon} />
<span className='detailed-status__reblogs'>
<AnimatedNumber value={status.get('reblogs_count')} />
<AnimatedNumber value={status.get("reblogs_count")} />
</span>
</a>
</>
@@ -290,39 +290,39 @@ class DetailedStatus extends ImmutablePureComponent {
if (this.context.router) {
favouriteLink = (
<Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/favourites`} className='detailed-status__link'>
<Link to={`/@${status.getIn(["account", "acct"])}/${status.get("id")}/favourites`} className='detailed-status__link'>
<Icon id='star' />
<span className='detailed-status__favorites'>
<AnimatedNumber value={status.get('favourites_count')} />
<AnimatedNumber value={status.get("favourites_count")} />
</span>
</Link>
);
} else {
favouriteLink = (
<a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
<a href={`/interact/${status.get("id")}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
<Icon id='star' />
<span className='detailed-status__favorites'>
<AnimatedNumber value={status.get('favourites_count')} />
<AnimatedNumber value={status.get("favourites_count")} />
</span>
</a>
);
}
if (status.get('edited_at')) {
if (status.get("edited_at")) {
edited = (
<>
{' · '}
<EditedTimestamp statusId={status.get('id')} timestamp={status.get('edited_at')} />
{" · "}
<EditedTimestamp statusId={status.get("id")} timestamp={status.get("edited_at")} />
</>
);
}
return (
<div style={outerStyle}>
<div ref={this.setRef} className={classNames('detailed-status', `detailed-status-${status.get('visibility')}`, { compact })} data-status-by={status.getIn(['account', 'acct'])}>
<a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
<DisplayName account={status.get('account')} localDomain={this.props.domain} />
<div ref={this.setRef} className={classNames("detailed-status", `detailed-status-${status.get("visibility")}`, { compact })} data-status-by={status.getIn(["account", "acct"])}>
<a href={status.getIn(["account", "url"])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
<div className='detailed-status__display-avatar'><Avatar account={status.get("account")} size={48} /></div>
<DisplayName account={status.get("account")} localDomain={this.props.domain} />
</a>
<StatusContent
@@ -336,14 +336,14 @@ class DetailedStatus extends ImmutablePureComponent {
onTranslate={this.handleTranslate}
parseClick={this.parseClick}
onUpdate={this.handleChildUpdate}
tagLinks={settings.get('tag_misleading_links')}
rewriteMentions={settings.get('rewrite_mentions')}
tagLinks={settings.get("tag_misleading_links")}
rewriteMentions={settings.get("rewrite_mentions")}
disabled
/>
<div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} hourCycle='h23' year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
<a className='detailed-status__datetime' href={status.get("url")} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get("created_at"))} hourCycle='h23' year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{edited}{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink}
</div>
</div>
app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js
+39 -39
View File
@@ -1,15 +1,15 @@
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages, injectIntl } from "react-intl";
import { connect } from 'react-redux';
import { connect } from "react-redux";
import { showAlertForError } from 'flavours/glitch/actions/alerts';
import { initBlockModal } from 'flavours/glitch/actions/blocks';
import { initBoostModal } from 'flavours/glitch/actions/boosts';
import { showAlertForError } from "flavours/glitch/actions/alerts";
import { initBlockModal } from "flavours/glitch/actions/blocks";
import { initBoostModal } from "flavours/glitch/actions/boosts";
import {
replyCompose,
mentionCompose,
directCompose,
} from 'flavours/glitch/actions/compose';
} from "flavours/glitch/actions/compose";
import {
reblog,
favourite,
@@ -17,27 +17,27 @@ import {
unfavourite,
pin,
unpin,
} from 'flavours/glitch/actions/interactions';
import { openModal } from 'flavours/glitch/actions/modal';
import { initMuteModal } from 'flavours/glitch/actions/mutes';
import { initReport } from 'flavours/glitch/actions/reports';
} from "flavours/glitch/actions/interactions";
import { openModal } from "flavours/glitch/actions/modal";
import { initMuteModal } from "flavours/glitch/actions/mutes";
import { initReport } from "flavours/glitch/actions/reports";
import {
muteStatus,
unmuteStatus,
deleteStatus,
} from 'flavours/glitch/actions/statuses';
import { boostModal, deleteModal } from 'flavours/glitch/initial_state';
import { makeGetStatus } from 'flavours/glitch/selectors';
} from "flavours/glitch/actions/statuses";
import { boostModal, deleteModal } from "flavours/glitch/initial_state";
import { makeGetStatus } from "flavours/glitch/selectors";
import DetailedStatus from '../components/detailed_status';
import DetailedStatus from "../components/detailed_status";
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?' },
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
deleteConfirm: { id: "confirmations.delete.confirm", defaultMessage: "Delete" },
deleteMessage: { id: "confirmations.delete.message", defaultMessage: "Are you sure you want to delete this status?" },
redraftConfirm: { id: "confirmations.redraft.confirm", defaultMessage: "Delete & redraft" },
redraftMessage: { id: "confirmations.redraft.message", defaultMessage: "Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned." },
replyConfirm: { id: "confirmations.reply.confirm", defaultMessage: "Reply" },
replyMessage: { id: "confirmations.reply.message", defaultMessage: "Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?" },
});
const makeMapStateToProps = () => {
@@ -45,8 +45,8 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => ({
status: getStatus(state, props),
domain: state.getIn(['meta', 'domain']),
settings: state.get('local_settings'),
domain: state.getIn(["meta", "domain"]),
settings: state.get("local_settings"),
});
return mapStateToProps;
@@ -57,9 +57,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onReply (status, router) {
dispatch((_, getState) => {
let state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) {
if (state.getIn(["compose", "text"]).trim().length !== 0) {
dispatch(openModal({
modalType: 'CONFIRM',
modalType: "CONFIRM",
modalProps: {
message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm),
@@ -77,7 +77,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
},
onReblog (status, e) {
if (status.get('reblogged')) {
if (status.get("reblogged")) {
dispatch(unreblog(status));
} else {
if (e.shiftKey || !boostModal) {
@@ -89,7 +89,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
},
onFavourite (status) {
if (status.get('favourited')) {
if (status.get("favourited")) {
dispatch(unfavourite(status));
} else {
dispatch(favourite(status));
@@ -97,7 +97,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
},
onPin (status) {
if (status.get('pinned')) {
if (status.get("pinned")) {
dispatch(unpin(status));
} else {
dispatch(pin(status));
@@ -106,9 +106,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onEmbed (status) {
dispatch(openModal({
modalType: 'EMBED',
modalType: "EMBED",
modalProps: {
id: status.get('id'),
id: status.get("id"),
onError: error => dispatch(showAlertForError(error)),
},
}));
@@ -116,14 +116,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onDelete (status, history, withRedraft = false) {
if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft));
dispatch(deleteStatus(status.get("id"), history, withRedraft));
} else {
dispatch(openModal({
modalType: 'CONFIRM',
modalType: "CONFIRM",
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
onConfirm: () => dispatch(deleteStatus(status.get("id"), history, withRedraft)),
},
}));
}
@@ -139,25 +139,25 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onOpenMedia (media, index, lang) {
dispatch(openModal({
modalType: 'MEDIA',
modalType: "MEDIA",
modalProps: { media, index, lang },
}));
},
onOpenVideo (media, lang, options) {
dispatch(openModal({
modalType: 'VIDEO',
modalType: "VIDEO",
modalProps: { media, lang, options },
}));
},
onBlock (status) {
const account = status.get('account');
const account = status.get("account");
dispatch(initBlockModal(account));
},
onReport (status) {
dispatch(initReport(status.get('account'), status));
dispatch(initReport(status.get("account"), status));
},
onMute (account) {
@@ -165,10 +165,10 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
},
onMuteConversation (status) {
if (status.get('muted')) {
dispatch(unmuteStatus(status.get('id')));
if (status.get("muted")) {
dispatch(unmuteStatus(status.get("id")));
} else {
dispatch(muteStatus(status.get('id')));
dispatch(muteStatus(status.get("id")));
}
},
app/javascript/flavours/glitch/features/status/index.jsx
+140 -135
View File
@@ -1,25 +1,25 @@
import PropTypes from 'prop-types';
import PropTypes from "prop-types";
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages, injectIntl } from "react-intl";
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import classNames from "classnames";
import { Helmet } from "react-helmet";
import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import Immutable from "immutable";
import ImmutablePropTypes from "react-immutable-proptypes";
import ImmutablePureComponent from "react-immutable-pure-component";
import { connect } from "react-redux";
import { createSelector } from "reselect";
import { HotKeys } from 'react-hotkeys';
import { HotKeys } from "react-hotkeys";
import { initBlockModal } from 'flavours/glitch/actions/blocks';
import { initBoostModal } from 'flavours/glitch/actions/boosts';
import { initBlockModal } from "flavours/glitch/actions/blocks";
import { initBoostModal } from "flavours/glitch/actions/boosts";
import {
replyCompose,
mentionCompose,
directCompose,
} from 'flavours/glitch/actions/compose';
} from "flavours/glitch/actions/compose";
import {
favourite,
unfavourite,
@@ -29,11 +29,11 @@ import {
unreblog,
pin,
unpin,
} from 'flavours/glitch/actions/interactions';
import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
import { openModal } from 'flavours/glitch/actions/modal';
import { initMuteModal } from 'flavours/glitch/actions/mutes';
import { initReport } from 'flavours/glitch/actions/reports';
} from "flavours/glitch/actions/interactions";
import { changeLocalSetting } from "flavours/glitch/actions/local_settings";
import { openModal } from "flavours/glitch/actions/modal";
import { initMuteModal } from "flavours/glitch/actions/mutes";
import { initReport } from "flavours/glitch/actions/reports";
import {
fetchStatus,
muteStatus,
@@ -44,36 +44,36 @@ import {
revealStatus,
translateStatus,
undoStatusTranslation,
} from 'flavours/glitch/actions/statuses';
import { Icon } from 'flavours/glitch/components/icon';
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
import ScrollContainer from 'flavours/glitch/containers/scroll_container';
import StatusContainer from 'flavours/glitch/containers/status_container';
import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
import Column from 'flavours/glitch/features/ui/components/column';
import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial_state';
import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
} from "flavours/glitch/actions/statuses";
import { Icon } from "flavours/glitch/components/icon";
import { LoadingIndicator } from "flavours/glitch/components/loading_indicator";
import { textForScreenReader, defaultMediaVisibility } from "flavours/glitch/components/status";
import ScrollContainer from "flavours/glitch/containers/scroll_container";
import StatusContainer from "flavours/glitch/containers/status_container";
import BundleColumnError from "flavours/glitch/features/ui/components/bundle_column_error";
import Column from "flavours/glitch/features/ui/components/column";
import { boostModal, favouriteModal, deleteModal } from "flavours/glitch/initial_state";
import { makeGetStatus, makeGetPictureInPicture } from "flavours/glitch/selectors";
import { autoUnfoldCW } from "flavours/glitch/utils/content_warning";
import ColumnHeader from '../../components/column_header';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
import ColumnHeader from "../../components/column_header";
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from "../ui/util/fullscreen";
import ActionBar from './components/action_bar';
import DetailedStatus from './components/detailed_status';
import ActionBar from "./components/action_bar";
import DetailedStatus from "./components/detailed_status";
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?' },
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
statusTitleWithAttachments: { id: 'status.title.with_attachments', defaultMessage: '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' },
detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
tootHeading: { id: 'account.posts_with_replies', defaultMessage: 'Posts and replies' },
deleteConfirm: { id: "confirmations.delete.confirm", defaultMessage: "Delete" },
deleteMessage: { id: "confirmations.delete.message", defaultMessage: "Are you sure you want to delete this status?" },
redraftConfirm: { id: "confirmations.redraft.confirm", defaultMessage: "Delete & redraft" },
redraftMessage: { id: "confirmations.redraft.message", defaultMessage: "Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned." },
revealAll: { id: "status.show_more_all", defaultMessage: "Show more for all" },
hideAll: { id: "status.show_less_all", defaultMessage: "Show less for all" },
statusTitleWithAttachments: { id: "status.title.with_attachments", defaultMessage: "{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}" },
detailedStatus: { id: "status.detailed_status", defaultMessage: "Detailed conversation view" },
replyConfirm: { id: "confirmations.reply.confirm", defaultMessage: "Reply" },
replyMessage: { id: "confirmations.reply.message", defaultMessage: "Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?" },
tootHeading: { id: "account.posts_with_replies", defaultMessage: "Posts and replies" },
});
const makeMapStateToProps = () => {
@@ -82,7 +82,7 @@ const makeMapStateToProps = () => {
const getAncestorsIds = createSelector([
(_, { id }) => id,
state => state.getIn(['contexts', 'inReplyTos']),
state => state.getIn(["contexts", "inReplyTos"]),
], (statusId, inReplyTos) => {
let ancestorsIds = Immutable.List();
ancestorsIds = ancestorsIds.withMutations(mutable => {
@@ -99,8 +99,8 @@ const makeMapStateToProps = () => {
const getDescendantsIds = createSelector([
(_, { id }) => id,
state => state.getIn(['contexts', 'replies']),
state => state.get('statuses'),
state => state.getIn(["contexts", "replies"]),
state => state.get("statuses"),
], (statusId, contextReplies, statuses) => {
let descendantsIds = [];
const ids = [statusId];
@@ -115,15 +115,17 @@ const makeMapStateToProps = () => {
if (replies) {
replies.reverse().forEach(reply => {
if (!ids.includes(reply) && !descendantsIds.includes(reply) && statusId !== reply) ids.push(reply);
if (!ids.includes(reply) && !descendantsIds.includes(reply) && statusId !== reply) {
ids.push(reply);
}
});
}
}
let insertAt = descendantsIds.findIndex((id) => statuses.get(id).get('in_reply_to_account_id') !== statuses.get(id).get('account'));
let insertAt = descendantsIds.findIndex((id) => statuses.get(id).get("in_reply_to_account_id") !== statuses.get(id).get("account"));
if (insertAt !== -1) {
descendantsIds.forEach((id, idx) => {
if (idx > insertAt && statuses.get(id).get('in_reply_to_account_id') === statuses.get(id).get('account')) {
if (idx > insertAt && statuses.get(id).get("in_reply_to_account_id") === statuses.get(id).get("account")) {
descendantsIds.splice(idx, 1);
descendantsIds.splice(insertAt, 0, id);
insertAt += 1;
@@ -141,18 +143,18 @@ const makeMapStateToProps = () => {
let descendantsIds = Immutable.List();
if (status) {
ancestorsIds = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
descendantsIds = getDescendantsIds(state, { id: status.get('id') });
ancestorsIds = getAncestorsIds(state, { id: status.get("in_reply_to_id") });
descendantsIds = getDescendantsIds(state, { id: status.get("id") });
}
return {
isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']),
isLoading: state.getIn(["statuses", props.params.statusId, "isLoading"]),
status,
ancestorsIds,
descendantsIds,
settings: state.get('local_settings'),
askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
domain: state.getIn(['meta', 'domain']),
settings: state.get("local_settings"),
askReplyConfirmation: state.getIn(["local_settings", "confirm_before_clearing_draft"]) && state.getIn(["compose", "text"]).trim().length !== 0,
domain: state.getIn(["meta", "domain"]),
pictureInPicture: getPictureInPicture(state, { id: props.params.statusId }),
};
};
@@ -163,18 +165,18 @@ const makeMapStateToProps = () => {
const truncate = (str, num) => {
const arr = Array.from(str);
if (arr.length > num) {
return arr.slice(0, num).join('') + '…';
return arr.slice(0, num).join("") + "…";
} else {
return str;
}
};
const titleFromStatus = (intl, status) => {
const displayName = status.getIn(['account', 'display_name']);
const username = status.getIn(['account', 'username']);
const displayName = status.getIn(["account", "display_name"]);
const username = status.getIn(["account", "username"]);
const user = displayName.trim().length === 0 ? username : displayName;
const text = status.get('search_index');
const attachmentCount = status.get('media_attachments').size;
const text = status.get("search_index");
const attachmentCount = status.get("media_attachments").size;
return text ? `${user}: "${truncate(text, 30)}"` : intl.formatMessage(messages.statusTitleWithAttachments, { user, attachmentCount });
};
@@ -231,16 +233,18 @@ class Status extends ImmutablePureComponent {
updated = true;
}
const revealBehindCW = props.settings.getIn(['media', 'reveal_behind_cw']);
const revealBehindCW = props.settings.getIn(["media", "reveal_behind_cw"]);
if (revealBehindCW !== state.revealBehindCW) {
update.revealBehindCW = revealBehindCW;
if (revealBehindCW) update.showMedia = defaultMediaVisibility(props.status, props.settings);
if (revealBehindCW) {
update.showMedia = defaultMediaVisibility(props.status, props.settings);
}
updated = true;
}
if (props.status && state.loadedStatusId !== props.status.get('id')) {
if (props.status && state.loadedStatusId !== props.status.get("id")) {
update.showMedia = defaultMediaVisibility(props.status, props.settings);
update.loadedStatusId = props.status.get('id');
update.loadedStatusId = props.status.get("id");
update.isExpanded = autoUnfoldCW(props.settings, props.status);
updated = true;
}
@@ -251,13 +255,13 @@ class Status extends ImmutablePureComponent {
handleToggleHidden = () => {
const { status } = this.props;
if (this.props.settings.getIn(['content_warnings', 'shared_state'])) {
if (status.get('hidden')) {
this.props.dispatch(revealStatus(status.get('id')));
if (this.props.settings.getIn(["content_warnings", "shared_state"])) {
if (status.get("hidden")) {
this.props.dispatch(revealStatus(status.get("id")));
} else {
this.props.dispatch(hideStatus(status.get('id')));
this.props.dispatch(hideStatus(status.get("id")));
}
} else if (this.props.status.get('spoiler_text')) {
} else if (this.props.status.get("spoiler_text")) {
this.setExpansion(!this.state.isExpanded);
}
};
@@ -275,14 +279,14 @@ class Status extends ImmutablePureComponent {
const { signedIn } = this.context.identity;
if (signedIn) {
if (status.get('favourited')) {
if (status.get("favourited")) {
dispatch(unfavourite(status));
} else {
if ((e && e.shiftKey) || !favouriteModal) {
this.handleModalFavourite(status);
} else {
dispatch(openModal({
modalType: 'FAVOURITE',
modalType: "FAVOURITE",
modalProps: {
status,
onFavourite: this.handleModalFavourite,
@@ -292,18 +296,18 @@ class Status extends ImmutablePureComponent {
}
} else {
dispatch(openModal({
modalType: 'INTERACTION',
modalType: "INTERACTION",
modalProps: {
type: 'favourite',
accountId: status.getIn(['account', 'id']),
url: status.get('uri'),
type: "favourite",
accountId: status.getIn(["account", "id"]),
url: status.get("uri"),
},
}));
}
};
handlePin = (status) => {
if (status.get('pinned')) {
if (status.get("pinned")) {
this.props.dispatch(unpin(status));
} else {
this.props.dispatch(pin(status));
@@ -317,11 +321,11 @@ class Status extends ImmutablePureComponent {
if (signedIn) {
if (askReplyConfirmation) {
dispatch(openModal({
modalType: 'CONFIRM',
modalType: "CONFIRM",
modalProps: {
message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm),
onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
onDoNotAsk: () => dispatch(changeLocalSetting(["confirm_before_clearing_draft"], false)),
onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
},
}));
@@ -330,11 +334,11 @@ class Status extends ImmutablePureComponent {
}
} else {
dispatch(openModal({
modalType: 'INTERACTION',
modalType: "INTERACTION",
modalProps: {
type: 'reply',
accountId: status.getIn(['account', 'id']),
url: status.get('uri'),
type: "reply",
accountId: status.getIn(["account", "id"]),
url: status.get("uri"),
},
}));
}
@@ -343,7 +347,7 @@ class Status extends ImmutablePureComponent {
handleModalReblog = (status, privacy) => {
const { dispatch } = this.props;
if (status.get('reblogged')) {
if (status.get("reblogged")) {
dispatch(unreblog(status));
} else {
dispatch(reblog(status, privacy));
@@ -355,7 +359,7 @@ class Status extends ImmutablePureComponent {
const { signedIn } = this.context.identity;
if (signedIn) {
if (settings.get('confirm_boost_missing_media_description') && status.get('media_attachments').some(item => !item.get('description')) && !status.get('reblogged')) {
if (settings.get("confirm_boost_missing_media_description") && status.get("media_attachments").some(item => !item.get("description")) && !status.get("reblogged")) {
dispatch(initBoostModal({ status, onReblog: this.handleModalReblog, missingMediaDescription: true }));
} else if ((e && e.shiftKey) || !boostModal) {
this.handleModalReblog(status);
@@ -364,18 +368,18 @@ class Status extends ImmutablePureComponent {
}
} else {
dispatch(openModal({
modalType: 'INTERACTION',
modalType: "INTERACTION",
modalProps: {
type: 'reblog',
accountId: status.getIn(['account', 'id']),
url: status.get('uri'),
type: "reblog",
accountId: status.getIn(["account", "id"]),
url: status.get("uri"),
},
}));
}
};
handleBookmarkClick = (status) => {
if (status.get('bookmarked')) {
if (status.get("bookmarked")) {
this.props.dispatch(unbookmark(status));
} else {
this.props.dispatch(bookmark(status));
@@ -386,21 +390,21 @@ class Status extends ImmutablePureComponent {
const { dispatch, intl } = this.props;
if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft));
dispatch(deleteStatus(status.get("id"), history, withRedraft));
} else {
dispatch(openModal({
modalType: 'CONFIRM',
modalType: "CONFIRM",
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
onConfirm: () => dispatch(deleteStatus(status.get("id"), history, withRedraft)),
},
}));
}
};
handleEditClick = (status, history) => {
this.props.dispatch(editStatus(status.get('id'), history));
this.props.dispatch(editStatus(status.get("id"), history));
};
handleDirectClick = (account, router) => {
@@ -413,15 +417,15 @@ class Status extends ImmutablePureComponent {
handleOpenMedia = (media, index, lang) => {
this.props.dispatch(openModal({
modalType: 'MEDIA',
modalProps: { statusId: this.props.status.get('id'), media, index, lang },
modalType: "MEDIA",
modalProps: { statusId: this.props.status.get("id"), media, index, lang },
}));
};
handleOpenVideo = (media, lang, options) => {
this.props.dispatch(openModal({
modalType: 'VIDEO',
modalProps: { statusId: this.props.status.get('id'), media, lang, options },
modalType: "VIDEO",
modalProps: { statusId: this.props.status.get("id"), media, lang, options },
}));
};
@@ -430,11 +434,11 @@ class Status extends ImmutablePureComponent {
e.preventDefault();
if (status.get('media_attachments').size > 0) {
if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
this.handleOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
if (status.get("media_attachments").size > 0) {
if (status.getIn(["media_attachments", 0, "type"]) === "video") {
this.handleOpenVideo(status.getIn(["media_attachments", 0]), { startTime: 0 });
} else {
this.handleOpenMedia(status.get('media_attachments'), 0);
this.handleOpenMedia(status.get("media_attachments"), 0);
}
}
};
@@ -444,20 +448,21 @@ class Status extends ImmutablePureComponent {
};
handleConversationMuteClick = (status) => {
if (status.get('muted')) {
this.props.dispatch(unmuteStatus(status.get('id')));
if (status.get("muted")) {
this.props.dispatch(unmuteStatus(status.get("id")));
} else {
this.props.dispatch(muteStatus(status.get('id')));
this.props.dispatch(muteStatus(status.get("id")));
}
};
handleToggleAll = () => {
const { status, ancestorsIds, descendantsIds, settings } = this.props;
const statusIds = [status.get('id')].concat(ancestorsIds.toJS(), descendantsIds.toJS());
const statusIds = [status.get("id")].concat(ancestorsIds.toJS(), descendantsIds.toJS());
let { isExpanded } = this.state;
if (settings.getIn(['content_warnings', 'shared_state']))
isExpanded = !status.get('hidden');
if (settings.getIn(["content_warnings", "shared_state"])) {
isExpanded = !status.get("hidden");
}
if (!isExpanded) {
this.props.dispatch(revealStatus(statusIds));
@@ -471,27 +476,27 @@ class Status extends ImmutablePureComponent {
handleTranslate = status => {
const { dispatch } = this.props;
if (status.get('translation')) {
dispatch(undoStatusTranslation(status.get('id'), status.get('poll')));
if (status.get("translation")) {
dispatch(undoStatusTranslation(status.get("id"), status.get("poll")));
} else {
dispatch(translateStatus(status.get('id')));
dispatch(translateStatus(status.get("id")));
}
};
handleBlockClick = (status) => {
const { dispatch } = this.props;
const account = status.get('account');
const account = status.get("account");
dispatch(initBlockModal(account));
};
handleReport = (status) => {
this.props.dispatch(initReport(status.get('account'), status));
this.props.dispatch(initReport(status.get("account"), status));
};
handleEmbed = (status) => {
this.props.dispatch(openModal({
modalType: 'EMBED',
modalProps: { id: status.get('id') },
modalType: "EMBED",
modalProps: { id: status.get("id") },
}));
};
@@ -500,11 +505,11 @@ class Status extends ImmutablePureComponent {
};
handleHotkeyMoveUp = () => {
this.handleMoveUp(this.props.status.get('id'));
this.handleMoveUp(this.props.status.get("id"));
};
handleHotkeyMoveDown = () => {
this.handleMoveDown(this.props.status.get('id'));
this.handleMoveDown(this.props.status.get("id"));
};
handleHotkeyReply = e => {
@@ -530,13 +535,13 @@ class Status extends ImmutablePureComponent {
};
handleHotkeyOpenProfile = () => {
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
this.context.router.history.push(`/@${this.props.status.getIn(["account", "acct"])}`);
};
handleMoveUp = id => {
const { status, ancestorsIds, descendantsIds } = this.props;
if (id === status.get('id')) {
if (id === status.get("id")) {
this._selectChild(ancestorsIds.size - 1, true);
} else {
let index = ancestorsIds.indexOf(id);
@@ -553,7 +558,7 @@ class Status extends ImmutablePureComponent {
handleMoveDown = id => {
const { status, ancestorsIds, descendantsIds } = this.props;
if (id === status.get('id')) {
if (id === status.get("id")) {
this._selectChild(ancestorsIds.size + 1, false);
} else {
let index = ancestorsIds.indexOf(id);
@@ -569,7 +574,7 @@ class Status extends ImmutablePureComponent {
_selectChild (index, align_top) {
const container = this.node;
const element = container.querySelectorAll('.focusable')[index];
const element = container.querySelectorAll(".focusable")[index];
if (element) {
if (align_top && container.scrollTop > element.offsetTop) {
@@ -620,12 +625,12 @@ class Status extends ImmutablePureComponent {
if (status) {
window.requestAnimationFrame(() => {
this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true);
this.node?.querySelector(".detailed-status__wrapper")?.scrollIntoView(true);
// In the single-column interface, `scrollIntoView` will put the post behind the header,
// so compensate for that.
if (!multiColumn) {
const offset = document.querySelector('.column-header__wrapper')?.getBoundingClientRect()?.bottom;
const offset = document.querySelector(".column-header__wrapper")?.getBoundingClientRect()?.bottom;
if (offset) {
const scrollingElement = document.scrollingElement || document.body;
scrollingElement.scrollBy(0, -offset);
@@ -638,7 +643,7 @@ class Status extends ImmutablePureComponent {
componentDidUpdate (prevProps) {
const { status, ancestorsIds } = this.props;
if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get("id") !== status.get("id"))) {
this._scrollStatusIntoView();
}
}
@@ -658,7 +663,7 @@ class Status extends ImmutablePureComponent {
}
// Scroll to focused post if it is loaded
const child = this.node?.querySelector('.detailed-status__wrapper');
const child = this.node?.querySelector(".detailed-status__wrapper");
if (child) {
return [0, child.offsetTop];
}
@@ -686,7 +691,7 @@ class Status extends ImmutablePureComponent {
);
}
const isExpanded = settings.getIn(['content_warnings', 'shared_state']) ? !status.get('hidden') : this.state.isExpanded;
const isExpanded = settings.getIn(["content_warnings", "shared_state"]) ? !status.get("hidden") : this.state.isExpanded;
if (ancestorsIds && ancestorsIds.size > 0) {
ancestors = <>{this.renderChildren(ancestorsIds, true)}</>;
@@ -696,8 +701,8 @@ class Status extends ImmutablePureComponent {
descendants = <>{this.renderChildren(descendantsIds)}</>;
}
const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1;
const isIndexable = !status.getIn(['account', 'noindex']);
const isLocal = status.getIn(["account", "acct"], "").indexOf("@") === -1;
const isIndexable = !status.getIn(["account", "noindex"]);
const handlers = {
moveUp: this.handleHotkeyMoveUp,
@@ -722,18 +727,18 @@ class Status extends ImmutablePureComponent {
showBackButton
multiColumn={multiColumn}
extraButton={(
<button type='button' className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={!isExpanded ? 'eye-slash' : 'eye'} /></button>
<button type='button' className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={!isExpanded ? "eye-slash" : "eye"} /></button>
)}
/>
<ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className={classNames('scrollable', { fullscreen })} ref={this.setRef}>
<div className={classNames("scrollable", { fullscreen })} ref={this.setRef}>
{ancestors}
<HotKeys handlers={handlers}>
<div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}>
<div className={classNames("focusable", "detailed-status__wrapper", `detailed-status__wrapper-${status.get("visibility")}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}>
<DetailedStatus
key={`details-${status.get('id')}`}
key={`details-${status.get("id")}`}
status={status}
settings={settings}
onOpenVideo={this.handleOpenVideo}
@@ -748,7 +753,7 @@ class Status extends ImmutablePureComponent {
/>
<ActionBar
key={`action-bar-${status.get('id')}`}
key={`action-bar-${status.get("id")}`}
status={status}
onReply={this.handleReplyClick}
onFavourite={this.handleFavouriteClick}
@@ -774,8 +779,8 @@ class Status extends ImmutablePureComponent {
<Helmet>
<title>{titleFromStatus(intl, status)}</title>
<meta name='robots' content={(isLocal && isIndexable) ? 'all' : 'noindex'} />
<link rel='canonical' href={status.get('url')} />
<meta name='robots' content={(isLocal && isIndexable) ? "all" : "noindex"} />
<link rel='canonical' href={status.get("url")} />
</Helmet>
</Column>
);