From 0bb7aa68aeaf2dccd3cb4ec97c8bf56e5a3036ce Mon Sep 17 00:00:00 2001
From: Lance Chant <13349722+lancechant@users.noreply.github.com>
Date: Sat, 4 Jul 2026 13:00:54 +0200
Subject: [PATCH] addressing PR comments

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>
---
 components/WatchedIndicator.tsx     | 60 +++++++++++++++--------------
 components/posters/ItemPoster.tsx   |  2 +-
 components/posters/SeriesPoster.tsx |  2 +-
 3 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/components/WatchedIndicator.tsx b/components/WatchedIndicator.tsx
index 04fad0ac..33435396 100644
--- a/components/WatchedIndicator.tsx
+++ b/components/WatchedIndicator.tsx
@@ -2,8 +2,8 @@ import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import type React from "react";
 import { Platform, View, type ViewStyle } from "react-native";
+import { Text } from "@/components/common/Text";
 import { scaleSize } from "@/utils/scaleSize";
-import { Text } from "./common/Text";
 
 const isAggregateType = (item: BaseItemDto) =>
   item.Type === "Series" || item.Type === "BoxSet";
@@ -39,39 +39,43 @@ const mobileBadgeBase: ViewStyle = {
  * unconditionally as an overlay (e.g. on top of the tvOS glass poster, where
  * the watched checkmark is drawn natively and only the count needs RN).
  */
-export const UnplayedCountBadge: React.FC<{ item: BaseItemDto }> = ({
-  item,
-}) => {
-  if (!isAggregateType(item)) return null;
-  if (item.UserData?.Played) return null;
-  const unplayed = item.UserData?.UnplayedItemCount ?? 0;
-  if (unplayed <= 0) return null;
+export const UnplayedCountBadge: React.FC<{ item: BaseItemDto }> = React.memo(
+  ({ item }) => {
+    if (!isAggregateType(item)) return null;
+    if (item.UserData?.Played) return null;
+    const unplayed = item.UserData?.UnplayedItemCount ?? 0;
+    if (unplayed <= 0) return null;
 
-  if (Platform.isTV) {
-    return (
-      <View
-        style={[
-          tvBadgeBase,
-          { minWidth: scaleSize(28), paddingHorizontal: scaleSize(7) },
-        ]}
-      >
-        <Text
-          style={{ fontSize: scaleSize(15), fontWeight: "700", color: "black" }}
+    if (Platform.isTV) {
+      return (
+        <View
+          style={[
+            tvBadgeBase,
+            { minWidth: scaleSize(28), paddingHorizontal: scaleSize(7) },
+          ]}
         >
+          <Text
+            style={{
+              fontSize: scaleSize(15),
+              fontWeight: "700",
+              color: "black",
+            }}
+          >
+            {unplayed}
+          </Text>
+        </View>
+      );
+    }
+
+    return (
+      <View style={[mobileBadgeBase, { minWidth: 20, paddingHorizontal: 5 }]}>
+        <Text style={{ fontSize: 12, fontWeight: "700", color: "white" }}>
           {unplayed}
         </Text>
       </View>
     );
-  }
-
-  return (
-    <View style={[mobileBadgeBase, { minWidth: 20, paddingHorizontal: 5 }]}>
-      <Text style={{ fontSize: 12, fontWeight: "700", color: "white" }}>
-        {unplayed}
-      </Text>
-    </View>
-  );
-};
+  },
+);
 
 export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
   const isMovieOrEpisode = item.Type === "Movie" || item.Type === "Episode";
diff --git a/components/posters/ItemPoster.tsx b/components/posters/ItemPoster.tsx
index bcd857e7..9990727b 100644
--- a/components/posters/ItemPoster.tsx
+++ b/components/posters/ItemPoster.tsx
@@ -1,8 +1,8 @@
 import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useState } from "react";
 import { View, type ViewProps } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { ItemImage } from "../common/ItemImage";
-import { WatchedIndicator } from "../WatchedIndicator";
 
 interface Props extends ViewProps {
   item: BaseItemDto;
diff --git a/components/posters/SeriesPoster.tsx b/components/posters/SeriesPoster.tsx
index 5266ab3f..82cf146c 100644
--- a/components/posters/SeriesPoster.tsx
+++ b/components/posters/SeriesPoster.tsx
@@ -3,9 +3,9 @@ import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { View } from "react-native";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { WatchedIndicator } from "../WatchedIndicator";
 
 type MoviePosterProps = {
   item: BaseItemDto;