fix(media-preview): solve image cls

Signed-off-by: Innei <i@innei.in>

Author: Innei

apps/renderer/package.json

@@ -76,6 +76,7 @@
     "path-to-regexp": "8.1.0",
     "posthog-js": "1.163.0",
     "re-resizable": "6.9.18",
+    "react-blurhash": "^0.3.0",
     "react-error-boundary": "4.0.13",
     "react-fast-marquee": "1.6.5",
     "react-hook-form": "7.53.0",

apps/renderer/src/components/ui/markdown/Markdown.tsx

@@ -56,7 +56,7 @@ const HTMLImpl = <A extends keyof JSX.IntrinsicElements = "div">(
 
   useEffect(() => {
     setRemarkOptions((options) => {
-      if (renderInlineStyle === options.renderInlineStyle || noMedia === options.noMedia) {
+      if (JSON.stringify(options) === JSON.stringify({ renderInlineStyle, noMedia })) {
         return options
       }
 

apps/renderer/src/components/ui/media/hooks.tsx

@@ -25,6 +25,6 @@ export const usePreviewMedia = (entryId?: string) => {
         clickOutsideToDismiss: true,
       })
     },
-    [present],
+    [entryId, present],
   )
 }

apps/renderer/src/components/ui/media/preview-media.tsx

@@ -1,6 +1,7 @@
 import type { MediaModel } from "@follow/shared/hono"
 import type { FC } from "react"
 import { Fragment, useCallback, useEffect, useRef, useState } from "react"
+import { Blurhash } from "react-blurhash"
 import { Keyboard, Mousewheel } from "swiper/modules"
 import type { SwiperRef } from "swiper/react"
 import { Swiper, SwiperSlide } from "swiper/react"
@@ -125,6 +126,9 @@ export const PreviewMediaContent: FC<{
             className="h-full w-auto object-contain"
             alt="cover"
             src={src}
+            height={media[0].height}
+            width={media[0].width}
+            blurhash={media[0].blurhash}
           />
         )}
       </Wrapper>
@@ -236,8 +240,9 @@ const FallbackableImage: FC<
     src: string
     containerClassName?: string
     fallbackUrl?: string
+    blurhash?: string
   }
-> = ({ src, onError, fallbackUrl, containerClassName, ...props }) => {
+> = ({ src, onError, fallbackUrl, containerClassName, blurhash, ...props }) => {
   const [currentSrc, setCurrentSrc] = useState(() => replaceImgUrlIfNeed(src))
   const [isAllError, setIsAllError] = useState(false)
 
@@ -281,11 +286,32 @@ const FallbackableImage: FC<
     <div className={cn("flex size-full flex-col", containerClassName)}>
       {isLoading && !isAllError && (
         <div className="center absolute inset-0 size-full">
-          <i className="i-mgc-loading-3-cute-re size-8 animate-spin text-white/80" />
+          {blurhash ? (
+            <Blurhash
+              hash={blurhash}
+              resolutionX={32}
+              resolutionY={32}
+              className="!size-full"
+              style={{ aspectRatio: `${props.width} / ${props.height}` }}
+            />
+          ) : (
+            <i className="i-mgc-loading-3-cute-re size-8 animate-spin text-white/80" />
+          )}
         </div>
       )}
       {!isAllError && (
-        <img src={currentSrc} onLoad={() => setIsLoading(false)} onError={handleError} {...props} />
+        <img
+          src={currentSrc}
+          onLoad={() => setIsLoading(false)}
+          onError={handleError}
+          height={props.height}
+          width={props.width}
+          {...props}
+          className={cn(
+            blurhash && !isLoading ? "duration-500 ease-in-out animate-in fade-in-0" : "",
+            props.className,
+          )}
+        />
       )}
       {isAllError && (
         <div

apps/renderer/src/lib/parse-html.ts

@@ -1,4 +1,5 @@
 import type { Element, Text } from "hast"
+import type { Schema } from "hast-util-sanitize"
 import type { Components } from "hast-util-to-jsx-runtime"
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 import { toText } from "hast-util-to-text"
@@ -32,29 +33,26 @@ export const parseHtml = (
   const file = new VFile(content)
   const { renderInlineStyle = false, noMedia = false } = options || {}
 
+  const rehypeSchema: Schema = { ...defaultSchema }
+
+  if (noMedia) {
+    rehypeSchema.tagNames = rehypeSchema.tagNames?.filter(
+      (tag) => tag !== "img" && tag !== "picture",
+    )
+  } else {
+    rehypeSchema.tagNames = [...rehypeSchema.tagNames!, "video", "style"]
+    rehypeSchema.attributes = {
+      ...rehypeSchema.attributes,
+      "*": renderInlineStyle
+        ? [...rehypeSchema.attributes!["*"], "style", "class"]
+        : rehypeSchema.attributes!["*"],
+      video: ["src", "poster"],
+    }
+  }
+
   const pipeline = unified()
     .use(rehypeParse, { fragment: true })
-    .use(
-      rehypeSanitize,
-      noMedia
-        ? {
-            ...defaultSchema,
-            tagNames: defaultSchema.tagNames?.filter((tag) => tag !== "img" && tag !== "picture"),
-          }
-        : {
-            ...defaultSchema,
-            tagNames: [...defaultSchema.tagNames!, "video", "style"],
-            attributes: {
-              ...defaultSchema.attributes,
-
-              "*": renderInlineStyle
-                ? [...defaultSchema.attributes!["*"], "style", "class"]
-                : defaultSchema.attributes!["*"],
-
-              video: ["src", "poster"],
-            },
-          },
-    )
+    .use(rehypeSanitize, rehypeSchema)
 
     .use(rehypeInferDescriptionMeta)
     .use(rehypeStringify)