fix: media preview image fixed size

Signed-off-by: Innei <[email protected]>
RSSNext · Sep 30, 2024 · 14c7028 · 14c7028
1 parent 553f71b
commit 14c7028
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 27 deletions.
diff --git a/apps/renderer/src/components/ui/media.tsx b/apps/renderer/src/components/ui/media.tsx
@@ -30,6 +30,7 @@ export type MediaProps = BaseProps &
         type: "photo"
         previewImageUrl?: string
         cacheDimensions?: boolean
+        blurhash?: string
       })
     | (VideoHTMLAttributes<HTMLVideoElement> & {
         proxy?: {
@@ -95,6 +96,9 @@ const MediaImpl: FC<MediaProps> = ({
             url: src,
             type,
             fallbackUrl: imgSrc,
+            blurhash: "blurhash" in props ? props.blurhash : undefined,
+            width: Number.parseInt(props.width as string),
+            height: Number.parseInt(props.height as string),
           },
         ],
         0,

diff --git a/apps/renderer/src/components/ui/media/preview-media.tsx b/apps/renderer/src/components/ui/media/preview-media.tsx
@@ -18,6 +18,7 @@ import { EntryContent } from "~/modules/entry-content"
 import { ActionButton, MotionButtonBase } from "../button"
 import { microReboundPreset } from "../constants/spring"
 import { useCurrentModal } from "../modal"
+import { RootPortal } from "../portal"
 import { VideoPlayer } from "./VideoPlayer"
 
 const Wrapper: Component<{
@@ -44,33 +45,35 @@ const Wrapper: Component<{
           )}
         >
           {children}
-          <div
-            className="absolute bottom-4 right-4 z-[99] flex gap-3 text-white/70 [&_button]:hover:text-white"
-            onClick={stopPropagation}
-          >
-            {showActions && (
-              <Fragment>
-                {!!window.electron && (
+          <RootPortal>
+            <div
+              className="fixed bottom-4 right-4 z-[99] flex gap-3 text-white/70 [&_button]:hover:text-white"
+              onClick={stopPropagation}
+            >
+              {showActions && (
+                <Fragment>
+                  {!!window.electron && (
+                    <ActionButton
+                      tooltip={t("external:header.download")}
+                      onClick={() => {
+                        tipcClient?.download(src)
+                      }}
+                    >
+                      <i className="i-mgc-download-2-cute-re" />
+                    </ActionButton>
+                  )}
                   <ActionButton
-                    tooltip={t("external:header.download")}
+                    tooltip={t(COPY_MAP.OpenInBrowser())}
                     onClick={() => {
-                      tipcClient?.download(src)
+                      window.open(src)
                     }}
                   >
-                    <i className="i-mgc-download-2-cute-re" />
+                    <i className="i-mgc-external-link-cute-re" />
                   </ActionButton>
-                )}
-                <ActionButton
-                  tooltip={t(COPY_MAP.OpenInBrowser())}
-                  onClick={() => {
-                    window.open(src)
-                  }}
-                >
-                  <i className="i-mgc-external-link-cute-re" />
-                </ActionButton>
-              </Fragment>
-            )}
-          </div>
+                </Fragment>
+              )}
+            </div>
+          </RootPortal>
         </div>
         {entryId && (
           <div
@@ -228,6 +231,9 @@ export const PreviewMediaContent: FC<{
                 alt="cover"
                 src={med.url}
                 loading="lazy"
+                height={med.height}
+                width={med.width}
+                blurhash={med.blurhash}
               />
             )}
           </SwiperSlide>
@@ -285,7 +291,7 @@ const FallbackableImage: FC<
   }, [currentSrc, currentState, fallbackUrl, src])
 
   return (
-    <div className={cn("flex size-full flex-col", containerClassName)}>
+    <div className={cn("center flex size-full flex-col", containerClassName)}>
       {isLoading && !isAllError && (
         <div className="center absolute inset-0 size-full">
           {blurhash ? (
@@ -309,6 +315,11 @@ const FallbackableImage: FC<
             blurhash && !isLoading ? "duration-500 ease-in-out animate-in fade-in-0" : "",
             props.className,
           )}
+          style={{
+            maxHeight: `min(100%, ${Number.parseInt(props.height as string)}px)`,
+            maxWidth: `min(100%, ${Number.parseInt(props.width as string)}px)`,
+            ...props.style,
+          }}
         />
       )}
       {isAllError && (
@@ -344,7 +355,7 @@ const FallbackableImage: FC<
       )}
 
       {currentState === "fallback" && (
-        <div className="mt-4 text-center text-xs">
+        <div className="mt-4 text-center text-xs text-white/60">
           <span>
             This image is preview in low quality, because the original image is not available.
           </span>

diff --git a/apps/renderer/src/modules/entry-content/components/EntryReadHistory.tsx b/apps/renderer/src/modules/entry-content/components/EntryReadHistory.tsx
@@ -54,12 +54,12 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) =>
             <button
               type="button"
               style={{
-                right: `${LIMIT * 8}px`,
+                right: `${(LIMIT - 1) * 8}px`,
                 zIndex: 11,
               }}
-              className="no-drag-region relative flex size-7 items-center justify-center rounded-full border border-border bg-muted ring ring-background"
+              className="no-drag-region relative flex size-7 items-center justify-center rounded-full border border-border bg-muted ring-2 ring-background"
             >
-              <span className="text-[10px] font-medium text-muted-foreground">
+              <span className="text-[10px] font-medium tabular-nums text-muted-foreground">
                 +{Math.min(totalCount - LIMIT, 99)}
               </span>
             </button>