143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { Attachment, CreateStatusParams, CreateStatusParamsWithStatus } from 'masto'
|
|
|
|
const {
|
|
draftKey,
|
|
placeholder = 'What is on your mind?',
|
|
inReplyToId,
|
|
} = defineProps<{
|
|
draftKey: string
|
|
placeholder?: string
|
|
inReplyToId?: string
|
|
}>()
|
|
|
|
let isSending = $ref(false)
|
|
const storageKey = `elk-draft-${draftKey}`
|
|
function getDefaultStatus(): CreateStatusParamsWithStatus {
|
|
return {
|
|
status: '',
|
|
inReplyToId,
|
|
}
|
|
}
|
|
let draft = $(useLocalStorage<CreateStatusParamsWithStatus>(storageKey, getDefaultStatus()))
|
|
let attachments = $(useLocalStorage<Attachment[]>(`${storageKey}-attachments`, []))
|
|
const status = $computed(() => {
|
|
return {
|
|
...draft,
|
|
mediaIds: attachments.map(a => a.id),
|
|
} as CreateStatusParams
|
|
})
|
|
|
|
let isUploading = $ref<boolean>(false)
|
|
|
|
async function handlePaste(evt: ClipboardEvent) {
|
|
const files = evt.clipboardData?.files
|
|
if (!files)
|
|
return
|
|
|
|
evt.preventDefault()
|
|
await uploadAttachments(Array.from(files))
|
|
}
|
|
|
|
async function pickAttachments() {
|
|
if (!globalThis.showOpenFilePicker)
|
|
// TODO: FireFox & Safari don't support it.
|
|
return
|
|
|
|
const handles = await showOpenFilePicker({
|
|
multiple: true,
|
|
types: [{
|
|
description: 'Attachments',
|
|
accept: {
|
|
'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.heic', '.heif'],
|
|
'video/*': ['.webm', '.mp4', '.m4v', '.mov', '.ogv', '.3gp'],
|
|
'audio/*': ['.mp3', '.ogg', '.oga', '.wav', '.flac', '.opus', '.aac', '.m4a', '.3gp', '.wma'],
|
|
},
|
|
}],
|
|
})
|
|
const files = await Promise.all(handles.map(handle => handle.getFile()))
|
|
await uploadAttachments(files)
|
|
}
|
|
|
|
async function uploadAttachments(files: File[]) {
|
|
isUploading = true
|
|
for (const file of files) {
|
|
const attachment = await masto.mediaAttachments.create({
|
|
file,
|
|
})
|
|
attachments.push(attachment)
|
|
}
|
|
isUploading = false
|
|
}
|
|
|
|
function removeAttachment(index: number) {
|
|
attachments.splice(index, 1)
|
|
}
|
|
|
|
async function publish() {
|
|
try {
|
|
isSending = true
|
|
await masto.statuses.create(status)
|
|
draft = getDefaultStatus()
|
|
attachments = []
|
|
}
|
|
finally {
|
|
isSending = false
|
|
}
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
if (!draft.status) {
|
|
// @ts-expect-error draft cannot be undefined
|
|
draft = undefined
|
|
nextTick(() => {
|
|
localStorage.removeItem(storageKey)
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
flex flex-col gap-3
|
|
:class="isSending ? 'pointer-events-none' : ''"
|
|
>
|
|
<textarea
|
|
v-model="draft.status"
|
|
:placeholder="placeholder"
|
|
p2 border-rounded w-full h-40
|
|
bg-gray:10 outline-none border="~ base"
|
|
@paste="handlePaste"
|
|
/>
|
|
|
|
<div flex="~" gap-2>
|
|
<button hover:bg-active p2 rounded-5 @click="pickAttachments">
|
|
<div i-ri:upload-line />
|
|
</button>
|
|
</div>
|
|
|
|
<div flex="~ col gap-2" max-h-50vh overflow-auto>
|
|
<publish-attachment
|
|
v-for="(att, idx) in attachments" :key="att.id"
|
|
:attachment="att"
|
|
@remove="removeAttachment(idx)"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="isUploading" flex gap-2 justify-end items-center>
|
|
<div op50 i-ri:loader-2-fill animate-spin text-2xl />
|
|
Uploading...
|
|
</div>
|
|
|
|
<div flex justify-end>
|
|
<button
|
|
btn-solid
|
|
:disabled="isUploading || (attachments.length === 0 && !draft.status)"
|
|
@click="publish"
|
|
>
|
|
Publish!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|