feat: support blurhash

components/common/Blurhash.ts

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

components/status/StatusAttachment.vue

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

components/status/StatusMedia.vue

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