feat: add support for thumbhash

package-lock.json

@@ -74,6 +74,7 @@
         "sonner": "^2.0.5",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
+        "thumbhash": "^0.1.1",
         "tippy.js": "^6.3.7",
         "uri-templates": "^0.2.0",
         "vaul": "^1.1.2",
@@ -11813,6 +11814,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/thumbhash": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
+      "integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.10",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",

package.json

@@ -84,6 +84,7 @@
     "sonner": "^2.0.5",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
+    "thumbhash": "^0.1.1",
     "tippy.js": "^6.3.7",
     "uri-templates": "^0.2.0",
     "vaul": "^1.1.2",

src/components/Collapsible/index.tsx

@@ -57,8 +57,8 @@ export default function Collapsible({
     >
       {children}
       {shouldCollapse && !expanded && (
-        <div className="absolute bottom-0 h-40 w-full bg-gradient-to-b from-transparent to-background/90 flex items-end justify-center pb-4">
-          <div className="bg-background rounded-md">
+        <div className="absolute bottom-0 h-40 w-full z-10 bg-gradient-to-b from-transparent to-background/90 flex items-end justify-center pb-4">
+          <div className="bg-background rounded-lg">
             <Button
               className="bg-foreground hover:bg-foreground/80"
               onClick={(e) => {

src/components/Image/index.tsx

@@ -5,9 +5,10 @@ import { TImetaInfo } from '@/types'
 import { decode } from 'blurhash'
 import { ImageOff } from 'lucide-react'
 import { HTMLAttributes, useEffect, useMemo, useRef, useState } from 'react'
+import { thumbHashToDataURL } from 'thumbhash'
 
 export default function Image({
-  image: { url, blurHash, pubkey, dim },
+  image: { url, blurHash, thumbHash, pubkey, dim },
   alt,
   className = '',
   classNames = {},
@@ -73,20 +74,39 @@ export default function Image({
 
   return (
     <div className={cn('relative overflow-hidden', classNames.wrapper)} {...props}>
+      {/* Spacer: transparent image to maintain dimensions when image is loading */}
+      {isLoading && dim?.width && dim?.height && (
+        <img
+          src={`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${dim.width}' height='${dim.height}'%3E%3C/svg%3E`}
+          className={cn(
+            'object-cover rounded-xl transition-opacity pointer-events-none w-full h-full',
+            className
+          )}
+          alt=""
+        />
+      )}
       {displaySkeleton && (
         <div className="absolute inset-0 z-10">
-          {blurHash ? (
+          {thumbHash ? (
+            <ThumbHashPlaceholder
+              thumbHash={thumbHash}
+              className={cn(
+                'w-full h-full transition-opacity rounded-xl',
+                isLoading ? 'opacity-100' : 'opacity-0'
+              )}
+            />
+          ) : blurHash ? (
             <BlurHashCanvas
               blurHash={blurHash}
               className={cn(
-                'absolute inset-0 transition-opacity rounded-xl',
+                'w-full h-full transition-opacity rounded-xl',
                 isLoading ? 'opacity-100' : 'opacity-0'
               )}
             />
           ) : (
             <Skeleton
               className={cn(
-                'absolute inset-0 transition-opacity rounded-xl',
+                'w-full h-full transition-opacity rounded-xl',
                 isLoading ? 'opacity-100' : 'opacity-0',
                 classNames.skeleton
               )}
@@ -104,12 +124,10 @@ export default function Image({
           onLoad={handleLoad}
           onError={handleError}
           className={cn(
-            'object-cover rounded-xl w-full h-full transition-opacity pointer-events-none',
-            isLoading ? 'opacity-0' : 'opacity-100',
+            'object-cover rounded-xl transition-opacity pointer-events-none w-full h-full',
+            isLoading ? 'opacity-0 absolute inset-0' : '',
             className
           )}
-          width={dim?.width}
-          height={dim?.height}
         />
       )}
       {hasError &&
@@ -178,3 +196,35 @@ function BlurHashCanvas({ blurHash, className = '' }: { blurHash: string; classN
     />
   )
 }
+
+function ThumbHashPlaceholder({
+  thumbHash,
+  className = ''
+}: {
+  thumbHash: Uint8Array
+  className?: string
+}) {
+  const dataUrl = useMemo(() => {
+    if (!thumbHash) return null
+    try {
+      return thumbHashToDataURL(thumbHash)
+    } catch (error) {
+      console.warn('failed to decode thumbhash:', error)
+      return null
+    }
+  }, [thumbHash])
+
+  if (!dataUrl) return null
+
+  return (
+    <div
+      className={cn('w-full h-full object-cover rounded-lg', className)}
+      style={{
+        backgroundImage: `url(${dataUrl})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        filter: 'blur(1px)'
+      }}
+    />
+  )
+}

src/lib/tag.ts

@@ -1,4 +1,5 @@
 import { TEmoji, TImetaInfo } from '@/types'
+import { base64 } from '@scure/base'
 import { isBlurhashValid } from 'blurhash'
 import { nip19 } from 'nostr-tools'
 import { isValidPubkey } from './pubkey'
@@ -49,28 +50,40 @@ export function generateBech32IdFromATag(tag: string[]) {
 
 export function getImetaInfoFromImetaTag(tag: string[], pubkey?: string): TImetaInfo | null {
   if (tag[0] !== 'imeta') return null
-  const urlItem = tag.find((item) => item.startsWith('url '))
-  const url = urlItem?.slice(4)
-  if (!url) return null
+  const imeta: Partial<TImetaInfo> = { pubkey }
 
-  const imeta: TImetaInfo = { url, pubkey }
-  const blurHashItem = tag.find((item) => item.startsWith('blurhash '))
-  const blurHash = blurHashItem?.slice(9)
-  if (blurHash) {
-    const validRes = isBlurhashValid(blurHash)
-    if (validRes.result) {
-      imeta.blurHash = blurHash
+  for (let i = 1; i < tag.length; i++) {
+    const [k, v] = tag[i].split(' ')
+    switch (k) {
+      case 'url':
+        imeta.url = v
+        break
+      case 'thumbhash':
+        try {
+          imeta.thumbHash = base64.decode(v)
+        } catch {
+          /***/
+        }
+        break
+      case 'blurhash': {
+        const validRes = isBlurhashValid(v)
+        if (validRes.result) {
+          imeta.blurHash = v
+        }
+        break
+      }
+      case 'dim': {
+        const [width, height] = v.split('x').map(Number)
+        if (width && height) {
+          imeta.dim = { width, height }
+        }
+        break
+      }
     }
   }
-  const dimItem = tag.find((item) => item.startsWith('dim '))
-  const dim = dimItem?.slice(4)
-  if (dim) {
-    const [width, height] = dim.split('x').map(Number)
-    if (width && height) {
-      imeta.dim = { width, height }
-    }
-  }
-  return imeta
+
+  if (!imeta.url) return null
+  return imeta as TImetaInfo
 }
 
 export function getPubkeysFromPTags(tags: string[][]) {

src/types/index.d.ts

@@ -115,6 +115,7 @@ export type TLanguage = 'en' | 'zh' | 'pl'
 export type TImetaInfo = {
   url: string
   blurHash?: string
+  thumbHash?: Uint8Array
   dim?: { width: number; height: number }
   pubkey?: string
 }