2022-12-10 12:14:48 +03:00
|
|
|
|
import './status.css';
|
|
|
|
|
|
2023-03-18 15:05:12 +03:00
|
|
|
|
import '@justinribeiro/lite-youtube';
|
2023-03-02 10:15:49 +03:00
|
|
|
|
import {
|
|
|
|
|
ControlledMenu,
|
|
|
|
|
Menu,
|
|
|
|
|
MenuDivider,
|
|
|
|
|
MenuHeader,
|
|
|
|
|
MenuItem,
|
|
|
|
|
} from '@szhsin/react-menu';
|
2023-03-23 15:18:54 +03:00
|
|
|
|
import { decodeBlurHash } from 'fast-blurhash';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
import mem from 'mem';
|
2023-02-23 11:45:53 +03:00
|
|
|
|
import pThrottle from 'p-throttle';
|
2023-01-07 15:26:23 +03:00
|
|
|
|
import { memo } from 'preact/compat';
|
2023-06-14 06:14:49 +03:00
|
|
|
|
import {
|
|
|
|
|
useCallback,
|
|
|
|
|
useEffect,
|
|
|
|
|
useMemo,
|
|
|
|
|
useRef,
|
|
|
|
|
useState,
|
|
|
|
|
} from 'preact/hooks';
|
2023-09-08 10:32:55 +03:00
|
|
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
2023-04-06 17:51:48 +03:00
|
|
|
|
import { InView } from 'react-intersection-observer';
|
2023-03-07 19:01:51 +03:00
|
|
|
|
import { useLongPress } from 'use-long-press';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
import { useSnapshot } from 'valtio';
|
2023-05-17 11:13:49 +03:00
|
|
|
|
import { snapshot } from 'valtio/vanilla';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-04-06 17:51:48 +03:00
|
|
|
|
import AccountBlock from '../components/account-block';
|
2023-06-14 12:37:41 +03:00
|
|
|
|
import EmojiText from '../components/emoji-text';
|
2022-12-11 16:22:22 +03:00
|
|
|
|
import Loader from '../components/loader';
|
2023-07-17 16:01:00 +03:00
|
|
|
|
import MenuConfirm from '../components/menu-confirm';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
import Modal from '../components/modal';
|
|
|
|
|
import NameText from '../components/name-text';
|
2023-04-22 19:55:47 +03:00
|
|
|
|
import Poll from '../components/poll';
|
2023-02-05 19:17:19 +03:00
|
|
|
|
import { api } from '../utils/api';
|
2023-09-26 11:23:41 +03:00
|
|
|
|
import emojifyText from '../utils/emojify-text';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
import enhanceContent from '../utils/enhance-content';
|
2023-03-07 17:38:06 +03:00
|
|
|
|
import getTranslateTargetLanguage from '../utils/get-translate-target-language';
|
2023-03-28 20:12:59 +03:00
|
|
|
|
import getHTMLText from '../utils/getHTMLText';
|
2023-01-31 14:31:25 +03:00
|
|
|
|
import handleContentLinks from '../utils/handle-content-links';
|
2022-12-14 19:41:48 +03:00
|
|
|
|
import htmlContentLength from '../utils/html-content-length';
|
2023-04-22 19:55:47 +03:00
|
|
|
|
import isMastodonLinkMaybe from '../utils/isMastodonLinkMaybe';
|
2023-05-20 09:14:35 +03:00
|
|
|
|
import localeMatch from '../utils/locale-match';
|
2023-03-01 15:07:22 +03:00
|
|
|
|
import niceDateTime from '../utils/nice-date-time';
|
2023-06-13 12:46:37 +03:00
|
|
|
|
import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
import shortenNumber from '../utils/shorten-number';
|
2023-02-26 19:55:04 +03:00
|
|
|
|
import showToast from '../utils/show-toast';
|
2023-03-17 12:14:54 +03:00
|
|
|
|
import states, { getStatus, saveStatus, statusKey } from '../utils/states';
|
2023-03-21 19:09:36 +03:00
|
|
|
|
import statusPeek from '../utils/status-peek';
|
2022-12-12 16:54:31 +03:00
|
|
|
|
import store from '../utils/store';
|
2023-09-19 11:27:22 +03:00
|
|
|
|
import useTruncated from '../utils/useTruncated';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
import visibilityIconsMap from '../utils/visibility-icons-map';
|
|
|
|
|
|
|
|
|
|
import Avatar from './avatar';
|
|
|
|
|
import Icon from './icon';
|
2023-01-20 19:23:59 +03:00
|
|
|
|
import Link from './link';
|
2023-01-29 10:23:53 +03:00
|
|
|
|
import Media from './media';
|
2023-03-28 10:59:20 +03:00
|
|
|
|
import MenuLink from './menu-link';
|
2023-01-05 05:50:27 +03:00
|
|
|
|
import RelativeTime from './relative-time';
|
2023-03-07 17:38:06 +03:00
|
|
|
|
import TranslationBlock from './translation-block';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-07-21 17:52:53 +03:00
|
|
|
|
const INLINE_TRANSLATE_LIMIT = 140;
|
2023-02-23 11:45:53 +03:00
|
|
|
|
const throttle = pThrottle({
|
|
|
|
|
limit: 1,
|
|
|
|
|
interval: 1000,
|
|
|
|
|
});
|
|
|
|
|
|
2023-02-05 19:17:19 +03:00
|
|
|
|
function fetchAccount(id, masto) {
|
2023-01-28 13:52:18 +03:00
|
|
|
|
try {
|
|
|
|
|
return masto.v1.accounts.fetch(id);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
return Promise.reject(e);
|
|
|
|
|
}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}
|
|
|
|
|
const memFetchAccount = mem(fetchAccount);
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-02-26 19:55:04 +03:00
|
|
|
|
const visibilityText = {
|
|
|
|
|
public: 'Public',
|
|
|
|
|
unlisted: 'Unlisted',
|
|
|
|
|
private: 'Followers only',
|
2023-04-06 13:21:56 +03:00
|
|
|
|
direct: 'Private mention',
|
2023-02-26 19:55:04 +03:00
|
|
|
|
};
|
|
|
|
|
|
2022-12-18 16:10:05 +03:00
|
|
|
|
function Status({
|
|
|
|
|
statusID,
|
|
|
|
|
status,
|
2023-02-06 11:35:03 +03:00
|
|
|
|
instance: propInstance,
|
2022-12-18 16:10:05 +03:00
|
|
|
|
withinContext,
|
|
|
|
|
size = 'm',
|
|
|
|
|
skeleton,
|
|
|
|
|
readOnly,
|
2023-02-18 20:10:06 +03:00
|
|
|
|
contentTextWeight,
|
2023-03-07 17:38:06 +03:00
|
|
|
|
enableTranslate,
|
2023-05-03 05:22:15 +03:00
|
|
|
|
forceTranslate: _forceTranslate,
|
2023-03-16 08:02:46 +03:00
|
|
|
|
previewMode,
|
2023-03-21 19:09:36 +03:00
|
|
|
|
allowFilters,
|
2023-04-14 10:30:04 +03:00
|
|
|
|
onMediaClick,
|
2023-04-22 19:55:47 +03:00
|
|
|
|
quoted,
|
2023-07-31 19:15:07 +03:00
|
|
|
|
onStatusLinkClick = () => {},
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}) {
|
|
|
|
|
if (skeleton) {
|
2022-12-10 12:14:48 +03:00
|
|
|
|
return (
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<div class="status skeleton">
|
2023-02-17 20:45:44 +03:00
|
|
|
|
<Avatar size="xxl" />
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<div class="container">
|
2023-02-11 16:09:36 +03:00
|
|
|
|
<div class="meta">███ ████████</div>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<div class="content-container">
|
|
|
|
|
<div class="content">
|
2023-02-11 16:09:36 +03:00
|
|
|
|
<p>████ ████████</p>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-10 12:14:48 +03:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2023-02-19 09:49:53 +03:00
|
|
|
|
const { masto, instance, authenticated } = api({ instance: propInstance });
|
2023-02-17 12:40:39 +03:00
|
|
|
|
const { instance: currentInstance } = api();
|
|
|
|
|
const sameInstance = instance === currentInstance;
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-05-19 20:06:16 +03:00
|
|
|
|
let sKey = statusKey(statusID, instance);
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const snapStates = useSnapshot(states);
|
|
|
|
|
if (!status) {
|
2023-02-11 13:55:21 +03:00
|
|
|
|
status = snapStates.statuses[sKey] || snapStates.statuses[statusID];
|
2023-05-19 20:06:16 +03:00
|
|
|
|
sKey = statusKey(status?.id, instance);
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}
|
|
|
|
|
if (!status) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-10 12:14:48 +03:00
|
|
|
|
const {
|
2022-12-18 16:10:05 +03:00
|
|
|
|
account: {
|
|
|
|
|
acct,
|
|
|
|
|
avatar,
|
|
|
|
|
avatarStatic,
|
|
|
|
|
id: accountId,
|
2023-02-21 09:29:25 +03:00
|
|
|
|
url: accountURL,
|
2022-12-18 16:10:05 +03:00
|
|
|
|
displayName,
|
|
|
|
|
username,
|
|
|
|
|
emojis: accountEmojis,
|
2023-04-10 19:26:43 +03:00
|
|
|
|
bot,
|
2023-08-07 16:26:43 +03:00
|
|
|
|
group,
|
2022-12-18 16:10:05 +03:00
|
|
|
|
},
|
|
|
|
|
id,
|
|
|
|
|
repliesCount,
|
|
|
|
|
reblogged,
|
|
|
|
|
reblogsCount,
|
|
|
|
|
favourited,
|
|
|
|
|
favouritesCount,
|
|
|
|
|
bookmarked,
|
|
|
|
|
poll,
|
|
|
|
|
muted,
|
|
|
|
|
sensitive,
|
|
|
|
|
spoilerText,
|
|
|
|
|
visibility, // public, unlisted, private, direct
|
|
|
|
|
language,
|
|
|
|
|
editedAt,
|
|
|
|
|
filtered,
|
|
|
|
|
card,
|
|
|
|
|
createdAt,
|
2023-01-04 12:27:43 +03:00
|
|
|
|
inReplyToId,
|
2022-12-18 16:10:05 +03:00
|
|
|
|
inReplyToAccountId,
|
|
|
|
|
content,
|
|
|
|
|
mentions,
|
|
|
|
|
mediaAttachments,
|
|
|
|
|
reblog,
|
|
|
|
|
uri,
|
2023-02-21 09:29:25 +03:00
|
|
|
|
url,
|
2022-12-18 16:10:05 +03:00
|
|
|
|
emojis,
|
2023-02-17 05:12:59 +03:00
|
|
|
|
// Non-API props
|
2022-12-22 17:43:04 +03:00
|
|
|
|
_deleted,
|
2023-02-17 05:12:59 +03:00
|
|
|
|
_pinned,
|
2023-03-21 19:09:36 +03:00
|
|
|
|
_filtered,
|
2022-12-18 16:10:05 +03:00
|
|
|
|
} = status;
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-04-25 08:03:26 +03:00
|
|
|
|
console.debug('RENDER Status', id, status?.account.displayName, quoted);
|
2023-01-07 15:26:23 +03:00
|
|
|
|
|
2023-03-23 16:48:29 +03:00
|
|
|
|
const debugHover = (e) => {
|
|
|
|
|
if (e.shiftKey) {
|
2023-07-31 15:30:29 +03:00
|
|
|
|
console.log({
|
|
|
|
|
...status,
|
|
|
|
|
});
|
2023-03-23 16:48:29 +03:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2023-03-21 19:09:36 +03:00
|
|
|
|
if (allowFilters && size !== 'l' && _filtered) {
|
|
|
|
|
return (
|
|
|
|
|
<FilteredStatus
|
|
|
|
|
status={status}
|
|
|
|
|
filterInfo={_filtered}
|
|
|
|
|
instance={instance}
|
2023-03-23 16:48:29 +03:00
|
|
|
|
containerProps={{
|
|
|
|
|
onMouseEnter: debugHover,
|
|
|
|
|
}}
|
2023-03-21 19:09:36 +03:00
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const createdAtDate = new Date(createdAt);
|
|
|
|
|
const editedAtDate = new Date(editedAt);
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-04-09 19:30:32 +03:00
|
|
|
|
const currentAccount = useMemo(() => {
|
|
|
|
|
return store.session.get('currentAccount');
|
|
|
|
|
}, []);
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const isSelf = useMemo(() => {
|
|
|
|
|
return currentAccount && currentAccount === accountId;
|
2023-04-09 19:30:32 +03:00
|
|
|
|
}, [accountId, currentAccount]);
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2022-12-18 16:10:05 +03:00
|
|
|
|
let inReplyToAccountRef = mentions?.find(
|
|
|
|
|
(mention) => mention.id === inReplyToAccountId,
|
|
|
|
|
);
|
|
|
|
|
if (!inReplyToAccountRef && inReplyToAccountId === id) {
|
2023-02-21 09:29:25 +03:00
|
|
|
|
inReplyToAccountRef = { url: accountURL, username, displayName };
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}
|
|
|
|
|
const [inReplyToAccount, setInReplyToAccount] = useState(inReplyToAccountRef);
|
|
|
|
|
if (!withinContext && !inReplyToAccount && inReplyToAccountId) {
|
2023-01-07 15:26:23 +03:00
|
|
|
|
const account = states.accounts[inReplyToAccountId];
|
2022-12-18 16:10:05 +03:00
|
|
|
|
if (account) {
|
|
|
|
|
setInReplyToAccount(account);
|
|
|
|
|
} else {
|
2023-02-05 19:17:19 +03:00
|
|
|
|
memFetchAccount(inReplyToAccountId, masto)
|
2022-12-18 16:10:05 +03:00
|
|
|
|
.then((account) => {
|
|
|
|
|
setInReplyToAccount(account);
|
2023-01-07 15:26:23 +03:00
|
|
|
|
states.accounts[account.id] = account;
|
2022-12-18 16:10:05 +03:00
|
|
|
|
})
|
|
|
|
|
.catch((e) => {});
|
|
|
|
|
}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
}
|
2023-04-09 19:30:32 +03:00
|
|
|
|
const mentionSelf =
|
|
|
|
|
inReplyToAccountId === currentAccount ||
|
|
|
|
|
mentions?.find((mention) => mention.id === currentAccount);
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-09-14 06:22:24 +03:00
|
|
|
|
const readingExpandSpoilers = useMemo(() => {
|
|
|
|
|
const prefs = store.account.get('preferences') || {};
|
|
|
|
|
return !!prefs['reading:expand:spoilers'];
|
|
|
|
|
}, []);
|
|
|
|
|
const showSpoiler =
|
|
|
|
|
previewMode || readingExpandSpoilers || !!snapStates.spoilers[id] || false;
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2022-12-18 16:10:05 +03:00
|
|
|
|
if (reblog) {
|
2023-03-21 19:09:36 +03:00
|
|
|
|
// If has statusID, means useItemID (cached in states)
|
2023-08-07 16:26:43 +03:00
|
|
|
|
|
|
|
|
|
if (group) {
|
|
|
|
|
return (
|
|
|
|
|
<div class="status-group" onMouseEnter={debugHover}>
|
|
|
|
|
<div class="status-pre-meta">
|
|
|
|
|
<Icon icon="group" size="l" alt="Group" />{' '}
|
|
|
|
|
<NameText account={status.account} instance={instance} showAvatar />
|
|
|
|
|
</div>
|
|
|
|
|
<Status
|
|
|
|
|
status={statusID ? null : reblog}
|
|
|
|
|
statusID={statusID ? reblog.id : null}
|
|
|
|
|
instance={instance}
|
|
|
|
|
size={size}
|
|
|
|
|
contentTextWeight={contentTextWeight}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-18 16:10:05 +03:00
|
|
|
|
return (
|
|
|
|
|
<div class="status-reblog" onMouseEnter={debugHover}>
|
|
|
|
|
<div class="status-pre-meta">
|
|
|
|
|
<Icon icon="rocket" size="l" />{' '}
|
2023-02-05 19:17:19 +03:00
|
|
|
|
<NameText account={status.account} instance={instance} showAvatar />{' '}
|
2023-04-06 08:21:53 +03:00
|
|
|
|
<span>boosted</span>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</div>
|
2023-02-18 20:10:06 +03:00
|
|
|
|
<Status
|
2023-03-21 19:09:36 +03:00
|
|
|
|
status={statusID ? null : reblog}
|
|
|
|
|
statusID={statusID ? reblog.id : null}
|
2023-02-18 20:10:06 +03:00
|
|
|
|
instance={instance}
|
|
|
|
|
size={size}
|
|
|
|
|
contentTextWeight={contentTextWeight}
|
|
|
|
|
/>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2023-07-18 08:31:26 +03:00
|
|
|
|
const isSizeLarge = size === 'l';
|
|
|
|
|
|
2023-05-03 05:22:15 +03:00
|
|
|
|
const [forceTranslate, setForceTranslate] = useState(_forceTranslate);
|
2023-03-07 17:38:06 +03:00
|
|
|
|
const targetLanguage = getTranslateTargetLanguage(true);
|
2023-03-28 14:04:52 +03:00
|
|
|
|
const contentTranslationHideLanguages =
|
|
|
|
|
snapStates.settings.contentTranslationHideLanguages || [];
|
2023-07-22 15:31:13 +03:00
|
|
|
|
const { contentTranslation, contentTranslationAutoInline } =
|
|
|
|
|
snapStates.settings;
|
|
|
|
|
if (!contentTranslation) enableTranslate = false;
|
2023-07-18 08:31:26 +03:00
|
|
|
|
const inlineTranslate = useMemo(() => {
|
2023-07-22 15:31:13 +03:00
|
|
|
|
if (
|
|
|
|
|
!contentTranslation ||
|
|
|
|
|
!contentTranslationAutoInline ||
|
|
|
|
|
readOnly ||
|
|
|
|
|
(withinContext && !isSizeLarge) ||
|
|
|
|
|
previewMode ||
|
|
|
|
|
spoilerText ||
|
|
|
|
|
sensitive ||
|
|
|
|
|
poll ||
|
|
|
|
|
card ||
|
|
|
|
|
mediaAttachments?.length
|
|
|
|
|
) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
2023-07-21 18:54:03 +03:00
|
|
|
|
const contentLength = htmlContentLength(content);
|
2023-07-22 15:31:13 +03:00
|
|
|
|
return contentLength > 0 && contentLength <= INLINE_TRANSLATE_LIMIT;
|
2023-07-21 17:52:53 +03:00
|
|
|
|
}, [
|
2023-07-22 15:31:13 +03:00
|
|
|
|
contentTranslation,
|
|
|
|
|
contentTranslationAutoInline,
|
2023-07-21 17:52:53 +03:00
|
|
|
|
readOnly,
|
|
|
|
|
withinContext,
|
2023-07-21 18:54:03 +03:00
|
|
|
|
isSizeLarge,
|
|
|
|
|
previewMode,
|
2023-07-21 17:52:53 +03:00
|
|
|
|
spoilerText,
|
2023-07-22 15:31:13 +03:00
|
|
|
|
sensitive,
|
2023-07-21 17:52:53 +03:00
|
|
|
|
poll,
|
2023-07-22 05:10:41 +03:00
|
|
|
|
card,
|
2023-07-21 17:52:53 +03:00
|
|
|
|
mediaAttachments,
|
|
|
|
|
content,
|
|
|
|
|
]);
|
2023-03-07 17:38:06 +03:00
|
|
|
|
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const [showEdited, setShowEdited] = useState(false);
|
2023-04-06 17:51:48 +03:00
|
|
|
|
const [showReactions, setShowReactions] = useState(false);
|
2022-12-18 16:10:05 +03:00
|
|
|
|
|
2023-09-19 11:27:22 +03:00
|
|
|
|
const spoilerContentRef = useTruncated();
|
|
|
|
|
const contentRef = useTruncated();
|
2023-09-20 12:27:54 +03:00
|
|
|
|
const mediaContainerRef = useTruncated();
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const readMoreText = 'Read more →';
|
2022-12-10 12:14:48 +03:00
|
|
|
|
|
2022-12-30 15:37:57 +03:00
|
|
|
|
const statusRef = useRef(null);
|
|
|
|
|
|
2023-04-29 17:22:07 +03:00
|
|
|
|
const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this post from another instance.`;
|
2023-02-05 19:17:19 +03:00
|
|
|
|
|
2023-06-14 06:14:49 +03:00
|
|
|
|
const textWeight = useCallback(
|
|
|
|
|
() =>
|
|
|
|
|
Math.max(
|
|
|
|
|
Math.round((spoilerText.length + htmlContentLength(content)) / 140) ||
|
|
|
|
|
1,
|
|
|
|
|
1,
|
|
|
|
|
),
|
|
|
|
|
[spoilerText, content],
|
|
|
|
|
);
|
2023-02-21 18:59:34 +03:00
|
|
|
|
|
2023-03-01 15:07:22 +03:00
|
|
|
|
const createdDateText = niceDateTime(createdAtDate);
|
|
|
|
|
const editedDateText = editedAt && niceDateTime(editedAtDate);
|
2023-02-26 19:55:04 +03:00
|
|
|
|
|
2023-03-10 10:49:23 +03:00
|
|
|
|
// Can boost if:
|
|
|
|
|
// - authenticated AND
|
|
|
|
|
// - visibility != direct OR
|
|
|
|
|
// - visibility = private AND isSelf
|
|
|
|
|
let canBoost =
|
|
|
|
|
authenticated && visibility !== 'direct' && visibility !== 'private';
|
|
|
|
|
if (visibility === 'private' && isSelf) {
|
|
|
|
|
canBoost = true;
|
|
|
|
|
}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
|
|
|
|
|
const replyStatus = () => {
|
|
|
|
|
if (!sameInstance || !authenticated) {
|
|
|
|
|
return alert(unauthInteractionErrorMessage);
|
|
|
|
|
}
|
|
|
|
|
states.showCompose = {
|
|
|
|
|
replyToStatus: status,
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
2023-07-17 16:01:00 +03:00
|
|
|
|
// Check if media has no descriptions
|
|
|
|
|
const mediaNoDesc = useMemo(() => {
|
|
|
|
|
return mediaAttachments.some(
|
|
|
|
|
(attachment) => !attachment.description?.trim?.(),
|
|
|
|
|
);
|
|
|
|
|
}, [mediaAttachments]);
|
2023-02-26 19:55:04 +03:00
|
|
|
|
const boostStatus = async () => {
|
|
|
|
|
if (!sameInstance || !authenticated) {
|
2023-04-04 13:46:05 +03:00
|
|
|
|
alert(unauthInteractionErrorMessage);
|
|
|
|
|
return false;
|
2023-02-26 19:55:04 +03:00
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
if (!reblogged) {
|
2023-03-14 15:42:37 +03:00
|
|
|
|
let confirmText = 'Boost this post?';
|
2023-07-17 16:01:00 +03:00
|
|
|
|
if (mediaNoDesc) {
|
2023-03-14 15:42:37 +03:00
|
|
|
|
confirmText += '\n\n⚠️ Some media have no descriptions.';
|
|
|
|
|
}
|
|
|
|
|
const yes = confirm(confirmText);
|
2023-02-26 19:55:04 +03:00
|
|
|
|
if (!yes) {
|
2023-04-04 13:46:05 +03:00
|
|
|
|
return false;
|
2023-02-26 19:55:04 +03:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// Optimistic
|
|
|
|
|
states.statuses[sKey] = {
|
|
|
|
|
...status,
|
|
|
|
|
reblogged: !reblogged,
|
|
|
|
|
reblogsCount: reblogsCount + (reblogged ? -1 : 1),
|
|
|
|
|
};
|
|
|
|
|
if (reblogged) {
|
|
|
|
|
const newStatus = await masto.v1.statuses.unreblog(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
2023-04-04 13:46:05 +03:00
|
|
|
|
return true;
|
2023-02-26 19:55:04 +03:00
|
|
|
|
} else {
|
|
|
|
|
const newStatus = await masto.v1.statuses.reblog(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
2023-04-04 13:46:05 +03:00
|
|
|
|
return true;
|
2023-02-26 19:55:04 +03:00
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
// Revert optimistism
|
|
|
|
|
states.statuses[sKey] = status;
|
2023-04-04 13:46:05 +03:00
|
|
|
|
return false;
|
2023-02-26 19:55:04 +03:00
|
|
|
|
}
|
|
|
|
|
};
|
2023-07-17 16:01:00 +03:00
|
|
|
|
const confirmBoostStatus = async () => {
|
|
|
|
|
if (!sameInstance || !authenticated) {
|
|
|
|
|
alert(unauthInteractionErrorMessage);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
// Optimistic
|
|
|
|
|
states.statuses[sKey] = {
|
|
|
|
|
...status,
|
|
|
|
|
reblogged: !reblogged,
|
|
|
|
|
reblogsCount: reblogsCount + (reblogged ? -1 : 1),
|
|
|
|
|
};
|
|
|
|
|
if (reblogged) {
|
|
|
|
|
const newStatus = await masto.v1.statuses.unreblog(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
|
|
|
|
return true;
|
|
|
|
|
} else {
|
|
|
|
|
const newStatus = await masto.v1.statuses.reblog(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
// Revert optimistism
|
|
|
|
|
states.statuses[sKey] = status;
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
};
|
2023-02-26 19:55:04 +03:00
|
|
|
|
|
|
|
|
|
const favouriteStatus = async () => {
|
|
|
|
|
if (!sameInstance || !authenticated) {
|
|
|
|
|
return alert(unauthInteractionErrorMessage);
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
// Optimistic
|
|
|
|
|
states.statuses[sKey] = {
|
|
|
|
|
...status,
|
|
|
|
|
favourited: !favourited,
|
|
|
|
|
favouritesCount: favouritesCount + (favourited ? -1 : 1),
|
|
|
|
|
};
|
|
|
|
|
if (favourited) {
|
|
|
|
|
const newStatus = await masto.v1.statuses.unfavourite(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
|
|
|
|
} else {
|
|
|
|
|
const newStatus = await masto.v1.statuses.favourite(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
// Revert optimistism
|
|
|
|
|
states.statuses[sKey] = status;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const bookmarkStatus = async () => {
|
|
|
|
|
if (!sameInstance || !authenticated) {
|
|
|
|
|
return alert(unauthInteractionErrorMessage);
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
// Optimistic
|
|
|
|
|
states.statuses[sKey] = {
|
|
|
|
|
...status,
|
|
|
|
|
bookmarked: !bookmarked,
|
|
|
|
|
};
|
|
|
|
|
if (bookmarked) {
|
|
|
|
|
const newStatus = await masto.v1.statuses.unbookmark(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
|
|
|
|
} else {
|
|
|
|
|
const newStatus = await masto.v1.statuses.bookmark(id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
// Revert optimistism
|
|
|
|
|
states.statuses[sKey] = status;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2023-05-03 05:22:15 +03:00
|
|
|
|
const differentLanguage =
|
2023-10-01 09:39:44 +03:00
|
|
|
|
!!language &&
|
2023-05-03 05:22:15 +03:00
|
|
|
|
language !== targetLanguage &&
|
2023-05-20 09:14:35 +03:00
|
|
|
|
!localeMatch([language], [targetLanguage]) &&
|
2023-05-03 05:22:15 +03:00
|
|
|
|
!contentTranslationHideLanguages.find(
|
2023-05-20 09:14:35 +03:00
|
|
|
|
(l) => language === l || localeMatch([language], [l]),
|
2023-05-03 05:22:15 +03:00
|
|
|
|
);
|
|
|
|
|
|
2023-02-28 10:45:38 +03:00
|
|
|
|
const menuInstanceRef = useRef();
|
2023-02-26 19:55:04 +03:00
|
|
|
|
const StatusMenuItems = (
|
|
|
|
|
<>
|
|
|
|
|
{!isSizeLarge && (
|
|
|
|
|
<>
|
|
|
|
|
<MenuHeader>
|
|
|
|
|
<span class="ib">
|
|
|
|
|
<Icon icon={visibilityIconsMap[visibility]} size="s" />{' '}
|
|
|
|
|
<span>{visibilityText[visibility]}</span>
|
|
|
|
|
</span>{' '}
|
|
|
|
|
<span class="ib">
|
|
|
|
|
{repliesCount > 0 && (
|
|
|
|
|
<span>
|
|
|
|
|
<Icon icon="reply" alt="Replies" size="s" />{' '}
|
|
|
|
|
<span>{shortenNumber(repliesCount)}</span>
|
|
|
|
|
</span>
|
|
|
|
|
)}{' '}
|
|
|
|
|
{reblogsCount > 0 && (
|
|
|
|
|
<span>
|
|
|
|
|
<Icon icon="rocket" alt="Boosts" size="s" />{' '}
|
|
|
|
|
<span>{shortenNumber(reblogsCount)}</span>
|
|
|
|
|
</span>
|
|
|
|
|
)}{' '}
|
|
|
|
|
{favouritesCount > 0 && (
|
|
|
|
|
<span>
|
|
|
|
|
<Icon icon="heart" alt="Favourites" size="s" />{' '}
|
|
|
|
|
<span>{shortenNumber(favouritesCount)}</span>
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
</span>
|
|
|
|
|
<br />
|
|
|
|
|
{createdDateText}
|
|
|
|
|
</MenuHeader>
|
2023-07-31 19:15:07 +03:00
|
|
|
|
<MenuLink
|
|
|
|
|
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
|
2023-09-09 12:00:51 +03:00
|
|
|
|
onClick={(e) => {
|
|
|
|
|
onStatusLinkClick(e, status);
|
|
|
|
|
}}
|
2023-07-31 19:15:07 +03:00
|
|
|
|
>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<Icon icon="arrow-right" />
|
2023-03-09 16:51:50 +03:00
|
|
|
|
<span>View post by @{username || acct}</span>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
</MenuLink>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
{!!editedAt && (
|
|
|
|
|
<MenuItem
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setShowEdited(id);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="history" />
|
|
|
|
|
<span>
|
|
|
|
|
Show Edit History
|
|
|
|
|
<br />
|
|
|
|
|
<small class="more-insignificant">Edited: {editedDateText}</small>
|
|
|
|
|
</span>
|
|
|
|
|
</MenuItem>
|
|
|
|
|
)}
|
|
|
|
|
{(!isSizeLarge || !!editedAt) && <MenuDivider />}
|
2023-04-06 17:51:48 +03:00
|
|
|
|
{isSizeLarge && (
|
|
|
|
|
<MenuItem onClick={() => setShowReactions(true)}>
|
|
|
|
|
<Icon icon="react" />
|
|
|
|
|
<span>
|
|
|
|
|
Boosted/Favourited by<span class="more-insignificant">…</span>
|
|
|
|
|
</span>
|
|
|
|
|
</MenuItem>
|
|
|
|
|
)}
|
2023-03-14 09:11:40 +03:00
|
|
|
|
{!isSizeLarge && sameInstance && (
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<>
|
2023-04-09 20:21:02 +03:00
|
|
|
|
<div class="menu-horizontal">
|
2023-07-17 16:01:00 +03:00
|
|
|
|
<MenuConfirm
|
|
|
|
|
subMenu
|
|
|
|
|
confirmLabel={
|
|
|
|
|
<>
|
|
|
|
|
<Icon icon="rocket" />
|
2023-07-18 13:45:38 +03:00
|
|
|
|
<span>{reblogged ? 'Unboost?' : 'Boost to everyone?'}</span>
|
2023-07-17 16:01:00 +03:00
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
menuFooter={
|
|
|
|
|
mediaNoDesc &&
|
|
|
|
|
!reblogged && (
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<Icon icon="alert" />
|
|
|
|
|
Some media have no descriptions.
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
2023-04-09 20:21:02 +03:00
|
|
|
|
disabled={!canBoost}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
onClick={async () => {
|
|
|
|
|
try {
|
2023-07-17 16:01:00 +03:00
|
|
|
|
const done = await confirmBoostStatus();
|
2023-04-04 13:46:05 +03:00
|
|
|
|
if (!isSizeLarge && done) {
|
2023-02-26 19:55:04 +03:00
|
|
|
|
showToast(reblogged ? 'Unboosted' : 'Boosted');
|
2023-04-04 13:46:05 +03:00
|
|
|
|
}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
} catch (e) {}
|
|
|
|
|
}}
|
|
|
|
|
>
|
2023-03-09 16:51:50 +03:00
|
|
|
|
<Icon
|
|
|
|
|
icon="rocket"
|
|
|
|
|
style={{
|
|
|
|
|
color: reblogged && 'var(--reblog-color)',
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<span>{reblogged ? 'Unboost' : 'Boost…'}</span>
|
2023-07-17 16:01:00 +03:00
|
|
|
|
</MenuConfirm>
|
2023-04-09 20:21:02 +03:00
|
|
|
|
<MenuItem
|
|
|
|
|
onClick={() => {
|
|
|
|
|
try {
|
|
|
|
|
favouriteStatus();
|
2023-09-08 10:32:55 +03:00
|
|
|
|
if (!isSizeLarge) {
|
2023-04-09 20:21:02 +03:00
|
|
|
|
showToast(favourited ? 'Unfavourited' : 'Favourited');
|
2023-09-08 10:32:55 +03:00
|
|
|
|
}
|
2023-04-09 20:21:02 +03:00
|
|
|
|
} catch (e) {}
|
2023-03-09 16:51:50 +03:00
|
|
|
|
}}
|
2023-04-09 20:21:02 +03:00
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon="heart"
|
|
|
|
|
style={{
|
|
|
|
|
color: favourited && 'var(--favourite-color)',
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<span>{favourited ? 'Unfavourite' : 'Favourite'}</span>
|
|
|
|
|
</MenuItem>
|
2023-04-18 19:00:47 +03:00
|
|
|
|
</div>
|
|
|
|
|
<div class="menu-horizontal">
|
|
|
|
|
<MenuItem onClick={replyStatus}>
|
|
|
|
|
<Icon icon="reply" />
|
|
|
|
|
<span>Reply</span>
|
|
|
|
|
</MenuItem>
|
2023-04-09 20:21:02 +03:00
|
|
|
|
<MenuItem
|
|
|
|
|
onClick={() => {
|
|
|
|
|
try {
|
|
|
|
|
bookmarkStatus();
|
2023-09-08 10:32:55 +03:00
|
|
|
|
if (!isSizeLarge) {
|
2023-04-09 20:21:02 +03:00
|
|
|
|
showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
|
2023-09-08 10:32:55 +03:00
|
|
|
|
}
|
2023-04-09 20:21:02 +03:00
|
|
|
|
} catch (e) {}
|
2023-03-09 16:51:50 +03:00
|
|
|
|
}}
|
2023-04-09 20:21:02 +03:00
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon="bookmark"
|
|
|
|
|
style={{
|
|
|
|
|
color: bookmarked && 'var(--link-color)',
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
|
|
|
|
|
</MenuItem>
|
|
|
|
|
</div>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
</>
|
|
|
|
|
)}
|
2023-05-03 05:22:15 +03:00
|
|
|
|
{enableTranslate ? (
|
2023-03-11 13:13:30 +03:00
|
|
|
|
<MenuItem
|
|
|
|
|
disabled={forceTranslate}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setForceTranslate(true);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="translate" />
|
|
|
|
|
<span>Translate</span>
|
|
|
|
|
</MenuItem>
|
2023-05-03 05:22:15 +03:00
|
|
|
|
) : (
|
|
|
|
|
(!language || differentLanguage) && (
|
|
|
|
|
<MenuLink
|
|
|
|
|
to={`${instance ? `/${instance}` : ''}/s/${id}?translate=1`}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="translate" />
|
|
|
|
|
<span>Translate</span>
|
|
|
|
|
</MenuLink>
|
|
|
|
|
)
|
2023-03-11 13:13:30 +03:00
|
|
|
|
)}
|
2023-03-14 09:11:40 +03:00
|
|
|
|
{((!isSizeLarge && sameInstance) || enableTranslate) && <MenuDivider />}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<MenuItem href={url} target="_blank">
|
|
|
|
|
<Icon icon="external" />
|
2023-03-09 16:51:50 +03:00
|
|
|
|
<small class="menu-double-lines">{nicePostURL(url)}</small>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
</MenuItem>
|
2023-03-09 16:51:50 +03:00
|
|
|
|
<div class="menu-horizontal">
|
2023-03-07 17:38:06 +03:00
|
|
|
|
<MenuItem
|
|
|
|
|
onClick={() => {
|
2023-03-09 16:51:50 +03:00
|
|
|
|
// Copy url to clipboard
|
|
|
|
|
try {
|
|
|
|
|
navigator.clipboard.writeText(url);
|
|
|
|
|
showToast('Link copied');
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
showToast('Unable to copy link');
|
|
|
|
|
}
|
2023-03-07 17:38:06 +03:00
|
|
|
|
}}
|
|
|
|
|
>
|
2023-03-09 16:51:50 +03:00
|
|
|
|
<Icon icon="link" />
|
|
|
|
|
<span>Copy</span>
|
2023-03-07 17:38:06 +03:00
|
|
|
|
</MenuItem>
|
2023-03-09 16:51:50 +03:00
|
|
|
|
{navigator?.share &&
|
|
|
|
|
navigator?.canShare?.({
|
|
|
|
|
url,
|
|
|
|
|
}) && (
|
|
|
|
|
<MenuItem
|
|
|
|
|
onClick={() => {
|
|
|
|
|
try {
|
|
|
|
|
navigator.share({
|
|
|
|
|
url,
|
|
|
|
|
});
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
alert("Sharing doesn't seem to work.");
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="share" />
|
|
|
|
|
<span>Share…</span>
|
|
|
|
|
</MenuItem>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
2023-04-09 19:30:32 +03:00
|
|
|
|
{(isSelf || mentionSelf) && <MenuDivider />}
|
|
|
|
|
{(isSelf || mentionSelf) && (
|
|
|
|
|
<MenuItem
|
|
|
|
|
onClick={async () => {
|
|
|
|
|
try {
|
|
|
|
|
const newStatus = await masto.v1.statuses[
|
|
|
|
|
muted ? 'unmute' : 'mute'
|
|
|
|
|
](id);
|
|
|
|
|
saveStatus(newStatus, instance);
|
|
|
|
|
showToast(muted ? 'Conversation unmuted' : 'Conversation muted');
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
showToast(
|
|
|
|
|
muted
|
|
|
|
|
? 'Unable to unmute conversation'
|
|
|
|
|
: 'Unable to mute conversation',
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{muted ? (
|
|
|
|
|
<>
|
|
|
|
|
<Icon icon="unmute" />
|
|
|
|
|
<span>Unmute conversation</span>
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
<>
|
|
|
|
|
<Icon icon="mute" />
|
|
|
|
|
<span>Mute conversation</span>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</MenuItem>
|
|
|
|
|
)}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
{isSelf && (
|
2023-04-09 20:21:02 +03:00
|
|
|
|
<div class="menu-horizontal">
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<MenuItem
|
|
|
|
|
onClick={() => {
|
|
|
|
|
states.showCompose = {
|
|
|
|
|
editStatus: status,
|
|
|
|
|
};
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="pencil" />
|
|
|
|
|
<span>Edit</span>
|
|
|
|
|
</MenuItem>
|
2023-03-17 12:14:54 +03:00
|
|
|
|
{isSizeLarge && (
|
2023-07-17 16:01:00 +03:00
|
|
|
|
<MenuConfirm
|
|
|
|
|
subMenu
|
|
|
|
|
confirmLabel={
|
|
|
|
|
<>
|
|
|
|
|
<Icon icon="trash" />
|
|
|
|
|
<span>Delete this post?</span>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
menuItemClassName="danger"
|
2023-03-17 12:14:54 +03:00
|
|
|
|
onClick={() => {
|
2023-07-17 16:01:00 +03:00
|
|
|
|
// const yes = confirm('Delete this post?');
|
|
|
|
|
// if (yes) {
|
|
|
|
|
(async () => {
|
|
|
|
|
try {
|
|
|
|
|
await masto.v1.statuses.remove(id);
|
|
|
|
|
const cachedStatus = getStatus(id, instance);
|
|
|
|
|
cachedStatus._deleted = true;
|
|
|
|
|
showToast('Deleted');
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
showToast('Unable to delete');
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
// }
|
2023-03-17 12:14:54 +03:00
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="trash" />
|
|
|
|
|
<span>Delete…</span>
|
2023-07-17 16:01:00 +03:00
|
|
|
|
</MenuConfirm>
|
2023-03-17 12:14:54 +03:00
|
|
|
|
)}
|
2023-04-09 20:21:02 +03:00
|
|
|
|
</div>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
|
2023-03-07 19:01:51 +03:00
|
|
|
|
const contextMenuRef = useRef();
|
2023-03-02 10:15:49 +03:00
|
|
|
|
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
|
|
|
|
|
const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
});
|
2023-06-14 17:23:56 +03:00
|
|
|
|
const bindLongPressContext = useLongPress(
|
2023-03-07 19:01:51 +03:00
|
|
|
|
(e) => {
|
|
|
|
|
const { clientX, clientY } = e.touches?.[0] || e;
|
2023-06-14 17:23:56 +03:00
|
|
|
|
// link detection copied from onContextMenu because here it works
|
|
|
|
|
const link = e.target.closest('a');
|
|
|
|
|
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
|
|
|
|
|
e.preventDefault();
|
2023-03-07 17:40:29 +03:00
|
|
|
|
setContextMenuAnchorPoint({
|
2023-03-07 19:01:51 +03:00
|
|
|
|
x: clientX,
|
|
|
|
|
y: clientY,
|
2023-03-07 17:40:29 +03:00
|
|
|
|
});
|
|
|
|
|
setIsContextMenuOpen(true);
|
2023-03-07 19:01:51 +03:00
|
|
|
|
},
|
|
|
|
|
{
|
2023-04-24 16:36:03 +03:00
|
|
|
|
threshold: 600,
|
2023-03-07 19:01:51 +03:00
|
|
|
|
captureEvent: true,
|
|
|
|
|
detect: 'touch',
|
2023-09-29 19:26:51 +03:00
|
|
|
|
cancelOnMovement: 2, // true allows movement of up to 25 pixels
|
2023-03-07 19:01:51 +03:00
|
|
|
|
},
|
|
|
|
|
);
|
2023-03-02 10:15:49 +03:00
|
|
|
|
|
2023-04-27 03:25:39 +03:00
|
|
|
|
const showContextMenu = size !== 'l' && !previewMode && !_deleted && !quoted;
|
2023-04-26 05:35:26 +03:00
|
|
|
|
|
2023-09-08 10:32:55 +03:00
|
|
|
|
const hotkeysEnabled = !readOnly && !previewMode;
|
|
|
|
|
const rRef = useHotkeys('r', replyStatus, {
|
|
|
|
|
enabled: hotkeysEnabled,
|
|
|
|
|
});
|
|
|
|
|
const fRef = useHotkeys(
|
|
|
|
|
'f',
|
|
|
|
|
() => {
|
|
|
|
|
try {
|
|
|
|
|
favouriteStatus();
|
|
|
|
|
if (!isSizeLarge) {
|
|
|
|
|
showToast(favourited ? 'Unfavourited' : 'Favourited');
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
enabled: hotkeysEnabled,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
const dRef = useHotkeys(
|
|
|
|
|
'd',
|
|
|
|
|
() => {
|
|
|
|
|
try {
|
|
|
|
|
bookmarkStatus();
|
|
|
|
|
if (!isSizeLarge) {
|
|
|
|
|
showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
enabled: hotkeysEnabled,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
const bRef = useHotkeys(
|
|
|
|
|
'shift+b',
|
|
|
|
|
() => {
|
|
|
|
|
(async () => {
|
|
|
|
|
try {
|
|
|
|
|
const done = await confirmBoostStatus();
|
|
|
|
|
if (!isSizeLarge && done) {
|
|
|
|
|
showToast(reblogged ? 'Unboosted' : 'Boosted');
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {}
|
|
|
|
|
})();
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
enabled: hotkeysEnabled && canBoost,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
2022-12-10 12:14:48 +03:00
|
|
|
|
return (
|
2022-12-29 11:12:09 +03:00
|
|
|
|
<article
|
2023-09-08 10:32:55 +03:00
|
|
|
|
ref={(node) => {
|
|
|
|
|
statusRef.current = node;
|
|
|
|
|
// Use parent node if it's in focus
|
|
|
|
|
// Use case: <a><status /></a>
|
|
|
|
|
// When navigating (j/k), the <a> is focused instead of <status />
|
|
|
|
|
// Hotkey binding doesn't bubble up thus this hack
|
|
|
|
|
const nodeRef =
|
|
|
|
|
node?.closest?.(
|
|
|
|
|
'.timeline-item, .timeline-item-alt, .status-link, .status-focus',
|
|
|
|
|
) || node;
|
|
|
|
|
rRef.current = nodeRef;
|
|
|
|
|
fRef.current = nodeRef;
|
|
|
|
|
dRef.current = nodeRef;
|
|
|
|
|
bRef.current = nodeRef;
|
|
|
|
|
}}
|
2022-12-30 15:37:57 +03:00
|
|
|
|
tabindex="-1"
|
2022-12-18 16:10:05 +03:00
|
|
|
|
class={`status ${
|
2023-09-04 21:50:58 +03:00
|
|
|
|
!withinContext && inReplyToId && inReplyToAccount
|
|
|
|
|
? 'status-reply-to'
|
|
|
|
|
: ''
|
2023-02-17 05:12:59 +03:00
|
|
|
|
} visibility-${visibility} ${_pinned ? 'status-pinned' : ''} ${
|
2022-12-18 16:10:05 +03:00
|
|
|
|
{
|
|
|
|
|
s: 'small',
|
|
|
|
|
m: 'medium',
|
|
|
|
|
l: 'large',
|
|
|
|
|
}[size]
|
2023-04-22 19:55:47 +03:00
|
|
|
|
} ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
onMouseEnter={debugHover}
|
2023-03-02 10:15:49 +03:00
|
|
|
|
onContextMenu={(e) => {
|
2023-06-14 17:23:56 +03:00
|
|
|
|
// FIXME: this code isn't getting called on Chrome at all?
|
2023-04-26 05:35:26 +03:00
|
|
|
|
if (!showContextMenu) return;
|
2023-03-02 10:15:49 +03:00
|
|
|
|
if (e.metaKey) return;
|
2023-03-14 14:02:54 +03:00
|
|
|
|
// console.log('context menu', e);
|
2023-03-09 16:51:50 +03:00
|
|
|
|
const link = e.target.closest('a');
|
|
|
|
|
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
|
2023-03-02 10:15:49 +03:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
setContextMenuAnchorPoint({
|
|
|
|
|
x: e.clientX,
|
|
|
|
|
y: e.clientY,
|
|
|
|
|
});
|
|
|
|
|
setIsContextMenuOpen(true);
|
|
|
|
|
}}
|
2023-06-14 17:23:56 +03:00
|
|
|
|
{...(showContextMenu ? bindLongPressContext() : {})}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
>
|
2023-04-26 05:35:26 +03:00
|
|
|
|
{showContextMenu && (
|
2023-03-02 15:37:40 +03:00
|
|
|
|
<ControlledMenu
|
2023-03-07 19:01:51 +03:00
|
|
|
|
ref={contextMenuRef}
|
2023-03-02 15:37:40 +03:00
|
|
|
|
state={isContextMenuOpen ? 'open' : undefined}
|
|
|
|
|
anchorPoint={contextMenuAnchorPoint}
|
|
|
|
|
direction="right"
|
2023-08-06 11:54:13 +03:00
|
|
|
|
onClose={(e) => {
|
2023-04-20 12:51:40 +03:00
|
|
|
|
setIsContextMenuOpen(false);
|
2023-04-24 16:56:13 +03:00
|
|
|
|
// statusRef.current?.focus?.();
|
2023-08-06 11:54:13 +03:00
|
|
|
|
if (e?.reason === 'click') {
|
|
|
|
|
statusRef.current?.closest('[tabindex]')?.focus?.();
|
|
|
|
|
}
|
2023-04-20 12:51:40 +03:00
|
|
|
|
}}
|
2023-03-02 15:37:40 +03:00
|
|
|
|
portal={{
|
|
|
|
|
target: document.body,
|
|
|
|
|
}}
|
|
|
|
|
containerProps={{
|
|
|
|
|
style: {
|
|
|
|
|
// Higher than the backdrop
|
|
|
|
|
zIndex: 1001,
|
|
|
|
|
},
|
2023-03-07 19:01:51 +03:00
|
|
|
|
onClick: () => {
|
|
|
|
|
contextMenuRef.current?.closeMenu?.();
|
|
|
|
|
},
|
2023-03-02 15:37:40 +03:00
|
|
|
|
}}
|
|
|
|
|
overflow="auto"
|
2023-03-14 14:02:54 +03:00
|
|
|
|
boundingBoxPadding={safeBoundingBoxPadding()}
|
2023-03-02 15:37:40 +03:00
|
|
|
|
unmountOnClose
|
|
|
|
|
>
|
|
|
|
|
{StatusMenuItems}
|
|
|
|
|
</ControlledMenu>
|
|
|
|
|
)}
|
2022-12-20 15:17:38 +03:00
|
|
|
|
{size !== 'l' && (
|
|
|
|
|
<div class="status-badge">
|
|
|
|
|
{reblogged && <Icon class="reblog" icon="rocket" size="s" />}
|
|
|
|
|
{favourited && <Icon class="favourite" icon="heart" size="s" />}
|
|
|
|
|
{bookmarked && <Icon class="bookmark" icon="bookmark" size="s" />}
|
2023-02-17 05:12:59 +03:00
|
|
|
|
{_pinned && <Icon class="pin" icon="pin" size="s" />}
|
2022-12-20 15:17:38 +03:00
|
|
|
|
</div>
|
|
|
|
|
)}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
{size !== 's' && (
|
|
|
|
|
<a
|
2023-02-21 09:29:25 +03:00
|
|
|
|
href={accountURL}
|
2022-12-29 11:11:58 +03:00
|
|
|
|
tabindex="-1"
|
2022-12-18 16:10:05 +03:00
|
|
|
|
// target="_blank"
|
|
|
|
|
title={`@${acct}`}
|
|
|
|
|
onClick={(e) => {
|
2022-12-10 12:14:48 +03:00
|
|
|
|
e.preventDefault();
|
2022-12-18 16:10:05 +03:00
|
|
|
|
e.stopPropagation();
|
2023-02-05 19:17:19 +03:00
|
|
|
|
states.showAccount = {
|
|
|
|
|
account: status.account,
|
|
|
|
|
instance,
|
|
|
|
|
};
|
2022-12-10 12:14:48 +03:00
|
|
|
|
}}
|
|
|
|
|
>
|
2023-04-10 19:26:43 +03:00
|
|
|
|
<Avatar url={avatarStatic || avatar} size="xxl" squircle={bot} />
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</a>
|
2022-12-10 12:14:48 +03:00
|
|
|
|
)}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="meta">
|
2023-09-29 03:58:31 +03:00
|
|
|
|
<span class="meta-name">
|
|
|
|
|
<NameText
|
|
|
|
|
account={status.account}
|
|
|
|
|
instance={instance}
|
|
|
|
|
showAvatar={size === 's'}
|
|
|
|
|
showAcct={isSizeLarge}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
2022-12-22 05:35:39 +03:00
|
|
|
|
{/* {inReplyToAccount && !withinContext && size !== 's' && (
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<>
|
|
|
|
|
{' '}
|
|
|
|
|
<span class="ib">
|
|
|
|
|
<Icon icon="arrow-right" class="arrow" />{' '}
|
2023-02-05 19:17:19 +03:00
|
|
|
|
<NameText account={inReplyToAccount} instance={instance} short />
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</span>
|
|
|
|
|
</>
|
2022-12-22 05:35:39 +03:00
|
|
|
|
)} */}
|
|
|
|
|
{/* </span> */}{' '}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
{size !== 'l' &&
|
2023-03-17 12:14:54 +03:00
|
|
|
|
(_deleted ? (
|
|
|
|
|
<span class="status-deleted-tag">Deleted</span>
|
2023-04-27 03:25:39 +03:00
|
|
|
|
) : url && !previewMode && !quoted ? (
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<Menu
|
2023-02-28 10:45:38 +03:00
|
|
|
|
instanceRef={menuInstanceRef}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
portal={{
|
2023-03-01 10:44:58 +03:00
|
|
|
|
target: document.body,
|
2023-02-26 19:55:04 +03:00
|
|
|
|
}}
|
2023-02-28 11:56:30 +03:00
|
|
|
|
containerProps={{
|
2023-03-01 10:44:58 +03:00
|
|
|
|
style: {
|
|
|
|
|
// Higher than the backdrop
|
|
|
|
|
zIndex: 1001,
|
|
|
|
|
},
|
2023-07-19 10:19:03 +03:00
|
|
|
|
onClick: (e) => {
|
|
|
|
|
if (e.target === e.currentTarget)
|
|
|
|
|
menuInstanceRef.current?.closeMenu?.();
|
2023-02-28 11:56:30 +03:00
|
|
|
|
},
|
|
|
|
|
}}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
align="end"
|
2023-06-13 12:46:37 +03:00
|
|
|
|
gap={4}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
overflow="auto"
|
|
|
|
|
viewScroll="close"
|
|
|
|
|
boundingBoxPadding="8 8 8 8"
|
2023-02-28 10:45:38 +03:00
|
|
|
|
unmountOnClose
|
2023-03-01 14:17:04 +03:00
|
|
|
|
menuButton={({ open }) => (
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<Link
|
|
|
|
|
to={instance ? `/${instance}/s/${id}` : `/s/${id}`}
|
|
|
|
|
onClick={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
2023-09-09 12:00:51 +03:00
|
|
|
|
onStatusLinkClick?.(e, status);
|
2023-02-26 19:55:04 +03:00
|
|
|
|
}}
|
2023-03-01 14:17:04 +03:00
|
|
|
|
class={`time ${open ? 'is-open' : ''}`}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
>
|
|
|
|
|
<Icon
|
|
|
|
|
icon={visibilityIconsMap[visibility]}
|
|
|
|
|
alt={visibilityText[visibility]}
|
|
|
|
|
size="s"
|
|
|
|
|
/>{' '}
|
|
|
|
|
<RelativeTime datetime={createdAtDate} format="micro" />
|
|
|
|
|
</Link>
|
2023-03-01 14:17:04 +03:00
|
|
|
|
)}
|
2023-02-05 19:17:19 +03:00
|
|
|
|
>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
{StatusMenuItems}
|
|
|
|
|
</Menu>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
) : (
|
|
|
|
|
<span class="time">
|
|
|
|
|
<Icon
|
|
|
|
|
icon={visibilityIconsMap[visibility]}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
alt={visibilityText[visibility]}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
size="s"
|
|
|
|
|
/>{' '}
|
2023-01-05 05:50:27 +03:00
|
|
|
|
<RelativeTime datetime={createdAtDate} format="micro" />
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</span>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
2023-04-06 13:21:56 +03:00
|
|
|
|
{visibility === 'direct' && (
|
|
|
|
|
<>
|
|
|
|
|
<div class="status-direct-badge">Private mention</div>{' '}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2023-01-23 15:34:53 +03:00
|
|
|
|
{!withinContext && (
|
2023-01-10 14:59:02 +03:00
|
|
|
|
<>
|
2023-09-04 21:50:58 +03:00
|
|
|
|
{(!!inReplyToId && inReplyToAccountId === status.account?.id) ||
|
2023-02-19 16:16:23 +03:00
|
|
|
|
!!snapStates.statusThreadNumber[sKey] ? (
|
2023-01-10 14:59:02 +03:00
|
|
|
|
<div class="status-thread-badge">
|
|
|
|
|
<Icon icon="thread" size="s" />
|
|
|
|
|
Thread
|
2023-02-19 16:16:23 +03:00
|
|
|
|
{snapStates.statusThreadNumber[sKey]
|
|
|
|
|
? ` ${snapStates.statusThreadNumber[sKey]}/X`
|
2023-01-10 14:59:02 +03:00
|
|
|
|
: ''}
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
!!inReplyToId &&
|
|
|
|
|
!!inReplyToAccount &&
|
|
|
|
|
(!!spoilerText ||
|
|
|
|
|
!mentions.find((mention) => {
|
|
|
|
|
return mention.id === inReplyToAccountId;
|
|
|
|
|
})) && (
|
|
|
|
|
<div class="status-reply-badge">
|
|
|
|
|
<Icon icon="reply" />{' '}
|
2023-02-05 19:17:19 +03:00
|
|
|
|
<NameText
|
|
|
|
|
account={inReplyToAccount}
|
|
|
|
|
instance={instance}
|
|
|
|
|
short
|
|
|
|
|
/>
|
2022-12-23 20:22:25 +03:00
|
|
|
|
</div>
|
2023-01-10 14:59:02 +03:00
|
|
|
|
)
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<div
|
2023-02-07 07:56:26 +03:00
|
|
|
|
class={`content-container ${
|
|
|
|
|
spoilerText || sensitive ? 'has-spoiler' : ''
|
|
|
|
|
} ${showSpoiler ? 'show-spoiler' : ''}`}
|
2023-02-21 18:59:34 +03:00
|
|
|
|
data-content-text-weight={contentTextWeight ? textWeight() : null}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
style={
|
2023-02-26 19:55:04 +03:00
|
|
|
|
(isSizeLarge || contentTextWeight) && {
|
2023-02-21 18:59:34 +03:00
|
|
|
|
'--content-text-weight': textWeight(),
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
>
|
2023-02-05 19:19:22 +03:00
|
|
|
|
{!!spoilerText && (
|
2022-12-14 16:48:17 +03:00
|
|
|
|
<>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<div
|
2023-08-23 13:34:11 +03:00
|
|
|
|
class="content spoiler-content"
|
2022-12-18 16:10:05 +03:00
|
|
|
|
lang={language}
|
2023-04-10 15:23:40 +03:00
|
|
|
|
dir="auto"
|
2022-12-18 16:10:05 +03:00
|
|
|
|
ref={spoilerContentRef}
|
|
|
|
|
data-read-more={readMoreText}
|
|
|
|
|
>
|
2023-06-14 12:37:41 +03:00
|
|
|
|
<p>
|
|
|
|
|
<EmojiText text={spoilerText} emojis={emojis} />
|
|
|
|
|
</p>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</div>
|
|
|
|
|
<button
|
2023-01-28 17:34:36 +03:00
|
|
|
|
class={`light spoiler ${showSpoiler ? 'spoiling' : ''}`}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
type="button"
|
2023-09-14 06:22:24 +03:00
|
|
|
|
disabled={readingExpandSpoilers}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
onClick={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
2022-12-20 14:14:50 +03:00
|
|
|
|
if (showSpoiler) {
|
2023-01-07 15:26:23 +03:00
|
|
|
|
delete states.spoilers[id];
|
2022-12-20 14:14:50 +03:00
|
|
|
|
} else {
|
2023-01-07 15:26:23 +03:00
|
|
|
|
states.spoilers[id] = true;
|
2022-12-20 14:14:50 +03:00
|
|
|
|
}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
|
2023-09-14 06:22:24 +03:00
|
|
|
|
{readingExpandSpoilers
|
|
|
|
|
? 'Content warning'
|
|
|
|
|
: showSpoiler
|
|
|
|
|
? 'Show less'
|
|
|
|
|
: 'Show more'}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</button>
|
2022-12-10 12:14:48 +03:00
|
|
|
|
</>
|
|
|
|
|
)}
|
2023-08-23 13:34:11 +03:00
|
|
|
|
<div class="content" ref={contentRef} data-read-more={readMoreText}>
|
2023-04-22 19:55:47 +03:00
|
|
|
|
<div
|
2023-08-23 13:34:11 +03:00
|
|
|
|
lang={language}
|
|
|
|
|
dir="auto"
|
2023-08-19 12:07:16 +03:00
|
|
|
|
class="inner-content"
|
2023-09-21 08:02:40 +03:00
|
|
|
|
onClick={handleContentLinks({
|
|
|
|
|
mentions,
|
|
|
|
|
instance,
|
|
|
|
|
previewMode,
|
|
|
|
|
statusURL: url,
|
|
|
|
|
})}
|
2023-04-22 19:55:47 +03:00
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
|
__html: enhanceContent(content, {
|
|
|
|
|
emojis,
|
|
|
|
|
postEnhanceDOM: (dom) => {
|
|
|
|
|
// Remove target="_blank" from links
|
|
|
|
|
dom
|
|
|
|
|
.querySelectorAll('a.u-url[target="_blank"]')
|
|
|
|
|
.forEach((a) => {
|
|
|
|
|
if (!/http/i.test(a.innerText.trim())) {
|
2023-02-23 11:45:53 +03:00
|
|
|
|
a.removeAttribute('target');
|
2023-04-22 19:55:47 +03:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (previewMode) return;
|
|
|
|
|
// Unfurl Mastodon links
|
2023-04-25 16:57:12 +03:00
|
|
|
|
Array.from(
|
|
|
|
|
dom.querySelectorAll(
|
2023-04-22 19:55:47 +03:00
|
|
|
|
'a[href]:not(.u-url):not(.mention):not(.hashtag)',
|
2023-04-25 16:57:12 +03:00
|
|
|
|
),
|
|
|
|
|
)
|
2023-05-16 05:40:05 +03:00
|
|
|
|
.filter((a) => {
|
|
|
|
|
const url = a.href;
|
|
|
|
|
const isPostItself =
|
|
|
|
|
url === status.url || url === status.uri;
|
|
|
|
|
return !isPostItself && isMastodonLinkMaybe(url);
|
|
|
|
|
})
|
2023-04-22 19:55:47 +03:00
|
|
|
|
.forEach((a, i) => {
|
2023-04-25 16:57:12 +03:00
|
|
|
|
unfurlMastodonLink(currentInstance, a.href).then(
|
|
|
|
|
(result) => {
|
|
|
|
|
if (!result) return;
|
|
|
|
|
a.removeAttribute('target');
|
2023-05-19 20:06:16 +03:00
|
|
|
|
if (!sKey) return;
|
2023-04-25 16:57:12 +03:00
|
|
|
|
if (!Array.isArray(states.statusQuotes[sKey])) {
|
|
|
|
|
states.statusQuotes[sKey] = [];
|
|
|
|
|
}
|
|
|
|
|
if (!states.statusQuotes[sKey][i]) {
|
|
|
|
|
states.statusQuotes[sKey].splice(i, 0, result);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
);
|
2023-04-22 19:55:47 +03:00
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2023-04-25 08:03:26 +03:00
|
|
|
|
<QuoteStatuses id={id} instance={instance} level={quoted} />
|
2023-04-22 19:55:47 +03:00
|
|
|
|
</div>
|
2022-12-21 14:29:37 +03:00
|
|
|
|
{!!poll && (
|
|
|
|
|
<Poll
|
2022-12-27 13:09:23 +03:00
|
|
|
|
lang={language}
|
2022-12-21 14:29:37 +03:00
|
|
|
|
poll={poll}
|
2023-02-19 09:49:53 +03:00
|
|
|
|
readOnly={readOnly || !sameInstance || !authenticated}
|
2022-12-21 14:29:37 +03:00
|
|
|
|
onUpdate={(newPoll) => {
|
2023-02-06 11:35:03 +03:00
|
|
|
|
states.statuses[sKey].poll = newPoll;
|
2022-12-21 14:29:37 +03:00
|
|
|
|
}}
|
2023-02-05 19:17:19 +03:00
|
|
|
|
refresh={() => {
|
|
|
|
|
return masto.v1.polls
|
|
|
|
|
.fetch(poll.id)
|
|
|
|
|
.then((pollResponse) => {
|
2023-02-06 11:35:03 +03:00
|
|
|
|
states.statuses[sKey].poll = pollResponse;
|
2023-02-05 19:17:19 +03:00
|
|
|
|
})
|
|
|
|
|
.catch((e) => {}); // Silently fail
|
|
|
|
|
}}
|
|
|
|
|
votePoll={(choices) => {
|
|
|
|
|
return masto.v1.polls
|
|
|
|
|
.vote(poll.id, {
|
|
|
|
|
choices,
|
|
|
|
|
})
|
|
|
|
|
.then((pollResponse) => {
|
2023-02-06 11:35:03 +03:00
|
|
|
|
states.statuses[sKey].poll = pollResponse;
|
2023-02-05 19:17:19 +03:00
|
|
|
|
})
|
|
|
|
|
.catch((e) => {}); // Silently fail
|
|
|
|
|
}}
|
2022-12-21 14:29:37 +03:00
|
|
|
|
/>
|
|
|
|
|
)}
|
2023-07-31 15:30:29 +03:00
|
|
|
|
{(((enableTranslate || inlineTranslate) &&
|
|
|
|
|
!!content.trim() &&
|
2023-09-26 11:23:41 +03:00
|
|
|
|
!!getHTMLText(emojifyText(content, emojis)) &&
|
2023-07-31 15:30:29 +03:00
|
|
|
|
differentLanguage) ||
|
2023-07-22 15:50:53 +03:00
|
|
|
|
forceTranslate) && (
|
2023-03-07 17:38:06 +03:00
|
|
|
|
<TranslationBlock
|
2023-07-18 08:31:26 +03:00
|
|
|
|
forceTranslate={forceTranslate || inlineTranslate}
|
2023-07-21 19:06:15 +03:00
|
|
|
|
mini={!isSizeLarge && !withinContext}
|
2023-03-07 17:38:06 +03:00
|
|
|
|
sourceLanguage={language}
|
|
|
|
|
text={
|
|
|
|
|
(spoilerText ? `${spoilerText}\n\n` : '') +
|
|
|
|
|
getHTMLText(content) +
|
|
|
|
|
(poll?.options?.length
|
|
|
|
|
? `\n\nPoll:\n${poll.options
|
2023-08-17 09:08:26 +03:00
|
|
|
|
.map(
|
|
|
|
|
(option) =>
|
|
|
|
|
`- ${option.title}${
|
|
|
|
|
option.votesCount >= 0
|
2023-08-29 15:41:48 +03:00
|
|
|
|
? ` (${option.votesCount})`
|
2023-08-17 09:08:26 +03:00
|
|
|
|
: ''
|
|
|
|
|
}`,
|
|
|
|
|
)
|
2023-03-07 17:38:06 +03:00
|
|
|
|
.join('\n')}`
|
|
|
|
|
: '')
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
{!spoilerText && sensitive && !!mediaAttachments.length && (
|
|
|
|
|
<button
|
2023-01-28 17:34:36 +03:00
|
|
|
|
class={`plain spoiler ${showSpoiler ? 'spoiling' : ''}`}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
type="button"
|
|
|
|
|
onClick={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
2022-12-20 14:14:50 +03:00
|
|
|
|
if (showSpoiler) {
|
2023-01-07 15:26:23 +03:00
|
|
|
|
delete states.spoilers[id];
|
2022-12-20 14:14:50 +03:00
|
|
|
|
} else {
|
2023-01-07 15:26:23 +03:00
|
|
|
|
states.spoilers[id] = true;
|
2022-12-20 14:14:50 +03:00
|
|
|
|
}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
|
|
|
|
|
content
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
2022-12-12 11:25:55 +03:00
|
|
|
|
{!!mediaAttachments.length && (
|
2022-12-22 05:47:45 +03:00
|
|
|
|
<div
|
2023-09-20 12:27:54 +03:00
|
|
|
|
ref={mediaContainerRef}
|
2023-01-23 15:35:15 +03:00
|
|
|
|
class={`media-container media-eq${mediaAttachments.length} ${
|
2022-12-22 05:47:45 +03:00
|
|
|
|
mediaAttachments.length > 2 ? 'media-gt2' : ''
|
|
|
|
|
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
|
|
|
|
|
>
|
2022-12-28 05:51:57 +03:00
|
|
|
|
{mediaAttachments
|
2023-02-26 19:55:04 +03:00
|
|
|
|
.slice(0, isSizeLarge ? undefined : 4)
|
2022-12-28 05:51:57 +03:00
|
|
|
|
.map((media, i) => (
|
|
|
|
|
<Media
|
|
|
|
|
key={media.id}
|
|
|
|
|
media={media}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
autoAnimate={isSizeLarge}
|
2023-10-01 08:18:31 +03:00
|
|
|
|
showCaption={mediaAttachments.length === 1}
|
2023-09-30 18:23:34 +03:00
|
|
|
|
lang={language}
|
2023-04-14 10:30:04 +03:00
|
|
|
|
to={`/${instance}/s/${id}?${
|
|
|
|
|
withinContext ? 'media' : 'media-only'
|
|
|
|
|
}=${i + 1}`}
|
|
|
|
|
onClick={
|
|
|
|
|
onMediaClick
|
|
|
|
|
? (e) => {
|
2023-04-16 19:14:09 +03:00
|
|
|
|
onMediaClick(e, i, media, status);
|
2023-04-14 10:30:04 +03:00
|
|
|
|
}
|
|
|
|
|
: undefined
|
|
|
|
|
}
|
2022-12-28 05:51:57 +03:00
|
|
|
|
/>
|
|
|
|
|
))}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{!!card &&
|
2023-05-16 05:40:05 +03:00
|
|
|
|
card?.url !== status.url &&
|
|
|
|
|
card?.url !== status.uri &&
|
|
|
|
|
/^https/i.test(card?.url) &&
|
2023-01-05 08:29:44 +03:00
|
|
|
|
!sensitive &&
|
|
|
|
|
!spoilerText &&
|
2023-01-05 10:28:04 +03:00
|
|
|
|
!poll &&
|
2023-04-23 14:29:25 +03:00
|
|
|
|
!mediaAttachments.length &&
|
|
|
|
|
!snapStates.statusQuotes[sKey] && (
|
2023-02-23 11:45:53 +03:00
|
|
|
|
<Card card={card} instance={currentInstance} />
|
|
|
|
|
)}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
</div>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
{isSizeLarge && (
|
2022-12-11 16:22:22 +03:00
|
|
|
|
<>
|
|
|
|
|
<div class="extra-meta">
|
2023-03-17 12:14:54 +03:00
|
|
|
|
{_deleted ? (
|
|
|
|
|
<span class="status-deleted-tag">Deleted</span>
|
|
|
|
|
) : (
|
2022-12-10 12:14:48 +03:00
|
|
|
|
<>
|
2023-03-17 12:14:54 +03:00
|
|
|
|
<Icon
|
|
|
|
|
icon={visibilityIconsMap[visibility]}
|
2023-05-20 14:43:32 +03:00
|
|
|
|
alt={visibilityText[visibility]}
|
2023-03-17 12:14:54 +03:00
|
|
|
|
/>{' '}
|
2023-09-26 05:55:36 +03:00
|
|
|
|
<a href={url} target="_blank" rel="noopener noreferrer">
|
2023-03-17 12:14:54 +03:00
|
|
|
|
<time
|
|
|
|
|
class="created"
|
|
|
|
|
datetime={createdAtDate.toISOString()}
|
|
|
|
|
>
|
|
|
|
|
{createdDateText}
|
|
|
|
|
</time>
|
|
|
|
|
</a>
|
|
|
|
|
{editedAt && (
|
|
|
|
|
<>
|
|
|
|
|
{' '}
|
|
|
|
|
• <Icon icon="pencil" alt="Edited" />{' '}
|
|
|
|
|
<time
|
|
|
|
|
class="edited"
|
|
|
|
|
datetime={editedAtDate.toISOString()}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setShowEdited(id);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{editedDateText}
|
|
|
|
|
</time>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2022-12-10 12:14:48 +03:00
|
|
|
|
</>
|
|
|
|
|
)}
|
2022-12-11 16:22:22 +03:00
|
|
|
|
</div>
|
2023-03-17 12:14:54 +03:00
|
|
|
|
<div class={`actions ${_deleted ? 'disabled' : ''}`}>
|
2022-12-19 08:38:16 +03:00
|
|
|
|
<div class="action has-count">
|
|
|
|
|
<StatusButton
|
|
|
|
|
title="Reply"
|
|
|
|
|
alt="Comments"
|
|
|
|
|
class="reply-button"
|
|
|
|
|
icon="comment"
|
|
|
|
|
count={repliesCount}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
onClick={replyStatus}
|
2022-12-19 08:38:16 +03:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
2023-07-17 16:01:00 +03:00
|
|
|
|
{/* <div class="action has-count">
|
2023-04-03 04:09:52 +03:00
|
|
|
|
<StatusButton
|
|
|
|
|
checked={reblogged}
|
|
|
|
|
title={['Boost', 'Unboost']}
|
|
|
|
|
alt={['Boost', 'Boosted']}
|
|
|
|
|
class="reblog-button"
|
|
|
|
|
icon="rocket"
|
|
|
|
|
count={reblogsCount}
|
|
|
|
|
onClick={boostStatus}
|
|
|
|
|
disabled={!canBoost}
|
|
|
|
|
/>
|
2023-07-17 16:01:00 +03:00
|
|
|
|
</div> */}
|
2023-07-18 13:45:38 +03:00
|
|
|
|
<MenuConfirm
|
|
|
|
|
disabled={!canBoost}
|
|
|
|
|
onClick={confirmBoostStatus}
|
|
|
|
|
confirmLabel={
|
|
|
|
|
<>
|
|
|
|
|
<Icon icon="rocket" />
|
|
|
|
|
<span>{reblogged ? 'Unboost?' : 'Boost to everyone?'}</span>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
menuFooter={
|
|
|
|
|
mediaNoDesc &&
|
|
|
|
|
!reblogged && (
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<Icon icon="alert" />
|
|
|
|
|
Some media have no descriptions.
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
2023-07-17 16:01:00 +03:00
|
|
|
|
>
|
2023-07-18 13:45:38 +03:00
|
|
|
|
<div class="action has-count">
|
|
|
|
|
<StatusButton
|
|
|
|
|
checked={reblogged}
|
|
|
|
|
title={['Boost', 'Unboost']}
|
|
|
|
|
alt={['Boost', 'Boosted']}
|
|
|
|
|
class="reblog-button"
|
|
|
|
|
icon="rocket"
|
|
|
|
|
count={reblogsCount}
|
|
|
|
|
// onClick={boostStatus}
|
|
|
|
|
disabled={!canBoost}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</MenuConfirm>
|
2022-12-19 08:38:16 +03:00
|
|
|
|
<div class="action has-count">
|
2022-12-17 12:26:41 +03:00
|
|
|
|
<StatusButton
|
2022-12-19 08:38:16 +03:00
|
|
|
|
checked={favourited}
|
|
|
|
|
title={['Favourite', 'Unfavourite']}
|
|
|
|
|
alt={['Favourite', 'Favourited']}
|
|
|
|
|
class="favourite-button"
|
|
|
|
|
icon="heart"
|
|
|
|
|
count={favouritesCount}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
onClick={favouriteStatus}
|
2022-12-17 12:26:41 +03:00
|
|
|
|
/>
|
2022-12-19 08:38:16 +03:00
|
|
|
|
</div>
|
|
|
|
|
<div class="action">
|
|
|
|
|
<StatusButton
|
|
|
|
|
checked={bookmarked}
|
|
|
|
|
title={['Bookmark', 'Unbookmark']}
|
|
|
|
|
alt={['Bookmark', 'Bookmarked']}
|
|
|
|
|
class="bookmark-button"
|
|
|
|
|
icon="bookmark"
|
2023-02-26 19:55:04 +03:00
|
|
|
|
onClick={bookmarkStatus}
|
2022-12-19 08:38:16 +03:00
|
|
|
|
/>
|
|
|
|
|
</div>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<Menu
|
|
|
|
|
portal={{
|
|
|
|
|
target:
|
|
|
|
|
document.querySelector('.status-deck') || document.body,
|
|
|
|
|
}}
|
|
|
|
|
align="end"
|
2023-06-13 12:46:37 +03:00
|
|
|
|
gap={4}
|
2023-02-26 19:55:04 +03:00
|
|
|
|
overflow="auto"
|
|
|
|
|
viewScroll="close"
|
|
|
|
|
boundingBoxPadding="8 8 8 8"
|
|
|
|
|
menuButton={
|
|
|
|
|
<div class="action">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="More"
|
|
|
|
|
class="plain more-button"
|
2023-01-24 15:56:43 +03:00
|
|
|
|
>
|
2023-02-26 19:55:04 +03:00
|
|
|
|
<Icon icon="more" size="l" alt="More" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
{StatusMenuItems}
|
|
|
|
|
</Menu>
|
2022-12-11 16:22:22 +03:00
|
|
|
|
</div>
|
|
|
|
|
</>
|
2022-12-10 12:14:48 +03:00
|
|
|
|
)}
|
|
|
|
|
</div>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
{!!showEdited && (
|
|
|
|
|
<Modal
|
|
|
|
|
onClick={(e) => {
|
|
|
|
|
if (e.target === e.currentTarget) {
|
|
|
|
|
setShowEdited(false);
|
2022-12-30 15:37:57 +03:00
|
|
|
|
statusRef.current?.focus();
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<EditedAtModal
|
|
|
|
|
statusID={showEdited}
|
2023-02-05 19:17:19 +03:00
|
|
|
|
instance={instance}
|
|
|
|
|
fetchStatusHistory={() => {
|
|
|
|
|
return masto.v1.statuses.listHistory(showEdited);
|
|
|
|
|
}}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
onClose={() => {
|
|
|
|
|
setShowEdited(false);
|
2022-12-30 15:37:57 +03:00
|
|
|
|
statusRef.current?.focus();
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Modal>
|
|
|
|
|
)}
|
2023-04-06 17:51:48 +03:00
|
|
|
|
{showReactions && (
|
|
|
|
|
<Modal
|
|
|
|
|
class="light"
|
|
|
|
|
onClick={(e) => {
|
|
|
|
|
if (e.target === e.currentTarget) {
|
|
|
|
|
setShowReactions(false);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
2023-04-20 11:10:57 +03:00
|
|
|
|
<ReactionsModal
|
|
|
|
|
statusID={id}
|
|
|
|
|
instance={instance}
|
|
|
|
|
onClose={() => setShowReactions(false)}
|
|
|
|
|
/>
|
2023-04-06 17:51:48 +03:00
|
|
|
|
</Modal>
|
|
|
|
|
)}
|
2022-12-29 11:12:09 +03:00
|
|
|
|
</article>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-23 11:45:53 +03:00
|
|
|
|
function Card({ card, instance }) {
|
2023-04-22 19:55:47 +03:00
|
|
|
|
const snapStates = useSnapshot(states);
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const {
|
|
|
|
|
blurhash,
|
|
|
|
|
title,
|
|
|
|
|
description,
|
|
|
|
|
html,
|
|
|
|
|
providerName,
|
|
|
|
|
authorName,
|
|
|
|
|
width,
|
|
|
|
|
height,
|
|
|
|
|
image,
|
|
|
|
|
url,
|
|
|
|
|
type,
|
|
|
|
|
embedUrl,
|
2023-08-29 19:45:18 +03:00
|
|
|
|
language,
|
2022-12-18 16:10:05 +03:00
|
|
|
|
} = card;
|
|
|
|
|
|
|
|
|
|
/* type
|
|
|
|
|
link = Link OEmbed
|
|
|
|
|
photo = Photo OEmbed
|
|
|
|
|
video = Video OEmbed
|
|
|
|
|
rich = iframe OEmbed. Not currently accepted, so won’t show up in practice.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
const hasText = title || providerName || authorName;
|
2022-12-29 06:34:29 +03:00
|
|
|
|
const isLandscape = width / height >= 1.2;
|
2023-01-07 06:52:23 +03:00
|
|
|
|
const size = isLandscape ? 'large' : '';
|
2022-12-18 16:10:05 +03:00
|
|
|
|
|
2023-02-23 11:45:53 +03:00
|
|
|
|
const [cardStatusURL, setCardStatusURL] = useState(null);
|
|
|
|
|
// const [cardStatusID, setCardStatusID] = useState(null);
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (hasText && image && isMastodonLinkMaybe(url)) {
|
|
|
|
|
unfurlMastodonLink(instance, url).then((result) => {
|
|
|
|
|
if (!result) return;
|
|
|
|
|
const { id, url } = result;
|
|
|
|
|
setCardStatusURL('#' + url);
|
|
|
|
|
|
|
|
|
|
// NOTE: This is for quote post
|
|
|
|
|
// (async () => {
|
|
|
|
|
// const { masto } = api({ instance });
|
|
|
|
|
// const status = await masto.v1.statuses.fetch(id);
|
|
|
|
|
// saveStatus(status, instance);
|
|
|
|
|
// setCardStatusID(id);
|
|
|
|
|
// })();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}, [hasText, image]);
|
|
|
|
|
|
|
|
|
|
// if (cardStatusID) {
|
|
|
|
|
// return (
|
|
|
|
|
// <Status statusID={cardStatusID} instance={instance} size="s" readOnly />
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
|
2023-04-22 19:55:47 +03:00
|
|
|
|
if (snapStates.unfurledLinks[url]) return null;
|
|
|
|
|
|
2023-08-04 19:16:18 +03:00
|
|
|
|
if (hasText && (image || (type === 'photo' && blurhash))) {
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const domain = new URL(url).hostname.replace(/^www\./, '');
|
2023-03-23 15:18:54 +03:00
|
|
|
|
let blurhashImage;
|
|
|
|
|
if (!image) {
|
|
|
|
|
const w = 44;
|
|
|
|
|
const h = 44;
|
|
|
|
|
const blurhashPixels = decodeBlurHash(blurhash, w, h);
|
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = w;
|
|
|
|
|
canvas.height = h;
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
const imageData = ctx.createImageData(w, h);
|
|
|
|
|
imageData.data.set(blurhashPixels);
|
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
|
|
|
blurhashImage = canvas.toDataURL();
|
|
|
|
|
}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
return (
|
|
|
|
|
<a
|
2023-02-23 11:45:53 +03:00
|
|
|
|
href={cardStatusURL || url}
|
|
|
|
|
target={cardStatusURL ? null : '_blank'}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
rel="nofollow noopener noreferrer"
|
2023-03-23 15:18:54 +03:00
|
|
|
|
class={`card link ${blurhashImage ? '' : size}`}
|
2023-08-29 19:45:18 +03:00
|
|
|
|
lang={language}
|
2023-09-23 07:58:12 +03:00
|
|
|
|
dir="auto"
|
2022-12-18 16:10:05 +03:00
|
|
|
|
>
|
2023-01-07 15:25:13 +03:00
|
|
|
|
<div class="card-image">
|
|
|
|
|
<img
|
2023-03-23 15:18:54 +03:00
|
|
|
|
src={image || blurhashImage}
|
2023-01-07 15:25:13 +03:00
|
|
|
|
width={width}
|
|
|
|
|
height={height}
|
|
|
|
|
loading="lazy"
|
|
|
|
|
alt=""
|
|
|
|
|
onError={(e) => {
|
|
|
|
|
try {
|
|
|
|
|
e.target.style.display = 'none';
|
|
|
|
|
} catch (e) {}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
<div class="meta-container">
|
2023-09-23 07:58:12 +03:00
|
|
|
|
<p class="meta domain" dir="auto">
|
|
|
|
|
{domain}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="title" dir="auto">
|
|
|
|
|
{title}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="meta" dir="auto">
|
|
|
|
|
{description || providerName || authorName}
|
|
|
|
|
</p>
|
2022-12-18 16:10:05 +03:00
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
);
|
|
|
|
|
} else if (type === 'photo') {
|
|
|
|
|
return (
|
|
|
|
|
<a
|
|
|
|
|
href={url}
|
|
|
|
|
target="_blank"
|
|
|
|
|
rel="nofollow noopener noreferrer"
|
|
|
|
|
class="card photo"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src={embedUrl}
|
|
|
|
|
width={width}
|
|
|
|
|
height={height}
|
|
|
|
|
alt={title || description}
|
|
|
|
|
loading="lazy"
|
|
|
|
|
style={{
|
|
|
|
|
height: 'auto',
|
|
|
|
|
aspectRatio: `${width}/${height}`,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
);
|
|
|
|
|
} else if (type === 'video') {
|
2023-03-18 15:05:12 +03:00
|
|
|
|
if (/youtube/i.test(providerName)) {
|
|
|
|
|
// Get ID from e.g. https://www.youtube.com/watch?v=[VIDEO_ID]
|
|
|
|
|
const videoID = url.match(/watch\?v=([^&]+)/)?.[1];
|
|
|
|
|
if (videoID) {
|
|
|
|
|
return <lite-youtube videoid={videoID} nocookie></lite-youtube>;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-12-18 16:10:05 +03:00
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
class="card video"
|
|
|
|
|
style={{
|
|
|
|
|
aspectRatio: `${width}/${height}`,
|
|
|
|
|
}}
|
|
|
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
|
|
|
/>
|
|
|
|
|
);
|
2023-04-18 18:46:59 +03:00
|
|
|
|
} else if (hasText && !image) {
|
|
|
|
|
const domain = new URL(url).hostname.replace(/^www\./, '');
|
|
|
|
|
return (
|
|
|
|
|
<a
|
|
|
|
|
href={cardStatusURL || url}
|
|
|
|
|
target={cardStatusURL ? null : '_blank'}
|
|
|
|
|
rel="nofollow noopener noreferrer"
|
|
|
|
|
class={`card link no-image`}
|
2023-08-29 19:45:18 +03:00
|
|
|
|
lang={language}
|
2023-04-18 18:46:59 +03:00
|
|
|
|
>
|
|
|
|
|
<div class="meta-container">
|
2023-08-04 19:15:57 +03:00
|
|
|
|
<p class="meta domain">
|
|
|
|
|
<Icon icon="link" size="s" /> <span>{domain}</span>
|
|
|
|
|
</p>
|
2023-04-18 18:46:59 +03:00
|
|
|
|
<p class="title">{title}</p>
|
|
|
|
|
<p class="meta">{description || providerName || authorName}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
);
|
2022-12-18 16:10:05 +03:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-05 19:17:19 +03:00
|
|
|
|
function EditedAtModal({
|
|
|
|
|
statusID,
|
|
|
|
|
instance,
|
|
|
|
|
fetchStatusHistory = () => {},
|
2023-04-20 11:10:57 +03:00
|
|
|
|
onClose,
|
2023-02-05 19:17:19 +03:00
|
|
|
|
}) {
|
2022-12-18 16:10:05 +03:00
|
|
|
|
const [uiState, setUIState] = useState('default');
|
|
|
|
|
const [editHistory, setEditHistory] = useState([]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setUIState('loading');
|
|
|
|
|
(async () => {
|
|
|
|
|
try {
|
2023-02-05 19:17:19 +03:00
|
|
|
|
const editHistory = await fetchStatusHistory();
|
2022-12-18 16:10:05 +03:00
|
|
|
|
console.log(editHistory);
|
|
|
|
|
setEditHistory(editHistory);
|
|
|
|
|
setUIState('default');
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
setUIState('error');
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
2022-12-30 15:37:57 +03:00
|
|
|
|
<div id="edit-history" class="sheet">
|
2023-04-20 11:10:57 +03:00
|
|
|
|
{!!onClose && (
|
|
|
|
|
<button type="button" class="sheet-close" onClick={onClose}>
|
|
|
|
|
<Icon icon="x" />
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
2022-12-25 13:01:01 +03:00
|
|
|
|
<header>
|
|
|
|
|
<h2>Edit History</h2>
|
|
|
|
|
{uiState === 'error' && <p>Failed to load history</p>}
|
|
|
|
|
{uiState === 'loading' && (
|
|
|
|
|
<p>
|
|
|
|
|
<Loader abrupt /> Loading…
|
|
|
|
|
</p>
|
|
|
|
|
)}
|
|
|
|
|
</header>
|
2022-12-30 15:37:57 +03:00
|
|
|
|
<main tabIndex="-1">
|
2022-12-25 13:01:01 +03:00
|
|
|
|
{editHistory.length > 0 && (
|
|
|
|
|
<ol>
|
|
|
|
|
{editHistory.map((status) => {
|
|
|
|
|
const { createdAt } = status;
|
|
|
|
|
const createdAtDate = new Date(createdAt);
|
|
|
|
|
return (
|
|
|
|
|
<li key={createdAt} class="history-item">
|
|
|
|
|
<h3>
|
2023-03-03 13:11:37 +03:00
|
|
|
|
<time>
|
|
|
|
|
{niceDateTime(createdAtDate, {
|
|
|
|
|
formatOpts: {
|
|
|
|
|
weekday: 'short',
|
|
|
|
|
second: 'numeric',
|
|
|
|
|
},
|
|
|
|
|
})}
|
|
|
|
|
</time>
|
2022-12-25 13:01:01 +03:00
|
|
|
|
</h3>
|
2023-02-05 19:17:19 +03:00
|
|
|
|
<Status
|
|
|
|
|
status={status}
|
|
|
|
|
instance={instance}
|
|
|
|
|
size="s"
|
|
|
|
|
withinContext
|
|
|
|
|
readOnly
|
2023-03-22 09:16:41 +03:00
|
|
|
|
previewMode
|
2023-02-05 19:17:19 +03:00
|
|
|
|
/>
|
2022-12-25 13:01:01 +03:00
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ol>
|
|
|
|
|
)}
|
|
|
|
|
</main>
|
2022-12-10 12:14:48 +03:00
|
|
|
|
</div>
|
|
|
|
|
);
|
2023-04-06 17:51:48 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const REACTIONS_LIMIT = 80;
|
2023-04-20 11:10:57 +03:00
|
|
|
|
function ReactionsModal({ statusID, instance, onClose }) {
|
2023-04-06 17:51:48 +03:00
|
|
|
|
const { masto } = api({ instance });
|
|
|
|
|
const [uiState, setUIState] = useState('default');
|
|
|
|
|
const [accounts, setAccounts] = useState([]);
|
|
|
|
|
const [showMore, setShowMore] = useState(false);
|
|
|
|
|
|
|
|
|
|
const reblogIterator = useRef();
|
|
|
|
|
const favouriteIterator = useRef();
|
|
|
|
|
|
|
|
|
|
async function fetchAccounts(firstLoad) {
|
|
|
|
|
setShowMore(false);
|
|
|
|
|
setUIState('loading');
|
|
|
|
|
(async () => {
|
|
|
|
|
try {
|
|
|
|
|
if (firstLoad) {
|
|
|
|
|
reblogIterator.current = masto.v1.statuses.listRebloggedBy(statusID, {
|
|
|
|
|
limit: REACTIONS_LIMIT,
|
|
|
|
|
});
|
|
|
|
|
favouriteIterator.current = masto.v1.statuses.listFavouritedBy(
|
|
|
|
|
statusID,
|
|
|
|
|
{
|
|
|
|
|
limit: REACTIONS_LIMIT,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
const [{ value: reblogResults }, { value: favouriteResults }] =
|
|
|
|
|
await Promise.allSettled([
|
|
|
|
|
reblogIterator.current.next(),
|
|
|
|
|
favouriteIterator.current.next(),
|
|
|
|
|
]);
|
|
|
|
|
if (reblogResults.value?.length || favouriteResults.value?.length) {
|
|
|
|
|
if (reblogResults.value?.length) {
|
|
|
|
|
for (const account of reblogResults.value) {
|
|
|
|
|
const theAccount = accounts.find((a) => a.id === account.id);
|
|
|
|
|
if (!theAccount) {
|
|
|
|
|
accounts.push({
|
|
|
|
|
...account,
|
|
|
|
|
_types: ['reblog'],
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
theAccount._types.push('reblog');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (favouriteResults.value?.length) {
|
|
|
|
|
for (const account of favouriteResults.value) {
|
|
|
|
|
const theAccount = accounts.find((a) => a.id === account.id);
|
|
|
|
|
if (!theAccount) {
|
|
|
|
|
accounts.push({
|
|
|
|
|
...account,
|
|
|
|
|
_types: ['favourite'],
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
theAccount._types.push('favourite');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setAccounts(accounts);
|
|
|
|
|
setShowMore(!reblogResults.done || !favouriteResults.done);
|
|
|
|
|
} else {
|
|
|
|
|
setShowMore(false);
|
|
|
|
|
}
|
|
|
|
|
setUIState('default');
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
setUIState('error');
|
|
|
|
|
}
|
|
|
|
|
})();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
fetchAccounts(true);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div id="reactions-container" class="sheet">
|
2023-04-20 11:10:57 +03:00
|
|
|
|
{!!onClose && (
|
|
|
|
|
<button type="button" class="sheet-close" onClick={onClose}>
|
|
|
|
|
<Icon icon="x" />
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
2023-04-06 17:51:48 +03:00
|
|
|
|
<header>
|
|
|
|
|
<h2>Boosted/Favourited by…</h2>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
{accounts.length > 0 ? (
|
|
|
|
|
<>
|
|
|
|
|
<ul class="reactions-list">
|
|
|
|
|
{accounts.map((account) => {
|
|
|
|
|
const { _types } = account;
|
|
|
|
|
return (
|
|
|
|
|
<li key={account.id + _types}>
|
|
|
|
|
<div class="reactions-block">
|
|
|
|
|
{_types.map((type) => (
|
|
|
|
|
<Icon
|
|
|
|
|
icon={
|
|
|
|
|
{
|
|
|
|
|
reblog: 'rocket',
|
|
|
|
|
favourite: 'heart',
|
|
|
|
|
}[type]
|
|
|
|
|
}
|
|
|
|
|
class={`${type}-icon`}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
<AccountBlock account={account} instance={instance} />
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</ul>
|
2023-04-07 15:09:59 +03:00
|
|
|
|
{uiState === 'default' ? (
|
|
|
|
|
showMore ? (
|
2023-04-06 17:51:48 +03:00
|
|
|
|
<InView
|
|
|
|
|
onChange={(inView) => {
|
|
|
|
|
if (inView) {
|
|
|
|
|
fetchAccounts();
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="plain block"
|
|
|
|
|
onClick={() => fetchAccounts()}
|
|
|
|
|
>
|
|
|
|
|
Show more…
|
|
|
|
|
</button>
|
|
|
|
|
</InView>
|
|
|
|
|
) : (
|
|
|
|
|
<p class="ui-state insignificant">The end.</p>
|
2023-04-07 15:09:59 +03:00
|
|
|
|
)
|
|
|
|
|
) : (
|
|
|
|
|
uiState === 'loading' && (
|
|
|
|
|
<p class="ui-state">
|
|
|
|
|
<Loader abrupt />
|
|
|
|
|
</p>
|
|
|
|
|
)
|
|
|
|
|
)}
|
2023-04-06 17:51:48 +03:00
|
|
|
|
</>
|
|
|
|
|
) : uiState === 'loading' ? (
|
|
|
|
|
<p class="ui-state">
|
|
|
|
|
<Loader abrupt />
|
|
|
|
|
</p>
|
|
|
|
|
) : uiState === 'error' ? (
|
|
|
|
|
<p class="ui-state">Unable to load accounts</p>
|
|
|
|
|
) : (
|
|
|
|
|
<p class="ui-state insignificant">No one yet.</p>
|
|
|
|
|
)}
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2022-12-10 12:14:48 +03:00
|
|
|
|
}
|
|
|
|
|
|
2022-12-17 12:26:41 +03:00
|
|
|
|
function StatusButton({
|
|
|
|
|
checked,
|
|
|
|
|
count,
|
|
|
|
|
class: className,
|
|
|
|
|
title,
|
|
|
|
|
alt,
|
|
|
|
|
icon,
|
|
|
|
|
onClick,
|
|
|
|
|
...props
|
|
|
|
|
}) {
|
|
|
|
|
if (typeof title === 'string') {
|
|
|
|
|
title = [title, title];
|
|
|
|
|
}
|
|
|
|
|
if (typeof alt === 'string') {
|
|
|
|
|
alt = [alt, alt];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const [buttonTitle, setButtonTitle] = useState(title[0] || '');
|
|
|
|
|
const [iconAlt, setIconAlt] = useState(alt[0] || '');
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (checked) {
|
|
|
|
|
setButtonTitle(title[1] || '');
|
|
|
|
|
setIconAlt(alt[1] || '');
|
|
|
|
|
} else {
|
|
|
|
|
setButtonTitle(title[0] || '');
|
|
|
|
|
setIconAlt(alt[0] || '');
|
|
|
|
|
}
|
|
|
|
|
}, [checked, title, alt]);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title={buttonTitle}
|
|
|
|
|
class={`plain ${className} ${checked ? 'checked' : ''}`}
|
|
|
|
|
onClick={(e) => {
|
2023-07-17 16:01:00 +03:00
|
|
|
|
if (!onClick) return;
|
2022-12-17 12:26:41 +03:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
onClick(e);
|
|
|
|
|
}}
|
|
|
|
|
{...props}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon={icon} size="l" alt={iconAlt} />
|
|
|
|
|
{!!count && (
|
|
|
|
|
<>
|
|
|
|
|
{' '}
|
2022-12-17 19:13:56 +03:00
|
|
|
|
<small title={count}>{shortenNumber(count)}</small>
|
2022-12-17 12:26:41 +03:00
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</button>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-29 10:23:53 +03:00
|
|
|
|
export function formatDuration(time) {
|
2023-01-02 09:21:38 +03:00
|
|
|
|
if (!time) return;
|
|
|
|
|
let hours = Math.floor(time / 3600);
|
|
|
|
|
let minutes = Math.floor((time % 3600) / 60);
|
|
|
|
|
let seconds = Math.round(time % 60);
|
|
|
|
|
|
|
|
|
|
if (hours === 0) {
|
|
|
|
|
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
|
|
|
} else {
|
|
|
|
|
return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
|
|
|
|
|
.toString()
|
|
|
|
|
.padStart(2, '0')}`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-23 11:45:53 +03:00
|
|
|
|
const denylistDomains = /(twitter|github)\.com/i;
|
2023-02-23 17:53:28 +03:00
|
|
|
|
const failedUnfurls = {};
|
2023-02-23 11:45:53 +03:00
|
|
|
|
|
|
|
|
|
function _unfurlMastodonLink(instance, url) {
|
2023-05-17 11:13:49 +03:00
|
|
|
|
const snapStates = snapshot(states);
|
2023-02-23 11:45:53 +03:00
|
|
|
|
if (denylistDomains.test(url)) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-02-23 17:53:28 +03:00
|
|
|
|
if (failedUnfurls[url]) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2023-02-23 11:45:53 +03:00
|
|
|
|
const instanceRegex = new RegExp(instance + '/');
|
2023-05-17 11:13:49 +03:00
|
|
|
|
if (instanceRegex.test(snapStates.unfurledLinks[url]?.url)) {
|
|
|
|
|
return Promise.resolve(snapStates.unfurledLinks[url]);
|
2023-02-23 11:45:53 +03:00
|
|
|
|
}
|
|
|
|
|
console.debug('🦦 Unfurling URL', url);
|
2023-02-28 15:54:26 +03:00
|
|
|
|
|
|
|
|
|
let remoteInstanceFetch;
|
2023-07-19 10:51:00 +03:00
|
|
|
|
let theURL = url;
|
|
|
|
|
if (/\/\/elk\.[^\/]+\/[^.]+\.[^.]+/i.test(theURL)) {
|
|
|
|
|
// E.g. https://elk.zone/domain.com/@stest/123 -> https://domain.com/@stest/123
|
|
|
|
|
theURL = theURL.replace(/elk\.[^\/]+\//i, '');
|
|
|
|
|
}
|
|
|
|
|
const urlObj = new URL(theURL);
|
2023-02-28 15:54:26 +03:00
|
|
|
|
const domain = urlObj.hostname;
|
|
|
|
|
const path = urlObj.pathname;
|
|
|
|
|
// Regex /:username/:id, where username = @username or @username@domain, id = number
|
|
|
|
|
const statusRegex = /\/@([^@\/]+)@?([^\/]+)?\/(\d+)$/i;
|
|
|
|
|
const statusMatch = statusRegex.exec(path);
|
|
|
|
|
if (statusMatch) {
|
|
|
|
|
const id = statusMatch[3];
|
|
|
|
|
const { masto } = api({ instance: domain });
|
2023-05-17 11:13:49 +03:00
|
|
|
|
remoteInstanceFetch = masto.v1.statuses.fetch(id).then((status) => {
|
|
|
|
|
if (status?.id) {
|
|
|
|
|
return {
|
|
|
|
|
status,
|
|
|
|
|
instance: domain,
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error('No results');
|
|
|
|
|
}
|
|
|
|
|
});
|
2023-02-28 15:54:26 +03:00
|
|
|
|
}
|
|
|
|
|
|
2023-02-23 11:45:53 +03:00
|
|
|
|
const { masto } = api({ instance });
|
2023-02-28 15:54:26 +03:00
|
|
|
|
const mastoSearchFetch = masto.v2
|
2023-02-23 11:45:53 +03:00
|
|
|
|
.search({
|
|
|
|
|
q: url,
|
|
|
|
|
type: 'statuses',
|
|
|
|
|
resolve: true,
|
|
|
|
|
limit: 1,
|
|
|
|
|
})
|
|
|
|
|
.then((results) => {
|
|
|
|
|
if (results.statuses.length > 0) {
|
|
|
|
|
const status = results.statuses[0];
|
2023-05-17 11:13:49 +03:00
|
|
|
|
return {
|
|
|
|
|
status,
|
2023-04-22 19:55:47 +03:00
|
|
|
|
instance,
|
2023-02-23 11:45:53 +03:00
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error('No results');
|
|
|
|
|
}
|
|
|
|
|
});
|
2023-02-28 15:54:26 +03:00
|
|
|
|
|
2023-05-17 11:13:49 +03:00
|
|
|
|
function handleFulfill(result) {
|
|
|
|
|
const { status, instance } = result;
|
|
|
|
|
const { id } = status;
|
2023-07-19 10:46:00 +03:00
|
|
|
|
const selfURL = `/${instance}/s/${id}`;
|
|
|
|
|
console.debug('🦦 Unfurled URL', url, id, selfURL);
|
2023-05-17 11:13:49 +03:00
|
|
|
|
const data = {
|
|
|
|
|
id,
|
|
|
|
|
instance,
|
2023-07-19 10:46:00 +03:00
|
|
|
|
url: selfURL,
|
2023-05-17 11:13:49 +03:00
|
|
|
|
};
|
|
|
|
|
states.unfurledLinks[url] = data;
|
|
|
|
|
saveStatus(status, instance, {
|
|
|
|
|
skipThreading: true,
|
|
|
|
|
});
|
|
|
|
|
return data;
|
|
|
|
|
}
|
|
|
|
|
function handleCatch(e) {
|
|
|
|
|
failedUnfurls[url] = true;
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-23 14:29:25 +03:00
|
|
|
|
if (remoteInstanceFetch) {
|
2023-05-17 11:13:49 +03:00
|
|
|
|
return Promise.any([remoteInstanceFetch, mastoSearchFetch])
|
|
|
|
|
.then(handleFulfill)
|
|
|
|
|
.catch(handleCatch);
|
2023-04-23 14:29:25 +03:00
|
|
|
|
} else {
|
2023-05-17 11:13:49 +03:00
|
|
|
|
return mastoSearchFetch.then(handleFulfill).catch(handleCatch);
|
2023-04-23 14:29:25 +03:00
|
|
|
|
}
|
2023-02-23 11:45:53 +03:00
|
|
|
|
}
|
|
|
|
|
|
2023-03-09 16:51:50 +03:00
|
|
|
|
function nicePostURL(url) {
|
2023-03-12 14:23:42 +03:00
|
|
|
|
if (!url) return;
|
2023-03-09 16:51:50 +03:00
|
|
|
|
const urlObj = new URL(url);
|
|
|
|
|
const { host, pathname } = urlObj;
|
|
|
|
|
const path = pathname.replace(/\/$/, '');
|
|
|
|
|
// split only first slash
|
|
|
|
|
const [_, username, restPath] = path.match(/\/(@[^\/]+)\/(.*)/) || [];
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{host}
|
|
|
|
|
{username ? (
|
|
|
|
|
<>
|
|
|
|
|
/{username}
|
2023-03-10 14:34:04 +03:00
|
|
|
|
<wbr />
|
2023-03-09 16:51:50 +03:00
|
|
|
|
<span class="more-insignificant">/{restPath}</span>
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
<span class="more-insignificant">{path}</span>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-17 11:13:49 +03:00
|
|
|
|
const unfurlMastodonLink = throttle(
|
|
|
|
|
mem(_unfurlMastodonLink, {
|
|
|
|
|
cacheKey: (instance, url) => `${instance}:${url}`,
|
|
|
|
|
}),
|
|
|
|
|
);
|
2023-02-23 11:45:53 +03:00
|
|
|
|
|
2023-03-23 16:48:29 +03:00
|
|
|
|
function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
|
2023-03-21 19:09:36 +03:00
|
|
|
|
const {
|
2023-08-08 15:21:09 +03:00
|
|
|
|
account: { avatar, avatarStatic, bot, group },
|
2023-03-21 19:09:36 +03:00
|
|
|
|
createdAt,
|
|
|
|
|
visibility,
|
2023-03-26 10:09:45 +03:00
|
|
|
|
reblog,
|
2023-03-21 19:09:36 +03:00
|
|
|
|
} = status;
|
2023-03-26 10:09:45 +03:00
|
|
|
|
const isReblog = !!reblog;
|
2023-03-21 19:09:36 +03:00
|
|
|
|
const filterTitleStr = filterInfo?.titlesStr || '';
|
|
|
|
|
const createdAtDate = new Date(createdAt);
|
2023-03-26 10:09:45 +03:00
|
|
|
|
const statusPeekText = statusPeek(status.reblog || status);
|
2023-03-21 19:09:36 +03:00
|
|
|
|
|
|
|
|
|
const [showPeek, setShowPeek] = useState(false);
|
2023-06-14 17:23:56 +03:00
|
|
|
|
const bindLongPressPeek = useLongPress(
|
2023-03-21 19:09:36 +03:00
|
|
|
|
() => {
|
|
|
|
|
setShowPeek(true);
|
|
|
|
|
},
|
|
|
|
|
{
|
2023-04-24 16:36:03 +03:00
|
|
|
|
threshold: 600,
|
2023-03-21 19:09:36 +03:00
|
|
|
|
captureEvent: true,
|
|
|
|
|
detect: 'touch',
|
2023-09-29 19:26:51 +03:00
|
|
|
|
cancelOnMovement: 2, // true allows movement of up to 25 pixels
|
2023-03-21 19:09:36 +03:00
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
2023-09-23 14:14:11 +03:00
|
|
|
|
const statusPeekRef = useTruncated();
|
|
|
|
|
|
2023-03-21 19:09:36 +03:00
|
|
|
|
return (
|
|
|
|
|
<div
|
2023-08-08 15:21:09 +03:00
|
|
|
|
class={isReblog ? (group ? 'status-group' : 'status-reblog') : ''}
|
2023-03-23 16:48:29 +03:00
|
|
|
|
{...containerProps}
|
2023-03-21 19:09:36 +03:00
|
|
|
|
title={statusPeekText}
|
|
|
|
|
onContextMenu={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
setShowPeek(true);
|
|
|
|
|
}}
|
2023-06-14 17:23:56 +03:00
|
|
|
|
{...bindLongPressPeek()}
|
2023-03-21 19:09:36 +03:00
|
|
|
|
>
|
|
|
|
|
<article class="status filtered" tabindex="-1">
|
|
|
|
|
<b
|
2023-03-22 07:26:28 +03:00
|
|
|
|
class="status-filtered-badge clickable badge-meta"
|
2023-03-21 19:09:36 +03:00
|
|
|
|
title={filterTitleStr}
|
|
|
|
|
onClick={(e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
setShowPeek(true);
|
|
|
|
|
}}
|
|
|
|
|
>
|
2023-03-22 07:26:28 +03:00
|
|
|
|
<span>Filtered</span>
|
|
|
|
|
<span>{filterTitleStr}</span>
|
2023-03-21 19:09:36 +03:00
|
|
|
|
</b>{' '}
|
2023-04-10 19:26:43 +03:00
|
|
|
|
<Avatar url={avatarStatic || avatar} squircle={bot} />
|
2023-03-21 19:09:36 +03:00
|
|
|
|
<span class="status-filtered-info">
|
|
|
|
|
<span class="status-filtered-info-1">
|
|
|
|
|
<NameText account={status.account} instance={instance} />{' '}
|
|
|
|
|
<Icon
|
|
|
|
|
icon={visibilityIconsMap[visibility]}
|
|
|
|
|
alt={visibilityText[visibility]}
|
|
|
|
|
size="s"
|
|
|
|
|
/>{' '}
|
2023-03-26 10:09:45 +03:00
|
|
|
|
{isReblog ? (
|
|
|
|
|
'boosted'
|
|
|
|
|
) : (
|
|
|
|
|
<RelativeTime datetime={createdAtDate} format="micro" />
|
|
|
|
|
)}
|
|
|
|
|
</span>
|
|
|
|
|
<span class="status-filtered-info-2">
|
|
|
|
|
{isReblog && (
|
|
|
|
|
<>
|
|
|
|
|
<Avatar
|
|
|
|
|
url={reblog.account.avatarStatic || reblog.account.avatar}
|
2023-04-10 19:26:43 +03:00
|
|
|
|
squircle={bot}
|
2023-03-26 10:09:45 +03:00
|
|
|
|
/>{' '}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
{statusPeekText}
|
2023-03-21 19:09:36 +03:00
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
</article>
|
|
|
|
|
{!!showPeek && (
|
|
|
|
|
<Modal
|
|
|
|
|
class="light"
|
|
|
|
|
onClick={(e) => {
|
|
|
|
|
if (e.target === e.currentTarget) {
|
|
|
|
|
setShowPeek(false);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div id="filtered-status-peek" class="sheet">
|
2023-04-20 11:10:57 +03:00
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
class="sheet-close"
|
|
|
|
|
onClick={() => setShowPeek(false)}
|
|
|
|
|
>
|
|
|
|
|
<Icon icon="x" />
|
|
|
|
|
</button>
|
|
|
|
|
<header>
|
|
|
|
|
<b class="status-filtered-badge">Filtered</b> {filterTitleStr}
|
|
|
|
|
</header>
|
2023-03-21 19:09:36 +03:00
|
|
|
|
<main tabIndex="-1">
|
|
|
|
|
<Link
|
2023-09-23 14:14:11 +03:00
|
|
|
|
ref={statusPeekRef}
|
2023-03-21 19:09:36 +03:00
|
|
|
|
class="status-link"
|
|
|
|
|
to={`/${instance}/s/${status.id}`}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setShowPeek(false);
|
|
|
|
|
}}
|
2023-09-23 14:14:11 +03:00
|
|
|
|
data-read-more="Read more →"
|
2023-03-21 19:09:36 +03:00
|
|
|
|
>
|
|
|
|
|
<Status status={status} instance={instance} size="s" readOnly />
|
|
|
|
|
</Link>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</Modal>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2023-04-25 08:03:26 +03:00
|
|
|
|
const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
|
2023-05-19 20:06:16 +03:00
|
|
|
|
if (!id || !instance) return;
|
2023-04-22 19:55:47 +03:00
|
|
|
|
const snapStates = useSnapshot(states);
|
|
|
|
|
const sKey = statusKey(id, instance);
|
|
|
|
|
const quotes = snapStates.statusQuotes[sKey];
|
2023-05-17 11:13:49 +03:00
|
|
|
|
const uniqueQuotes = quotes?.filter(
|
|
|
|
|
(q, i, arr) => arr.findIndex((q2) => q2.url === q.url) === i,
|
|
|
|
|
);
|
2023-04-22 19:55:47 +03:00
|
|
|
|
|
2023-05-17 11:13:49 +03:00
|
|
|
|
if (!uniqueQuotes?.length) return;
|
2023-04-25 08:03:26 +03:00
|
|
|
|
if (level > 2) return;
|
2023-04-22 19:55:47 +03:00
|
|
|
|
|
2023-05-17 11:13:49 +03:00
|
|
|
|
return uniqueQuotes.map((q) => {
|
2023-04-22 19:55:47 +03:00
|
|
|
|
return (
|
|
|
|
|
<Link
|
2023-04-25 16:57:12 +03:00
|
|
|
|
key={q.instance + q.id}
|
2023-04-22 19:55:47 +03:00
|
|
|
|
to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}
|
|
|
|
|
class="status-card-link"
|
2023-09-20 12:27:54 +03:00
|
|
|
|
data-read-more="Read more →"
|
2023-04-22 19:55:47 +03:00
|
|
|
|
>
|
|
|
|
|
<Status
|
|
|
|
|
statusID={q.id}
|
|
|
|
|
instance={q.instance}
|
|
|
|
|
size="s"
|
2023-04-25 08:03:26 +03:00
|
|
|
|
quoted={level + 1}
|
2023-04-22 19:55:47 +03:00
|
|
|
|
/>
|
|
|
|
|
</Link>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2023-01-07 15:26:23 +03:00
|
|
|
|
export default memo(Status);
|