chore(deps): Update dependency react-native-worklets to v0.10.1

bun.lock

@@ -92,7 +92,7 @@
         "react-native-uuid": "^2.0.3",
         "react-native-volume-manager": "^2.0.8",
         "react-native-web": "^0.21.0",
-        "react-native-worklets": "0.8.3",
+        "react-native-worklets": "0.10.1",
         "sonner-native": "0.21.2",
         "tailwindcss": "3.3.2",
         "use-debounce": "^10.0.4",
@@ -1653,7 +1653,7 @@
 
     "react-native-web": ["react-native-web@0.21.2", "", { "dependencies": { "@babel/runtime": "^7.18.6", "@react-native/normalize-colors": "^0.74.1", "fbjs": "^3.0.4", "inline-style-prefixer": "^7.0.1", "memoize-one": "^6.0.0", "nullthrows": "^1.1.1", "postcss-value-parser": "^4.2.0", "styleq": "^0.1.3" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg=="],
 
-    "react-native-worklets": ["react-native-worklets@0.8.3", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.27.1", "@babel/plugin-transform-class-properties": "^7.27.1", "@babel/plugin-transform-classes": "^7.28.4", "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1", "@babel/plugin-transform-optional-chaining": "^7.27.1", "@babel/plugin-transform-shorthand-properties": "^7.27.1", "@babel/plugin-transform-template-literals": "^7.27.1", "@babel/plugin-transform-unicode-regex": "^7.27.1", "@babel/preset-typescript": "^7.27.1", "convert-source-map": "^2.0.0", "semver": "^7.7.3" }, "peerDependencies": { "@babel/core": "*", "@react-native/metro-config": "*", "react": "*", "react-native": "0.81 - 0.85" } }, "sha512-oCBJROyLU7yG/1R8s0INMflygTH71bx+5XcYkH0CM938TlhSoVbiunE1WVW5FZa51vwYqfLie/IXMX2s1Kh3eg=="],
+    "react-native-worklets": ["react-native-worklets@0.10.1", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.27.1", "@babel/plugin-transform-class-properties": "^7.28.6", "@babel/plugin-transform-classes": "^7.28.6", "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6", "@babel/plugin-transform-optional-chaining": "^7.28.6", "@babel/plugin-transform-shorthand-properties": "^7.27.1", "@babel/plugin-transform-template-literals": "^7.27.1", "@babel/plugin-transform-unicode-regex": "^7.27.1", "@babel/preset-typescript": "^7.28.5", "@babel/types": "^7.27.1", "convert-source-map": "^2.0.0", "semver": "^7.7.4" }, "peerDependencies": { "@babel/core": "*", "@react-native/metro-config": "*", "react": "*", "react-native": "0.83 - 0.86" } }, "sha512-62mRM19bDpfpdI8HLkEErcdOsrAPDtE9lA/sw+5lLRpzBHNhxaoj9QyY2KjXqUmirelxkX4zuPGTC3VdA0feJA=="],
 
     "react-refresh": ["react-refresh@0.14.2", "", {}, "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="],
 

components/WatchedIndicator.tsx

@@ -1,116 +1,43 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React from "react";
+import type React from "react";
-import { Platform, View, type ViewStyle } from "react-native";
+import { Platform, View } from "react-native";
-import { Text } from "@/components/common/Text";
-import { scaleSize } from "@/utils/scaleSize";
-
-const isAggregateType = (item: BaseItemDto) =>
-  item.Type === "Series" || item.Type === "BoxSet";
-
-// TV sizes are scaled relative to a 1920×1080 reference (see scaleSize).
-const tvBadgeBase: ViewStyle = {
-  position: "absolute",
-  top: scaleSize(8),
-  right: scaleSize(8),
-  height: scaleSize(28),
-  borderRadius: scaleSize(14),
-  backgroundColor: "rgba(255,255,255,0.92)",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-// Mobile uses raw dp — no scaling.
-const mobileBadgeBase: ViewStyle = {
-  position: "absolute",
-  top: 4,
-  right: 4,
-  height: 20,
-  borderRadius: 10,
-  backgroundColor: "#9333ea",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-/**
- * Renders the unplayed-episode count badge for Series/BoxSet items that still
- * have episodes left to watch. Returns null for non-aggregate types, fully
- * watched items, or items with no unplayed count, so it is safe to mount
- * 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 }> = 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",
-            }}
-          >
-            {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";
-  const isAggregate = isAggregateType(item);
-  const isPlayed = item.UserData?.Played === true;
-
   if (Platform.isTV) {
-    // Fully watched → white checkmark badge (top-right)
+    // TV: Show white checkmark when watched
-    if (isPlayed && (isMovieOrEpisode || isAggregate)) {
+    if (
+      item.UserData?.Played &&
+      (item.Type === "Movie" || item.Type === "Episode")
+    ) {
       return (
-        <View style={[tvBadgeBase, { width: scaleSize(28) }]}>
+        <View
-          <Ionicons name='checkmark' size={scaleSize(18)} color='black' />
+          style={{
+            position: "absolute",
+            top: 8,
+            right: 8,
+            backgroundColor: "rgba(255,255,255,0.9)",
+            borderRadius: 14,
+            width: 28,
+            height: 28,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Ionicons name='checkmark' size={18} color='black' />
         </View>
       );
     }
-    // Series/BoxSet with remaining episodes → count badge
+    return null;
-    return <UnplayedCountBadge item={item} />;
   }
 
-  // Mobile: purple corner ribbon for unwatched Movie/Episode (existing behavior)
+  // Mobile: Show purple triangle for unwatched
   return (
     <>
-      {isMovieOrEpisode && !isPlayed && (
+      {item.UserData?.Played === false &&
+        (item.Type === "Movie" || item.Type === "Episode") && (
           <View className='bg-purple-600 w-8 h-8 absolute -top-4 -right-4 rotate-45' />
         )}
-
-      {/* Fully watched Series/BoxSet → small purple checkmark */}
-      {isAggregate && isPlayed && (
-        <View style={[mobileBadgeBase, { width: 20 }]}>
-          <Ionicons name='checkmark' size={13} color='white' />
-        </View>
-      )}
-
-      {/* Series/BoxSet with remaining episodes → count badge */}
-      <UnplayedCountBadge item={item} />
     </>
   );
 };

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;

components/posters/SeriesPoster.tsx

@@ -3,7 +3,6 @@ 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";
 
@@ -53,7 +52,6 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
           width: "100%",
         }}
       />
-      <WatchedIndicator item={item} />
     </View>
   );
 };

components/tv/TVPosterCard.tsx

@@ -12,10 +12,7 @@ import {
 } from "react-native";
 import { ProgressBar } from "@/components/common/ProgressBar";
 import { Text } from "@/components/common/Text";
-import {
+import { WatchedIndicator } from "@/components/WatchedIndicator";
-  UnplayedCountBadge,
-  WatchedIndicator,
-} from "@/components/WatchedIndicator";
 import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import {
@@ -430,12 +427,6 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
           />
           {PlayButtonOverlay}
           {NowPlayingBadge}
-          {/*
-            The glass view draws the watched checkmark natively but cannot show
-            an unplayed-episode count, so render it as an RN overlay on top.
-            Returns null when not applicable (non-series / fully watched).
-          */}
-          <UnplayedCountBadge item={item} />
         </View>
       );
     }

package.json

@@ -115,7 +115,7 @@
     "react-native-uuid": "^2.0.3",
     "react-native-volume-manager": "^2.0.8",
     "react-native-web": "^0.21.0",
-    "react-native-worklets": "0.8.3",
+    "react-native-worklets": "0.10.1",
     "sonner-native": "0.21.2",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.4",