that contains a lot of hashtags, add a class to it\n if (enhancedContent.includes('#')) {\n let prevIndex = null;\n const hashtagStuffedParagraphs = [...dom.querySelectorAll('p')].filter(\n (p, index) => {\n let hashtagCount = 0;\n for (let i = 0; i < p.childNodes.length; i++) {\n const node = p.childNodes[i];\n\n if (node.nodeType === Node.TEXT_NODE) {\n const text = node.textContent.trim();\n if (text !== '') {\n return false;\n }\n } else if (node.tagName === 'BR') {\n // Ignore
\n } else if (node.tagName === 'A') {\n const linkText = node.textContent.trim();\n if (!linkText || !linkText.startsWith('#')) {\n return false;\n } else {\n hashtagCount++;\n }\n } else {\n return false;\n }\n }\n // Only consider \"stuffing\" if:\n // - there are more than 3 hashtags\n // - there are more than 1 hashtag in adjacent paragraphs\n if (hashtagCount > 3) {\n prevIndex = index;\n return true;\n }\n if (hashtagCount > 1 && prevIndex && index === prevIndex + 1) {\n prevIndex = index;\n return true;\n }\n },\n );\n if (hashtagStuffedParagraphs?.length) {\n for (const p of hashtagStuffedParagraphs) {\n p.classList.add('hashtag-stuffing');\n p.title = p.innerText;\n }\n }\n }\n\n // ADD ASPECT RATIO TO ALL IMAGES\n if (enhancedContent.includes(' postEnhanceDOM(dom));\n // postEnhanceDOM(dom); // mutate dom\n }\n\n return returnDOM ? dom : dom.innerHTML;\n}\nconst enhanceContent = mem(_enhanceContent);\n\nconst defaultRejectFilter = [\n // Document metadata\n 'STYLE',\n // Image and multimedia\n 'IMG',\n 'VIDEO',\n 'AUDIO',\n 'AREA',\n 'MAP',\n 'TRACK',\n // Embedded content\n 'EMBED',\n 'IFRAME',\n 'OBJECT',\n 'PICTURE',\n 'PORTAL',\n 'SOURCE',\n // SVG and MathML\n 'SVG',\n 'MATH',\n // Scripting\n 'CANVAS',\n 'NOSCRIPT',\n 'SCRIPT',\n // Forms\n 'INPUT',\n 'OPTION',\n 'TEXTAREA',\n // Web Components\n 'SLOT',\n 'TEMPLATE',\n];\nconst defaultRejectFilterMap = Object.fromEntries(\n defaultRejectFilter.map((nodeName) => [nodeName, true]),\n);\n\nconst URL_PREFIX_REGEX = /^(https?:\\/\\/(www\\.)?|xmpp:)/;\nconst URL_DISPLAY_LENGTH = 30;\n// Similar to https://github.com/mastodon/mastodon/blob/1666b1955992e16f4605b414c6563ca25b3a3f18/app/lib/text_formatter.rb#L54-L69\nfunction shortenLink(link) {\n if (!link || link.querySelector?.('*')) {\n return;\n }\n try {\n const url = link.innerText.trim();\n const prefix = (url.match(URL_PREFIX_REGEX) || [])[0] || '';\n if (!prefix) return;\n const displayURL = url.slice(\n prefix.length,\n prefix.length + URL_DISPLAY_LENGTH,\n );\n const suffix = url.slice(prefix.length + URL_DISPLAY_LENGTH);\n const cutoff = url.slice(prefix.length).length > URL_DISPLAY_LENGTH;\n link.innerHTML = `${prefix}${displayURL}${suffix}`;\n } catch (e) {}\n}\n\nfunction extractTextNodes(dom, opts = {}) {\n const textNodes = [];\n const rejectFilterMap = Object.assign(\n {},\n defaultRejectFilterMap,\n opts.rejectFilter?.reduce((acc, cur) => {\n acc[cur] = true;\n return acc;\n }, {}),\n );\n const walk = document.createTreeWalker(\n dom,\n NodeFilter.SHOW_TEXT,\n {\n acceptNode(node) {\n if (rejectFilterMap[node.parentNode.nodeName]) {\n return NodeFilter.FILTER_REJECT;\n }\n return NodeFilter.FILTER_ACCEPT;\n },\n },\n false,\n );\n let node;\n while ((node = walk.nextNode())) {\n textNodes.push(node);\n }\n return textNodes;\n}\n\nexport default enhanceContent;\n","import mem from './mem';\n\nconst div = document.createElement('div');\nfunction getHTMLText(html, opts) {\n if (!html) return '';\n const { preProcess } = opts || {};\n\n div.innerHTML = html\n .replace(/<\\/p>/g, '
\\n\\n')\n .replace(/<\\/li>/g, '\\n');\n div.querySelectorAll('br').forEach((br) => {\n br.replaceWith('\\n');\n });\n\n preProcess?.(div);\n\n // MASTODON-SPECIFIC classes\n // Remove .invisible\n div.querySelectorAll('.invisible').forEach((el) => {\n el.remove();\n });\n // Add … at end of .ellipsis\n div.querySelectorAll('.ellipsis').forEach((el) => {\n el.append('...');\n });\n\n return div.innerText.replace(/[\\r\\n]{3,}/g, '\\n\\n').trim();\n}\n\nexport default mem(getHTMLText);\n","import states from './states';\n\nfunction handleContentLinks(opts) {\n const { mentions = [], instance, previewMode, statusURL } = opts || {};\n return (e) => {\n let { target } = e;\n target = target.closest('a');\n if (!target) return;\n\n // If cmd/ctrl/shift/alt key is pressed or middle-click, let the browser handle it\n if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.which === 2) {\n return;\n }\n\n const prevText = target.previousSibling?.textContent;\n const textBeforeLinkIsAt = prevText?.endsWith('@');\n const textStartsWithAt = target.innerText.startsWith('@');\n if (\n ((target.classList.contains('u-url') ||\n target.classList.contains('mention')) &&\n textStartsWithAt) ||\n (textBeforeLinkIsAt && !textStartsWithAt)\n ) {\n const targetText = (\n target.querySelector('span') || target\n ).innerText.trim();\n const username = targetText.replace(/^@/, '');\n const url = target.getAttribute('href');\n // Only fallback to acct/username check if url doesn't match\n const mention =\n mentions.find((mention) => mention.url === url) ||\n mentions.find(\n (mention) =>\n mention.acct === username || mention.username === username,\n );\n console.warn('MENTION', mention, url);\n if (mention) {\n e.preventDefault();\n e.stopPropagation();\n states.showAccount = {\n account: mention.acct,\n instance,\n };\n } else if (!/^http/i.test(targetText)) {\n console.log('mention not found', targetText);\n e.preventDefault();\n e.stopPropagation();\n const href = target.getAttribute('href');\n states.showAccount = {\n account: href,\n instance,\n };\n }\n } else if (!previewMode) {\n const textBeforeLinkIsHash = prevText?.endsWith('#');\n if (target.classList.contains('hashtag') || textBeforeLinkIsHash) {\n e.preventDefault();\n e.stopPropagation();\n const tag = target.innerText.replace(/^#/, '').trim();\n const hashURL = instance ? `#/${instance}/t/${tag}` : `#/t/${tag}`;\n console.log({ hashURL });\n location.hash = hashURL;\n } else if (\n states.unfurledLinks[target.href]?.url &&\n statusURL !== target.href\n ) {\n // If unfurled AND not self-referential\n e.preventDefault();\n e.stopPropagation();\n states.prevLocation = {\n pathname: location.hash.replace(/^#/, ''),\n };\n location.hash = `#${states.unfurledLinks[target.href].url}`;\n }\n }\n };\n}\n\nexport default handleContentLinks;\n","import { i18n } from '@lingui/core';\n\nexport default function i18nDuration(duration, unit) {\n return () =>\n i18n.number(duration, {\n style: 'unit',\n unit,\n unitDisplay: 'long',\n });\n}\n","import { i18n } from '@lingui/core';\n\nimport localeMatch from './locale-match';\nimport mem from './mem';\n\nconst defaultLocale = mem(\n () => new Intl.DateTimeFormat().resolvedOptions().locale,\n);\n\nconst _DateTimeFormat = (opts) => {\n const { locale, dateYear, hideTime, formatOpts, forceOpts } = opts || {};\n const regionlessLocale = locale.replace(/-[a-z]+$/i, '');\n const loc = localeMatch([regionlessLocale], [defaultLocale], locale);\n const currentYear = new Date().getFullYear();\n const options = forceOpts || {\n // Show year if not current year\n year: dateYear === currentYear ? undefined : 'numeric',\n month: 'short',\n day: 'numeric',\n // Hide time if requested\n hour: hideTime ? undefined : 'numeric',\n minute: hideTime ? undefined : 'numeric',\n ...formatOpts,\n };\n try {\n return Intl.DateTimeFormat(loc, options);\n } catch (e) {}\n try {\n return Intl.DateTimeFormat(locale, options);\n } catch (e) {}\n return Intl.DateTimeFormat(undefined, options);\n};\nconst DateTimeFormat = mem(_DateTimeFormat);\n\nfunction niceDateTime(date, dtfOpts) {\n if (!(date instanceof Date)) {\n date = new Date(date);\n }\n const DTF = DateTimeFormat({\n dateYear: date.getFullYear(),\n locale: i18n.locale,\n ...dtfOpts,\n });\n const dateText = DTF.format(date);\n return dateText;\n}\n\nexport default niceDateTime;\n","import { i18n } from '@lingui/core';\n\nexport default function shortenNumber(num) {\n try {\n return i18n.number(num, {\n notation: 'compact',\n roundingMode: 'floor',\n });\n } catch (e) {\n return num;\n }\n}\n","import { t } from '@lingui/core/macro';\n\nimport openOSK from './open-osk';\nimport showToast from './show-toast';\nimport states from './states';\n\nconst TOAST_DURATION = 5_000; // 5 seconds\n\nexport default function showCompose(opts) {\n if (!opts) opts = true;\n\n if (states.showCompose) {\n if (states.composerState.minimized) {\n showToast({\n duration: TOAST_DURATION,\n text: t`A draft post is currently minimized. Post or discard it before creating a new one.`,\n });\n } else {\n showToast({\n duration: TOAST_DURATION,\n text: t`A post is currently open. Post or discard it before creating a new one.`,\n });\n }\n return;\n }\n\n openOSK();\n states.showCompose = opts;\n}\n","import './account-block.css';\n\nimport { Plural, Trans, useLingui } from '@lingui/react/macro';\n\n// import { useNavigate } from 'react-router-dom';\nimport enhanceContent from '../utils/enhance-content';\nimport niceDateTime from '../utils/nice-date-time';\nimport shortenNumber from '../utils/shorten-number';\nimport states from '../utils/states';\n\nimport Avatar from './avatar';\nimport EmojiText from './emoji-text';\nimport Icon from './icon';\n\nfunction AccountBlock({\n skeleton,\n account,\n avatarSize = 'xl',\n useAvatarStatic = false,\n instance,\n external,\n internal,\n onClick,\n showActivity = false,\n showStats = false,\n accountInstance,\n hideDisplayName = false,\n relationship = {},\n excludeRelationshipAttrs = [],\n}) {\n const { t } = useLingui();\n if (skeleton) {\n return (\n {\n // // Remove target=\"_blank\" from links\n // dom.querySelectorAll('a.u-url[target=\"_blank\"]').forEach((a) => {\n // if (!/http/i.test(a.innerText.trim())) {\n // a.removeAttribute('target');\n // }\n // });\n // },\n // }),\n // }}\n />\n );\n }; /*,\n (oldProps, newProps) => {\n const { post: oldPost } = oldProps;\n const { post: newPost } = newProps;\n return oldPost.content === newPost.content;\n },\n);*/\n\nconst SIZE_CLASS = {\n s: 'small',\n m: 'medium',\n l: 'large',\n};\n\nconst detectLang = pmem(async (text) => {\n const { detectAll } = await import('tinyld/light');\n text = text?.trim();\n\n // Ref: https://github.com/komodojp/tinyld/blob/develop/docs/benchmark.md\n // 500 should be enough for now, also the default max chars for Mastodon\n if (text?.length > 500) {\n return null;\n }\n const langs = detectAll(text);\n const lang = langs[0];\n if (lang?.lang && lang?.accuracy > 0.5) {\n // If > 50% accurate, use it\n // It can be accurate if < 50% but better be safe\n // Though > 50% also can be inaccurate 🤷♂️\n return lang.lang;\n }\n return null;\n});\n\nconst readMoreText = msg`Read more →`;\n\n// All this work just to make sure this only lazy-run once\n// Because first run is slow due to intl-localematcher\nconst DIFFERENT_LANG_CHECK = {};\nconst checkDifferentLanguage = (\n language,\n contentTranslationHideLanguages = [],\n) => {\n if (!language) return false;\n const targetLanguage = getTranslateTargetLanguage(true);\n const different =\n language !== targetLanguage &&\n !localeMatch([language], [targetLanguage]) &&\n !contentTranslationHideLanguages.find(\n (l) => language === l || localeMatch([language], [l]),\n );\n DIFFERENT_LANG_CHECK[language + contentTranslationHideLanguages] = true;\n return different;\n};\n\nfunction Status({\n statusID,\n status,\n instance: propInstance,\n size = 'm',\n contentTextWeight,\n readOnly,\n enableCommentHint,\n withinContext,\n skeleton,\n enableTranslate,\n forceTranslate: _forceTranslate,\n previewMode,\n // allowFilters,\n onMediaClick,\n quoted,\n onStatusLinkClick = () => {},\n showFollowedTags,\n allowContextMenu,\n showActionsBar,\n showReplyParent,\n mediaFirst,\n}) {\n const { _, t } = useLingui();\n\n if (skeleton) {\n return (\n
\n {!mediaFirst &&
}\n
\n
\n );\n }\n const { masto, instance, authenticated } = api({ instance: propInstance });\n const { instance: currentInstance } = api();\n const sameInstance = instance === currentInstance;\n\n let sKey = statusKey(statusID || status?.id, instance);\n const snapStates = useSnapshot(states);\n if (!status) {\n status = snapStates.statuses[sKey] || snapStates.statuses[statusID];\n sKey = statusKey(status?.id, instance);\n }\n if (!status) {\n return null;\n }\n\n const {\n account: {\n acct,\n avatar,\n avatarStatic,\n id: accountId,\n url: accountURL,\n displayName,\n username,\n emojis: accountEmojis,\n bot,\n group,\n },\n id,\n repliesCount,\n reblogged,\n reblogsCount,\n favourited,\n favouritesCount,\n bookmarked,\n poll,\n muted,\n sensitive,\n spoilerText,\n visibility, // public, unlisted, private, direct\n language: _language,\n editedAt,\n filtered,\n card,\n createdAt,\n inReplyToId,\n inReplyToAccountId,\n content,\n mentions,\n mediaAttachments,\n reblog,\n uri,\n url,\n emojis,\n tags,\n pinned,\n // Non-API props\n _deleted,\n _pinned,\n // _filtered,\n // Non-Mastodon\n emojiReactions,\n } = status;\n\n const [languageAutoDetected, setLanguageAutoDetected] = useState(null);\n useEffect(() => {\n if (!content) return;\n if (_language) return;\n if (languageAutoDetected) return;\n let timer;\n timer = setTimeout(async () => {\n let detected = await detectLang(getHTMLTextForDetectLang(content));\n setLanguageAutoDetected(detected);\n }, 1000);\n return () => clearTimeout(timer);\n }, [content, _language]);\n const language = _language || languageAutoDetected;\n\n // if (!mediaAttachments?.length) mediaFirst = false;\n const hasMediaAttachments = !!mediaAttachments?.length;\n if (mediaFirst && hasMediaAttachments) size = 's';\n\n const currentAccount = useMemo(() => {\n return getCurrentAccountID();\n }, []);\n const isSelf = useMemo(() => {\n return currentAccount && currentAccount === accountId;\n }, [accountId, currentAccount]);\n\n const filterContext = useContext(FilterContext);\n const filterInfo =\n !isSelf && !readOnly && !previewMode && isFiltered(filtered, filterContext);\n\n if (filterInfo?.action === 'hide') {\n return null;\n }\n\n console.debug('RENDER Status', id, status?.account.displayName, quoted);\n\n const debugHover = (e) => {\n if (e.shiftKey) {\n console.log({\n ...status,\n });\n }\n };\n\n if (/*allowFilters && */ size !== 'l' && filterInfo) {\n return (\n
\n );\n }\n\n const createdAtDate = new Date(createdAt);\n const editedAtDate = new Date(editedAt);\n\n let inReplyToAccountRef = mentions?.find(\n (mention) => mention.id === inReplyToAccountId,\n );\n if (!inReplyToAccountRef && inReplyToAccountId === id) {\n inReplyToAccountRef = { url: accountURL, username, displayName };\n }\n const [inReplyToAccount, setInReplyToAccount] = useState(inReplyToAccountRef);\n if (!withinContext && !inReplyToAccount && inReplyToAccountId) {\n const account = states.accounts[inReplyToAccountId];\n if (account) {\n setInReplyToAccount(account);\n } else {\n memFetchAccount(inReplyToAccountId, masto)\n .then((account) => {\n setInReplyToAccount(account);\n states.accounts[account.id] = account;\n })\n .catch((e) => {});\n }\n }\n const mentionSelf =\n inReplyToAccountId === currentAccount ||\n mentions?.find((mention) => mention.id === currentAccount);\n\n const readingExpandSpoilers = useMemo(() => {\n const prefs = store.account.get('preferences') || {};\n return !!prefs['reading:expand:spoilers'];\n }, []);\n const readingExpandMedia = useMemo(() => {\n // default | show_all | hide_all\n // Ignore hide_all because it means hide *ALL* media including non-sensitive ones\n const prefs = store.account.get('preferences') || {};\n return prefs['reading:expand:media']?.toLowerCase() || 'default';\n }, []);\n // FOR TESTING:\n // const readingExpandSpoilers = true;\n // const readingExpandMedia = 'show_all';\n const showSpoiler =\n previewMode || readingExpandSpoilers || !!snapStates.spoilers[id];\n const showSpoilerMedia =\n previewMode ||\n readingExpandMedia === 'show_all' ||\n !!snapStates.spoilersMedia[id];\n\n if (reblog) {\n // If has statusID, means useItemID (cached in states)\n\n if (group) {\n return (\n
\n );\n }\n\n return (\n
\n
\n {' '}\n \n {' '}\n boosted\n \n
\n
\n
\n );\n }\n\n // Check followedTags\n const FollowedTagsParent = useCallback(\n ({ children }) => (\n
\n ),\n [sKey, instance, snapStates.statusFollowedTags[sKey]],\n );\n const StatusParent =\n showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length\n ? FollowedTagsParent\n : Fragment;\n\n const isSizeLarge = size === 'l';\n\n const [forceTranslate, setForceTranslate] = useState(_forceTranslate);\n // const targetLanguage = getTranslateTargetLanguage(true);\n // const contentTranslationHideLanguages =\n // snapStates.settings.contentTranslationHideLanguages || [];\n const { contentTranslation, contentTranslationAutoInline } =\n snapStates.settings;\n if (!contentTranslation) enableTranslate = false;\n const inlineTranslate = useMemo(() => {\n if (\n !contentTranslation ||\n !contentTranslationAutoInline ||\n readOnly ||\n (withinContext && !isSizeLarge) ||\n previewMode ||\n spoilerText ||\n sensitive ||\n poll ||\n card ||\n mediaAttachments?.length\n ) {\n return false;\n }\n const contentLength = htmlContentLength(content);\n return contentLength > 0 && contentLength <= INLINE_TRANSLATE_LIMIT;\n }, [\n contentTranslation,\n contentTranslationAutoInline,\n readOnly,\n withinContext,\n isSizeLarge,\n previewMode,\n spoilerText,\n sensitive,\n poll,\n card,\n mediaAttachments,\n content,\n ]);\n\n const [showEdited, setShowEdited] = useState(false);\n const [showEmbed, setShowEmbed] = useState(false);\n\n const spoilerContentRef = useTruncated();\n const contentRef = useTruncated();\n const mediaContainerRef = useTruncated();\n\n const statusRef = useRef(null);\n\n const unauthInteractionErrorMessage = t`Sorry, your current logged-in instance can't interact with this post from another instance.`;\n\n const textWeight = useCallback(\n () =>\n Math.max(\n Math.round((spoilerText.length + htmlContentLength(content)) / 140) ||\n 1,\n 1,\n ),\n [spoilerText, content],\n );\n\n const createdDateText = niceDateTime(createdAtDate);\n const editedDateText = editedAt && niceDateTime(editedAtDate);\n\n // Can boost if:\n // - authenticated AND\n // - visibility != direct OR\n // - visibility = private AND isSelf\n let canBoost =\n authenticated && visibility !== 'direct' && visibility !== 'private';\n if (visibility === 'private' && isSelf) {\n canBoost = true;\n }\n\n const replyStatus = (e) => {\n if (!sameInstance || !authenticated) {\n return alert(unauthInteractionErrorMessage);\n }\n // syntheticEvent comes from MenuItem\n if (e?.shiftKey || e?.syntheticEvent?.shiftKey) {\n const newWin = openCompose({\n replyToStatus: status,\n });\n if (newWin) return;\n }\n showCompose({\n replyToStatus: status,\n });\n };\n\n // Check if media has no descriptions\n const mediaNoDesc = useMemo(() => {\n return mediaAttachments.some(\n (attachment) => !attachment.description?.trim?.(),\n );\n }, [mediaAttachments]);\n\n const statusMonthsAgo = useMemo(() => {\n return Math.floor(\n (new Date() - createdAtDate) / (1000 * 60 * 60 * 24 * 30),\n );\n }, [createdAtDate]);\n\n // const boostStatus = async () => {\n // if (!sameInstance || !authenticated) {\n // alert(unauthInteractionErrorMessage);\n // return false;\n // }\n // try {\n // if (!reblogged) {\n // let confirmText = 'Boost this post?';\n // if (mediaNoDesc) {\n // confirmText += '\\n\\n⚠️ Some media have no descriptions.';\n // }\n // const yes = confirm(confirmText);\n // if (!yes) {\n // return false;\n // }\n // }\n // // Optimistic\n // states.statuses[sKey] = {\n // ...status,\n // reblogged: !reblogged,\n // reblogsCount: reblogsCount + (reblogged ? -1 : 1),\n // };\n // if (reblogged) {\n // const newStatus = await masto.v1.statuses.$select(id).unreblog();\n // saveStatus(newStatus, instance);\n // return true;\n // } else {\n // const newStatus = await masto.v1.statuses.$select(id).reblog();\n // saveStatus(newStatus, instance);\n // return true;\n // }\n // } catch (e) {\n // console.error(e);\n // // Revert optimistism\n // states.statuses[sKey] = status;\n // return false;\n // }\n // };\n const confirmBoostStatus = async () => {\n if (!sameInstance || !authenticated) {\n alert(unauthInteractionErrorMessage);\n return false;\n }\n try {\n // Optimistic\n states.statuses[sKey] = {\n ...status,\n reblogged: !reblogged,\n reblogsCount: reblogsCount + (reblogged ? -1 : 1),\n };\n if (reblogged) {\n const newStatus = await masto.v1.statuses.$select(id).unreblog();\n saveStatus(newStatus, instance);\n } else {\n const newStatus = await masto.v1.statuses.$select(id).reblog();\n saveStatus(newStatus, instance);\n }\n return true;\n } catch (e) {\n console.error(e);\n // Revert optimistism\n states.statuses[sKey] = status;\n return false;\n }\n };\n\n const favouriteStatus = async () => {\n if (!sameInstance || !authenticated) {\n alert(unauthInteractionErrorMessage);\n return false;\n }\n try {\n // Optimistic\n states.statuses[sKey] = {\n ...status,\n favourited: !favourited,\n favouritesCount: favouritesCount + (favourited ? -1 : 1),\n };\n if (favourited) {\n const newStatus = await masto.v1.statuses.$select(id).unfavourite();\n saveStatus(newStatus, instance);\n } else {\n const newStatus = await masto.v1.statuses.$select(id).favourite();\n saveStatus(newStatus, instance);\n }\n return true;\n } catch (e) {\n console.error(e);\n // Revert optimistism\n states.statuses[sKey] = status;\n return false;\n }\n };\n const favouriteStatusNotify = async () => {\n try {\n const done = await favouriteStatus();\n if (!isSizeLarge && done) {\n showToast(\n favourited\n ? t`Unliked @${username || acct}'s post`\n : t`Liked @${username || acct}'s post`,\n );\n }\n } catch (e) {}\n };\n\n const bookmarkStatus = async () => {\n if (!supports('@mastodon/post-bookmark')) return;\n if (!sameInstance || !authenticated) {\n alert(unauthInteractionErrorMessage);\n return false;\n }\n try {\n // Optimistic\n states.statuses[sKey] = {\n ...status,\n bookmarked: !bookmarked,\n };\n if (bookmarked) {\n const newStatus = await masto.v1.statuses.$select(id).unbookmark();\n saveStatus(newStatus, instance);\n } else {\n const newStatus = await masto.v1.statuses.$select(id).bookmark();\n saveStatus(newStatus, instance);\n }\n return true;\n } catch (e) {\n console.error(e);\n // Revert optimistism\n states.statuses[sKey] = status;\n return false;\n }\n };\n const bookmarkStatusNotify = async () => {\n try {\n const done = await bookmarkStatus();\n if (!isSizeLarge && done) {\n showToast(\n bookmarked\n ? t`Unbookmarked @${username || acct}'s post`\n : t`Bookmarked @${username || acct}'s post`,\n );\n }\n } catch (e) {}\n };\n\n // const differentLanguage =\n // !!language &&\n // language !== targetLanguage &&\n // !localeMatch([language], [targetLanguage]) &&\n // !contentTranslationHideLanguages.find(\n // (l) => language === l || localeMatch([language], [l]),\n // );\n const contentTranslationHideLanguages =\n snapStates.settings.contentTranslationHideLanguages || [];\n const [differentLanguage, setDifferentLanguage] = useState(\n DIFFERENT_LANG_CHECK[language + contentTranslationHideLanguages]\n ? checkDifferentLanguage(language, contentTranslationHideLanguages)\n : false,\n );\n useEffect(() => {\n if (\n !language ||\n differentLanguage ||\n DIFFERENT_LANG_CHECK[language + contentTranslationHideLanguages]\n ) {\n return;\n }\n let timeout = setTimeout(() => {\n const different = checkDifferentLanguage(\n language,\n contentTranslationHideLanguages,\n );\n if (different) setDifferentLanguage(different);\n }, 1);\n return () => clearTimeout(timeout);\n }, [language, differentLanguage, contentTranslationHideLanguages]);\n\n const reblogIterator = useRef();\n const favouriteIterator = useRef();\n async function fetchBoostedLikedByAccounts(firstLoad) {\n if (firstLoad) {\n reblogIterator.current = masto.v1.statuses\n .$select(statusID)\n .rebloggedBy.list({\n limit: REACTIONS_LIMIT,\n });\n favouriteIterator.current = masto.v1.statuses\n .$select(statusID)\n .favouritedBy.list({\n limit: REACTIONS_LIMIT,\n });\n }\n const [{ value: reblogResults }, { value: favouriteResults }] =\n await Promise.allSettled([\n reblogIterator.current.next(),\n favouriteIterator.current.next(),\n ]);\n if (reblogResults.value?.length || favouriteResults.value?.length) {\n const accounts = [];\n if (reblogResults.value?.length) {\n accounts.push(\n ...reblogResults.value.map((a) => {\n a._types = ['reblog'];\n return a;\n }),\n );\n }\n if (favouriteResults.value?.length) {\n accounts.push(\n ...favouriteResults.value.map((a) => {\n a._types = ['favourite'];\n return a;\n }),\n );\n }\n return {\n value: accounts,\n done: reblogResults.done && favouriteResults.done,\n };\n }\n return {\n value: [],\n done: true,\n };\n }\n\n const actionsRef = useRef();\n const isPublic = ['public', 'unlisted'].includes(visibility);\n const isPinnable = ['public', 'unlisted', 'private'].includes(visibility);\n const menuFooter =\n mediaNoDesc && !reblogged ? (\n \n ) : (\n statusMonthsAgo >= 3 && (\n \n )\n );\n const StatusMenuItems = (\n <>\n {!isSizeLarge && sameInstance && (\n <>\n \n >\n )}\n {!isSizeLarge && sameInstance && (isSizeLarge || showActionsBar) && (\n
\n )}\n {(isSizeLarge || showActionsBar) && (\n <>\n
\n >\n )}\n {!mediaFirst && (\n <>\n {(enableTranslate || !language || differentLanguage) && (\n
\n )}\n {enableTranslate ? (\n
\n \n {supportsTTS && (\n \n )}\n
\n ) : (\n (!language || differentLanguage) && (\n
\n \n \n \n Translate\n \n \n {supportsTTS && (\n \n )}\n
\n )\n )}\n >\n )}\n {((!isSizeLarge && sameInstance) ||\n enableTranslate ||\n !language ||\n differentLanguage) &&
}\n {!isSizeLarge && (\n <>\n
{\n onStatusLinkClick(e, status);\n }}\n >\n \n \n \n View post by{' '}\n @{username || acct}\n \n
\n \n {_(visibilityText[visibility])} • {createdDateText}\n \n \n \n >\n )}\n {!!editedAt && (\n <>\n
\n >\n )}\n
\n \n {isPublic && isSizeLarge && (\n
\n )}\n {(isSelf || mentionSelf) &&
}\n {(isSelf || mentionSelf) && (\n
\n )}\n {isSelf && isPinnable && (\n
\n )}\n {isSelf && (\n \n )}\n {!isSelf && isSizeLarge && (\n <>\n
\n
\n >\n )}\n >\n );\n\n const contextMenuRef = useRef();\n const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);\n const [contextMenuProps, setContextMenuProps] = useState({});\n\n const showContextMenu =\n allowContextMenu || (!isSizeLarge && !previewMode && !_deleted && !quoted);\n\n // Only iOS/iPadOS browsers don't support contextmenu\n // Some comments report iPadOS might support contextmenu if a mouse is connected\n const bindLongPressContext = useLongPress(\n isIOS && showContextMenu\n ? (e) => {\n if (e.pointerType === 'mouse') return;\n // There's 'pen' too, but not sure if contextmenu event would trigger from a pen\n\n const { clientX, clientY } = e.touches?.[0] || e;\n // link detection copied from onContextMenu because here it works\n const link = e.target.closest('a');\n if (\n link &&\n statusRef.current.contains(link) &&\n !link.getAttribute('href').startsWith('#')\n )\n return;\n e.preventDefault();\n setContextMenuProps({\n anchorPoint: {\n x: clientX,\n y: clientY,\n },\n direction: 'right',\n });\n setIsContextMenuOpen(true);\n }\n : null,\n {\n threshold: 600,\n captureEvent: true,\n detect: 'touch',\n cancelOnMovement: 2, // true allows movement of up to 25 pixels\n },\n );\n\n const hotkeysEnabled = !readOnly && !previewMode && !quoted;\n const rRef = useHotkeys('r, shift+r', replyStatus, {\n enabled: hotkeysEnabled,\n });\n const fRef = useHotkeys('f, l', favouriteStatusNotify, {\n enabled: hotkeysEnabled,\n });\n const dRef = useHotkeys('d', bookmarkStatusNotify, {\n enabled: hotkeysEnabled,\n });\n const bRef = useHotkeys(\n 'shift+b',\n () => {\n (async () => {\n try {\n const done = await confirmBoostStatus();\n if (!isSizeLarge && done) {\n showToast(\n reblogged\n ? t`Unboosted @${username || acct}'s post`\n : t`Boosted @${username || acct}'s post`,\n );\n }\n } catch (e) {}\n })();\n },\n {\n enabled: hotkeysEnabled && canBoost,\n },\n );\n const xRef = useHotkeys('x', (e) => {\n const activeStatus = document.activeElement.closest(\n '.status-link, .status-focus',\n );\n if (activeStatus) {\n const spoilerButton = activeStatus.querySelector(\n '.spoiler-button:not(.spoiling)',\n );\n if (spoilerButton) {\n e.stopPropagation();\n spoilerButton.click();\n } else {\n const spoilerMediaButton = activeStatus.querySelector(\n '.spoiler-media-button:not(.spoiling)',\n );\n if (spoilerMediaButton) {\n e.stopPropagation();\n spoilerMediaButton.click();\n }\n }\n }\n });\n\n const displayedMediaAttachments = mediaAttachments.slice(\n 0,\n isSizeLarge ? undefined : 4,\n );\n const showMultipleMediaCaptions =\n mediaAttachments.length > 1 &&\n displayedMediaAttachments.some(\n (media) => !!media.description && !isMediaCaptionLong(media.description),\n );\n const captionChildren = useMemo(() => {\n if (!showMultipleMediaCaptions) return null;\n const attachments = [];\n displayedMediaAttachments.forEach((media, i) => {\n if (!media.description) return;\n const index = attachments.findIndex(\n (attachment) => attachment.media.description === media.description,\n );\n if (index === -1) {\n attachments.push({\n media,\n indices: [i],\n });\n } else {\n attachments[index].indices.push(i);\n }\n });\n return attachments.map(({ media, indices }) => (\n
i + 1).join(' ')}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n states.showMediaAlt = {\n alt: media.description,\n lang: language,\n };\n }}\n title={media.description}\n >\n {indices.map((i) => i + 1).join(' ')} {media.description}\n
\n ));\n\n // return displayedMediaAttachments.map(\n // (media, i) =>\n // !!media.description && (\n //
{\n // e.preventDefault();\n // e.stopPropagation();\n // states.showMediaAlt = {\n // alt: media.description,\n // lang: language,\n // };\n // }}\n // title={media.description}\n // >\n // {i + 1} {media.description}\n //
\n // ),\n // );\n }, [showMultipleMediaCaptions, displayedMediaAttachments, language]);\n\n const isThread = useMemo(() => {\n return (\n (!!inReplyToId && inReplyToAccountId === status.account?.id) ||\n !!snapStates.statusThreadNumber[sKey]\n );\n }, [\n inReplyToId,\n inReplyToAccountId,\n status.account?.id,\n snapStates.statusThreadNumber[sKey],\n ]);\n\n const showCommentHint = useMemo(() => {\n return (\n enableCommentHint &&\n !isThread &&\n !withinContext &&\n !inReplyToId &&\n visibility === 'public' &&\n repliesCount > 0\n );\n }, [\n enableCommentHint,\n isThread,\n withinContext,\n inReplyToId,\n repliesCount,\n visibility,\n ]);\n const showCommentCount = useMemo(() => {\n if (\n card ||\n poll ||\n sensitive ||\n spoilerText ||\n mediaAttachments?.length ||\n isThread ||\n withinContext ||\n inReplyToId ||\n repliesCount <= 0\n ) {\n return false;\n }\n const questionRegex = /[???︖❓❔⁇⁈⁉¿‽؟]/;\n const containsQuestion = questionRegex.test(content);\n if (!containsQuestion) return false;\n const contentLength = htmlContentLength(content);\n if (contentLength > 0 && contentLength <= SHOW_COMMENT_COUNT_LIMIT) {\n return true;\n }\n }, [\n card,\n poll,\n sensitive,\n spoilerText,\n mediaAttachments,\n reblog,\n isThread,\n withinContext,\n inReplyToId,\n repliesCount,\n content,\n ]);\n\n return (\n
\n {showReplyParent && !!(inReplyToId && inReplyToAccountId) && (\n \n )}\n {\n statusRef.current = node;\n // Use parent node if it's in focus\n // Use case: \n // When navigating (j/k), the is focused instead of \n // Hotkey binding doesn't bubble up thus this hack\n const nodeRef =\n node?.closest?.(\n '.timeline-item, .timeline-item-alt, .status-link, .status-focus',\n ) || node;\n rRef(nodeRef);\n fRef(nodeRef);\n dRef(nodeRef);\n bRef(nodeRef);\n xRef(nodeRef);\n }}\n tabindex=\"-1\"\n class={`status ${\n !withinContext && inReplyToId && inReplyToAccount\n ? 'status-reply-to'\n : ''\n } visibility-${visibility} ${_pinned ? 'status-pinned' : ''} ${\n SIZE_CLASS[size]\n } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''} ${\n isContextMenuOpen ? 'status-menu-open' : ''\n } ${mediaFirst && hasMediaAttachments ? 'status-media-first' : ''}`}\n onMouseEnter={debugHover}\n onContextMenu={(e) => {\n if (!showContextMenu) return;\n if (e.metaKey) return;\n // console.log('context menu', e);\n const link = e.target.closest('a');\n if (\n link &&\n statusRef.current.contains(link) &&\n !link.getAttribute('href').startsWith('#')\n )\n return;\n\n // If there's selected text, don't show custom context menu\n const selection = window.getSelection?.();\n if (selection.toString().length > 0) {\n const { anchorNode } = selection;\n if (statusRef.current?.contains(anchorNode)) {\n return;\n }\n }\n e.preventDefault();\n setContextMenuProps({\n anchorPoint: {\n x: e.clientX,\n y: e.clientY,\n },\n direction: 'right',\n });\n setIsContextMenuOpen(true);\n }}\n {...(showContextMenu ? bindLongPressContext() : {})}\n >\n {showContextMenu && (\n {\n setIsContextMenuOpen(false);\n // statusRef.current?.focus?.();\n if (e?.reason === 'click') {\n statusRef.current?.closest('[tabindex]')?.focus?.();\n }\n }}\n portal={{\n target: document.body,\n }}\n containerProps={{\n style: {\n // Higher than the backdrop\n zIndex: 1001,\n },\n onClick: () => {\n contextMenuRef.current?.closeMenu?.();\n },\n }}\n overflow=\"auto\"\n boundingBoxPadding={safeBoundingBoxPadding()}\n unmountOnClose\n >\n {StatusMenuItems}\n \n )}\n {showActionsBar &&\n size !== 'l' &&\n !previewMode &&\n !readOnly &&\n !_deleted &&\n !quoted && (\n \n \n \n \n
\n )}\n {size !== 'l' && (\n \n {reblogged && (\n \n )}\n {favourited && (\n \n )}\n {bookmarked && (\n \n )}\n {_pinned && (\n \n )}\n
\n )}\n {size !== 's' && (\n {\n e.preventDefault();\n e.stopPropagation();\n states.showAccount = {\n account: status.account,\n instance,\n };\n }}\n >\n \n \n )}\n \n
\n \n \n \n {/* {inReplyToAccount && !withinContext && size !== 's' && (\n <>\n {' '}\n \n {' '}\n \n \n >\n )} */}\n {/* */}{' '}\n {size !== 'l' &&\n (_deleted ? (\n \n Deleted\n \n ) : url && !previewMode && !readOnly && !quoted ? (\n {\n if (\n e.metaKey ||\n e.ctrlKey ||\n e.shiftKey ||\n e.altKey ||\n e.which === 2\n ) {\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n onStatusLinkClick?.(e, status);\n setContextMenuProps({\n anchorRef: {\n current: e.currentTarget,\n },\n align: 'end',\n direction: 'bottom',\n gap: 4,\n });\n setIsContextMenuOpen(true);\n }}\n class={`time ${\n isContextMenuOpen && contextMenuProps?.anchorRef\n ? 'is-open'\n : ''\n }`}\n >\n {showCommentHint && !showCommentCount ? (\n \n ) : (\n visibility !== 'public' &&\n visibility !== 'direct' && (\n \n )\n )}{' '}\n \n {!previewMode && !readOnly && (\n \n )}\n \n ) : (\n //
\n \n {visibility !== 'public' && visibility !== 'direct' && (\n <>\n {' '}\n >\n )}\n \n \n ))}\n \n {visibility === 'direct' && (\n <>\n
\n Private mention\n
{' '}\n >\n )}\n {!withinContext && (\n <>\n {isThread ? (\n
\n \n \n Thread\n {snapStates.statusThreadNumber[sKey]\n ? ` ${snapStates.statusThreadNumber[sKey]}/X`\n : ''}\n \n
\n ) : (\n !!inReplyToId &&\n !!inReplyToAccount &&\n (!!spoilerText ||\n !mentions.find((mention) => {\n return mention.id === inReplyToAccountId;\n })) && (\n
\n {' '}\n \n
\n )\n )}\n >\n )}\n
\n {mediaFirst && hasMediaAttachments ? (\n <>\n {(!!spoilerText || !!sensitive) && !readingExpandSpoilers && (\n <>\n {!!spoilerText && (\n
\n {' '}\n \n )}\n
\n >\n )}\n
\n {!!content && (\n
\n )}\n >\n ) : (\n <>\n {!!spoilerText && (\n <>\n
\n {readingExpandSpoilers || previewMode ? (\n
\n Content warning\n
\n ) : (\n
\n )}\n >\n )}\n {!!content && (\n
\n )}\n {!!poll && (\n
{\n states.statuses[sKey].poll = newPoll;\n }}\n refresh={() => {\n return masto.v1.polls\n .$select(poll.id)\n .fetch()\n .then((pollResponse) => {\n states.statuses[sKey].poll = pollResponse;\n })\n .catch((e) => {}); // Silently fail\n }}\n votePoll={(choices) => {\n return masto.v1.polls\n .$select(poll.id)\n .votes.create({\n choices,\n })\n .then((pollResponse) => {\n states.statuses[sKey].poll = pollResponse;\n })\n .catch((e) => {}); // Silently fail\n }}\n />\n )}\n {(((enableTranslate || inlineTranslate) &&\n isTranslateble(content) &&\n differentLanguage) ||\n forceTranslate) && (\n \n )}\n {!previewMode &&\n sensitive &&\n !!mediaAttachments.length &&\n readingExpandMedia !== 'show_all' && (\n \n )}\n {!!mediaAttachments.length &&\n (mediaAttachments.length > 1 &&\n (isSizeLarge || (withinContext && size === 'm')) ? (\n \n ) : (\n \n 2 ? 'media-gt2' : ''} ${\n mediaAttachments.length > 4 ? 'media-gt4' : ''\n }`}\n >\n {displayedMediaAttachments.map((media, i) => (\n {\n onMediaClick(e, i, media, status);\n }\n : undefined\n }\n checkAspectRatio={mediaAttachments.length === 1}\n />\n ))}\n
\n \n ))}\n {!!card &&\n /^https/i.test(card?.url) &&\n !sensitive &&\n !spoilerText &&\n !poll &&\n !mediaAttachments.length &&\n !snapStates.statusQuotes[sKey] && (\n a.account?.url === accountURL,\n )}\n instance={currentInstance}\n />\n )}\n >\n )}\n \n {!isSizeLarge && showCommentCount && (\n \n )}\n {isSizeLarge && (\n <>\n \n {!!emojiReactions?.length && (\n
\n {emojiReactions.map((emojiReaction) => {\n const { name, count, me, url, staticUrl } = emojiReaction;\n if (url) {\n // Some servers return url and staticUrl\n return (\n \n {' '}\n {count}\n \n );\n }\n const isShortCode = /^:.+?:$/.test(name);\n if (isShortCode) {\n const emoji = emojis.find(\n (e) =>\n e.shortcode ===\n name.replace(/^:/, '').replace(/:$/, ''),\n );\n if (emoji) {\n return (\n \n {' '}\n {count}\n \n );\n }\n }\n return (\n \n {name} {count}\n \n );\n })}\n
\n )}\n
\n
\n \n
\n {/*
\n \n
*/}\n
\n \n \n {reblogged ? t`Unboost` : t`Boost`}\n >\n }\n menuExtras={\n \n }\n menuFooter={menuFooter}\n >\n \n \n
\n
\n \n
\n {supports('@mastodon/post-bookmark') && (\n
\n \n
\n )}\n
\n \n \n }\n >\n {StatusMenuItems}\n \n
\n >\n )}\n \n {!!showEdited && (\n