import './status.css'; import { getBlurHashAverageColor } from 'fast-blurhash'; import mem from 'mem'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { InView } from 'react-intersection-observer'; import { useSnapshot } from 'valtio'; import Loader from '../components/loader'; import Modal from '../components/modal'; import NameText from '../components/name-text'; import enhanceContent from '../utils/enhance-content'; import shortenNumber from '../utils/shorten-number'; import states from '../utils/states'; import store from '../utils/store'; import visibilityIconsMap from '../utils/visibility-icons-map'; import Avatar from './avatar'; import Icon from './icon'; /* Media type === unknown = unsupported or unrecognized file type image = Static image gifv = Looping, soundless animation video = Video clip audio = Audio track */ function Media({ media, showOriginal, onClick }) { const { blurhash, description, meta, previewUrl, remoteUrl, url, type } = media; const { original, small, focus } = meta || {}; const width = showOriginal ? original?.width : small?.width; const height = showOriginal ? original?.height : small?.height; const mediaURL = showOriginal ? url : previewUrl; const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null; const videoRef = useRef(); let focalBackgroundPosition; if (focus) { // Convert focal point to CSS background position // Formula from jquery-focuspoint // x = -1, y = 1 => 0% 0% // x = 0, y = 0 => 50% 50% // x = 1, y = -1 => 100% 100% const x = ((focus.x + 1) / 2) * 100; const y = ((1 - focus.y) / 2) * 100; focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`; } if (type === 'image') { return (
{description}
); } else if (type === 'gifv' || type === 'video') { // 20 seconds, treat as a gif const isGIF = type === 'gifv' && original.duration <= 20; return (
{ if (isGIF) { try { videoRef.current?.pause(); } catch (e) {} } onClick(e); }} onMouseEnter={() => { if (isGIF) { try { videoRef.current?.play(); } catch (e) {} } }} onMouseLeave={() => { if (isGIF) { try { videoRef.current?.pause(); } catch (e) {} } }} > {showOriginal ? ( ) : isGIF ? (
); } else if (type === 'audio') { return (
); } } 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; if (hasText && image) { const domain = new URL(url).hostname.replace(/^www\./, ''); return ( { this.style.display = 'none'; }} />

{domain}

{description || providerName || authorName}

); } else if (type === 'photo') { return ( {title ); } else if (type === 'video') { return (
); } } function Poll({ poll, readOnly }) { const [pollSnapshot, setPollSnapshot] = useState(poll); const [uiState, setUIState] = useState('default'); useEffect(() => { setPollSnapshot(poll); }, [poll]); const { expired, expiresAt, id, multiple, options, ownVotes, voted, votersCount, votesCount, } = pollSnapshot; const expiresAtDate = !!expiresAt && new Date(expiresAt); return (
{voted || expired ? ( options.map((option, i) => { const { title, votesCount: optionVotesCount } = option; const pollVotesCount = votersCount || votesCount; const percentage = Math.round((optionVotesCount / pollVotesCount) * 100) || 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 votes = []; formData.forEach((value, key) => { if (key === 'poll') { votes.push(value); } }); console.log(votes); setUIState('loading'); const pollResponse = await masto.poll.vote(id, { choices: votes, }); console.log(pollResponse); setPollSnapshot(pollResponse); setUIState('default'); }} style={{ pointerEvents: uiState === 'loading' || readOnly ? 'none' : 'auto', opacity: uiState === 'loading' ? 0.5 : 1, }} > {options.map((option, i) => { const { title } = option; return (
); })} {!readOnly && ( )}
)} {!readOnly && (

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

)}
); } function EditedAtModal({ statusID, onClose = () => {} }) { const [uiState, setUIState] = useState('default'); const [editHistory, setEditHistory] = useState([]); useEffect(() => { setUIState('loading'); (async () => { try { const editHistory = await masto.statuses.fetchHistory(statusID); 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 fetchAccount(id) { return masto.accounts.fetch(id); } const memFetchAccount = mem(fetchAccount); function Status({ statusID, status, withinContext, size = 'm', skeleton, readOnly, }) { if (skeleton) { return (
███ ████████████

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

); } const snapStates = useSnapshot(states); if (!status) { status = snapStates.statuses.get(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, inReplyToAccountId, content, mentions, mediaAttachments, reblog, uri, emojis, } = status; 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.get(inReplyToAccountId); if (account) { setInReplyToAccount(account); } else { memFetchAccount(inReplyToAccountId) .then((account) => { setInReplyToAccount(account); states.accounts.set(account.id, account); }) .catch((e) => {}); } } const [showSpoiler, setShowSpoiler] = useState(false); const debugHover = (e) => { if (e.shiftKey) { console.log(status); } }; const [showMediaModal, setShowMediaModal] = useState(false); const carouselFocusItem = useRef(null); const prevShowMediaModal = useRef(showMediaModal); useEffect(() => { if (showMediaModal !== false) { carouselFocusItem.current?.node?.scrollIntoView({ behavior: prevShowMediaModal.current === false ? 'auto' : 'smooth', }); } prevShowMediaModal.current = showMediaModal; }, [showMediaModal]); if (reblog) { return (
{' '} boosted
); } const [actionsUIState, setActionsUIState] = useState(null); // boost-loading, favourite-loading, bookmark-loading const [showEdited, setShowEdited] = useState(false); const carouselRef = useRef(null); const currentYear = new Date().getFullYear(); return (
{size !== 's' && ( { e.preventDefault(); e.stopPropagation(); states.showAccount = status.account; }} > )}
{inReplyToAccount && !withinContext && size !== 's' && ( <> {' '} {' '} )} {' '} {size !== 'l' && uri ? ( {' '} {createdAtDate.toLocaleString()} ) : ( {' '} {createdAtDate.toLocaleString()} )}
{!!spoilerText && sensitive && ( <>

{spoilerText}

)}
{ let { target } = e; if (target.parentNode.tagName.toLowerCase() === 'a') { target = target.parentNode; } if ( target.tagName.toLowerCase() === 'a' && target.classList.contains('u-url') ) { e.preventDefault(); e.stopPropagation(); const username = ( target.querySelector('span') || target ).innerText .trim() .replace(/^@/, ''); const mention = mentions.find( (mention) => mention.username === username || mention.acct === username, ); if (mention) { states.showAccount = mention.acct; } else { const href = target.getAttribute('href'); states.showAccount = href; } } }} dangerouslySetInnerHTML={{ __html: enhanceContent(content, { emojis, postEnhanceDOM: (dom) => { dom .querySelectorAll('a.u-url[target="_blank"]') .forEach((a) => { // Remove target="_blank" from links a.removeAttribute('target'); }); }, }), }} /> {!!poll && } {!spoilerText && sensitive && !!mediaAttachments.length && ( )} {!!mediaAttachments.length && (
{mediaAttachments.map((media, i) => ( { e.preventDefault(); e.stopPropagation(); setShowMediaModal(i); }} /> ))}
)} {!!card && (size === 'l' || (size === 'm' && !poll && !mediaAttachments.length)) && ( )}
{size === 'l' && ( <>
{' '} {editedAt && ( <> {' '} • {' '} )}
{/* TODO: if visibility = private, only can reblog own statuses */} {visibility !== 'direct' && ( )} {isSelf && ( {isSelf && (
  • )}
    )}
    )}
    {showMediaModal !== false && ( {mediaAttachments?.length > 1 && ( )} )} {!!showEdited && ( { if (e.target === e.currentTarget) { setShowEdited(false); } }} > { setShowEdited(false); }} /> )}
    ); } export default Status;