503 lines
15 KiB
TypeScript
503 lines
15 KiB
TypeScript
import { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
|
|
import { FormattedMessage, useIntl } from 'react-intl'
|
|
import {
|
|
FaEnvelope,
|
|
FaFaceLaughBeam,
|
|
FaGlobe,
|
|
FaListCheck,
|
|
FaLock,
|
|
FaLockOpen,
|
|
FaPaperPlane,
|
|
FaPaperclip,
|
|
FaPencil,
|
|
FaXmark
|
|
} from 'react-icons/fa6'
|
|
import { Entity, MegalodonInterface } from 'megalodon'
|
|
import { useToast } from '@/utils/toast'
|
|
import Picker from '@emoji-mart/react'
|
|
import { data } from '@/utils/emojiData'
|
|
import EditMedia from './EditMedia'
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
IconButton,
|
|
Input,
|
|
List,
|
|
ListItem,
|
|
Option,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverHandler,
|
|
Radio,
|
|
Select,
|
|
Switch,
|
|
Textarea
|
|
} from '@material-tailwind/react'
|
|
|
|
type Props = {
|
|
client: MegalodonInterface
|
|
in_reply_to?: Entity.Status
|
|
}
|
|
|
|
type Poll = {
|
|
options: Array<string>
|
|
expires_in: number
|
|
multiple: boolean
|
|
}
|
|
|
|
export default function Compose(props: Props) {
|
|
const [body, setBody] = useState('')
|
|
const [visibility, setVisibility] = useState<'public' | 'unlisted' | 'private' | 'direct'>('public')
|
|
const [cw, setCW] = useState(false)
|
|
const [spoiler, setSpoiler] = useState('')
|
|
const [attachments, setAttachments] = useState<Array<Entity.Attachment | Entity.AsyncAttachment>>([])
|
|
const [poll, setPoll] = useState<Poll | null>(null)
|
|
const [loading, setLoading] = useState(false)
|
|
const [editMedia, setEditMedia] = useState<Entity.Attachment>()
|
|
const [maxCharacters, setMaxCharacters] = useState<number | null>(null)
|
|
const [remaining, setRemaining] = useState<number | null>(null)
|
|
const [popoverVisibility, setPopoverVisibility] = useState(false)
|
|
const [popoverEmoji, setPopoverEmoji] = useState(false)
|
|
|
|
const { formatMessage } = useIntl()
|
|
const uploaderRef = useRef(null)
|
|
const showToast = useToast()
|
|
const textareaRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!props.client) return
|
|
const f = async () => {
|
|
const instance = await props.client.getInstance()
|
|
if (instance.data.configuration.statuses.max_characters) {
|
|
setMaxCharacters(instance.data.configuration.statuses.max_characters)
|
|
}
|
|
}
|
|
f()
|
|
}, [props.client])
|
|
|
|
useEffect(() => {
|
|
if (!cw) {
|
|
setSpoiler('')
|
|
}
|
|
}, [cw])
|
|
|
|
useEffect(() => {
|
|
if (props.in_reply_to) {
|
|
const f = async () => {
|
|
const myself = await props.client.verifyAccountCredentials()
|
|
const mentionAccounts = [props.in_reply_to.account.acct, ...props.in_reply_to.mentions.map(a => a.acct)]
|
|
.filter((a, i, self) => self.indexOf(a) === i)
|
|
.filter(a => a !== myself.data.username)
|
|
setBody(`${mentionAccounts.map(m => `@${m}`).join(' ')} `)
|
|
setVisibility(props.in_reply_to.visibility)
|
|
}
|
|
f()
|
|
}
|
|
}, [props.in_reply_to])
|
|
|
|
useEffect(() => {
|
|
if (maxCharacters) {
|
|
setRemaining(maxCharacters - body.length - spoiler.length)
|
|
}
|
|
}, [maxCharacters, body, spoiler])
|
|
|
|
const post = async () => {
|
|
if (body.length === 0) return
|
|
let options = { visibility: visibility }
|
|
if (cw) {
|
|
options = Object.assign({}, options, {
|
|
spoiler_text: spoiler
|
|
})
|
|
}
|
|
if (attachments.length > 0) {
|
|
options = Object.assign({}, options, {
|
|
media_ids: attachments.map(m => m.id)
|
|
})
|
|
}
|
|
const sensitive = document.getElementById('sensitive') as HTMLInputElement
|
|
if (sensitive && sensitive.checked) {
|
|
options = Object.assign({}, options, {
|
|
sensitive: sensitive.checked
|
|
})
|
|
}
|
|
if (poll && poll.options.length > 0) {
|
|
options = Object.assign({}, options, {
|
|
poll: poll
|
|
})
|
|
}
|
|
setLoading(true)
|
|
try {
|
|
await props.client.postStatus(body, options)
|
|
reset()
|
|
} catch (err) {
|
|
console.error(err)
|
|
showToast({ text: formatMessage({ id: 'alert.compose.post_failed' }), type: 'failure' })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const reset = () => {
|
|
setBody('')
|
|
setSpoiler('')
|
|
setCW(false)
|
|
setAttachments([])
|
|
setPoll(null)
|
|
setMaxCharacters(null)
|
|
}
|
|
|
|
const handleKeyPress = useCallback(
|
|
(event: KeyboardEvent) => {
|
|
if (event.ctrlKey === true && event.key === 'Enter') {
|
|
post()
|
|
}
|
|
},
|
|
[post]
|
|
)
|
|
|
|
useEffect(() => {
|
|
textareaRef.current?.addEventListener('keydown', handleKeyPress)
|
|
|
|
return () => {
|
|
textareaRef.current?.removeEventListener('keydown', handleKeyPress)
|
|
}
|
|
}, [handleKeyPress])
|
|
|
|
const selectFile = () => {
|
|
if (uploaderRef.current) {
|
|
uploaderRef.current.click()
|
|
}
|
|
}
|
|
|
|
const fileChanged = async (event: ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.item(0)
|
|
if (file === null || file === undefined) {
|
|
return
|
|
}
|
|
if (attachments.length >= 4) {
|
|
showToast({ text: formatMessage({ id: 'alert.validation.attachment_length' }, { limit: 4 }), type: 'failure' })
|
|
return
|
|
}
|
|
if (!file.type.includes('image') && !file.type.includes('video')) {
|
|
showToast({ text: formatMessage({ id: 'alert.validation.attachment_type' }), type: 'failure' })
|
|
return
|
|
}
|
|
setLoading(true)
|
|
try {
|
|
const res = await props.client.uploadMedia(file)
|
|
setAttachments(current => [...current, res.data])
|
|
} catch {
|
|
showToast({ text: formatMessage({ id: 'alert.upload_error' }), type: 'failure' })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const removeFile = (index: number) => {
|
|
setAttachments(current => current.filter((_, i) => i !== index))
|
|
}
|
|
|
|
const openDescription = (index: number) => {
|
|
setEditMedia(attachments[index])
|
|
}
|
|
|
|
const closeDescription = () => {
|
|
setEditMedia(undefined)
|
|
}
|
|
|
|
const togglePoll = () => {
|
|
if (poll) {
|
|
setPoll(null)
|
|
} else {
|
|
setPoll(defaultPoll())
|
|
}
|
|
}
|
|
|
|
const onEmojiSelect = emoji => {
|
|
const textarea = document.getElementById('body') as HTMLTextAreaElement
|
|
const cursor = textarea.selectionStart
|
|
if (emoji.native) {
|
|
setBody(current => `${current.slice(0, cursor)}${emoji.native} ${current.slice(cursor)}`)
|
|
} else if (emoji.shortcodes) {
|
|
setBody(current => `${current.slice(0, cursor)}${emoji.shortcodes} ${current.slice(cursor)}`)
|
|
}
|
|
setPopoverEmoji(false)
|
|
}
|
|
|
|
return (
|
|
<div className="px-4 pb-4">
|
|
<form id="form">
|
|
{cw && (
|
|
<Input
|
|
id="spoiler"
|
|
type="text"
|
|
color="blue"
|
|
containerProps={{ className: 'mb-2' }}
|
|
value={spoiler}
|
|
onChange={ev => setSpoiler(ev.target.value)}
|
|
placeholder={formatMessage({ id: 'compose.spoiler.placeholder' })}
|
|
/>
|
|
)}
|
|
<div className="relative">
|
|
<Textarea
|
|
id="body"
|
|
color="blue"
|
|
className="resize-none focus:ring-0"
|
|
placeholder={formatMessage({ id: 'compose.placeholder' })}
|
|
rows={3}
|
|
value={body}
|
|
onChange={ev => setBody(ev.target.value)}
|
|
ref={textareaRef}
|
|
/>
|
|
<Popover open={popoverEmoji} handler={setPopoverEmoji}>
|
|
<PopoverHandler>
|
|
<span className="absolute top-1 right-1 text-gray-600 cursor-pointer">
|
|
<FaFaceLaughBeam />
|
|
</span>
|
|
</PopoverHandler>
|
|
<PopoverContent>
|
|
<Picker data={data} onEmojiSelect={onEmojiSelect} previewPosition="none" set="native" perLine="7" theme="light" />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</form>
|
|
{poll && <PollForm poll={poll} setPoll={setPoll} />}
|
|
<div className="attachments flex gap-2">
|
|
{attachments.map((f, index) => (
|
|
<div className="py-2 relative" key={index}>
|
|
<button className="absolute bg-gray-600 rounded" onClick={() => removeFile(index)}>
|
|
<FaXmark className="text-gray-200" />
|
|
</button>
|
|
<button className="absolute right-0 bg-gray-600 rounded" onClick={() => openDescription(index)}>
|
|
<FaPencil className="text-gray-200" />
|
|
</button>
|
|
<img src={f.preview_url} style={{ width: '80px', height: '80px' }} className="rounded-md" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{attachments.length > 0 && (
|
|
<div>
|
|
<Checkbox id="sensitive" label={formatMessage({ id: 'compose.nsfw' })} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="w-full flex justify-between mt-1 items-center h-5">
|
|
<div className="ml-1 flex gap-3">
|
|
<input type="file" id="file" className="hidden" ref={uploaderRef} onChange={fileChanged} />
|
|
<IconButton variant="text" size="sm" onClick={selectFile} className="text-gray-400 hover:text-gray-600 text-base">
|
|
<FaPaperclip />
|
|
</IconButton>
|
|
<IconButton variant="text" size="sm" onClick={togglePoll} className="text-gray-400 hover:text-gray-600 text-base">
|
|
<FaListCheck />
|
|
</IconButton>
|
|
<Popover open={popoverVisibility} handler={setPopoverVisibility}>
|
|
<PopoverHandler>{visibilityIcon(visibility)}</PopoverHandler>
|
|
<PopoverContent>
|
|
<List>
|
|
<ListItem
|
|
onClick={() => {
|
|
setVisibility('public')
|
|
setPopoverVisibility(false)
|
|
}}
|
|
>
|
|
<FormattedMessage id="compose.visibility.public" />
|
|
</ListItem>
|
|
<ListItem
|
|
onClick={() => {
|
|
setVisibility('unlisted')
|
|
setPopoverVisibility(false)
|
|
}}
|
|
>
|
|
<FormattedMessage id="compose.visibility.unlisted" />
|
|
</ListItem>
|
|
<ListItem
|
|
onClick={() => {
|
|
setVisibility('private')
|
|
setPopoverVisibility(false)
|
|
}}
|
|
>
|
|
<FormattedMessage id="compose.visibility.private" />
|
|
</ListItem>
|
|
<ListItem
|
|
onClick={() => {
|
|
setVisibility('direct')
|
|
setPopoverVisibility(false)
|
|
}}
|
|
>
|
|
<FormattedMessage id="compose.visibility.direct" />
|
|
</ListItem>
|
|
</List>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
{cw ? (
|
|
<IconButton
|
|
variant="text"
|
|
size="sm"
|
|
className="text-blue-400 hover:text-blue-600 leading-4 text-base"
|
|
onClick={() => setCW(false)}
|
|
>
|
|
CW
|
|
</IconButton>
|
|
) : (
|
|
<IconButton
|
|
variant="text"
|
|
size="sm"
|
|
className="text-gray-400 hover:text-gray-600 leading-4 text-base"
|
|
onClick={() => setCW(true)}
|
|
>
|
|
CW
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
<div className="mr-1 flex items-center gap-2">
|
|
<span className="text-gray-400">{remaining}</span>
|
|
<IconButton disabled={loading} onClick={post} variant="text" size="sm">
|
|
<FaPaperPlane className="text-base text-gray-600" />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
<EditMedia media={editMedia} close={closeDescription} client={props.client} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const visibilityIcon = (visibility: 'public' | 'unlisted' | 'private' | 'direct') => {
|
|
switch (visibility) {
|
|
case 'public':
|
|
return (
|
|
<IconButton variant="text" size="sm" className="text-gray-400 hover:text-gray-600 text-base">
|
|
<FaGlobe />
|
|
</IconButton>
|
|
)
|
|
case 'unlisted':
|
|
return (
|
|
<IconButton variant="text" size="sm" className="text-gray-400 hover:text-gray-600 text-base">
|
|
<FaLockOpen />
|
|
</IconButton>
|
|
)
|
|
case 'private':
|
|
return (
|
|
<IconButton variant="text" size="sm" className="text-gray-400 hover:text-gray-600 text-base">
|
|
<FaLock />
|
|
</IconButton>
|
|
)
|
|
case 'direct':
|
|
return (
|
|
<IconButton variant="text" size="sm" className="text-gray-400 hover:text-gray-600 text-base">
|
|
<FaEnvelope />
|
|
</IconButton>
|
|
)
|
|
}
|
|
}
|
|
|
|
const defaultPoll = () => ({
|
|
options: ['', ''],
|
|
expires_in: 86400,
|
|
multiple: false
|
|
})
|
|
|
|
type PollProps = {
|
|
poll: Poll
|
|
setPoll: Dispatch<SetStateAction<Poll>>
|
|
}
|
|
|
|
const PollForm = (props: PollProps) => {
|
|
const { formatMessage } = useIntl()
|
|
|
|
const expiresList = [
|
|
{ label: formatMessage({ id: 'compose.poll.5min' }), value: 300 },
|
|
{ label: formatMessage({ id: 'compose.poll.30min' }), value: 1800 },
|
|
{ label: formatMessage({ id: 'compose.poll.1h' }), value: 3600 },
|
|
{ label: formatMessage({ id: 'compose.poll.6h' }), value: 21600 },
|
|
{ label: formatMessage({ id: 'compose.poll.1d' }), value: 86400 },
|
|
{ label: formatMessage({ id: 'compose.poll.3d' }), value: 259200 },
|
|
{ label: formatMessage({ id: 'compose.poll.7d' }), value: 604800 }
|
|
]
|
|
|
|
const addOption = () => {
|
|
props.setPoll(current =>
|
|
Object.assign({}, current, {
|
|
options: [...current.options, '']
|
|
})
|
|
)
|
|
}
|
|
|
|
const removeOption = (index: number) => {
|
|
props.setPoll(current =>
|
|
Object.assign({}, current, {
|
|
options: current.options.filter((_, i) => i !== index)
|
|
})
|
|
)
|
|
}
|
|
|
|
const updateOption = (index: number, value: string) => {
|
|
props.setPoll(current =>
|
|
Object.assign({}, current, {
|
|
options: current.options.map((original, i) => (i === index ? value : original))
|
|
})
|
|
)
|
|
}
|
|
|
|
const changeMultiple = (ev: ChangeEvent<HTMLInputElement>) => {
|
|
console.log(ev)
|
|
props.setPoll(current =>
|
|
Object.assign({}, current, {
|
|
multiple: ev.target.checked
|
|
})
|
|
)
|
|
}
|
|
|
|
const changeExpire = (value: number) => {
|
|
props.setPoll(current =>
|
|
Object.assign({}, current, {
|
|
expires_in: value
|
|
})
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="pt-1">
|
|
{props.poll.options.map((option, index) => (
|
|
<div className="flex items-center gap-3 py-1" key={index}>
|
|
{props.poll.multiple ? (
|
|
<Checkbox disabled containerProps={{ className: 'p-1' }} />
|
|
) : (
|
|
<Radio disabled containerProps={{ className: 'p-1' }} />
|
|
)}
|
|
<Input
|
|
type="text"
|
|
color="blue"
|
|
value={option}
|
|
onChange={ev => updateOption(index, ev.target.value)}
|
|
containerProps={{ className: 'h-8' }}
|
|
/>
|
|
<FaXmark className="text-gray-400 cursor-pointer" onClick={() => removeOption(index)} />
|
|
</div>
|
|
))}
|
|
<div className="flex gap-3 pt-2">
|
|
<Button onClick={addOption} size="sm" color="indigo" variant="outlined">
|
|
<FormattedMessage id="compose.poll.add" />
|
|
</Button>
|
|
<Select
|
|
id="expires"
|
|
color="blue"
|
|
value={`${props.poll.expires_in}`}
|
|
onChange={e => changeExpire(parseInt(e))}
|
|
containerProps={{ className: 'h-8' }}
|
|
>
|
|
{expiresList.map((expire, index) => (
|
|
<Option value={`${expire.value}`} key={index}>
|
|
{expire.label}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
<div className="mt-2">
|
|
<Switch checked={props.poll.multiple} onChange={v => changeMultiple(v)} label={formatMessage({ id: 'compose.poll.multiple' })} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|