2023-11-03 12:37:40 +01:00
|
|
|
import { Avatar } from 'flowbite-react'
|
|
|
|
|
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'
|
2023-11-04 07:32:37 +01:00
|
|
|
import { FormattedMessage } 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 { findLink } from '@/utils/statusParser'
|
2023-12-11 16:00:44 +01:00
|
|
|
import { Account } from '@/db'
|
2023-11-03 12:37:40 +01:00
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
status: Entity.Status
|
2023-12-11 16:00:44 +01:00
|
|
|
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()
|
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 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">
|
|
|
|
|
{rebloggedHeader(props.status)}
|
|
|
|
|
<div className="flex">
|
2023-12-02 03:50:42 +01:00
|
|
|
<div className="p-2 cursor-pointer" style={{ width: '56px' }}>
|
|
|
|
|
<Avatar img={status.account.avatar} onClick={() => openUser(status.account.id)} />
|
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-06 16:35:46 +01:00
|
|
|
{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>
|
|
|
|
|
))}
|
2023-11-25 06:50:46 +01:00
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
|
2023-12-11 16:00:44 +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
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const rebloggedHeader = (status: Entity.Status) => {
|
|
|
|
|
if (status.reblog && !status.quote) {
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex text-gray-600">
|
|
|
|
|
<div className="grid justify-items-end pr-2" style={{ width: '56px' }}>
|
|
|
|
|
<Avatar img={status.account.avatar} size="xs" />
|
|
|
|
|
</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
|
|
|
|
|
}
|
|
|
|
|
}
|
