feat(image): blurhash for entry media preview, and other adjustment

Signed-off-by: Innei <i@innei.in>
RSSNext · Oct 1, 2024 · b688848 · b688848
1 parent 34f462f
commit b688848
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 14 deletions.
diff --git a/apps/renderer/src/components/ui/input/Input.tsx b/apps/renderer/src/components/ui/input/Input.tsx
@@ -18,11 +18,11 @@ export const Input = forwardRef<
       ref={ref}
       className={cn(
         "min-w-0 flex-auto appearance-none rounded-lg text-sm",
-        "bg-theme-background px-3 py-[calc(theme(spacing.2)-1px)] placeholder:text-zinc-400 dark:bg-zinc-700/[0.15]",
+        "bg-theme-background px-3 py-[calc(theme(spacing.2)-1px)]",
         "ring-accent/20 duration-200 focus:border-accent/80 focus:outline-none focus:ring-2",
         "focus:!bg-accent/5",
         "border border-border",
-        "dark:text-zinc-200 dark:placeholder:text-zinc-500",
+        "placeholder:text-theme-placeholder-text dark:bg-zinc-700/[0.15] dark:text-zinc-200",
         "hover:border-accent/60",
         props.type === "password" ? "font-mono placeholder:font-sans" : "font-sans",
         "w-full",

diff --git a/apps/renderer/src/components/ui/input/TextArea.tsx b/apps/renderer/src/components/ui/input/TextArea.tsx
@@ -59,7 +59,7 @@ export const TextArea = forwardRef<
         "border-transparent",
         isFocus && "border-accent/80 ring-2",
 
-        "dark:text-zinc-200 dark:placeholder:text-zinc-500",
+        "placeholder:text-theme-placeholder-text dark:text-zinc-200",
         wrapperClassName,
       )}
       onMouseMove={handleMouseMove}

diff --git a/apps/renderer/src/components/ui/media.tsx b/apps/renderer/src/components/ui/media.tsx
@@ -1,7 +1,7 @@
 import { useForceUpdate } from "framer-motion"
 import type { FC, ImgHTMLAttributes, VideoHTMLAttributes } from "react"
 import { createContext, memo, useContext, useMemo, useState } from "react"
-import { Blurhash } from "react-blurhash"
+import { Blurhash, BlurhashCanvas } from "react-blurhash"
 import { useEventCallback } from "usehooks-ts"
 
 import { nextFrame } from "~/lib/dom"
