feat: support blurhash

This commit is contained in:
Anthony Fu 2022-11-21 21:21:53 +08:00
parent af2c6d622b
commit 757a93c2a2
8 changed files with 102 additions and 25 deletions

View file

@ -0,0 +1,37 @@
import { decode } from 'blurhash'
import { getDataUrlFromArr } from '~~/composables/utils'
export default defineComponent({
inheritAttrs: false,
props: {
blurhash: {
type: String,
required: true,
},
src: {
type: String,
required: true,
},
},
setup(props, { attrs }) {
const placeholderSrc = ref<string>()
const isLoaded = ref(false)
onMounted(() => {
const img = document.createElement('img')
img.onload = () => {
isLoaded.value = true
}
img.src = props.src
if (props.blurhash) {
const pixels = decode(props.blurhash, 32, 32)
placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
}
})
return () => isLoaded.value || !placeholderSrc.value
? h('img', { ...attrs, src: props.src })
: h('img', { ...attrs, src: placeholderSrc.value })
},
})

View file

@ -4,21 +4,33 @@ import type { Attachment } from 'masto'
const { attachment } = defineProps<{
attachment: Attachment
}>()
const aspectRatio = computed(() => {
if (attachment.meta?.original?.aspect)
return attachment.meta.original.aspect
if (attachment.meta?.small?.aspect)
return attachment.meta.small.aspect
return undefined
})
</script>
<template>
<template v-if="attachment.type === 'image'">
<img
<template v-if="attachment.type === 'image' || attachment.type === 'gifv'">
<CommonBlurhash
:blurhash="attachment.blurhash"
class="status-attachment-image"
:src="attachment.previewUrl!"
:alt="attachment.description!"
border="~ border"
:style="{
aspectRatio,
}"
object-cover rounded-lg
>
/>
</template>
<template v-else>
<div>
TODO: {{ attachment }}
</div>
TODO:
<pre>{{ attachment }}
</pre>
</template>
</template>

View file

@ -27,16 +27,13 @@ const { status } = defineProps<{
.status-media-container-2 {
display: grid;
grid-template-columns: 1fr 1fr;
aspect-ratio: 2/1;
}
.status-media-container-3 {
display: grid;
aspect-ratio: 16/9;
grid-template-columns: 1fr 1fr;
}
.status-media-container-4 {
display: grid;
aspect-ratio: 16/9;
grid-template-columns: 1fr 1fr;
}
</style>

View file

@ -36,7 +36,7 @@ export function contentToVNode(
handle: (node: Element) => Element | undefined | null | void = defaultHandle,
customEmojis: Record<string, Emoji> = {},
): VNode {
content = content.replace(/:([\w-]+?):/g, (_, name) => {
content = content.trim().replace(/:([\w-]+?):/g, (_, name) => {
const emoji = customEmojis[name]
if (emoji)
return `<img src="${emoji.url}" alt="${name}" class="custom-emoji" />`

16
composables/utils.ts Normal file
View file

@ -0,0 +1,16 @@
export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
if (typeof w === 'undefined' || typeof h === 'undefined')
w = h = Math.sqrt(arr.length / 4)
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')!
canvas.width = w
canvas.height = h
const imgData = ctx.createImageData(w, h)
imgData.data.set(arr)
ctx.putImageData(imgData, 0, 0)
return canvas.toDataURL()
}

View file

@ -23,6 +23,7 @@
"@types/sanitize-html": "^2.6.2",
"@unocss/nuxt": "^0.46.5",
"@vueuse/nuxt": "^9.5.0",
"blurhash": "^2.0.4",
"eslint": "^8.27.0",
"form-data": "^4.0.0",
"fs-extra": "^10.1.0",

View file

@ -8,21 +8,29 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
</script>
<template>
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 />
</template>
<StatusDetails :status="status" border="t border" pt-4 />
<div border="t border" p6 flex gap-4>
<img :src="status?.account.avatar" rounded w-10 h-10 bg-gray:10>
<PublishWidget
w-full
:draft-key="`reply-${id}`"
:placeholder="`Reply to ${status?.account?.displayName || status?.account?.acct || 'this thread'}`"
:in-reply-to-id="id"
/>
</div>
<template v-if="status">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 />
</template>
<StatusDetails :status="status" border="t border" pt-4 />
<div border="t border" p6 flex gap-4>
<img :src="status?.account.avatar" rounded w-10 h-10 bg-gray:10>
<PublishWidget
w-full
:draft-key="`reply-${id}`"
:placeholder="`Reply to ${status?.account?.displayName || status?.account?.acct || 'this thread'}`"
:in-reply-to-id="id"
/>
</div>
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 />
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 />
</template>
</template>
<template>
<div>
Status not found
</div>
</template>
</template>

View file

@ -12,6 +12,7 @@ specifiers:
'@types/sanitize-html': ^2.6.2
'@unocss/nuxt': ^0.46.5
'@vueuse/nuxt': ^9.5.0
blurhash: ^2.0.4
eslint: ^8.27.0
form-data: ^4.0.0
fs-extra: ^10.1.0
@ -37,6 +38,7 @@ devDependencies:
'@types/sanitize-html': 2.6.2
'@unocss/nuxt': 0.46.5
'@vueuse/nuxt': 9.5.0_nuxt@3.0.0
blurhash: 2.0.4
eslint: 8.27.0
form-data: 4.0.0
fs-extra: 10.1.0
@ -2088,6 +2090,10 @@ packages:
readable-stream: 3.6.0
dev: true
/blurhash/2.0.4:
resolution: {integrity: sha512-r/As72u2FbucLoK5NTegM/GucxJc3d8GvHc4ngo13IO/nt2HU4gONxNLq1XPN6EM/V8Y9URIa7PcSz2RZu553A==}
dev: true
/boolbase/1.0.0:
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
dev: true