feat: support more kinds of attachment

This commit is contained in:
三咲智子 2022-11-24 12:05:13 +08:00
parent 73c35b3c11
commit dba069f0ef
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
3 changed files with 35 additions and 8 deletions

View file

@ -17,8 +17,14 @@ defineEmits<{
<template>
<div relative group>
<status-attachment :attachment="attachment" w-full />
<div absolute right-2 top-2 hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer op-0 group-hover:op-100>
<div v-if="removable" i-ri:close-line text-3 @click="$emit('remove')" />
<div absolute right-2 top-2>
<div
v-if="removable"
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer op-0 group-hover:op-100
@click="$emit('remove')"
>
<div i-ri:close-line text-3 />
</div>
</div>
</div>
</template>

View file

@ -35,21 +35,23 @@ async function handlePaste(evt: ClipboardEvent) {
if (!files)
return
evt.preventDefault()
await uploadAttachments(Array.from(files))
}
async function pickAttachments() {
if (!globalThis.showOpenFilePicker)
// TODO: Safari don't support it.
// TODO: FireFox & Safari don't support it.
return
const handles = await showOpenFilePicker({
multiple: true,
// TODO: add more kinds of files: videos, audios
types: [{
description: 'Images',
description: 'Attachments',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp', '.avif', '.heic'],
'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'],
},
}],
})
@ -68,7 +70,7 @@ async function uploadAttachments(files: File[]) {
isUploading = false
}
async function removeAttachment(index: number) {
function removeAttachment(index: number) {
attachments.splice(index, 1)
}

View file

@ -22,7 +22,7 @@ const aspectRatio = computed(() => {
</script>
<template>
<template v-if="attachment.type === 'image' || attachment.type === 'gifv'">
<template v-if="attachment.type === 'image' ">
<CommonBlurhash
:blurhash="attachment.blurhash"
class="status-attachment-image"
@ -48,6 +48,25 @@ const aspectRatio = computed(() => {
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
<template v-else-if="attachment.type === 'gifv'">
<video
:poster="attachment.previewUrl"
loop
autoplay
border="~ base"
object-cover
:style="{
aspectRatio,
}"
>
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
<template v-else-if="attachment.type === 'audio'">
<audio controls border="~ base">
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
</audio>
</template>
<template v-else>
TODO:
<pre>{{ attachment }}