Whalebird-desktop-client-ma.../renderer/components/timelines/status/Status.tsx

186 lines
6.6 KiB
TypeScript
Raw Normal View History

2023-11-03 12:37:40 +01:00
import { Entity, MegalodonInterface } from 'megalodon'
import dayjs from 'dayjs'
import Body from './Body'
2023-11-03 15:02:48 +01:00
import Media from './Media'
2023-11-03 12:37:40 +01:00
import emojify from '@/utils/emojify'
2023-11-03 15:30:04 +01:00
import Card from './Card'
2023-11-04 05:03:56 +01:00
import Poll from './Poll'
2024-01-30 16:51:36 +01:00
import { FormattedMessage, useIntl } from 'react-intl'
2023-11-09 14:41:13 +01:00
import Actions from './Actions'
2023-11-15 16:15:44 +01:00
import { useRouter } from 'next/router'
2023-12-02 16:52:51 +01:00
import { MouseEventHandler, useState } from 'react'
import { findAccount, findLink, ParsedAccount, accountMatch, findTag } from '@/utils/statusParser'
import { Account } from '@/db'
import { Avatar } from '@material-tailwind/react'
2023-11-03 12:37:40 +01:00
type Props = {
status: Entity.Status
account: Account
2023-11-03 12:37:40 +01:00
client: MegalodonInterface
2023-11-04 05:03:56 +01:00
onRefresh: (status: Entity.Status) => void
2023-12-02 11:26:45 +01:00
openMedia: (media: Entity.Attachment) => void
2023-11-03 12:37:40 +01:00
}
export default function Status(props: Props) {
const status = originalStatus(props.status)
2023-11-25 06:50:46 +01:00
const [spoilered, setSpoilered] = useState(status.spoiler_text.length > 0)
2023-11-15 16:15:44 +01:00
const router = useRouter()
2024-01-30 16:51:36 +01:00
const { formatMessage } = useIntl()
2023-11-03 12:37:40 +01:00
2023-11-04 05:03:56 +01:00
const onRefresh = async () => {
const res = await props.client.getStatus(status.id)
props.onRefresh(res.data)
}
2023-11-15 16:15:44 +01:00
const openStatus = () => {
2023-11-28 16:37:21 +01:00
router.push({ query: { id: router.query.id, timeline: router.query.timeline, status_id: status.id, detail: true } })
2023-11-15 16:15:44 +01:00
}
2023-12-02 03:50:42 +01:00
const openUser = (id: string) => {
router.push({ query: { id: router.query.id, timeline: router.query.timeline, user_id: id, detail: true } })
}
2023-12-02 16:52:51 +01:00
const statusClicked: MouseEventHandler<HTMLDivElement> = async e => {
const parsedAccount = findAccount(e.target as HTMLElement, 'status-body')
if (parsedAccount) {
e.preventDefault()
e.stopPropagation()
const account = await searchAccount(parsedAccount, props.status, props.client, props.account.domain)
if (account) {
router.push({ query: { id: router.query.id, timeline: router.query.timeline, user_id: account.id, detail: true } })
} else {
console.warn('account not found', parsedAccount)
}
return
}
const parsedTag = findTag(e.target as HTMLElement, 'status-body')
if (parsedTag) {
e.preventDefault()
e.stopPropagation()
router.push({ query: { id: router.query.id, timeline: router.query.timeline, tag: parsedTag, detail: true } })
return
}
2023-12-02 16:52:51 +01:00
const url = findLink(e.target as HTMLElement, 'status-body')
if (url) {
global.ipc.invoke('open-browser', url)
e.preventDefault()
e.stopPropagation()
}
}
2023-11-03 12:37:40 +01:00
return (
<div className="border-b mr-2 py-1">
2024-01-30 16:51:36 +01:00
{rebloggedHeader(
props.status,
formatMessage(
{
id: 'timeline.status.avatar'
},
{ user: status.account.username }
)
)}
2023-11-03 12:37:40 +01:00
<div className="flex">
2023-12-02 03:50:42 +01:00
<div className="p-2 cursor-pointer" style={{ width: '56px' }}>
<Avatar
src={status.account.avatar}
onClick={() => openUser(status.account.id)}
variant="rounded"
style={{ width: '40px', height: '40px' }}
2024-01-30 16:51:36 +01:00
alt={formatMessage(
{
id: 'timeline.status.avatar'
},
{ user: status.account.username }
)}
/>
2023-11-03 12:37:40 +01:00
</div>
<div className="text-gray-950 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
<div className="flex justify-between">
2023-12-02 03:50:42 +01:00
<div className="flex cursor-pointer" onClick={() => openUser(status.account.id)}>
2023-11-03 12:37:40 +01:00
<span
className="text-gray-950 text-ellipsis break-all overflow-hidden"
dangerouslySetInnerHTML={{ __html: emojify(status.account.display_name, status.account.emojis) }}
></span>
<span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
</div>
2023-11-15 16:15:44 +01:00
<div className="text-gray-600 text-right cursor-pointer" onClick={openStatus}>
2023-11-03 12:37:40 +01:00
<time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
</div>
</div>
2023-12-02 16:52:51 +01:00
<div className="status-body">
<Body status={status} spoilered={spoilered} setSpoilered={setSpoilered} onClick={statusClicked} />
</div>
2023-11-25 06:50:46 +01:00
{!spoilered && (
<>
{status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
{status.card && <Card card={status.card} />}
2023-12-02 11:26:45 +01:00
<Media media={status.media_attachments} sensitive={status.sensitive} openMedia={props.openMedia} />
2023-12-11 16:03:06 +01:00
<div className="flex items-center gap-2">
{status.emoji_reactions &&
status.emoji_reactions.map(e => (
<button key={e.name} className="py-1">
{e.url ? <img src={e.url} style={{ height: '24px' }} /> : <span>{e.name}</span>}
</button>
))}
</div>
2023-11-25 06:50:46 +01:00
</>
)}
<Actions status={status} client={props.client} account={props.account} onRefresh={onRefresh} />
2023-11-03 12:37:40 +01:00
</div>
</div>
</div>
)
}
const originalStatus = (status: Entity.Status) => {
if (status.reblog && !status.quote) {
return status.reblog
} else {
return status
}
}
2024-01-30 16:51:36 +01:00
const rebloggedHeader = (status: Entity.Status, alt: string) => {
2023-11-03 12:37:40 +01:00
if (status.reblog && !status.quote) {
return (
<div className="flex text-gray-600">
<div className="grid justify-items-end pr-2" style={{ width: '56px' }}>
2024-01-30 16:51:36 +01:00
<Avatar src={status.account.avatar} size="xs" variant="rounded" alt={alt} />
2023-11-03 12:37:40 +01:00
</div>
2023-11-04 07:32:37 +01:00
<div style={{ width: 'calc(100% - 56px)' }}>
<FormattedMessage id="timeline.status.boosted" values={{ user: status.account.username }} />
</div>
2023-11-03 12:37:40 +01:00
</div>
)
} else {
return null
}
}
async function searchAccount(account: ParsedAccount, status: Entity.Status, client: MegalodonInterface, domain: string) {
if (status.in_reply_to_account_id) {
const res = await client.getAccount(status.in_reply_to_account_id)
if (res.status === 200) {
const user = accountMatch([res.data], account, domain)
if (user) return user
}
}
if (status.in_reply_to_id) {
const res = await client.getStatusContext(status.id)
if (res.status === 200) {
const accounts: Array<Entity.Account> = res.data.ancestors.map(s => s.account).concat(res.data.descendants.map(s => s.account))
const user = accountMatch(accounts, account, domain)
if (user) return user
}
}
const res = await client.searchAccount(account.url, { resolve: true })
if (res.data.length === 0) return null
const user = accountMatch(res.data, account, domain)
if (user) return user
return null
}