elk/components/publish/PublishWidget.vue

141 lines
3.2 KiB
Vue
Raw Normal View History

2022-11-21 06:55:31 +00:00
<script setup lang="ts">
2022-11-23 17:17:54 +00:00
import type { Attachment, CreateStatusParams, CreateStatusParamsWithStatus } from 'masto'
2022-11-21 06:55:31 +00:00
const {
draftKey,
placeholder = 'What is on your mind?',
inReplyToId,
} = defineProps<{
draftKey: string
placeholder?: string
inReplyToId?: string
}>()
let isSending = $ref(false)
2022-11-23 13:06:27 +00:00
const storageKey = `elk-draft-${draftKey}`
2022-11-21 06:55:31 +00:00
function getDefaultStatus(): CreateStatusParamsWithStatus {
return {
status: '',
inReplyToId,
}
}
2022-11-23 17:17:54 +00:00
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
await uploadAttachments(Array.from(files))
}
async function pickAttachments() {
if (!globalThis.showOpenFilePicker)
// TODO: Safari don't support it.
return
const handles = await showOpenFilePicker({
multiple: true,
// TODO: add more kinds of files: videos, audios
types: [{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.heic'],
},
}],
})
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
}
async function removeAttachment(index: number) {
attachments.splice(index, 1)
}
2022-11-21 06:55:31 +00:00
async function publish() {
try {
isSending = true
2022-11-23 17:17:54 +00:00
await masto.statuses.create(status)
draft = getDefaultStatus()
attachments = []
2022-11-21 06:55:31 +00:00
}
finally {
isSending = false
}
}
onUnmounted(() => {
2022-11-23 17:17:54 +00:00
if (!draft.status) {
// @ts-expect-error draft cannot be undefined
draft = undefined
2022-11-21 06:55:31 +00:00
nextTick(() => {
localStorage.removeItem(storageKey)
})
}
})
</script>
<template>
<div
2022-11-23 17:17:54 +00:00
flex flex-col gap-3
2022-11-21 06:55:31 +00:00
:class="isSending ? 'pointer-events-none' : ''"
>
<textarea
v-model="draft.status"
:placeholder="placeholder"
p2 border-rounded w-full h-40
2022-11-23 02:16:31 +00:00
bg-gray:10 outline-none border="~ base"
2022-11-23 17:17:54 +00:00
@paste="handlePaste"
2022-11-21 06:55:31 +00:00
/>
2022-11-23 17:17:54 +00:00
<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>
2022-11-21 06:55:31 +00:00
<div flex justify-end>
<button
2022-11-23 03:06:56 +00:00
btn-solid
2022-11-23 17:17:54 +00:00
:disabled="isUploading || (attachments.length === 0 && !draft.status)"
2022-11-21 06:55:31 +00:00
@click="publish"
>
Publish!
</button>
</div>
</div>
</template>