From eed4df6a8a5c0fb790f7188db73bb224ebb2f243 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Tue, 20 Aug 2024 19:18:51 +0200
Subject: [PATCH] fix: make posters a bit smaller

---
 app/(auth)/(tabs)/search/index.tsx          | 12 ++++++------
 components/ContinueWatchingPoster.tsx       | 12 ++++++------
 components/home/ScrollingCollectionList.tsx |  2 +-
 components/medialists/MediaListSection.tsx  |  4 +++-
 components/series/NextUp.tsx                |  2 +-
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/(auth)/(tabs)/search/index.tsx b/app/(auth)/(tabs)/search/index.tsx
index 4b0b073d..a8c3bff3 100644
--- a/app/(auth)/(tabs)/search/index.tsx
+++ b/app/(auth)/(tabs)/search/index.tsx
@@ -237,7 +237,7 @@ export default function search() {
                 renderItem={(item) => (
                   <TouchableOpacity
                     key={item.Id}
-                    className="flex flex-col w-32"
+                    className="flex flex-col w-28"
                     onPress={() => router.push(`/items/${item.Id}`)}
                   >
                     <MoviePoster item={item} key={item.Id} />
@@ -262,7 +262,7 @@ export default function search() {
                   <TouchableOpacity
                     key={item.Id}
                     onPress={() => router.push(`/series/${item.Id}`)}
-                    className="flex flex-col w-32"
+                    className="flex flex-col w-28"
                   >
                     <SeriesPoster item={item} key={item.Id} />
                     <Text numberOfLines={2} className="mt-2">
@@ -286,7 +286,7 @@ export default function search() {
                   <TouchableOpacity
                     key={item.Id}
                     onPress={() => router.push(`/items/${item.Id}`)}
-                    className="flex flex-col w-48"
+                    className="flex flex-col w-44"
                   >
                     <ContinueWatchingPoster item={item} />
                     <ItemCardText item={item} />
@@ -305,7 +305,7 @@ export default function search() {
                   <TouchableItemRouter
                     item={item}
                     key={item.Id}
-                    className="flex flex-col w-32"
+                    className="flex flex-col w-28"
                   >
                     <AlbumCover id={item.Id} />
                     <ItemCardText item={item} />
@@ -324,7 +324,7 @@ export default function search() {
                   <TouchableItemRouter
                     item={item}
                     key={item.Id}
-                    className="flex flex-col w-32"
+                    className="flex flex-col w-28"
                   >
                     <AlbumCover id={item.Id} />
                     <ItemCardText item={item} />
@@ -343,7 +343,7 @@ export default function search() {
                   <TouchableItemRouter
                     item={item}
                     key={item.Id}
-                    className="flex flex-col w-32"
+                    className="flex flex-col w-28"
                   >
                     <AlbumCover id={item.AlbumId} />
                     <ItemCardText item={item} />
diff --git a/components/ContinueWatchingPoster.tsx b/components/ContinueWatchingPoster.tsx
index 895e91d3..ac68b512 100644
--- a/components/ContinueWatchingPoster.tsx
+++ b/components/ContinueWatchingPoster.tsx
@@ -21,23 +21,23 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       getPrimaryImageUrl({
         api,
         item,
-        quality: 70,
-        width: 300,
+        quality: 90,
+        width: 176 * 2,
       }),
-    [item],
+    [item]
   );
 
   const [progress, setProgress] = useState(
-    item.UserData?.PlayedPercentage || 0,
+    item.UserData?.PlayedPercentage || 0
   );
 
   if (!url)
     return (
-      <View className="w-48 aspect-video border border-neutral-800"></View>
+      <View className="w-44 aspect-video border border-neutral-800"></View>
     );
 
   return (
-    <View className="w-48 relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
+    <View className="w-44 relative aspect-video rounded-lg overflow-hidden border border-neutral-800">
       <Image
         key={item.Id}
         id={item.Id}
diff --git a/components/home/ScrollingCollectionList.tsx b/components/home/ScrollingCollectionList.tsx
index d4164f7d..35b7dac1 100644
--- a/components/home/ScrollingCollectionList.tsx
+++ b/components/home/ScrollingCollectionList.tsx
@@ -41,7 +41,7 @@ export const ScrollingCollectionList: React.FC<Props> = ({
             key={index}
             item={item}
             className={`flex flex-col
-              ${orientation === "vertical" ? "w-32" : "w-48"}
+              ${orientation === "vertical" ? "w-28" : "w-44"}
             `}
           >
             <View>
diff --git a/components/medialists/MediaListSection.tsx b/components/medialists/MediaListSection.tsx
index 99732831..118600a3 100644
--- a/components/medialists/MediaListSection.tsx
+++ b/components/medialists/MediaListSection.tsx
@@ -13,6 +13,7 @@ import { InfiniteHorizontalScroll } from "../common/InfiniteHorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import MoviePoster from "../posters/MoviePoster";
 import { useCallback } from "react";
+import { ItemCardText } from "../ItemCardText";
 
 interface Props extends ViewProps {
   collection: BaseItemDto;
@@ -56,11 +57,12 @@ export const MediaListSection: React.FC<Props> = ({ collection, ...props }) => {
             key={index}
             item={item}
             className={`flex flex-col
-              ${"w-32"}
+              ${"w-28"}
             `}
           >
             <View>
               <MoviePoster item={item} />
+              <ItemCardText item={item} />
             </View>
           </TouchableItemRouter>
         )}
diff --git a/components/series/NextUp.tsx b/components/series/NextUp.tsx
index 346a9227..76a05aa3 100644
--- a/components/series/NextUp.tsx
+++ b/components/series/NextUp.tsx
@@ -52,7 +52,7 @@ export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
               router.push(`/(auth)/items/${item.Id}`);
             }}
             key={item.Id}
-            className="flex flex-col w-32"
+            className="flex flex-col w-44"
           >
             <ContinueWatchingPoster item={item} />
             <ItemCardText item={item} />