@@ -134,8 +134,9 @@ const MediaImpl: FC<MediaProps> = ({
             onError={errorHandle}
             className={cn(
               "size-full object-contain",
-              "bg-gray-200 duration-200 dark:bg-neutral-800",
+              // "bg-gray-200 dark:bg-neutral-800",
               popper && "cursor-zoom-in",
+              "duration-200",
               mediaLoadState === "loaded" ? "opacity-100" : "opacity-0",
               "!my-0",
               mediaContainerClassName,
@@ -196,11 +197,25 @@ const MediaImpl: FC<MediaProps> = ({
       )
     } else {
       return (
-        // TODO blurhash
-        <div
-          className={cn("rounded bg-zinc-100 dark:bg-neutral-900", className)}
-          style={props.style}
-        />
+        <div className={cn("relative rounded", className)} style={props.style}>
+          <span
+            className={cn(
+              "relative inline-block max-w-full bg-theme-placeholder-image",
+              mediaContainerClassName,
+            )}
+            style={{
+              aspectRatio:
+                props.height && props.width ? `${props.width} / ${props.height}` : undefined,
+              width: props.width ? `${props.width}px` : "100%",
+            }}
+          >
+            {props.blurhash && (
+              <span className="absolute inset-0 overflow-hidden rounded">
+                <BlurhashCanvas hash={props.blurhash} className="size-full" />
+              </span>
+            )}
+          </span>
+        </div>
       )
     }
   }

diff --git a/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx b/apps/renderer/src/modules/entry-column/Items/social-media-item.tsx
@@ -137,7 +137,8 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
                   src={media.url}
                   type={media.type}
                   previewImageUrl={media.preview_image_url}
-                  className="size-28 shrink-0 data-[state=loading]:!bg-zinc-200 dark:data-[state=loading]:!bg-neutral-700"
+                  blurhash={media.blurhash}
+                  className="size-28 shrink-0 data-[state=loading]:!bg-theme-placeholder-image"
                   loading="lazy"
                   proxy={proxySize}
                   onClick={(e) => {
@@ -146,6 +147,7 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
                       mediaList.map((m) => ({
                         url: m.url,
                         type: m.type,
+                        blurhash: m.blurhash,
                         fallbackUrl:
                           m.preview_image_url ?? getImageProxyUrl({ url: m.url, ...proxySize }),
                       })),

diff --git a/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx b/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -8,6 +8,7 @@ import { Button } from "~/components/ui/button"
 import { RelativeTime } from "~/components/ui/datetime"
 import { Media } from "~/components/ui/media"
 import { useModalStack } from "~/components/ui/modal"
+import { EllipsisHorizontalTextWithTooltip } from "~/components/ui/typography"
 import { FEED_COLLECTION_LIST } from "~/constants"
 import { useAsRead } from "~/hooks/biz/useAsRead"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
@@ -89,7 +90,9 @@ export function ListItem({
             entry.collections && "text-zinc-600 dark:text-zinc-500",
           )}
         >
-          <span className="truncate">{getPreferredTitle(feed)}</span>
+          <EllipsisHorizontalTextWithTooltip className="truncate">
+            {getPreferredTitle(feed)}
+          </EllipsisHorizontalTextWithTooltip>
           <span>·</span>
           <span className="shrink-0">{!!displayTime && <RelativeTime date={displayTime} />}</span>
         </div>
@@ -186,12 +189,16 @@ export function ListItem({
           src={entry.entries.media[0].url}
           type={entry.entries.media[0].type}
           previewImageUrl={entry.entries.media[0].preview_image_url}
-          className="ml-2 size-20 shrink-0"
+          className="center ml-2 flex size-20 max-w-20 shrink-0 rounded"
+          mediaContainerClassName={"w-auto h-auto rounded"}
           loading="lazy"
           proxy={{
             width: 160,
             height: 160,
           }}
+          height={entry.entries.media[0].height}
+          width={entry.entries.media[0].width}
+          blurhash={entry.entries.media[0].blurhash}
         />
       )}
     </div>

diff --git a/apps/renderer/src/modules/entry-content/components/EntryReadHistory.tsx b/apps/renderer/src/modules/entry-content/components/EntryReadHistory.tsx
@@ -154,7 +154,7 @@ const EntryUser: Component<{
           }}
         >
           <Avatar className="aspect-square size-7 border border-border ring-1 ring-background">
-            <AvatarImage src={user?.image || undefined} />
+            <AvatarImage src={user?.image || undefined} className="bg-theme-placeholder-image" />
             <AvatarFallback>{user.name?.slice(0, 2)}</AvatarFallback>
           </Avatar>
         </m.button>

diff --git a/apps/renderer/src/styles/colors.css b/apps/renderer/src/styles/colors.css
@@ -20,6 +20,8 @@
   --fo-text-primary-hover: 0 0% 14.9%;
 
   --fo-button-hover: theme(colors.zinc.500/0.1);
+  --fo-image-placeholder: theme(colors.zinc.100);
+  --fo-text-placeholder: theme(colors.zinc.400);
 }
 
 [data-theme="dark"] {
@@ -44,6 +46,8 @@
   --fo-text-primary-hover: 240 4.9% 83.9%;
 
   --fo-button-hover: theme(colors.neutral.400/0.15);
+  --fo-image-placeholder: theme(colors.neutral.800);
+  --fo-text-placeholder: theme(colors.zinc.500);
 }
 
 [data-theme="light"] {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -108,6 +108,11 @@ export default resolveConfig({
           button: {
             hover: "var(--fo-button-hover)",
           },
+
+          placeholder: {
+            text: "var(--fo-text-placeholder)",
+            image: "var(--fo-image-placeholder)",
+          },
         },
       },
       borderRadius: {