Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-11-03 07:29:59 +00:00
Code Issues Wiki Activity

feat: support more kinds of attachment

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/publish/PublishAttachment.vue
View file

@ -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>

12
components/publish/PublishWidget.vue
View file

@ -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)
} }

21
components/status/StatusAttachment.vue
View file

@ -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 }}