fix(ui): fix LQIP aspect ratio

Author: ncarlier

pkg/thumbhash/thumbhash.go

@@ -19,10 +19,10 @@ func GetThumbhash(r io.Reader) (string, error) {
 	if err != nil {
 		return "", err
 	}
-	width := img.Bounds().Size().X
+	size := img.Bounds().Size()
 
 	binHash := thumbhash.EncodeImage(img)
 	hash := base64.StdEncoding.EncodeToString(binHash)
 
-	return fmt.Sprintf("%d|%s", width, hash), nil
+	return fmt.Sprintf("%dx%d|%s", size.X, size.Y, hash), nil
 }

ui/src/components/LazyImage.tsx

@@ -16,6 +16,7 @@ export const LazyImage: FC<ImgHTMLAttributes<HTMLImageElement> & Props> = ({thum
   const [loaded, setLoaded] = useState(false)
   const [data, setData] = useState('')
   const [width, setWidth] = useState('0px')
+  const [aspectRatio, setAspectRatio] = useState<number>()
   const imgRef = useRef<HTMLImageElement>(null)
   const lqipRef = useRef<HTMLImageElement>(null)
   useEffect(() => {
@@ -28,9 +29,13 @@ export const LazyImage: FC<ImgHTMLAttributes<HTMLImageElement> & Props> = ({thum
     if (!thumbhash) {
       return
     }
-    const [width, hash] = thumbhash.split('|')
+    const [size, hash] = thumbhash.split('|')
+    const [width, height] = size.split('x')
     setWidth(`${width}px`)
     try {
+      if (height) {
+        setAspectRatio(parseInt(width) / parseInt(height))
+      }
       setData(thumbHashToDataURL(base64ToBinary(hash)))
     } catch (err) {
       console.error('unable to decode thumbhash', err)
@@ -49,6 +54,7 @@ export const LazyImage: FC<ImgHTMLAttributes<HTMLImageElement> & Props> = ({thum
         src={data}
         aria-hidden="true"
         onAnimationEnd={hideFn}
+        style={{ aspectRatio }}
         className={classNames(styles.lqip, loaded ? styles.loaded : null)}
       />
       <img