From 4ffc026fb9e9ddc8ccff6f09007ce310cdc57307 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Sun, 15 Jun 2025 01:50:06 +0800
Subject: [PATCH] refactor: improve ThumbnailImage layout

---
 .../entry-list/templates/EntryNormalItem.tsx  | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx b/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
index ecb403062..7a0b1004d 100644
--- a/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
+++ b/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
@@ -232,9 +232,11 @@ const ThumbnailImage = ({
   if (!image && !audio && !video) return null
   const isSquare = thumbnailRatio === "square"
   return (
-    <View className={cn("relative ml-4 h-24 overflow-hidden rounded-lg", isSquare ? "h-24" : "")}>
+    <View
+      className={cn("relative ml-4 flex h-full w-24 justify-center overflow-hidden rounded-lg")}
+    >
       {image &&
-        (thumbnailRatio === "square" ? (
+        (isSquare ? (
           <SquareImage image={image} blurhash={blurhash} onError={handleImageError} />
         ) : (
           <AspectRatioImage
@@ -247,11 +249,13 @@ const ThumbnailImage = ({
         ))}
 
       {video && (
-        <View className="absolute left-0 top-0 flex size-full justify-center overflow-hidden rounded-lg">
+        <View className="flex size-full items-center justify-center">
           <VideoView
-            style={{ aspectRatio: 1 }}
-            contentFit="cover"
             ref={videoViewRef}
+            className={cn("overflow-hidden rounded-lg", isSquare ? "size-24" : "")}
+            // eslint-disable-next-line react-native/no-inline-styles -- VideoView requires explicit width and height
+            style={{ width: "100%", height: "100%", aspectRatio: isSquare ? 1 : undefined }}
+            contentFit={isSquare ? "cover" : "contain"}
             player={videoPlayer}
             // The Android native controls will be shown when the video is paused
             nativeControls={isIOS || showVideoNativeControlsForAndroid}
@@ -327,13 +331,7 @@ const AspectRatioImage = ({
   }
 
   return (
-    <View
-      className="bg-tertiary-system-background my-auto ml-auto flex overflow-hidden rounded-lg"
-      style={{
-        width: scaledWidth,
-        height: scaledHeight,
-      }}
-    >
+    <View className="bg-tertiary-system-background flex max-w-full items-center justify-center overflow-hidden rounded-lg">
       <Image
         proxy={{
           width: 96,
@@ -371,10 +369,7 @@ const SquareImage = ({
           width: 96,
           height: 96,
         }}
-        style={{
-          width: 96,
-          height: 96,
-        }}
+        className="size-24"
         transition={100}
         source={{
           uri: image,