mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-02 23:19:57 +00:00
fix: guess attachment type
This commit is contained in:
parent
96775ebcf3
commit
67ebc74321
1 changed files with 21 additions and 3 deletions
|
@ -32,10 +32,28 @@ const objectPosition = computed(() => {
|
||||||
.map(v => v ? `${v * 100}%` : '50%')
|
.map(v => v ? `${v * 100}%` : '50%')
|
||||||
.join(' ')
|
.join(' ')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const typeExtsMap = {
|
||||||
|
video: ['mp4', 'webm', 'mov', 'avi', 'mkv', 'flv', 'wmv', 'mpg', 'mpeg'],
|
||||||
|
audio: ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma'],
|
||||||
|
image: ['jpg', 'jpeg', 'png', 'svg', 'webp', 'bmp'],
|
||||||
|
gifv: ['gifv', 'gif'],
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = $computed(() => {
|
||||||
|
if (attachment.type && attachment.type !== 'unknown')
|
||||||
|
return attachment.type
|
||||||
|
// some server returns unknown type, we need to guess it based on file extension
|
||||||
|
for (const [type, exts] of Object.entries(typeExtsMap)) {
|
||||||
|
if (exts.some(ext => src?.toLowerCase().endsWith(`.${ext}`)))
|
||||||
|
return type
|
||||||
|
}
|
||||||
|
return 'unknown'
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-if="attachment.type === 'video'">
|
<template v-if="type === 'video'">
|
||||||
<video
|
<video
|
||||||
:poster="attachment.previewUrl"
|
:poster="attachment.previewUrl"
|
||||||
controls
|
controls
|
||||||
|
@ -51,7 +69,7 @@ const objectPosition = 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'">
|
<template v-else-if="type === 'gifv'">
|
||||||
<video
|
<video
|
||||||
:poster="attachment.previewUrl"
|
:poster="attachment.previewUrl"
|
||||||
loop
|
loop
|
||||||
|
@ -68,7 +86,7 @@ const objectPosition = 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 === 'audio'">
|
<template v-else-if="type === 'audio'">
|
||||||
<audio controls border="~ base">
|
<audio controls border="~ base">
|
||||||
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
|
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
|
||||||
</audio>
|
</audio>
|
||||||
|
|
Loading…
Reference in a new issue