fix: guess attachment type

This commit is contained in:
Anthony Fu 2022-12-01 11:15:31 +08:00
parent 96775ebcf3
commit 67ebc74321

View file

@ -32,10 +32,28 @@ const objectPosition = computed(() => {
.map(v => v ? `${v * 100}%` : '50%')
.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>
<template>
<template v-if="attachment.type === 'video'">
<template v-if="type === 'video'">
<video
:poster="attachment.previewUrl"
controls
@ -51,7 +69,7 @@ const objectPosition = computed(() => {
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
<template v-else-if="attachment.type === 'gifv'">
<template v-else-if="type === 'gifv'">
<video
:poster="attachment.previewUrl"
loop
@ -68,7 +86,7 @@ const objectPosition = computed(() => {
<source :src="attachment.url || attachment.previewUrl" type="video/mp4">
</video>
</template>
<template v-else-if="attachment.type === 'audio'">
<template v-else-if="type === 'audio'">
<audio controls border="~ base">
<source :src="attachment.url || attachment.previewUrl" type="audio/mp3">
</audio>