mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-07 12:49:09 +01:00
feat: support more kinds of attachment
This commit is contained in:
parent
73c35b3c11
commit
dba069f0ef
3 changed files with 35 additions and 8 deletions
|
@ -17,8 +17,14 @@ defineEmits<{
|
||||||
<template>
|
<template>
|
||||||
<div relative group>
|
<div relative group>
|
||||||
<status-attachment :attachment="attachment" w-full />
|
<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 absolute right-2 top-2>
|
||||||
<div v-if="removable" i-ri:close-line text-3 @click="$emit('remove')" />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -35,21 +35,23 @@ async function handlePaste(evt: ClipboardEvent) {
|
||||||
if (!files)
|
if (!files)
|
||||||
return
|
return
|
||||||
|
|
||||||
|
evt.preventDefault()
|
||||||
await uploadAttachments(Array.from(files))
|
await uploadAttachments(Array.from(files))
|
||||||
}
|
}
|
||||||
|
|
||||||
async function pickAttachments() {
|
async function pickAttachments() {
|
||||||
if (!globalThis.showOpenFilePicker)
|
if (!globalThis.showOpenFilePicker)
|
||||||
// TODO: Safari don't support it.
|
// TODO: FireFox & Safari don't support it.
|
||||||
return
|
return
|
||||||
|
|
||||||
const handles = await showOpenFilePicker({
|
const handles = await showOpenFilePicker({
|
||||||
multiple: true,
|
multiple: true,
|
||||||
// TODO: add more kinds of files: videos, audios
|
|
||||||
types: [{
|
types: [{
|
||||||
description: 'Images',
|
description: 'Attachments',
|
||||||
accept: {
|
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
|
isUploading = false
|
||||||
}
|
}
|
||||||
|
|
||||||
async function removeAttachment(index: number) {
|
function removeAttachment(index: number) {
|
||||||
attachments.splice(index, 1)
|
attachments.splice(index, 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,7 @@ const aspectRatio = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-if="attachment.type === 'image' || attachment.type === 'gifv'">
|
<template v-if="attachment.type === 'image' ">
|
||||||
<CommonBlurhash
|
<CommonBlurhash
|
||||||
:blurhash="attachment.blurhash"
|
:blurhash="attachment.blurhash"
|
||||||
class="status-attachment-image"
|
class="status-attachment-image"
|
||||||
|
@ -48,6 +48,25 @@ const aspectRatio = computed(() => {
|
||||||
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
|
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
</template>
|
</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>
|
<template v-else>
|
||||||
TODO:
|
TODO:
|
||||||
<pre>{{ attachment }}
|
<pre>{{ attachment }}
|
||||||
|
|
Loading…
Reference in a new issue