import './status.css'; import { Menu, MenuItem } from '@szhsin/react-menu'; import mem from 'mem'; import { memo } from 'preact/compat'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import 'swiped-events'; import useResizeObserver from 'use-resize-observer'; import { useSnapshot } from 'valtio'; import Loader from '../components/loader'; import Modal from '../components/modal'; import NameText from '../components/name-text'; import { api } from '../utils/api'; import enhanceContent from '../utils/enhance-content'; import handleContentLinks from '../utils/handle-content-links'; import htmlContentLength from '../utils/html-content-length'; import shortenNumber from '../utils/shorten-number'; import states, { saveStatus, statusKey } from '../utils/states'; import store from '../utils/store'; import visibilityIconsMap from '../utils/visibility-icons-map'; import Avatar from './avatar'; import Icon from './icon'; import Link from './link'; import Media from './media'; import RelativeTime from './relative-time'; function fetchAccount(id, masto) { try { return masto.v1.accounts.fetch(id); } catch (e) { return Promise.reject(e); } } const memFetchAccount = mem(fetchAccount); function Status({ statusID, status, instance: propInstance, withinContext, size = 'm', skeleton, readOnly, contentTextWeight, }) { if (skeleton) { return (
███ ████████

████ ████████

); } const { masto, instance } = api({ instance: propInstance }); const { instance: currentInstance } = api(); const sameInstance = instance === currentInstance; const sKey = statusKey(statusID, instance); const snapStates = useSnapshot(states); if (!status) { status = snapStates.statuses[sKey] || snapStates.statuses[statusID]; } if (!status) { return null; } const { account: { acct, avatar, avatarStatic, id: accountId, url, displayName, username, emojis: accountEmojis, }, id, repliesCount, reblogged, reblogsCount, favourited, favouritesCount, bookmarked, poll, muted, sensitive, spoilerText, visibility, // public, unlisted, private, direct language, editedAt, filtered, card, createdAt, inReplyToId, inReplyToAccountId, content, mentions, mediaAttachments, reblog, uri, emojis, // Non-API props _deleted, _pinned, } = status; console.debug('RENDER Status', id, status?.account.displayName); const createdAtDate = new Date(createdAt); const editedAtDate = new Date(editedAt); const isSelf = useMemo(() => { const currentAccount = store.session.get('currentAccount'); return currentAccount && currentAccount === accountId; }, [accountId]); let inReplyToAccountRef = mentions?.find( (mention) => mention.id === inReplyToAccountId, ); if (!inReplyToAccountRef && inReplyToAccountId === id) { inReplyToAccountRef = { url, username, displayName }; } const [inReplyToAccount, setInReplyToAccount] = useState(inReplyToAccountRef); if (!withinContext && !inReplyToAccount && inReplyToAccountId) { const account = states.accounts[inReplyToAccountId]; if (account) { setInReplyToAccount(account); } else { memFetchAccount(inReplyToAccountId, masto) .then((account) => { setInReplyToAccount(account); states.accounts[account.id] = account; }) .catch((e) => {}); } } const showSpoiler = !!snapStates.spoilers[id] || false; const debugHover = (e) => { if (e.shiftKey) { console.log(status); } }; if (reblog) { return (
{' '} {' '} boosted
); } const [showEdited, setShowEdited] = useState(false); const currentYear = new Date().getFullYear(); const spoilerContentRef = useRef(null); useResizeObserver({ ref: spoilerContentRef, onResize: () => { if (spoilerContentRef.current) { const { scrollHeight, clientHeight } = spoilerContentRef.current; spoilerContentRef.current.classList.toggle( 'truncated', scrollHeight > clientHeight, ); } }, }); const contentRef = useRef(null); useResizeObserver({ ref: contentRef, onResize: () => { if (contentRef.current) { const { scrollHeight, clientHeight } = contentRef.current; contentRef.current.classList.toggle( 'truncated', scrollHeight > clientHeight, ); } }, }); const readMoreText = 'Read more →'; const statusRef = useRef(null); const unauthInteractionErrorMessage = `Sorry, your current logged-in instance can't interact with this status from another instance.`; return (
{size !== 'l' && (
{reblogged && } {favourited && } {bookmarked && } {_pinned && }
)} {size !== 's' && ( { e.preventDefault(); e.stopPropagation(); states.showAccount = { account: status.account, instance, }; }} > )}
{/* */} {/* {inReplyToAccount && !withinContext && size !== 's' && ( <> {' '} {' '} )} */} {/* */}{' '} {size !== 'l' && (uri ? ( {' '} ) : ( {' '} ))}
{!withinContext && ( <> {inReplyToAccountId === status.account?.id || !!snapStates.statusThreadNumber[id] ? (
Thread {snapStates.statusThreadNumber[id] ? ` ${snapStates.statusThreadNumber[id]}/X` : ''}
) : ( !!inReplyToId && !!inReplyToAccount && (!!spoilerText || !mentions.find((mention) => { return mention.id === inReplyToAccountId; })) && (
{' '}
) )} )}
{!!spoilerText && ( <>

{spoilerText}

)}
{ dom .querySelectorAll('a.u-url[target="_blank"]') .forEach((a) => { // Remove target="_blank" from links if (!/http/i.test(a.innerText.trim())) { a.removeAttribute('target'); } }); }, }), }} /> {!!poll && ( { states.statuses[sKey].poll = newPoll; }} refresh={() => { return masto.v1.polls .fetch(poll.id) .then((pollResponse) => { states.statuses[sKey].poll = pollResponse; }) .catch((e) => {}); // Silently fail }} votePoll={(choices) => { return masto.v1.polls .vote(poll.id, { choices, }) .then((pollResponse) => { states.statuses[sKey].poll = pollResponse; }) .catch((e) => {}); // Silently fail }} /> )} {!spoilerText && sensitive && !!mediaAttachments.length && ( )} {!!mediaAttachments.length && (
2 ? 'media-gt2' : '' } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`} > {mediaAttachments .slice(0, size === 'l' ? undefined : 4) .map((media, i) => ( { e.preventDefault(); e.stopPropagation(); states.showMediaModal = { mediaAttachments, index: i, instance, statusID: readOnly ? null : id, }; }} /> ))}
)} {!!card && !sensitive && !spoilerText && !poll && !mediaAttachments.length && }
{size === 'l' && ( <>
{' '} {editedAt && ( <> {' '} • {' '} )}
{ if (!sameInstance) { return alert(unauthInteractionErrorMessage); } states.showCompose = { replyToStatus: status, }; }} />
{/* TODO: if visibility = private, only can reblog own statuses */} {visibility !== 'direct' && (
{ if (!sameInstance) { return alert(unauthInteractionErrorMessage); } try { if (!reblogged) { const yes = confirm('Boost this post?'); if (!yes) { return; } } // 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); } else { const newStatus = await masto.v1.statuses.reblog(id); saveStatus(newStatus, instance); } } catch (e) { console.error(e); // Revert optimistism states.statuses[sKey] = status; } }} />
)}
{ if (!sameInstance) { 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; } }} />
{ if (!sameInstance) { 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; } }} />
{isSelf && (
} > {isSelf && ( { states.showCompose = { editStatus: status, }; }} > Edit… )} )}
)}
{!!showEdited && ( { if (e.target === e.currentTarget) { setShowEdited(false); statusRef.current?.focus(); } }} > { return masto.v1.statuses.listHistory(showEdited); }} onClose={() => { setShowEdited(false); statusRef.current?.focus(); }} /> )}
); } function Card({ card }) { const { blurhash, title, description, html, providerName, authorName, width, height, image, url, type, embedUrl, } = 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; const isLandscape = width / height >= 1.2; const size = isLandscape ? 'large' : ''; if (hasText && image) { const domain = new URL(url).hostname.replace(/^www\./, ''); return (
{ try { e.target.style.display = 'none'; } catch (e) {} }} />

{domain}

{title}

{description || providerName || authorName}

); } else if (type === 'photo') { return ( {title ); } else if (type === 'video') { return (
); } } function Poll({ poll, lang, readOnly, refresh = () => {}, votePoll = () => {}, }) { const [uiState, setUIState] = useState('default'); const { expired, expiresAt, id, multiple, options, ownVotes, voted, votersCount, votesCount, } = poll; const expiresAtDate = !!expiresAt && new Date(expiresAt); // Update poll at point of expiry useEffect(() => { let timeout; if (!expired && expiresAtDate) { const ms = expiresAtDate.getTime() - Date.now() + 1; // +1 to give it a little buffer if (ms > 0) { timeout = setTimeout(() => { setUIState('loading'); (async () => { await refresh(); setUIState('default'); })(); }, ms); } } return () => { clearTimeout(timeout); }; }, [expired, expiresAtDate]); const pollVotesCount = votersCount || votesCount; let roundPrecision = 0; if (pollVotesCount <= 1000) { roundPrecision = 0; } else if (pollVotesCount <= 10000) { roundPrecision = 1; } else if (pollVotesCount <= 100000) { roundPrecision = 2; } return (
{voted || expired ? ( options.map((option, i) => { const { title, votesCount: optionVotesCount } = option; const percentage = pollVotesCount ? ((optionVotesCount / pollVotesCount) * 100).toFixed( roundPrecision, ) : 0; // check if current poll choice is the leading one const isLeading = optionVotesCount > 0 && optionVotesCount === Math.max(...options.map((o) => o.votesCount)); return (
{title} {voted && ownVotes.includes(i) && ( <> {' '} )}
{percentage}%
); }) ) : (
{ e.preventDefault(); const form = e.target; const formData = new FormData(form); const choices = []; formData.forEach((value, key) => { if (key === 'poll') { choices.push(value); } }); setUIState('loading'); await votePoll(choices); setUIState('default'); }} > {options.map((option, i) => { const { title } = option; return (
); })} {!readOnly && ( )}
)} {!readOnly && (

{!expired && ( <> {' '} •{' '} )} {shortenNumber(votesCount)} vote {votesCount === 1 ? '' : 's'} {!!votersCount && votersCount !== votesCount && ( <> {' '} •{' '} {shortenNumber(votersCount)}{' '} voter {votersCount === 1 ? '' : 's'} )}{' '} • {expired ? 'Ended' : 'Ending'}{' '} {!!expiresAtDate && }

)}
); } function EditedAtModal({ statusID, instance, fetchStatusHistory = () => {}, onClose = () => {}, }) { const [uiState, setUIState] = useState('default'); const [editHistory, setEditHistory] = useState([]); useEffect(() => { setUIState('loading'); (async () => { try { const editHistory = await fetchStatusHistory(); console.log(editHistory); setEditHistory(editHistory); setUIState('default'); } catch (e) { console.error(e); setUIState('error'); } })(); }, []); const currentYear = new Date().getFullYear(); return (
{/* */}

Edit History

{uiState === 'error' &&

Failed to load history

} {uiState === 'loading' && (

Loading…

)}
{editHistory.length > 0 && (
    {editHistory.map((status) => { const { createdAt } = status; const createdAtDate = new Date(createdAt); return (
  1. ); })}
)}
); } 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 ( ); } export function formatDuration(time) { 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')}`; } } export default memo(Status);