addressing PR comments

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>
This commit is contained in:
Lance Chant
2026-07-04 13:00:54 +02:00
parent d1637a778e
commit 0bb7aa68ae
3 changed files with 34 additions and 30 deletions

View File

@@ -2,8 +2,8 @@ import { Ionicons } from "@expo/vector-icons";
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models"; import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import type React from "react"; import type React from "react";
import { Platform, View, type ViewStyle } from "react-native"; import { Platform, View, type ViewStyle } from "react-native";
import { Text } from "@/components/common/Text";
import { scaleSize } from "@/utils/scaleSize"; import { scaleSize } from "@/utils/scaleSize";
import { Text } from "./common/Text";
const isAggregateType = (item: BaseItemDto) => const isAggregateType = (item: BaseItemDto) =>
item.Type === "Series" || item.Type === "BoxSet"; 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 * 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). * the watched checkmark is drawn natively and only the count needs RN).
*/ */
export const UnplayedCountBadge: React.FC<{ item: BaseItemDto }> = ({ export const UnplayedCountBadge: React.FC<{ item: BaseItemDto }> = React.memo(
item, ({ item }) => {
}) => { if (!isAggregateType(item)) return null;
if (!isAggregateType(item)) return null; if (item.UserData?.Played) return null;
if (item.UserData?.Played) return null; const unplayed = item.UserData?.UnplayedItemCount ?? 0;
const unplayed = item.UserData?.UnplayedItemCount ?? 0; if (unplayed <= 0) return null;
if (unplayed <= 0) return null;
if (Platform.isTV) { if (Platform.isTV) {
return ( return (
<View <View
style={[ style={[
tvBadgeBase, tvBadgeBase,
{ minWidth: scaleSize(28), paddingHorizontal: scaleSize(7) }, { minWidth: scaleSize(28), paddingHorizontal: scaleSize(7) },
]} ]}
>
<Text
style={{ fontSize: scaleSize(15), fontWeight: "700", color: "black" }}
> >
<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} {unplayed}
</Text> </Text>
</View> </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 }) => { export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
const isMovieOrEpisode = item.Type === "Movie" || item.Type === "Episode"; const isMovieOrEpisode = item.Type === "Movie" || item.Type === "Episode";

View File

@@ -1,8 +1,8 @@
import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models"; import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { useState } from "react"; import { useState } from "react";
import { View, type ViewProps } from "react-native"; import { View, type ViewProps } from "react-native";
import { WatchedIndicator } from "@/components/WatchedIndicator";
import { ItemImage } from "../common/ItemImage"; import { ItemImage } from "../common/ItemImage";
import { WatchedIndicator } from "../WatchedIndicator";
interface Props extends ViewProps { interface Props extends ViewProps {
item: BaseItemDto; item: BaseItemDto;

View File

@@ -3,9 +3,9 @@ import { Image } from "expo-image";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useMemo } from "react"; import { useMemo } from "react";
import { View } from "react-native"; import { View } from "react-native";
import { WatchedIndicator } from "@/components/WatchedIndicator";
import { apiAtom } from "@/providers/JellyfinProvider"; import { apiAtom } from "@/providers/JellyfinProvider";
import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl"; import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
import { WatchedIndicator } from "../WatchedIndicator";
type MoviePosterProps = { type MoviePosterProps = {
item: BaseItemDto; item: BaseItemDto;